From 3eb51342a9632639fa338481f32d5f032d8f59de Mon Sep 17 00:00:00 2001 From: Seghir Nadir Date: Thu, 22 Dec 2022 14:36:25 +0100 Subject: [PATCH] Add validation to local pickup fields (https://github.com/woocommerce/woocommerce-blocks/pull/8007) * add form validation for admin screen * add types * add validation to fields * restore form ref --- .../checkout-shipping-method-block/attributes.tsx | 5 +++-- .../checkout-shipping-method-block/block.tsx | 5 +++-- .../checkout-shipping-method-block/constants.tsx | 14 ++++++++++++++ .../checkout-shipping-method-block/edit.tsx | 3 +++ .../pickup-location/edit-location/form.tsx | 1 + .../pickup-location/edit-location/index.tsx | 8 ++++++-- .../pickup-location/general-settings.tsx | 1 + .../shipping-methods/pickup-location/save.tsx | 10 +++++++++- .../pickup-location/settings-page.tsx | 2 +- 9 files changed, 41 insertions(+), 8 deletions(-) create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/constants.tsx diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/attributes.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/attributes.tsx index 682142a337e..42dfb4696fa 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/attributes.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/attributes.tsx @@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import formStepAttributes from '../../form-step/attributes'; +import { defaultShippingText, defaultLocalPickupText } from './constants'; export default { ...formStepAttributes( { @@ -30,11 +31,11 @@ export default { }, localPickupText: { type: 'string', - default: __( 'Local Pickup', 'woo-gutenberg-products-block' ), + default: defaultLocalPickupText, }, shippingText: { type: 'string', - default: __( 'Shipping', 'woo-gutenberg-products-block' ), + default: defaultShippingText, }, lock: { type: 'object', diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx index 8acb1084d57..e59b5e91725 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/block.tsx @@ -16,6 +16,7 @@ import { Icon, store, shipping } from '@wordpress/icons'; import './style.scss'; import { RatePrice, getLocalPickupPrices, getShippingPrices } from './shared'; import type { minMaxPrices } from './shared'; +import { defaultLocalPickupText, defaultShippingText } from './constants'; const LocalPickupSelector = ( { checked, @@ -144,7 +145,7 @@ const Block = ( { rate={ getShippingPrices( shippingRates[ 0 ]?.shipping_rates ) } showPrice={ showPrice } showIcon={ showIcon } - toggleText={ shippingText } + toggleText={ shippingText || defaultShippingText } /> 1 } showPrice={ showPrice } showIcon={ showIcon } - toggleText={ localPickupText } + toggleText={ localPickupText || defaultLocalPickupText } /> ); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/constants.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/constants.tsx new file mode 100644 index 00000000000..f29a7025438 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/constants.tsx @@ -0,0 +1,14 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; + +export const defaultLocalPickupText = __( + 'Local Pickup', + 'woo-gutenberg-products-block' +); + +export const defaultShippingText = __( + 'Shipping', + 'woo-gutenberg-products-block' +); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/edit.tsx index cff45802c57..b4df6cfd99a 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/edit.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/edit.tsx @@ -35,6 +35,7 @@ import { import { RatePrice, getLocalPickupPrices, getShippingPrices } from './shared'; import type { minMaxPrices } from './shared'; import './style.scss'; +import { defaultShippingText, defaultLocalPickupText } from './constants'; const LocalPickupSelector = ( { checked, @@ -71,6 +72,7 @@ const LocalPickupSelector = ( { ) } @@ -133,6 +135,7 @@ const ShippingSelector = ( { ) } diff --git a/plugins/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/edit-location/form.tsx b/plugins/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/edit-location/form.tsx index 23047f13132..1d4b2d4f55f 100644 --- a/plugins/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/edit-location/form.tsx +++ b/plugins/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/edit-location/form.tsx @@ -53,6 +53,7 @@ const Form = ( { value={ values.name } onChange={ setLocationField( 'name' ) } autoComplete="off" + required={ true } /> { - onSave( values ); - onClose(); + const form = + formRef?.current as unknown as HTMLFormElement; + if ( form.reportValidity() ) { + onSave( values ); + onClose(); + } } } > { __( 'Done', 'woo-gutenberg-products-block' ) } diff --git a/plugins/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/general-settings.tsx b/plugins/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/general-settings.tsx index 9ff33643a25..3eedb944edd 100644 --- a/plugins/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/general-settings.tsx +++ b/plugins/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/general-settings.tsx @@ -98,6 +98,7 @@ const GeneralSettings = () => { onChange={ setSettingField( 'title' ) } disabled={ false } autoComplete="off" + required={ true } /> { variant="primary" isBusy={ isSaving } disabled={ isSaving } - onClick={ save } + onClick={ ( + event: React.MouseEvent< HTMLButtonElement, MouseEvent > + ) => { + const target = event.target as HTMLButtonElement; + if ( target?.form?.reportValidity() ) { + save(); + } + } } + type="submit" > { __( 'Save changes', 'woo-gutenberg-products-block' ) } diff --git a/plugins/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/settings-page.tsx b/plugins/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/settings-page.tsx index 97becd3e054..84265afad51 100644 --- a/plugins/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/settings-page.tsx +++ b/plugins/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/settings-page.tsx @@ -11,7 +11,7 @@ import LocationSettings from './location-settings'; import SaveSettings from './save'; import { SettingsProvider } from './settings-context'; -const SettingsWrapper = styled.div` +const SettingsWrapper = styled.form` margin: 48px auto 0; max-width: 1032px; display: flex;