cart

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@radix-ui/react-accordion": "^1.2.11",
+        "@radix-ui/react-radio-group": "^1.3.7",
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
         "@tanstack/react-query": "^5.84.1",
@@ -17,7 +18,7 @@
         "clsx": "^2.1.1",
         "embla-carousel-react": "^8.6.0",
         "iconsax-react": "^0.0.8",
-        "lucide-react": "^0.536.0",
+        "lucide-react": "^0.539.0",
         "next": "15.4.5",
         "react": "19.1.0",
         "react-dom": "19.1.0",
@@ -1183,6 +1184,69 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.7.tgz",
+      "integrity": "sha512-9w5XhD0KPOrm92OTTE0SysH3sYzHsSTHNvZgUBo/VZ80VdYyB5RneDbc0dKpURS24IxkoFRu/hI0i4XyfFwY6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.10.tgz",
+      "integrity": "sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-separator": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
@@ -1224,6 +1288,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-controllable-state": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
@@ -1276,6 +1355,39 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -4949,9 +5061,9 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.536.0",
+      "version": "0.539.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.536.0.tgz",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.539.0.tgz",
-      "integrity": "sha512-2PgvNa9v+qz4Jt/ni8vPLt4jwoFybXHuubQT8fv4iCW5TjDxkbZjNZZHa485ad73NSEn/jdsEtU57eE1g+ma8A==",
+      "integrity": "sha512-VVISr+VF2krO91FeuCrm1rSOLACQUYVy7NQkzrOty52Y8TlTPcXcMdQFj9bYzBgXbWCiywlwSZ3Z8u6a+6bMlg==",
       "license": "ISC",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-radio-group": "^1.3.7",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@tanstack/react-query": "^5.84.1",
@@ -18,7 +19,7 @@
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.6.0",
     "iconsax-react": "^0.0.8",
-    "lucide-react": "^0.536.0",
+    "lucide-react": "^0.539.0",
     "next": "15.4.5",
     "react": "19.1.0",
     "react-dom": "19.1.0",

src/app/cart/components/CartItem.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import CartControls from '@/components/CartControls'
+import { clx } from '@/helpers/utils';
+import { ArchiveTick, Shop, TruckFast } from 'iconsax-react'
+import Image from 'next/image'
+import { FC } from 'react'
+
+type Props = {
+    noBorder?: boolean
+}
+
+const CartItem: FC<Props> = (props) => {
+
+    const { noBorder } = props
+
+    return (
+        <div className={clx(
+            'p-10 flex gap-10 border-t border-border',
+            noBorder && 'border-0'
+        )}>
+            <Image
+                src={'https://dkstatics-public.digikala.com/digikala-products/40026b18c2b053ac4a68c3288556dc899a77aecd_1727277566.jpg?x-oss-process=image/resize,m_lfit,h_300,w_300/format,webp/quality,q_80'}
+                alt=''
+                width={200}
+                height={200}
+                className='max-w-[150px] max-h-[150px] object-contain'
+            />
+
+            <div className='flex-1'>
+                <div className='flex justify-between items-center'>
+                    <div className='max-w-[250px] truncate'>
+                        گوشی موبایل سامسونگ مدل Galaxy S24 Ultra دو سیم کارت ظرفیت 1 ترابایت و رم 12 گیگابایت - ویتنام
+                    </div>
+                    <div>
+                        70,400,000 <span className='text-xs'>تومان</span>
+                    </div>
+                </div>
+                <div className='font-light text-[#333333]'>
+                    <div className='flex items-center gap-2.5 mt-14'>
+                        <div className='w-6'>
+                            <div className='size-[14px] rounded-full bg-black'></div>
+                        </div>
+                        <div className='text-sm'>مشکی</div>
+                    </div>
+
+                    <div className='flex items-center gap-2.5 mt-4'>
+                        <div className='w-6'>
+                            <Shop size={20} color='#333333' />
+                        </div>
+                        <div className='text-sm'>فروشنده فروشگاه سندس</div>
+                    </div>
+
+                    <div className='flex items-center gap-2.5 mt-4'>
+                        <div className='w-6'>
+                            <ArchiveTick size={20} color='#333333' />
+                        </div>
+                        <div className='text-sm'>گارانتی اصالت و سلامت فیزیکی کالا</div>
+                    </div>
+
+                    <div className='flex justify-between'>
+                        <div className='flex items-center gap-2.5 mt-4'>
+                            <div className='w-6'>
+                                <TruckFast size={20} color='blue' />
+                            </div>
+                            <div className='text-sm'>ارسال از سندس حداکثر پس از 3 روز کاری</div>
+                        </div>
+
+                        <CartControls
+                            onChange={() => null}
+                            onRemove={() => null}
+                            quantity={1}
+                        />
+
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    )
+}
+
+export default CartItem

