diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/form.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/form.tsx index 28ed4a7f40b..08c3c653753 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/form.tsx +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/form.tsx @@ -48,8 +48,10 @@ const Form = < T extends AddressFormValues | ContactFormValues >( { addressType = 'shipping', values, children, + isEditing, }: AddressFormProps< T > ): JSX.Element => { const instanceId = useInstanceId( Form ); + const isFirstRender = useRef( true ); // Track incoming props. const currentFields = useShallowEqual( fields ); @@ -106,6 +108,41 @@ const Form = < T extends AddressFormValues | ContactFormValues >( { fieldsRef.current?.postcode?.revalidate(); }, [ currentCountry ] ); + // Focus the first input when opening the form. + useEffect( () => { + let timeoutId: ReturnType< typeof setTimeout >; + + if ( ! isFirstRender.current && isEditing && fieldsRef.current ) { + const firstField = addressFormFields.fields.find( + ( field ) => field.hidden === false + ); + + if ( ! firstField ) { + return; + } + + const { id: firstFieldId } = createFieldProps( + firstField, + id || `${ instanceId }`, + addressType + ); + const firstFieldEl = document.getElementById( firstFieldId ); + + if ( firstFieldEl ) { + // Focus the first field after a short delay to ensure the form is rendered. + timeoutId = setTimeout( () => { + firstFieldEl.focus(); + }, 300 ); + } + } + + isFirstRender.current = false; + + return () => { + clearTimeout( timeoutId ); + }; + }, [ isEditing, addressFormFields, id, instanceId, addressType ] ); + id = id || `${ instanceId }`; return ( diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/types.ts b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/types.ts index 291fce9b5cf..921cf032d26 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/types.ts +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/types.ts @@ -37,6 +37,8 @@ export interface AddressFormProps< T > { values: T; // support inserting children at end of form children?: React.ReactNode; + // Is the form in editing mode. + isEditing?: boolean; } interface AddressFieldData { diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-card/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-card/index.tsx index 944a28e5440..e88ab5efe6a 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-card/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-card/index.tsx @@ -22,11 +22,13 @@ const AddressCard = ( { onEdit, target, fieldConfig, + isExpanded, }: { address: CartShippingAddress | CartBillingAddress; onEdit: () => void; target: string; fieldConfig: FormFieldsConfig; + isExpanded: boolean; } ): JSX.Element | null => { const countryData = getSetting< Record< string, CountryData > >( 'countryData', @@ -76,18 +78,19 @@ const AddressCard = ( { ) } { onEdit && ( - { - onEdit(); e.preventDefault(); + onEdit(); } } + type="button" > { __( 'Edit', 'woocommerce' ) } - + ) } ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-card/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-card/style.scss index 5bbae0e698d..2d2715b45c9 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-card/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/address-card/style.scss @@ -35,7 +35,15 @@ } } .wc-block-components-address-card__edit { + background-color: transparent; + border: 0; + color: inherit; + cursor: pointer; + font-family: inherit; margin: 0 0 0 auto; - text-decoration: none; @include font-size(small); + + &:hover { + text-decoration: underline; + } } diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/customer-address.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/customer-address.tsx index cc48f9351d5..b36708f4314 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/customer-address.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/customer-address.tsx @@ -83,9 +83,10 @@ const CustomerAddress = ( { setEditing( true ); } } fieldConfig={ addressFieldsConfig } + isExpanded={ editing } /> ), - [ billingAddress, addressFieldsConfig ] + [ billingAddress, addressFieldsConfig, editing ] ); const renderAddressFormComponent = useCallback( @@ -98,10 +99,11 @@ const CustomerAddress = ( { values={ billingAddress } fields={ ADDRESS_FORM_KEYS } fieldConfig={ addressFieldsConfig } + isEditing={ editing } /> ), - [ addressFieldsConfig, billingAddress, onChangeAddress ] + [ addressFieldsConfig, billingAddress, onChangeAddress, editing ] ); return ( diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss index b8e21014923..810d78d2d66 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-fields-block/style.scss @@ -64,9 +64,15 @@ .wc-block-components-address-form__address_2-toggle { background: none; border: none; + color: inherit; cursor: pointer; + font-family: inherit; font-size: inherit; margin-top: $gap; text-align: left; width: 100%; + + &:hover { + text-decoration: underline; + } } diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/customer-address.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/customer-address.tsx index 557010288e4..1c21625c188 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/customer-address.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/customer-address.tsx @@ -82,9 +82,10 @@ const CustomerAddress = ( { setEditing( true ); } } fieldConfig={ addressFieldsConfig } + isExpanded={ editing } /> ), - [ shippingAddress, addressFieldsConfig ] + [ shippingAddress, addressFieldsConfig, editing ] ); const renderAddressFormComponent = useCallback( @@ -96,9 +97,10 @@ const CustomerAddress = ( { values={ shippingAddress } fields={ ADDRESS_FORM_KEYS } fieldConfig={ addressFieldsConfig } + isEditing={ editing } /> ), - [ addressFieldsConfig, onChangeAddress, shippingAddress ] + [ addressFieldsConfig, onChangeAddress, shippingAddress, editing ] ); return ( diff --git a/plugins/woocommerce/changelog/fix-49046 b/plugins/woocommerce/changelog/fix-49046 new file mode 100644 index 00000000000..5ecd8728f3d --- /dev/null +++ b/plugins/woocommerce/changelog/fix-49046 @@ -0,0 +1,4 @@ +Significance: patch +Type: enhancement + +Convert edit address link to a button on checkout