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

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

@@ -9,12 +9,19 @@ import {
   useRemoveVoucherCodeMutation
 } from '@akinon/next/data/client/basket';
 import { Basket, Error } from '@akinon/next/types';
-import { Button, Input, Price } from '@theme/components';
+import { Button, Input, Price, Icon } 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;
@@ -25,6 +32,32 @@ 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;
@@ -43,6 +76,152 @@ 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) {
@@ -93,6 +272,7 @@ export const Summary = (props: Props) => {
   const checkoutProviderProps = {
     className: clsx([
       'py-2.5',
+      'h-[50px]',
       'bg-black',
       'relative',
       'hover:bg-black',
@@ -121,57 +301,72 @@ export const Summary = (props: Props) => {
   }, [basket]);
 
   return (
-    <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>
-          </>
+    <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)
         )}
-      </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">
+        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)
+        )}
+        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)
+          }
+        >
           {t('basket.summary.form.title')}
-        </p>
-        <form onSubmit={handleSubmit(onSubmit)} className="flex w-full">
-          <div className="w-full md:w-1/2 lg:w-auto">
+        </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)
+            }
+          >
             <Input
               placeholder={t('basket.summary.form.placeholder')}
-              className="h-9 w-full lg:w-40"
+              className="h-[38px] w-full"
+              style={voucherInputStyles}
               data-testid="basket-voucher-input"
               {...register('voucherCode')}
               error={errors.voucherCode}
@@ -180,34 +375,238 @@ export const Summary = (props: Props) => {
           </div>
           {basket.voucher_code ? (
             <Button
-              className="h-9 w-20 px-0 border-gray-500 border-l-0"
-              appearance="outlined"
+              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}
               data-testid="basket-voucher-remove"
               type="button"
-              onClick={removeVoucherCode}
+              onClick={(e) => {
+                if (isDesigner) {
+                  handleBlockClick(BASKET_SUMMARY_BLOCKS.VOUCHER_BUTTON.id, e);
+                } else {
+                  removeVoucherCode();
+                }
+              }}
             >
               {t('basket.summary.remove')}
             </Button>
           ) : (
             <Button
-              className="h-9 w-20 px-0 border-gray-500 border-l-0"
-              appearance="outlined"
+              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}
               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>
-        <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
+        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>
+      <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="w-full"
-          onClick={() => {
-            router.push(ROUTES.CHECKOUT);
+          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);
+            }
           }}
           data-testid="basket-checkout"
         >
@@ -223,6 +622,44 @@ export const Summary = (props: Props) => {
           component={Component.OneClickCheckoutButtons}
           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>
     </div>
   );