Add validation to local pickup fields (#8007)

* add form validation for admin screen

* add types

* add validation to fields

* restore form ref

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',

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 }
 			/>
 			<LocalPickupSelector
 				checked={ checked }
@@ -154,7 +155,7 @@ const Block = ( {
 				multiple={ shippingRates.length > 1 }
 				showPrice={ showPrice }
 				showIcon={ showIcon }
-				toggleText={ localPickupText }
+				toggleText={ localPickupText || defaultLocalPickupText }
 			/>
 		</RadioGroup>
 	);

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'
+);

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 = ( {
 			) }
 			<RichText
 				value={ toggleText }
+				placeholder={ defaultLocalPickupText }
 				tagName="span"
 				className="wc-block-checkout__shipping-method-option-title"
 				onChange={ ( value ) =>
@@ -133,6 +135,7 @@ const ShippingSelector = ( {
 			) }
 			<RichText
 				value={ toggleText }
+				placeholder={ defaultShippingText }
 				tagName="span"
 				className="wc-block-checkout__shipping-method-option-title"
 				onChange={ ( value ) =>

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 }
 			/>
 			<TextControl
 				label={ __( 'Address', 'woo-gutenberg-products-block' ) }

assets/js/extensions/shipping-methods/pickup-location/edit-location/index.tsx

@@ -69,8 +69,12 @@ const EditLocation = ( {
 					<Button
 						variant="primary"
 						onClick={ () => {
-							onSave( values );
-							onClose();
+							const form =
+								formRef?.current as unknown as HTMLFormElement;
+							if ( form.reportValidity() ) {
+								onSave( values );
+								onClose();
+							}
 						} }
 					>
 						{ __( 'Done', 'woo-gutenberg-products-block' ) }

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 }
 				/>
 				<CheckboxControl
 					checked={ showCosts }

assets/js/extensions/shipping-methods/pickup-location/save.tsx

@@ -26,7 +26,15 @@ const SaveSettings = () => {
 				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' ) }
 			</Button>

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;