cart

2025-08-12 15:35:34 +03:30
parent 92370259c1
commit 418b45fde5
12 changed files with 574 additions and 5 deletions
@@ -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
@@ -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
@@ -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
@@ -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)
@@ -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)
@@ -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)
@@ -184,3 +184,6 @@ textarea.place-black::placeholder {
 .swiper-pagination {
  z-index: 1 !important;
 }
+div {
+  direction: rtl;
+}
@@ -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>
+    );
+}
+
+
@@ -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;
+
+
@@ -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 }