@akinon/projectzero 2.0.0-beta.2 → 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">
-        <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

@@ -16,8 +16,9 @@ import PaymentHeader from '../../payment-header';
 import CreditCardInstallments from './installments';
 import { useLocalization } from '@akinon/next/hooks';
 import { Image } from '@akinon/next/components/image';
-import { getPosError } from '@akinon/next/utils';
+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,13 +96,26 @@ 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,
     setValue: setFormValue,
     trigger: validateInput,
     control,
-    formState: { errors },
+    formState: { errors, isSubmitting },
     setError,
     getValues,
     clearErrors
@@ -119,8 +133,12 @@ const CheckoutCreditCard = () => {
   const [years, setYears] = useState([]);
   const [formError, setFormError] = useState(null);
   const [cardBinNumber, setCardBinNumber] = useState(null);
+  const [isProcessing, setIsProcessing] = useState(false);
   const [setBinNumber] = useSetBinNumberMutation();
-  const [completeCreditCardPayment] = useCompleteCreditCardPaymentMutation();
+  const [completeCreditCardPayment, { isLoading: isCompletingPayment }] =
+    useCompleteCreditCardPaymentMutation();
+
+  const isButtonDisabled = isSubmitting || isCompletingPayment || isProcessing;
 
   const handleCardNumberChange = (value) => {
     const binNumber = value.replace(/\D/g, '').substring(0, 6);
@@ -136,9 +154,20 @@ const CheckoutCreditCard = () => {
   };
 
   const onSubmit: SubmitHandler<CreditCardForm> = async (data) => {
-    const response = await completeCreditCardPayment(data).unwrap();
+    if (isButtonDisabled) return;
+
+    setIsProcessing(true);
 
-    setFormError(response?.errors);
+    try {
+      const response = await completeCreditCardPayment(data).unwrap();
+      setFormError(response?.errors);
+
+      if (response?.errors || !checkPaymentWillRedirect(response)) {
+        setIsProcessing(false);
+      }
+    } catch (error) {
+      setIsProcessing(false);
+    }
   };
 
   useEffect(() => {
@@ -390,8 +419,66 @@ 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"
             >
               <span>{t('checkout.payment.credit_card.form.button')}</span>

package/app-template/src/views/checkout/steps/payment/options/funds-transfer.tsx

@@ -12,6 +12,7 @@ import * as yup from 'yup';
 import CheckoutAgreements from '../agreements';
 import PaymentHeader from '../payment-header';
 import { useLocalization } from '@akinon/next/hooks';
+import { checkPaymentWillRedirect } from '@akinon/next/utils';
 import { Image } from '@akinon/next/components/image';
 import { Trans } from '@akinon/next/components/trans';
 
@@ -25,21 +26,39 @@ const CheckoutFundsTransfer = () => {
   const {
     handleSubmit,
     control,
-    formState: { errors }
+    formState: { errors, isSubmitting }
   } = useForm({
     resolver: yupResolver(fundsTransferFormSchema())
   });
   const [formError, setFormError] = useState(null);
+  const [isProcessing, setIsProcessing] = useState(false);
   const { bankAccounts, selectedBankAccountPk, preOrder } = useAppSelector(
     (state: RootState) => state.checkout
   );
   const [setFundsTransferOption] = useSetFundsTransferOptionMutation();
-  const [completeFundsTransfer] = useCompleteFundsTransferMutation();
+  const [completeFundsTransfer, { isLoading: isCompletingPayment }] =
+    useCompleteFundsTransferMutation();
 
-  const onSubmit: SubmitHandler<null> = async () => {
-    const response = await completeFundsTransfer().unwrap();
+  const isButtonDisabled = isSubmitting || isCompletingPayment || isProcessing;
 
-    setFormError(response?.errors?.non_field_errors);
+  const onSubmit: SubmitHandler<null> = async () => {
+    if (isButtonDisabled) return;
+
+    setIsProcessing(true);
+
+    try {
+      const response = await completeFundsTransfer().unwrap();
+      setFormError(response?.errors?.non_field_errors);
+
+      if (
+        response?.errors?.non_field_errors ||
+        !checkPaymentWillRedirect(response)
+      ) {
+        setIsProcessing(false);
+      }
+    } catch (error) {
+      setIsProcessing(false);
+    }
   };
 
   useEffect(() => {
@@ -155,6 +174,7 @@ const CheckoutFundsTransfer = () => {
           <Button
             className="group uppercase mt-4 inline-flex items-center justify-center w-full"
             type="submit"
+            disabled={isButtonDisabled}
             data-testid="checkout-bank-account-place-order"
           >
             <span> {t('checkout.payment.fund_transfer.button')}</span>

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

@@ -1,16 +1,35 @@
 'use client';
 
+import { useState } from 'react';
 import { useCompleteLoyaltyPaymentMutation } from '@akinon/next/data/client/checkout';
 import { useAppSelector } from '@akinon/next/redux/hooks';
 import { useForm } from 'react-hook-form';
+import { checkPaymentWillRedirect } from '@akinon/next/utils';
 
 export default function LoyaltyPayment() {
   const { payment_option } = useAppSelector((state) => state.checkout.preOrder);
   const { handleSubmit } = useForm();
-  const [completeLoyaltyPayment] = useCompleteLoyaltyPaymentMutation();
+  const [completeLoyaltyPayment, { isLoading: isCompletingPayment }] =
+    useCompleteLoyaltyPaymentMutation();
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const isButtonDisabled = isCompletingPayment || isProcessing;
 
   const onSubmit = async () => {
-    completeLoyaltyPayment();
+    if (isButtonDisabled) return;
+
+    setIsProcessing(true);
+
+    try {
+      const response = await completeLoyaltyPayment().unwrap();
+
+      if (response?.errors || !checkPaymentWillRedirect(response)) {
+        setIsProcessing(false);
+      }
+    } catch (error) {
+      console.error('Error completing loyalty payment:', error);
+      setIsProcessing(false);
+    }
   };
 
   return (

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/redirection.tsx

@@ -8,7 +8,7 @@ import { useForm } from 'react-hook-form';
 import { twMerge } from 'tailwind-merge';
 import * as yup from 'yup';
 import { useEffect, useState } from 'react';
-import { getPosError } from '@akinon/next/utils';
+import { getPosError, checkPaymentWillRedirect } from '@akinon/next/utils';
 import { useMessageListener } from '@akinon/next/hooks';
 
 interface FormValues {
@@ -26,16 +26,33 @@ const formSchema = () =>
 export default function RedirectionPayment() {
   const { payment_option } = useAppSelector((state) => state.checkout.preOrder);
   const [formError, setFormError] = useState(null);
+  const [isProcessing, setIsProcessing] = useState(false);
   const {
     register,
     handleSubmit,
-    formState: { errors }
+    formState: { errors, isSubmitting }
   } = useForm<FormValues>({
     resolver: yupResolver(formSchema())
   });
-  const [completeRedirectionPayment] = useCompleteRedirectionPaymentMutation();
+  const [completeRedirectionPayment, { isLoading: isCompletingPayment }] =
+    useCompleteRedirectionPaymentMutation();
+
+  const isButtonDisabled = isSubmitting || isCompletingPayment || isProcessing;
+
   const onSubmit = async () => {
-    completeRedirectionPayment();
+    if (isButtonDisabled) return;
+
+    setIsProcessing(true);
+
+    try {
+      const response = await completeRedirectionPayment().unwrap();
+
+      if (response?.errors || !checkPaymentWillRedirect(response)) {
+        setIsProcessing(false);
+      }
+    } catch (error) {
+      setIsProcessing(false);
+    }
   };
 
   useMessageListener();
@@ -65,6 +82,7 @@ export default function RedirectionPayment() {
 
         <Checkbox
           className="px-4 md:px-0"
+          data-testid="checkout-agreement"
           {...register('agreement')}
           error={errors.agreement}
         >
@@ -88,7 +106,11 @@ export default function RedirectionPayment() {
           </div>
         )}
 
-        <Button className={twMerge('w-full md:w-36 px-4 md:px-0')}>
+        <Button
+          data-testid="checkout-submit-button"
+          disabled={isButtonDisabled}
+          className={twMerge('w-full md:w-36 px-4 md:px-0')}
+        >
           {payment_option.name}
         </Button>
       </form>

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" />
+        )
+      }}
+    />
+  );
+}