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

package/app-template/src/views/checkout/layout/header.tsx

@@ -3,8 +3,11 @@ import clsx from 'clsx';
 import { Link } from '@theme/components';
 import { ROUTES } from '@theme/routes';
 import { Image } from '@akinon/next/components/image';
+import { getThemeSettings } from '@theme/data/server/theme';
+
+const CheckoutHeader = async () => {
+  const themeSettings = await getThemeSettings();
 
-const CheckoutHeader = () => {
   return (
     <div className="relative border-b border-gray-100 shadow">
       <header
@@ -14,15 +17,16 @@ const CheckoutHeader = () => {
           <Link
             href={ROUTES.HOME}
             passHref={true}
-            className="self-center block w-40 sm:w-72 sm:justify-self-center sm:p-0"
+            className="self-center block sm:justify-self-center sm:p-0"
             aria-label="Homepage"
           >
             <Image
-              src="/logo.svg"
+              src={themeSettings.logo || '/logo.svg'}
               alt="Project Zero"
-              aspectRatio={285 / 27}
-              sizes="285px"
+              aspectRatio={80 / 20}
+              sizes="80px"
               fill
+              unoptimized
             />
           </Link>
 

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

@@ -4,6 +4,7 @@ import { CheckoutPaymentOption } from '@akinon/next/types';
 import clsx from 'clsx';
 import { RootState } from '@theme/redux/store';
 import PaymentOptionButtons from './payment-option-buttons';
+import { CheckoutPaymentOptionsRegistrar } from '@theme/views/checkout/checkout-payment-options-registrar';
 
 export const PaymentOptionViews: Array<CheckoutPaymentOption> = [];
 
@@ -18,8 +19,10 @@ const PaymentStep = () => {
         'pointer-events-none opacity-30': isPaymentStepBusy
       })}
     >
-      <div className="w-full mt-4 flex justify-start border border-gray-400 -mb-px z-10 md:mt-0 md:border-r-0 md:border-b-0 md:w-auto order-2 md:order-none overflow-x-auto">
-        <PaymentOptionButtons />
+      <div className="w-full mt-4 md:border md:border-gray-400 md:-mb-px md:z-10 md:mt-0 md:border-b-0 order-2 md:order-none">
+        <CheckoutPaymentOptionsRegistrar>
+          <PaymentOptionButtons />
+        </CheckoutPaymentOptionsRegistrar>
       </div>
       <div className="w-full border border-solid border-gray-400 bg-white">
         <SelectedPaymentOptionView />

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

@@ -18,6 +18,7 @@ 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 = (
@@ -95,6 +96,19 @@ 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,
@@ -405,7 +419,64 @@ const CheckoutCreditCard = () => {
               </div>
             )}
             <Button
-              className="group uppercase mt-4 inline-flex items-center justify-center"
+              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;
+              }}
               type="submit"
               disabled={isButtonDisabled}
               data-testid="checkout-credit-card-place-order"

package/app-template/src/views/checkout/steps/payment/options/masterpass-rest.tsx

@@ -0,0 +1,15 @@
+import { useLocalization } from '@akinon/next/hooks';
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+
+const MasterpassRest = () => {
+  const { locale, currency } = useLocalization();
+
+  return (
+    <PluginModule
+      component={Component.MasterpassRest}
+      props={{ locale, currency }}
+    />
+  );
+};
+
+export default MasterpassRest;

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

@@ -0,0 +1,18 @@
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
+import { useLocalization } from '@akinon/next/hooks';
+import CheckoutAgreements from '@theme/views/checkout/steps/payment/agreements';
+
+export default function SavedCard() {
+  const { t } = useLocalization();
+
+  return (
+    <PluginModule
+      component={Component.IyzicoSavedCard}
+      props={{
+        agreementCheckbox: (
+          <CheckoutAgreements control={null} error={null} fieldId="agreement" />
+        )
+      }}
+    />
+  );
+}

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 } =
@@ -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}