From 6c136e4e1a10b6220f498c33a665b78fcf97b9bd Mon Sep 17 00:00:00 2001 From: Seghir Nadir Date: Wed, 22 May 2024 22:54:03 +0200 Subject: [PATCH] normalize IDs for form fields in Checkout (#47650) * normalize IDs for form fields and fix types * update docs as well * update rest of docs * Add changefile(s) from automation for the following project(s): woocommerce-blocks * fix linting for document * also align classnames * revert to correct classname --------- Co-authored-by: github-actions --- ...s-2-field.tsx => address-line-2-field.tsx} | 8 +++--- ...ess-fields.tsx => address-line-fields.tsx} | 18 ++++++------- .../components/cart-checkout/form/form.tsx | 13 +++++----- .../components/cart-checkout/form/types.ts | 6 ++--- .../components/cart-checkout/form/utils.ts | 25 +++++++++++-------- .../additional-checkout-fields.md | 16 ++++++------ .../47650-fix-id-in-additional-fields | 4 +++ 7 files changed, 49 insertions(+), 41 deletions(-) rename plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/{address-2-field.tsx => address-line-2-field.tsx} (85%) rename plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/{address-fields.tsx => address-line-fields.tsx} (70%) create mode 100644 plugins/woocommerce/changelog/47650-fix-id-in-additional-fields diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/address-2-field.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/address-line-2-field.tsx similarity index 85% rename from plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/address-2-field.tsx rename to plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/address-line-2-field.tsx index f6e49f000a2..ab6a8dd3c78 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/address-2-field.tsx +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/address-line-2-field.tsx @@ -9,14 +9,14 @@ import { __, sprintf } from '@wordpress/i18n'; /** * Internal dependencies */ -import { AddressFieldProps } from './types'; +import { AddressLineFieldProps } from './types'; -const Address2Field = < T extends AddressFormValues | ContactFormValues >( { +const AddressLine2Field = < T extends AddressFormValues | ContactFormValues >( { field, props, onChange, value, -}: AddressFieldProps< T > ): JSX.Element => { +}: AddressLineFieldProps< T > ): JSX.Element => { const isFieldRequired = field?.required ?? false; // Display the input field if it has a value or if it is required. @@ -57,4 +57,4 @@ const Address2Field = < T extends AddressFormValues | ContactFormValues >( { ); }; -export default Address2Field; +export default AddressLine2Field; diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/address-fields.tsx b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/address-line-fields.tsx similarity index 70% rename from plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/address-fields.tsx rename to plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/address-line-fields.tsx index 4bbfcfcbe95..dacbab09bc7 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/address-fields.tsx +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/address-line-fields.tsx @@ -7,22 +7,22 @@ import { AddressFormValues, ContactFormValues } from '@woocommerce/settings'; /** * Internal dependencies */ -import Address2Field from './address-2-field'; -import { AddressFieldsProps } from './types'; +import AddressLine2Field from './address-line-2-field'; +import { AddressLineFieldsProps } from './types'; import { createFieldProps } from './utils'; -const AddressFields = < T extends AddressFormValues | ContactFormValues >( { - id, +const AddressLineFields = < T extends AddressFormValues | ContactFormValues >( { + formId, address1, address2, addressType, onChange, -}: AddressFieldsProps< T > ): JSX.Element => { +}: AddressLineFieldsProps< T > ): JSX.Element => { const address1FieldProps = address1 - ? createFieldProps( address1.field, id, addressType ) + ? createFieldProps( address1.field, formId, addressType ) : undefined; const address2FieldProps = address2 - ? createFieldProps( address2.field, id, addressType ) + ? createFieldProps( address2.field, formId, addressType ) : undefined; return ( @@ -40,7 +40,7 @@ const AddressFields = < T extends AddressFormValues | ContactFormValues >( { /> ) } { address2?.field && ! address2?.field?.hidden && ( - ( { ); }; -export default AddressFields; +export default AddressLineFields; 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 a9f426f17f4..7846f0fbee5 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 @@ -34,7 +34,7 @@ import prepareFormFields from './prepare-form-fields'; import validateShippingCountry from './validate-shipping-country'; import customValidationHandler from './custom-validation-handler'; import Combobox from '../../combobox'; -import AddressFields from './address-fields'; +import AddressLineFields from './address-line-fields'; import { createFieldProps, getFieldData } from './utils'; /** @@ -125,8 +125,6 @@ const Form = < T extends AddressFormValues | ContactFormValues >( { if ( field.type === 'checkbox' ) { return ( { @@ -154,11 +152,11 @@ const Form = < T extends AddressFormValues | ContactFormValues >( { ); return ( - { onChange( { @@ -235,7 +233,10 @@ const Form = < T extends AddressFormValues | ContactFormValues >( { { ...fieldProps } className={ classnames( 'wc-block-components-select-input', - `wc-block-components-select-input-${ field.key }` + `wc-block-components-select-input-${ field.key }`.replaceAll( + '/', + '-' + ) ) } value={ values[ field.key ] } onChange={ ( newValue: string ) => { 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 579bbc1c96d..291fce9b5cf 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 @@ -46,10 +46,10 @@ interface AddressFieldData { value?: string | undefined; } -export interface AddressFieldsProps< T > +export interface AddressLineFieldsProps< T > extends Omit< AddressFormProps< T >, 'fields' | 'values' | 'onChange' > { // Overwriting the id for the fields. - id: string; + formId: string; // Address 1 fields and value. address1: AddressFieldData; // Address 2 fields and value. @@ -60,7 +60,7 @@ export interface AddressFieldsProps< T > onChange: ( key: keyof T, value: string ) => void; } -export interface AddressFieldProps< T > { +export interface AddressLineFieldProps< T > { // Form fields. field: KeyedFormField; // Props for the form field. diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/utils.ts b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/utils.ts index 8c58c8b65d5..dd2a7227fad 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/utils.ts +++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form/utils.ts @@ -25,19 +25,22 @@ export interface FieldProps { } export const createFieldProps = ( - address: KeyedFormField | undefined, - fieldId: string, + field: KeyedFormField, + formId: string, fieldAddressType: string ): FieldProps => ( { - id: `${ fieldId }-${ address?.key }`, - errorId: `${ fieldAddressType }_${ address?.key }`, - label: address?.required ? address?.label : address?.optionalLabel, - autoCapitalize: address?.autocapitalize, - autoComplete: address?.autocomplete, - errorMessage: address?.errorMessage, - required: address?.required, - className: `wc-block-components-address-form__${ address?.key }`, - ...address?.attributes, + id: `${ formId }-${ field?.key }`.replaceAll( '/', '-' ), // Replace all slashes with hyphens to avoid invalid HTML ID. + errorId: `${ fieldAddressType }_${ field?.key }`, + label: field?.required ? field?.label : field?.optionalLabel, + autoCapitalize: field?.autocapitalize, + autoComplete: field?.autocomplete, + errorMessage: field?.errorMessage, + required: field?.required, + className: `wc-block-components-address-form__${ field?.key }`.replaceAll( + '/', + '-' + ), // Replace all slashes with hyphens to avoid invalid HTML classes., + ...field?.attributes, } ); export const getFieldData = < T extends AddressFormValues | ContactFormValues >( diff --git a/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/additional-checkout-fields.md b/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/additional-checkout-fields.md index 2bdeff27360..0457c687a8a 100644 --- a/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/additional-checkout-fields.md +++ b/plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/additional-checkout-fields.md @@ -236,7 +236,7 @@ There are plans to expand this list, but for now these are the types available. To register additional checkout fields you must use the `woocommerce_register_additional_checkout_field` function. -It is recommended to run this function after the `woocommerce_blocks_loaded` action. +It is recommended to run this function after the `woocommerce_init` action. The registration function takes an array of options describing your field. Some field types take additional options. @@ -312,7 +312,7 @@ Select fields can also be marked as required. If they are not (i.e. they are opt 'label' => 'Our New York Store' ] ] -```` +``` #### Options for `checkbox` fields @@ -347,7 +347,7 @@ This example demonstrates rendering a text field in the address section: ```php add_action( - 'woocommerce_blocks_loaded', + 'woocommerce_init', function() { woocommerce_register_additional_checkout_field( array( @@ -377,7 +377,7 @@ This results in the following address form (the billing form will be the same): The rendered markup looks like this: ```html -