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

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,6 +13,19 @@ 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);
@@ -40,48 +53,166 @@ const PaymentOptionButtons = () => {
 
   return (
     <>
-      <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}
+      {/* 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();
+              }
+            }}
           >
-            <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>
+            <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>
+      )}
 
-      <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':
+      {/* 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
-              }
-            )}
-            data-testid={`checkout-payment-tab-${option.pk}`}
-          >
-            {option.name}
-          </button>
-        ))}
-      </div>
+                    ? (getStyleValue(
+                        'tab-active-border-bottom-color',
+                        'transparent'
+                      ) as string)
+                    : (getStyleValue('tab-border-color', '#d1d5db') as string),
+                borderBottomWidth:
+                  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>
+      )}
     </>
   );
 };

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

@@ -16,6 +16,7 @@ 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;
@@ -31,6 +32,20 @@ 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 } =
@@ -85,7 +100,7 @@ const AddressBox = ({
   };
 
   const onSubmit = (data) => {
-    editAddress({ ...data, invalidateTag: 'Addresses' })
+    editAddress({ ...data, invalidateTag: 'Checkout' })
       .unwrap()
       .then((editAddressResponse) => {
         handleAddressClick(addressType, editAddressResponse);
@@ -96,7 +111,7 @@ const AddressBox = ({
   };
 
   const handleRemoveAddress = async (addressPk: number) => {
-    await removeAddress({ id: addressPk, invalidateTag: 'Addresses' });
+    await removeAddress({ id: addressPk, invalidateTag: 'Checkout' });
     setRemoveAddressModalOpen(false);
     dispatch(resetCheckoutState());
 
@@ -125,24 +140,71 @@ 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 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
-        },
+        'cursor-pointer relative w-full border shadow min-h-[8rem] transition-all duration-200',
         {
           '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"
@@ -150,12 +212,12 @@ const AddressBox = ({
         checked={addressType.value === address.pk}
         onChange={() => null}
       >
-        <span className="text-xs font-normal italic">
+        <span className="text-xs font-normal italic" style={textStyles}>
           {t('checkout.address.box.shipping_to')}:
         </span>
       </Radio>
-      <div className="text-xs mb-3 leading-4">
-        <p>{address.title}</p>
+      <div className="text-xs mb-3 leading-4" style={textStyles}>
+        <p style={titleStyles}>{address.title}</p>
         <p>{address.phone_number}</p>
         <p className="overflow-hidden text-ellipsis whitespace-nowrap">
           {address.line}
@@ -168,7 +230,10 @@ const AddressBox = ({
         <Button
           appearance="ghost"
           className="italic underline hover:text-secondary-500 hover:!bg-white hover:!border-white p-0 h-auto"
-          onClick={() => setIsEditAddressModalOpen(true)}
+          onClick={(e) => {
+            e.stopPropagation();
+            setIsEditAddressModalOpen(true);
+          }}
           data-testid="checkout-address-edit"
         >
           {t('checkout.address.box.edit')}
@@ -180,21 +245,26 @@ const AddressBox = ({
           setOpen={setIsEditAddressModalOpen}
           className="w-full sm:w-[28rem] max-h-[90vh] overflow-y-auto"
         >
-          <AddressForm
-            data={{
-              ...address,
-              country: address.country?.pk,
-              city: address.city?.pk,
-              township: address.township?.pk,
-              district: address.district?.pk
-            }}
-            onSubmit={onSubmit}
-          />
+          <div onClick={(e) => e.stopPropagation()}>
+            <AddressForm
+              data={{
+                ...address,
+                country: address.country?.pk,
+                city: address.city?.pk,
+                township: address.township?.pk,
+                district: address.district?.pk
+              }}
+              onSubmit={onSubmit}
+            />
+          </div>
         </Modal>
         <Button
           appearance="ghost"
           className="italic underline hover:text-secondary-500 hover:!bg-white hover:!border-white p-0 h-auto"
-          onClick={() => setRemoveAddressModalOpen(true)}
+          onClick={(e) => {
+            e.stopPropagation();
+            setRemoveAddressModalOpen(true);
+          }}
           data-testid="checkout-address-remove"
         >
           {t('checkout.address.box.remove')}
@@ -207,14 +277,18 @@ const AddressBox = ({
         setOpen={setRemoveAddressModalOpen}
         showCloseButton={false}
       >
-        <div className="text-center px-6 py-10">
+        <div
+          className="text-center px-6 py-10"
+          onClick={(e) => e.stopPropagation()}
+        >
           <p className="mb-4">
             {t('account.address_book.modal.delete_description')}
           </p>
           <div className="space-x-3 flex justify-center">
             <Button
               appearance="outlined"
-              onClick={() => {
+              onClick={(e) => {
+                e.stopPropagation();
                 setRemoveAddressModalOpen(false);
               }}
               data-testid="remove-address-modal-cancel"
@@ -224,7 +298,8 @@ const AddressBox = ({
             <Button
               appearance="filled"
               disabled={removeAddressLoading}
-              onClick={() => {
+              onClick={(e) => {
+                e.stopPropagation();
                 handleRemoveAddress(address.pk);
               }}
               className={

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(
@@ -77,7 +79,7 @@ const Addresses = () => {
   }, [billing_and_shipping_same]);
 
   const onSubmit = (data) => {
-    addAddress({ ...data, invalidateTag: 'Addresses' })
+    addAddress({ ...data, invalidateTag: 'Checkout' })
       .unwrap()
       .then((addAddressResponse) => {
         if (addressList.length === 0) {
@@ -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>
         ))}