rebase from live enviornment

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/edit-location/form.tsx

@@ -0,0 +1,181 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { SelectControl, TextControl } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { PickupLocation } from '../types';
+import { countryStateOptions, states } from '../utils';
+
+const Form = ( {
+	formRef,
+	values,
+	setValues,
+}: {
+	formRef: React.RefObject< HTMLFormElement >;
+	values: PickupLocation;
+	setValues: React.Dispatch< React.SetStateAction< PickupLocation > >;
+} ) => {
+	const { country: selectedCountry, state: selectedState } = values.address;
+	const setLocationField =
+		( field: keyof PickupLocation ) => ( newValue: string | boolean ) => {
+			setValues( ( prevValue: PickupLocation ) => ( {
+				...prevValue,
+				[ field ]: newValue,
+			} ) );
+		};
+
+	const setLocationAddressField =
+		( field: keyof PickupLocation[ 'address' ] ) =>
+		( newValue: string | boolean ) => {
+			setValues( ( prevValue ) => ( {
+				...prevValue,
+				address: {
+					...prevValue.address,
+					[ field ]: newValue,
+				},
+			} ) );
+		};
+
+	const countryHasStates =
+		states[ selectedCountry ] &&
+		Object.keys( states[ selectedCountry ] ).length > 0;
+
+	return (
+		<form ref={ formRef }>
+			<TextControl
+				label={ __( 'Location name', 'woo-gutenberg-products-block' ) }
+				name={ 'location_name' }
+				value={ values.name }
+				onChange={ setLocationField( 'name' ) }
+				autoComplete="off"
+				required={ true }
+				onInvalid={ (
+					event: React.InvalidEvent< HTMLInputElement >
+				) => {
+					event.target.setCustomValidity(
+						__(
+							'A Location title is required',
+							'woo-gutenberg-products-block'
+						)
+					);
+				} }
+				onInput={ ( event: React.ChangeEvent< HTMLInputElement > ) => {
+					event.target.setCustomValidity( '' );
+				} }
+			/>
+			<TextControl
+				label={ __( 'Address', 'woo-gutenberg-products-block' ) }
+				name={ 'location_address' }
+				placeholder={ __( 'Address', 'woo-gutenberg-products-block' ) }
+				value={ values.address.address_1 }
+				onChange={ setLocationAddressField( 'address_1' ) }
+				autoComplete="off"
+			/>
+			<TextControl
+				label={ __( 'City', 'woo-gutenberg-products-block' ) }
+				name={ 'location_city' }
+				hideLabelFromVision={ true }
+				placeholder={ __( 'City', 'woo-gutenberg-products-block' ) }
+				value={ values.address.city }
+				onChange={ setLocationAddressField( 'city' ) }
+				autoComplete="off"
+			/>
+			<TextControl
+				label={ __( 'Postcode / ZIP', 'woo-gutenberg-products-block' ) }
+				name={ 'location_postcode' }
+				hideLabelFromVision={ true }
+				placeholder={ __(
+					'Postcode / ZIP',
+					'woo-gutenberg-products-block'
+				) }
+				value={ values.address.postcode }
+				onChange={ setLocationAddressField( 'postcode' ) }
+				autoComplete="off"
+			/>
+			{ ! countryHasStates && (
+				<TextControl
+					placeholder={ __(
+						'State',
+						'woo-gutenberg-products-block'
+					) }
+					value={ selectedState }
+					onChange={ setLocationAddressField( 'state' ) }
+				/>
+			) }
+			<SelectControl
+				name="location_country_state"
+				label={ __(
+					'Country / State',
+					'woo-gutenberg-products-block'
+				) }
+				hideLabelFromVision={ true }
+				placeholder={ __(
+					'Country / State',
+					'woo-gutenberg-products-block'
+				) }
+				value={ ( () => {
+					if ( ! selectedState && countryHasStates ) {
+						return `${ selectedCountry }:${
+							Object.keys( states[ selectedCountry ] )[ 0 ]
+						}`;
+					}
+
+					return `${ selectedCountry }${
+						selectedState &&
+						states[ selectedCountry ]?.[ selectedState ]
+							? ':' + selectedState
+							: ''
+					}`;
+				} )() }
+				onChange={ ( val: string ) => {
+					const [ country, state = '' ] = val.split( ':' );
+					setLocationAddressField( 'country' )( country );
+					setLocationAddressField( 'state' )( state );
+				} }
+			>
+				{ countryStateOptions.options.map( ( option ) => {
+					if ( option.label ) {
+						return (
+							<optgroup
+								key={ option.label }
+								label={ option.label }
+							>
+								{ option.options.map( ( subOption ) => (
+									<option
+										key={ subOption.value }
+										value={ subOption.value }
+									>
+										{ subOption.label }
+									</option>
+								) ) }
+							</optgroup>
+						);
+					}
+
+					return (
+						<option
+							key={ option.options[ 0 ].value }
+							value={ option.options[ 0 ].value }
+						>
+							{ option.options[ 0 ].label }
+						</option>
+					);
+				} ) }
+			</SelectControl>
+
+			<TextControl
+				label={ __( 'Pickup details', 'woo-gutenberg-products-block' ) }
+				name={ 'pickup_details' }
+				value={ values.details }
+				onChange={ setLocationField( 'details' ) }
+				autoComplete="off"
+			/>
+		</form>
+	);
+};
+
+export default Form;

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/edit-location/index.tsx

