fix view products in checkout

src/app/[name]/(Dialogs)/cart/components/CartItemsList.tsx

@@ -15,21 +15,24 @@ const CartItemsList = () => {
   const { items } = useCart();
   const { t } = useTranslation('parallels', { keyPrefix: 'Cart' });
 
-  const cartProducts = React.useMemo(() => {
+  const cartLines = React.useMemo(() => {
     if (!products.length) return [];
     return Object.entries(items)
       .filter(([, detail]) => detail?.quantity && detail.quantity > 0)
-      .map(([id]) =>
-        products.find((productItem) => String(productItem.id) === String(id))
-      )
-      .filter((product): product is Product => Boolean(product));
+      .map(([variantId]) => {
+        const product = products.find((p) =>
+          p.variants?.some((v) => String(v.id) === String(variantId))
+        );
+        return product ? { product, variantId } : null;
+      })
+      .filter((line): line is { product: Product; variantId: string } => line != null);
   }, [products, items]);
 
   if (isFetching && !products.length) {
     return <CartItemsSkeleton />;
   }
 
-  if (cartProducts.length === 0) {
+  if (cartLines.length === 0) {
     return (
       <div className='flex flex-col items-center justify-center gap-2 py-12 text-sm2 text-muted-foreground'>
         <p>{t('EmptyStateTitle', { defaultValue: 'سبد خرید شما خالی است' })}</p>
@@ -44,9 +47,9 @@ const CartItemsList = () => {
 
   return (
     <div className='flex-1 space-y-4'>
-      {cartProducts.map((product) => (
-        <MenuItemRenderer key={product.id}>
-          <MenuItem product={product} />
+      {cartLines.map(({ product, variantId }) => (
+        <MenuItemRenderer key={variantId}>
+          <MenuItem product={product} variantId={variantId} />
         </MenuItemRenderer>
       ))}
     </div>