@akinon/projectzero 2.0.0-beta.9 → 2.0.0

package/app-template/src/views/checkout/auth.tsx

@@ -1,54 +1,78 @@
-import { useRouter, useLocalization } from '@akinon/next/hooks';
-import { Link } from '@theme/components';
-import GuestLogin from '@theme/views/guest-login';
+'use client';
+
 import { Login } from '@theme/views/login';
-import { useEffect } from 'react';
-import { ROUTES } from 'routes';
+import { Register } from '@theme/views/register';
 import { useSession } from 'next-auth/react';
-import { useAppDispatch } from '@akinon/next/redux/hooks';
-import { api } from '@akinon/next/data/client/api';
+import { useSearchParams } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
+import { useLocalization, useRouter } from '@akinon/next/hooks';
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Button } from '@theme/components';
+import GuestLogin from '@theme/views/guest-login';
 
-const CheckoutAuth = () => {
-  const { t } = useLocalization();
+export default function CheckoutAuth() {
+  const { data: session } = useSession();
   const router = useRouter();
-  const { status } = useSession();
-  const dispatch = useAppDispatch();
+  const searchParams = useSearchParams();
+  const { t } = useLocalization();
+  const [activeTab, setActiveTab] = useState('login');
+
+  const tabClass = (tabName) => {
+    return twMerge(
+      clsx(
+        'text-base font-normal text-black-750/50 bg-transparent border-0 border-primary px-6 transition-all hover:border-b hover:text-black-750',
+        {
+          'border-b text-black-750': activeTab === tabName
+        }
+      )
+    );
+  };
+
+  const pageTitle = useMemo(() => {
+    return {
+      login: t('auth.login.title'),
+      register: t('auth.register.title'),
+      guest: t('checkout.auth.guest_checkout')
+    }[activeTab];
+  }, [activeTab]);
 
   useEffect(() => {
-    if (status === 'authenticated') {
-      dispatch(api.util.invalidateTags(['Checkout']));
-    } else if (status === 'unauthenticated') {
-      router.replace(ROUTES.CHECKOUT + `?callbackUrl=${ROUTES.CHECKOUT}`);
+    if (session?.user) {
+      router.push(searchParams.get('callbackUrl') ?? '/');
     }
-  }, [status]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [session?.user]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
-    <div className="flex flex-col w-full my-5 lg:flex-row">
-      <div className="flex-1 shrink-0">
-        <Login />
-        <div className="text-center text-sm text-gray-600 uppercase mt-5">
-          <span>
-            {t('checkout.auth.title')}
-            <Link
-              href={ROUTES.AUTH + `?callbackUrl=${ROUTES.CHECKOUT}`}
-              className="ml-1 text-black underline"
-            >
-              {t('checkout.auth.signup')}
-            </Link>
-          </span>
+    <section className="container my-7 lg:my-24">
+      <div className="max-w-lg mx-auto">
+        <div className="text-black-750 text-[40px] font-normal">
+          {pageTitle}
         </div>
-      </div>
+        {activeTab !== 'guest' && (
+          <div className="w-full grid grid-cols-2 justify-center gap-4 lg:gap-6 mt-8">
+            <button
+              className={tabClass('login')}
+              onClick={() => setActiveTab('login')}
+            >
+              {t('auth.login.mobile_title')}
+            </button>
+            <Button
+              className={tabClass('register')}
+              onClick={() => setActiveTab('register')}
+            >
+              {t('auth.register.mobile_title')}
+            </Button>
+          </div>
+        )}
+        <div className="w-full flex flex-wrap">
+          {activeTab === 'register' && <Register />}
+
+          {activeTab === 'login' && <Login setActiveTab={setActiveTab} />}
 
-      <div className="flex-1 mt-5 lg:mt-0">
-        <div className="px-5 lg:px-16">
-          <h2 className="mb-3 text-lg text-start text-black-800 font-light md:mb-9 md:text-2xl">
-            {t('checkout.auth.guest_checkout')}
-          </h2>
-          <GuestLogin />
+          {activeTab === 'guest' && <GuestLogin />}
         </div>
       </div>
-    </div>
+    </section>
   );
-};
-
-export default CheckoutAuth;
+}

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

@@ -3,10 +3,13 @@ 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-sm">
+    <div className="relative border-b border-gray-100 shadow">
       <header
         className={clsx(['py-8', 'px-4', 'mx-auto', 'container', 'md:px-0'])}
       >
@@ -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/options/credit-card/index.tsx

@@ -16,7 +16,7 @@ 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 { PaymentOption } from '@akinon/next/types';
 
@@ -101,7 +101,7 @@ const CheckoutCreditCard = () => {
     setValue: setFormValue,
     trigger: validateInput,
     control,
-    formState: { errors },
+    formState: { errors, isSubmitting },
     setError,
     getValues,
     clearErrors
@@ -119,8 +119,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 +140,20 @@ const CheckoutCreditCard = () => {
   };
 
   const onSubmit: SubmitHandler<CreditCardForm> = async (data) => {
-    const response = await completeCreditCardPayment(data).unwrap();
+    if (isButtonDisabled) return;
+
+    setIsProcessing(true);
+
+    try {
+      const response = await completeCreditCardPayment(data).unwrap();
+      setFormError(response?.errors);
 
-    setFormError(response?.errors);
+      if (response?.errors || !checkPaymentWillRedirect(response)) {
+        setIsProcessing(false);
+      }
+    } catch (error) {
+      setIsProcessing(false);
+    }
   };
 
   useEffect(() => {
@@ -319,7 +334,7 @@ const CheckoutCreditCard = () => {
                         size={16}
                         className="leading-none ml-2"
                       />
-                      <div className="hidden group-hover:block absolute right-0 bottom-5 w-[11rem] lg:w-[21rem] lg:left-auto lg:right-auto border-2 border-gray-200">
+                      <div className="hidden group-hover:block absolute right-0 bottom-5 w-[11rem] lg:w-[21rem] lg:left-auto lg:right-auto border-2">
                         {/* TODO: Fix this */}
                         <Image
                           src="/cvv.jpg"
@@ -392,6 +407,7 @@ const CheckoutCreditCard = () => {
             <Button
               className="group uppercase mt-4 inline-flex items-center justify-center"
               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/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>