fix(core): improve redirect behavior after creating new address

.changeset/giant-carpets-boil.md

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

core/app/[locale]/(default)/account/[tab]/_components/addresses-content/add-address.tsx

@@ -26,6 +26,7 @@ import {
   createTextInputValidationHandler,
 } from './address-field-handlers';
 import { NewAddressQueryResponseType } from './customer-new-address';
+import { useAccountStatusContext } from '../account-status-provider';
 
 interface FormStatus {
   status: 'success' | 'error';
@@ -94,6 +95,8 @@ export const AddAddress = ({
   const [textInputValid, setTextInputValid] = useState<Record<string, boolean>>({});
   const [countryStates, setCountryStates] = useState(defaultCountry.states);
 
+  const { setAccountState } = useAccountStatusContext();
+
   const handleTextInputValidation = createTextInputValidationHandler(
     setTextInputValid,
     textInputValid,
@@ -120,15 +123,14 @@ export const AddAddress = ({
     const submit = await addAddress({ formData, reCaptchaToken });
 
     if (submit.status === 'success') {
-      form.current?.reset();
-      setFormStatus({
+      setAccountState({
         status: 'success',
-        message: t('successMessage'),
+        message: t('addNewAddressSuccessMessage'),
       });
 
-      setTimeout(() => {
-        router.replace('/account/addresses');
-      }, 3000);
+      router.push('/account/addresses');
+
+      return;
     }
 
     if (submit.status === 'error') {

core/app/[locale]/(default)/account/[tab]/_components/addresses-content/index.tsx

@@ -27,7 +27,7 @@ export const AddressesContent = async ({
   pageInfo,
 }: Props) => {
   const locale = await getLocale();
-  const t = await getTranslations({ locale, namespace: 'Account.Home' });
+  const t = await getTranslations({ locale, namespace: 'Account.Addresses' });
   const tPagination = await getTranslations({ locale, namespace: 'Pagination' });
   const { hasNextPage, hasPreviousPage, startCursor, endCursor } = pageInfo;
 
@@ -58,6 +58,7 @@ export const AddressesContent = async ({
   return (
     <>
       <TabHeading heading="addresses" />
+
       <AddressBook addressesCount={addressesCount} customerAddresses={addresses} key={endCursor}>
         <Pagination
           className="my-0 flex inline-flex justify-center text-center"

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

@@ -31,7 +31,7 @@ export default async function AccountTabLayout({ children, params: { locale, tab
 
   return (
     <NextIntlClientProvider locale={locale} messages={{ Account: messages.Account ?? {} }}>
-      <AccountStatusProvider>
+      <AccountStatusProvider isPermanentBanner={true}>
         <h1 className="my-6 my-8 text-4xl font-black lg:my-8 lg:text-5xl">{t('heading')}</h1>
         <AccountTabs activeTab={tab} tabs={[...tabList]}>
           {children}

core/messages/en.json

@@ -171,17 +171,18 @@
       "orders": "Orders",
       "messages": "Messages",
       "addresses": "Addresses",
-      "newAddress": "New address",
       "wishlists": "Wish lists",
       "recentlyViewed": "Recently viewed",
       "settings": "Account settings",
-      "changePassword": "Change password",
-      "editAddress": "Edit address"
+      "changePassword": "Change password"
     },
     "Addresses": {
       "defaultAddress": "Default",
       "alternativeAddress": "Alternative",
+      "newAddress": "New address",
       "addNewAddress": "Add new address",
+      "addNewAddressSuccessMessage": "Address added to your account",
+      "editAddress": "Edit address",
       "editButton": "Edit",
       "deleteButton": "Delete",
       "confirmDeleteAddress": "Delete address",