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
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:
@@ -15,6 +15,23 @@ import { Input } from "@/components/ui/input";
|
||||
import { LabeledField } from "@/components/ui/labeled-field";
|
||||
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 = {
|
||||
cafeId: string;
|
||||
};
|
||||
@@ -33,9 +50,20 @@ export function SettingsShopPanel({ cafeId }: SettingsShopPanelProps) {
|
||||
const [logoUrl, setLogoUrl] = useState("");
|
||||
const [coverImageUrl, setCoverImageUrl] = 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 parsedLat = parseFloat(latInput);
|
||||
const parsedLng = parseFloat(lngInput);
|
||||
const hasValidLocation =
|
||||
!isNaN(parsedLat) &&
|
||||
!isNaN(parsedLng) &&
|
||||
parsedLat >= 24 && parsedLat <= 40 &&
|
||||
parsedLng >= 44 && parsedLng <= 64;
|
||||
|
||||
useEffect(() => {
|
||||
if (!cafeSettings) return;
|
||||
setName(cafeSettings.name ?? "");
|
||||
@@ -47,6 +75,8 @@ export function SettingsShopPanel({ cafeId }: SettingsShopPanelProps) {
|
||||
setLogoUrl(cafeSettings.logoUrl ?? "");
|
||||
setCoverImageUrl(cafeSettings.coverImageUrl ?? "");
|
||||
setSnappfoodVendorId(cafeSettings.snappfoodVendorId ?? "");
|
||||
setLatInput(cafeSettings.latitude != null ? String(cafeSettings.latitude) : "");
|
||||
setLngInput(cafeSettings.longitude != null ? String(cafeSettings.longitude) : "");
|
||||
}, [cafeSettings]);
|
||||
|
||||
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({
|
||||
mutationFn: (file: File) =>
|
||||
apiUpload<{ url: string }>(`/api/cafes/${cafeId}/media/cafe-logo`, file),
|
||||
@@ -249,6 +304,80 @@ export function SettingsShopPanel({ cafeId }: SettingsShopPanelProps) {
|
||||
</Button>
|
||||
</CardContent>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -18,6 +18,8 @@ export type CafeSettings = {
|
||||
theme: CafeTheme;
|
||||
defaultTaxRate?: number;
|
||||
allowBranchTaxOverride?: boolean;
|
||||
latitude?: number | null;
|
||||
longitude?: number | null;
|
||||
};
|
||||
|
||||
export function cafeSettingsQueryKey(cafeId: string) {
|
||||
|
||||
@@ -7,6 +7,7 @@ import { Hero } from "@/components/sections/hero";
|
||||
import { Stats } from "@/components/sections/stats";
|
||||
import { TrustBar } from "@/components/sections/trust-bar";
|
||||
import { Features } from "@/components/sections/features";
|
||||
import { IranMapSection } from "@/components/sections/iran-map-section";
|
||||
import { HowItWorks } from "@/components/sections/how-it-works";
|
||||
import { AppPromo } from "@/components/sections/app-promo";
|
||||
import { Testimonials } from "@/components/sections/testimonials";
|
||||
@@ -41,6 +42,7 @@ export default async function HomePage({ params }: { params: Promise<{ locale: s
|
||||
<Hero />
|
||||
<TrustBar />
|
||||
<Stats />
|
||||
<IranMapSection />
|
||||
<Features />
|
||||
<HowItWorks />
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user