113 lines
5.4 KiB
TypeScript
113 lines
5.4 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import Link from "next/link";
|
||
import type { CartGroup } from "@/types/api";
|
||
|
||
/**
|
||
* "دریافت حضوری" vs "ارسال توسط فروشگاه" has no backing field in the Checkout API —
|
||
* the OpenAPI spec's Checkout schema is address_uuid/delivery_type/scheduled_at/
|
||
* payment_method/notes only, with delivery_type meaning express-vs-scheduled timing,
|
||
* not pickup-vs-delivery fulfillment. So this toggle only affects what's *displayed*
|
||
* here; the actual order submission (next screen) still uses the real delivery fee.
|
||
*/
|
||
export function CheckoutFulfillment({ group }: { group: CartGroup }) {
|
||
const [pickup, setPickup] = useState(false);
|
||
const deliveryFee = pickup ? 0 : group.delivery_fee;
|
||
const payable = group.items_subtotal + deliveryFee;
|
||
|
||
return (
|
||
<div className="flex flex-col gap-6 pb-32">
|
||
<section className="flex flex-col gap-3">
|
||
<h2 className="text-[15px] font-bold leading-none text-foreground">نحوه دریافت</h2>
|
||
|
||
<label
|
||
className={`flex cursor-pointer flex-col gap-1 rounded-2xl border p-4 ${pickup ? "border-primary-action" : "border-gray-300"}`}
|
||
>
|
||
<input
|
||
type="radio"
|
||
name="fulfillment"
|
||
checked={pickup}
|
||
onChange={() => setPickup(true)}
|
||
className="sr-only"
|
||
/>
|
||
{/* DOM order intentionally mirrors the screenshot's left→right layout — see the
|
||
inherited dir="rtl" note on the /cart page. */}
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-baseline gap-1.5">
|
||
<span className="text-[14px] font-bold leading-none text-foreground">دریافت حضوری</span>
|
||
<span className="text-[12px] leading-none text-gray-500">رایگان</span>
|
||
</div>
|
||
<span
|
||
className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 ${pickup ? "border-primary-action" : "border-gray-300"}`}
|
||
>
|
||
{pickup && <span className="h-2.5 w-2.5 rounded-full bg-primary-action" />}
|
||
</span>
|
||
</div>
|
||
{/* The data for delivery time is mock, it should be provided from the backend*/}
|
||
<span className="text-[12px] leading-none text-gray-500">آماده در ۱۵ دقیقه</span>
|
||
</label>
|
||
|
||
<label
|
||
className={`flex cursor-pointer flex-col gap-1 rounded-2xl border p-4 ${!pickup ? "border-primary-action" : "border-gray-300"}`}
|
||
>
|
||
<input
|
||
type="radio"
|
||
name="fulfillment"
|
||
checked={!pickup}
|
||
onChange={() => setPickup(false)}
|
||
className="sr-only"
|
||
/>
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-baseline gap-1.5">
|
||
<span className="text-[14px] font-bold leading-none text-foreground">ارسال توسط فروشگاه</span>
|
||
<span className="text-[12px] leading-none text-gray-500">
|
||
{group.delivery_fee.toLocaleString("fa-IR")} تومان
|
||
</span>
|
||
</div>
|
||
<span
|
||
className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 ${!pickup ? "border-primary-action" : "border-gray-300"}`}
|
||
>
|
||
{!pickup && <span className="h-2.5 w-2.5 rounded-full bg-primary-action" />}
|
||
</span>
|
||
</div>
|
||
{/* The data for delivery time is mock, it should be provided from the backend*/}
|
||
<span className="text-[12px] leading-none text-gray-500">۲۵-۳۵ دقیقه</span>
|
||
</label>
|
||
</section>
|
||
|
||
<section className="flex flex-col gap-3 rounded-2xl bg-[#F4F4F5] px-4 py-5">
|
||
<div className="flex items-center justify-between text-[13px] text-gray-600">
|
||
<span>جمع کالاها</span>
|
||
<span>{group.items_subtotal.toLocaleString("fa-IR")} تومان</span>
|
||
</div>
|
||
<div className="flex items-center justify-between text-[13px] text-gray-600">
|
||
<span>هزینه ارسال</span>
|
||
<span>{deliveryFee.toLocaleString("fa-IR")} تومان</span>
|
||
</div>
|
||
<div className="flex items-center justify-between border-t border-gray-300 pt-3">
|
||
<span className="text-[14px] font-semibold leading-none text-foreground">مبلغ قابل پرداخت</span>
|
||
<span className="text-[16px] font-bold leading-none text-foreground">
|
||
{payable.toLocaleString("fa-IR")} تومان
|
||
</span>
|
||
</div>
|
||
</section>
|
||
|
||
<div className="fixed inset-x-0 bottom-0 z-10 mx-auto flex w-full max-w-md flex-col items-center bg-white px-4 pt-4 pb-6 shadow-[0_-4px_15px_0_rgba(0,0,0,0.102)]">
|
||
{/* Same confirm+pay screen either way — it shows the address section only for
|
||
delivery, and folds the delivery fee into the total only for delivery. */}
|
||
<Link
|
||
href={`/checkout/${group.store.uuid}/confirm?fulfillment=${pickup ? "pickup" : "delivery"}`}
|
||
className="w-full"
|
||
>
|
||
<button
|
||
type="button"
|
||
className="w-full rounded-2xl bg-primary-action py-4 text-[15px] font-bold text-white"
|
||
>
|
||
پرداخت و ثبت سفارش — {payable.toLocaleString("fa-IR")} تومان
|
||
</button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|