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
This commit is contained in:
Mike Jolley
Nadir Seghir
parent
bc2a52b85d
commit
3d0109f1dc
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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§ion=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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue