@akinon/projectzero 2.0.0-beta.20 → 2.0.0-beta.22

package/app-template/src/views/basket/index.ts

@@ -1,4 +1,2 @@
 export * from './basket-item';
 export * from './summary';
-export * from './designer-context';
-export * from './basket-summary-context';

package/app-template/src/views/basket/summary.tsx

@@ -9,19 +9,12 @@ import {
   useRemoveVoucherCodeMutation
 } from '@akinon/next/data/client/basket';
 import { Basket, Error } from '@akinon/next/types';
-import { Button, Input, Price, Icon } from '@theme/components';
+import { Button, Input, Price } from '@theme/components';
 import { pushBeginCheckout } from '@theme/utils/gtm';
 import { ROUTES } from '@theme/routes';
 import { useLocalization, useRouter } from '@akinon/next/hooks';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import clsx from 'clsx';
-import { useGetWidgetQuery } from '@akinon/next/data/client/misc';
-import {
-  useBasketSummary,
-  BASKET_SUMMARY_PLACEHOLDER_ID,
-  BASKET_SUMMARY_SECTION_ID,
-  BASKET_SUMMARY_BLOCKS
-} from './basket-summary-context';
 
 interface Props {
   basket: Basket;
@@ -32,32 +25,6 @@ const voucherCodeFormSchema = (t) =>
     voucherCode: yup.string().required(t('basket.summary.form.error.required'))
   });
 
