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 {
|
||||
CheckoutExpressPayment,
|
||||
SavedPaymentMethodOptions,
|
||||
} from '../../../../../../blocks/shared/payment-methods';
|
||||
} from '../../../../../../blocks/cart-checkout/payment-methods';
|
||||
import { defaultCartState } from '../../../../../../data/default-states';
|
||||
|
||||
jest.mock( '@woocommerce/settings', () => {
|
||||
|
|
|
@ -17,7 +17,7 @@ import type { TemplateArray } from '@wordpress/blocks';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { useViewSwitcher, useForcedLayout } from '../../shared';
|
||||
import { useViewSwitcher, useForcedLayout } from '../shared';
|
||||
import { MiniCartInnerBlocksStyle } from './inner-blocks-style';
|
||||
import './editor.scss';
|
||||
|
|
@ -10,7 +10,7 @@ import { previewCart } from '@woocommerce/resource-previews';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { useForcedLayout, getAllowedBlocks } from '../../../../shared';
|
||||
import { useForcedLayout, getAllowedBlocks } from '../../../shared';
|
||||
|
||||
export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
|
||||
const blockProps = useBlockProps();
|
|
@ -31,9 +31,9 @@ import classnames from 'classnames';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import QuantityBadge from './quantity-badge';
|
||||
import { MiniCartContentsBlock } from './mini-cart-contents/block';
|
||||
import { MiniCartContentsBlock } from '../mini-cart-contents/block';
|
||||
import './style.scss';
|
||||
import { blockName } from './mini-cart-contents/attributes';
|
||||
import { blockName } from '../mini-cart-contents/attributes';
|
||||
|
||||
interface Props {
|
||||
isInitiallyOpen?: boolean;
|
|
@ -19,7 +19,7 @@ import userEvent from '@testing-library/user-event';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import Block from '../block';
|
||||
import { defaultCartState } from '../../../data/default-states';
|
||||
import { defaultCartState } from '../../../../data/default-states';
|
||||
|
||||
const MiniCartBlock = ( props ) => (
|
||||
<SlotFillProvider>
|
|
@ -3,7 +3,7 @@
|
|||
*/
|
||||
import classnames from 'classnames';
|
||||
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 type { RefObject } from 'react';
|
||||
|
||||
|
|
|
@ -36,7 +36,7 @@ import {
|
|||
useViewSwitcher,
|
||||
useBlockPropsWithLocking,
|
||||
useForcedLayout,
|
||||
} from '../shared';
|
||||
} from '../cart-checkout/shared';
|
||||
import { CartBlockContext } from './context';
|
||||
|
||||
// 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
|
||||
*/
|
||||
import { CartExpressPayment } from '../../../shared/payment-methods';
|
||||
import { CartExpressPayment } from '../../../cart-checkout/payment-methods';
|
||||
|
||||
const Block = ( { className }: { className: string } ): JSX.Element | null => {
|
||||
const { cartNeedsPayment } = useStoreCart();
|
||||
|
|
|
@ -8,7 +8,10 @@ import type { TemplateArray } from '@wordpress/blocks';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { useForcedLayout, getAllowedBlocks } from '../../../shared';
|
||||
import {
|
||||
useForcedLayout,
|
||||
getAllowedBlocks,
|
||||
} from '../../../cart-checkout/shared';
|
||||
|
||||
export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
|
||||
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
|
||||
*/
|
||||
import { useForcedLayout, getAllowedBlocks } from '../../../shared';
|
||||
import {
|
||||
useForcedLayout,
|
||||
getAllowedBlocks,
|
||||
} from '../../../cart-checkout/shared';
|
||||
import { OrderMetaSlotFill } from './slotfills';
|
||||
|
||||
export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
|
||||
|
|
|
@ -10,7 +10,10 @@ import type { TemplateArray } from '@wordpress/blocks';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import { useForcedLayout, getAllowedBlocks } from '../../../shared';
|
||||
import {
|
||||
useForcedLayout,
|
||||
getAllowedBlocks,
|
||||
} from '../../../cart-checkout/shared';
|
||||
|
||||
export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
|
||||
const blockProps = useBlockProps( { className: 'wc-block-cart__sidebar' } );
|
||||
|
|
|
@ -11,7 +11,10 @@ import { SHOP_URL } from '@woocommerce/block-settings';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { useForcedLayout, getAllowedBlocks } from '../../../shared';
|
||||
import {
|
||||
useForcedLayout,
|
||||
getAllowedBlocks,
|
||||
} from '../../../cart-checkout/shared';
|
||||
import iconDataUri from './icon-data-uri.js';
|
||||
import './style.scss';
|
||||
|
||||
|
|
|
@ -11,7 +11,10 @@ import { useEditorContext } from '@woocommerce/base-context';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { useForcedLayout, getAllowedBlocks } from '../../../shared';
|
||||
import {
|
||||
useForcedLayout,
|
||||
getAllowedBlocks,
|
||||
} from '../../../cart-checkout/shared';
|
||||
import './editor.scss';
|
||||
import { useCartBlockContext } from '../../context';
|
||||
|
||||
|
|
|
@ -5,118 +5,171 @@ import { lazy } from '@wordpress/element';
|
|||
import { WC_BLOCKS_BUILD_URL } from '@woocommerce/block-settings';
|
||||
import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import metadata from './component-metadata';
|
||||
|
||||
// Modify webpack publicPath at runtime based on location of WordPress Plugin.
|
||||
// eslint-disable-next-line no-undef,camelcase
|
||||
__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( {
|
||||
metadata: filledCartMetadata,
|
||||
metadata: metadata.FILLED_CART,
|
||||
component: lazy( () =>
|
||||
import(
|
||||
/* webpackChunkName: "cart-blocks/filled-cart" */ './filled-cart-block/frontend'
|
||||
/* webpackChunkName: "cart-blocks/filled-cart" */
|
||||
'./filled-cart-block/frontend'
|
||||
)
|
||||
),
|
||||
} );
|
||||
|
||||
registerCheckoutBlock( {
|
||||
metadata: emptyCartMetadata,
|
||||
metadata: metadata.EMPTY_CART,
|
||||
component: lazy( () =>
|
||||
import(
|
||||
/* webpackChunkName: "cart-blocks/empty-cart" */ './empty-cart-block/frontend'
|
||||
/* webpackChunkName: "cart-blocks/empty-cart" */
|
||||
'./empty-cart-block/frontend'
|
||||
)
|
||||
),
|
||||
} );
|
||||
|
||||
registerCheckoutBlock( {
|
||||
metadata: filledCartMetadata,
|
||||
metadata: metadata.CART_ITEMS,
|
||||
component: lazy( () =>
|
||||
import(
|
||||
/* webpackChunkName: "cart-blocks/filled-cart" */ './filled-cart-block/frontend'
|
||||
/* webpackChunkName: "cart-blocks/cart-items" */
|
||||
'./cart-items-block/frontend'
|
||||
)
|
||||
),
|
||||
} );
|
||||
|
||||
registerCheckoutBlock( {
|
||||
metadata: emptyCartMetadata,
|
||||
metadata: metadata.CART_LINE_ITEMS,
|
||||
component: lazy( () =>
|
||||
import(
|
||||
/* webpackChunkName: "cart-blocks/empty-cart" */ './empty-cart-block/frontend'
|
||||
/* webpackChunkName: "cart-blocks/cart-line-items" */
|
||||
'./cart-line-items-block/frontend'
|
||||
)
|
||||
),
|
||||
} );
|
||||
|
||||
registerCheckoutBlock( {
|
||||
metadata: cartItemsMetadata,
|
||||
metadata: metadata.CART_TOTALS,
|
||||
component: lazy( () =>
|
||||
import(
|
||||
/* webpackChunkName: "cart-blocks/items" */ './cart-items-block/frontend'
|
||||
/* webpackChunkName: "cart-blocks/cart-totals" */
|
||||
'./cart-totals-block/frontend'
|
||||
)
|
||||
),
|
||||
} );
|
||||
|
||||
registerCheckoutBlock( {
|
||||
metadata: cartLineItemsMetadata,
|
||||
metadata: metadata.CART_EXPRESS_PAYMENT,
|
||||
component: lazy( () =>
|
||||
import(
|
||||
/* webpackChunkName: "cart-blocks/line-items" */ './cart-line-items-block/block'
|
||||
/* webpackChunkName: "cart-blocks/cart-express-payment" */
|
||||
'./cart-express-payment-block/frontend'
|
||||
)
|
||||
),
|
||||
} );
|
||||
|
||||
registerCheckoutBlock( {
|
||||
metadata: cartTotalsMetadata,
|
||||
metadata: metadata.PROCEED_TO_CHECKOUT,
|
||||
component: lazy( () =>
|
||||
import(
|
||||
/* webpackChunkName: "cart-blocks/totals" */ './cart-totals-block/frontend'
|
||||
/* webpackChunkName: "cart-blocks/proceed-to-checkout" */
|
||||
'./proceed-to-checkout-block/frontend'
|
||||
)
|
||||
),
|
||||
} );
|
||||
|
||||
registerCheckoutBlock( {
|
||||
metadata: cartOrderSummaryMetadata,
|
||||
metadata: metadata.CART_ACCEPTED_PAYMENT_METHODS,
|
||||
component: lazy( () =>
|
||||
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( {
|
||||
metadata: cartExpressPaymentMetadata,
|
||||
metadata: metadata.CART_ORDER_SUMMARY,
|
||||
component: lazy( () =>
|
||||
import(
|
||||
/* webpackChunkName: "cart-blocks/express-payment" */ './cart-express-payment-block/block'
|
||||
/* webpackChunkName: "cart-blocks/cart-order-summary" */
|
||||
'./cart-order-summary-block/frontend'
|
||||
)
|
||||
),
|
||||
} );
|
||||
|
||||
registerCheckoutBlock( {
|
||||
metadata: cartProceedToCheckoutMetadata,
|
||||
metadata: metadata.CART_ORDER_SUMMARY_SUBTOTAL,
|
||||
component: lazy( () =>
|
||||
import(
|
||||
/* webpackChunkName: "cart-blocks/checkout-button" */ './proceed-to-checkout-block/frontend'
|
||||
/* webpackChunkName: "cart-blocks/order-summary-subtotal" */
|
||||
'./cart-order-summary-subtotal/frontend'
|
||||
)
|
||||
),
|
||||
} );
|
||||
|
||||
registerCheckoutBlock( {
|
||||
metadata: cartAcceptedPaymentMethodsMetadata,
|
||||
metadata: metadata.CART_ORDER_SUMMARY_FEE,
|
||||
component: lazy( () =>
|
||||
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 './styles/editor.scss';
|
||||
import { addClassToBody, useBlockPropsWithLocking } from '../shared';
|
||||
import {
|
||||
addClassToBody,
|
||||
useBlockPropsWithLocking,
|
||||
} from '../cart-checkout/shared';
|
||||
import { CheckoutBlockContext, CheckoutBlockControlsContext } from './context';
|
||||
import type { Attributes } from './types';
|
||||
|
||||
|
|
|
@ -7,7 +7,7 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import './editor.scss';
|
||||
import { useForcedLayout, getAllowedBlocks } from '../../shared';
|
||||
import { useForcedLayout, getAllowedBlocks } from '../../cart-checkout/shared';
|
||||
|
||||
export const AdditionalFields = ( {
|
||||
block,
|
||||
|
|
|
@ -6,7 +6,7 @@ import { useStoreCart } from '@woocommerce/base-context/hooks';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { CheckoutExpressPayment } from '../../../shared/payment-methods';
|
||||
import { CheckoutExpressPayment } from '../../../cart-checkout/payment-methods';
|
||||
|
||||
const Block = ( { className }: { className?: string } ): JSX.Element | null => {
|
||||
const { cartNeedsPayment } = useStoreCart();
|
||||
|
|
|
@ -11,7 +11,10 @@ import type { TemplateArray } from '@wordpress/blocks';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import { useCheckoutBlockControlsContext } from '../../context';
|
||||
import { useForcedLayout, getAllowedBlocks } from '../../../shared';
|
||||
import {
|
||||
useForcedLayout,
|
||||
getAllowedBlocks,
|
||||
} from '../../../cart-checkout/shared';
|
||||
import './style.scss';
|
||||
|
||||
export const Edit = ( {
|
||||
|
|
|
@ -11,7 +11,10 @@ import { useStoreCart } from '@woocommerce/base-context/hooks';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { useForcedLayout, getAllowedBlocks } from '../../../shared';
|
||||
import {
|
||||
useForcedLayout,
|
||||
getAllowedBlocks,
|
||||
} from '../../../cart-checkout/shared';
|
||||
import { OrderMetaSlotFill } from './slotfills';
|
||||
|
||||
export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { PaymentMethods } from '../../../shared/payment-methods';
|
||||
import { PaymentMethods } from '../../../cart-checkout/payment-methods';
|
||||
|
||||
const Block = (): JSX.Element | null => {
|
||||
return <PaymentMethods />;
|
||||
|
|
|
@ -11,7 +11,10 @@ import type { TemplateArray } from '@wordpress/blocks';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import { useForcedLayout, getAllowedBlocks } from '../../../shared';
|
||||
import {
|
||||
useForcedLayout,
|
||||
getAllowedBlocks,
|
||||
} from '../../../cart-checkout/shared';
|
||||
|
||||
export const Edit = ( {
|
||||
clientId,
|
||||
|
|
|
@ -43,10 +43,11 @@ const blocks = {
|
|||
cart: {},
|
||||
checkout: {},
|
||||
'mini-cart': {
|
||||
customDir: 'cart-checkout/mini-cart',
|
||||
isExperimental: true,
|
||||
},
|
||||
'mini-cart-contents': {
|
||||
customDir: 'mini-cart/mini-cart-contents',
|
||||
customDir: 'cart-checkout/mini-cart-contents',
|
||||
isExperimental: true,
|
||||
},
|
||||
'single-product': {
|
||||
|
@ -129,7 +130,7 @@ const entries = {
|
|||
reviews: './assets/js/blocks/reviews/frontend.js',
|
||||
...getBlockEntries( 'frontend.{t,j}s{,x}' ),
|
||||
'mini-cart-component':
|
||||
'./assets/js/blocks/mini-cart/component-frontend.tsx',
|
||||
'./assets/js/blocks/cart-checkout/mini-cart/component-frontend.tsx',
|
||||
},
|
||||
payments: {
|
||||
'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 -->
|
||||
|
||||
- [General Concepts](#general-concepts)
|
||||
- [Tracking flow through status](#tracking-flow-through-status)
|
||||
- [`CheckoutProvider` Exposed Statuses](#checkoutprovider-exposed-statuses)
|
||||
- [Special States:](#special-states)
|
||||
- [`ShippingProvider` Exposed Statuses](#shippingprovider-exposed-statuses)
|
||||
- [`PaymentMethodDataProvider` Exposed Statuses](#paymentmethoddataprovider-exposed-statuses)
|
||||
- [Emitting Events](#emitting-events)
|
||||
- [`onCheckoutValidationBeforeProcessing`](#oncheckoutvalidationbeforeprocessing)
|
||||
- [`onPaymentProcessing`](#onpaymentprocessing)
|
||||
- [`onCheckoutAfterProcessingWithSuccess`](#oncheckoutafterprocessingwithsuccess)
|
||||
- [`onCheckoutAfterProcessingWithError`](#oncheckoutafterprocessingwitherror)
|
||||
- [`onShippingRateSuccess`](#onshippingratesuccess)
|
||||
- [`onShippingRateFail`](#onshippingratefail)
|
||||
- [`onShippingRateSelectSuccess`](#onshippingrateselectsuccess)
|
||||
- [`onShippingRateSelectFail`](#onshippingrateselectfail)
|
||||
- [General Concepts](#general-concepts)
|
||||
- [Tracking flow through status](#tracking-flow-through-status)
|
||||
- [`CheckoutProvider` Exposed Statuses](#checkoutprovider-exposed-statuses)
|
||||
- [Special States:](#special-states)
|
||||
- [`ShippingProvider` Exposed Statuses](#shippingprovider-exposed-statuses)
|
||||
- [`PaymentMethodDataProvider` Exposed Statuses](#paymentmethoddataprovider-exposed-statuses)
|
||||
- [Emitting Events](#emitting-events)
|
||||
- [`onCheckoutValidationBeforeProcessing`](#oncheckoutvalidationbeforeprocessing)
|
||||
- [`onPaymentProcessing`](#onpaymentprocessing)
|
||||
- [`onCheckoutAfterProcessingWithSuccess`](#oncheckoutafterprocessingwithsuccess)
|
||||
- [`onCheckoutAfterProcessingWithError`](#oncheckoutafterprocessingwitherror)
|
||||
- [`onShippingRateSuccess`](#onshippingratesuccess)
|
||||
- [`onShippingRateFail`](#onshippingratefail)
|
||||
- [`onShippingRateSelectSuccess`](#onshippingrateselectsuccess)
|
||||
- [`onShippingRateSelectFail`](#onshippingrateselectfail)
|
||||
|
||||
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:
|
||||
|
||||
- `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:
|
||||
- `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.
|
||||
|
@ -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.
|
||||
|
||||
## <!-- FEEDBACK -->
|
||||
<!-- FEEDBACK -->
|
||||
---
|
||||
|
||||
[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)
|
||||
|
||||
<!-- /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.
|
||||
|
||||
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
|
||||
|
||||
## Feature plugin only
|
||||
|
|
|
@ -20,8 +20,8 @@
|
|||
"./assets/js/blocks/checkout/inner-blocks/register-components.ts",
|
||||
"./assets/js/blocks/cart/inner-blocks/**/index.tsx",
|
||||
"./assets/js/blocks/cart/inner-blocks/register-components.ts",
|
||||
"./assets/js/blocks/mini-cart/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/**/index.tsx",
|
||||
"./assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
@ -2,7 +2,8 @@
|
|||
* External dependencies
|
||||
*/
|
||||
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
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
"include": [
|
||||
"./assets/js/**/*",
|
||||
"./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/**/*"
|
||||
],
|
||||
"exclude": [ "./assets/js/data" ],
|
||||
|
|
Loading…
Reference in New Issue