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

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

@@ -9,23 +9,9 @@ import { twMerge } from 'tailwind-merge';
 import { Image } from '@akinon/next/components/image';
 import { Trans } from '@akinon/next/components/trans';
 import { StoreCredits } from './steps/payment/options/store-credit';
-import { useCheckoutSummary } from './checkout-summary-registrar';
 
 export const Summary = () => {
   const { t } = useLocalization();
-  const { sectionStyles } = useCheckoutSummary();
-
-  // Helper to get style value (already includes unit if needed)
-  const getStyleValue = (
-    key: string,
-    fallback: string | number = ''
-  ): string | number => {
-    const value = sectionStyles[key];
-    if (value === undefined || value === null || value === '') {
-      return fallback;
-    }
-    return value;
-  };
 
   const currentStep = useAppSelector(
     (state: RootState) => state.checkout.steps.current
@@ -54,56 +40,12 @@ export const Summary = () => {
         }}
       />
       <StoreCredits />
-      <div
-        className="flex flex-col w-full"
-        style={{
-          borderWidth: getStyleValue('container-border-width', 1),
-          borderStyle: 'solid',
-          borderColor: getStyleValue(
-            'container-border-color',
-            '#d1d5db'
-          ) as string,
-          borderRadius: getStyleValue('container-border-radius', 0),
-          backgroundColor: getStyleValue(
-            'container-background-color',
-            '#ffffff'
-          ) as string
-        }}
-      >
-        <div
-          className="flex justify-between items-center flex-row"
-          style={{
-            paddingLeft: getStyleValue('header-padding-x', 20),
-            paddingRight: getStyleValue('header-padding-x', 20),
-            paddingTop: getStyleValue('header-padding-y', 16),
-            paddingBottom: getStyleValue('header-padding-y', 16),
-            borderBottomWidth: getStyleValue('header-border-bottom-width', 1),
-            borderBottomStyle: 'solid',
-            borderBottomColor: getStyleValue(
-              'header-border-bottom-color',
-              '#d1d5db'
-            ) as string,
-            backgroundColor: getStyleValue(
-              'header-background-color',
-              '#ffffff'
-            ) as string
-          }}
-        >
-          <span
-            style={{
-              fontSize: getStyleValue('title-font-size', 20),
-              fontWeight: getStyleValue('title-font-weight', '300'),
-              color: getStyleValue('title-color', '#1f2937') as string
-            }}
-          >
+      <div className="flex flex-col w-full border border-solid border-gray-400">
+        <div className="flex justify-between items-center flex-row border-b border-solid border-gray-400 px-4 py-2 sm:px-5 sm:py-4 sm:min-h-15">
+          <span className="text-black-800 text-xl font-light sm:text-2xl">
             {t('checkout.summary.title')}
           </span>
-          <span
-            style={{
-              fontSize: getStyleValue('item-count-font-size', 12),
-              color: getStyleValue('item-count-color', '#111827') as string
-            }}
-          >
+          <span className="text-gray-950 text-xs">
             {preOrder.basket.basketitem_set.length}{' '}
             {t('checkout.summary.items').toUpperCase()}
           </span>
@@ -112,19 +54,7 @@ export const Summary = () => {
           {preOrder.basket.basketitem_set.map((item, index) => (
             <div
               key={`summary-basketitem-${index}`}
-              className="flex flex-row last:border-b-0"
-              style={{
-                paddingLeft: getStyleValue('item-padding-x', 20),
-                paddingRight: getStyleValue('item-padding-x', 20),
-                paddingTop: getStyleValue('item-padding-y', 12),
-                paddingBottom: getStyleValue('item-padding-y', 12),
-                borderBottomWidth: getStyleValue('item-border-bottom-width', 1),
-                borderBottomStyle: 'solid',
-                borderBottomColor: getStyleValue(
-                  'item-border-bottom-color',
-                  '#d1d5db'
-                ) as string
-              }}
+              className="flex flex-row border-b border-solid border-gray-400 py-3 px-4 last:border-b-0 sm:px-5"
             >
               <Link
                 href={'#'}
@@ -146,33 +76,14 @@ export const Summary = () => {
                   <Link
                     href={item.product.absolute_url}
                     className={twMerge(
-                      'transition-all mb-1 hover:text-secondary',
+                      'text-xs text-black-800 transition-all mb-1 hover:text-secondary',
                       isMobileApp && 'pointer-events-none'
                     )}
-                    style={{
-                      fontSize: getStyleValue('product-name-font-size', 12),
-                      color: getStyleValue(
-                        'product-name-color',
-                        '#1f2937'
-                      ) as string
-                    }}
                   >
                     {item.product.name}
                   </Link>
                   <div className="flex flex-col">
-                    <div
-                      className="flex"
-                      style={{
-                        fontSize: getStyleValue(
-                          'product-quantity-font-size',
-                          12
-                        ),
-                        color: getStyleValue(
-                          'product-quantity-color',
-                          '#1f2937'
-                        ) as string
-                      }}
-                    >
+                    <div className="flex text-xs text-black-800">
                       <span>{t('checkout.summary.quantity')}:</span>
                       <span className="ml-1 min-w-max">{item.quantity}</span>
                     </div>
@@ -180,32 +91,11 @@ export const Summary = () => {
                 </div>
                 <div className="flex items-end justify-center flex-col w-1/2">
                   {item.product.retail_price !== item.product.price && (
-                    <div
-                      className="line-through min-w-max"
-                      style={{
-                        fontSize: getStyleValue(
-                          'product-old-price-font-size',
-                          12
-                        ),
-                        color: getStyleValue(
-                          'product-old-price-color',
-                          '#1f2937'
-                        ) as string
-                      }}
-                    >
+                    <div className="text-xs text-black-800 line-through min-w-max sm:text-sm">
                       <Price value={item.product.retail_price} />
                     </div>
                   )}
-                  <div
-                    className="min-w-max"
-                    style={{
-                      fontSize: getStyleValue('product-price-font-size', 14),
-                      color: getStyleValue(
-                        'product-price-color',
-                        '#ef4444'
-                      ) as string
-                    }}
-                  >
+                  <div className="text-xs text-secondary min-w-max sm:text-sm">
                     <Price value={item.product.price} />
                   </div>
                 </div>
@@ -214,225 +104,61 @@ export const Summary = () => {
           ))}
         </div>
         <div className="pt-3">
-          <div
-            className="flex items-center justify-between w-full"
-            style={{
-              paddingLeft: getStyleValue('price-row-padding-x', 20),
-              paddingRight: getStyleValue('price-row-padding-x', 20),
-              paddingTop: getStyleValue('price-row-padding-y', 4),
-              paddingBottom: getStyleValue('price-row-padding-y', 4)
-            }}
-          >
-            <span
-              style={{
-                fontSize: getStyleValue('price-label-font-size', 12),
-                color: getStyleValue('price-label-color', '#1f2937') as string
-              }}
-            >
+          <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
+            <span>
               {t('checkout.summary.subtotal')} (
               {preOrder.basket.basketitem_set.length}{' '}
               {t('checkout.summary.items')})
             </span>
-            <span
-              style={{
-                fontSize: getStyleValue('price-value-font-size', 12),
-                color: getStyleValue('price-value-color', '#1f2937') as string
-              }}
-            >
+            <span>
               <Price value={preOrder?.basket?.total_amount} />
             </span>
           </div>
-          <div
-            className="flex items-center justify-between w-full"
-            style={{
-              paddingLeft: getStyleValue('price-row-padding-x', 20),
-              paddingRight: getStyleValue('price-row-padding-x', 20),
-              paddingTop: getStyleValue('price-row-padding-y', 4),
-              paddingBottom: getStyleValue('price-row-padding-y', 4)
-            }}
-          >
-            <span
-              style={{
-                fontSize: getStyleValue('price-label-font-size', 12),
-                color: getStyleValue('price-label-color', '#1f2937') as string
-              }}
-            >
-              {t('checkout.summary.shipping')}
-            </span>
-            <span
-              style={{
-                fontSize: getStyleValue('price-value-font-size', 12),
-                color: getStyleValue('price-value-color', '#1f2937') as string
-              }}
-            >
+          <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
+            <span>{t('checkout.summary.shipping')}</span>
+            <span>
               <Price value={preOrder?.shipping_amount} />
             </span>
           </div>
           {parseFloat(preOrder?.loyalty_money) > 0 && (
-            <div
-              className="flex items-center justify-between w-full"
-              style={{
-                paddingLeft: getStyleValue('price-row-padding-x', 20),
-                paddingRight: getStyleValue('price-row-padding-x', 20),
-                paddingTop: getStyleValue('price-row-padding-y', 4),
-                paddingBottom: getStyleValue('price-row-padding-y', 4)
-              }}
-            >
-              <span
-                style={{
-                  fontSize: getStyleValue('price-label-font-size', 12),
-                  color: getStyleValue('price-label-color', '#1f2937') as string
-                }}
-              >
-                {t('checkout.summary.loyalty_money_total')}
-              </span>
-              <span
-                style={{
-                  fontSize: getStyleValue('price-value-font-size', 12),
-                  color: getStyleValue('price-value-color', '#1f2937') as string
-                }}
-              >
+            <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
+              <span>{t('checkout.summary.loyalty_money_total')}</span>
+              <span>
                 <Price value={preOrder?.loyalty_money} />
               </span>
             </div>
           )}
-          <div
-            className="flex items-center justify-between w-full"
-            style={{
-              paddingLeft: getStyleValue('price-row-padding-x', 20),
-              paddingRight: getStyleValue('price-row-padding-x', 20),
-              paddingTop: getStyleValue('price-row-padding-y', 4),
-              paddingBottom: getStyleValue('price-row-padding-y', 4)
-            }}
-          >
-            <span
-              style={{
-                fontSize: getStyleValue('price-label-font-size', 12),
-                color: getStyleValue('price-label-color', '#1f2937') as string
-              }}
-            >
-              {t('checkout.summary.discounts_total')}
-            </span>
-            <span
-              style={{
-                fontSize: getStyleValue('price-value-font-size', 12),
-                color: getStyleValue('price-value-color', '#1f2937') as string
-              }}
-            >
+          <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
+            <span>{t('checkout.summary.discounts_total')}</span>
+            <span>
               <Price
                 value={preOrder?.basket?.total_discount_amount}
                 useNegative
               />
             </span>
           </div>
-          <div
-            className="flex items-center justify-between w-full mt-3"
-            style={{
-              paddingLeft: getStyleValue('total-padding-x', 20),
-              paddingRight: getStyleValue('total-padding-x', 20),
-              paddingTop: getStyleValue('total-padding-y', 12),
-              paddingBottom: getStyleValue('total-padding-y', 12),
-              borderTopWidth: getStyleValue('total-border-top-width', 1),
-              borderTopStyle: 'solid',
-              borderTopColor: getStyleValue(
-                'total-border-top-color',
-                '#d1d5db'
-              ) as string,
-              backgroundColor: getStyleValue(
-                'total-background-color',
-                '#ffffff'
-              ) as string
-            }}
-          >
-            <span
-              style={{
-                fontSize: getStyleValue('total-label-font-size', 18),
-                fontWeight: getStyleValue('total-label-font-weight', '300'),
-                color: getStyleValue('total-label-color', '#1f2937') as string
-              }}
-            >
-              {t('checkout.summary.total')}
-            </span>
-            <span
-              className="min-w-max pl-4"
-              style={{
-                fontSize: getStyleValue('total-value-font-size', 20),
-                color: getStyleValue('total-value-color', '#1f2937') as string
-              }}
-            >
+          <div className="flex items-center justify-between w-full text-black-800 px-4 sm:px-5 text-lg border-t border-solid border-gray-400 py-2 mt-3 sm:text-xl sm:py-3">
+            <span className="font-light">{t('checkout.summary.total')}</span>
+            <span className="min-w-max pl-4">
               <Price value={preOrder?.unpaid_amount} />
             </span>
           </div>
         </div>
       </div>
       {currentStep === CheckoutStep.Payment && (
-        <div
-          className="flex flex-col w-full"
-          style={{
-            marginTop: getStyleValue('delivery-info-margin-top', 16),
-            borderWidth: getStyleValue('container-border-width', 1),
-            borderStyle: 'solid',
-            borderColor: getStyleValue(
-              'container-border-color',
-              '#d1d5db'
-            ) as string,
-            borderRadius: getStyleValue('container-border-radius', 0),
-            backgroundColor: getStyleValue(
-              'container-background-color',
-              '#ffffff'
-            ) as string
-          }}
-        >
-          <div
-            className="flex justify-between items-center flex-row"
-            style={{
-              paddingLeft: getStyleValue('header-padding-x', 20),
-              paddingRight: getStyleValue('header-padding-x', 20),
-              paddingTop: getStyleValue('header-padding-y', 16),
-              paddingBottom: getStyleValue('header-padding-y', 16),
-              borderBottomWidth: getStyleValue('header-border-bottom-width', 1),
-              borderBottomStyle: 'solid',
-              borderBottomColor: getStyleValue(
-                'header-border-bottom-color',
-                '#d1d5db'
-              ) as string,
-              backgroundColor: getStyleValue(
-                'header-background-color',
-                '#ffffff'
-              ) as string
-            }}
-          >
-            <div
-              style={{
-                fontSize: getStyleValue('title-font-size', 20),
-                fontWeight: getStyleValue('title-font-weight', '300'),
-                color: getStyleValue('title-color', '#1f2937') as string
-              }}
-            >
+        <div className="flex flex-col w-full border border-solid border-gray-400 mt-4">
+          <div className="flex justify-between items-center flex-row border-b border-solid border-gray-400 px-4 py-2 sm:px-5 sm:py-3 sm:min-h-15">
+            <div className="text-black-800 text-xl font-light sm:text-2xl">
               {t('checkout.summary.delivery_info')}
             </div>
             <div
-              className="italic cursor-pointer underline transition-all hover:text-secondary"
+              className="text-xs text-black-800 italic cursor-pointer underline transition-all hover:text-secondary"
               onClick={() => dispatch(setCurrentStep(CheckoutStep.Shipping))}
-              style={{
-                fontSize: getStyleValue('delivery-info-font-size', 12),
-                color: getStyleValue('delivery-info-color', '#1f2937') as string
-              }}
             >
               {t('checkout.summary.change')}
             </div>
           </div>
-          <div
-            className="flex flex-col"
-            style={{
-              paddingLeft: getStyleValue('delivery-info-padding-x', 20),
-              paddingRight: getStyleValue('delivery-info-padding-x', 20),
-              paddingTop: getStyleValue('delivery-info-padding-y', 16),
-              paddingBottom: getStyleValue('delivery-info-padding-y', 16),
-              fontSize: getStyleValue('delivery-info-font-size', 12),
-              color: getStyleValue('delivery-info-color', '#1f2937') as string
-            }}
-          >
+          <div className="flex flex-col py-4 px-4 text-black-800 text-xs sm:px-5">
             <div className="w-full overflow-hidden overflow-ellipsis mb-1 last:mb-0">
               <Trans
                 i18nKey="checkout.summary.info"