src/app/cart/components/DiscountCard.tsx

@@ -0,0 +1,18 @@
+import { Button } from '@/components/ui/button'
+import { FC } from 'react'
+
+const DiscountCard: FC = () => {
+    return (
+        <div className='h-16 border border-border rounded-2xl flex justify-between mt-5 items-center px-6'>
+            <div>
+                کد تخفیف دارید؟
+            </div>
+
+            <Button variant={'ghost'} className='text-left p-0 text-primary hover:bg-transparent cursor-pointer'>
+                ثبت کد
+            </Button>
+        </div>
+    )
+}
+
+export default DiscountCard

src/app/cart/components/TitleBack.tsx

@@ -0,0 +1,19 @@
+import { ArrowRight } from 'iconsax-react'
+import { FC } from 'react'
+
+type Props = {
+    title: string
+}
+
+const TitleBack: FC<Props> = (props) => {
+    const { title } = props
+
+    return (
+        <div className='h-16 border border-border rounded-2xl flex gap-1.5 items-center px-6'>
+            <ArrowRight size={20} color='#333333' />
+            <div className='font-light '>{title}</div>
+        </div>
+    )
+}
+
+export default TitleBack

src/app/cart/page.tsx

@@ -0,0 +1,50 @@
+import { Button } from "@/components/ui/button"
+import CartItem from "@/app/cart/components/CartItem"
+import CartSummary from "@/components/CartSummary"
+import withLayout from "@/hoc/withLayout"
+import { Trash } from "iconsax-react"
+import { NextPage } from "next"
+
+const Cart: NextPage = () => {
+    return (
+        <div className="mt-14 px-20">
+            <div className="border-b border-border flex justify-between items-center">
+                <div className="flex items-center gap-3 pb-6 border-b-2 border-primary relative top-[1px]">
+                    <div>
+                        سبد خرید
+                    </div>
+                    <div className="size-8 rounded-lg bg-[#F2F2F2] flex items-center justify-center text-primary">
+                        10
+                    </div>
+                </div>
+
+                <Button
+                    className="bg-white shadow h-10"
+                >
+                    <div className="flex items-center gap-2">
+                        <Trash size={20} color="#AD3434" />
+                        <div className="text-sm text-[#AD3434] font-light">حذف همه از سبد خرید</div>
+                    </div>
+                </Button>
+            </div>
+
+            <div className="mt-6 flex gap-6">
+                <div className="flex-1 border border-border p-5 rounded-2xl">
+                    <CartItem noBorder />
+                    <CartItem />
+                </div>
+                <CartSummary
+                    itemsCount={3}
+                    itemsPrice={580000}
+                    discount={580000}
+                    total={80580000}
+                    confirmHref="/cart/shipping"
+                    confirmLabel="ادامه به آدرس و ارسال"
+                    className="w-[360px]"
+                />
+            </div>
+        </div>
+    )
+}
+
+export default withLayout(Cart)

src/app/cart/payment/page.tsx

