73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
import Link from "next/link";
|
||
import { MapPin } from "lucide-react";
|
||
import type { Address, AddressLabel } from "@/types/api";
|
||
|
||
const ADDRESS_LABEL_FA: Record<AddressLabel, string> = {
|
||
home: "خانه",
|
||
work: "محل کار",
|
||
other: "سایر",
|
||
};
|
||
|
||
/**
|
||
* Both actions carry `returnTo` (the checkout confirm page's own URL) so the whole
|
||
* address-management chain — map → details form → address list — comes back here
|
||
* instead of stranding the customer on /addresses mid-checkout.
|
||
*/
|
||
export function CheckoutAddress({
|
||
address,
|
||
returnTo,
|
||
}: {
|
||
address: Address | null;
|
||
returnTo: string;
|
||
}) {
|
||
const next = encodeURIComponent(returnTo);
|
||
return (
|
||
<section className="flex flex-col gap-3">
|
||
<h2 className="text-[15px] font-bold leading-none text-foreground">
|
||
آدرس تحویل
|
||
</h2>
|
||
|
||
{address ? (
|
||
<div className="flex justify-between gap-3 rounded-2xl border border-gray-300 p-4">
|
||
{/* DOM order intentionally mirrors the screenshot's left→right layout — see the
|
||
inherited dir="rtl" note on the /cart page. */}
|
||
<div className="flex flex-col justify-start items-start gap-4">
|
||
<div className="flex items-center gap-1.5">
|
||
<MapPin className="h-4 w-4 text-primary-action" />
|
||
<span className="text-[14px] font-bold leading-none text-foreground">
|
||
{address.title || ADDRESS_LABEL_FA[address.label]}
|
||
</span>
|
||
</div>
|
||
<p className="text-end text-[13px] leading-normal text-gray-600">
|
||
{address.full_address}
|
||
</p>
|
||
</div>
|
||
<Link
|
||
href={`/addresses?next=${next}`}
|
||
className="text-[13px] font-semibold leading-none text-primary-action"
|
||
>
|
||
تغییر آدرس
|
||
</Link>
|
||
</div>
|
||
) : (
|
||
<div className="flex flex-col items-center gap-3 rounded-2xl border border-gray-300 p-6 text-center">
|
||
<span className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
|
||
<MapPin className="h-5 w-5 text-gray-500" />
|
||
</span>
|
||
<p className="text-[13px] leading-normal text-gray-600">
|
||
هنوز آدرسی ثبت نکردهاید. برای ادامه سفارش، لطفاً یک آدرس اضافه
|
||
کنید.
|
||
</p>
|
||
<Link href={`/addresses/map?next=${next}`} className="w-full">
|
||
<button
|
||
type="button"
|
||
className="w-full rounded-xl bg-primary-action py-3 text-[14px] font-bold text-white"
|
||
>
|
||
افزودن آدرس
|
||
</button>
|
||
</Link>
|
||
</div>
|
||
)}
|
||
</section>
|
||
);
|
||
}
|