import { GetServerSideProps } from "next"; import { getDeliveryZoneBySlug, getSettings } from "@/routes/api"; import React from "react"; import Head from "next/head"; import { isSSR } from "@/helpers/getters"; import MyBreadcrumbs from "@/components/custom/MyBreadcrumbs"; import PageHeader from "@/components/custom/PageHeader"; import { DeliveryZone } from "@/types/ApiResponse"; import { NextPageWithLayout } from "@/types"; import GoogleMapForZone from "@/components/Location/GoogleMapForZone"; import { Card, CardBody, CardHeader, Divider, Spinner } from "@heroui/react"; import { Clock, MapPin, Truck } from "lucide-react"; import { useSettings } from "@/contexts/SettingsContext"; import useSWR from "swr"; import { useRouter } from "next/router"; import { loadTranslations } from "../../../../i18n"; import { useTranslation } from "react-i18next"; interface DeliveryZoneDetailPageProps { zone: DeliveryZone | null; slug: string; error?: string; } // SWR fetcher function const fetchZoneBySlug = async (zoneSlug: string): Promise => { const response = await getDeliveryZoneBySlug({ slug: zoneSlug }); if (!response.data) { throw new Error("Zone not found"); } return response.data; }; const DeliveryZoneDetailPage: NextPageWithLayout< DeliveryZoneDetailPageProps > = ({ zone: initialZone, slug, error: initialError }) => { const { t } = useTranslation(); const { currencySymbol } = useSettings(); const router = useRouter(); const zoneSlug = slug || (router.query.slug as string); const { data: zone, error, isLoading, } = useSWR( zoneSlug ? `delivery-zone-${zoneSlug}` : null, () => fetchZoneBySlug(zoneSlug), { fallbackData: initialZone || undefined, revalidateOnMount: true, } ); // Loading state if (isLoading && !zone && !error) { return (

{t("pages.deliveryZoneDetail.loadingTitle")}

{t("pages.deliveryZoneDetail.loadingDescription")}

); } // Error state if (error || (!zone && !isLoading)) { const isNotFound = error?.message === "Zone not found" || initialError === "Zone not found"; return (

{isNotFound ? t("pages.deliveryZoneDetail.zoneNotFound") : t("pages.deliveryZoneDetail.errorLoading")}

{isNotFound ? t("pages.deliveryZoneDetail.zoneNotFoundDesc") : t("pages.deliveryZoneDetail.errorLoadingDesc")}

); } if (!zone) return null; return ( <> {`${zone.name} - ${t("pages.deliveryZoneDetail.titleSuffix")}`}

{/* Map Section */}

{t("pages.deliveryZoneDetail.coverageArea")}

{/* Details Section */}

{t("pages.deliveryZoneDetail.zoneInfo")}

{/* Delivery Fees */}

{" "} {t("pages.deliveryZoneDetail.deliveryFees")}

{t("pages.deliveryZoneDetail.regularDelivery")} {currencySymbol} {zone.regular_delivery_charges}
{t("pages.deliveryZoneDetail.rushDelivery")} {currencySymbol} {zone.rush_delivery_charges}
{t("pages.deliveryZoneDetail.freeDeliveryAbove")} {currencySymbol} {zone.free_delivery_amount}
{t("pages.deliveryZoneDetail.perKmCharge")} {currencySymbol} {zone.distance_based_delivery_charges}/km
{t("pages.deliveryZoneDetail.perStoreFee")} {currencySymbol} {zone.per_store_drop_off_fee}
{t("pages.deliveryZoneDetail.handlingFee")} {currencySymbol} {zone.handling_charges}

{/* Delivery Times */}

{" "} {t("pages.deliveryZoneDetail.deliveryTimes")}

{t("pages.deliveryZoneDetail.regularTimePerKm")} {zone.delivery_time_per_km} min
{t("pages.deliveryZoneDetail.rushTimePerKm")} {zone.rush_delivery_time_per_km} min
{t("pages.deliveryZoneDetail.bufferTime")} {zone.buffer_time} min

{/* Coverage Details */}

{" "} {t("pages.deliveryZoneDetail.coverageDetails")}

{t("pages.deliveryZoneDetail.radius")} {zone.radius_km} km
{t("pages.deliveryZoneDetail.centerCoords")} {zone.center_latitude}, {zone.center_longitude}
{t("pages.deliveryZoneDetail.boundaryPoints")} {zone.boundary_json?.length || 0} points

); }; export const getServerSideProps: GetServerSideProps | undefined = isSSR() ? async (context) => { try { const slug = context.params?.slug as string; const [zoneResult, settingsResult] = await Promise.allSettled([ getDeliveryZoneBySlug({ slug }), getSettings(), ]); await loadTranslations(context); return { props: { zone: zoneResult.status === "fulfilled" ? zoneResult.value.data ?? null : null, slug, initialSettings: settingsResult.status === "fulfilled" ? settingsResult.value.data ?? null : null, error: zoneResult.status === "rejected" || settingsResult.status === "rejected" ? "Some data failed to load" : null, }, }; } catch (error) { console.error("Unexpected error:", error); return { props: { zone: null, slug: context.params?.slug as string, initialSettings: null, error: "Unexpected failure", }, }; } } : undefined; export default DeliveryZoneDetailPage;