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

package/app-template/src/views/checkout/steps/payment/options/credit-card/index.tsx

@@ -18,7 +18,6 @@ import { useLocalization } from '@akinon/next/hooks';
 import { Image } from '@akinon/next/components/image';
 import { getPosError, checkPaymentWillRedirect } from '@akinon/next/utils';
 import PluginModule, { Component } from '@akinon/next/components/plugin-module';
-import { useCheckoutButtons } from '@theme/views/checkout/checkout-buttons-registrar';
 import { PaymentOption } from '@akinon/next/types';
 
 const creditCardFormSchema = (
@@ -96,19 +95,6 @@ const CheckoutCreditCard = () => {
   const { cardType } = useAppSelector((state: RootState) => state.checkout);
   const masterpass = useAppSelector((state: RootState) => state.masterpass);
   const { t } = useLocalization();
-  const { sectionStyles: buttonStyles } = useCheckoutButtons();
-
-  // 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 {
     register,
     handleSubmit,
@@ -419,64 +405,7 @@ const CheckoutCreditCard = () => {
               </div>
             )}
             <Button
-              className="group mt-4 inline-flex items-center justify-center"
-              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 any,
-                transition: 'all 0.2s ease'
-              }}
-              onMouseEnter={(e) => {
-                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) => {
-                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;
-              }}
+              className="group uppercase mt-4 inline-flex items-center justify-center"
               type="submit"
               disabled={isButtonDisabled}
               data-testid="checkout-credit-card-place-order"

package/app-template/src/views/checkout/steps/payment/payment-option-buttons.tsx

@@ -3,9 +3,9 @@ import { useAppSelector } from '@akinon/next/redux/hooks';
 import { RootState } from '@theme/redux/store';
 import { useSetPaymentOptionMutation } from '@akinon/next/data/client/checkout';
 import { CheckoutPaymentOption } from '@akinon/next/types';
+import { Radio } from '@theme/components';
 import { usePaymentOptions } from '@akinon/next/hooks/use-payment-options';
 import { useMemo } from 'react';
