38 lines
1.9 KiB
TypeScript
38 lines
1.9 KiB
TypeScript
'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';
|
|
import {useAuth} from '@/app/context/AuthContext';
|
|
|
|
export default function QuantityControl({product}: {product: CartProduct}) {
|
|
const dispatch = useAppDispatch();
|
|
const {locale} = useLanguage();
|
|
const copy = commerceCopy[locale];
|
|
const auth = useAuth();
|
|
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={() => auth.isAuthenticated ? dispatch(decrementQty(product.id)) : auth.openLogin()}/>
|
|
<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={() => {
|
|
const add = () => dispatch(addToCart({id: product.id, name: product.name, image: product.image,
|
|
priceLabel: product.priceLabel, priceNumeric: product.priceNumeric}));
|
|
if (auth.isAuthenticated) add(); else auth.openLogin(add);
|
|
}}/>
|
|
</div>
|
|
);
|
|
}
|