src/app/(customer)/(shop)/cart/page.tsx

@@ -1,14 +1,13 @@
 import Link from "next/link";
+import { ArrowRight } from "lucide-react";
 import { getCart } from "@/lib/api/cart";
 import { requireSession } from "@/lib/auth/session";
-import { CartItemRow } from "@/components/customer/cart-item-row";
+import { StoreCartCard } from "@/components/customer/store-cart-card";
-import { ClearCartButton } from "@/components/customer/clear-cart-button";
 import { Button } from "@/components/ui/button";
 
 export default async function CartPage() {
   await requireSession("/cart");
   const cart = await getCart();
-  const hasBlockedGroup = cart.groups.some((g) => !g.meets_minimum_order);
 
   if (cart.groups.length === 0) {
     return (
@@ -21,58 +20,64 @@ export default async function CartPage() {
     );
   }
 
+  const totalItemLines = cart.groups.reduce(
+    (sum, g) => sum + g.items.length,
+    0,
+  );
+
   return (
-    <main className="mx-auto flex w-full max-w-2xl flex-1 flex-col gap-6 px-4 py-6">
+    <main className="mx-auto flex w-full max-w-md flex-1 flex-col gap-6 px-4 pt-4 pb-6">
-      <div className="flex items-center justify-between">
+      {/* DOM order intentionally mirrors the screenshot's left→right layout, not reading
-        <h1 className="text-lg font-bold">سبد خرید</h1>
+          order — under this app's inherited dir="rtl", the first child renders at the
-        <ClearCartButton />
+          right edge and the last at the left. */}
+      <div className="flex items-center justify-start gap-3">
+        <Link href="/" aria-label="بازگشت">
+          <ArrowRight className="h-5 w-5 text-foreground" />
+        </Link>
+        <h1 className="text-[18px] font-bold leading-none text-foreground">
+          سبد خرید
+        </h1>
       </div>
 
-      {cart.groups.map((group) => (
+      <div className="flex flex-col gap-8">
-        <section key={group.store.uuid} className="flex flex-col gap-2 rounded-2xl border border-border p-4">
+        {cart.groups.map((group) => (
-          <Link href={`/stores/${group.store.uuid}`} className="font-medium">
+          <StoreCartCard key={group.store.uuid} group={group}>
-            {group.store.name}
+            {!group.meets_minimum_order && (
-          </Link>
+              <p className="mt-3 rounded-lg bg-error/10 px-3 py-2 text-xs text-error">
+                حداقل مبلغ سفارش برای این فروشگاه رعایت نشده است.
+              </p>
+            )}
 
-          <div className="divide-y divide-border">
+            <Link
-            {group.items.map((item) => (
+              href={group.meets_minimum_order ? `/checkout/${group.store.uuid}` : "#"}
-              <CartItemRow key={item.uuid} item={item} />
+              aria-disabled={!group.meets_minimum_order}
-            ))}
+              className="mt-4 flex justify-center"
-          </div>
+            >
+              <button
+                type="button"
+                disabled={!group.meets_minimum_order}
+                className="w-full rounded-xl bg-primary-action px-8 py-3 text-[14px] font-bold text-white disabled:opacity-40"
+              >
+                تکمیل سفارش
+              </button>
+            </Link>
+          </StoreCartCard>
+        ))}
+      </div>
 
-          <div className="flex flex-col gap-1 border-t border-border pt-2 text-sm">
+      <div className="flex flex-row justify-between border-t border-gray-200 pt-4 px-5">
-            <div className="flex justify-between text-muted-foreground">
+        <div className="flex flex-col items-start justify-start gap-2">
-              <span>جمع کالاها</span>
+          <span className="text-[14px] font-semibold text-foreground">
-              <span>{group.items_subtotal.toLocaleString("fa-IR")} تومان</span>
+            جمع کل سبد ({cart.groups.length.toLocaleString("fa-IR")} فروشگاه،{" "}
-            </div>
+            {totalItemLines.toLocaleString("fa-IR")} کالا)
-            <div className="flex justify-between text-muted-foreground">
+          </span>
-              <span>هزینه ارسال</span>
+          <p className="text-end text-[12px] leading-normal text-gray-600">
-              <span>{group.delivery_fee.toLocaleString("fa-IR")} تومان</span>
+            هر فروشگاه جداگانه پرداخت و ارسال می‌شود
-            </div>
+          </p>
-            <div className="flex justify-between font-semibold">
-              <span>مجموع</span>
-              <span>{group.total.toLocaleString("fa-IR")} تومان</span>
-            </div>
-          </div>
-
-          {!group.meets_minimum_order && (
-            <p className="rounded-lg bg-destructive/10 px-3 py-2 text-xs text-destructive">
-              حداقل مبلغ سفارش برای این فروشگاه رعایت نشده است.
-            </p>
-          )}
-        </section>
-      ))}
-
-      <div className="sticky bottom-4 flex flex-col gap-2 rounded-2xl border border-border bg-background p-4 shadow-lg">
-        <div className="flex justify-between font-semibold">
-          <span>مبلغ قابل پرداخت</span>
-          <span>{cart.grand_total.toLocaleString("fa-IR")} تومان</span>
         </div>
-        <Link href={hasBlockedGroup ? "#" : "/checkout"} aria-disabled={hasBlockedGroup}>
+        <span className="text-[16px] font-bold leading-none text-foreground">
-          <Button size="lg" className="w-full" disabled={hasBlockedGroup}>
+          {cart.grand_total.toLocaleString("fa-IR")} تومان
-            ادامه و ثبت سفارش
+        </span>
-          </Button>
-        </Link>
       </div>
     </main>
   );

src/app/(customer)/(shop)/checkout/[store]/confirm/page.tsx

@@ -0,0 +1,35 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { ArrowRight } from "lucide-react";
+import { getCart } from "@/lib/api/cart";
+import { getAddresses } from "@/lib/api/addresses";
+import { requireSession } from "@/lib/auth/session";
+import { CheckoutPayment } from "@/components/customer/checkout-payment";
+
+export default async function ConfirmPaymentPage({ params }: PageProps<"/checkout/[store]/confirm">) {
+  const { store } = await params;
+  await requireSession(`/checkout/${store}/confirm`);
+
+  const [cart, addresses] = await Promise.all([
+    getCart(),
+    // Known gap (FRONTEND_GUIDE.md §7): addresses GET can 403 on the current OAuth
+    // scope — fall back to empty rather than crashing this page over it.
+    getAddresses().catch(() => []),
+  ]);
+  const group = cart.groups.find((g) => g.store.uuid === store);
+  if (!group) notFound();
+
+  return (
+    <main className="mx-auto flex w-full max-w-md flex-1 flex-col gap-6 px-4 pt-4 pb-6">
+      {/* Same header pattern as /cart and /checkout/[store]. */}
+      <div className="flex items-center justify-start gap-3">
+        <Link href={`/checkout/${store}`} aria-label="بازگشت">
+          <ArrowRight className="h-5 w-5 text-foreground" />
+        </Link>
+        <h1 className="text-[18px] font-bold leading-none text-foreground">تأیید و پرداخت</h1>
+      </div>
+
+      <CheckoutPayment group={group} addresses={addresses} />
+    </main>
+  );
+}

src/app/(customer)/(shop)/checkout/[store]/page.tsx

@@ -0,0 +1,31 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { ArrowRight } from "lucide-react";
+import { getCart } from "@/lib/api/cart";
+import { requireSession } from "@/lib/auth/session";
+import { StoreCartCard } from "@/components/customer/store-cart-card";
+import { CheckoutFulfillment } from "@/components/customer/checkout-fulfillment";
+
+export default async function StoreCheckoutPage({ params }: PageProps<"/checkout/[store]">) {
+  const { store } = await params;
+  await requireSession(`/checkout/${store}`);
+  const cart = await getCart();
+  const group = cart.groups.find((g) => g.store.uuid === store);
+  if (!group) notFound();
+
+  return (
+    <main className="mx-auto flex w-full max-w-md flex-1 flex-col gap-6 px-4 pt-4 pb-6">
+      {/* Same header as /cart, same DOM-order note: first child renders right, last left. */}
+      <div className="flex items-center justify-start gap-3">
+        <Link href="/cart" aria-label="بازگشت">
+          <ArrowRight className="h-5 w-5 text-foreground" />
+        </Link>
+        <h1 className="text-[18px] font-bold leading-none text-foreground">سبد خرید</h1>
+      </div>
+
+      <StoreCartCard group={group} />
+
+      <CheckoutFulfillment group={group} />
+    </main>
+  );
+}

src/components/customer/cart-item-row.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState, useTransition } from "react";
 import { useRouter, usePathname } from "next/navigation";
+import { Minus, Plus, Trash2 } from "lucide-react";
 import { updateCartItemQuantity, removeCartItem } from "@/lib/api/cart";
 import type { CartItem } from "@/types/api";
 
@@ -33,41 +34,58 @@ export function CartItemRow({ item }: { item: CartItem }) {
   }
 
   return (
-    <div className="flex flex-col gap-1.5 py-3">
+    <div className={`flex flex-col gap-2 py-4 ${isPending ? "opacity-50" : ""}`}>
-      <div className={`flex items-center gap-3 ${isPending ? "opacity-50" : ""}`}>
+      {/* DOM order intentionally mirrors the screenshot's left→right layout, not reading
-        <div className="h-14 w-14 shrink-0 overflow-hidden rounded-xl bg-muted">
+          order — under this app's inherited dir="rtl", the first child renders at the
+          right edge and the last at the left. */}
+      <div className="flex items-start justify-start gap-3">
+        <div className="h-20 w-20 shrink-0 overflow-hidden rounded-xl bg-muted">
           {item.product.image_url && (
             // eslint-disable-next-line @next/next/no-img-element
             <img src={item.product.image_url} alt="" className="h-full w-full object-cover" />
           )}
         </div>
-        <div className="flex flex-1 flex-col gap-1">
+        <div className="flex flex-col items-start gap-3 text-right m-2">
-          <span className="text-sm font-medium">{item.product.name}</span>
+          <span className="text-[14px] font-bold leading-none text-foreground">{item.product.name}</span>
-          <span className="text-xs text-muted-foreground">{item.product.price.toLocaleString("fa-IR")} تومان</span>
+          <span className="text-[13px] leading-none text-gray-600">
+            {item.product.price.toLocaleString("fa-IR")} تومان
+          </span>
         </div>
-        <div className="flex items-center gap-2 rounded-full border border-border px-2 py-1">
+      </div>
+
+      <div className="flex items-center justify-end gap-3">
+        <div className="flex h-8 items-center gap-3 rounded-lg border border-gray-300 px-2">
           <button
             type="button"
             disabled={isPending}
             onClick={() => changeQuantity(item.quantity - 1)}
-            className="flex h-6 w-6 items-center justify-center text-sm"
             aria-label="کاهش تعداد"
           >
-            −
+            <Minus className="h-3.5 w-3.5 text-foreground" />
           </button>
-          <span className="w-5 text-center text-sm">{item.quantity.toLocaleString("fa-IR")}</span>
+          <span className="min-w-3 text-center text-[13px] font-bold leading-none text-foreground">
+            {item.quantity.toLocaleString("fa-IR")}
+          </span>
           <button
             type="button"
             disabled={isPending}
             onClick={() => changeQuantity(item.quantity + 1)}
-            className="flex h-6 w-6 items-center justify-center text-sm"
             aria-label="افزایش تعداد"
           >
-            +
+            <Plus className="h-3.5 w-3.5 text-foreground" />
           </button>
         </div>
-        <span className="w-20 shrink-0 text-end text-sm font-semibold">{item.line_total.toLocaleString("fa-IR")}</span>
+        <button
+          type="button"
+          disabled={isPending}
+          onClick={() => changeQuantity(0)}
+          aria-label="حذف از سبد"
+          className="flex h-8 w-8 items-center justify-center disabled:opacity-40"
+        >
+          <Trash2 className="h-4.5 w-4.5 text-error" />
+        </button>
       </div>
+
       {error && <p className="text-end text-xs text-error">{error}</p>}
     </div>
   );

src/components/customer/checkout-fulfillment.tsx

@@ -0,0 +1,110 @@
+"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)]">
+        {/* Pickup has its own confirm+pay screen (no address needed); delivery still
+            goes to the general /checkout form until that flow's design is provided. */}
+        <Link href={pickup ? `/checkout/${group.store.uuid}/confirm` : "/checkout"} 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>
+  );
+}

