fix(core): improve redirect behavior after change password on account…

… page (#1338)

.changeset/grumpy-meals-talk.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+improve redirect behavior after change password on account page

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

@@ -17,7 +17,6 @@ export const AccountStatusProvider = ({ children }: { children: ReactNode }) =>
   const pathname = usePathname();
 
   useEffect(() => {
-    // Reset account state when changing the route except the Account Page
     if (pathname !== '/account/' && pathname !== '/login/') {
       setAccountState(defaultState);
     }

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

@@ -18,8 +18,8 @@ import {
   Input,
 } from '~/components/ui/form';
 import { Message } from '~/components/ui/message';
-import { useRouter } from '~/i18n/routing';
 
+import { useAccountStatusContext } from '../../_components/account-status-provider';
 import { submitCustomerChangePasswordForm } from '../_actions/submit-customer-change-password-form';
 
 const ChangePasswordFieldsSchema = z.object({
@@ -95,7 +95,6 @@ const SubmitButton = () => {
 };
 
 export const ChangePasswordForm = () => {
-  const router = useRouter();
   const form = useRef<HTMLFormElement>(null);
   const t = useTranslations('Account.ChangePassword');
   const [state, formAction] = useFormState(submitCustomerChangePasswordForm, {
@@ -107,14 +106,18 @@ export const ChangePasswordForm = () => {
   const [isNewPasswordValid, setIsNewPasswordValid] = useState(true);
   const [isConfirmPasswordValid, setIsConfirmPasswordValid] = useState(true);
 
+  const { setAccountState } = useAccountStatusContext();
+
   useEffect(() => {
     if (state.status === 'success') {
-      setTimeout(() => {
-        void logout();
-        router.push('/login');
-      }, 2000);
+      void logout();
+
+      setAccountState({
+        status: 'success',
+        message: t('confirmChangePassword'),
+      });
     }
-  }, [state, router]);
+  }, [state, setAccountState, t]);
 
   let messageText = '';
 
@@ -157,7 +160,7 @@ export const ChangePasswordForm = () => {
 
   return (
     <>
-      {(state.status === 'error' || state.status === 'success') && (
+      {state.status === 'error' && (
         <Message className="mb-8 w-full text-gray-500" variant={state.status}>
           <p>{messageText}</p>
         </Message>

core/components/header/_actions/logout.ts

@@ -1,7 +1,11 @@
 'use server';
 
+import { redirect } from 'next/navigation';
+
 import { signOut } from '~/auth';
 
 export const logout = async () => {
-  await signOut();
+  await signOut({ redirect: false });
+
+  redirect('/login');
 };