fix(core): improve redirect behavior after creating account

core/app/[locale]/(default)/account/components/account-banner.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { Message } from "~/components/ui/message";
+import { useAccountStatusContext } from "../[tab]/_components/account-status-provider";
+
+export const AccountBanner = () => {
+  const { accountState } = useAccountStatusContext();
+
+  return (
+    <>
+      {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)/account/page.tsx

@@ -4,6 +4,7 @@ import { ReactNode } from 'react';
 
 import { Link } from '~/components/link';
 import { LocaleType } from '~/i18n';
+import { AccountBanner } from './components/account-banner';
 
 interface AccountItem {
   children: ReactNode;
@@ -40,6 +41,8 @@ export default async function AccountPage({ params: { locale } }: Props) {
     <div className="mx-auto">
       <h1 className="my-8 text-4xl font-black lg:my-8 lg:text-5xl">{t('heading')}</h1>
 
+      <AccountBanner />
+
       <div className="mb-14 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
         <AccountItem href="/account/orders" title={t('orders')}>
           <Package className="me-8" size={48} strokeWidth={1.5} />

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

@@ -11,6 +11,7 @@ import { Header, HeaderFragment } from '~/components/header';
 import { Cart } from '~/components/header/cart';
 import { ProductSheet } from '~/components/product-sheet';
 import { LocaleType } from '~/i18n';
+import { AccountStatusProvider } from './account/[tab]/_components/account-status-provider';
 
 interface Props extends PropsWithChildren {
   params: { locale: LocaleType };
@@ -42,6 +43,7 @@ export default async function DefaultLayout({ children, params: { locale } }: Pr
 
   return (
     <>
+    <AccountStatusProvider isPermanentBanner={true}>
       <Header cart={<Cart />} data={data.site} />
 
       <main className="flex-1 px-4 2xl:container sm:px-10 lg:px-12 2xl:mx-auto 2xl:px-0">
@@ -58,6 +60,7 @@ export default async function DefaultLayout({ children, params: { locale } }: Pr
       </Suspense>
 
       <Footer data={data.site} />
+    </AccountStatusProvider>
     </>
   );
 }

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

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

core/app/[locale]/(default)/login/register-customer/_components/register-customer-form/_actions/login.ts

@@ -13,6 +13,7 @@ export const login = async (
       email,
       password,
       redirectTo: '/account',
+      redirect: false,
     });
   } catch (error: unknown) {
     if (isRedirectError(error)) {

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

@@ -1,5 +1,5 @@
 'use client';
-
+import { useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { ChangeEvent, useRef, useState } from 'react';
 import { useFormStatus } from 'react-dom';
@@ -23,6 +23,8 @@ import {
   Text,
 } from './fields';
 
+import { useAccountStatusContext } from '~/app/[locale]/(default)/account/[tab]/_components/account-status-provider';
+
 interface FormStatus {
   status: 'success' | 'error';
   message: string;
@@ -96,6 +98,8 @@ export const RegisterCustomerForm = ({
   const reCaptchaRef = useRef<ReCaptcha>(null);
   const [reCaptchaToken, setReCaptchaToken] = useState('');
   const [isReCaptchaValid, setReCaptchaValid] = useState(true);
+  const { setAccountState } = useAccountStatusContext();
+  const router = useRouter();
 
   const t = useTranslations('Account.Register');
 
@@ -188,17 +192,16 @@ export const RegisterCustomerForm = ({
 
     if (submit.status === 'success') {
       form.current?.reset();
-      setFormStatus({
+
+      setAccountState({
         status: 'success',
-        message: t('successMessage', {
-          firstName: submit.data?.firstName,
-          lastName: submit.data?.lastName,
-        }),
+        message: 'Your account has been successfully created at [Catalyst]!',
       });
 
-      setTimeout(() => {
-        void login(formData.get('customer-email'), formData.get('customer-password'));
-      }, 3000);
+      const url = await login(formData.get('customer-email'), formData.get('customer-password'));
+      router.push(url);
+
+      return;
     }
 
     if (submit.status === 'error') {