-import { useCheckoutPaymentOptions } from '@theme/views/checkout/checkout-payment-options-registrar';
 
 const PaymentOptionButtons = () => {
   const { preOrder, attributeBasedShippingOptions } = useAppSelector(
@@ -13,19 +13,6 @@ const PaymentOptionButtons = () => {
   );
   const [setPaymentOption] = useSetPaymentOptionMutation();
   const { filteredPaymentOptions } = usePaymentOptions();
-  const { isDesigner, viewType, sectionStyles } = useCheckoutPaymentOptions();
-
-  // 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 onClickHandler = (option: CheckoutPaymentOption) => {
     setPaymentOption(option.pk);
@@ -53,166 +40,48 @@ const PaymentOptionButtons = () => {
 
   return (
     <>
-      {/* Dropdown View - Real select dropdown */}
-      {(!isDesigner || viewType === 'dropdown') && (
-        <div
-          className={clsx('w-full p-4', {
-            'md:hidden': !isDesigner
-          })}
-        >
-          <select
-            className="w-full block"
-            style={{
-              width: '100%',
-              boxSizing: 'border-box',
-              borderWidth: getStyleValue('dropdown-border-width', 1),
-              borderStyle: 'solid',
-              borderColor: getStyleValue(
-                'dropdown-border-color',
-                '#e5e7eb'
-              ) as string,
-              borderRadius: getStyleValue('dropdown-border-radius', 0),
-              backgroundColor: getStyleValue(
-                'dropdown-background-color',
-                'transparent'
-              ) as string,
-              paddingLeft: getStyleValue('dropdown-padding-x', 16),
-              paddingRight: getStyleValue('dropdown-padding-x', 16),
-              paddingTop: getStyleValue('dropdown-padding-y', 12),
-              paddingBottom: getStyleValue('dropdown-padding-y', 12),
-              marginBottom: getStyleValue('dropdown-spacing', 32),
-              color: getStyleValue('dropdown-text-color', '#1f2937') as string,
-              fontSize: getStyleValue('dropdown-font-size', 18),
-              fontWeight: getStyleValue('dropdown-font-weight', '300'),
-              cursor: 'pointer',
-              outline: 'none'
-            }}
-            value={preOrder?.payment_option?.pk || ''}
-            onChange={(e) => {
-              const selectedPk = parseInt(e.target.value);
-              const selectedOption = displayedPaymentOptions.find(
-                (opt) => opt.pk === selectedPk
-              );
-              if (selectedOption) {
-                onClickHandler(selectedOption);
-                scrollToTop();
-              }
-            }}
+      <div className="w-full space-y-4 px-4 flex flex-col mb-8 md:hidden">
+        {displayedPaymentOptions.map((option) => (
+          <label
+            key={`payment-option-${option.pk}`}
+            className="border px-4 py-3 mt-3 flex h-12"
+            onClick={scrollToTop}
           >
-            <option value="" disabled>
-              Ödeme Yöntemi Seçin
-            </option>
-            {displayedPaymentOptions.map((option) => (
-              <option
-                key={`payment-option-dropdown-${option.pk}`}
-                value={option.pk}
-              >
-                {option.name}
-              </option>
-            ))}
-          </select>
-        </div>
-      )}
+            <Radio
+              type="radio"
+              name="payment-option"
+              value={option.pk}
+              checked={preOrder?.payment_option?.pk === option.pk}
+              onChange={() => onClickHandler(option)}
+              className="mr-2 mt-1"
+            />
+            <span className="flex text-primary-800 font-light text-lg">
+              {option.name}
+            </span>
+          </label>
+        ))}
+      </div>
 
-      {/* Tab View - Show in designer when selected OR always on desktop in production */}
-      {(!isDesigner || viewType === 'tab') && (
-        <div
-          className={clsx('flex overflow-x-auto', {
-            'hidden md:flex': !isDesigner
-          })}
-        >
-          {displayedPaymentOptions.map((option) => (
-            <button
-              key={`payment-option-tab-${option.pk}`}
-              onClick={() => onClickHandler(option)}
-              className="flex items-center justify-center transition-colors"
-              style={{
-                borderRightWidth: getStyleValue('tab-border-width', 1),
-                borderStyle: 'solid',
-                borderColor: getStyleValue(
-                  'tab-border-color',
-                  '#d1d5db'
-                ) as string,
-                borderBottomColor:
-                  preOrder?.payment_option?.pk === option.pk
-                    ? (getStyleValue(
-                        'tab-active-border-bottom-color',
-                        'transparent'
-                      ) as string)
-                    : (getStyleValue('tab-border-color', '#d1d5db') as string),
-                borderBottomWidth:
+      <div className="hidden md:flex">
+        {displayedPaymentOptions.map((option) => (
+          <button
+            key={`payment-option-${option.pk}`}
+            onClick={() => onClickHandler(option)}
+            className={clsx(
+              'flex items-center justify-center border-r border-b border-solid',
+              'border-gray-400 text-xs uppercase text-black-800 font-medium',
+              'text-opacity-60 bg-white h-11 px-5 transition-colors sm:h-15 sm:px-8 sm:py-8 hover:text-secondary',
+              {
+                'text-opacity-100 border-b-transparent':
                   preOrder?.payment_option?.pk === option.pk
-                    ? getStyleValue('tab-active-border-bottom-width', 0)
-                    : getStyleValue('tab-border-width', 1),
-                backgroundColor:
-                  preOrder?.payment_option?.pk === option.pk
-                    ? (getStyleValue(
-                        'tab-active-background-color',
-                        '#ffffff'
-                      ) as string)
-                    : (getStyleValue(
-                        'tab-background-color',
-                        '#ffffff'
-                      ) as string),
-                color:
-                  preOrder?.payment_option?.pk === option.pk
-                    ? (getStyleValue(
-                        'tab-active-text-color',
-                        '#1a1a1a'
-                      ) as string)
-                    : (getStyleValue(
-                        'tab-text-color',
-                        'rgba(26, 26, 26, 0.6)'
-                      ) as string),
-                height: getStyleValue('tab-height', 60),
-                paddingLeft: getStyleValue('tab-padding-x', 32),
-                paddingRight: getStyleValue('tab-padding-x', 32),
-                paddingTop: getStyleValue('tab-padding-y', 32),
-                paddingBottom: getStyleValue('tab-padding-y', 32),
-                fontSize: getStyleValue('tab-font-size', 12),
-                fontWeight: getStyleValue('tab-font-weight', '500'),
-                textTransform: getStyleValue(
-                  'tab-text-transform',
-                  'uppercase'
-                ) as string as
-                  | 'none'
-                  | 'capitalize'
-                  | 'uppercase'
-                  | 'lowercase'
-                  | 'initial'
-                  | 'inherit'
-              }}
-              onMouseEnter={(e) => {
-                if (preOrder?.payment_option?.pk !== option.pk) {
-                  e.currentTarget.style.color = getStyleValue(
-                    'tab-hover-text-color',
-                    '#ef4444'
-                  ) as string;
-                  e.currentTarget.style.backgroundColor = getStyleValue(
-                    'tab-hover-background-color',
-                    '#ffffff'
-                  ) as string;
-                }
-              }}
-              onMouseLeave={(e) => {
-                if (preOrder?.payment_option?.pk !== option.pk) {
-                  e.currentTarget.style.color = getStyleValue(
-                    'tab-text-color',
-                    'rgba(26, 26, 26, 0.6)'
-                  ) as string;
-                  e.currentTarget.style.backgroundColor = getStyleValue(
-                    'tab-background-color',
-                    '#ffffff'
-                  ) as string;
-                }
-              }}
-              data-testid={`checkout-payment-tab-${option.pk}`}
-            >
-              {option.name}
-            </button>
-          ))}
-        </div>
-      )}
+              }
+            )}
+            data-testid={`checkout-payment-tab-${option.pk}`}
+          >
+            {option.name}
+          </button>
+        ))}
+      </div>
     </>
   );
 };

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

@@ -16,7 +16,6 @@ import { Button, Modal, Radio } from '@theme/components';
 import { resetCheckoutState } from '@akinon/next/redux/reducers/checkout';
 import { AddressForm } from '@theme/views/account/address-form';
 import { useLocalization } from '@akinon/next/hooks';
-import { useCheckoutAddress } from '@theme/views/checkout/checkout-address-registrar';
 
 interface AddressBoxProps {
   addressType: CheckoutAddressType;
@@ -32,20 +31,6 @@ const AddressBox = ({
   disabled
 }: AddressBoxProps) => {
   const { t } = useLocalization();
-  const { sectionStyles } = useCheckoutAddress();
-
-  // 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 [isEditAddressModalOpen, setIsEditAddressModalOpen] = useState(false);
   const [isRemoveAddressModalOpen, setRemoveAddressModalOpen] = useState(false);
   const { shipping_address, billing_address, delivery_option, retail_store } =
@@ -140,71 +125,24 @@ const AddressBox = ({
     }
   };
 
-  const isSelected = addressType.value === address.pk;
-
-  // Build dynamic styles from theme editor (values already include units)
-  const boxStyles: React.CSSProperties = {
-    borderColor: isSelected
-      ? (getStyleValue('box-selected-border-color', '#030712') as string)
-      : (getStyleValue('box-border-color', '#e5e7eb') as string),
-    borderWidth: getStyleValue('box-border-width', '1px'),
-    borderRadius: getStyleValue('box-border-radius', '8px'),
-    backgroundColor: isSelected
-      ? (getStyleValue('box-selected-background-color', '#ffffff') as string)
-      : (getStyleValue('box-background-color', '#ffffff') as string),
-    padding: getStyleValue('box-padding', '16px')
-  };
-
-  const titleStyles: React.CSSProperties = {
-    fontSize: getStyleValue('box-title-font-size', '14px'),
-    fontWeight: getStyleValue('box-title-font-weight', '600'),
-    color: getStyleValue('box-title-color', '#030712') as string
-  };
-
-  const textStyles: React.CSSProperties = {
-    fontSize: getStyleValue('box-text-font-size', '13px'),
-    color: getStyleValue('box-text-color', '#6b7280') as string
-  };
-
   return (
     <div
       onClick={() => handleAddressClick(addressType, address)}
       key={address.pk}
-      style={boxStyles}
       className={clsx(
-        'cursor-pointer relative w-full border shadow min-h-[8rem] transition-all duration-200',
+        'cursor-pointer relative w-full border shadow p-4 min-h-[8rem]',
+        "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:duration-150 after:-z-10',
+        {
+          'after:opacity-0': addressType.value !== address.pk
+        },
+        {
+          'after:border-4 after:opacity-100': addressType.value === address.pk
+        },
         {
           'opacity-30 select-none pointer-events-none': disabled
         }
       )}
-      onMouseEnter={(e) => {
-        if (!isSelected && !disabled) {
-          const hoverBorderColor = getStyleValue(
-            'box-hover-border-color',
-            '#9ca3af'
-          ) as string;
-          const hoverBgColor = getStyleValue(
-            'box-hover-background-color',
-            '#f9fafb'
-          ) as string;
-          e.currentTarget.style.borderColor = hoverBorderColor;
-          e.currentTarget.style.backgroundColor = hoverBgColor;
-        }
-      }}
-      onMouseLeave={(e) => {
-        if (!isSelected && !disabled) {
-          const borderColor = getStyleValue(
-            'box-border-color',
-            '#e5e7eb'
-          ) as string;
-          const bgColor = getStyleValue(
-            'box-background-color',
-            '#ffffff'
-          ) as string;
-          e.currentTarget.style.borderColor = borderColor;
-          e.currentTarget.style.backgroundColor = bgColor;
-        }
-      }}
     >
       <Radio
         className="mb-2"
@@ -212,12 +150,12 @@ const AddressBox = ({
         checked={addressType.value === address.pk}
         onChange={() => null}
       >
-        <span className="text-xs font-normal italic" style={textStyles}>
+        <span className="text-xs font-normal italic">
           {t('checkout.address.box.shipping_to')}:
         </span>
       </Radio>
-      <div className="text-xs mb-3 leading-4" style={textStyles}>
-        <p style={titleStyles}>{address.title}</p>
+      <div className="text-xs mb-3 leading-4">
+        <p>{address.title}</p>
         <p>{address.phone_number}</p>
         <p className="overflow-hidden text-ellipsis whitespace-nowrap">
           {address.line}

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

@@ -11,11 +11,9 @@ 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(
@@ -95,24 +93,6 @@ 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
@@ -148,120 +128,57 @@ 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'
+                    }
+                  />
+                ))}
 
-              {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>
+                <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="mt-4">
-                    <button
-                      onClick={() => setIsModalOpen(true)}
-                      className="text-primary-500 underline text-sm flex items-center gap-1"
-                    >
-                      <Icon name="plus" size={12} />
+                >
+                  <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')}
-                    </button>
+                    </span>
                   </div>
                 </div>
-              ) : (
-                <div
-                  className="grid grid-cols-1 md:grid-cols-2"
-                  style={{
-                    gap: sectionStyles['box-gap'] || '12px'
-                  }}
+                <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"
                 >
-                  {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>
+                  <AddressForm onSubmit={onSubmit} />
+                </Modal>
+              </div>
             </div>
           </div>
         ))}