@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { useRef, useState } from '@wordpress/element';
+import type { UniqueIdentifier } from '@dnd-kit/core';
+
+/**
+ * Internal dependencies
+ */
+import { SettingsModal } from '../../shared-components';
+import Form from './form';
+import type { PickupLocation } from '../types';
+
+const EditLocation = ( {
+	locationData,
+	editingLocation,
+	onClose,
+	onSave,
+	onDelete,
+}: {
+	locationData: PickupLocation | null;
+	editingLocation: UniqueIdentifier | 'new';
+	onClose: () => void;
+	onSave: ( location: PickupLocation ) => void;
+	onDelete: () => void;
+} ): JSX.Element | null => {
+	const formRef = useRef( null );
+	const [ values, setValues ] = useState< PickupLocation >(
+		locationData as PickupLocation
+	);
+
+	if ( ! locationData ) {
+		return null;
+	}
+
+	return (
+		<SettingsModal
+			onRequestClose={ onClose }
+			title={
+				editingLocation === 'new'
+					? __( 'Pickup location', 'woo-gutenberg-products-block' )
+					: __(
+							'Edit pickup location',
+							'woo-gutenberg-products-block'
+					  )
+			}
+			actions={
+				<>
+					{ editingLocation !== 'new' && (
+						<Button
+							variant="link"
+							className="button-link-delete"
+							onClick={ () => {
+								onDelete();
+								onClose();
+							} }
+						>
+							{ __(
+								'Delete location',
+								'woo-gutenberg-products-block'
+							) }
+						</Button>
+					) }
+					<Button variant="secondary" onClick={ onClose }>
+						{ __( 'Cancel', 'woo-gutenberg-products-block' ) }
+					</Button>
+					<Button
+						variant="primary"
+						onClick={ () => {
+							const form =
+								formRef?.current as unknown as HTMLFormElement;
+							if ( form.reportValidity() ) {
+								onSave( values );
+								onClose();
+							}
+						} }
+					>
+						{ __( 'Done', 'woo-gutenberg-products-block' ) }
+					</Button>
+				</>
+			}
+		>
+			<Form
+				formRef={ formRef }
+				values={ values }
+				setValues={ setValues }
+			/>
+		</SettingsModal>
+	);
+};
+
+export default EditLocation;

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/general-settings.tsx

