Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Hide the shipping address form from Checkout Block in Editor and rename the Billing Address label when "Force shipping to the customer billing address" is enabled. (https://github.com/woocommerce/woocommerce-blocks/pull/7800) 

* Rename billing address labels and hide shipping address from the editor when Force shipping to the customer billing address is enabled
This commit is contained in:
Tarun Vijwani 2022-12-02 15:34:27 +04:00 committed by GitHub
parent e7d097be71
commit 24468ba212
8 changed files with 125 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/attributes.tsx
View File

@ -1,20 +1,18 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { BlockAttributes } from '@wordpress/blocks';
/**
* Internal dependencies
*/
import formStepAttributes from '../../form-step/attributes';
import { DEFAULT_TITLE, DEFAULT_DESCRIPTION } from './constants';
export default {
const attributes: BlockAttributes = {
...formStepAttributes( {
defaultTitle: __( 'Billing address', 'woo-gutenberg-products-block' ),
defaultDescription: __(
'Enter the billing address that matches your payment method.',
'woo-gutenberg-products-block'
),
defaultTitle: DEFAULT_TITLE,
defaultDescription: DEFAULT_DESCRIPTION,
} ),
className: {
type: 'string',
@ -28,3 +26,4 @@ export default {
},
},
};
export default attributes;

30
plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.tsx
View File

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { useMemo, useEffect, Fragment } from '@wordpress/element';
import { useMemo, useEffect, Fragment, useState } from '@wordpress/element';
import {
useCheckoutAddress,
useStoreEvents,
@ -39,10 +39,11 @@ const Block = ( {
setBillingAddress,
setShippingAddress,
setBillingPhone,
setShippingPhone,
forcedBillingAddress,
} = useCheckoutAddress();
const { dispatchCheckoutEvent } = useStoreEvents();
const { isEditor } = useEditorContext();
const { forcedBillingAddress } = useCheckoutAddress();
// Clears data if fields are hidden.
useEffect( () => {
if ( ! showPhoneField ) {
@ -50,6 +51,24 @@ const Block = ( {
}
}, [ showPhoneField, setBillingPhone ] );
const [ addressesSynced, setAddressesSynced ] = useState( false );
// Syncs shipping address with billing address if "Force shipping to the customer billing address" is enabled.
useEffect( () => {
if ( addressesSynced ) {
return;
}
if ( forcedBillingAddress ) {
setShippingAddress( billingAddress );
}
setAddressesSynced( true );
}, [
addressesSynced,
setShippingAddress,
billingAddress,
forcedBillingAddress,
] );
const addressFieldsConfig = useMemo( () => {
return {
company: {
@ -77,6 +96,7 @@ const Block = ( {
setBillingAddress( values );
if ( forcedBillingAddress ) {
setShippingAddress( values );
dispatchCheckoutEvent( 'set-shipping-address' );
}
dispatchCheckoutEvent( 'set-billing-address' );
} }
@ -97,6 +117,12 @@ const Block = ( {
dispatchCheckoutEvent( 'set-phone-number', {
step: 'billing',
} );
if ( forcedBillingAddress ) {
setShippingPhone( value );
dispatchCheckoutEvent( 'set-phone-number', {
step: 'shipping',
} );
}
} }
/>
) }

22
plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/constants.tsx Normal file
View File

@ -0,0 +1,22 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
export const DEFAULT_TITLE = __(
'Billing address',
'woo-gutenberg-products-block'
);
export const DEFAULT_DESCRIPTION = __(
'Enter the billing address that matches your payment method.',
'woo-gutenberg-products-block'
);
export const DEFAULT_FORCED_BILLING_TITLE = __(
'Billing and shipping address',
'woo-gutenberg-products-block'
);
export const DEFAULT_FORCED_BILLING_DESCRIPTION = __(
'Enter the billing and shipping address that matches your payment method.',
'woo-gutenberg-products-block'
);

20
plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx
View File

@ -5,7 +5,7 @@ import classnames from 'classnames';
import { useBlockProps } from '@wordpress/block-editor';
import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
import { innerBlockAreas } from '@woocommerce/blocks-checkout';
import { BlockAttributes } from '@wordpress/blocks';
/**
* Internal dependencies
*/
@ -19,6 +19,10 @@ import {
useCheckoutBlockControlsContext,
} from '../../context';
import Block from './block';
import {
getBillingAddresssBlockTitle,
getBillingAddresssBlockDescription,
} from './utils';
export const Edit = ( {
attributes,
@ -30,7 +34,7 @@ export const Edit = ( {
showStepNumber: boolean;
className: string;
};
setAttributes: ( attributes: Record< string, unknown > ) => void;
setAttributes: ( attributes: BlockAttributes ) => void;
} ): JSX.Element | null => {
const {
showCompanyField,
@ -41,11 +45,19 @@ export const Edit = ( {
} = useCheckoutBlockContext();
const { addressFieldControls: Controls } =
useCheckoutBlockControlsContext();
const { showBillingFields } = useCheckoutAddress();
const { showBillingFields, forcedBillingAddress } = useCheckoutAddress();
if ( ! showBillingFields ) {
if ( ! showBillingFields && ! forcedBillingAddress ) {
return null;
}
attributes.title = getBillingAddresssBlockTitle(
attributes.title,
forcedBillingAddress
);
attributes.description = getBillingAddresssBlockDescription(
attributes.description,
forcedBillingAddress
);
return (
<FormStepBlock

10
plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx
View File

@ -14,6 +14,10 @@ import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
import Block from './block';
import attributes from './attributes';
import { useCheckoutBlockContext } from '../../context';
import {
getBillingAddresssBlockTitle,
getBillingAddresssBlockDescription,
} from './utils';
const FrontendBlock = ( {
title,
@ -43,7 +47,11 @@ const FrontendBlock = ( {
if ( ! showBillingFields && ! forcedBillingAddress ) {
return null;
}
title = getBillingAddresssBlockTitle( title, forcedBillingAddress );
description = getBillingAddresssBlockDescription(
description,
forcedBillingAddress
);
return (
<FormStep
id="billing-fields"

1
plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/index.tsx
View File

@ -3,7 +3,6 @@
*/
import { Icon, mapMarker } from '@wordpress/icons';
import { registerBlockType } from '@wordpress/blocks';
/**
* Internal dependencies
*/

38
plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/utils.tsx Normal file
View File

@ -0,0 +1,38 @@
/**
* Internal dependencies
*/
import {
DEFAULT_TITLE,
DEFAULT_DESCRIPTION,
DEFAULT_FORCED_BILLING_DESCRIPTION,
DEFAULT_FORCED_BILLING_TITLE,
} from './constants';
export const getBillingAddresssBlockTitle = (
title: string,
forcedBillingAddress: boolean
): string => {
if ( forcedBillingAddress ) {
// Returns default forced billing title when forced billing address is enabled and there is no title set.
return title === DEFAULT_TITLE ? DEFAULT_FORCED_BILLING_TITLE : title;
}
// Returns default title when forced billing address is disabled and there is no title set.
return title === DEFAULT_FORCED_BILLING_TITLE ? DEFAULT_TITLE : title;
};
export const getBillingAddresssBlockDescription = (
description: string,
forcedBillingAddress: boolean
): string => {
if ( forcedBillingAddress ) {
// Returns default forced billing description when forced billing address is enabled and there is no description set.
return description === DEFAULT_DESCRIPTION
? DEFAULT_FORCED_BILLING_DESCRIPTION
: description;
}
// Returns default description when forced billing address is disabled and there is no description set.
return description === DEFAULT_FORCED_BILLING_DESCRIPTION
? DEFAULT_DESCRIPTION
: description;
};

8
plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/edit.tsx
View File

@ -4,7 +4,7 @@
import classnames from 'classnames';
import { useBlockProps } from '@wordpress/block-editor';
import { innerBlockAreas } from '@woocommerce/blocks-checkout';
import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
/**
* Internal dependencies
*/
@ -30,7 +30,7 @@ export const Edit = ( {
className: string;
};
setAttributes: ( attributes: Record< string, unknown > ) => void;
} ): JSX.Element => {
} ): JSX.Element | null => {
const {
showCompanyField,
showApartmentField,
@ -40,6 +40,10 @@ export const Edit = ( {
} = useCheckoutBlockContext();
const { addressFieldControls: Controls } =
useCheckoutBlockControlsContext();
const { showShippingFields } = useCheckoutAddress();
if ( ! showShippingFields ) {
return null;
}
return (
<FormStepBlock
setAttributes={ setAttributes }