feat: add cart and product pages, quantity controls, and first-visit development notice

2026-09-15 07:14:37 +02:00
parent 4cd34106b0
commit 0390a35d01
23 changed files with 528 additions and 466 deletions
@@ -0,0 +1,32 @@
+'use client';
+
+import {Button} from 'antd';
+import {MinusOutlined, PlusOutlined} from '@ant-design/icons';
+import type {CartProduct} from '@/types/domain';
+import {useAppDispatch, useAppSelector} from '@/store/hooks';
+import {addToCart, decrementQty} from '@/store/cartSlice';
+import {useLanguage} from '@/app/context/LanguageContext';
+import {commerceCopy} from '@/data/commerce';
+
+export default function QuantityControl({product}: {product: CartProduct}) {
+    const dispatch = useAppDispatch();
+    const {locale} = useLanguage();
+    const copy = commerceCopy[locale];
+    const quantity = useAppSelector(state => state.cart.items.find(item => item.id === product.id)?.qty ?? 0);
+
+    return (
+        <div role="group" aria-label={`${copy.quantity}: ${product.name}`}
+             className="inline-flex items-center gap-3 rounded-xl border border-subtle bg-page p-1" dir="ltr">
+            <Button icon={<MinusOutlined/>} disabled={quantity === 0}
+                    aria-label={`${copy.decrease}: ${product.name}`}
+                    onClick={() => dispatch(decrementQty(product.id))}/>
+            <span aria-live="polite" aria-atomic="true" className="min-w-8 text-center font-bold text-primary">
+                {quantity.toLocaleString(locale === 'fa' ? 'fa-IR' : 'en-US')}
+            </span>
+            <Button type="primary" icon={<PlusOutlined/>}
+                    aria-label={`${copy.increase}: ${product.name}`}
+                    onClick={() => dispatch(addToCart({id: product.id, name: product.name, image: product.image,
+                        priceLabel: product.priceLabel, priceNumeric: product.priceNumeric}))}/>
+        </div>
+    );
+}