@@ -0,0 +1,212 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createInterpolateElement, useState } from '@wordpress/element';
+import { ADMIN_URL, getSetting } from '@woocommerce/settings';
+import { CHECKOUT_PAGE_ID } from '@woocommerce/block-settings';
+import {
+	CheckboxControl,
+	SelectControl,
+	TextControl,
+	ExternalLink,
+	Notice,
+} from '@wordpress/components';
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import { SettingsCard, SettingsSection } from '../shared-components';
+import { useSettingsContext } from './settings-context';
+
+const GeneralSettingsDescription = () => (
+	<>
+		<h2>{ __( 'General', 'woo-gutenberg-products-block' ) }</h2>
+		<p>
+			{ __(
+				'Enable or disable local pickup on your store, and define costs. Local pickup is only available from the block checkout.',
+				'woo-gutenberg-products-block'
+			) }
+		</p>
+		<ExternalLink
+			href={ `${ ADMIN_URL }post.php?post=${ CHECKOUT_PAGE_ID }&action=edit` }
+		>
+			{ __( 'View checkout page', 'woo-gutenberg-products-block' ) }
+		</ExternalLink>
+	</>
+);
+
+const StyledNotice = styled( Notice )`
+	margin-left: 0;
+	margin-right: 0;
+`;
+
+const GeneralSettings = () => {
+	const { settings, setSettingField, readOnlySettings } =
+		useSettingsContext();
+	const [ showCosts, setShowCosts ] = useState( !! settings.cost );
+
+	const shippingCostRequiresAddress = getSetting< boolean >(
+		'shippingCostRequiresAddress',
+		false
+	);
+
+	return (
+		<SettingsSection Description={ GeneralSettingsDescription }>
+			<SettingsCard>
+				{ readOnlySettings.hasLegacyPickup && (
+					<StyledNotice status="warning" isDismissible={ false }>
+						{ createInterpolateElement(
+							__(
+								'Enabling this will produce duplicate options at checkout. Remove the local pickup shipping method from your <a>shipping zones</a>.',
+								'woo-gutenberg-products-block'
+							),
+							{
+								a: (
+									// eslint-disable-next-line jsx-a11y/anchor-has-content
+									<a
+										href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=shipping` }
+										target="_blank"
+										rel="noopener noreferrer"
+									/>
+								),
+							}
+						) }
+					</StyledNotice>
+				) }
+				<CheckboxControl
+					checked={ settings.enabled }
+					name="local_pickup_enabled"
+					onChange={ setSettingField( 'enabled' ) }
+					label={ __(
+						'Enable local pickup',
+						'woo-gutenberg-products-block'
+					) }
+					help={
+						<span>
+							{ __(
+								'When enabled, local pickup will appear as an option on the block based checkout.',
+								'woo-gutenberg-products-block'
+							) }
+							{ shippingCostRequiresAddress ? (
+								<>
+									<br />
+									{ __(
+										'If local pickup is enabled, the "Hide shipping costs until an address is entered" setting will be ignored.',
+										'woo-gutenberg-products-block'
+									) }
+								</>
+							) : null }
+						</span>
+					}
+				/>
+				<TextControl
+					label={ __( 'Title', 'woo-gutenberg-products-block' ) }
+					name="local_pickup_title"
+					help={ __(
+						'This is the shipping method title shown to customers.',
+						'woo-gutenberg-products-block'
+					) }
+					placeholder={ __(
+						'Local Pickup',
+						'woo-gutenberg-products-block'
+					) }
+					value={ settings.title }
+					onChange={ setSettingField( 'title' ) }
+					disabled={ false }
+					autoComplete="off"
+					required={ true }
+					onInvalid={ (
+						event: React.InvalidEvent< HTMLInputElement >
+					) => {
+						event.target.setCustomValidity(
+							__(
+								'Local pickup title is required',
+								'woo-gutenberg-products-block'
+							)
+						);
+					} }
+					onInput={ (
+						event: React.ChangeEvent< HTMLInputElement >
+					) => {
+						event.target.setCustomValidity( '' );
+					} }
+				/>
+				<CheckboxControl
+					checked={ showCosts }
+					onChange={ () => {
+						setShowCosts( ! showCosts );
+						setSettingField( 'cost' )( '' );
+					} }
+					label={ __(
+						'Add a price for customers who choose local pickup',
+						'woo-gutenberg-products-block'
+					) }
+					help={ __(
+						'By default, the local pickup shipping method is free.',
+						'woo-gutenberg-products-block'
+					) }
+				/>
+				{ showCosts ? (
+					<>
+						<TextControl
+							label={ __(
+								'Cost',
+								'woo-gutenberg-products-block'
+							) }
+							name="local_pickup_cost"
+							help={ __(
+								'Optional cost to charge for local pickup.',
+								'woo-gutenberg-products-block'
+							) }
+							placeholder={ __(
+								'Free',
+								'woo-gutenberg-products-block'
+							) }
+							type="number"
+							pattern="[0-9]+\.?[0-9]*"
+							min={ 0 }
+							value={ settings.cost }
+							onChange={ setSettingField( 'cost' ) }
+							disabled={ false }
+							autoComplete="off"
+						/>
+						<SelectControl
+							label={ __(
+								'Taxes',
+								'woo-gutenberg-products-block'
+							) }
+							name="local_pickup_tax_status"
+							help={ __(
+								'If a cost is defined, this controls if taxes are applied to that cost.',
+								'woo-gutenberg-products-block'
+							) }
+							options={ [
+								{
+									label: __(
+										'Taxable',
+										'woo-gutenberg-products-block'
+									),
+									value: 'taxable',
+								},
+								{
+									label: __(
+										'Not taxable',
+										'woo-gutenberg-products-block'
+									),
+									value: 'none',
+								},
+							] }
+							value={ settings.tax_status }
+							onChange={ setSettingField( 'tax_status' ) }
+							disabled={ false }
+						/>
+					</>
+				) : null }
+			</SettingsCard>
+		</SettingsSection>
+	);
+};
+
+export default GeneralSettings;

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/index.js

@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import SettingsPage from './settings-page';
+
+const settingsContainer = document.getElementById(
+	'wc-shipping-method-pickup-location-settings-container'
+);
+if ( settingsContainer ) {
+	render( <SettingsPage />, settingsContainer );
+}

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/location-settings.tsx

@@ -0,0 +1,165 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import type { UniqueIdentifier } from '@dnd-kit/core';
+import { isBoolean } from '@woocommerce/types';
+import { ToggleControl, Button, ExternalLink } from '@wordpress/components';
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import {
+	SettingsSection,
+	SortableTable,
+	SortableData,
+} from '../shared-components';
+import EditLocation from './edit-location';
+import type { SortablePickupLocation } from './types';
+import { useSettingsContext } from './settings-context';
+import { getUserFriendlyAddress } from './utils';
+
+const LocationSettingsDescription = () => (
+	<>
+		<h2>{ __( 'Pickup locations', 'woo-gutenberg-products-block' ) }</h2>
+		<p>
+			{ __(
+				'Define pickup locations for your customers to choose from during checkout.',
+				'woo-gutenberg-products-block'
+			) }
+		</p>
+		<ExternalLink href="https://woocommerce.com/document/woocommerce-blocks-local-pickup/">
+			{ __( 'Learn more', 'woo-gutenberg-products-block' ) }
+		</ExternalLink>
+	</>
+);
+
+const StyledAddress = styled.address`
+	color: #757575;
+	font-style: normal;
+	display: inline;
+	margin-left: 12px;
+`;
+
+const LocationSettings = () => {
+	const {
+		pickupLocations,
+		setPickupLocations,
+		toggleLocation,
+		updateLocation,
+		readOnlySettings,
+	} = useSettingsContext();
+	const [ editingLocation, setEditingLocation ] =
+		useState< UniqueIdentifier >( '' );
+
+	const tableColumns = [
+		{
+			name: 'name',
+			label: __( 'Pickup location', 'woo-gutenberg-products-block' ),
+			width: '50%',
+			renderCallback: ( row: SortableData ): JSX.Element => (
+				<>
+					{ row.name }
+					<StyledAddress>
+						{ getUserFriendlyAddress( row.address ) }
+					</StyledAddress>
+				</>
+			),
+		},
+		{
+			name: 'enabled',
+			label: __( 'Enabled', 'woo-gutenberg-products-block' ),
+			align: 'right',
+			renderCallback: ( row: SortableData ): JSX.Element => (
+				<ToggleControl
+					checked={ isBoolean( row.enabled ) ? row.enabled : false }
+					onChange={ () => toggleLocation( row.id ) }
+				/>
+			),
+		},
+		{
+			name: 'edit',
+			label: '',
+			align: 'center',
+			width: '1%',
+			renderCallback: ( row: SortableData ): JSX.Element => (
+				<button
+					type="button"
+					className="button-link-edit button-link"
+					onClick={ () => {
+						setEditingLocation( row.id );
+					} }
+				>
+					{ __( 'Edit', 'woo-gutenberg-products-block' ) }
+				</button>
+			),
+		},
+	];
+
+	const FooterContent = (): JSX.Element => (
+		<Button
+			variant="secondary"
+			onClick={ () => {
+				setEditingLocation( 'new' );
+			} }
+		>
+			{ __( 'Add pickup location', 'woo-gutenberg-products-block' ) }
+		</Button>
+	);
+
+	return (
+		<SettingsSection Description={ LocationSettingsDescription }>
+			<SortableTable
+				className="pickup-locations"
+				columns={ tableColumns }
+				data={ pickupLocations }
+				setData={ ( newData ) => {
+					setPickupLocations( newData as SortablePickupLocation[] );
+				} }
+				placeholder={ __(
+					'When you add a pickup location, it will appear here.',
+					'woo-gutenberg-products-block'
+				) }
+				footerContent={ FooterContent }
+			/>
+			{ editingLocation && (
+				<EditLocation
+					locationData={
+						editingLocation === 'new'
+							? {
+									name: '',
+									details: '',
+									enabled: true,
+									address: {
+										address_1: '',
+										city: '',
+										state: readOnlySettings.storeState,
+										postcode: '',
+										country: readOnlySettings.storeCountry,
+									},
+							  }
+							: pickupLocations.find( ( { id } ) => {
+									return id === editingLocation;
+							  } ) || null
+					}
+					editingLocation={ editingLocation }
+					onSave={ ( values ) => {
+						updateLocation(
+							editingLocation,
+							values as SortablePickupLocation
+						);
+					} }
+					onClose={ () => setEditingLocation( '' ) }
+					onDelete={ () => {
+						updateLocation( editingLocation, null );
+						setEditingLocation( '' );
+					} }
+				/>
+			) }
+		</SettingsSection>
+	);
+};
+
+export default LocationSettings;

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/save.tsx

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import styled from '@emotion/styled';
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { SettingsSection } from '../shared-components';
+import { useSettingsContext } from './settings-context';
+
+const SaveSectionWrapper = styled( SettingsSection )`
+	text-align: right;
+	padding-top: 0;
+	margin-top: 0;
+`;
+
+const SaveSettings = () => {
+	const { isSaving, save } = useSettingsContext();
+
+	return (
+		<SaveSectionWrapper className={ 'submit' }>
+			<Button
+				variant="primary"
+				isBusy={ isSaving }
+				disabled={ isSaving }
+				onClick={ (
+					event: React.MouseEvent< HTMLButtonElement, MouseEvent >
+				) => {
+					event.preventDefault();
+					const target = event.target as HTMLButtonElement;
+					if ( target?.form?.reportValidity() ) {
+						save();
+					}
+				} }
+				type="submit"
+			>
+				{ __( 'Save changes', 'woo-gutenberg-products-block' ) }
+			</Button>
+		</SaveSectionWrapper>
+	);
+};
+
+export default SaveSettings;

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/settings-context.tsx

@@ -0,0 +1,178 @@
+/**
+ * External dependencies
+ */
+import {
+	createContext,
+	useContext,
+	useCallback,
+	useState,
+} from '@wordpress/element';
+import { cleanForSlug } from '@wordpress/url';
+import type { UniqueIdentifier } from '@dnd-kit/core';
+import apiFetch from '@wordpress/api-fetch';
+import { dispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import fastDeepEqual from 'fast-deep-equal/es6';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	SortablePickupLocation,
+	SettingsContextType,
+	ShippingMethodSettings,
+} from './types';
+import {
+	defaultSettings,
+	getInitialSettings,
+	defaultReadyOnlySettings,
+	readOnlySettings,
+	getInitialPickupLocations,
+} from './utils';
+
+const SettingsContext = createContext< SettingsContextType >( {
+	settings: defaultSettings,
+	readOnlySettings: defaultReadyOnlySettings,
+	setSettingField: () => () => void null,
+	pickupLocations: [],
+	setPickupLocations: () => void null,
+	toggleLocation: () => void null,
+	updateLocation: () => void null,
+	isSaving: false,
+	save: () => void null,
+} );
+
+export const useSettingsContext = (): SettingsContextType => {
+	return useContext( SettingsContext );
+};
+
+export const SettingsProvider = ( {
+	children,
+}: {
+	children: JSX.Element[] | JSX.Element;
+} ): JSX.Element => {
+	const [ isSaving, setIsSaving ] = useState( false );
+	const [ pickupLocations, setPickupLocations ] = useState<
+		SortablePickupLocation[]
+	>( getInitialPickupLocations );
+	const [ settings, setSettings ] =
+		useState< ShippingMethodSettings >( getInitialSettings );
+
+	const setSettingField = useCallback(
+		( field: keyof ShippingMethodSettings ) => ( newValue: unknown ) => {
+			setSettings( ( prevValue ) => ( {
+				...prevValue,
+				[ field ]: newValue,
+			} ) );
+		},
+		[]
+	);
+
+	const toggleLocation = useCallback( ( rowId: UniqueIdentifier ) => {
+		setPickupLocations( ( previousLocations: SortablePickupLocation[] ) => {
+			const locationIndex = previousLocations.findIndex(
+				( { id } ) => id === rowId
+			);
+			const updated = [ ...previousLocations ];
+			updated[ locationIndex ].enabled =
+				! previousLocations[ locationIndex ].enabled;
+			return updated;
+		} );
+	}, [] );
+
+	const updateLocation = (
+		rowId: UniqueIdentifier | 'new',
+		locationData: SortablePickupLocation
+	) => {
+		setPickupLocations( ( prevData ) => {
+			if ( rowId === 'new' ) {
+				return [
+					...prevData,
+					{
+						...locationData,
+						id:
+							cleanForSlug( locationData.name ) +
+							'-' +
+							prevData.length,
+					},
+				];
+			}
+			return prevData
+				.map( ( location ): SortablePickupLocation => {
+					if ( location.id === rowId ) {
+						return locationData;
+					}
+					return location;
+				} )
+				.filter( Boolean );
+		} );
+	};
+
+	const save = useCallback( () => {
+		const data = {
+			pickup_location_settings: {
+				enabled: settings.enabled ? 'yes' : 'no',
+				title: settings.title,
+				tax_status: [ 'taxable', 'none' ].includes(
+					settings.tax_status
+				)
+					? settings.tax_status
+					: 'taxable',
+				cost: settings.cost,
+			},
+			pickup_locations: pickupLocations.map( ( location ) => ( {
+				name: location.name,
+				address: location.address,
+				details: location.details,
+				enabled: location.enabled,
+			} ) ),
+		};
+
+		setIsSaving( true );
+
+		// @todo This should be improved to include error handling in case of API failure, or invalid data being sent that
+		// does not match the schema. This would fail silently on the API side.
+		apiFetch( {
+			path: '/wp/v2/settings',
+			method: 'POST',
+			data,
+		} ).then( ( response ) => {
+			setIsSaving( false );
+			if (
+				fastDeepEqual(
+					response.pickup_location_settings,
+					data.pickup_location_settings
+				) &&
+				fastDeepEqual(
+					response.pickup_locations,
+					data.pickup_locations
+				)
+			) {
+				dispatch( 'core/notices' ).createSuccessNotice(
+					__(
+						'Local Pickup settings have been saved.',
+						'woo-gutenberg-products-block'
+					)
+				);
+			}
+		} );
+	}, [ settings, pickupLocations ] );
+
+	const settingsData = {
+		settings,
+		setSettingField,
+		readOnlySettings,
+		pickupLocations,
+		setPickupLocations,
+		toggleLocation,
+		updateLocation,
+		isSaving,
+		save,
+	};
+
+	return (
+		<SettingsContext.Provider value={ settingsData }>
+			{ children }
+		</SettingsContext.Provider>
+	);
+};

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/settings-page.tsx

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import GeneralSettings from './general-settings';
+import LocationSettings from './location-settings';
+import SaveSettings from './save';
+import { SettingsProvider } from './settings-context';
+
+const SettingsWrapper = styled.form`
+	margin: 48px auto 0;
+	max-width: 1032px;
+	display: flex;
+	flex-flow: column;
+
+	@media ( min-width: 960px ) {
+		padding: 0 56px;
+	}
+`;
+
+const SettingsPage = () => {
+	return (
+		<SettingsWrapper id="local-pickup-settings">
+			<SettingsProvider>
+				<GeneralSettings />
+				<LocationSettings />
+				<SaveSettings />
+			</SettingsProvider>
+		</SettingsWrapper>
+	);
+};
+
+export default SettingsPage;

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/types.ts

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import type { UniqueIdentifier } from '@dnd-kit/core';
+
+/**
+ * Internal dependencies
+ */
+import type { SortableData } from '../shared-components';
+
+export interface PickupLocation {
+	name: string;
+	details: string;
+	enabled: boolean;
+	address: {
+		address_1: string;
+		city: string;
+		state: string;
+		postcode: string;
+		country: string;
+	};
+}
+
+export interface SortablePickupLocation extends PickupLocation, SortableData {}
+
+export type ShippingMethodSettings = {
+	enabled: boolean;
+	title: string;
+	tax_status: string;
+	cost: string;
+};
+
+export type ReadOnlySettings = {
+	storeCountry: string;
+	storeState: string;
+	hasLegacyPickup: boolean;
+};
+
+export type SettingsContextType = {
+	settings: ShippingMethodSettings;
+	readOnlySettings: ReadOnlySettings;
+	setSettingField: (
+		field: keyof ShippingMethodSettings
+	) => ( value: unknown ) => void;
+	pickupLocations: SortablePickupLocation[];
+	setPickupLocations: ( locations: SortablePickupLocation[] ) => void;
+	toggleLocation: ( rowId: UniqueIdentifier ) => void;
+	updateLocation: (
+		rowId: UniqueIdentifier | 'new',
+		location: SortablePickupLocation | null
+	) => void;
+	isSaving: boolean;
+	save: () => void;
+};

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/extensions/shipping-methods/pickup-location/utils.ts

@@ -0,0 +1,127 @@
+/**
+ * External dependencies
+ */
+import { cleanForSlug } from '@wordpress/url';
+import { __ } from '@wordpress/i18n';
+import { isObject } from '@woocommerce/types';
+import { getSetting } from '@woocommerce/settings';
+/**
+ * Internal dependencies
+ */
+import type {
+	PickupLocation,
+	SortablePickupLocation,
+	ShippingMethodSettings,
+} from './types';
+
+export const indexLocationsById = (
+	locations: PickupLocation[]
+): SortablePickupLocation[] => {
+	return locations.map( ( value, index ) => {
+		return {
+			...value,
+			id: cleanForSlug( value.name ) + '-' + index,
+		};
+	} );
+};
+
+export const defaultSettings = {
+	enabled: false,
+	title: __( 'Local Pickup', 'woo-gutenberg-products-block' ),
+	tax_status: 'taxable',
+	cost: '',
+};
+
+export const defaultReadyOnlySettings = {
+	hasLegacyPickup: false,
+	storeCountry: '',
+	storeState: '',
+};
+declare global {
+	const hydratedScreenSettings: {
+		pickupLocationSettings: {
+			enabled: string;
+			title: string;
+			tax_status: string;
+			cost: string;
+		};
+		pickupLocations: PickupLocation[];
+		readonlySettings: typeof defaultReadyOnlySettings;
+	};
+}
+
+export const getInitialSettings = (): ShippingMethodSettings => {
+	const settings = hydratedScreenSettings.pickupLocationSettings;
+
+	return {
+		enabled: settings?.enabled
+			? settings?.enabled === 'yes'
+			: defaultSettings.enabled,
+		title: settings?.title || defaultSettings.title,
+		tax_status: settings?.tax_status || defaultSettings.tax_status,
+		cost: settings?.cost || defaultSettings.cost,
+	};
+};
+
+export const getInitialPickupLocations = (): SortablePickupLocation[] =>
+	indexLocationsById( hydratedScreenSettings.pickupLocations || [] );
+
+export const readOnlySettings =
+	hydratedScreenSettings.readonlySettings || defaultReadyOnlySettings;
+
+export const countries = getSetting< Record< string, string > >(
+	'countries',
+	[]
+);
+export const states = getSetting< Record< string, Record< string, string > > >(
+	'countryStates',
+	[]
+);
+export const getUserFriendlyAddress = ( address: unknown ) => {
+	const updatedAddress = isObject( address ) && {
+		...address,
+		country:
+			typeof address.country === 'string' && countries[ address.country ],
+		state:
+			typeof address.country === 'string' &&
+			typeof address.state === 'string' &&
+			states[ address.country ]?.[ address.state ]
+				? states[ address.country ][ address.state ]
+				: address.state,
+	};
+
+	return Object.values( updatedAddress )
+		.filter( ( value ) => value !== '' )
+		.join( ', ' );
+};
+
+// Outputs the list of countries and states in a single dropdown select.
+const countryStateDropdownOptions = () => {
+	const countryStateOptions = Object.keys( countries ).map( ( country ) => {
+		const countryStates = states[ country ] || {};
+
+		if ( Object.keys( countryStates ).length === 0 ) {
+			return {
+				options: [
+					{
+						value: country,
+						label: countries[ country ],
+					},
+				],
+			};
+		}
+
+		const stateOptions = Object.keys( countryStates ).map( ( state ) => ( {
+			value: `${ country }:${ state }`,
+			label: `${ countries[ country ] } — ${ countryStates[ state ] }`,
+		} ) );
+		return {
+			label: countries[ country ],
+			options: [ ...stateOptions ],
+		};
+	} );
+	return {
+		options: countryStateOptions,
+	};
+};
+export const countryStateOptions = countryStateDropdownOptions();

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/extensions/shipping-methods/shared-components/index.ts

@@ -0,0 +1,4 @@
+export { default as SettingsCard } from './settings-card';
+export { default as SettingsSection } from './settings-section';
+export { default as SettingsModal } from './settings-modal';
+export * from './sortable-table';

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/extensions/shipping-methods/shared-components/settings-card/index.tsx

@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+import { Card, CardBody } from '@wordpress/components';
+import styled from '@emotion/styled';
+import type { ReactNode } from 'react';
+
+const StyledCard = styled( Card )`
+	border-radius: 3px;
+`;
+
+const StyledCardBody = styled( CardBody )`
+	padding: 24px;
+
+	// increasing the specificity of the styles to override the Gutenberg ones
+	&.is-size-medium.is-size-medium {
+		padding: 24px;
+	}
+
+	h4 {
+		margin-top: 0;
+		margin-bottom: 1em;
+	}
+
+	> * {
+		margin-top: 0;
+		margin-bottom: 1.5em;
+
+		// fixing the spacing on the inputs and their help text, to ensure it is consistent
+		&:last-child {
+			margin-bottom: 0;
+
+			> :last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	input,
+	select {
+		margin: 0;
+	}
+
+	// spacing adjustment on "Express checkouts > Show express checkouts on" list
+	ul > li:last-child {
+		margin-bottom: 0;
+
+		.components-base-control__field {
+			margin-bottom: 0;
+		}
+	}
+`;
+
+const SettingsCard = ( {
+	children,
+	...props
+}: {
+	children: ReactNode;
+} ): JSX.Element => (
+	<StyledCard>
+		<StyledCardBody { ...props }>{ children }</StyledCardBody>
+	</StyledCard>
+);
+
+export default SettingsCard;

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/extensions/shipping-methods/shared-components/settings-modal/index.tsx

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import { Modal } from '@wordpress/components';
+import styled from '@emotion/styled';
+
+const StyledModal = styled( Modal )`
+	max-width: 600px;
+	border-radius: 4px;
+	@media ( min-width: 600px ) {
+		min-width: 560px;
+	}
+
+	.components-modal__header {
+		padding: 12px 24px;
+		border-bottom: 1px solid #e0e0e0;
+		position: relative;
+		height: auto;
+		width: auto;
+		margin: 0 -24px 16px;
+
+		@media ( max-width: 599px ) {
+			button {
+				display: none;
+			}
+		}
+	}
+
+	.components-modal__content {
+		margin: 0;
+		padding: 0 24px;
+
+		@media ( max-width: 599px ) {
+			display: flex;
+			flex-direction: column;
+
+			hr:last-of-type {
+				margin-top: auto;
+			}
+		}
+
+		.components-base-control {
+			label {
+				margin-top: 8px;
+				text-transform: none !important;
+			}
+		}
+	}
+`;
+
+const StyledFooter = styled.div`
+	display: flex;
+	justify-content: flex-end;
+	border-top: 1px solid #e0e0e0;
+	margin: 24px -24px 0;
+	padding: 24px;
+
+	> * {
+		&:not( :first-of-type ) {
+			margin-left: 8px;
+		}
+	}
+
+	.button-link-delete {
+		margin-right: auto;
+		color: #d63638;
+	}
+`;
+
+const SettingsModal = ( {
+	children,
+	actions,
+	title,
+	onRequestClose,
+	...props
+}: {
+	children: React.ReactNode;
+	actions: React.ReactNode;
+	title: string;
+	onRequestClose: () => void;
+} ): JSX.Element => (
+	<StyledModal title={ title } onRequestClose={ onRequestClose } { ...props }>
+		{ children }
+		<StyledFooter>{ actions }</StyledFooter>
+	</StyledModal>
+);
+
+export default SettingsModal;

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/extensions/shipping-methods/shared-components/settings-section/index.tsx

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import React from '@wordpress/element';
+import styled from '@emotion/styled';
+
+const StyledSectionWrapper = styled.div`
+	display: flex;
+	flex-flow: column;
+	margin-bottom: 24px;
+	&:last-child {
+		margin-bottom: 0;
+	}
+	@media ( min-width: 800px ) {
+		flex-flow: row;
+	}
+	.components-base-control {
+		label {
+			text-transform: none !important;
+		}
+	}
+`;
+
+const StyledDescriptionWrapper = styled.div`
+	flex: 0 1 auto;
+	margin-bottom: 24px;
+	@media ( min-width: 800px ) {
+		flex: 0 0 250px;
+		margin: 0 32px 0 0;
+	}
+	h2 {
+		font-size: 16px;
+		line-height: 24px;
+	}
+	p {
+		font-size: 13px;
+		line-height: 17.89px;
+		margin: 12px 0;
+	}
+	> :last-child {
+		margin-bottom: 0;
+	}
+`;
+
+const StyledSectionControls = styled.div`
+	flex: 1 1 auto;
+	margin-bottom: 12px;
+`;
+
+const SettingsSection = ( {
+	Description = () => null,
+	children,
+	...props
+}: {
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	Description?: () => JSX.Element | null;
+	children: React.ReactNode;
+} ): JSX.Element => (
+	<StyledSectionWrapper { ...props }>
+		<StyledDescriptionWrapper>
+			<Description />
+		</StyledDescriptionWrapper>
+		<StyledSectionControls>{ children }</StyledSectionControls>
+	</StyledSectionWrapper>
+);
+
+export default SettingsSection;

wp/plugins/woocommerce/packages/woocommerce-blocks/assets/js/extensions/shipping-methods/shared-components/sortable-table/index.tsx

@@ -0,0 +1,300 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { Icon, dragHandle } from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
+import {
+	closestCenter,
+	DndContext,
+	KeyboardSensor,
+	MouseSensor,
+	TouchSensor,
+	useSensor,
+	useSensors,
+	DragEndEvent,
+	UniqueIdentifier,
+} from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import {
+	SortableContext,
+	verticalListSortingStrategy,
+	useSortable,
+	arrayMove,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { objectHasProp } from '@woocommerce/types';
+
+export interface SortableData extends Record< string, unknown > {
+	id: UniqueIdentifier;
+}
+
+type ColumnProps = {
+	name: string;
+	label: string;
+	width?: string;
+	align?: string;
+	renderCallback?: ( row: SortableData ) => JSX.Element;
+};
+
+const TableRow = ( {
+	children,
+	id,
+}: {
+	children: JSX.Element[];
+	id: UniqueIdentifier;
+} ): JSX.Element => {
+	const { attributes, listeners, transform, transition, setNodeRef } =
+		useSortable( {
+			id,
+		} );
+	const style = {
+		transform: CSS.Transform.toString( transform ),
+		transition,
+	};
+	return (
+		<tr ref={ setNodeRef } style={ style }>
+			<>
+				<td style={ { width: '1%' } }>
+					<Icon
+						icon={ dragHandle }
+						size={ 14 }
+						className={ 'sortable-table__handle' }
+						{ ...attributes }
+						{ ...listeners }
+					/>
+				</td>
+				{ children }
+			</>
+		</tr>
+	);
+};
+
+const StyledTable = styled.table`
+	background: #fff;
+	border: 0;
+	border-radius: 3px;
+	box-shadow: 0 0 0 1px rgb( 0 0 0 / 10% );
+	border-spacing: 0;
+	width: 100%;
+	clear: both;
+	margin: 0;
+	font-size: 14px;
+
+	.align-left {
+		text-align: left;
+		.components-flex {
+			justify-content: flex-start;
+			gap: 0;
+		}
+	}
+	.align-right {
+		text-align: right;
+		.components-flex {
+			justify-content: flex-end;
+			gap: 0;
+		}
+	}
+	.align-center {
+		text-align: center;
+		> * {
+			margin: 0 auto;
+		}
+		.components-flex {
+			display: block;
+		}
+	}
+
+	.sortable-table__handle {
+		cursor: move;
+	}
+
+	th {
+		position: relative;
+		color: #2c3338;
+		text-align: left;
+		vertical-align: middle;
+		vertical-align: top;
+		word-wrap: break-word;
+	}
+
+	tbody {
+		td {
+			vertical-align: top;
+			margin-bottom: 9px;
+		}
+	}
+
+	tfoot {
+		td {
+			text-align: left;
+			vertical-align: middle;
+		}
+	}
+
+	thead,
+	tfoot,
+	tbody {
+		td,
+		th {
+			border-top: 1px solid rgb( 0 0 0 / 10% );
+			border-bottom: 1px solid rgb( 0 0 0 / 10% );
+			padding: 16px 0 16px 24px;
+			line-height: 1.5;
+
+			&:last-child {
+				padding-right: 24px;
+			}
+
+			> svg,
+			> .components-base-control {
+				margin: 3px 0;
+			}
+		}
+	}
+
+	thead th {
+		border-top: 0;
+	}
+
+	tfoot td {
+		border-bottom: 0;
+	}
+`;
+
+export const SortableTable = ( {
+	columns,
+	data,
+	setData,
+	className,
+	footerContent: FooterContent,
+	placeholder,
+}: {
+	columns: ColumnProps[];
+	data: SortableData[];
+	setData: ( data: SortableData[] ) => void;
+	className?: string;
+	placeholder?: string | ( () => JSX.Element );
+	footerContent?: () => JSX.Element;
+} ): JSX.Element => {
+	const items = useMemo( () => data.map( ( { id } ) => id ), [ data ] );
+
+	const sensors = useSensors(
+		useSensor( MouseSensor, {} ),
+		useSensor( TouchSensor, {} ),
+		useSensor( KeyboardSensor, {} )
+	);
+
+	function handleDragEnd( event: DragEndEvent ) {
+		const { active, over } = event;
+
+		if ( active !== null && over !== null && active?.id !== over?.id ) {
+			const newData = arrayMove(
+				data,
+				items.indexOf( active.id ),
+				items.indexOf( over.id )
+			);
+			setData( newData );
+		}
+	}
+
+	const getColumnProps = ( column: ColumnProps, parentClassName: string ) => {
+		const align = column?.align || 'left';
+		const width = column?.width || 'auto';
+
+		return {
+			className: `${ parentClassName }-${ column.name } align-${ align }`,
+			style: { width },
+		};
+	};
+
+	return (
+		<DndContext
+			sensors={ sensors }
+			onDragEnd={ handleDragEnd }
+			collisionDetection={ closestCenter }
+			modifiers={ [ restrictToVerticalAxis ] }
+		>
+			<StyledTable className={ `${ className } sortable-table` }>
+				<thead>
+					<tr>
+						{ columns.map( ( column, index ) => (
+							<th
+								key={ column.name }
+								{ ...getColumnProps(
+									column,
+									`sortable-table__column`
+								) }
+								colSpan={ index === 0 ? 2 : 1 }
+							>
+								{ column.label }
+							</th>
+						) ) }
+					</tr>
+				</thead>
+				{ FooterContent && (
+					<tfoot>
+						<tr>
+							<td colSpan={ columns.length + 1 }>
+								<FooterContent />
+							</td>
+						</tr>
+					</tfoot>
+				) }
+				<tbody>
+					<SortableContext
+						items={ items }
+						strategy={ verticalListSortingStrategy }
+					>
+						{ !! data.length ? (
+							data.map(
+								( row ) =>
+									row && (
+										<TableRow
+											key={ row.id }
+											id={ row.id }
+											className={ className }
+										>
+											{ columns.map( ( column ) => (
+												<td
+													key={ `${ row.id }-${ column.name }` }
+													{ ...getColumnProps(
+														column,
+														`sortable-table__column`
+													) }
+												>
+													{ column.renderCallback ? (
+														column.renderCallback(
+															row
+														)
+													) : (
+														<>
+															{ objectHasProp(
+																row,
+																column.name
+															) &&
+																row[
+																	column.name
+																] }
+														</>
+													) }
+												</td>
+											) ) }
+										</TableRow>
+									)
+							)
+						) : (
+							<tr>
+								<td colSpan={ columns.length + 1 }>
+									{ placeholder }
+								</td>
+							</tr>
+						) }
+					</SortableContext>
+				</tbody>
+			</StyledTable>
+		</DndContext>
+	);
+};
+
+export default SortableTable;