Enhancement/pickup location editor improvements (https://github.com/woocommerce/woocommerce-blocks/pull/7446)

* Hide form step descriptions when empty unless block has focus

* Make editor style match frontend

* Add links to settings in sidebar

* update sample costs

* phpcs

plugins/woocommerce-blocks/assets/js/blocks/checkout/form-step/editor.scss

@@ -4,8 +4,11 @@
 }
 .wc-block-components-checkout-step__description-placeholder {
 	opacity: 0.5;
+	display: none;
+	.is-selected & {
+		display: block;
+	}
 }
-
 .wc-block-components-checkout-step__title {
 	display: flex;
 	width: 100%;

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/edit.tsx

@@ -3,15 +3,16 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	PanelBody,
 	ToggleControl,
 	__experimentalRadio as Radio,
 	__experimentalRadioGroup as RadioGroup,
+	ExternalLink,
 } from '@wordpress/components';
 import { Icon, store, shipping } from '@wordpress/icons';
+import { ADMIN_URL, getSetting } from '@woocommerce/settings';
 import {
 	InspectorControls,
 	useBlockProps,
@@ -21,6 +22,7 @@ import { useShippingData } from '@woocommerce/base-context/hooks';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
+import ExternalLinkCard from '@woocommerce/editor-components/external-link-card';
 
 /**
  * Internal dependencies
@@ -238,6 +240,43 @@ export const Edit = ( {
 						}
 					/>
 				</PanelBody>
+				<PanelBody
+					title={ __(
+						'Shipping Methods',
+						'woo-gutenberg-products-block'
+					) }
+				>
+					<p className="wc-block-checkout__controls-text">
+						{ __(
+							'Methods can be made managed in your store settings.',
+							'woo-gutenberg-products-block'
+						) }
+					</p>
+					<ExternalLinkCard
+						key={ 'shipping_methods' }
+						href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=shipping` }
+						title={ __(
+							'Shipping',
+							'woo-gutenberg-products-block'
+						) }
+						description={ __(
+							'Manage your shipping zones, methods, and rates.',
+							'woo-gutenberg-products-block'
+						) }
+					/>
+					<ExternalLinkCard
+						key={ 'pickup_location' }
+						href={ `${ ADMIN_URL }admin.php?page=wc-settings&tab=shipping&section=pickup_location` }
+						title={ __(
+							'Local Pickup',
+							'woo-gutenberg-products-block'
+						) }
+						description={ __(
+							'Allow customers to choose a local pickup location during checkout.',
+							'woo-gutenberg-products-block'
+						) }
+					/>
+				</PanelBody>
 			</InspectorControls>
 			<RadioGroup
 				id="shipping-method"

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/style.scss

@@ -5,6 +5,7 @@
 	justify-content: space-between;
 }
 
+.edit-post-visual-editor .wc-block-checkout__shipping-method-option,
 .wc-block-checkout__shipping-method-option {
 	flex-grow: 1;
 	display: flex;
@@ -19,9 +20,19 @@
 	color: inherit;
 	background-color: transparent;
 	border: none;
+	box-shadow: none !important;
 	outline: 1px solid currentColor;
+	border-radius: 0 !important;
+	&.components-button:hover:not(:disabled),
+	&.components-button:focus:not(:disabled),
+	&:focus,
+	&:hover {
+		background-color: #d5d5d5;
+		border-color: #d5d5d5;
+		color: #333;
+	}
 	&.wc-block-checkout__shipping-method-option--selected {
-		outline-width: 2px;
+		outline: 3px solid currentColor;
 	}
 }
 

plugins/woocommerce-blocks/assets/js/previews/shipping-rates.ts

@@ -45,17 +45,39 @@ export const previewShippingRates: CartResponseShippingRate[] = [
 				currency_thousand_separator: ',',
 				currency_prefix: '$',
 				currency_suffix: '',
-				name: __( 'Free shipping', 'woo-gutenberg-products-block' ),
+				name: __(
+					'Flat rate shipping',
+					'woo-gutenberg-products-block'
+				),
 				description: '',
 				delivery_time: '',
-				price: '000',
+				price: '500',
 				taxes: '0',
-				rate_id: 'free_shipping:1',
+				rate_id: 'flat_rate:0',
 				instance_id: 0,
 				meta_data: [],
 				method_id: 'flat_rate',
 				selected: true,
 			},
+			{
+				currency_code: 'USD',
+				currency_symbol: '$',
+				currency_minor_unit: 2,
+				currency_decimal_separator: '.',
+				currency_thousand_separator: ',',
+				currency_prefix: '$',
+				currency_suffix: '',
+				name: __( 'Free shipping', 'woo-gutenberg-products-block' ),
+				description: '',
+				delivery_time: '',
+				price: '0',
+				taxes: '0',
+				rate_id: 'free_shipping:1',
+				instance_id: 0,
+				meta_data: [],
+				method_id: 'flat_rate',
+				selected: false,
+			},
 			{
 				currency_code: 'USD',
 				currency_symbol: '$',
@@ -67,7 +89,7 @@ export const previewShippingRates: CartResponseShippingRate[] = [
 				name: __( 'Local pickup', 'woo-gutenberg-products-block' ),
 				description: '',
 				delivery_time: '',
-				price: '200',
+				price: '0',
 				taxes: '0',
 				rate_id: 'pickup_location:1',
 				instance_id: 1,
@@ -95,7 +117,7 @@ export const previewShippingRates: CartResponseShippingRate[] = [
 				name: __( 'Local pickup', 'woo-gutenberg-products-block' ),
 				description: '',
 				delivery_time: '',
-				price: '200',
+				price: '0',
 				taxes: '0',
 				rate_id: 'pickup_location:2',
 				instance_id: 1,

plugins/woocommerce-blocks/src/BlockTypes/Checkout.php

@@ -256,6 +256,9 @@ class Checkout extends AbstractBlock {
 			$formatted_shipping_methods = array_reduce(
 				$shipping_methods,
 				function( $acc, $method ) {
+					if ( 'pickup_location' === $method->id ) {
+						return $acc;
+					}
 					if ( $method->supports( 'settings' ) ) {
 						$acc[] = [
 							'id'          => $method->id,

plugins/woocommerce-blocks/src/Shipping/PickupLocation.php

@@ -15,7 +15,7 @@ class PickupLocation extends WC_Shipping_Method {
 	 */
 	public function __construct() {
 		$this->id                 = 'pickup_location';
-		$this->method_title       = __( 'Pickup Locations', 'woo-gutenberg-products-block' );
+		$this->method_title       = __( 'Local Pickup', 'woo-gutenberg-products-block' );
 		$this->method_description = __( 'Allow customers to choose a local pickup location during checkout.', 'woo-gutenberg-products-block' );
 		$this->init();
 	}