-const convertStylesToCSS = (
-  styles: Record<string, unknown> | undefined
-): React.CSSProperties => {
-  if (!styles) return {};
-  const cssStyles: React.CSSProperties = {};
-  Object.entries(styles).forEach(([key, value]) => {
-    const rawValue =
-      typeof value === 'object' && value !== null && 'desktop' in value
-        ? (value as Record<string, unknown>).desktop
-        : value;
-
-    const cssValue =
-      typeof rawValue === 'number'
-        ? rawValue
-        : typeof rawValue === 'string'
-        ? rawValue
-        : '';
-
-    if (cssValue !== '' && cssValue !== null && cssValue !== undefined) {
-      const camelKey = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-      (cssStyles as Record<string, unknown>)[camelKey] = cssValue;
-    }
-  });
-  return cssStyles;
-};
-
 export const Summary = (props: Props) => {
   const { t } = useLocalization();
   const { basket } = props;
@@ -76,152 +43,6 @@ export const Summary = (props: Props) => {
   const dispatch = useAppDispatch();
   const [applyVoucherCodeMutation] = useApplyVoucherCodeMutation();
   const [removeVoucherCodeMutation] = useRemoveVoucherCodeMutation();
-  const {
-    data: basketSummaryBenefits,
-    isLoading: isLoadingBasketSummaryBenefits
-  } = useGetWidgetQuery('basket-summary-benefits');
-
-  const {
-    isDesigner,
-    isSectionSelected,
-    selectedBlockId,
-    getSectionStyles,
-    getBlockData
-  } = useBasketSummary();
-
-  const handleBlockClick = (blockId: string, e?: React.MouseEvent) => {
-    if (!isDesigner) return;
-    e?.stopPropagation();
-    if (typeof window !== 'undefined' && window.parent) {
-      window.parent.postMessage(
-        {
-          type: 'SELECT_BLOCK_FROM_PREVIEW',
-          data: {
-            placeholderId: BASKET_SUMMARY_PLACEHOLDER_ID,
-            sectionId: BASKET_SUMMARY_SECTION_ID,
-            blockId
-          }
-        },
-        '*'
-      );
-    }
-  };
-
-  const handleSectionClick = (e: React.MouseEvent) => {
-    if (!isDesigner) return;
-    e.stopPropagation();
-    if (typeof window !== 'undefined' && window.parent) {
-      window.parent.postMessage(
-        {
-          type: 'SELECT_SECTION',
-          data: {
-            placeholderId: BASKET_SUMMARY_PLACEHOLDER_ID,
-            sectionId: BASKET_SUMMARY_SECTION_ID
-          }
-        },
-        '*'
-      );
-    }
-  };
-
-  const titleBlock = getBlockData(BASKET_SUMMARY_BLOCKS.TITLE.id);
-  const voucherSectionBlock = getBlockData(
-    BASKET_SUMMARY_BLOCKS.VOUCHER_SECTION.id
-  );
-  const voucherTitleBlock = getBlockData(
-    BASKET_SUMMARY_BLOCKS.VOUCHER_TITLE.id
-  );
-  const voucherFormBlock = getBlockData(BASKET_SUMMARY_BLOCKS.VOUCHER_FORM.id);
-  const voucherInputBlock = getBlockData(
-    BASKET_SUMMARY_BLOCKS.VOUCHER_INPUT.id
-  );
-  const voucherButtonBlock = getBlockData(
-    BASKET_SUMMARY_BLOCKS.VOUCHER_BUTTON.id
-  );
-  const priceSectionBlock = getBlockData(
-    BASKET_SUMMARY_BLOCKS.PRICE_SECTION.id
-  );
-  const subtotalRowBlock = getBlockData(BASKET_SUMMARY_BLOCKS.SUBTOTAL_ROW.id);
-  const subtotalLabelBlock = getBlockData(
-    BASKET_SUMMARY_BLOCKS.SUBTOTAL_LABEL.id
-  );
-  const subtotalPriceBlock = getBlockData(
-    BASKET_SUMMARY_BLOCKS.SUBTOTAL_PRICE.id
-  );
-  const discountItemRowBlock = getBlockData(
-    BASKET_SUMMARY_BLOCKS.DISCOUNT_ITEM_ROW.id
-  );
-  const discountItemLabelBlock = getBlockData(
-    BASKET_SUMMARY_BLOCKS.DISCOUNT_ITEM_LABEL.id
-  );
-  const discountItemPriceBlock = getBlockData(
-    BASKET_SUMMARY_BLOCKS.DISCOUNT_ITEM_PRICE.id
-  );
-  const discountsTotalLabelBlock = getBlockData(
-    BASKET_SUMMARY_BLOCKS.DISCOUNTS_TOTAL_LABEL.id
-  );
-  const discountsTotalPriceBlock = getBlockData(
-    BASKET_SUMMARY_BLOCKS.DISCOUNTS_TOTAL_PRICE.id
-  );
-  const discountsTotalRowBlock = getBlockData(
-    BASKET_SUMMARY_BLOCKS.DISCOUNTS_TOTAL_ROW.id
-  );
-  const totalRowBlock = getBlockData(BASKET_SUMMARY_BLOCKS.TOTAL_ROW.id);
-  const totalLabelBlock = getBlockData(BASKET_SUMMARY_BLOCKS.TOTAL_LABEL.id);
-  const totalPriceBlock = getBlockData(BASKET_SUMMARY_BLOCKS.TOTAL_PRICE.id);
-  const checkoutSectionBlock = getBlockData(
-    BASKET_SUMMARY_BLOCKS.CHECKOUT_SECTION.id
-  );
-  const checkoutButtonBlock = getBlockData(
-    BASKET_SUMMARY_BLOCKS.CHECKOUT_BUTTON.id
-  );
-
-  const sectionStyles = convertStylesToCSS(getSectionStyles());
-  const titleStyles = convertStylesToCSS(titleBlock?.styles);
-  const voucherSectionStyles = convertStylesToCSS(voucherSectionBlock?.styles);
-  const voucherTitleStyles = convertStylesToCSS(voucherTitleBlock?.styles);
-  const voucherFormStyles = convertStylesToCSS(voucherFormBlock?.styles);
-  const voucherInputStyles = convertStylesToCSS(voucherInputBlock?.styles);
-  const voucherButtonStyles = convertStylesToCSS(voucherButtonBlock?.styles);
-  const priceSectionStyles = convertStylesToCSS(priceSectionBlock?.styles);
-  const subtotalRowStyles = convertStylesToCSS(subtotalRowBlock?.styles);
-  const subtotalLabelStyles = convertStylesToCSS(subtotalLabelBlock?.styles);
-  const subtotalPriceStyles = convertStylesToCSS(subtotalPriceBlock?.styles);
-  const discountItemRowStyles = convertStylesToCSS(
-    discountItemRowBlock?.styles
-  );
-  const discountItemLabelStyles = convertStylesToCSS(
-    discountItemLabelBlock?.styles
-  );
-  const discountItemPriceStyles = convertStylesToCSS(
-    discountItemPriceBlock?.styles
-  );
-  const discountsTotalLabelStyles = convertStylesToCSS(
-    discountsTotalLabelBlock?.styles
-  );
-  const discountsTotalPriceStyles = convertStylesToCSS(
-    discountsTotalPriceBlock?.styles
-  );
-  const discountsTotalRowStyles = convertStylesToCSS(
-    discountsTotalRowBlock?.styles
-  );
-  const totalRowStyles = convertStylesToCSS(totalRowBlock?.styles);
-  const totalLabelStyles = convertStylesToCSS(totalLabelBlock?.styles);
-  const totalPriceStyles = convertStylesToCSS(totalPriceBlock?.styles);
-  const checkoutSectionStyles = convertStylesToCSS(
-    checkoutSectionBlock?.styles
-  );
-  const checkoutButtonStyles = convertStylesToCSS(checkoutButtonBlock?.styles);
-
-  const ringClass = (blockId: string) =>
-    isDesigner
-      ? clsx(
-          'relative cursor-pointer',
-          selectedBlockId === blockId
-            ? 'ring-2 ring-blue-500 ring-inset'
-            : 'hover:ring-2 hover:ring-blue-300 hover:ring-inset'
-        )
-      : '';
 
   useEffect(() => {
     if (basket.voucher_code) {
@@ -272,7 +93,6 @@ export const Summary = (props: Props) => {
   const checkoutProviderProps = {
     className: clsx([
       'py-2.5',
-      'h-[50px]',
       'bg-black',
       'relative',
       'hover:bg-black',
@@ -301,72 +121,57 @@ export const Summary = (props: Props) => {
   }, [basket]);
 
   return (
-    <div
-      className={clsx(
-        'w-full xl:w-[400px] bg-gray-30 p-6',
-        isDesigner &&
-          'relative cursor-pointer hover:ring-2 hover:ring-blue-300 hover:ring-inset',
-        isDesigner && isSectionSelected && 'ring-2 ring-blue-500 ring-inset'
-      )}
-      style={sectionStyles}
-      onClick={handleSectionClick}
-    >
-      <h2
-        className={clsx(
-          'tracking-[-0.31px] text-black-850 mb-6',
-          ringClass(BASKET_SUMMARY_BLOCKS.TITLE.id)
-        )}
-        style={titleStyles}
-        onClick={(e) => handleBlockClick(BASKET_SUMMARY_BLOCKS.TITLE.id, e)}
-      >
-        {t('basket.summary.title')}
-      </h2>
-      <div
-        className={clsx(
-          'flex flex-col gap-3 mb-5',
-          ringClass(BASKET_SUMMARY_BLOCKS.VOUCHER_SECTION.id)
+    <div className="w-full xl:w-[300px]">
+      <div className="py-3 border-b border-gray-200 flex justify-between items-end">
+        <h2 className="text-xl font-light">{t('basket.summary.title')}</h2>
+        <span className="text-xs" data-testid="basket-count">
+          {basket.basketitem_set.map((x) => x.quantity).reduce((a, b) => a + b)}{' '}
+          {t('basket.summary.items').toUpperCase()}
+        </span>
+      </div>
+      <div className="py-3 border-b border-gray-200 text-xs leading-6">
+        <div className="flex justify-between">
+          <p>
+            {t('basket.summary.subtotal')} (
+            {basket.basketitem_set
+              .map((x) => x.quantity)
+              .reduce((a, b) => a + b)}{' '}
+            {t('basket.summary.items')})
+          </p>
+          <p>
+            <Price value={basket.total_product_amount} />
+          </p>
+        </div>
+        {basket.discounts.length > 0 && (
+          <>
+            {basket.discounts.map((discount, index) => (
+              <div key={index} className="flex justify-between text-secondary">
+                <p data-testid="basket-voucher-code">{discount.description}</p>
+                <Price value={discount.discount} useNegative />
+              </div>
+            ))}
+            <div className="flex justify-between">
+              <p>{t('basket.summary.discounts_total')}</p>
+              <Price
+                value={basket.discounts.reduce(
+                  (acc, curr) => acc + Number(curr.discount),
+                  0
+                )}
+                useNegative
+              />
+            </div>
+          </>
         )}
-        style={voucherSectionStyles}
-        onClick={(e) =>
-          handleBlockClick(BASKET_SUMMARY_BLOCKS.VOUCHER_SECTION.id, e)
-        }
-      >
-        <h3
-          className={clsx(
-            'text-sm text-black-850 tracking-[-0.15px]',
-            ringClass(BASKET_SUMMARY_BLOCKS.VOUCHER_TITLE.id)
-          )}
-          style={voucherTitleStyles}
-          onClick={(e) =>
-            handleBlockClick(BASKET_SUMMARY_BLOCKS.VOUCHER_TITLE.id, e)
-          }
-        >
+      </div>
+      <div className="bg-gray-50 py-3 px-5 border-b border-gray-200 text-xs">
+        <p className="mb-3 text-lg font-light">
           {t('basket.summary.form.title')}
-        </h3>
-        <form
-          onSubmit={handleSubmit(onSubmit)}
-          className={clsx(
-            'flex w-full gap-2',
-            ringClass(BASKET_SUMMARY_BLOCKS.VOUCHER_FORM.id)
-          )}
-          style={voucherFormStyles}
-          onClick={(e) =>
-            handleBlockClick(BASKET_SUMMARY_BLOCKS.VOUCHER_FORM.id, e)
-          }
-        >
-          <div
-            className={clsx(
-              'w-full',
-              ringClass(BASKET_SUMMARY_BLOCKS.VOUCHER_INPUT.id)
-            )}
-            onClick={(e) =>
-              handleBlockClick(BASKET_SUMMARY_BLOCKS.VOUCHER_INPUT.id, e)
-            }
-          >
+        </p>
+        <form onSubmit={handleSubmit(onSubmit)} className="flex w-full">
+          <div className="w-full md:w-1/2 lg:w-auto">
             <Input
               placeholder={t('basket.summary.form.placeholder')}
-              className="h-[38px] w-full"
-              style={voucherInputStyles}
+              className="h-9 w-full lg:w-40"
               data-testid="basket-voucher-input"
               {...register('voucherCode')}
               error={errors.voucherCode}
@@ -375,238 +180,34 @@ export const Summary = (props: Props) => {
           </div>
           {basket.voucher_code ? (
             <Button
-              className={clsx(
-                'h-[38px] w-16 px-0 shrink-0 text-sm placeholder:text-sm',
-                ringClass(BASKET_SUMMARY_BLOCKS.VOUCHER_BUTTON.id)
-              )}
-              appearance="filled"
-              style={voucherButtonStyles}
+              className="h-9 w-20 px-0 border-gray-500 border-l-0"
+              appearance="outlined"
               data-testid="basket-voucher-remove"
               type="button"
-              onClick={(e) => {
-                if (isDesigner) {
-                  handleBlockClick(BASKET_SUMMARY_BLOCKS.VOUCHER_BUTTON.id, e);
-                } else {
-                  removeVoucherCode();
-                }
-              }}
+              onClick={removeVoucherCode}
             >
               {t('basket.summary.remove')}
             </Button>
           ) : (
             <Button
-              className={clsx(
-                'h-[38px] w-16 px-0 shrink-0 text-sm placeholder:text-sm',
-                ringClass(BASKET_SUMMARY_BLOCKS.VOUCHER_BUTTON.id)
-              )}
-              appearance="filled"
-              style={voucherButtonStyles}
+              className="h-9 w-20 px-0 border-gray-500 border-l-0"
+              appearance="outlined"
               data-testid="basket-voucher-submit"
-              onClick={(e) => {
-                if (isDesigner) {
-                  handleBlockClick(BASKET_SUMMARY_BLOCKS.VOUCHER_BUTTON.id, e);
-                }
-              }}
             >
               {t('basket.summary.submit')}
             </Button>
           )}
         </form>
       </div>
-
-      <div
-        className={clsx(
-          'text-black-850 text-sm tracking-[-0.15px] flex flex-col gap-3 border-y border-black/10 mb-6 py-6',
-          ringClass(BASKET_SUMMARY_BLOCKS.PRICE_SECTION.id)
-        )}
-        style={priceSectionStyles}
-        onClick={(e) =>
-          handleBlockClick(BASKET_SUMMARY_BLOCKS.PRICE_SECTION.id, e)
-        }
-      >
-        <div
-          className={clsx(
-            'flex justify-between',
-            ringClass(BASKET_SUMMARY_BLOCKS.SUBTOTAL_ROW.id)
-          )}
-          style={subtotalRowStyles}
-          onClick={(e) =>
-            handleBlockClick(BASKET_SUMMARY_BLOCKS.SUBTOTAL_ROW.id, e)
-          }
-        >
-          <p
-            className={ringClass(BASKET_SUMMARY_BLOCKS.SUBTOTAL_LABEL.id)}
-            style={subtotalLabelStyles}
-            onClick={(e) =>
-              handleBlockClick(BASKET_SUMMARY_BLOCKS.SUBTOTAL_LABEL.id, e)
-            }
-          >
-            {t('basket.summary.subtotal')}
-          </p>
-          <p
-            className={ringClass(BASKET_SUMMARY_BLOCKS.SUBTOTAL_PRICE.id)}
-            style={subtotalPriceStyles}
-            onClick={(e) =>
-              handleBlockClick(BASKET_SUMMARY_BLOCKS.SUBTOTAL_PRICE.id, e)
-            }
-          >
-            <Price value={basket.total_product_amount} />
-          </p>
-        </div>
-
-        {basket.discounts.length > 0 && (
-          <>
-            {basket.discounts.map((discount, index) => (
-              <div
-                key={index}
-                className={clsx(
-                  'flex justify-between',
-                  ringClass(BASKET_SUMMARY_BLOCKS.DISCOUNT_ITEM_ROW.id)
-                )}
-                style={discountItemRowStyles}
-                onClick={(e) =>
-                  handleBlockClick(
-                    BASKET_SUMMARY_BLOCKS.DISCOUNT_ITEM_ROW.id,
-                    e
-                  )
-                }
-              >
-                <p
-                  data-testid="basket-voucher-code"
-                  className={ringClass(
-                    BASKET_SUMMARY_BLOCKS.DISCOUNT_ITEM_LABEL.id
-                  )}
-                  style={discountItemLabelStyles}
-                  onClick={(e) =>
-                    handleBlockClick(
-                      BASKET_SUMMARY_BLOCKS.DISCOUNT_ITEM_LABEL.id,
-                      e
-                    )
-                  }
-                >
-                  {discount.description}
-                </p>
-                <Price
-                  value={discount.discount}
-                  className={ringClass(
-                    BASKET_SUMMARY_BLOCKS.DISCOUNT_ITEM_PRICE.id
-                  )}
-                  style={discountItemPriceStyles}
-                  onClick={(e) =>
-                    handleBlockClick(
-                      BASKET_SUMMARY_BLOCKS.DISCOUNT_ITEM_PRICE.id,
-                      e
-                    )
-                  }
-                  useNegative
-                />
-              </div>
-            ))}
-            <div
-              className={clsx(
-                'flex justify-between',
-                ringClass(BASKET_SUMMARY_BLOCKS.DISCOUNTS_TOTAL_ROW.id)
-              )}
-              style={discountsTotalRowStyles}
-              onClick={(e) =>
-                handleBlockClick(
-                  BASKET_SUMMARY_BLOCKS.DISCOUNTS_TOTAL_ROW.id,
-                  e
-                )
-              }
-            >
-              <p
-                className={ringClass(
-                  BASKET_SUMMARY_BLOCKS.DISCOUNTS_TOTAL_LABEL.id
-                )}
-                style={discountsTotalLabelStyles}
-                onClick={(e) =>
-                  handleBlockClick(
-                    BASKET_SUMMARY_BLOCKS.DISCOUNTS_TOTAL_LABEL.id,
-                    e
-                  )
-                }
-              >
-                {t('basket.summary.discounts_total')}
-              </p>
-              <Price
-                value={basket.discounts.reduce(
-                  (acc, curr) => acc + Number(curr.discount),
-                  0
-                )}
-                className={ringClass(
-                  BASKET_SUMMARY_BLOCKS.DISCOUNTS_TOTAL_PRICE.id
-                )}
-                style={discountsTotalPriceStyles}
-                onClick={(e) =>
-                  handleBlockClick(
-                    BASKET_SUMMARY_BLOCKS.DISCOUNTS_TOTAL_PRICE.id,
-                    e
-                  )
-                }
-                useNegative
-              />
-            </div>
-          </>
-        )}
-        <div
-          className={clsx(
-            'flex justify-between mt-2.5',
-            ringClass(BASKET_SUMMARY_BLOCKS.TOTAL_ROW.id)
-          )}
-          style={totalRowStyles}
-          onClick={(e) =>
-            handleBlockClick(BASKET_SUMMARY_BLOCKS.TOTAL_ROW.id, e)
-          }
-        >
-          <h2
-            className={clsx(
-              'text-base tracking-[-0.31px]',
-              ringClass(BASKET_SUMMARY_BLOCKS.TOTAL_LABEL.id)
-            )}
-            style={totalLabelStyles}
-            onClick={(e) =>
-              handleBlockClick(BASKET_SUMMARY_BLOCKS.TOTAL_LABEL.id, e)
-            }
-          >
-            {t('basket.summary.total')}
-          </h2>
-          <Price
-            value={basket.total_amount}
-            className={clsx(
-              'text-xl tracking-[-0.45px]',
-              ringClass(BASKET_SUMMARY_BLOCKS.TOTAL_PRICE.id)
-            )}
-            style={totalPriceStyles}
-            data-testid="basket-total"
-            onClick={(e) =>
-              handleBlockClick(BASKET_SUMMARY_BLOCKS.TOTAL_PRICE.id, e)
-            }
-          />
+      <div>
+        <div className="flex justify-between py-3 text-xl">
+          <h2 className="font-light">{t('basket.summary.total')}</h2>
+          <Price value={basket.total_amount} data-testid="basket-total" />
         </div>
-      </div>
-      <div
-        className={clsx(
-          'flex flex-col border-b border-black/10 pb-3 mb-6',
-          ringClass(BASKET_SUMMARY_BLOCKS.CHECKOUT_SECTION.id)
-        )}
-        style={checkoutSectionStyles}
-        onClick={(e) =>
-          handleBlockClick(BASKET_SUMMARY_BLOCKS.CHECKOUT_SECTION.id, e)
-        }
-      >
         <Button
-          className={clsx(
-            'w-full h-[50px] font-base tracking-[-0.64px]',
-            ringClass(BASKET_SUMMARY_BLOCKS.CHECKOUT_BUTTON.id)
-          )}
-          style={checkoutButtonStyles}
-          onClick={(e) => {
-            if (isDesigner) {
-              handleBlockClick(BASKET_SUMMARY_BLOCKS.CHECKOUT_BUTTON.id, e);
-            } else {
-              router.push(ROUTES.CHECKOUT);
-            }
+          className="w-full"
+          onClick={() => {
+            router.push(ROUTES.CHECKOUT);
           }}
           data-testid="basket-checkout"
         >
@@ -623,43 +224,21 @@ export const Summary = (props: Props) => {
           props={checkoutProviderProps}
         />
 
-        <PluginModule
-          component={Component.BasketVirtualTryOn}
-          props={{
-            basketItems: basket.basketitem_set.map((item) => ({
-              pk: item.product.pk,
-              sku: item.product.sku,
-              name: item.product.name,
-              productimage_set: item.product.productimage_set,
-              attributes: item.product.attributes,
-              category: (item.product as any).category
-            }))
-          }}
-        />
-      </div>
-      <div className="flex flex-col gap-2">
-        {isLoadingBasketSummaryBenefits ? (
-          <>
-            {[1, 2, 3].map((i) => (
-              <div key={i} className="flex items-center gap-1.5 animate-pulse">
-                <div className="w-3 h-3 bg-gray-200 rounded" />
-                <div className="h-3 bg-gray-200 rounded w-3/4" />
-              </div>
-            ))}
-          </>
-        ) : (
-          basketSummaryBenefits?.attributes?.basket_summary_benefits?.map(
-            (benefit, index) => (
-              <div
-                key={index}
-                className="flex items-center text-black-850 gap-1.5"
-              >
-                <Icon name="check" size={12} />
-                <span className="text-xs">{benefit?.value?.title}</span>
-              </div>
-            )
-          )
-        )}
+        <div className="mt-4">
+          <PluginModule
+            component={Component.BasketVirtualTryOn}
+            props={{
+              basketItems: basket.basketitem_set.map((item) => ({
+                pk: item.product.pk,
+                sku: item.product.sku,
+                name: item.product.name,
+                productimage_set: item.product.productimage_set,
+                attributes: item.product.attributes,
+                category: (item.product as any).category
+              }))
+            }}
+          />
+        </div>
       </div>
     </div>
   );