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

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

@@ -9,9 +9,23 @@ 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
@@ -40,12 +54,56 @@ export const Summary = () => {
         }}
       />
       <StoreCredits />
-      <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">
+      <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
+            }}
+          >
             {t('checkout.summary.title')}
           </span>
-          <span className="text-gray-950 text-xs">
+          <span
+            style={{
+              fontSize: getStyleValue('item-count-font-size', 12),
+              color: getStyleValue('item-count-color', '#111827') as string
+            }}
+          >
             {preOrder.basket.basketitem_set.length}{' '}
             {t('checkout.summary.items').toUpperCase()}
           </span>
@@ -54,7 +112,19 @@ export const Summary = () => {
           {preOrder.basket.basketitem_set.map((item, index) => (
             <div
               key={`summary-basketitem-${index}`}
-              className="flex flex-row border-b border-solid border-gray-400 py-3 px-4 last:border-b-0 sm:px-5"
+              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
+              }}
             >
               <Link
                 href={'#'}
@@ -76,14 +146,33 @@ export const Summary = () => {
                   <Link
                     href={item.product.absolute_url}
                     className={twMerge(
-                      'text-xs text-black-800 transition-all mb-1 hover:text-secondary',
+                      '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 text-xs text-black-800">
+                    <div
+                      className="flex"
+                      style={{
+                        fontSize: getStyleValue(
+                          'product-quantity-font-size',
+                          12
+                        ),
+                        color: getStyleValue(
+                          'product-quantity-color',
+                          '#1f2937'
+                        ) as string
+                      }}
+                    >
                       <span>{t('checkout.summary.quantity')}:</span>
                       <span className="ml-1 min-w-max">{item.quantity}</span>
                     </div>
@@ -91,11 +180,32 @@ 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="text-xs text-black-800 line-through min-w-max sm:text-sm">
+                    <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
+                      }}
+                    >
                       <Price value={item.product.retail_price} />
                     </div>
                   )}
-                  <div className="text-xs text-secondary min-w-max sm:text-sm">
+                  <div
+                    className="min-w-max"
+                    style={{
+                      fontSize: getStyleValue('product-price-font-size', 14),
+                      color: getStyleValue(
+                        'product-price-color',
+                        '#ef4444'
+                      ) as string
+                    }}
+                  >
                     <Price value={item.product.price} />
                   </div>
                 </div>
@@ -104,61 +214,225 @@ export const Summary = () => {
           ))}
         </div>
         <div className="pt-3">
-          <div className="flex items-center justify-between w-full text-xs text-black-800 py-1 px-4 sm:px-5">
-            <span>
+          <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.subtotal')} (
               {preOrder.basket.basketitem_set.length}{' '}
               {t('checkout.summary.items')})
             </span>
-            <span>
+            <span
+              style={{
+                fontSize: getStyleValue('price-value-font-size', 12),
+                color: getStyleValue('price-value-color', '#1f2937') as string
+              }}
+            >
               <Price value={preOrder?.basket?.total_amount} />
             </span>
           </div>
-          <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>
+          <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
+              }}
+            >
               <Price value={preOrder?.shipping_amount} />
             </span>
           </div>
           {parseFloat(preOrder?.loyalty_money) > 0 && (
-            <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>
+            <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
+                }}
+              >
                 <Price value={preOrder?.loyalty_money} />
               </span>
             </div>
           )}
-          <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>
+          <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
+              }}
+            >
               <Price
                 value={preOrder?.basket?.total_discount_amount}
                 useNegative
               />
             </span>
           </div>
-          <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">
+          <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
+              }}
+            >
               <Price value={preOrder?.unpaid_amount} />
             </span>
           </div>
         </div>
       </div>
       {currentStep === CheckoutStep.Payment && (
-        <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">
+        <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
+              }}
+            >
               {t('checkout.summary.delivery_info')}
             </div>
             <div
-              className="text-xs text-black-800 italic cursor-pointer underline transition-all hover:text-secondary"
+              className="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 py-4 px-4 text-black-800 text-xs sm:px-5">
+          <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="w-full overflow-hidden overflow-ellipsis mb-1 last:mb-0">
               <Trans
                 i18nKey="checkout.summary.info"