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

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

@@ -13,39 +13,10 @@ 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,
@@ -201,144 +172,33 @@ const ShippingOptions: React.FC = () => {
             {t('checkout.address.shipping.chosen_address')}:{' '}
             {shipping_address?.city.name}
           </p>
-
-          {/* 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))}
+          {shippingOptions && shippingOptions.length > 0 && (
+            <>
+              {shippingOptions.map((option) => (
+                <div
+                  key={option.pk}
+                  className="py-4 border-t border-gray-400 flex justify-between"
                 >
-                  <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>
-                  );
-                })}
-              </>
-            )}
+                  <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>
+              ))}
+            </>
+          )}
 
           {attributeBasedShippingOptions &&
             Object.keys(attributeBasedShippingOptions).length > 0 &&
@@ -403,74 +263,9 @@ const ShippingOptions: React.FC = () => {
             ))}
 
           <Button
-            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'
-            }}
+            className="mt-2 w-full"
             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')}