This reverts commit d005dbd2cf.
This commit is contained in:
Alex Florisca 2022-04-05 11:14:32 +01:00 committed by GitHub
parent 10793e8e18
commit e15d516163
92 changed files with 164 additions and 224 deletions

View File

@ -24,7 +24,7 @@ import {
import { import {
CheckoutExpressPayment, CheckoutExpressPayment,
SavedPaymentMethodOptions, SavedPaymentMethodOptions,
} from '../../../../../../blocks/shared/payment-methods'; } from '../../../../../../blocks/cart-checkout/payment-methods';
import { defaultCartState } from '../../../../../../data/default-states'; import { defaultCartState } from '../../../../../../data/default-states';
jest.mock( '@woocommerce/settings', () => { jest.mock( '@woocommerce/settings', () => {

View File

@ -17,7 +17,7 @@ import type { TemplateArray } from '@wordpress/blocks';
/** /**
* Internal dependencies * Internal dependencies
*/ */
import { useViewSwitcher, useForcedLayout } from '../../shared'; import { useViewSwitcher, useForcedLayout } from '../shared';
import { MiniCartInnerBlocksStyle } from './inner-blocks-style'; import { MiniCartInnerBlocksStyle } from './inner-blocks-style';
import './editor.scss'; import './editor.scss';

View File

@ -10,7 +10,7 @@ import { previewCart } from '@woocommerce/resource-previews';
/** /**
* Internal dependencies * Internal dependencies
*/ */
import { useForcedLayout, getAllowedBlocks } from '../../../../shared'; import { useForcedLayout, getAllowedBlocks } from '../../../shared';
export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => { export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
const blockProps = useBlockProps(); const blockProps = useBlockProps();

View File

@ -31,9 +31,9 @@ import classnames from 'classnames';
* Internal dependencies * Internal dependencies
*/ */
import QuantityBadge from './quantity-badge'; import QuantityBadge from './quantity-badge';
import { MiniCartContentsBlock } from './mini-cart-contents/block'; import { MiniCartContentsBlock } from '../mini-cart-contents/block';
import './style.scss'; import './style.scss';
import { blockName } from './mini-cart-contents/attributes'; import { blockName } from '../mini-cart-contents/attributes';
interface Props { interface Props {
isInitiallyOpen?: boolean; isInitiallyOpen?: boolean;

View File

@ -19,7 +19,7 @@ import userEvent from '@testing-library/user-event';
* Internal dependencies * Internal dependencies
*/ */
import Block from '../block'; import Block from '../block';
import { defaultCartState } from '../../../data/default-states'; import { defaultCartState } from '../../../../data/default-states';
const MiniCartBlock = ( props ) => ( const MiniCartBlock = ( props ) => (
<SlotFillProvider> <SlotFillProvider>

View File

@ -3,7 +3,7 @@
*/ */
import classnames from 'classnames'; import classnames from 'classnames';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { CartResponseItem } from '@woocommerce/types'; import { CartResponseItem } from '@woocommerce/type-defs/cart-response';
import { createRef, useEffect, useRef } from '@wordpress/element'; import { createRef, useEffect, useRef } from '@wordpress/element';
import type { RefObject } from 'react'; import type { RefObject } from 'react';

View File

@ -36,7 +36,7 @@ import {
useViewSwitcher, useViewSwitcher,
useBlockPropsWithLocking, useBlockPropsWithLocking,
useForcedLayout, useForcedLayout,
} from '../shared'; } from '../cart-checkout/shared';
import { CartBlockContext } from './context'; import { CartBlockContext } from './context';
// This is adds a class to body to signal if the selected block is locked // This is adds a class to body to signal if the selected block is locked

View File

@ -7,7 +7,7 @@ import classnames from 'classnames';
/** /**
* Internal dependencies * Internal dependencies
*/ */
import { CartExpressPayment } from '../../../shared/payment-methods'; import { CartExpressPayment } from '../../../cart-checkout/payment-methods';
const Block = ( { className }: { className: string } ): JSX.Element | null => { const Block = ( { className }: { className: string } ): JSX.Element | null => {
const { cartNeedsPayment } = useStoreCart(); const { cartNeedsPayment } = useStoreCart();

View File

@ -8,7 +8,10 @@ import type { TemplateArray } from '@wordpress/blocks';
/** /**
* Internal dependencies * Internal dependencies
*/ */
import { useForcedLayout, getAllowedBlocks } from '../../../shared'; import {
useForcedLayout,
getAllowedBlocks,
} from '../../../cart-checkout/shared';
export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => { export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
const blockProps = useBlockProps( { className: 'wc-block-cart__main' } ); const blockProps = useBlockProps( { className: 'wc-block-cart__main' } );

View File

@ -1,18 +0,0 @@
/**
* External dependencies
*/
import { getSetting } from '@woocommerce/settings';
export default {
isShippingCalculatorEnabled: {
type: 'boolean',
default: getSetting( 'isShippingCalculatorEnabled', true ),
},
lock: {
type: 'object',
default: {
move: false,
remove: true,
},
},
};

View File

@ -1,125 +0,0 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import {
TotalsCoupon,
TotalsDiscount,
TotalsFooterItem,
TotalsShipping,
} from '@woocommerce/base-components/cart-checkout';
import {
Subtotal,
TotalsFees,
TotalsTaxes,
TotalsWrapper,
ExperimentalOrderMeta,
ExperimentalDiscountsMeta,
} from '@woocommerce/blocks-checkout';
import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
import {
useStoreCartCoupons,
useStoreCart,
} from '@woocommerce/base-context/hooks';
import { getSetting } from '@woocommerce/settings';
import Title from '@woocommerce/base-components/title';
/**
* Internal dependencies
*/
const Block = ( {
className,
showRateAfterTaxName = false,
isShippingCalculatorEnabled = true,
}: {
className: string;
showRateAfterTaxName: boolean;
isShippingCalculatorEnabled: boolean;
} ): JSX.Element => {
const { cartFees, cartTotals, cartNeedsShipping } = useStoreCart();
const {
applyCoupon,
removeCoupon,
isApplyingCoupon,
isRemovingCoupon,
appliedCoupons,
} = useStoreCartCoupons();
const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
// Prepare props to pass to the ExperimentalOrderMeta slot fill.
// We need to pluck out receiveCart.
// eslint-disable-next-line no-unused-vars
const { extensions, receiveCart, ...cart } = useStoreCart();
const slotFillProps = {
extensions,
cart,
context: 'woocommerce/cart',
};
const discountsSlotFillProps = {
extensions,
cart,
context: 'woocommerce/cart',
};
return (
<div className={ className }>
<Title headingLevel="2" className="wc-block-cart__totals-title">
{ __( 'Cart totals', 'woo-gutenberg-products-block' ) }
</Title>
<TotalsWrapper>
<Subtotal currency={ totalsCurrency } values={ cartTotals } />
<TotalsFees currency={ totalsCurrency } cartFees={ cartFees } />
<TotalsDiscount
cartCoupons={ appliedCoupons }
currency={ totalsCurrency }
isRemovingCoupon={ isRemovingCoupon }
removeCoupon={ removeCoupon }
values={ cartTotals }
/>
</TotalsWrapper>
{ getSetting( 'couponsEnabled', true ) && (
<TotalsWrapper>
<TotalsCoupon
onSubmit={ applyCoupon }
isLoading={ isApplyingCoupon }
/>
</TotalsWrapper>
) }
<ExperimentalDiscountsMeta.Slot { ...discountsSlotFillProps } />
{ cartNeedsShipping && (
<TotalsWrapper>
<TotalsShipping
showCalculator={ isShippingCalculatorEnabled }
showRateSelector={ true }
values={ cartTotals }
currency={ totalsCurrency }
/>
</TotalsWrapper>
) }
{ ! getSetting( 'displayCartPricesIncludingTax', false ) &&
parseInt( cartTotals.total_tax, 10 ) > 0 && (
<TotalsWrapper>
<TotalsTaxes
showRateAfterTaxName={ showRateAfterTaxName }
currency={ totalsCurrency }
values={ cartTotals }
/>
</TotalsWrapper>
) }
<TotalsWrapper>
<TotalsFooterItem
currency={ totalsCurrency }
values={ cartTotals }
/>
</TotalsWrapper>
<ExperimentalOrderMeta.Slot { ...slotFillProps } />
</div>
);
};
export default Block;

View File

@ -12,7 +12,10 @@ import { useStoreCart } from '@woocommerce/base-context/hooks';
/** /**
* Internal dependencies * Internal dependencies
*/ */
import { useForcedLayout, getAllowedBlocks } from '../../../shared'; import {
useForcedLayout,
getAllowedBlocks,
} from '../../../cart-checkout/shared';
import { OrderMetaSlotFill } from './slotfills'; import { OrderMetaSlotFill } from './slotfills';
export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => { export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {

View File

@ -10,7 +10,10 @@ import type { TemplateArray } from '@wordpress/blocks';
* Internal dependencies * Internal dependencies
*/ */
import './style.scss'; import './style.scss';
import { useForcedLayout, getAllowedBlocks } from '../../../shared'; import {
useForcedLayout,
getAllowedBlocks,
} from '../../../cart-checkout/shared';
export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => { export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
const blockProps = useBlockProps( { className: 'wc-block-cart__sidebar' } ); const blockProps = useBlockProps( { className: 'wc-block-cart__sidebar' } );

View File

@ -11,7 +11,10 @@ import { SHOP_URL } from '@woocommerce/block-settings';
/** /**
* Internal dependencies * Internal dependencies
*/ */
import { useForcedLayout, getAllowedBlocks } from '../../../shared'; import {
useForcedLayout,
getAllowedBlocks,
} from '../../../cart-checkout/shared';
import iconDataUri from './icon-data-uri.js'; import iconDataUri from './icon-data-uri.js';
import './style.scss'; import './style.scss';

View File

@ -11,7 +11,10 @@ import { useEditorContext } from '@woocommerce/base-context';
/** /**
* Internal dependencies * Internal dependencies
*/ */
import { useForcedLayout, getAllowedBlocks } from '../../../shared'; import {
useForcedLayout,
getAllowedBlocks,
} from '../../../cart-checkout/shared';
import './editor.scss'; import './editor.scss';
import { useCartBlockContext } from '../../context'; import { useCartBlockContext } from '../../context';

View File

@ -5,118 +5,171 @@ import { lazy } from '@wordpress/element';
import { WC_BLOCKS_BUILD_URL } from '@woocommerce/block-settings'; import { WC_BLOCKS_BUILD_URL } from '@woocommerce/block-settings';
import { registerCheckoutBlock } from '@woocommerce/blocks-checkout'; import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
/**
* Internal dependencies
*/
import metadata from './component-metadata';
// Modify webpack publicPath at runtime based on location of WordPress Plugin. // Modify webpack publicPath at runtime based on location of WordPress Plugin.
// eslint-disable-next-line no-undef,camelcase // eslint-disable-next-line no-undef,camelcase
__webpack_public_path__ = WC_BLOCKS_BUILD_URL; __webpack_public_path__ = WC_BLOCKS_BUILD_URL;
/**
* Internal dependencies
*/
import filledCartMetadata from './filled-cart-block/block.json';
import emptyCartMetadata from './empty-cart-block/block.json';
import cartItemsMetadata from './cart-items-block/block.json';
import cartExpressPaymentMetadata from './cart-express-payment-block/block.json';
import cartLineItemsMetadata from './cart-line-items-block/block.json';
import cartOrderSummaryMetadata from './cart-order-summary-block/block.json';
import cartTotalsMetadata from './cart-totals-block/block.json';
import cartProceedToCheckoutMetadata from './proceed-to-checkout-block/block.json';
import cartAcceptedPaymentMethodsMetadata from './cart-accepted-payment-methods-block/block.json';
registerCheckoutBlock( { registerCheckoutBlock( {
metadata: filledCartMetadata, metadata: metadata.FILLED_CART,
component: lazy( () => component: lazy( () =>
import( import(
/* webpackChunkName: "cart-blocks/filled-cart" */ './filled-cart-block/frontend' /* webpackChunkName: "cart-blocks/filled-cart" */
'./filled-cart-block/frontend'
) )
), ),
} ); } );
registerCheckoutBlock( { registerCheckoutBlock( {
metadata: emptyCartMetadata, metadata: metadata.EMPTY_CART,
component: lazy( () => component: lazy( () =>
import( import(
/* webpackChunkName: "cart-blocks/empty-cart" */ './empty-cart-block/frontend' /* webpackChunkName: "cart-blocks/empty-cart" */
'./empty-cart-block/frontend'
) )
), ),
} ); } );
registerCheckoutBlock( { registerCheckoutBlock( {
metadata: filledCartMetadata, metadata: metadata.CART_ITEMS,
component: lazy( () => component: lazy( () =>
import( import(
/* webpackChunkName: "cart-blocks/filled-cart" */ './filled-cart-block/frontend' /* webpackChunkName: "cart-blocks/cart-items" */
'./cart-items-block/frontend'
) )
), ),
} ); } );
registerCheckoutBlock( { registerCheckoutBlock( {
metadata: emptyCartMetadata, metadata: metadata.CART_LINE_ITEMS,
component: lazy( () => component: lazy( () =>
import( import(
/* webpackChunkName: "cart-blocks/empty-cart" */ './empty-cart-block/frontend' /* webpackChunkName: "cart-blocks/cart-line-items" */
'./cart-line-items-block/frontend'
) )
), ),
} ); } );
registerCheckoutBlock( { registerCheckoutBlock( {
metadata: cartItemsMetadata, metadata: metadata.CART_TOTALS,
component: lazy( () => component: lazy( () =>
import( import(
/* webpackChunkName: "cart-blocks/items" */ './cart-items-block/frontend' /* webpackChunkName: "cart-blocks/cart-totals" */
'./cart-totals-block/frontend'
) )
), ),
} ); } );
registerCheckoutBlock( { registerCheckoutBlock( {
metadata: cartLineItemsMetadata, metadata: metadata.CART_EXPRESS_PAYMENT,
component: lazy( () => component: lazy( () =>
import( import(
/* webpackChunkName: "cart-blocks/line-items" */ './cart-line-items-block/block' /* webpackChunkName: "cart-blocks/cart-express-payment" */
'./cart-express-payment-block/frontend'
) )
), ),
} ); } );
registerCheckoutBlock( { registerCheckoutBlock( {
metadata: cartTotalsMetadata, metadata: metadata.PROCEED_TO_CHECKOUT,
component: lazy( () => component: lazy( () =>
import( import(
/* webpackChunkName: "cart-blocks/totals" */ './cart-totals-block/frontend' /* webpackChunkName: "cart-blocks/proceed-to-checkout" */
'./proceed-to-checkout-block/frontend'
) )
), ),
} ); } );
registerCheckoutBlock( { registerCheckoutBlock( {
metadata: cartOrderSummaryMetadata, metadata: metadata.CART_ACCEPTED_PAYMENT_METHODS,
component: lazy( () => component: lazy( () =>
import( import(
/* webpackChunkName: "cart-blocks/order-summary" */ './cart-order-summary-block/frontend' /* webpackChunkName: "cart-blocks/cart-accepted-payment-methods" */
'./cart-accepted-payment-methods-block/frontend'
) )
), ),
} ); } );
registerCheckoutBlock( { registerCheckoutBlock( {
metadata: cartExpressPaymentMetadata, metadata: metadata.CART_ORDER_SUMMARY,
component: lazy( () => component: lazy( () =>
import( import(
/* webpackChunkName: "cart-blocks/express-payment" */ './cart-express-payment-block/block' /* webpackChunkName: "cart-blocks/cart-order-summary" */
'./cart-order-summary-block/frontend'
) )
), ),
} ); } );
registerCheckoutBlock( { registerCheckoutBlock( {
metadata: cartProceedToCheckoutMetadata, metadata: metadata.CART_ORDER_SUMMARY_SUBTOTAL,
component: lazy( () => component: lazy( () =>
import( import(
/* webpackChunkName: "cart-blocks/checkout-button" */ './proceed-to-checkout-block/frontend' /* webpackChunkName: "cart-blocks/order-summary-subtotal" */
'./cart-order-summary-subtotal/frontend'
) )
), ),
} ); } );
registerCheckoutBlock( { registerCheckoutBlock( {
metadata: cartAcceptedPaymentMethodsMetadata, metadata: metadata.CART_ORDER_SUMMARY_FEE,
component: lazy( () => component: lazy( () =>
import( import(
/* webpackChunkName: "cart-blocks/accepted-payment-methods" */ './cart-accepted-payment-methods-block/frontend' /* webpackChunkName: "cart-blocks/order-summary-fee" */
'./cart-order-summary-fee/frontend'
)
),
} );
registerCheckoutBlock( {
metadata: metadata.CART_ORDER_SUMMARY_DISCOUNT,
component: lazy( () =>
import(
/* webpackChunkName: "cart-blocks/order-summary-discount" */
'./cart-order-summary-discount/frontend'
)
),
} );
registerCheckoutBlock( {
metadata: metadata.CART_ORDER_SUMMARY_SHIPPING,
component: lazy( () =>
import(
/* webpackChunkName: "cart-blocks/order-summary-shipping" */
'./cart-order-summary-shipping/frontend'
)
),
} );
registerCheckoutBlock( {
metadata: metadata.CART_ORDER_SUMMARY_COUPON_FORM,
component: lazy( () =>
import(
/* webpackChunkName: "cart-blocks/order-summary-coupon-form" */
'./cart-order-summary-coupon-form/frontend'
)
),
} );
registerCheckoutBlock( {
metadata: metadata.CART_ORDER_SUMMARY_TAXES,
component: lazy( () =>
import(
/* webpackChunkName: "cart-blocks/order-summary-taxes" */
'./cart-order-summary-taxes/frontend'
)
),
} );
registerCheckoutBlock( {
metadata: metadata.CART_ORDER_SUMMARY_HEADING,
component: lazy( () =>
import(
/* webpackChunkName: "cart-blocks/order-summary-heading" */
'./cart-order-summary-heading/frontend'
) )
), ),
} ); } );

View File

@ -36,7 +36,10 @@ import type { TemplateArray } from '@wordpress/blocks';
*/ */
import './inner-blocks'; import './inner-blocks';
import './styles/editor.scss'; import './styles/editor.scss';
import { addClassToBody, useBlockPropsWithLocking } from '../shared'; import {
addClassToBody,
useBlockPropsWithLocking,
} from '../cart-checkout/shared';
import { CheckoutBlockContext, CheckoutBlockControlsContext } from './context'; import { CheckoutBlockContext, CheckoutBlockControlsContext } from './context';
import type { Attributes } from './types'; import type { Attributes } from './types';

View File

@ -7,7 +7,7 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
* Internal dependencies * Internal dependencies
*/ */
import './editor.scss'; import './editor.scss';
import { useForcedLayout, getAllowedBlocks } from '../../shared'; import { useForcedLayout, getAllowedBlocks } from '../../cart-checkout/shared';
export const AdditionalFields = ( { export const AdditionalFields = ( {
block, block,

View File

@ -6,7 +6,7 @@ import { useStoreCart } from '@woocommerce/base-context/hooks';
/** /**
* Internal dependencies * Internal dependencies
*/ */
import { CheckoutExpressPayment } from '../../../shared/payment-methods'; import { CheckoutExpressPayment } from '../../../cart-checkout/payment-methods';
const Block = ( { className }: { className?: string } ): JSX.Element | null => { const Block = ( { className }: { className?: string } ): JSX.Element | null => {
const { cartNeedsPayment } = useStoreCart(); const { cartNeedsPayment } = useStoreCart();

View File

@ -11,7 +11,10 @@ import type { TemplateArray } from '@wordpress/blocks';
* Internal dependencies * Internal dependencies
*/ */
import { useCheckoutBlockControlsContext } from '../../context'; import { useCheckoutBlockControlsContext } from '../../context';
import { useForcedLayout, getAllowedBlocks } from '../../../shared'; import {
useForcedLayout,
getAllowedBlocks,
} from '../../../cart-checkout/shared';
import './style.scss'; import './style.scss';
export const Edit = ( { export const Edit = ( {

View File

@ -11,7 +11,10 @@ import { useStoreCart } from '@woocommerce/base-context/hooks';
/** /**
* Internal dependencies * Internal dependencies
*/ */
import { useForcedLayout, getAllowedBlocks } from '../../../shared'; import {
useForcedLayout,
getAllowedBlocks,
} from '../../../cart-checkout/shared';
import { OrderMetaSlotFill } from './slotfills'; import { OrderMetaSlotFill } from './slotfills';
export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => { export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {

View File

@ -5,7 +5,7 @@
/** /**
* Internal dependencies * Internal dependencies
*/ */
import { PaymentMethods } from '../../../shared/payment-methods'; import { PaymentMethods } from '../../../cart-checkout/payment-methods';
const Block = (): JSX.Element | null => { const Block = (): JSX.Element | null => {
return <PaymentMethods />; return <PaymentMethods />;

View File

@ -11,7 +11,10 @@ import type { TemplateArray } from '@wordpress/blocks';
* Internal dependencies * Internal dependencies
*/ */
import './style.scss'; import './style.scss';
import { useForcedLayout, getAllowedBlocks } from '../../../shared'; import {
useForcedLayout,
getAllowedBlocks,
} from '../../../cart-checkout/shared';
export const Edit = ( { export const Edit = ( {
clientId, clientId,

View File

@ -43,10 +43,11 @@ const blocks = {
cart: {}, cart: {},
checkout: {}, checkout: {},
'mini-cart': { 'mini-cart': {
customDir: 'cart-checkout/mini-cart',
isExperimental: true, isExperimental: true,
}, },
'mini-cart-contents': { 'mini-cart-contents': {
customDir: 'mini-cart/mini-cart-contents', customDir: 'cart-checkout/mini-cart-contents',
isExperimental: true, isExperimental: true,
}, },
'single-product': { 'single-product': {
@ -129,7 +130,7 @@ const entries = {
reviews: './assets/js/blocks/reviews/frontend.js', reviews: './assets/js/blocks/reviews/frontend.js',
...getBlockEntries( 'frontend.{t,j}s{,x}' ), ...getBlockEntries( 'frontend.{t,j}s{,x}' ),
'mini-cart-component': 'mini-cart-component':
'./assets/js/blocks/mini-cart/component-frontend.tsx', './assets/js/blocks/cart-checkout/mini-cart/component-frontend.tsx',
}, },
payments: { payments: {
'wc-payment-method-cheque': 'wc-payment-method-cheque':

View File

@ -4,21 +4,21 @@ This document gives an overview of the flow for the checkout in the WooCommerce
## Table of Contents <!-- omit in toc --> ## Table of Contents <!-- omit in toc -->
- [General Concepts](#general-concepts) - [General Concepts](#general-concepts)
- [Tracking flow through status](#tracking-flow-through-status) - [Tracking flow through status](#tracking-flow-through-status)
- [`CheckoutProvider` Exposed Statuses](#checkoutprovider-exposed-statuses) - [`CheckoutProvider` Exposed Statuses](#checkoutprovider-exposed-statuses)
- [Special States:](#special-states) - [Special States:](#special-states)
- [`ShippingProvider` Exposed Statuses](#shippingprovider-exposed-statuses) - [`ShippingProvider` Exposed Statuses](#shippingprovider-exposed-statuses)
- [`PaymentMethodDataProvider` Exposed Statuses](#paymentmethoddataprovider-exposed-statuses) - [`PaymentMethodDataProvider` Exposed Statuses](#paymentmethoddataprovider-exposed-statuses)
- [Emitting Events](#emitting-events) - [Emitting Events](#emitting-events)
- [`onCheckoutValidationBeforeProcessing`](#oncheckoutvalidationbeforeprocessing) - [`onCheckoutValidationBeforeProcessing`](#oncheckoutvalidationbeforeprocessing)
- [`onPaymentProcessing`](#onpaymentprocessing) - [`onPaymentProcessing`](#onpaymentprocessing)
- [`onCheckoutAfterProcessingWithSuccess`](#oncheckoutafterprocessingwithsuccess) - [`onCheckoutAfterProcessingWithSuccess`](#oncheckoutafterprocessingwithsuccess)
- [`onCheckoutAfterProcessingWithError`](#oncheckoutafterprocessingwitherror) - [`onCheckoutAfterProcessingWithError`](#oncheckoutafterprocessingwitherror)
- [`onShippingRateSuccess`](#onshippingratesuccess) - [`onShippingRateSuccess`](#onshippingratesuccess)
- [`onShippingRateFail`](#onshippingratefail) - [`onShippingRateFail`](#onshippingratefail)
- [`onShippingRateSelectSuccess`](#onshippingrateselectsuccess) - [`onShippingRateSelectSuccess`](#onshippingrateselectsuccess)
- [`onShippingRateSelectFail`](#onshippingrateselectfail) - [`onShippingRateSelectFail`](#onshippingrateselectfail)
The architecture of the Checkout Block is derived from the following principles: The architecture of the Checkout Block is derived from the following principles:
@ -182,7 +182,7 @@ const Component = () => {
The properties of the object returned by this hook are: The properties of the object returned by this hook are:
- `isSuccessResponse`, `isErrorResponse` and `isFailResponse`: These are helper functions that receive a value and report via boolean whether the object is a type of response expected. For event emitters that receive responses from registered observers, a `type` property on the returned object from the observer indicates what type of response it is and event emitters will react according to that type. So for instance if an observer returned `{ type: 'success' }` the emitter could feed that to `isSuccessResponse` and it would return `true`. You can see an example of this being implemented for the payment processing emitted event [here](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/34e17c3622637dbe8b02fac47b5c9b9ebf9e3596/assets/js/base/context/shared/payment-methods/payment-method-data-context.js#L281-L307). - `isSuccessResponse`, `isErrorResponse` and `isFailResponse`: These are helper functions that receive a value and report via boolean whether the object is a type of response expected. For event emitters that receive responses from registered observers, a `type` property on the returned object from the observer indicates what type of response it is and event emitters will react according to that type. So for instance if an observer returned `{ type: 'success' }` the emitter could feed that to `isSuccessResponse` and it would return `true`. You can see an example of this being implemented for the payment processing emitted event [here](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/34e17c3622637dbe8b02fac47b5c9b9ebf9e3596/assets/js/base/context/cart-checkout/payment-methods/payment-method-data-context.js#L281-L307).
- `noticeContexts`: This is an object containing properties referencing areas where notices can be targeted in the checkout. The object has the following properties: - `noticeContexts`: This is an object containing properties referencing areas where notices can be targeted in the checkout. The object has the following properties:
- `PAYMENTS`: This is a reference to the notice area in the payment methods step. - `PAYMENTS`: This is a reference to the notice area in the payment methods step.
- `EXPRESS_PAYMENTS`: This is a reference to the notice area in the express payment methods step. - `EXPRESS_PAYMENTS`: This is a reference to the notice area in the express payment methods step.
@ -473,10 +473,11 @@ This event emitter is fired when a shipping rate selection is not being persiste
This event emitter doesn't care about any registered observer response and will simply execute all registered observers passing them the current error status in the context. This event emitter doesn't care about any registered observer response and will simply execute all registered observers passing them the current error status in the context.
## <!-- FEEDBACK --> <!-- FEEDBACK -->
---
[We're hiring!](https://woocommerce.com/careers/) Come work with us! [We're hiring!](https://woocommerce.com/careers/) Come work with us!
🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/checkout-flow-and-events.md) 🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/checkout-flow-and-events.md)
<!-- /FEEDBACK --> <!-- /FEEDBACK -->

View File

@ -66,7 +66,7 @@ This test requires the browser dev tools to inspect rendered HTML.
This test requires a code edit to force an error. This test requires a code edit to force an error.
1. Chose Storefront and set the background to black and text to white. 1. Chose Storefront and set the background to black and text to white.
2. Force an error to the Cart or Checkout block. Add on line 74 throw new Error( 'test' ); in `assets/js/blocks/cart/block.js` 2. Force an error to the Cart or Checkout block. Add on line 74 throw new Error( 'test' ); in `assets/js/blocks/cart-checkout/cart/block.js`
3. Notice the error text is now visible 3. Notice the error text is now visible
## Feature plugin only ## Feature plugin only

View File

@ -20,8 +20,8 @@
"./assets/js/blocks/checkout/inner-blocks/register-components.ts", "./assets/js/blocks/checkout/inner-blocks/register-components.ts",
"./assets/js/blocks/cart/inner-blocks/**/index.tsx", "./assets/js/blocks/cart/inner-blocks/**/index.tsx",
"./assets/js/blocks/cart/inner-blocks/register-components.ts", "./assets/js/blocks/cart/inner-blocks/register-components.ts",
"./assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/**/index.tsx", "./assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/**/index.tsx",
"./assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/register-components.ts" "./assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts"
], ],
"repository": { "repository": {
"type": "git", "type": "git",

View File

@ -2,7 +2,8 @@
* External dependencies * External dependencies
*/ */
import { dispatch } from '@wordpress/data'; import { dispatch } from '@wordpress/data';
import { ExtensionCartUpdateArgs, CartResponse } from '@woocommerce/types'; import { CartResponse } from '@woocommerce/type-defs/cart-response';
import { ExtensionCartUpdateArgs } from '@woocommerce/types';
/** /**
* Internal dependencies * Internal dependencies

View File

@ -3,7 +3,7 @@
"include": [ "include": [
"./assets/js/**/*", "./assets/js/**/*",
"./assets/js/blocks/**/block.json", "./assets/js/blocks/**/block.json",
"./assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/**/block.json", "./assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/**/block.json",
"./storybook/**/*" "./storybook/**/*"
], ],
"exclude": [ "./assets/js/data" ], "exclude": [ "./assets/js/data" ],