diff --git a/.changeset/giant-carpets-boil.md b/.changeset/giant-carpets-boil.md new file mode 100644 index 000000000..bb0b751ae --- /dev/null +++ b/.changeset/giant-carpets-boil.md @@ -0,0 +1,5 @@ +--- +"@bigcommerce/catalyst-core": patch +--- + +improve redirect behavior after creating new address diff --git a/core/app/[locale]/(default)/account/[tab]/_components/addresses-content/add-address.tsx b/core/app/[locale]/(default)/account/[tab]/_components/addresses-content/add-address.tsx index b5753f70f..70db73b7b 100644 --- a/core/app/[locale]/(default)/account/[tab]/_components/addresses-content/add-address.tsx +++ b/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>({}); 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') { diff --git a/core/app/[locale]/(default)/account/[tab]/_components/addresses-content/index.tsx b/core/app/[locale]/(default)/account/[tab]/_components/addresses-content/index.tsx index e9fd2d712..97ddd02ce 100644 --- a/core/app/[locale]/(default)/account/[tab]/_components/addresses-content/index.tsx +++ b/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 ( <> + - +

{t('heading')}

{children} diff --git a/core/messages/en.json b/core/messages/en.json index 82caa2055..feb9d1e4f 100644 --- a/core/messages/en.json +++ b/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",