danak/dkala-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show variant in carts

Browse Source
This commit is contained in:
hamid zarghami
2026-02-15 10:39:31 +03:30
parent a25086bb8c
commit 44fb0be875
6 changed files with 73 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[name]/(Dialogs)/cart/hook/useCart.ts
+39 -8
View File
@@ -8,20 +8,39 @@ import {
useGetCartItems,
useIncrementCart,
} from "../hooks/useCartData";
import { toast } from "@/components/Toast";
import { extractErrorMessage } from "@/lib/func";
export const useCart = () => {
const { isSuccess } = useGetProfile();
const params = useParams();
const currentSlug = (params.name as string) || null;
const { clear, increment, decrement, items, slug, setSlug } = useReceiptStore();
const { mutate: mutateIncrementCart, isPending: isIncrementPending } = useIncrementCart();
const { mutate: mutateDecrementCart, isPending: isDecrementPending } = useDecrementCart();
const {
clear,
increment,
decrement,
items,
slug,
setSlug,
} = useReceiptStore();
const {
mutate: mutateIncrementCart,
isPending: isIncrementPending,
} = useIncrementCart();
const {
mutate: mutateDecrementCart,
isPending: isDecrementPending,
} = useDecrementCart();
const { mutate: mutateClearCart } = useClearCart();
const { data: cartItems } = useGetCartItems(isSuccess);
const addToCart = (id: string | number) => {
if (isSuccess) {
mutateIncrementCart(id);
mutateIncrementCart(id, {
onError: (error) => {
toast(extractErrorMessage(error), "error");
},
});
} else {
// تنظیم slug هنگام افزودن آیتم به سبد (فقط برای کاربران لاگین نشده)
if (currentSlug && slug !== currentSlug) {
@@ -33,7 +52,11 @@ export const useCart = () => {
const removeFromCart = (id: string | number) => {
if (isSuccess) {
mutateDecrementCart(id);
mutateDecrementCart(id, {
onError: (error) => {
toast(extractErrorMessage(error), "error");
},
});
} else {
decrement(id);
}
@@ -41,7 +64,11 @@ export const useCart = () => {
const clearCart = useCallback(() => {
if (isSuccess) {
mutateClearCart();
mutateClearCart(undefined, {
onError: (error) => {
toast(extractErrorMessage(error), "error");
},
});
} else {
clear();
}
@@ -53,9 +80,13 @@ export const useCart = () => {
return {};
}
return cartItems.data.items.reduce((acc, item) => {
acc[item.variantId] = { quantity: item.quantity };
acc[item.variantId] = {
quantity: item.quantity,
...(item.variantValue != null && { variantValue: item.variantValue }),
...(item.image != null && { image: item.image }),
};
return acc;
}, {} as Record<string | number, { quantity: number }>);
}, {} as Record<string | number, { quantity: number; variantValue?: string; image?: string }>);
} else {
return items;
}
src/app/[name]/(Dialogs)/cart/page.tsx
+6 -6
View File
@@ -11,7 +11,6 @@ import Prompt from '@/components/utils/Prompt';
import { useGetProducts } from '@/app/[name]/(Main)/hooks/useMenuData';
import MenuItem from '@/components/listview/MenuItem';
import MenuItemRenderer from '@/components/listview/MenuItemRenderer';
import type { Product } from '@/app/[name]/(Main)/types/Types';
const CartIndex = () => {
const { t } = useTranslation('parallels', { keyPrefix: 'Cart' });
@@ -26,13 +25,14 @@ const CartIndex = () => {
if (!products.length) return [];
return Object.entries(items)
.filter(([, detail]) => detail?.quantity && detail.quantity > 0)
.map(([variantId]) => {
.map(([variantId, detail]) => {
const product = products.find((p) =>
p.variants?.some((v) => v.id === variantId)
);
return product ? { product, variantId } : null;
const variantValue = (detail as { variantValue?: string } | undefined)?.variantValue;
return product ? { product, variantId, variantValue } : null;
})
.filter((x): x is { product: Product; variantId: string } => Boolean(x));
.filter((x): x is NonNullable<typeof x> => x != null);
}, [products, items]);
const isCartEmpty = cartProducts.length === 0;
@@ -98,9 +98,9 @@ const CartIndex = () => {
</div>
) : (
<div className="flex flex-col gap-4 pb-24">
{cartProducts.map(({ product, variantId }) => (
{cartProducts.map(({ product, variantId, variantValue }) => (
<MenuItemRenderer key={variantId}>
<MenuItem product={product} variantId={variantId} />
<MenuItem product={product} variantId={variantId} variantValue={variantValue} />
</MenuItemRenderer>
))}
<CartSummary isPremium />
src/app/[name]/(Dialogs)/cart/types/Types.ts
+2
View File
@@ -10,6 +10,8 @@ export type BulkCartItem = {
export interface CartItem {
variantId: string;
productTitle: string;
variantValue?: string;
image?: string;
quantity: number;
price: number;
discount: number;
src/components/CartQuantityControl.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export function CartQuantityControl({
isMutating = false,
addDisabled = false,
addLabel = 'افزودن',
addingLabel = 'در حال افزودن...',
addingLabel = '',
fullWidth = false,
}: CartQuantityControlProps) {
return (
src/components/listview/MenuItem.tsx
+22 -4
View File
@@ -19,11 +19,13 @@ interface MenuItemProps {
product: Product;
/** در صفحه سبد هر خط با variantId مشخص می‌شود */
variantId?: string | null;
/** مقدار تنوع (مثلاً «قرمز»، «تنوع سوم») — برای نمایش در سبد خرید */
variantValue?: string | null;
/** حالت نمایش: list = یک ستونه (پیش‌فرض)، grid = دو ستونه */
viewMode?: MenuItemViewMode;
}
const MenuItem = ({ product, variantId: variantIdProp, viewMode = 'list' }: MenuItemProps) => {
const MenuItem = ({ product, variantId: variantIdProp, variantValue: variantValueProp, viewMode = 'list' }: MenuItemProps) => {
const { items, addToCart, removeFromCart, isCartMutating } = useCart();
const params = useParams<{ name: string }>();
const name = params?.name || "";
@@ -61,6 +63,10 @@ const MenuItem = ({ product, variantId: variantIdProp, viewMode = 'list' }: Menu
[product.name, product.title]
);
/** فقط در سبد خرید تنوع نمایش داده شود */
const isInCart = variantIdProp != null;
const variantValueDisplay = isInCart ? (variantValueProp ?? selectedVariant?.value ?? null) : null;
const productContent = useMemo(() => {
const content = product.content;
if (!content) return '';
@@ -126,10 +132,15 @@ const MenuItem = ({ product, variantId: variantIdProp, viewMode = 'list' }: Menu
alt={productName}
/>
</Link>
<Link href={productDetailUrl} className="cursor-pointer min-w-0 mt-4">
<div className="text-sm2 font-normal text-black dark:text-white wrap-break-word line-clamp-2">
<Link href={productDetailUrl} className="cursor-pointer min-w-0 mt-4 flex items-center justify-between gap-2">
<div className="text-sm2 font-normal text-black dark:text-white wrap-break-word line-clamp-2 min-w-0">
{productName}
</div>
{variantValueDisplay && (
<span className="bg-primary text-primary-foreground text-[10px] px-1 py-0.5 rounded-md shrink-0">
{variantValueDisplay}
</span>
)}
</Link>
<div className="flex flex-col gap-2 mt-1">
<div className="flex flex-col gap-1 min-h-10 justify-center" dir="ltr">
@@ -184,9 +195,16 @@ const MenuItem = ({ product, variantId: variantIdProp, viewMode = 'list' }: Menu
<div className="w-full inline-flex flex-col justify-between min-w-0">
<Link href={productDetailUrl} className="cursor-pointer min-w-0">
<div className="min-w-0">
<div className="text-sm2 font-normal text-black dark:text-white wrap-break-word">
<div className="flex items-center justify-between gap-2 min-w-0">
<div className="text-sm2 font-normal text-black dark:text-white wrap-break-word min-w-0">
{productName}
</div>
{variantValueDisplay && (
<span className="bg-primary text-primary-foreground text-[10px] px-1 py-0.5 rounded-md shrink-0">
{variantValueDisplay}
</span>
)}
</div>
{(productContent || productDescription) && (
<div className="text-[#7F7F7F] line-clamp-2 text-xs leading-5 font-normal mt-2 wrap-break-word overflow-hidden">
{productContent || productDescription}
src/config/const.ts
+2 -2
View File
@@ -1,5 +1,5 @@
// export const API_BASE_URL = "https://dmenuplus-api.dev.danakcorp.com";
export const API_BASE_URL = "https://dkala-api.danakcorp.com";
// export const API_BASE_URL = "http://10.191.241.88:4000";
// export const API_BASE_URL = "https://dkala-api.danakcorp.com";
export const API_BASE_URL = "http://10.191.241.88:4000";
export const TOKEN_NAME = "dkala-t";
export const REFRESH_TOKEN_NAME = "dkala-rt";