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

Editor: Add feedback box to the Cart & Checkout Inner Blocks #6881

Merged
merged 3 commits into from
Aug 11, 2022
Merged

Editor: Add feedback box to the Cart & Checkout Inner Blocks #6881

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1ba9520
Show "Feedback prompt" for all inner blocks
tarhi-saad Aug 11, 2022
7d5f9a5
Fix the "feedback" notice position for these blocks
tarhi-saad Aug 11, 2022
51e92ae
Tidy up the address-fields hoc
tarhi-saad Aug 11, 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
154 changes: 154 additions & 0 deletions assets/js/blocks/cart-checkout-shared/address-fields/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { createHigherOrderComponent } from '@wordpress/compose';
import { InspectorControls } from '@wordpress/block-editor';
import {
PanelBody,
ToggleControl,
CheckboxControl,
} from '@wordpress/components';
import { addFilter, hasFilter } from '@wordpress/hooks';
import { useSelect } from '@wordpress/data';
import { isString } from '@woocommerce/types';

interface Attributes extends Record< string, boolean | number > {
allowCreateAccount: boolean;
hasDarkControls: boolean;
showCompanyField: boolean;
showApartmentField: boolean;
showPhoneField: boolean;
requireCompanyField: boolean;
requirePhoneField: boolean;
// Deprecated.
showOrderNotes: boolean;
showPolicyLinks: boolean;
showReturnToCart: boolean;
showRateAfterTaxName: boolean;
cartPageId: number;
}

const withAddressFields = createHigherOrderComponent(
( BlockEdit ) => ( props ) => {
const { clientId } = props;
const blockName = useSelect( ( select ) => {
return select( 'core/block-editor' ).getBlockName( clientId );
} );
const blocksWithAddressFields = [
'woocommerce/checkout-shipping-address',
'woocommerce/checkout-billing-address',
'woocommerce/checkout-fields-block',
];

if (
isString( blockName ) &&
! blocksWithAddressFields.includes( blockName )
) {
return <BlockEdit { ...props } />;
}

const { attributes, setAttributes } = props;
const {
showCompanyField,
requireCompanyField,
showApartmentField,
showPhoneField,
requirePhoneField,
} = attributes;

const toggleAttribute = ( key: keyof Attributes ): void => {
const newAttributes = {} as Partial< Attributes >;
newAttributes[ key ] = ! ( attributes[ key ] as boolean );
setAttributes( newAttributes );
};

return (
<>
<InspectorControls>
<PanelBody
title={ __(
'Address Fields',
'woo-gutenberg-products-block'
) }
>
<p className="wc-block-checkout__controls-text">
{ __(
'Show or hide fields in the checkout address forms.',
'woo-gutenberg-products-block'
) }
</p>
<ToggleControl
label={ __(
'Company',
'woo-gutenberg-products-block'
) }
checked={ showCompanyField }
onChange={ () =>
toggleAttribute( 'showCompanyField' )
}
/>
{ showCompanyField && (
<CheckboxControl
label={ __(
'Require company name?',
'woo-gutenberg-products-block'
) }
checked={ requireCompanyField }
onChange={ () =>
toggleAttribute( 'requireCompanyField' )
}
className="components-base-control--nested"
/>
) }
<ToggleControl
label={ __(
'Apartment, suite, etc.',
'woo-gutenberg-products-block'
) }
checked={ showApartmentField }
onChange={ () =>
toggleAttribute( 'showApartmentField' )
}
/>
<ToggleControl
label={ __(
'Phone',
'woo-gutenberg-products-block'
) }
checked={ showPhoneField }
onChange={ () =>
toggleAttribute( 'showPhoneField' )
}
/>
{ showPhoneField && (
<CheckboxControl
label={ __(
'Require phone number?',
'woo-gutenberg-products-block'
) }
checked={ requirePhoneField }
onChange={ () =>
toggleAttribute( 'requirePhoneField' )
}
className="components-base-control--nested"
/>
) }
</PanelBody>
</InspectorControls>

<BlockEdit { ...props } />
</>
);
},
'withAddressFields'
);

if ( ! hasFilter( 'editor.BlockEdit', 'woocommerce/add/address-fields' ) ) {
addFilter(
'editor.BlockEdit',
'woocommerce/add/address-fields',
withAddressFields,
9
);
}
1 change: 1 addition & 0 deletions assets/js/blocks/cart-checkout-shared/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@ export * from './use-view-switcher';
export * from './default-notice';
export * from './sidebar-notices';
export * from './block-settings';
export * from './address-fields';
11 changes: 4 additions & 7 deletions assets/js/blocks/checkout/context.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,11 @@ export type CheckoutBlockContextProps = {
};

export type CheckoutBlockControlsContextProps = {
addressFieldControls: () => JSX.Element | null;
accountControls: () => JSX.Element | null;
};

