diff --git a/.changeset/mean-meals-appear.md b/.changeset/mean-meals-appear.md new file mode 100644 index 000000000..4e2c8c41c --- /dev/null +++ b/.changeset/mean-meals-appear.md @@ -0,0 +1,5 @@ +--- +"@bigcommerce/catalyst-core": patch +--- + +Preselect first state when country is selected for Shipping Info diff --git a/apps/core/app/[locale]/(default)/cart/_components/shipping-info.tsx b/apps/core/app/[locale]/(default)/cart/_components/shipping-info.tsx index d5fece4e2..f5330efcb 100644 --- a/apps/core/app/[locale]/(default)/cart/_components/shipping-info.tsx +++ b/apps/core/app/[locale]/(default)/cart/_components/shipping-info.tsx @@ -86,6 +86,7 @@ export const ShippingInfo = ({ }, ); + // Fetch states when country changes useEffect(() => { if (formValues.country) { const countryId = formValues.country.split('-')[1]; @@ -106,6 +107,13 @@ export const ShippingInfo = ({ } }, [formValues.country, t]); + // Preselect first state when states array changes and state is empty + useEffect(() => { + if (formValues.states && !formValues.state) { + setFormValues({ state: formValues.states[0]?.state || '' }); + } + }, [formValues.state, formValues.states]); + const onSubmit = async (formData: FormData) => { const { status } = await submitShippingInfo(formData, { checkoutId: checkout.entityId, @@ -124,19 +132,6 @@ export const ShippingInfo = ({ } }; - const resetFormFieldsOnCountryChange = () => { - if (formValues.country) { - setFormValues({ - states: [], - state: '', - city: '', - postcode: '', - }); - - hideShippingOptions(); - } - }; - return (
, FieldLabelProps>( {...props} > {children} - {isRequired && ( - Required - )} + {isRequired && Required} ), );