@@ -0,0 +1,48 @@
+import CartSummary from '@/components/CartSummary'
+import withLayout from '@/hoc/withLayout'
+import { NextPage } from 'next'
+import TitleBack from '../components/TitleBack'
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import DiscountCard from '../components/DiscountCard'
+
+const CartPayment: NextPage = () => {
+    return (
+        <div className="mt-14 px-20">
+
+            <div className="mt-6 flex gap-6">
+                <div className='flex-1'>
+                    <TitleBack title='پرداخت' />
+                    <DiscountCard
+                    />
+                    <div className='mt-5 border border-border rounded-2xl p-6 font-light'>
+                        <div>انتخاب روش پرداخت</div>
+
+                        <div className='mt-10 text-[#333333] font-light'>
+                            <RadioGroup defaultValue="option-one">
+                                <div className="flex items-center gap-2">
+                                    <RadioGroupItem value="option-one" id="option-one" />
+                                    <div className='text-sm'>زین پال</div>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                    <RadioGroupItem value="option-one" id="option-one" />
+                                    <div className='text-sm'>زین پال</div>
+                                </div>
+                            </RadioGroup>
+                        </div>
+                    </div>
+                </div>
+                <CartSummary
+                    itemsCount={3}
+                    itemsPrice={580000}
+                    discount={580000}
+                    total={80580000}
+                    confirmHref="/cart/payment"
+                    confirmLabel="پرداخت"
+                    className="w-[360px]"
+                />
+            </div>
+        </div>
+    )
+}
+
+export default withLayout(CartPayment)

src/app/cart/shipping/page.tsx

@@ -0,0 +1,49 @@
+import CartSummary from '@/components/CartSummary'
+import withLayout from '@/hoc/withLayout'
+import { NextPage } from 'next'
+import CartItem from '../components/CartItem'
+import TitleBack from '../components/TitleBack'
+import { Location } from 'iconsax-react'
+
+const CartShipping: NextPage = () => {
+    return (
+        <div className="mt-14 px-20">
+
+            <div className="mt-6 flex gap-6">
+                <div className='flex-1'>
+                    <TitleBack title='آدرس و تایید جزئیات' />
+                    <div className='mt-5 border border-border rounded-2xl p-6 flex justify-between items-center'>
+                        <div className='flex gap-2 items-center'>
+                            <Location size={20} color='#333333' className='min-w-5' />
+                            <div className='text-xs text-[#7F7F7F]'>
+                                <div>
+                                    آدرس تحویل سفارش
+                                </div>
+                                <div className='mt-2 text-sm text-black'>
+                                    اراک خیابان امام حسن غریبی خیابان 123
+                                </div>
+                                <div className='mt-2'>حمید ضرغامی</div>
+                            </div>
+                        </div>
+                        <div className='text-primary text-sm'>ویرایش</div>
+                    </div>
+                    <div className="flex-1 mt-5 border border-border p-5 rounded-2xl">
+                        <CartItem noBorder />
+                        <CartItem />
+                    </div>
+                </div>
+                <CartSummary
+                    itemsCount={3}
+                    itemsPrice={580000}
+                    discount={580000}
+                    total={80580000}
+                    confirmHref="/cart/payment"
+                    confirmLabel="پرداخت"
+                    className="w-[360px]"
+                />
+            </div>
+        </div>
+    )
+}
+
+export default withLayout(CartShipping)

src/app/globals.css