export const CheckoutBlockContext = createContext< CheckoutBlockContextProps >(
{
export const CheckoutBlockContext: React.Context< CheckoutBlockContextProps > =
createContext< CheckoutBlockContextProps >( {
allowCreateAccount: false,
showCompanyField: false,
showApartmentField: false,
Expand All @@ -38,12 +37,10 @@ export const CheckoutBlockContext = createContext< CheckoutBlockContextProps >(
showReturnToCart: true,
cartPageId: 0,
showRateAfterTaxName: false,
}
);
} );

export const CheckoutBlockControlsContext =
export const CheckoutBlockControlsContext: React.Context< CheckoutBlockControlsContextProps > =
createContext< CheckoutBlockControlsContextProps >( {
addressFieldControls: () => null,
accountControls: () => null,
} );

Expand Down
71 changes: 1 addition & 70 deletions assets/js/blocks/checkout/edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,7 @@ import {
previewCart,
previewSavedPaymentMethods,
} from '@woocommerce/resource-previews';
import {
PanelBody,
ToggleControl,
CheckboxControl,
} from '@wordpress/components';
import { PanelBody, ToggleControl } from '@wordpress/components';
import type { TemplateArray } from '@wordpress/blocks';
/**
* Internal dependencies
Expand Down Expand Up @@ -68,12 +64,6 @@ export const Edit = ( {
[ 'woocommerce/checkout-totals-block', {}, [] ],
] as TemplateArray;

const toggleAttribute = ( key: keyof Attributes ): void => {
const newAttributes = {} as Partial< Attributes >;
newAttributes[ key ] = ! ( attributes[ key ] as boolean );
setAttributes( newAttributes );
};

const accountControls = (): JSX.Element => (
<InspectorControls>
<PanelBody
Expand All @@ -98,64 +88,6 @@ export const Edit = ( {
</InspectorControls>
);

const addressFieldControls = (): JSX.Element => (
<InspectorControls>
<PanelBody
title={ __( 'Address Fields', 'woo-gutenberg-products-block' ) }
>
<p className="wc-block-checkout__controls-text">
{ __(
'Show or hide fields in the checkout address forms.',
'woo-gutenberg-products-block'
) }
</p>
<ToggleControl
label={ __( 'Company', 'woo-gutenberg-products-block' ) }
checked={ showCompanyField }
onChange={ () => toggleAttribute( 'showCompanyField' ) }
/>
{ showCompanyField && (
<CheckboxControl
label={ __(
'Require company name?',
'woo-gutenberg-products-block'
) }
checked={ requireCompanyField }
onChange={ () =>
toggleAttribute( 'requireCompanyField' )
}
className="components-base-control--nested"
/>
) }
<ToggleControl
label={ __(
'Apartment, suite, etc.',
'woo-gutenberg-products-block'
) }
checked={ showApartmentField }
onChange={ () => toggleAttribute( 'showApartmentField' ) }
/>
<ToggleControl
label={ __( 'Phone', 'woo-gutenberg-products-block' ) }
checked={ showPhoneField }
onChange={ () => toggleAttribute( 'showPhoneField' ) }
/>
{ showPhoneField && (
<CheckboxControl
label={ __(
'Require phone number?',
'woo-gutenberg-products-block'
) }
checked={ requirePhoneField }
onChange={ () =>
toggleAttribute( 'requirePhoneField' )
}
className="components-base-control--nested"
/>
) }
</PanelBody>
</InspectorControls>
);
const blockProps = useBlockPropsWithLocking();
return (
<div { ...blockProps }>
Expand All @@ -176,7 +108,6 @@ export const Edit = ( {
>
<CheckoutBlockControlsContext.Provider
value={ {
addressFieldControls,
accountControls,
} }
>
Expand Down
8 changes: 1 addition & 7 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 @@ -14,10 +14,7 @@ import {
AdditionalFields,
AdditionalFieldsContent,
} from '../../form-step';
import {
useCheckoutBlockContext,
useCheckoutBlockControlsContext,
} from '../../context';
import { useCheckoutBlockContext } from '../../context';
import Block from './block';

export const Edit = ( {
Expand All @@ -39,8 +36,6 @@ export const Edit = ( {
showPhoneField,
requirePhoneField,
} = useCheckoutBlockContext();
const { addressFieldControls: Controls } =
useCheckoutBlockControlsContext();
const { showBillingFields } = useCheckoutAddress();

if ( ! showBillingFields ) {
Expand All @@ -56,7 +51,6 @@ export const Edit = ( {
attributes?.className
) }
>
<Controls />
<Block
showCompanyField={ showCompanyField }
showApartmentField={ showApartmentField }
Expand Down
5 changes: 0 additions & 5 deletions assets/js/blocks/checkout/inner-blocks/checkout-fields-block/edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import type { TemplateArray } from '@wordpress/blocks';
/**
* Internal dependencies
*/
import { useCheckoutBlockControlsContext } from '../../context';
import {
useForcedLayout,
getAllowedBlocks,
Expand All @@ -34,9 +33,6 @@ export const Edit = ( {
} );
const allowedBlocks = getAllowedBlocks( innerBlockAreas.CHECKOUT_FIELDS );

const { addressFieldControls: Controls } =
useCheckoutBlockControlsContext();

const defaultTemplate = [
[ 'woocommerce/checkout-express-payment-block', {}, [] ],
[ 'woocommerce/checkout-contact-information-block', {}, [] ],
Expand All @@ -57,7 +53,6 @@ export const Edit = ( {

return (
<Main { ...blockProps }>
<Controls />
<form className="wc-block-components-form wc-block-checkout__form">
<InnerBlocks
allowedBlocks={ allowedBlocks }
Expand Down
9 changes: 2 additions & 7 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 @@ -13,10 +13,7 @@ import {
AdditionalFields,
AdditionalFieldsContent,
} from '../../form-step';
import {
useCheckoutBlockContext,
useCheckoutBlockControlsContext,
} from '../../context';
import { useCheckoutBlockContext } from '../../context';
import Block from './block';

export const Edit = ( {
Expand All @@ -38,8 +35,7 @@ export const Edit = ( {
showPhoneField,
requirePhoneField,
} = useCheckoutBlockContext();
const { addressFieldControls: Controls } =
useCheckoutBlockControlsContext();

return (
<FormStepBlock
setAttributes={ setAttributes }
Expand All @@ -49,7 +45,6 @@ export const Edit = ( {
attributes?.className
) }
>
<Controls />
<Block
showCompanyField={ showCompanyField }
showApartmentField={ showApartmentField }
Expand Down
Loading