Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

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. #7800

Merged
merged 5 commits into from
Dec 2, 2022
Merged

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. #7800

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1bc2100
Rename billing address labels and hide shipping address from editor w…
Dec 1, 2022
52be2bd
Move title and description logic to a separate function and add the d…
Dec 1, 2022
c5775f4
Add BlockAttributes type and fix comments
Dec 1, 2022
2f3ef34
Add space in a comment
Dec 1, 2022
78aa56b
Merge branch 'trunk' into fix/7513-billing-address-lable-for-force-bi…
Dec 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 4 additions & 11 deletions assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/attributes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,13 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import formStepAttributes from '../../form-step/attributes';
import { DEFAULT_TITLE, DEFAULT_DESCRIPTION } from './constants';

export default {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How come we removed this and now only export a named const?

Should we add export default attributes at the bottom of this file?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I missed that. This is fixed now. Thank you!

export const attributes: Record< string, Record< string, unknown > > = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we use the Gutenberg type BlockAttributes here?

You'd need to import { BlockAttributes } from '@wordpress/blocks';

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that's a better way to define types. Added the BlockAttributes type. 👍

...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',
Expand Down
29 changes: 27 additions & 2 deletions assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { useMemo, useEffect, Fragment } from '@wordpress/element';
import { useMemo, useEffect, Fragment, useState } from '@wordpress/element';
import {
useCheckoutAddress,
useStoreEvents,
Expand Down Expand Up @@ -39,17 +39,35 @@ 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 ) {
setBillingPhone( '' );
}
}, [ 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: {
Expand Down Expand Up @@ -77,6 +95,7 @@ const Block = ( {
setBillingAddress( values );
if ( forcedBillingAddress ) {
setShippingAddress( values );
dispatchCheckoutEvent( 'set-shipping-address' );
}
dispatchCheckoutEvent( 'set-billing-address' );
} }
Expand All @@ -97,6 +116,12 @@ const Block = ( {
dispatchCheckoutEvent( 'set-phone-number', {
step: 'billing',
} );
if ( forcedBillingAddress ) {
setShippingPhone( value );
dispatchCheckoutEvent( 'set-phone-number', {
step: 'shipping',
} );
}
} }
/>
) }
Expand Down
22 changes: 22 additions & 0 deletions assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/constants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
);
31 changes: 27 additions & 4 deletions assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import classnames from 'classnames';
import { useBlockProps } from '@wordpress/block-editor';
import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
import { innerBlockAreas } from '@woocommerce/blocks-checkout';

/**
* Internal dependencies
*/
Expand All @@ -19,6 +18,12 @@ import {
useCheckoutBlockControlsContext,
} from '../../context';
import Block from './block';
import {
DEFAULT_TITLE,
DEFAULT_DESCRIPTION,
DEFAULT_FORCED_BILLING_DESCRIPTION,
DEFAULT_FORCED_BILLING_TITLE,
} from './constants';

export const Edit = ( {
attributes,
Expand All @@ -41,12 +46,30 @@ export const Edit = ( {
} = useCheckoutBlockContext();
const { addressFieldControls: Controls } =
useCheckoutBlockControlsContext();
const { showBillingFields } = useCheckoutAddress();
const { showBillingFields, forcedBillingAddress } = useCheckoutAddress();

if ( ! showBillingFields ) {
if ( ! showBillingFields && ! forcedBillingAddress ) {
return null;
}

if ( forcedBillingAddress ) {
attributes.title =
attributes.title === DEFAULT_TITLE
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This ternary operator is a little hard to reason with, maybe adding comments would be useful here.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would also consider if we need the if/else structure here, or if it would be better to move this logic into a separate function, remove the use of ternary operators and make this easier to read, what do you think?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's actually a good idea! I have moved the logic to a different function and added the comments for better understanding. Thank you! 🙂

? DEFAULT_FORCED_BILLING_TITLE
: attributes.title;
attributes.description =
attributes.description === DEFAULT_DESCRIPTION
? DEFAULT_FORCED_BILLING_DESCRIPTION
: attributes.description;
} else {
attributes.title =
attributes.title === DEFAULT_FORCED_BILLING_TITLE
? DEFAULT_TITLE
: attributes.title;
attributes.description =
attributes.description === DEFAULT_FORCED_BILLING_DESCRIPTION
? DEFAULT_DESCRIPTION
: attributes.description;
}
return (
<FormStepBlock
setAttributes={ setAttributes }
Expand Down
22 changes: 20 additions & 2 deletions assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,14 @@ import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
* Internal dependencies
*/
import Block from './block';
import attributes from './attributes';
import { attributes } from './attributes';
import { useCheckoutBlockContext } from '../../context';
import {
DEFAULT_TITLE,
DEFAULT_DESCRIPTION,
DEFAULT_FORCED_BILLING_DESCRIPTION,
DEFAULT_FORCED_BILLING_TITLE,
} from './constants';

const FrontendBlock = ( {
title,
Expand Down Expand Up @@ -43,7 +49,19 @@ const FrontendBlock = ( {
if ( ! showBillingFields && ! forcedBillingAddress ) {
return null;
}

if ( forcedBillingAddress ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please see my comment about if/else and ternary operators in the edit.tsx file and consider if the same applies here.

title = title === DEFAULT_TITLE ? DEFAULT_FORCED_BILLING_TITLE : title;
description =
description === DEFAULT_DESCRIPTION
? DEFAULT_FORCED_BILLING_DESCRIPTION
: description;
} else {
title = title === DEFAULT_FORCED_BILLING_TITLE ? DEFAULT_TITLE : title;
description =
description === DEFAULT_FORCED_BILLING_DESCRIPTION
? DEFAULT_DESCRIPTION
: description;
}
return (
<FormStep
id="billing-fields"
Expand Down
3 changes: 1 addition & 2 deletions assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,11 @@
*/
import { Icon, mapMarker } from '@wordpress/icons';
import { registerBlockType } from '@wordpress/blocks';

/**
* Internal dependencies
*/
import { Edit, Save } from './edit';
import attributes from './attributes';
import { attributes } from './attributes';

registerBlockType( 'woocommerce/checkout-billing-address-block', {
icon: {
Expand Down
8 changes: 6 additions & 2 deletions assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand All @@ -30,7 +30,7 @@ export const Edit = ( {
className: string;
};
setAttributes: ( attributes: Record< string, unknown > ) => void;
} ): JSX.Element => {
} ): JSX.Element | null => {
const {
showCompanyField,
showApartmentField,
Expand All @@ -40,6 +40,10 @@ export const Edit = ( {
} = useCheckoutBlockContext();
const { addressFieldControls: Controls } =
useCheckoutBlockControlsContext();
const { showShippingFields } = useCheckoutAddress();
if ( ! showShippingFields ) {
return null;
}
return (
<FormStepBlock
setAttributes={ setAttributes }
Expand Down