@@ -184,3 +184,6 @@ textarea.place-black::placeholder {
 .swiper-pagination {
   z-index: 1 !important;
 }
+div {
+  direction: rtl;
+}

src/components/CartControls.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { Add, Minus, Trash } from "iconsax-react";
+import React from "react";
+
+type CartControlsProps = {
+    quantity: number;
+    onChange: (next: number) => void;
+    onRemove: () => void;
+    min?: number;
+    max?: number;
+    className?: string;
+};
+
+export default function CartControls(props: CartControlsProps) {
+    const { quantity, onChange, onRemove, min = 1, max, className } = props;
+
+    const canDecrement = quantity > min;
+    const canIncrement = typeof max === "number" ? quantity < max : true;
+
+    const orange = "blue";
+
+    return (
+        <div className={"flex items-center gap-4 " + (className ?? "")}>
+
+
+            <div className="h-12 rounded-xl border border-border bg-white px-4 min-w-[138px] flex items-center justify-between">
+                <button
+                    type="button"
+                    onClick={() => canIncrement && onChange(quantity + 1)}
+                    className="disabled:opacity-40 disabled:cursor-not-allowed"
+                    disabled={!canIncrement}
+                    aria-label="increase quantity"
+                >
+                    <Add size={22} color={orange} />
+                </button>
+                <span className="text-[18px] font-medium" style={{ color: orange }}>
+                    {quantity}
+                </span>
+                <button
+                    type="button"
+                    onClick={() => canDecrement && onChange(quantity - 1)}
+                    className="disabled:opacity-40 disabled:cursor-not-allowed"
+                    disabled={!canDecrement}
+                    aria-label="decrease quantity"
+                >
+                    <Minus size={22} color={orange} />
+                </button>
+
+            </div>
+
+            <button
+                type="button"
+                onClick={onRemove}
+                className="h-12 w-12 rounded-xl border border-border grid place-items-center bg-white"
+                aria-label="remove from cart"
+            >
+                <Trash size={22} color="#AD3434" />
+            </button>
+        </div>
+    );
+}
+
+

src/components/CartSummary.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { NumberFormat } from "@/config/func";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { FC } from "react";
+
+type CartSummaryProps = {
+    itemsCount: number;
+    itemsPrice: number;
+    discount: number;
+    total: number;
+    onConfirm?: () => void;
+    confirmHref?: string;
+    confirmLabel?: string;
+    onDownloadInvoice?: () => void;
+    className?: string;
+};
+
+const Row: FC<{ label: string; value: string | number; emphasize?: boolean }> = (
+    { label, value, emphasize }
+) => {
+    return (
+        <div className="flex items-center justify-between text-[#333333]">
+            <div className="text-sm font-light">{label}</div>
+            <div className={emphasize ? "font-semibold" : "font-light"}>
+                {typeof value === "number" ? NumberFormat(value) : value}
+            </div>
+        </div>
+    );
+};
+
+const CartSummary: FC<CartSummaryProps> = (props) => {
+    const { itemsCount, itemsPrice, discount, total, onConfirm, onDownloadInvoice, className, confirmHref, confirmLabel } = props;
+
+    return (
+        <div className={"rounded-2xl border border-border p-6 h-fit bg-[#FAFAFA] " + (className ?? "")}>
+            <div className="flex items-center justify-between">
+                <div className="text-sm text-muted-foreground">تعداد کالاها</div>
+                <div>{NumberFormat(itemsCount)} محصول</div>
+            </div>
+
+            <div className="mt-6 space-y-5">
+                <Row label="قیمت کالاها" value={itemsPrice} />
+                <Row label="تخفیف" value={discount} />
+                <Row label="جمع فاکتور" value={total} emphasize />
+            </div>
+
+            <div className="mt-8 space-y-3">
+                <Button
+                    type="button"
+                    onClick={() => onDownloadInvoice?.()}
+                    className="w-full h-12 rounded-xl bg-[#303030] text-white shadow hover:bg-[#303030]/90"
+                >
+                    دانلود پیش‌فاکتور
+                </Button>
+                <Button
+                    type="button"
+                    onClick={() => !confirmHref && onConfirm?.()}
+                    className="w-full h-12 rounded-xl  text-white"
+                >
+                    {confirmHref ? (
+                        <Link href={confirmHref} className="w-full h-full flex items-center justify-center">
+                            {confirmLabel ?? "تایید و تکمیل سفارش"}
+                        </Link>
+                    ) : (
+                        confirmLabel ?? "تایید و تکمیل سفارش"
+                    )}
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+export default CartSummary;
+
+

src/components/ui/radio-group.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn("grid gap-3", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }