fix(core): improve redirect behavior after creating account

.changeset/strong-terms-begin.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+improve redirect behavior after creating account

core/app/[locale]/(default)/account/page-data.ts

@@ -0,0 +1,24 @@
+import { cache } from 'react';
+
+import { client } from '~/client';
+import { graphql } from '~/client/graphql';
+import { revalidate } from '~/client/revalidate-target';
+
+const storeNameQuery = graphql(`
+  query storeNameQuery {
+    site {
+      settings {
+        storeName
+      }
+    }
+  }
+`);
+
+export const getStoreName = cache(async () => {
+  const { data } = await client.fetch({
+    document: storeNameQuery,
+    fetchOptions: { next: { revalidate } },
+  });
+
+  return data.site.settings?.storeName;
+});

core/app/[locale]/(default)/account/page.tsx

@@ -3,8 +3,11 @@ import { getTranslations } from 'next-intl/server';
 import { ReactNode } from 'react';
 
 import { Link } from '~/components/link';
+import { Message } from '~/components/ui/message';
 import { LocaleType } from '~/i18n';
 
+import { getStoreName } from './page-data';
+
 interface AccountItem {
   children: ReactNode;
   description?: string;
@@ -27,19 +30,32 @@ const AccountItem = ({ children, title, description, href }: AccountItem) => {
   );
 };
 
+interface SearchParams {
+  register?: string;
+}
+
 interface Props {
   params: {
     locale: LocaleType;
   };
+  searchParams?: SearchParams;
 }
 
-export default async function AccountPage({ params: { locale } }: Props) {
+export default async function AccountPage({ params: { locale }, searchParams }: Props) {
   const t = await getTranslations({ locale, namespace: 'Account.Home' });
+  const storeName = await getStoreName();
+  const isRegister = searchParams?.register?.toLowerCase() === 'true';  
 
   return (
     <div className="mx-auto">
       <h1 className="my-8 text-4xl font-black lg:my-8 lg:text-5xl">{t('heading')}</h1>
 
+      {isRegister && (
+        <Message className="col-span-full mb-8 w-full text-gray-500" variant="success">
+          <p>{t('successMessage', { storeName: storeName || 'Catalyst' })}</p>
+        </Message>
+      )}
+
       <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)/login/register-customer/_components/register-customer-form/_actions/login.ts

@@ -12,7 +12,7 @@ export const login = async (
     return await signIn('credentials', {
       email,
       password,
-      redirectTo: '/account',
+      redirectTo: '/account?register=true',
     });
   } catch (error: unknown) {
     if (isRedirectError(error)) {

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

@@ -187,18 +187,9 @@ export const RegisterCustomerForm = ({
     const submit = await registerCustomer({ formData, reCaptchaToken });
 
     if (submit.status === 'success') {
-      form.current?.reset();
-      setFormStatus({
-        status: 'success',
-        message: t('successMessage', {
-          firstName: submit.data?.firstName,
-          lastName: submit.data?.lastName,
-        }),
-      });
+      void login(formData.get('customer-email'), formData.get('customer-password'));
 
-      setTimeout(() => {
-        void login(formData.get('customer-email'), formData.get('customer-password'));
-      }, 3000);
+      return;
     }
 
     if (submit.status === 'error') {

core/messages/en.json

@@ -176,7 +176,8 @@
       "recentlyViewed": "Recently viewed",
       "settings": "Account settings",
       "changePassword": "Change password",
-      "editAddress": "Edit address"
+      "editAddress": "Edit address",
+      "successMessage": "Your account has been successfully created at {storeName}!"
     },
     "Addresses": {
       "defaultAddress": "Default",
@@ -261,7 +262,6 @@
         "submit": "Create account",
         "submitting": "Creating account...",
         "recaptchaText": "Pass ReCAPTCHA check",
-        "successMessage": "Dear {firstName} {lastName}, your account was successfully created. Redirecting to account...",
         "stateProvincePrefix": "Choose state or province",
         "validationMessages": {
             "email": "Enter a valid email such as [email protected]",