src/components/customer/checkout-payment.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { submitCheckout } from "@/lib/api/checkout";
+import type { Address, CartGroup, PaymentMethod } from "@/types/api";
+
+/** Exact labels per the OpenAPI PaymentMethodEnum description ("(آنلاین)" added to match the screenshot). */
+const PAYMENT_OPTIONS: { value: PaymentMethod; label: string }[] = [
+  { value: "wallet", label: "کیف پول وینسو" },
+  { value: "online", label: "درگاه بانکی (آنلاین)" },
+  { value: "cash_on_delivery", label: "پرداخت در محل" },
+];
+
+export function CheckoutPayment({ group, addresses }: { group: CartGroup; addresses: Address[] }) {
+  const router = useRouter();
+  const [method, setMethod] = useState<PaymentMethod>("wallet");
+  const [error, setError] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+
+  // Pickup flow — no delivery fee, matches the fulfillment screen's "دریافت حضوری" total.
+  const payable = group.items_subtotal;
+
+  function handlePay() {
+    setError(null);
+    const addressUuid = addresses.find((a) => a.is_default)?.uuid ?? addresses[0]?.uuid;
+    if (!addressUuid) {
+      setError("برای ثبت سفارش ابتدا یک آدرس اضافه کنید.");
+      return;
+    }
+    startTransition(async () => {
+      // submitCheckout processes the whole cart at once (splits into per-store orders
+      // server-side), not just this store — see PageProps note on the confirm page.
+      const result = await submitCheckout({
+        address_uuid: addressUuid,
+        delivery_type: "express",
+        scheduled_at: null,
+        payment_method: method,
+        notes: "",
+      });
+      if (result.ok) {
+        router.push(`/order-groups/${result.data.uuid}`);
+      } else {
+        setError(result.message);
+      }
+    });
+  }
+
+  return (
+    <div className="flex flex-col gap-6 pb-44">
+      <section className="flex flex-col gap-3">
+        <h2 className="text-[15px] font-bold leading-none text-foreground">روش پرداخت</h2>
+
+        {PAYMENT_OPTIONS.map((option) => {
+          const selected = method === option.value;
+          return (
+            <label
+              key={option.value}
+              className={`flex cursor-pointer items-center justify-between rounded-2xl border p-4 ${selected ? "border-primary-action" : "border-gray-200"}`}
+            >
+              <input
+                type="radio"
+                name="payment"
+                checked={selected}
+                onChange={() => setMethod(option.value)}
+                className="sr-only"
+              />
+              {/* DOM order intentionally mirrors the screenshot's left→right layout — see
+                  the inherited dir="rtl" note on the /cart page. No wallet balance line:
+                  Winofy's API has no wallet-balance endpoint — that's a Gooyal-side
+                  feature (see the wallet.wallet:get_balance OAuth scope) with no
+                  documented endpoint available here, so it isn't faked. */}
+              <span className="text-[14px] font-bold leading-none text-foreground">{option.label}</span>
+              <span
+                className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 ${selected ? "border-primary-action" : "border-gray-300"}`}
+              >
+                {selected && <span className="h-2.5 w-2.5 rounded-full bg-primary-action" />}
+              </span>
+            </label>
+          );
+        })}
+      </section>
+
+      {error && <p className="text-end text-sm text-error">{error}</p>}
+
+      <div className="fixed inset-x-0 bottom-0 z-10 mx-auto flex w-full max-w-md flex-col gap-3 bg-white px-4 pt-4 pb-6 shadow-[0_-4px_15px_0_rgba(0,0,0,0.102)]">
+        <div className="flex items-center justify-between text-[13px] text-gray-600">
+          <span>
+            {group.items.length.toLocaleString("fa-IR")} کالا از {group.store.name}
+          </span>
+          <span>{payable.toLocaleString("fa-IR")} تومان</span>
+        </div>
+        <div className="flex items-center justify-between mb-2">
+          <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>
+        <button
+          type="button"
+          onClick={handlePay}
+          disabled={isPending}
+          className="w-full rounded-2xl bg-primary-action py-4 text-[15px] font-bold text-white disabled:opacity-40"
+        >
+          {isPending ? "در حال ثبت سفارش..." : `پرداخت ${payable.toLocaleString("fa-IR")} تومان`}
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/customer/store-cart-card.tsx

@@ -0,0 +1,38 @@
+import Link from "next/link";
+import { ShoppingBasket } from "lucide-react";
+import { CartItemRow } from "@/components/customer/cart-item-row";
+import type { CartGroup } from "@/types/api";
+import type { ReactNode } from "react";
+
+/** Shared between /cart and /checkout/[store] — the pixel-perfect per-store card. */
+export function StoreCartCard({ group, children }: { group: CartGroup; children?: ReactNode }) {
+  return (
+    <section className="relative rounded-2xl border border-gray-300 bg-white p-6 shadow-[0_2px_10px_-6px_rgba(0,0,0,0.039),0_14px_28px_-12px_rgba(0,0,0,0.071)]">
+      <span className="absolute -top-3 left-4 rounded-lg bg-blue-bg px-2.5 py-1 text-[12px] font-semibold leading-none text-primary-action">
+        {group.items.length.toLocaleString("fa-IR")} کالا
+      </span>
+
+      <Link
+        href={`/stores/${group.store.uuid}`}
+        className="mb-3 flex items-center justify-start gap-2 border-b border-b-[#E4E4E7] pb-5"
+      >
+        <ShoppingBasket className="h-4.5 w-4.5 text-foreground" />
+        <span className="text-[16px] font-bold leading-none text-foreground">{group.store.name}</span>
+      </Link>
+
+      <div className="divide-y divide-gray-200">
+        {group.items.map((item) => (
+          <CartItemRow key={item.uuid} item={item} />
+        ))}
+      </div>
+
+      <div className="flex items-center justify-start border-t border-gray-200 pt-5 pb-1">
+        <span className="text-[13px] font-semibold leading-none text-foreground">
+          جمع فروشگاه: {group.items_subtotal.toLocaleString("fa-IR")} تومان
+        </span>
+      </div>
+
+      {children}
+    </section>
+  );
+}