feat: plan limits, café location, nearby API, Iran map section
CI/CD / CI · API (dotnet build + test) (push) Successful in 56s
CI/CD / CI · Admin API (dotnet build) (push) Successful in 49s
CI/CD / CI · Dashboard (tsc) (push) Successful in 1m4s
CI/CD / CI · Admin Web (tsc) (push) Successful in 34s
CI/CD / CI · Website (tsc) (push) Successful in 44s
CI/CD / CI · Koja (tsc) (push) Successful in 50s
CI/CD / Deploy · all services (push) Successful in 3m15s

• PlanLimits: add MaxMenuCategories (Free→3), MaxMenuItems (Free→30),
  CanAccessCrm and CanAccessStatistics (Pro+ only)
• MenuController: enforce category/item limits before create (403 + PLAN_LIMIT_REACHED)
• Cafe entity + EF migration: Latitude/Longitude (double?, nullable)
• CafeSettingsController: PATCH accepts lat/lng with range validation
• PublicController: GET /api/public/map-markers (marketing SVG map feed)
  and GET /api/public/nearby (Koja nearby-cafés with Haversine sort)
• Dashboard settings: location card with OSM iframe preview + Neshan link
• Website homepage: IranMapSection — stylised SVG silhouette with
  SMIL-animated blinking dots at real café coordinates

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-01 15:09:09 +03:30
parent 665e3ca279
commit 5e980cdfc0
12 changed files with 619 additions and 4 deletions
@@ -87,6 +87,21 @@ public class CafeSettingsController : CafeApiControllerBase
if (request.AllowBranchTaxOverride is bool allowTax) if (request.AllowBranchTaxOverride is bool allowTax)
cafe.AllowBranchTaxOverride = allowTax; cafe.AllowBranchTaxOverride = allowTax;
// Location: explicit null-clear flag OR new values
if (request.ClearLocation)
{
cafe.Latitude = null;
cafe.Longitude = null;
}
else if (request.Latitude.HasValue && request.Longitude.HasValue)
{
if (request.Latitude is < -90 or > 90 || request.Longitude is < -180 or > 180)
return BadRequest(new ApiResponse<object>(false, null,
new ApiError("INVALID_LOCATION", "Latitude must be 90…90 and longitude 180…180.")));
cafe.Latitude = request.Latitude;
cafe.Longitude = request.Longitude;
}
await _db.SaveChangesAsync(ct); await _db.SaveChangesAsync(ct);
return Ok(new ApiResponse<CafeSettingsDto>(true, ToDto(cafe))); return Ok(new ApiResponse<CafeSettingsDto>(true, ToDto(cafe)));
} }
@@ -106,5 +121,7 @@ public class CafeSettingsController : CafeApiControllerBase
cafe.PlanExpiresAt, cafe.PlanExpiresAt,
CafeThemeMapping.FromJson(cafe.ThemeJson), CafeThemeMapping.FromJson(cafe.ThemeJson),
cafe.DefaultTaxRate, cafe.DefaultTaxRate,
cafe.AllowBranchTaxOverride); cafe.AllowBranchTaxOverride,
cafe.Latitude,
cafe.Longitude);
} }
+34 -1
View File
@@ -1,9 +1,12 @@
using FluentValidation; using FluentValidation;
using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Meezi.API.Models.Menu; using Meezi.API.Models.Menu;
using Meezi.API.Services; using Meezi.API.Services;
using Meezi.Core.Constants;
using Meezi.Core.Enums; using Meezi.Core.Enums;
using Meezi.Core.Interfaces; using Meezi.Core.Interfaces;
using Meezi.Infrastructure.Data;
using Meezi.Shared; using Meezi.Shared;
namespace Meezi.API.Controllers; namespace Meezi.API.Controllers;
@@ -15,17 +18,25 @@ public class MenuController : CafeApiControllerBase
private readonly IMenuAi3dGenerationService _menuAi3d; private readonly IMenuAi3dGenerationService _menuAi3d;
private readonly IValidator<CreateMenuCategoryRequest> _createCategoryValidator; private readonly IValidator<CreateMenuCategoryRequest> _createCategoryValidator;
private readonly IValidator<CreateMenuItemRequest> _createItemValidator; private readonly IValidator<CreateMenuItemRequest> _createItemValidator;
private readonly AppDbContext _db;
private const string CategoryLimitMessage =
"محدودیت دسته‌بندی پلن رایگان (۳ دسته). برای افزودن دسته‌بندی بیشتر، پلن خود را ارتقا دهید.";
private const string ItemLimitMessage =
"محدودیت آیتم منو پلن رایگان (۳۰ آیتم). برای افزودن آیتم بیشتر، پلن خود را ارتقا دهید.";
public MenuController( public MenuController(
IMenuService menuService, IMenuService menuService,
IMenuAi3dGenerationService menuAi3d, IMenuAi3dGenerationService menuAi3d,
IValidator<CreateMenuCategoryRequest> createCategoryValidator, IValidator<CreateMenuCategoryRequest> createCategoryValidator,
IValidator<CreateMenuItemRequest> createItemValidator) IValidator<CreateMenuItemRequest> createItemValidator,
AppDbContext db)
{ {
_menuService = menuService; _menuService = menuService;
_menuAi3d = menuAi3d; _menuAi3d = menuAi3d;
_createCategoryValidator = createCategoryValidator; _createCategoryValidator = createCategoryValidator;
_createItemValidator = createItemValidator; _createItemValidator = createItemValidator;
_db = db;
} }
[HttpGet("categories")] [HttpGet("categories")]
@@ -47,6 +58,17 @@ public class MenuController : CafeApiControllerBase
var validation = await _createCategoryValidator.ValidateAsync(request, cancellationToken); var validation = await _createCategoryValidator.ValidateAsync(request, cancellationToken);
if (!validation.IsValid) return BadRequest(ValidationError(validation)); if (!validation.IsValid) return BadRequest(ValidationError(validation));
var tier = tenant.PlanTier ?? PlanTier.Free;
var max = PlanLimits.MaxMenuCategories(tier);
if (max != int.MaxValue)
{
var count = await _db.MenuCategories.CountAsync(
c => c.CafeId == cafeId && c.DeletedAt == null, cancellationToken);
if (count >= max)
return StatusCode(403, new ApiResponse<object>(false, null,
new ApiError("PLAN_LIMIT_REACHED", CategoryLimitMessage)));
}
var data = await _menuService.CreateCategoryAsync(cafeId, request, cancellationToken); var data = await _menuService.CreateCategoryAsync(cafeId, request, cancellationToken);
return Ok(new ApiResponse<MenuCategoryDto>(true, data)); return Ok(new ApiResponse<MenuCategoryDto>(true, data));
} }
@@ -97,6 +119,17 @@ public class MenuController : CafeApiControllerBase
var validation = await _createItemValidator.ValidateAsync(request, cancellationToken); var validation = await _createItemValidator.ValidateAsync(request, cancellationToken);
if (!validation.IsValid) return BadRequest(ValidationError(validation)); if (!validation.IsValid) return BadRequest(ValidationError(validation));
var tier = tenant.PlanTier ?? PlanTier.Free;
var max = PlanLimits.MaxMenuItems(tier);
if (max != int.MaxValue)
{
var count = await _db.MenuItems.CountAsync(
i => i.CafeId == cafeId && i.DeletedAt == null, cancellationToken);
if (count >= max)
return StatusCode(403, new ApiResponse<object>(false, null,
new ApiError("PLAN_LIMIT_REACHED", ItemLimitMessage)));
}
var data = await _menuService.CreateItemAsync(cafeId, request, cancellationToken); var data = await _menuService.CreateItemAsync(cafeId, request, cancellationToken);
if (data is null) return NotFoundError("Category not found."); if (data is null) return NotFoundError("Category not found.");
return Ok(new ApiResponse<MenuItemDto>(true, data)); return Ok(new ApiResponse<MenuItemDto>(true, data));
@@ -367,4 +367,101 @@ public class PublicController : ControllerBase
return Ok(new ApiResponse<object>(true, null)); return Ok(new ApiResponse<object>(true, null));
} }
/// <summary>
/// Returns all cafés that have a known location (Latitude/Longitude set).
/// Used by the marketing website SVG map to render blinking dots.
/// </summary>
[HttpGet("map-markers")]
[EnableRateLimiting("public-read")]
public async Task<IActionResult> GetMapMarkers(
[FromServices] AppDbContext db,
CancellationToken ct)
{
var markers = await db.Cafes
.AsNoTracking()
.Where(c => c.DeletedAt == null && c.Latitude != null && c.Longitude != null)
.Select(c => new
{
c.Id,
c.Name,
c.Slug,
c.City,
c.Latitude,
c.Longitude,
c.LogoUrl
})
.ToListAsync(ct);
return Ok(new ApiResponse<object>(true, markers));
}
/// <summary>
/// Returns cafés near a given coordinate, sorted by distance ascending.
/// Used by Koja guest page to show "nearby cafés" section.
/// At most <paramref name="limit"/> results (default 5, max 20).
/// </summary>
[HttpGet("nearby")]
[EnableRateLimiting("public-read")]
public async Task<IActionResult> GetNearbyCafes(
[FromQuery] double lat,
[FromQuery] double lng,
[FromQuery] string? excludeSlug,
[FromQuery] int limit,
[FromServices] AppDbContext db,
CancellationToken ct)
{
limit = Math.Clamp(limit <= 0 ? 5 : limit, 1, 20);
// Pull all located cafés from DB (typically small set) and sort in memory with Haversine.
var cafes = await db.Cafes
.AsNoTracking()
.Where(c => c.DeletedAt == null
&& c.Latitude != null
&& c.Longitude != null
&& (excludeSlug == null || c.Slug != excludeSlug))
.Select(c => new
{
c.Id,
c.Name,
c.Slug,
c.City,
c.Latitude,
c.Longitude,
c.LogoUrl,
c.CoverImageUrl
})
.ToListAsync(ct);
static double ToRad(double deg) => deg * Math.PI / 180.0;
static double Haversine(double lat1, double lon1, double lat2, double lon2)
{
const double R = 6371; // km
var dLat = ToRad(lat2 - lat1);
var dLon = ToRad(lon2 - lon1);
var a = Math.Sin(dLat / 2) * Math.Sin(dLat / 2)
+ Math.Cos(ToRad(lat1)) * Math.Cos(ToRad(lat2))
* Math.Sin(dLon / 2) * Math.Sin(dLon / 2);
return R * 2 * Math.Atan2(Math.Sqrt(a), Math.Sqrt(1 - a));
}
var nearby = cafes
.Select(c => new
{
c.Id,
c.Name,
c.Slug,
c.City,
c.Latitude,
c.Longitude,
c.LogoUrl,
c.CoverImageUrl,
DistanceKm = Math.Round(Haversine(lat, lng, c.Latitude!.Value, c.Longitude!.Value), 1)
})
.OrderBy(c => c.DistanceKm)
.Take(limit)
.ToList();
return Ok(new ApiResponse<object>(true, nearby));
}
} }
+10 -2
View File
@@ -15,7 +15,9 @@ public record CafeSettingsDto(
DateTime? PlanExpiresAt, DateTime? PlanExpiresAt,
CafeThemeDto Theme, CafeThemeDto Theme,
decimal DefaultTaxRate, decimal DefaultTaxRate,
bool AllowBranchTaxOverride); bool AllowBranchTaxOverride,
double? Latitude,
double? Longitude);
public record PatchCafeSettingsRequest( public record PatchCafeSettingsRequest(
string? Name, string? Name,
@@ -30,4 +32,10 @@ public record PatchCafeSettingsRequest(
string? SnappfoodVendorId, string? SnappfoodVendorId,
CafeThemeDto? Theme, CafeThemeDto? Theme,
decimal? DefaultTaxRate, decimal? DefaultTaxRate,
bool? AllowBranchTaxOverride); bool? AllowBranchTaxOverride,
/// <summary>WGS-84 latitude. Send null to clear.</summary>
double? Latitude,
/// <summary>WGS-84 longitude. Send null to clear.</summary>
double? Longitude,
/// <summary>When true, Latitude and Longitude are explicitly being cleared (set to null).</summary>
bool ClearLocation = false);
+20
View File
@@ -54,4 +54,24 @@ public static class PlanLimits
PlanTier.Enterprise => 100, PlanTier.Enterprise => 100,
_ => 0 _ => 0
}; };
/// <summary>Maximum active menu categories. Free tier is capped at 3; Pro+ is unlimited.</summary>
public static int MaxMenuCategories(PlanTier tier) => tier switch
{
PlanTier.Free => 3,
_ => int.MaxValue
};
/// <summary>Maximum menu items. Free tier is capped at 30; Pro+ is unlimited.</summary>
public static int MaxMenuItems(PlanTier tier) => tier switch
{
PlanTier.Free => 30,
_ => int.MaxValue
};
/// <summary>CRM (customers, loyalty) is only available on Pro and above.</summary>
public static bool CanAccessCrm(PlanTier tier) => tier >= PlanTier.Pro;
/// <summary>Statistics and analytics dashboards are only available on Pro and above.</summary>
public static bool CanAccessStatistics(PlanTier tier) => tier >= PlanTier.Pro;
} }
+4
View File
@@ -37,6 +37,10 @@ public class Cafe : BaseEntity
public string? InstagramHandle { get; set; } public string? InstagramHandle { get; set; }
/// <summary>Cafe website URL, max 300 chars.</summary> /// <summary>Cafe website URL, max 300 chars.</summary>
public string? WebsiteUrl { get; set; } public string? WebsiteUrl { get; set; }
/// <summary>WGS-84 latitude (positive = north). Null until owner sets location.</summary>
public double? Latitude { get; set; }
/// <summary>WGS-84 longitude (positive = east). Null until owner sets location.</summary>
public double? Longitude { get; set; }
/// <summary>Default VAT/sales tax % for all branches unless branch override is allowed.</summary> /// <summary>Default VAT/sales tax % for all branches unless branch override is allowed.</summary>
public decimal DefaultTaxRate { get; set; } = 9m; public decimal DefaultTaxRate { get; set; } = 9m;
public bool AllowBranchTaxOverride { get; set; } public bool AllowBranchTaxOverride { get; set; }
@@ -0,0 +1,38 @@
using Microsoft.EntityFrameworkCore.Migrations;
#nullable disable
namespace Meezi.Infrastructure.Data.Migrations
{
/// <inheritdoc />
public partial class AddCafeLocation : Migration
{
/// <inheritdoc />
protected override void Up(MigrationBuilder migrationBuilder)
{
migrationBuilder.AddColumn<double>(
name: "Latitude",
table: "Cafes",
type: "double precision",
nullable: true);
migrationBuilder.AddColumn<double>(
name: "Longitude",
table: "Cafes",
type: "double precision",
nullable: true);
}
/// <inheritdoc />
protected override void Down(MigrationBuilder migrationBuilder)
{
migrationBuilder.DropColumn(
name: "Latitude",
table: "Cafes");
migrationBuilder.DropColumn(
name: "Longitude",
table: "Cafes");
}
}
}
@@ -327,9 +327,15 @@ namespace Meezi.Infrastructure.Data.Migrations
b.Property<bool>("IsVerified") b.Property<bool>("IsVerified")
.HasColumnType("boolean"); .HasColumnType("boolean");
b.Property<double?>("Latitude")
.HasColumnType("double precision");
b.Property<string>("LogoUrl") b.Property<string>("LogoUrl")
.HasColumnType("text"); .HasColumnType("text");
b.Property<double?>("Longitude")
.HasColumnType("double precision");
b.Property<string>("Name") b.Property<string>("Name")
.IsRequired() .IsRequired()
.HasMaxLength(200) .HasMaxLength(200)
@@ -15,6 +15,23 @@ import { Input } from "@/components/ui/input";
import { LabeledField } from "@/components/ui/labeled-field"; import { LabeledField } from "@/components/ui/labeled-field";
import { notify } from "@/lib/notify"; import { notify } from "@/lib/notify";
// ── Location map preview ──────────────────────────────────────────────────────
function LocationMapPreview({ lat, lng }: { lat: number; lng: number }) {
const zoom = 15;
const src = `https://www.openstreetmap.org/export/embed.html?bbox=${lng - 0.01},${lat - 0.01},${lng + 0.01},${lat + 0.01}&layer=mapnik&marker=${lat},${lng}`;
return (
<div className="relative w-full overflow-hidden rounded-lg border" style={{ height: 220 }}>
<iframe
src={src}
title="location preview"
className="h-full w-full border-0"
loading="lazy"
allowFullScreen
/>
</div>
);
}
type SettingsShopPanelProps = { type SettingsShopPanelProps = {
cafeId: string; cafeId: string;
}; };
@@ -33,9 +50,20 @@ export function SettingsShopPanel({ cafeId }: SettingsShopPanelProps) {
const [logoUrl, setLogoUrl] = useState(""); const [logoUrl, setLogoUrl] = useState("");
const [coverImageUrl, setCoverImageUrl] = useState(""); const [coverImageUrl, setCoverImageUrl] = useState("");
const [snappfoodVendorId, setSnappfoodVendorId] = useState(""); const [snappfoodVendorId, setSnappfoodVendorId] = useState("");
const [latInput, setLatInput] = useState("");
const [lngInput, setLngInput] = useState("");
const [locationError, setLocationError] = useState<string | null>(null);
const { data: cafeSettings } = useCafeSettings(cafeId); const { data: cafeSettings } = useCafeSettings(cafeId);
const parsedLat = parseFloat(latInput);
const parsedLng = parseFloat(lngInput);
const hasValidLocation =
!isNaN(parsedLat) &&
!isNaN(parsedLng) &&
parsedLat >= 24 && parsedLat <= 40 &&
parsedLng >= 44 && parsedLng <= 64;
useEffect(() => { useEffect(() => {
if (!cafeSettings) return; if (!cafeSettings) return;
setName(cafeSettings.name ?? ""); setName(cafeSettings.name ?? "");
@@ -47,6 +75,8 @@ export function SettingsShopPanel({ cafeId }: SettingsShopPanelProps) {
setLogoUrl(cafeSettings.logoUrl ?? ""); setLogoUrl(cafeSettings.logoUrl ?? "");
setCoverImageUrl(cafeSettings.coverImageUrl ?? ""); setCoverImageUrl(cafeSettings.coverImageUrl ?? "");
setSnappfoodVendorId(cafeSettings.snappfoodVendorId ?? ""); setSnappfoodVendorId(cafeSettings.snappfoodVendorId ?? "");
setLatInput(cafeSettings.latitude != null ? String(cafeSettings.latitude) : "");
setLngInput(cafeSettings.longitude != null ? String(cafeSettings.longitude) : "");
}, [cafeSettings]); }, [cafeSettings]);
const saveProfile = useMutation({ const saveProfile = useMutation({
@@ -83,6 +113,31 @@ export function SettingsShopPanel({ cafeId }: SettingsShopPanelProps) {
}, },
}); });
const saveLocation = useMutation({
mutationFn: () => {
setLocationError(null);
if (!hasValidLocation && (latInput || lngInput)) {
throw new Error("INVALID_LOCATION");
}
const body = latInput && lngInput && hasValidLocation
? { latitude: parsedLat, longitude: parsedLng }
: { clearLocation: true };
return apiPatch<CafeSettings>(`/api/cafes/${cafeId}/settings`, body);
},
onSuccess: (data) => {
queryClient.setQueryData(cafeSettingsQueryKey(cafeId), data);
notify.success("موقعیت ذخیره شد");
},
onError: (err: unknown) => {
const msg = err instanceof Error ? err.message : String(err);
if (msg === "INVALID_LOCATION" || msg.includes("INVALID_LOCATION")) {
setLocationError("مختصات نامعتبر است. مثال: عرض جغرافیایی ۳۵.۶۸۹، طول جغرافیایی ۵۱.۳۸۹");
} else {
notify.error("خطا در ذخیره موقعیت");
}
},
});
const uploadLogo = useMutation({ const uploadLogo = useMutation({
mutationFn: (file: File) => mutationFn: (file: File) =>
apiUpload<{ url: string }>(`/api/cafes/${cafeId}/media/cafe-logo`, file), apiUpload<{ url: string }>(`/api/cafes/${cafeId}/media/cafe-logo`, file),
@@ -249,6 +304,80 @@ export function SettingsShopPanel({ cafeId }: SettingsShopPanelProps) {
</Button> </Button>
</CardContent> </CardContent>
</Card> </Card>
{/* Location card */}
<Card className="rounded-xl border border-border/80 shadow-sm">
<CardHeader className="px-6 pb-4 pt-6">
<CardTitle className="text-base font-medium">موقعیت روی نقشه</CardTitle>
</CardHeader>
<CardContent className="space-y-4 px-6 pb-6 pt-0">
<p className="text-sm leading-relaxed text-muted-foreground">
موقعیت دقیق کافه/رستوران خود را وارد کنید تا مشتریان بتوانند آن را پیدا کنند.
برای دریافت مختصات دقیق میتوانید از{" "}
<a
href={`https://neshan.org/maps/@${parsedLat || 35.6892},${parsedLng || 51.389},15z`}
target="_blank"
rel="noopener noreferrer"
className="text-primary underline"
>
نقشه نشان
</a>{" "}
استفاده کنید.
</p>
<div className="grid gap-4 sm:grid-cols-2">
<LabeledField label="عرض جغرافیایی (Latitude)" htmlFor="cafe-lat">
<Input
id="cafe-lat"
value={latInput}
onChange={(e) => { setLatInput(e.target.value); setLocationError(null); }}
placeholder="مثال: ۳۵.۶۸۹۲"
dir="ltr"
className="text-end"
inputMode="decimal"
/>
</LabeledField>
<LabeledField label="طول جغرافیایی (Longitude)" htmlFor="cafe-lng">
<Input
id="cafe-lng"
value={lngInput}
onChange={(e) => { setLngInput(e.target.value); setLocationError(null); }}
placeholder="مثال: ۵۱.۳۸۹"
dir="ltr"
className="text-end"
inputMode="decimal"
/>
</LabeledField>
</div>
{locationError && (
<p className="text-xs text-destructive">{locationError}</p>
)}
{hasValidLocation && (
<LocationMapPreview lat={parsedLat} lng={parsedLng} />
)}
<div className="flex flex-wrap gap-2">
<Button
className="bg-[#0F6E56] hover:bg-[#0c5e46]"
disabled={saveLocation.isPending}
onClick={() => saveLocation.mutate()}
>
ذخیره موقعیت
</Button>
{(latInput || lngInput) && (
<Button
variant="ghost"
size="sm"
onClick={() => { setLatInput(""); setLngInput(""); setLocationError(null); }}
>
پاک کردن موقعیت
</Button>
)}
</div>
</CardContent>
</Card>
</div> </div>
); );
} }
@@ -18,6 +18,8 @@ export type CafeSettings = {
theme: CafeTheme; theme: CafeTheme;
defaultTaxRate?: number; defaultTaxRate?: number;
allowBranchTaxOverride?: boolean; allowBranchTaxOverride?: boolean;
latitude?: number | null;
longitude?: number | null;
}; };
export function cafeSettingsQueryKey(cafeId: string) { export function cafeSettingsQueryKey(cafeId: string) {
+2
View File
@@ -7,6 +7,7 @@ import { Hero } from "@/components/sections/hero";
import { Stats } from "@/components/sections/stats"; import { Stats } from "@/components/sections/stats";
import { TrustBar } from "@/components/sections/trust-bar"; import { TrustBar } from "@/components/sections/trust-bar";
import { Features } from "@/components/sections/features"; import { Features } from "@/components/sections/features";
import { IranMapSection } from "@/components/sections/iran-map-section";
import { HowItWorks } from "@/components/sections/how-it-works"; import { HowItWorks } from "@/components/sections/how-it-works";
import { AppPromo } from "@/components/sections/app-promo"; import { AppPromo } from "@/components/sections/app-promo";
import { Testimonials } from "@/components/sections/testimonials"; import { Testimonials } from "@/components/sections/testimonials";
@@ -41,6 +42,7 @@ export default async function HomePage({ params }: { params: Promise<{ locale: s
<Hero /> <Hero />
<TrustBar /> <TrustBar />
<Stats /> <Stats />
<IranMapSection />
<Features /> <Features />
<HowItWorks /> <HowItWorks />
<AppPromo /> <AppPromo />
@@ -0,0 +1,259 @@
/**
* IranMapSection — server component
* Fetches real café locations from the API and overlays them as blinking dots
* on a stylised SVG silhouette of Iran.
*/
import { Suspense } from "react";
// ── Types ─────────────────────────────────────────────────────────────────────
type MapMarker = {
id: string;
name: string;
city: string | null;
latitude: number;
longitude: number;
};
type MarkersApiResponse = {
success: boolean;
data: MapMarker[];
};
// ── Coordinate transform ──────────────────────────────────────────────────────
// Iran bounding box (degrees)
const MIN_LNG = 44;
const MAX_LNG = 64;
const MIN_LAT = 24;
const MAX_LAT = 41;
const SVG_W = 600;
const SVG_H = 500;
const toX = (lng: number) =>
((lng - MIN_LNG) / (MAX_LNG - MIN_LNG)) * SVG_W;
const toY = (lat: number) =>
((MAX_LAT - lat) / (MAX_LAT - MIN_LAT)) * SVG_H;
function toPt([lng, lat]: [number, number]) {
return `${toX(lng).toFixed(1)},${toY(lat).toFixed(1)}`;
}
// ── Iran silhouette ────────────────────────────────────────────────────────────
// Simplified 40-point polygon; approximate but recognisable.
// Coordinates are [longitude, latitude] going clockwise from NW.
const IRAN_OUTLINE: [number, number][] = [
// NW corner / Turkey-Armenia-Azerbaijan
[44.8, 39.6], [45.5, 39.2], [46.2, 38.9],
[46.8, 39.1], [47.6, 38.9],
// Caspian coast (the concave notch heading south then north again)
[48.3, 38.4], [49.0, 37.5], [49.9, 37.2],
[51.0, 36.9], [52.2, 36.8], [53.0, 36.7],
[54.0, 37.1], [54.7, 37.5],
// NE / Turkmenistan
[55.6, 37.4], [56.9, 37.1], [57.7, 36.8],
[58.7, 37.5], [59.4, 36.8], [60.1, 36.7],
// East / Afghanistan
[61.2, 36.5], [61.3, 35.7], [62.0, 35.5],
[62.5, 34.0], [63.0, 33.0], [63.2, 31.5],
// SE / Pakistan Oman Sea
[61.8, 29.8], [60.9, 29.5], [60.0, 27.5],
[59.0, 25.9], [58.5, 25.4],
// South coast (Persian Gulf, west-bound)
[57.5, 25.3], [56.4, 25.9], [55.6, 26.0],
[54.5, 27.0], [53.4, 27.3], [52.4, 28.0],
[51.1, 28.4], [50.4, 29.1], [49.0, 29.6],
[48.5, 30.2], [48.2, 30.8],
// West / Iraq border
[47.7, 31.0], [47.2, 32.0], [46.8, 33.2],
[46.2, 34.4], [45.5, 36.0], [45.0, 37.0],
[44.8, 38.1], [44.5, 38.9], [44.8, 39.6],
];
const IRAN_PATH =
"M " +
IRAN_OUTLINE.map(toPt).join(" L ") +
" Z";
// A handful of major cities shown as faint reference dots
const MAJOR_CITIES: { name: string; lng: number; lat: number }[] = [
{ name: "تهران", lng: 51.389, lat: 35.689 },
{ name: "مشهد", lng: 59.608, lat: 36.297 },
{ name: "اصفهان", lng: 51.668, lat: 32.661 },
{ name: "شیراز", lng: 52.531, lat: 29.594 },
{ name: "تبریز", lng: 46.291, lat: 38.08 },
{ name: "اهواز", lng: 48.683, lat: 31.318 },
];
// ── Data fetcher ──────────────────────────────────────────────────────────────
async function fetchMarkers(): Promise<MapMarker[]> {
try {
const apiBase =
process.env.MEEZI_API_URL ?? "https://api.meezi.ir";
const res = await fetch(`${apiBase}/api/public/map-markers`, {
next: { revalidate: 3600 },
});
if (!res.ok) return [];
const json = (await res.json()) as MarkersApiResponse;
return json.data ?? [];
} catch {
return [];
}
}
// ── Sub-components ────────────────────────────────────────────────────────────
async function IranMapSvg() {
const markers = await fetchMarkers();
return (
<div className="relative mx-auto w-full max-w-lg select-none">
<svg
viewBox={`0 0 ${SVG_W} ${SVG_H}`}
aria-label="نقشه ایران با موقعیت کافه‌ها"
className="w-full drop-shadow-lg"
>
{/* Glow filter */}
<defs>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<radialGradient id="mapGrad" cx="50%" cy="50%" r="60%">
<stop offset="0%" stopColor="#e8f5f1" />
<stop offset="100%" stopColor="#d1ece5" />
</radialGradient>
</defs>
{/* Iran silhouette */}
<path
d={IRAN_PATH}
fill="url(#mapGrad)"
stroke="#0F6E56"
strokeWidth="2"
strokeLinejoin="round"
opacity="0.9"
/>
{/* Major city reference dots (faint) */}
{MAJOR_CITIES.map((city) => (
<g key={city.name}>
<circle
cx={toX(city.lng)}
cy={toY(city.lat)}
r={3}
fill="#0F6E56"
opacity={0.25}
/>
</g>
))}
{/* Café blinking dots */}
{markers.map((m, idx) => {
const cx = toX(m.longitude);
const cy = toY(m.latitude);
// Stagger animation delay so dots don't all pulse in sync
const delay = `${(idx * 0.4) % 2}s`;
return (
<g key={m.id} filter="url(#glow)">
{/* Outer pulse ring */}
<circle cx={cx} cy={cy} r={10} fill="#0F6E56" opacity={0.2}>
<animate
attributeName="r"
values="8;16;8"
dur="2.4s"
begin={delay}
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
values="0.25;0;0.25"
dur="2.4s"
begin={delay}
repeatCount="indefinite"
/>
</circle>
{/* Core dot */}
<circle
cx={cx}
cy={cy}
r={5}
fill="#0F6E56"
>
<animate
attributeName="opacity"
values="1;0.5;1"
dur="2.4s"
begin={delay}
repeatCount="indefinite"
/>
</circle>
</g>
);
})}
</svg>
{/* Floating legend */}
{markers.length > 0 && (
<div className="absolute bottom-3 start-3 flex items-center gap-2 rounded-full bg-white/90 px-3 py-1.5 text-xs shadow-md backdrop-blur-sm">
<span className="flex h-2 w-2 rounded-full bg-brand-600 ring-2 ring-brand-200" />
<span className="font-medium text-brand-700">{markers.length} کافه و رستوران</span>
</div>
)}
</div>
);
}
// ── Export ────────────────────────────────────────────────────────────────────
export function IranMapSection() {
return (
<section className="relative overflow-hidden bg-gradient-to-b from-white to-brand-50/40 py-20 sm:py-28">
{/* Subtle background pattern */}
<div
aria-hidden
className="pointer-events-none absolute inset-0 opacity-[0.04]"
style={{
backgroundImage:
"radial-gradient(circle, #0f6e56 1px, transparent 1px)",
backgroundSize: "32px 32px",
}}
/>
<div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
{/* Heading */}
<div className="mb-12 text-center">
<div className="mb-4 inline-flex items-center gap-2 rounded-full border border-brand-200 bg-brand-50 px-3 py-1.5 text-xs font-semibold text-brand-700">
<span className="flex h-1.5 w-1.5 rounded-full bg-brand-500" />
پراکنش جغرافیایی
</div>
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
میزی در سراسر ایران
</h2>
<p className="mx-auto mt-4 max-w-xl text-base leading-relaxed text-gray-500">
از تهران تا مشهد، از تبریز تا شیراز کافهها و رستورانهای بیشتری هر روز به میزی میپیوندند.
</p>
</div>
{/* Map */}
<div className="flex justify-center">
<Suspense
fallback={
<div
className="w-full max-w-lg animate-pulse rounded-2xl bg-brand-50"
style={{ aspectRatio: "6/5" }}
/>
}
>
<IranMapSvg />
</Suspense>
</div>
</div>
</section>
);
}