import BlueBackground from "@/components/cards/blueBack"; import CountryGrid from "@/components/countries/countryGrid"; import CountryHero from "@/components/countries/countryHero"; import InfoCard from "@/components/countries/infoCard"; import VideoGuide from "@/components/countries/videoGuide"; import { Breadcrumb } from "antd"; import Link from "next/link"; import { useRouter } from "next/router"; import { useEffect, useMemo, useState } from "react"; import { getFirebaseText } from "@/lib/firebase"; import MainHero from "@/components/mainHero"; import ServicesGrid from "@/components/cards/landingCards"; import Image from "next/image"; import Head from "next/head"; import type { GetServerSideProps } from "next"; import { codeFromSlug, countrySlug } from "@/lib/countrySlug"; type GuideMapOut = { agent: string; attentionEn: string; attentionMn: string; commission: string; countryName: string; depoType: string; description: string | null; descriptionEn: string | null; durationEn: string; durationMn: string; oneTimeLimit: string; }; type Country = { desc_en: string; desc_mn: string; name_en: string; name_mn: string; title_en: string; title_mn: string; }; type HeroCopy = { easyRemit: string; easyRemitd: string; more: string; threeDesc: string; threeo: string; }; type CountriesRemitProps = { code: string; countries: Country; textData: HeroCopy | null; rows: GuideMapOut[]; }; export default function CountriesRemit({ code, countries, textData, rows, }: CountriesRemitProps) { const router = useRouter(); const lang = router.locale || "en"; const isEn = lang.toLowerCase().startsWith("en"); // Filters const [selectedDepo, setSelectedDepo] = useState(""); const [selectedAgent, setSelectedAgent] = useState(""); const uniqJoin = (vals: Array, sep = ", ") => { const v = Array.from(new Set(vals.filter(Boolean) as string[])); return v.join(sep); }; const depoTypes = useMemo( () => Array.from( new Set((rows ?? []).map((r) => r.depoType).filter(Boolean) as string[]) ), [rows] ); useEffect(() => { if (!depoTypes.length) return; setSelectedDepo((prev) => (depoTypes.includes(prev) ? prev : depoTypes[0])); }, [depoTypes]); const agentOptions = useMemo(() => { const base = (rows ?? []).filter( (r) => !selectedDepo || r.depoType === selectedDepo ); return Array.from( new Set(base.map((r) => r.agent).filter(Boolean) as string[]) ); }, [rows, selectedDepo]); useEffect(() => { if (!agentOptions.length) { setSelectedAgent(""); return; } setSelectedAgent((prev) => agentOptions.includes(prev) ? prev : agentOptions[0] ); }, [agentOptions]); const filteredRows = useMemo(() => { let list = rows ?? []; if (selectedDepo) list = list.filter((r) => r.depoType === selectedDepo); if (selectedAgent) list = list.filter((r) => r.agent === selectedAgent); return list; }, [rows, selectedDepo, selectedAgent]); const agent = useMemo( () => uniqJoin(filteredRows.map((r) => r.agent)), [filteredRows] ); const depoType = useMemo( () => uniqJoin(filteredRows.map((r) => r.depoType)), [filteredRows] ); const oneTimeLimit = useMemo( () => uniqJoin( filteredRows.map((r) => r.oneTimeLimit), " / " ), [filteredRows] ); const commission = useMemo( () => uniqJoin( filteredRows.map((r) => r.commission), " / " ), [filteredRows] ); const duration = useMemo( () => uniqJoin( filteredRows.map((r) => (isEn ? r.durationEn : r.durationMn)), " / " ), [filteredRows, isEn] ); const attention = useMemo( () => uniqJoin( filteredRows.map((r) => (isEn ? r.attentionEn : r.attentionMn)), " • " ), [filteredRows, isEn] ); return (
{lang == "en" ? `Send Money from Mongolia to ${countries?.title_en} | SendMN` : `${countries?.title_mn} руу мөнгө илгээх | SendMN`}
{isEn ? "Home" : "Нүүр хуудас"} ), }, { title: ( {isEn ? countries?.title_en : countries?.title_mn} ), }, ]} />
{(depoTypes.length > 0 || agentOptions.length > 0) && (
{depoTypes.length > 1 && (
Select
)} {agentOptions.length > 1 && (
Select
)}
)}

{isEn ? "Attention:" : "Анхаарах:"}

{attention || "-"}

{isEn ? "Duration:" : "Хугацаа:"}

{duration || "-"}

); } export const getServerSideProps: GetServerSideProps< CountriesRemitProps > = async (ctx) => { const rawSlug = String(ctx.params?.slug ?? ""); const code = codeFromSlug(rawSlug); if (!code) { return { notFound: true }; } // Redirect legacy /countries/{code} links (and any non-canonical // casing) to the SEO-friendly /countries/send-money-to-{country} URL. const canonicalSlug = countrySlug(code); if (canonicalSlug && rawSlug.toLowerCase() !== canonicalSlug) { const localePrefix = ctx.locale && ctx.locale !== ctx.defaultLocale ? `/${ctx.locale}` : ""; return { redirect: { destination: `${localePrefix}/countries/${canonicalSlug}`, permanent: true, }, }; } const lang = ctx.locale ?? "en"; const [countries, textData, guideRes] = await Promise.all([ getFirebaseText(`countries/${code}`) as Promise, getFirebaseText(`Hero Page/${lang}`) as Promise, fetch(`https://webback.send.mn/country/guideMapOut/${encodeURIComponent(code)}`, { cache: "no-store", }) .then((r) => (r.ok ? (r.json() as Promise) : [])) .catch(() => [] as GuideMapOut[]), ]); if (!countries) { return { notFound: true }; } return { props: { code, countries, textData, rows: guideRes, }, }; };