fix(core): redirect to the Login page using account provider

core/app/[locale]/(default)/account/[tab]/_components/account-status-provider.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react';
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
 
 import { State as AccountState } from '../_actions/submit-customer-change-password-form';
 
@@ -9,16 +9,22 @@ export const AccountStatusContext = createContext<{
   setAccountState: (state: AccountState | ((prevState: AccountState) => AccountState)) => void;
 } | null>(null);
 
-export const AccountStatusProvider = ({ children }: PropsWithChildren) => {
+export const AccountStatusProvider = ({
+  children,
+  isPermanentBanner,
+}: {
+  children: ReactNode;
+  isPermanentBanner: ReactNode;
+}) => {
   const [accountState, setAccountState] = useState<AccountState>({ status: 'idle', message: '' });
 
   useEffect(() => {
-    if (accountState.status !== 'idle') {
+    if (accountState.status !== 'idle' && !isPermanentBanner) {
       setTimeout(() => {
         setAccountState({ status: 'idle', message: '' });
       }, 3000);
     }
-  }, [accountState, setAccountState]);
+  }, [accountState, setAccountState, isPermanentBanner]);
 
   return (
     <AccountStatusContext.Provider value={{ accountState, setAccountState }}>

core/app/[locale]/(default)/login/_components/change-password-form.tsx

@@ -19,7 +19,7 @@ import { useRouter } from '~/navigation';
 
 import { submitChangePasswordForm } from '../_actions/submit-change-password-form';
 
-import { useLoginStatusContext } from './login-status-provider';
+import { useAccountStatusContext } from '../../account/[tab]/_components/account-status-provider';
 
 interface Props {
   customerId: string;
@@ -53,7 +53,7 @@ export const ChangePasswordForm = ({ customerId, customerToken }: Props) => {
 
   const [newPassword, setNewPasssword] = useState('');
   const [isConfirmPasswordValid, setIsConfirmPasswordValid] = useState(true);
-  const { setLoginState } = useLoginStatusContext();
+  const { setAccountState } = useAccountStatusContext();
 
   const t = useTranslations('Account.ChangePassword');
   let messageText = '';
@@ -71,7 +71,7 @@ export const ChangePasswordForm = ({ customerId, customerToken }: Props) => {
   };
 
   if (state.status === 'success') {
-    setLoginState({ status: 'success', message: t('confirmChangePassword') });
+    setAccountState({ status: 'success', message: t('confirmChangePassword') });
     router.push('/login');
   }
 

core/app/[locale]/(default)/login/_components/login-form.tsx

@@ -19,7 +19,7 @@ import { Message } from '~/components/ui/message';
 
 import { submitLoginForm } from '../_actions/submit-login-form';
 
-import { useLoginStatusContext } from './login-status-provider';
+import { useAccountStatusContext } from '../../account/[tab]/_components/account-status-provider';
 
 const SubmitButton = () => {
   const { pending } = useFormStatus();
@@ -41,7 +41,7 @@ export const LoginForm = () => {
   const [isEmailValid, setIsEmailValid] = useState(true);
   const [isPasswordValid, setIsPasswordValid] = useState(true);
   const [state, formAction] = useFormState(submitLoginForm, { status: 'idle' });
-  const { loginState } = useLoginStatusContext();
+  const { accountState } = useAccountStatusContext();
 
   const t = useTranslations('Account.Login');
 
@@ -65,9 +65,9 @@ export const LoginForm = () => {
 
   return (
     <>
-      {loginState.status === 'success' && (
-        <Message className="col-span-full mb-8 w-full text-gray-500" variant={loginState.status}>
-          <p>{loginState.message}</p>
+      {accountState.status === 'success' && (
+        <Message className="col-span-full mb-8 w-full text-gray-500" variant={accountState.status}>
+          <p>{accountState.message}</p>
         </Message>
       )}
 

core/app/[locale]/(default)/login/_components/reset-password-form/index.tsx

@@ -20,7 +20,7 @@ import { Input } from '~/components/ui/input';
 import { Message } from '~/components/ui/message';
 
 import { submitResetPasswordForm } from '../../_actions/submit-reset-password-form';
-import { useLoginStatusContext } from '../login-status-provider';
+import { useAccountStatusContext } from '../../../account/[tab]/_components/account-status-provider';
 
 import { ResetPasswordFormFragment } from './fragment';
 
@@ -60,7 +60,7 @@ export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => {
   const reCaptchaRef = useRef<ReCaptcha>(null);
   const [reCaptchaToken, setReCaptchaToken] = useState('');
   const [isReCaptchaValid, setReCaptchaValid] = useState(true);
-  const { setLoginState } = useLoginStatusContext();
+  const { setAccountState } = useAccountStatusContext();
   const router = useRouter();
 
   const onReCatpchaChange = (token: string | null) => {
@@ -100,7 +100,7 @@ export const ResetPasswordForm = ({ reCaptchaSettings }: Props) => {
 
       const customerEmail = formData.get('email');
 
-      setLoginState({
+      setAccountState({
         status: 'success',
         message: t('confirmResetPassword', { email: customerEmail?.toString() }),
       });

core/app/[locale]/(default)/login/layout.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 
-import { LoginStatusProvider } from './_components/login-status-provider';
+import { AccountStatusProvider } from '../account/[tab]/_components/account-status-provider';
 
 export default function LoginLayout({ children }: PropsWithChildren) {
-  return <LoginStatusProvider isPermanentBanner={true}>{children}</LoginStatusProvider>;
+  return <AccountStatusProvider isPermanentBanner={true}>{children}</AccountStatusProvider>;
 }