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

package/app-template/src/views/checkout/steps/shipping/shipping-options.tsx

@@ -13,10 +13,39 @@ import {
 import { Price, Button, Radio } from '@theme/components';
 import { CheckoutStep } from '@akinon/next/types';
 import { useLocalization } from '@akinon/next/hooks';
+import { useCheckoutDeliveryMethod } from '@theme/views/checkout/checkout-delivery-method-registrar';
+import { useCheckoutButtons } from '@theme/views/checkout/checkout-buttons-registrar';
 
 const ShippingOptions: React.FC = () => {
   const { t } = useLocalization();
   const dispatch = useAppDispatch();
+  const { viewType, sectionStyles } = useCheckoutDeliveryMethod();
+  const { sectionStyles: buttonStyles } = useCheckoutButtons();
+
+  // 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;
+  };
+
+  // Helper to get button style value
+  const getButtonStyle = (
+    key: string,
+    fallback: string | number = ''
+  ): string | number => {
+    const value = buttonStyles[key];
+    if (value === undefined || value === null || value === '') {
+      return fallback;
+    }
+    return value;
+  };
+
   const {
     steps,
     shippingOptions,
@@ -172,33 +201,144 @@ const ShippingOptions: React.FC = () => {
             {t('checkout.address.shipping.chosen_address')}:{' '}
             {shipping_address?.city.name}
           </p>
-          {shippingOptions && shippingOptions.length > 0 && (
-            <>
-              {shippingOptions.map((option) => (
-                <div
-                  key={option.pk}
-                  className="py-4 border-t border-gray-400 flex justify-between"
+
+          {/* Dropdown View */}
+          {viewType === 'dropdown' &&
+            shippingOptions &&
+            shippingOptions.length > 0 && (
+              <div className="mb-4">
+                <select
+                  className="w-full transition-all duration-200"
+                  style={{
+                    borderColor: getStyleValue(
+                      'dropdown-border-color',
+                      '#e5e7eb'
+                    ) as string,
+                    borderWidth: getStyleValue('dropdown-border-width', '1px'),
+                    borderStyle: 'solid',
+                    borderRadius: getStyleValue(
+                      'dropdown-border-radius',
+                      '6px'
+                    ),
+                    backgroundColor: getStyleValue(
+                      'dropdown-background-color',
+                      '#ffffff'
+                    ) as string,
+                    padding: getStyleValue('dropdown-padding', '12px'),
+                    fontSize: getStyleValue('dropdown-font-size', '14px'),
+                    color: getStyleValue('dropdown-color', '#030712') as string
+                  }}
+                  value={shipping_option?.pk || ''}
+                  onChange={(e) => setShippingOption(Number(e.target.value))}
                 >
-                  <Radio
-                    name="shipping"
-                    checked={option.pk === shipping_option?.pk}
-                    onChange={() => {
-                      setShippingOption(option.pk);
-                    }}
-                    onClick={() => {
-                      setShippingOption(option?.pk);
-                    }}
-                    data-testid={`checkout-shipping-option-${option.pk}`}
-                  >
-                    {option.name}
-                  </Radio>
-                  <span className="text-xs">
-                    <Price value={option.shipping_amount} />
-                  </span>
-                </div>
-              ))}
-            </>
-          )}
+                  <option value="" disabled>
+                    {t('checkout.address.shipping.select_method') ||
+                      'Select delivery method'}
+                  </option>
+                  {shippingOptions.map((option) => (
+                    <option key={option.pk} value={option.pk}>
+                      {option.name} - {option.shipping_amount}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+
+          {/* Radio View */}
+          {viewType === 'radio' &&
+            shippingOptions &&
+            shippingOptions.length > 0 && (
+              <>
+                {shippingOptions.map((option) => {
+                  const isSelected = option.pk === shipping_option?.pk;
+                  return (
+                    <div
+                      key={option.pk}
+                      className="flex justify-between cursor-pointer transition-all duration-200"
+                      style={{
+                        paddingTop: getStyleValue('item-padding-y', '16px'),
+                        paddingBottom: getStyleValue('item-padding-y', '16px'),
+                        borderTopWidth: getStyleValue(
+                          'item-border-width',
+                          '1px'
+                        ),
+                        borderTopStyle: 'solid',
+                        borderTopColor: isSelected
+                          ? (getStyleValue(
+                              'item-selected-border-color',
+                              '#3b82f6'
+                            ) as string)
+                          : (getStyleValue(
+                              'item-border-color',
+                              '#e5e7eb'
+                            ) as string),
+                        backgroundColor: isSelected
+                          ? (getStyleValue(
+                              'item-selected-background-color',
+                              '#f0f9ff'
+                            ) as string)
+                          : (getStyleValue(
+                              'item-background-color',
+                              'transparent'
+                            ) as string)
+                      }}
+                      onMouseEnter={(e) => {
+                        if (!isSelected) {
+                          e.currentTarget.style.backgroundColor = getStyleValue(
+                            'item-hover-background-color',
+                            '#f9fafb'
+                          ) as string;
+                        }
+                      }}
+                      onMouseLeave={(e) => {
+                        if (!isSelected) {
+                          e.currentTarget.style.backgroundColor = getStyleValue(
+                            'item-background-color',
+                            'transparent'
+                          ) as string;
+                        }
+                      }}
+                      onClick={() => setShippingOption(option.pk)}
+                    >
+                      <Radio
+                        name="shipping"
+                        checked={isSelected}
+                        onChange={() => setShippingOption(option.pk)}
+                        data-testid={`checkout-shipping-option-${option.pk}`}
+                      >
+                        <span
+                          style={{
+                            fontSize: getStyleValue('label-font-size', '14px'),
+                            fontWeight: getStyleValue(
+                              'label-font-weight',
+                              '400'
+                            ),
+                            color: getStyleValue(
+                              'label-color',
+                              '#030712'
+                            ) as string
+                          }}
+                        >
+                          {option.name}
+                        </span>
+                      </Radio>
+                      <span
+                        style={{
+                          fontSize: getStyleValue('price-font-size', '12px'),
+                          fontWeight: getStyleValue('price-font-weight', '400'),
+                          color: getStyleValue(
+                            'price-color',
+                            '#030712'
+                          ) as string
+                        }}
+                      >
+                        <Price value={option.shipping_amount} />
+                      </span>
+                    </div>
+                  );
+                })}
+              </>
+            )}
 
           {attributeBasedShippingOptions &&
             Object.keys(attributeBasedShippingOptions).length > 0 &&
@@ -263,9 +403,74 @@ const ShippingOptions: React.FC = () => {
             ))}
 
           <Button
-            className="mt-2 w-full"
+            className="mt-2"
+            style={{
+              width: getButtonStyle('button-width', 'auto') as string,
+              backgroundColor: getButtonStyle(
+                'primary-background-color',
+                '#000000'
+              ) as string,
+              color: getButtonStyle('primary-text-color', '#ffffff') as string,
+              borderWidth: getButtonStyle('primary-border-width', 0),
+              borderStyle: 'solid',
+              borderColor: getButtonStyle(
+                'primary-border-color',
+                '#000000'
+              ) as string,
+              borderRadius: getButtonStyle('primary-border-radius', 4),
+              paddingLeft: getButtonStyle('primary-padding-x', 24),
+              paddingRight: getButtonStyle('primary-padding-x', 24),
+              paddingTop: getButtonStyle('primary-padding-y', 12),
+              paddingBottom: getButtonStyle('primary-padding-y', 12),
+              fontSize: getButtonStyle('primary-font-size', 14),
+              fontWeight: getButtonStyle('primary-font-weight', '500'),
+              textTransform: getButtonStyle(
+                'primary-text-transform',
+                'uppercase'
+              ) as string as
+                | 'none'
+                | 'capitalize'
+                | 'uppercase'
+                | 'lowercase'
+                | 'initial'
+                | 'inherit',
+              cursor: !steps.shipping.completed ? 'not-allowed' : 'pointer',
+              transition: 'all 0.2s ease'
+            }}
             disabled={!steps.shipping.completed}
             onClick={() => dispatch(setCurrentStep(CheckoutStep.Payment))}
+            onMouseEnter={(e) => {
+              if (steps.shipping.completed) {
+                e.currentTarget.style.backgroundColor = getButtonStyle(
+                  'primary-hover-background-color',
+                  '#1a1a1a'
+                ) as string;
+                e.currentTarget.style.color = getButtonStyle(
+                  'primary-hover-text-color',
+                  '#ffffff'
+                ) as string;
+                e.currentTarget.style.borderColor = getButtonStyle(
+                  'primary-hover-border-color',
+                  '#1a1a1a'
+                ) as string;
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (steps.shipping.completed) {
+                e.currentTarget.style.backgroundColor = getButtonStyle(
+                  'primary-background-color',
+                  '#000000'
+                ) as string;
+                e.currentTarget.style.color = getButtonStyle(
+                  'primary-text-color',
+                  '#ffffff'
+                ) as string;
+                e.currentTarget.style.borderColor = getButtonStyle(
+                  'primary-border-color',
+                  '#000000'
+                ) as string;
+              }
+            }}
             data-testid="checkout-shipping-save"
           >
             {t('checkout.address.shipping.button')}