Revert "Move cart and mini-cart blocks into their own folders (https://github.com/woocommerce/woocommerce-blocks/pull/6126)" (https://github.com/woocommerce/woocommerce-blocks/pull/6190)
This reverts commit d005dbd2cf
.
This commit is contained in:
parent
10793e8e18
commit
e15d516163
|
@ -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', () => {
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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();
|
|
@ -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;
|
|
@ -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>
|
|
@ -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';
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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' } );
|
||||||
|
|
|
@ -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,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
|
@ -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;
|
|
|
@ -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 => {
|
||||||
|
|
|
@ -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' } );
|
||||||
|
|
|
@ -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';
|
||||||
|
|
||||||
|
|
|
@ -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';
|
||||||
|
|
||||||
|
|
|
@ -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'
|
||||||
)
|
)
|
||||||
),
|
),
|
||||||
} );
|
} );
|
||||||
|
|
|
@ -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';
|
||||||
|
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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 = ( {
|
||||||
|
|
|
@ -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 => {
|
||||||
|
|
|
@ -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 />;
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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':
|
||||||
|
|
|
@ -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 -->
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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" ],
|
||||||
|
|
Loading…
Reference in New Issue