- (
-
- { currentView === 'full' && (
- <>
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
- );
-};
+import './inner-blocks/register-components';
+import Block from './block';
+import { blockName, blockAttributes } from './attributes';
const getProps = ( el ) => {
return {
- emptyCart: el.innerHTML,
- attributes: getValidBlockAttributes( blockAttributes, el.dataset ),
+ attributes: getValidBlockAttributes(
+ blockAttributes,
+ !! el ? el.dataset : {}
+ ),
};
};
-const getErrorBoundaryProps = () => {
- return {
- header: __( 'Something went wrong…', 'woo-gutenberg-products-block' ),
- text: __(
- 'The cart has encountered an unexpected error. If the error persists, please get in touch with us for help.',
- 'woo-gutenberg-products-block'
- ),
- showErrorMessage: CURRENT_USER_IS_ADMIN,
- button: (
-
- ),
- };
+const Wrapper = ( { children } ) => {
+ // we need to pluck out receiveCart.
+ // eslint-disable-next-line no-unused-vars
+ const { extensions, receiveCart, ...cart } = useStoreCart();
+ return Children.map( children, ( child ) => {
+ if ( isValidElement( child ) ) {
+ const componentProps = {
+ extensions,
+ cart,
+ };
+ return cloneElement( child, componentProps );
+ }
+ return child;
+ } );
};
-renderFrontend( {
+renderParentBlock( {
+ Block: withStoreCartApiHydration( withRestApiHydration( Block ) ),
+ blockName,
selector: '.wp-block-woocommerce-cart',
- Block: withStoreCartApiHydration( withRestApiHydration( CartFrontend ) ),
getProps,
- getErrorBoundaryProps,
+ blockMap: getRegisteredBlockComponents( blockName ),
+ blockWrapper: Wrapper,
} );
diff --git a/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-items-title.tsx b/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-items-title.tsx
deleted file mode 100644
index d8605a87073..00000000000
--- a/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-items-title.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * External dependencies
- */
-import { _n, sprintf } from '@wordpress/i18n';
-import Title from '@woocommerce/base-components/title';
-
-const CartLineItemsTitle = ( {
- itemCount = 1,
-}: {
- itemCount: number;
-} ): JSX.Element => {
- return (
-
- { sprintf(
- /* translators: %d is the count of items in the cart. */
- _n(
- 'Your cart (%d item)',
- 'Your cart (%d items)',
- itemCount,
- 'woo-gutenberg-products-block'
- ),
- itemCount
- ) }
-
- );
-};
-
-export default CartLineItemsTitle;
diff --git a/assets/js/blocks/cart-checkout/cart/full-cart/index.tsx b/assets/js/blocks/cart-checkout/cart/full-cart/index.tsx
deleted file mode 100644
index 9331ded98df..00000000000
--- a/assets/js/blocks/cart-checkout/cart/full-cart/index.tsx
+++ /dev/null
@@ -1,212 +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,
- useStoreNotices,
-} from '@woocommerce/base-context/hooks';
-import classnames from 'classnames';
-import {
- Sidebar,
- SidebarLayout,
- Main,
-} from '@woocommerce/base-components/sidebar-layout';
-import Title from '@woocommerce/base-components/title';
-import { getSetting } from '@woocommerce/settings';
-import { useEffect } from '@wordpress/element';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import CheckoutButton from '../checkout-button';
-import CartLineItemsTitle from './cart-line-items-title';
-import CartLineItemsTable from './cart-line-items-table';
-import { CartExpressPayment } from '../../payment-methods';
-import './style.scss';
-
-interface CartAttributes {
- hasDarkControls: boolean;
- isShippingCalculatorEnabled: boolean;
- checkoutPageId: number;
- isPreview: boolean;
- showRateAfterTaxName: boolean;
-}
-
-interface CartProps {
- attributes: CartAttributes;
-}
-/**
- * Component that renders the Cart block when user has something in cart aka "full".
- *
- * @param {Object} props Incoming props for the component.
- * @param {Object} props.attributes Incoming attributes for block.
- */
-const Cart = ( { attributes }: CartProps ): JSX.Element => {
- const {
- isShippingCalculatorEnabled,
- hasDarkControls,
- showRateAfterTaxName,
- } = attributes;
-
- const {
- cartItems,
- cartFees,
- cartTotals,
- cartIsLoading,
- cartItemsCount,
- cartItemErrors,
- cartNeedsPayment,
- cartNeedsShipping,
- } = useStoreCart();
-
- const {
- applyCoupon,
- removeCoupon,
- isApplyingCoupon,
- isRemovingCoupon,
- appliedCoupons,
- } = useStoreCartCoupons();
-
- const { addErrorNotice } = useStoreNotices();
-
- // Ensures any cart errors listed in the API response get shown.
- useEffect( () => {
- cartItemErrors.forEach( ( error ) => {
- addErrorNotice( decodeEntities( error.message ), {
- isDismissible: true,
- id: error.code,
- } );
- } );
- }, [ addErrorNotice, cartItemErrors ] );
-
- const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
-
- const cartClassName = classnames( 'wc-block-cart', {
- 'wc-block-cart--is-loading': cartIsLoading,
- 'has-dark-controls': hasDarkControls,
- } );
-
- // 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,
- };
-
- const discountsSlotFillProps = {
- extensions,
- cart,
- };
-
- return (
- <>
-
-
-
-
-
- { __( 'Cart totals', 'woo-gutenberg-products-block' ) }
-
-
-
- { getSetting( 'couponsEnabled', true ) && (
-
-
- ) }
-
-
- ) }
- { ! getSetting( 'displayCartPricesIncludingTax', false ) &&
- parseInt( cartTotals.total_tax, 10 ) > 0 && (
-
-
- ) }
-
-
-
-
-
-
- );
-};
-
-export default Cart;
diff --git a/assets/js/blocks/cart-checkout/cart/full-cart/style.scss b/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
deleted file mode 100644
index e3ddb16c43b..00000000000
--- a/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
+++ /dev/null
@@ -1,264 +0,0 @@
-.wc-block-cart {
- .wc-block-components-shipping-calculator {
- white-space: nowrap;
- }
-
- .wc-block-components-address-form {
- .wc-block-components-text-input,
- .wc-block-components-country-input,
- .wc-block-components-state-input {
- &:first-of-type {
- margin-top: 0;
- }
- }
- }
-}
-
-table.wc-block-cart-items,
-table.wc-block-cart-items th,
-table.wc-block-cart-items td {
- // Override Storefront theme gray table background.
- background: none !important;
- // Remove borders on default themes.
- border: 0;
- margin: 0;
-}
-
-.editor-styles-wrapper table.wc-block-cart-items,
-table.wc-block-cart-items {
- width: 100%;
-
- .wc-block-cart-items__header {
- @include font-size(smaller);
- text-transform: uppercase;
-
- .wc-block-cart-items__header-image {
- width: 100px;
- }
- .wc-block-cart-items__header-product {
- visibility: hidden;
- }
- .wc-block-cart-items__header-total {
- width: 100px;
- text-align: right;
- }
- }
- .wc-block-cart-items__row {
- .wc-block-cart-item__image img {
- width: 100%;
- margin: 0;
- }
- .wc-block-cart-item__quantity {
- .wc-block-cart-item__remove-link {
- @include link-button;
- @include font-size(smaller);
-
- text-transform: none;
- white-space: nowrap;
- }
- }
- .wc-block-components-product-name {
- display: block;
- max-width: max-content;
- }
- .wc-block-cart-item__total {
- @include font-size(regular);
- text-align: right;
- line-height: inherit;
- }
- .wc-block-components-product-metadata {
- margin-bottom: 0.75em;
- }
-
- &.is-disabled {
- opacity: 0.5;
- pointer-events: none;
- transition: opacity 200ms ease;
- }
- }
-}
-
-.wc-block-cart {
- .wc-block-components-totals-taxes,
- .wc-block-components-totals-footer-item {
- margin: 0;
- }
-}
-
-// Loading placeholder state.
-.wc-block-cart--is-loading,
-.wc-block-mini-cart__drawer.is-loading {
- th span,
- h2 span {
- @include placeholder();
- @include force-content();
- min-width: 84px;
- display: inline-block;
- }
- h2 span {
- min-width: 33%;
- }
- .wc-block-components-product-price,
- .wc-block-components-product-metadata,
- .wc-block-components-quantity-selector {
- @include placeholder();
- }
- .wc-block-components-product-name {
- @include placeholder();
- @include force-content();
- min-width: 84px;
- display: inline-block;
- }
- .wc-block-components-product-metadata {
- margin-top: 0.25em;
- min-width: 8em;
- }
- .wc-block-cart-item__remove-link {
- visibility: hidden;
- }
- .wc-block-cart-item__image > a {
- @include placeholder();
- display: block;
- }
- .wc-block-components-product-price {
- @include force-content();
- max-width: 3em;
- display: block;
- margin-top: 0.25em;
- }
- .wc-block-cart__sidebar .components-card {
- @include placeholder();
- @include force-content();
- min-height: 460px;
- }
-}
-.wc-block-components-sidebar-layout.wc-block-cart--skeleton {
- display: none;
-}
-.is-loading + .wc-block-components-sidebar-layout.wc-block-cart--skeleton {
- display: flex;
-}
-
-.wc-block-cart-item__total-price-and-sale-badge-wrapper {
- display: flex;
- flex-direction: column;
- align-items: flex-end;
-
- .wc-block-components-sale-badge {
- margin-top: $gap-smallest;
- }
-}
-
-.is-small,
-.is-mobile {
- .wc-block-cart-item__total {
- .wc-block-components-sale-badge {
- display: none;
- }
- }
-}
-
-.is-medium,
-.is-small,
-.is-mobile {
- &.wc-block-cart {
- .wc-block-components-sidebar {
- .wc-block-cart__totals-title {
- display: none;
- }
- }
- }
- table.wc-block-cart-items {
- td {
- padding: 0;
- }
- .wc-block-cart-items__header {
- display: none;
- }
- .wc-block-cart-item__remove-link {
- display: none;
- }
- .wc-block-cart-items__row {
- @include with-translucent-border(0 0 1px);
- display: grid;
- grid-template-columns: 80px 132px;
- padding: $gap 0;
-
- .wc-block-cart-item__image {
- grid-column-start: 1;
- grid-row-start: 1;
- padding-right: $gap;
- }
- .wc-block-cart-item__product {
- grid-column-start: 2;
- grid-column-end: 4;
- grid-row-start: 1;
- justify-self: stretch;
- padding: 0 $gap $gap 0;
- }
- .wc-block-cart-item__quantity {
- grid-column-start: 1;
- grid-row-start: 2;
- vertical-align: bottom;
- padding-right: $gap;
- align-self: end;
- padding-top: $gap;
- }
- .wc-block-cart-item__total {
- grid-row-start: 1;
-
- .wc-block-components-formatted-money-amount {
- display: inline-block;
- }
- }
- }
- }
-}
-
-.is-large.wp-block-woocommerce-cart {
- .wc-block-cart-items {
- @include with-translucent-border(0 0 1px);
-
- th {
- padding: 0.25rem $gap 0.25rem 0;
- white-space: nowrap;
- }
- td {
- @include with-translucent-border(1px 0 0);
- padding: $gap 0 $gap $gap;
- vertical-align: top;
- }
- th:last-child {
- padding-right: 0;
- }
- td:last-child {
- padding-right: $gap;
- }
- }
-
- .wc-block-components-radio-control__input {
- left: 0;
- }
-
- .wc-block-cart__totals-title {
- @include text-heading();
- @include font-size(smaller);
- display: block;
- font-weight: 600;
- padding: 0.25rem 0;
- text-align: right;
- text-transform: uppercase;
- }
-
- .wc-block-components-sidebar {
- .wc-block-components-shipping-calculator,
- .wc-block-components-shipping-rates-control__package:not(.wc-block-components-panel) {
- padding-left: $gap;
- padding-right: $gap;
- }
- }
-
- .wc-block-cart__payment-options {
- padding: $gap;
- }
-}
diff --git a/assets/js/blocks/cart-checkout/cart/index.js b/assets/js/blocks/cart-checkout/cart/index.js
index 3e4b084697e..8fb9631e24c 100644
--- a/assets/js/blocks/cart-checkout/cart/index.js
+++ b/assets/js/blocks/cart-checkout/cart/index.js
@@ -2,16 +2,18 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
import { InnerBlocks } from '@wordpress/block-editor';
import { Icon, cart } from '@woocommerce/icons';
-import classnames from 'classnames';
import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+import { createBlock } from '@wordpress/blocks';
/**
* Internal dependencies
*/
-import edit from './edit';
+import { Edit, Save } from './edit';
import './style.scss';
-import blockAttributes from './attributes';
+import { blockName, blockAttributes } from './attributes';
+import './inner-blocks';
/**
* Register and run the Cart block.
@@ -29,6 +31,7 @@ const settings = {
align: [ 'wide', 'full' ],
html: false,
multiple: false,
+ __experimentalExposeControlsToChildren: true,
},
example: {
attributes: {
@@ -36,16 +39,70 @@ const settings = {
},
},
attributes: blockAttributes,
- edit,
-
- // Save the props to post content.
- save( { attributes } ) {
- return (
- { children } ;
};
diff --git a/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-totals-block/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/index.tsx
similarity index 70%
rename from assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-totals-block/index.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/index.tsx
index cbe5a0f4ded..fa2a199ed84 100644
--- a/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-totals-block/index.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/index.tsx
@@ -2,7 +2,7 @@
* External dependencies
*/
import { Icon, column } from '@wordpress/icons';
-import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
/**
* Internal dependencies
@@ -10,7 +10,7 @@ import { registerExperimentalBlockType } from '@woocommerce/block-settings';
import { Edit, Save } from './edit';
import metadata from './block.json';
-registerExperimentalBlockType( metadata, {
+registerFeaturePluginBlockType( metadata, {
icon: {
src:
-
-);
+import Cart from '../block';
+
+import FilledCart from '../inner-blocks/filled-cart-block/frontend';
+import EmptyCart from '../inner-blocks/empty-cart-block/frontend';
+
+import ItemsBlock from '../inner-blocks/cart-items-block/frontend';
+import TotalsBlock from '../inner-blocks/cart-totals-block/frontend';
+
+import LineItemsBlock from '../inner-blocks/cart-line-items-block/block';
+import OrderSummaryBlock from '../inner-blocks/cart-order-summary-block/block';
+import ExpressPaymentBlock from '../inner-blocks/cart-express-payment-block/block';
+import ProceedToCheckoutBlock from '../inner-blocks/proceed-to-checkout-block/block';
+import AcceptedPaymentMethodsIcons from '../inner-blocks/cart-accepted-payment-methods-block/block';
+
+const CartBlock = ( {
+ attributes = {
+ showRateAfterTaxName: false,
+ isShippingCalculatorEnabled: false,
+ checkoutPageId: 0,
+ },
+} ) => {
+ const {
+ showRateAfterTaxName,
+ isShippingCalculatorEnabled,
+ checkoutPageId,
+ } = attributes;
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
describe( 'Testing cart', () => {
beforeEach( async () => {
fetchMock.mockResponse( ( req ) => {
@@ -38,14 +81,7 @@ describe( 'Testing cart', () => {
} );
it( 'renders cart if there are items in the cart', async () => {
- render(
- Empty Cart
' }
- attributes={ {
- isShippingCalculatorEnabled: false,
- } }
- />
- );
+ render(
+
+
+
+
+
+
+
+
+
);
};
-CartEditor.propTypes = {
- className: PropTypes.string,
+export const Save = () => {
+ return (
+
+
+ );
};
-
-export default CartEditor;
diff --git a/assets/js/blocks/cart-checkout/cart/editor.scss b/assets/js/blocks/cart-checkout/cart/editor.scss
index c8bb25f59bd..d39e5532fbb 100644
--- a/assets/js/blocks/cart-checkout/cart/editor.scss
+++ b/assets/js/blocks/cart-checkout/cart/editor.scss
@@ -2,7 +2,21 @@
margin: 0;
}
-.wp-block-woocommerce-cart.is-editor-preview {
- max-height: 1000px;
- overflow: hidden;
+body.wc-lock-selected-block--move {
+ .block-editor-block-mover__move-button-container,
+ .block-editor-block-mover {
+ display: none;
+ }
}
+
+body.wc-lock-selected-block--remove {
+ .block-editor-block-settings-menu__popover {
+ .components-menu-group:last-child {
+ display: none;
+ }
+ .components-menu-group:nth-last-child(2) {
+ margin-bottom: -12px;
+ }
+ }
+}
+
diff --git a/assets/js/blocks/cart-checkout/cart/empty-cart-edit/icon-data-uri.js b/assets/js/blocks/cart-checkout/cart/empty-cart-edit/icon-data-uri.js
deleted file mode 100644
index d5082ec4a4e..00000000000
--- a/assets/js/blocks/cart-checkout/cart/empty-cart-edit/icon-data-uri.js
+++ /dev/null
@@ -1 +0,0 @@
-export default 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDBDOC41MDQwMyAwIDAgOC41MDQwMyAwIDE5QzAgMjkuNDk2IDguNTA0MDMgMzggMTkgMzhDMjkuNDk2IDM4IDM4IDI5LjQ5NiAzOCAxOUMzOCA4LjUwNDAzIDI5LjQ5NiAwIDE5IDBaTTI1LjEyOSAxMi44NzFDMjYuNDg1MSAxMi44NzEgMjcuNTgwNiAxMy45NjY1IDI3LjU4MDYgMTUuMzIyNkMyNy41ODA2IDE2LjY3ODYgMjYuNDg1MSAxNy43NzQyIDI1LjEyOSAxNy43NzQyQzIzLjc3MyAxNy43NzQyIDIyLjY3NzQgMTYuNjc4NiAyMi42Nzc0IDE1LjMyMjZDMjIuNjc3NCAxMy45NjY1IDIzLjc3MyAxMi44NzEgMjUuMTI5IDEyLjg3MVpNMTEuNjQ1MiAzMS4yNTgxQzkuNjE0OTIgMzEuMjU4MSA3Ljk2Nzc0IDI5LjY0OTIgNy45Njc3NCAyNy42NTczQzcuOTY3NzQgMjYuMTI1IDEwLjE1MTIgMjMuMDI5OCAxMS4xNTQ4IDIxLjY5NjhDMTEuNCAyMS4zNjczIDExLjg5MDMgMjEuMzY3MyAxMi4xMzU1IDIxLjY5NjhDMTMuMTM5MSAyMy4wMjk4IDE1LjMyMjYgMjYuMTI1IDE1LjMyMjYgMjcuNjU3M0MxNS4zMjI2IDI5LjY0OTIgMTMuNjc1NCAzMS4yNTgxIDExLjY0NTIgMzEuMjU4MVpNMTIuODcxIDE3Ljc3NDJDMTEuNTE0OSAxNy43NzQyIDEwLjQxOTQgMTYuNjc4NiAxMC40MTk0IDE1LjMyMjZDMTAuNDE5NCAxMy45NjY1IDExLjUxNDkgMTIuODcxIDEyLjg3MSAxMi44NzFDMTQuMjI3IDEyLjg3MSAxNS4zMjI2IDEzLjk2NjUgMTUuMzIyNiAxNS4zMjI2QzE1LjMyMjYgMTYuNjc4NiAxNC4yMjcgMTcuNzc0MiAxMi44NzEgMTcuNzc0MlpNMjUuOTEwNSAyOS41ODc5QzI0LjE5NDQgMjcuNTM0NyAyMS42NzM4IDI2LjM1NDggMTkgMjYuMzU0OEMxNy4zNzU4IDI2LjM1NDggMTcuMzc1OCAyMy45MDMyIDE5IDIzLjkwMzJDMjIuNDAxNiAyMy45MDMyIDI1LjYxMTcgMjUuNDA0OCAyNy43ODc1IDI4LjAyNUMyOC44NDQ4IDI5LjI4MTUgMjYuOTI5NCAzMC44MjE0IDI1LjkxMDUgMjkuNTg3OVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=';
diff --git a/assets/js/blocks/cart-checkout/cart/empty-cart-edit/index.js b/assets/js/blocks/cart-checkout/cart/empty-cart-edit/index.js
deleted file mode 100644
index 8e82550636c..00000000000
--- a/assets/js/blocks/cart-checkout/cart/empty-cart-edit/index.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * External dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { InnerBlocks } from '@wordpress/block-editor';
-import { SHOP_URL } from '@woocommerce/block-settings';
-import PropTypes from 'prop-types';
-
-/**
- * Internal dependencies
- */
-import iconDataUri from './icon-data-uri.js';
-import './style.scss';
-
-const templateItemBrowseStore = SHOP_URL
- ? [
- 'core/paragraph',
- {
- align: 'center',
- content: sprintf(
- /* translators: %s is the link to the store product directory. */
- __(
- 'Browse store.',
- 'woo-gutenberg-products-block'
- ),
- SHOP_URL
- ),
- dropCap: false,
- },
- ]
- : null;
-
-const templateItems = [
- [
- 'core/image',
- {
- align: 'center',
- url: iconDataUri,
- sizeSlug: 'small',
- },
- ],
- [
- 'core/heading',
- {
- textAlign: 'center',
- content: __(
- 'Your cart is currently empty!',
- 'woo-gutenberg-products-block'
- ),
- level: 2,
- className: 'wc-block-cart__empty-cart__title',
- },
- ],
- templateItemBrowseStore,
- [
- 'core/separator',
- {
- className: 'is-style-dots',
- },
- ],
- [
- 'core/heading',
- {
- textAlign: 'center',
- content: __( 'New in store', 'woo-gutenberg-products-block' ),
- level: 2,
- },
- ],
- [
- 'woocommerce/product-new',
- {
- columns: 3,
- rows: 1,
- },
- ],
-].filter( Boolean );
-
-/**
- * Component to handle edit mode for the Cart block when cart is empty.
- *
- * @param {Object} props Incoming props for the component.
- * @param {boolean} props.hidden Whether this component is hidden or not.
- */
-const EmptyCartEdit = ( { hidden = false } ) => {
- return (
-
-
- );
-};
-
-EmptyCartEdit.propTypes = {
- hidden: PropTypes.bool,
-};
-
-export default EmptyCartEdit;
diff --git a/assets/js/blocks/cart-checkout/cart/empty-cart-edit/style.scss b/assets/js/blocks/cart-checkout/cart/empty-cart-edit/style.scss
deleted file mode 100644
index e0c402f6ee1..00000000000
--- a/assets/js/blocks/cart-checkout/cart/empty-cart-edit/style.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.wc-block-cart__empty-cart__title,
-.editor-styles-wrapper .wc-block-cart__empty-cart__title {
- font-size: inherit;
-}
diff --git a/assets/js/blocks/cart-checkout/cart/frontend.js b/assets/js/blocks/cart-checkout/cart/frontend.js
index 014aeb8036f..5c203a92653 100644
--- a/assets/js/blocks/cart-checkout/cart/frontend.js
+++ b/assets/js/blocks/cart-checkout/cart/frontend.js
@@ -5,70 +5,50 @@ import {
withStoreCartApiHydration,
withRestApiHydration,
} from '@woocommerce/block-hocs';
-import { __ } from '@wordpress/i18n';
-import {
- StoreNoticesProvider,
- StoreSnackbarNoticesProvider,
- CartProvider,
-} from '@woocommerce/base-context/providers';
-import { SlotFillProvider } from '@woocommerce/blocks-checkout';
-import { CURRENT_USER_IS_ADMIN } from '@woocommerce/settings';
-import {
- renderFrontend,
- getValidBlockAttributes,
-} from '@woocommerce/base-utils';
+import { getValidBlockAttributes } from '@woocommerce/base-utils';
+import { Children, cloneElement, isValidElement } from '@wordpress/element';
+import { useStoreCart } from '@woocommerce/base-context';
+import { getRegisteredBlockComponents } from '@woocommerce/blocks-registry';
+
+import { renderParentBlock } from '@woocommerce/atomic-utils';
+
/**
* Internal dependencies
*/
-import Block from './block.js';
-import blockAttributes from './attributes';
-
-const reloadPage = () => void window.location.reload( true );
-/**
- * Wrapper component to supply API data and show empty cart view as needed.
- *
- * @param {*} props
- */
-const CartFrontend = ( props ) => {
- return (
-
- { cartNeedsPayment &&
-
-
- );
- },
+ edit: Edit,
+ save: Save,
+ // Migrates v1 to v2 checkout.
+ deprecated: [
+ {
+ attributes: blockAttributes,
+ save: ( { attributes } ) => {
+ return (
+
+
+ );
+ },
+ migrate: ( attributes, innerBlocks ) => {
+ const {
+ isShippingCalculatorEnabled,
+ showRateAfterTaxName,
+ checkoutPageId,
+ } = attributes;
+ return [
+ attributes,
+ [
+ createBlock( 'woocommerce/filled-cart-block', {}, [
+ createBlock( 'woocommerce/cart-items-block' ),
+ createBlock( 'woocommerce/cart-totals-block', {}, [
+ createBlock(
+ 'woocommerce/cart-order-summary-block',
+ {
+ isShippingCalculatorEnabled,
+ showRateAfterTaxName,
+ }
+ ),
+ createBlock(
+ 'woocommerce/cart-express-payment-block'
+ ),
+ createBlock(
+ 'woocommerce/proceed-to-checkout-block',
+ { checkoutPageId }
+ ),
+ createBlock(
+ 'woocommerce/cart-accepted-payment-methods-block'
+ ),
+ ] ),
+ ] ),
+ createBlock(
+ 'woocommerce/empty-cart-block',
+ {},
+ innerBlocks
+ ),
+ ],
+ ];
+ },
+ isEligible: ( _, innerBlocks ) => {
+ return ! innerBlocks.find(
+ ( block ) => block.name === 'woocommerce/filled-cart-block'
+ );
+ },
+ },
+ ],
};
-registerFeaturePluginBlockType( 'woocommerce/cart', settings );
+registerFeaturePluginBlockType( blockName, settings );
diff --git a/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-accepted-payment-methods-block/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-accepted-payment-methods-block/block.json
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/block.json
diff --git a/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-accepted-payment-methods-block/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx
similarity index 73%
rename from assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-accepted-payment-methods-block/block.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx
index 6f7c549d38f..46711e65077 100644
--- a/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-accepted-payment-methods-block/block.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx
@@ -3,21 +3,20 @@
*/
import { PaymentMethodIcons } from '@woocommerce/base-components/cart-checkout';
import { usePaymentMethods } from '@woocommerce/base-context/hooks';
-
-/**
- * Internal dependencies
- */
-import type PaymentMethodConfig from '../../../../../blocks-registry/payment-methods/payment-method-config';
+import type {
+ PaymentMethods,
+ PaymentMethodIcons as PaymentMethodIconsType,
+} from '@woocommerce/type-defs/payments';
const getIconsFromPaymentMethods = (
- paymentMethods: PaymentMethodConfig[]
-) => {
+ paymentMethods: PaymentMethods
+): PaymentMethodIconsType => {
return Object.values( paymentMethods ).reduce( ( acc, paymentMethod ) => {
if ( paymentMethod.icons !== null ) {
acc = acc.concat( paymentMethod.icons );
}
return acc;
- }, [] );
+ }, [] as PaymentMethodIconsType );
};
const Block = (): JSX.Element => {
diff --git a/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-accepted-payment-methods-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-accepted-payment-methods-block/edit.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-accepted-payment-methods-block/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-accepted-payment-methods-block/frontend.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-accepted-payment-methods-block/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-accepted-payment-methods-block/index.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/index.tsx
diff --git a/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/block.json
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/block.json
diff --git a/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/block.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/block.tsx
diff --git a/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/edit.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/editor.scss b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/editor.scss
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/editor.scss
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/editor.scss
diff --git a/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/index.tsx
similarity index 70%
rename from assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/index.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/index.tsx
index 239e7897c98..4be55d59f63 100644
--- a/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-express-payment-block/index.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/index.tsx
@@ -2,7 +2,7 @@
* External dependencies
*/
import { Icon, card } from '@woocommerce/icons';
-import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
/**
* Internal dependencies
@@ -10,7 +10,7 @@ import { registerExperimentalBlockType } from '@woocommerce/block-settings';
import { Edit, Save } from './edit';
import metadata from './block.json';
-registerExperimentalBlockType( metadata, {
+registerFeaturePluginBlockType( metadata, {
icon: {
src:
-
+
);
};
diff --git a/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-items-block/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/index.tsx
similarity index 70%
rename from assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-items-block/index.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/index.tsx
index cbe5a0f4ded..fa2a199ed84 100644
--- a/assets/js/blocks/cart-checkout/cart-i2/inner-blocks/cart-items-block/index.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/index.tsx
@@ -2,7 +2,7 @@
* External dependencies
*/
import { Icon, column } from '@wordpress/icons';
-import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
/**
* Internal dependencies
@@ -10,7 +10,7 @@ import { registerExperimentalBlockType } from '@woocommerce/block-settings';
import { Edit, Save } from './edit';
import metadata from './block.json';
-registerExperimentalBlockType( metadata, {
+registerFeaturePluginBlockType( metadata, {
icon: {
src:
-
-
-`;
-
-exports[`Testing cart Shows individual tax lines if the store is set to do so 1`] = `
-
-
-
-
- - Your cart (3 items) -
-
-
-
-
-
-
-
-
-
- | - - Product - - | -- - Details - - | -- - Total - - | -
|---|---|---|
|
-
- Beanie
-
-
- 2 left in stock
-
-
-
-
- $6.40
-
-
-
-
-
-
-
-
-
-
-
-
- |
-
-
-
-
- $12.80
-
-
-
- |
- |
|
-
- Cap
-
-
-
-
- Previous price:
-
-
-
- Save
-
- $1.60
-
-
-
-
-
-
-
-
-
-
-
- |
-
-
-
-
- $11.20
-
-
-
- |
-
- 
-
-
-
-`;
-
-exports[`Testing cart Shows rate percentages after tax lines if the block is set to do so 1`] = `
-
-
-
-
- - Your cart (3 items) -
-
-
-
-
-
-
-
-
-
- | - - Product - - | -- - Details - - | -- - Total - - | -
|---|---|---|
|
-
- Beanie
-
-
- 2 left in stock
-
-
-
-
- $6.40
-
-
-
-
-
-
-
-
-
-
-
-
- |
-
-
-
-
- $12.80
-
-
-
- |
- |
|
-
- Cap
-
-
-
-
- Previous price:
-
-
-
- Save
-
- $1.60
-
-
-
-
-
-
-
-
-
-
-
- |
-
-
-
-
- $11.20
-
-
-
- |
-
-
-
-`;
diff --git a/assets/js/blocks/cart-checkout/cart/test/block.js b/assets/js/blocks/cart-checkout/cart/test/block.js
index b615dd9d755..9b5ca728649 100644
--- a/assets/js/blocks/cart-checkout/cart/test/block.js
+++ b/assets/js/blocks/cart-checkout/cart/test/block.js
@@ -5,21 +5,64 @@ import { render, screen, waitFor } from '@testing-library/react';
import { previewCart } from '@woocommerce/resource-previews';
import { dispatch } from '@wordpress/data';
import { CART_STORE_KEY as storeKey } from '@woocommerce/block-data';
-import { SlotFillProvider } from '@woocommerce/blocks-checkout';
import { default as fetchMock } from 'jest-fetch-mock';
-
/**
* Internal dependencies
*/
-import Block from '../block';
import { defaultCartState } from '../../../../data/default-states';
import { allSettings } from '../../../../settings/shared/settings-init';
-const CartBlock = ( props ) => (
-
-
-
-
- - Your cart (3 items) -
-
-
-
-
-
-
-
-
-
- | - - Product - - | -- - Details - - | -- - Total - - | -
|---|---|---|
|
-
- Beanie
-
-
- 2 left in stock
-
-
-
-
- $6.40
-
-
-
-
-
-
-
-
-
-
-
-
- |
-
-
-
-
- $12.80
-
-
-
- |
- |
|
-
- Cap
-
-
-
-
- Previous price:
-
-
-
- Save
-
- $1.60
-
-
-
-
-
-
-
-
-
-
-
- |
-
-
-
-
- $11.20
-
-
-
- |
-
Empty Cart
+
+
+
+
+
+
+
+
+
+
+
+
+ ';
+
+ $content = preg_replace( '/
/mi', $inner_blocks_html, $content );
+ $content = $content . '
';
+ }
+ return $content;
}
/**
@@ -171,85 +196,4 @@ protected function deep_sort_with_accents( $array ) {
protected function hydrate_from_api() {
$this->asset_data_registry->hydrate_api_request( '/wc/store/cart' );
}
-
- /**
- * Render skeleton markup for the cart block.
- */
- protected function get_skeleton() {
- return '
-
- ' . $this->get_skeleton_inline_script();
- }
}
diff --git a/src/BlockTypes/CartI2.php b/src/BlockTypes/CartI2.php
deleted file mode 100644
index c327b7aa877..00000000000
--- a/src/BlockTypes/CartI2.php
+++ /dev/null
@@ -1,174 +0,0 @@
- 'wc-' . $this->block_name . '-block',
- 'path' => $this->asset_api->get_block_asset_build_path( $this->block_name ),
- 'dependencies' => [ 'wc-blocks' ],
- ];
- return $key ? $script[ $key ] : $script;
- }
-
- /**
- * Get the frontend script handle for this block type.
- *
- * @see $this->register_block_type()
- * @param string $key Data to get, or default to everything.
- * @return array|string
- */
- protected function get_block_type_script( $key = null ) {
- $script = [
- 'handle' => 'wc-' . $this->block_name . '-block-frontend',
- 'path' => $this->asset_api->get_block_asset_build_path( $this->block_name . '-frontend' ),
- 'dependencies' => [],
- ];
- return $key ? $script[ $key ] : $script;
- }
-
- /**
- * Enqueue frontend assets for this block, just in time for rendering.
- *
- * @param array $attributes Any attributes that currently are available from the block.
- */
- protected function enqueue_assets( array $attributes ) {
- /**
- * Fires before cart block scripts are enqueued.
- */
- do_action( 'woocommerce_blocks_enqueue_cart_block_scripts_before' );
- parent::enqueue_assets( $attributes );
- /**
- * Fires after cart block scripts are enqueued.
- */
- do_action( 'woocommerce_blocks_enqueue_cart_block_scripts_after' );
- }
-
- /**
- * Append frontend scripts when rendering the Cart block.
- *
- * @param array $attributes Block attributes.
- * @param string $content Block content.
- * @return string Rendered block type output.
- */
- protected function render( $attributes, $content ) {
- // Deregister core cart scripts and styles.
- wp_dequeue_script( 'wc-cart' );
- wp_dequeue_script( 'wc-password-strength-meter' );
- wp_dequeue_script( 'selectWoo' );
- wp_dequeue_style( 'select2' );
-
- return $content;
- }
-
- /**
- * Extra data passed through from server to client for block.
- *
- * @param array $attributes Any attributes that currently are available from the block.
- * Note, this will be empty in the editor context when the block is
- * not in the post content on editor load.
- */
- protected function enqueue_data( array $attributes = [] ) {
- parent::enqueue_data( $attributes );
-
- $this->asset_data_registry->add(
- 'shippingCountries',
- function() {
- return $this->deep_sort_with_accents( WC()->countries->get_shipping_countries() );
- },
- true
- );
- $this->asset_data_registry->add(
- 'shippingStates',
- function() {
- return $this->deep_sort_with_accents( WC()->countries->get_shipping_country_states() );
- },
- true
- );
- $this->asset_data_registry->add(
- 'countryLocale',
- function() {
- // Merge country and state data to work around https://github.com/woocommerce/woocommerce/issues/28944.
- $country_locale = wc()->countries->get_country_locale();
- $states = wc()->countries->get_states();
-
- foreach ( $states as $country => $states ) {
- if ( empty( $states ) ) {
- $country_locale[ $country ]['state']['required'] = false;
- $country_locale[ $country ]['state']['hidden'] = true;
- }
- }
- return $country_locale;
- },
- true
- );
- $this->asset_data_registry->add( 'baseLocation', wc_get_base_location(), true );
- $this->asset_data_registry->add( 'isShippingCalculatorEnabled', filter_var( get_option( 'woocommerce_enable_shipping_calc' ), FILTER_VALIDATE_BOOLEAN ), true );
- $this->asset_data_registry->add( 'displayItemizedTaxes', 'itemized' === get_option( 'woocommerce_tax_total_display' ), true );
- $this->asset_data_registry->add( 'displayCartPricesIncludingTax', 'incl' === get_option( 'woocommerce_tax_display_cart' ), true );
- $this->asset_data_registry->add( 'taxesEnabled', wc_tax_enabled(), true );
- $this->asset_data_registry->add( 'couponsEnabled', wc_coupons_enabled(), true );
- $this->asset_data_registry->add( 'shippingEnabled', wc_shipping_enabled(), true );
- $this->asset_data_registry->add( 'hasDarkEditorStyleSupport', current_theme_supports( 'dark-editor-style' ), true );
- $this->asset_data_registry->register_page_id( isset( $attributes['checkoutPageId'] ) ? $attributes['checkoutPageId'] : 0 );
-
- // Hydrate the following data depending on admin or frontend context.
- if ( ! is_admin() && ! WC()->is_rest_api_request() ) {
- $this->hydrate_from_api();
- }
-
- /**
- * Fires after cart block data is registered.
- */
- do_action( 'woocommerce_blocks_cart_enqueue_data' );
- }
-
- /**
- * Removes accents from an array of values, sorts by the values, then returns the original array values sorted.
- *
- * @param array $array Array of values to sort.
- * @return array Sorted array.
- */
- protected function deep_sort_with_accents( $array ) {
- if ( ! is_array( $array ) || empty( $array ) ) {
- return $array;
- }
-
- if ( is_array( reset( $array ) ) ) {
- return array_map( [ $this, 'deep_sort_with_accents' ], $array );
- }
-
- $array_without_accents = array_map( 'remove_accents', array_map( 'wc_strtolower', array_map( 'html_entity_decode', $array ) ) );
- asort( $array_without_accents );
- return array_replace( $array_without_accents, $array );
- }
-
- /**
- * Hydrate the cart block with data from the API.
- */
- protected function hydrate_from_api() {
- $this->asset_data_registry->hydrate_api_request( '/wc/store/cart' );
- }
-}
diff --git a/src/BlockTypes/Checkout.php b/src/BlockTypes/Checkout.php
index 659ce9be402..296f4d003f0 100644
--- a/src/BlockTypes/Checkout.php
+++ b/src/BlockTypes/Checkout.php
@@ -82,7 +82,7 @@ protected function render( $attributes, $content ) {
wp_dequeue_script( 'selectWoo' );
wp_dequeue_style( 'select2' );
- // If the content is empty, we may have transformed from an older checkout block. Insert the default list of blocks.
+ // If the content is empty, we may still be in the older checkout block. Insert the default list of blocks.
$regex_for_empty_block = '/
<\/div>/mi';
$is_empty = preg_match( $regex_for_empty_block, $content );
diff --git a/src/BlockTypesController.php b/src/BlockTypesController.php
index 4ded258e121..1ae5757ddca 100644
--- a/src/BlockTypesController.php
+++ b/src/BlockTypesController.php
@@ -183,7 +183,6 @@ protected function get_block_types() {
if ( Package::feature()->is_experimental_build() ) {
$block_types[] = 'SingleProduct';
- $block_types[] = 'CartI2';
$block_types[] = 'MiniCart';
}
diff --git a/src/Payments/Api.php b/src/Payments/Api.php
index 348d84760b4..72a2bbe0e70 100644
--- a/src/Payments/Api.php
+++ b/src/Payments/Api.php
@@ -63,7 +63,7 @@ protected function init() {
* @return array
*/
public function add_payment_method_script_dependencies( $dependencies, $handle ) {
- if ( ! in_array( $handle, [ 'wc-checkout-block', 'wc-checkout-block-frontend', 'wc-cart-block', 'wc-cart-block-frontend', 'wc-cart-i2-block', 'wc-cart-i2-block-frontend' ], true ) ) {
+ if ( ! in_array( $handle, [ 'wc-checkout-block', 'wc-checkout-block-frontend', 'wc-cart-block', 'wc-cart-block-frontend' ], true ) ) {
return $dependencies;
}
return array_merge( $dependencies, $this->payment_method_registry->get_all_active_payment_method_script_dependencies() );
@@ -214,7 +214,7 @@ public function verify_payment_methods_dependencies() {
sprintf( 'console.error( "%s" );', $error_message )
);
- $cart_checkout_scripts = [ 'wc-cart-block', 'wc-cart-block-frontend', 'wc-checkout-block', 'wc-checkout-block-frontend', 'wc-cart-i2-block', 'wc-cart-i2-block-frontend' ];
+ $cart_checkout_scripts = [ 'wc-cart-block', 'wc-cart-block-frontend', 'wc-checkout-block', 'wc-checkout-block-frontend' ];
foreach ( $cart_checkout_scripts as $script_handle ) {
if (
! array_key_exists( $script_handle, $wp_scripts->registered ) ||
diff --git a/tests/e2e/specs/backend/cart.test.js b/tests/e2e/specs/backend/cart.test.js
index 05ca8b22b62..d4eaa6c61f3 100644
--- a/tests/e2e/specs/backend/cart.test.js
+++ b/tests/e2e/specs/backend/cart.test.js
@@ -3,6 +3,7 @@
*/
import {
clickButton,
+ clickBlockToolbarButton,
openDocumentSettingsSidebar,
switchUserToAdmin,
getAllBlocks,
@@ -10,6 +11,7 @@ import {
import {
findLabelWithText,
visitBlockPage,
+ selectBlockByName,
} from '@woocommerce/blocks-test-utils';
import { merchant } from '@woocommerce/e2e-utils';
@@ -20,6 +22,7 @@ import {
closeModalIfExists,
openWidgetsEditorBlockInserter,
} from '../../utils.js';
+import { scrollTo } from '../../../utils';
const block = {
name: 'Cart',
@@ -88,25 +91,26 @@ describe( `${ block.name } Block`, () => {
`Could not find an element with class ${ block.class } - the block probably did not load correctly.`
);
} );
- await page.click( block.class );
+
await expect( page ).toMatchElement(
'[hidden] .wc-block-cart__empty-cart__title'
);
+
+ await selectBlockByName( block.slug );
+ await clickBlockToolbarButton( 'Switch view', 'ariaLabel' );
+ await page.waitForSelector( '.components-popover__content' );
await clickButton( 'Empty Cart' );
+
await expect( page ).not.toMatchElement(
'[hidden] .wc-block-cart__empty-cart__title'
);
- // Simulate user scrolling up so the block toolbar doesn't cover
- // the `Full Cart` button.
- await page.evaluate( () => {
- document
- .querySelector( '.wc-block-view-switch-control' )
- .scrollIntoView( {
- block: 'center',
- inline: 'center',
- } );
- } );
- await clickButton( 'Full Cart' );
+
+ await selectBlockByName( block.slug );
+ await clickBlockToolbarButton( 'Switch view', 'ariaLabel' );
+ await page.waitForSelector( '.components-popover__content' );
+ await scrollTo( '.components-popover__content' );
+ await clickButton( 'Filled Cart' );
+
await expect( page ).toMatchElement(
'[hidden] .wc-block-cart__empty-cart__title'
);
@@ -115,7 +119,9 @@ describe( `${ block.name } Block`, () => {
describe( 'attributes', () => {
beforeEach( async () => {
await openDocumentSettingsSidebar();
- await page.click( block.class );
+ await selectBlockByName(
+ 'woocommerce/cart-order-summary-block'
+ );
} );
it( 'can toggle Shipping calculator', async () => {
diff --git a/tests/js/jest.config.json b/tests/js/jest.config.json
index bb7b2aa35e4..2187e1a2166 100644
--- a/tests/js/jest.config.json
+++ b/tests/js/jest.config.json
@@ -50,5 +50,6 @@
"transform": {
"^.+\\.(js|ts|tsx)$": "/tests/js/jestPreprocess.js"
},
- "verbose": true
+ "verbose": true,
+ "moduleFileExtensions": ["js", "jsx", "ts", "tsx", "json", "node"]
}