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

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

@@ -11,9 +11,11 @@ import { AddressForm } from '@theme/views/account/address-form';
 import { useLocalization } from '@akinon/next/hooks';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import { Trans } from '@akinon/next/components/trans';
+import { useCheckoutAddress } from '@theme/views/checkout/checkout-address-registrar';
 
 const Addresses = () => {
   const { t } = useLocalization();
+  const { viewType, sectionStyles } = useCheckoutAddress();
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const addressList = useAppSelector(
@@ -93,6 +95,24 @@ const Addresses = () => {
     return props.title;
   };
 
+  const handleAddressSelect = (
+    addressPk: string,
+    addressType: CheckoutAddressType
+  ) => {
+    const pk = Number(addressPk);
+    if (addressType.requestParam === 'shippingAddressPk') {
+      if (isBillingAddressSame) {
+        setAddresses({ shippingAddressPk: pk, billingAddressPk: pk });
+      } else {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        setAddresses({ shippingAddressPk: pk } as any);
+      }
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      setAddresses({ billingAddressPk: pk } as any);
+    }
+  };
+
   return (
     <div className="w-full lg:w-3/5 lg:border-r lg:border-gray-400">
       {addressTypes
@@ -128,57 +148,120 @@ const Addresses = () => {
                   }}
                 />
               </p>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                {addressList.map((address) => (
-                  <AddressBox
-                    key={address.pk}
-                    addressType={addressType}
-                    address={address}
-                    isBillingAddressSame={isBillingAddressSame}
-                    data-testid={`checkout-address-${address.pk}`}
-                    disabled={
-                      delivery_option?.delivery_option_type ===
-                        'retail_store' &&
-                      addressType.requestParam === 'shippingAddressPk'
-                    }
-                  />
-                ))}
 
-                <PluginModule
-                  component={Component.ClickCollect}
-                  props={{ addressTypeParam: addressType.requestParam }}
-                />
-
-                <div
-                  role="button"
-                  onClick={() => setIsModalOpen(true)}
-                  className={clsx(
-                    'relative cursor-pointer w-full min-h-[8rem] border shadow p-4',
-                    "hover:after:content-[''] hover:after:border-4 hover:after:opacity-30 hover:after:transition-opacity",
-                    'after:border-secondary-400 after:absolute after:inset-0 after:opacity-0 after:duration-150 after:-z-10',
-                    {
-                      'opacity-30 select-none pointer-events-none':
-                        delivery_option?.delivery_option_type === 'retail_store'
-                    }
+              {viewType === 'dropdown' ? (
+                <div className="space-y-4">
+                  <div className="w-full">
+                    <select
+                      className="w-full p-2 border border-gray-300 rounded-md"
+                      value={addressType.value || ''}
+                      onChange={(e) =>
+                        handleAddressSelect(e.target.value, addressType)
+                      }
+                      disabled={
+                        delivery_option?.delivery_option_type ===
+                          'retail_store' &&
+                        addressType.requestParam === 'shippingAddressPk'
+                      }
+                    >
+                      <option value="" disabled>
+                        {t('checkout.address.select_label') || 'Select Address'}
+                      </option>
+                      {addressList.map((address) => (
+                        <option key={address.pk} value={address.pk}>
+                          {address.title} - {address.first_name}{' '}
+                          {address.last_name}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                  {addressList.find((a) => a.pk === addressType.value) && (
+                    <div className="p-4 bg-gray-50 rounded-md text-sm text-gray-600">
+                      {(() => {
+                        const addr = addressList.find(
+                          (a) => a.pk === addressType.value
+                        );
+                        return addr ? (
+                          <>
+                            <p className="font-semibold">{addr.title}</p>
+                            <p>{addr.line}</p>
+                            <p>
+                              {addr.township?.name} / {addr.city?.name}
+                            </p>
+                          </>
+                        ) : null;
+                      })()}
+                    </div>
                   )}
-                >
-                  <div className="text-xs flex justify-center items-center h-full gap-x-2">
-                    <Icon name="plus" size={12} />
-                    <span data-testid="checkout-add-new-address">
+                  <div className="mt-4">
+                    <button
+                      onClick={() => setIsModalOpen(true)}
+                      className="text-primary-500 underline text-sm flex items-center gap-1"
+                    >
+                      <Icon name="plus" size={12} />
                       {t('checkout.address.add_new_address')}
-                    </span>
+                    </button>
                   </div>
                 </div>
-                <Modal
-                  portalId="orders-checkout-new-address-modal"
-                  title={t('checkout.address.add_new_address')}
-                  open={isModalOpen}
-                  setOpen={setIsModalOpen}
-                  className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
+              ) : (
+                <div
+                  className="grid grid-cols-1 md:grid-cols-2"
+                  style={{
+                    gap: sectionStyles['box-gap'] || '12px'
+                  }}
                 >
-                  <AddressForm onSubmit={onSubmit} />
-                </Modal>
-              </div>
+                  {addressList.map((address) => (
+                    <AddressBox
+                      key={address.pk}
+                      addressType={addressType}
+                      address={address}
+                      isBillingAddressSame={isBillingAddressSame}
+                      data-testid={`checkout-address-${address.pk}`}
+                      disabled={
+                        delivery_option?.delivery_option_type ===
+                          'retail_store' &&
+                        addressType.requestParam === 'shippingAddressPk'
+                      }
+                    />
+                  ))}
+
+                  <PluginModule
+                    component={Component.ClickCollect}
+                    props={{ addressTypeParam: addressType.requestParam }}
+                  />
+
+                  <div
+                    role="button"
+                    onClick={() => setIsModalOpen(true)}
+                    className={clsx(
+                      'relative cursor-pointer w-full min-h-[8rem] border shadow p-4',
+                      "hover:after:content-[''] hover:after:border-4 hover:after:opacity-30 hover:after:transition-opacity",
+                      'after:border-secondary-400 after:absolute after:inset-0 after:opacity-0 after:duration-150 after:-z-10',
+                      {
+                        'opacity-30 select-none pointer-events-none':
+                          delivery_option?.delivery_option_type ===
+                          'retail_store'
+                      }
+                    )}
+                  >
+                    <div className="text-xs flex justify-center items-center h-full gap-x-2">
+                      <Icon name="plus" size={12} />
+                      <span data-testid="checkout-add-new-address">
+                        {t('checkout.address.add_new_address')}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              )}
+              <Modal
+                portalId="orders-checkout-new-address-modal"
+                title={t('checkout.address.add_new_address')}
+                open={isModalOpen}
+                setOpen={setIsModalOpen}
+                className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
+              >
+                <AddressForm onSubmit={onSubmit} />
+              </Modal>
             </div>
           </div>
         ))}

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')}