woocommerce/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/edit.js

248 lines
6.7 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import classnames from 'classnames';
import { __ } from '@wordpress/i18n';
import { CartCheckoutFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt';
import { InspectorControls } from '@wordpress/block-editor';
import {
Disabled,
PanelBody,
ToggleControl,
Notice,
} from '@wordpress/components';
import PropTypes from 'prop-types';
import { CartCheckoutCompatibilityNotice } from '@woocommerce/editor-components/compatibility-notices';
import ViewSwitcher from '@woocommerce/editor-components/view-switcher';
import PageSelector from '@woocommerce/editor-components/page-selector';
Move Block Type Settings into Block Type Classes (https://github.com/woocommerce/woocommerce-blocks/pull/4059) * BLOCK SETTINGS: Remove unused constants/settings * AssetDataRegistry: Helpers to check for settings that exist, and registering page ID/permalinks * Move checkout and cart block settings to checkout and cart blocktypes * Move isShippingCalculatorEnabled to cart block * Remove HAS_DARK_EDITOR_STYLE_SUPPORT and IS_SHIPPING_CALCULATOR_ENABLED in favour of getSetting * Move displayCartPricesIncludingTax to blocktypes, and implement getSetting * Move block settings to core settings and blocktypes * Fix namespace usage * Move review settings * move tag settings * Keep productCount in core data * Move min and default height * Improve storePages code * Move attributes to attribute filter block type * Move $word_count_type outside of settings array * Remove unneeded setting in preview data (shippingCostRequiresAddress) * Move min/max settings dependency from GridLayoutControl to Blocks themselves and use getSettings * DEFAULT_COLUMNS and ROWS to settings * Move product columns/rows to block types * Add grid settings to AllProducts block * Correct default rows * correct min rows default * Move hasDarkEditorStyleSupport * Move hideOutOfStockItems to block type settings * Move build settings to inline script dependency * Pass data through asset api and move restApiRoutes * Export all core settings as constants * Remove WORD_COUNT_TYPE from core settings * Move some other core settings to assets * Update constants * Make settings use TypeScript * Update CURRENT_USER_IS_ADMIN usage * WORD_COUNT_TYPE * REST_API_ROUTES * REVIEW_RATINGS_ENABLED and SHOW_AVATARS * Remove REVIEW_RATINGS_ENABLED and SHOW_AVATARS constants * Remove MIN_HEIGHT * Remove DEFAULT_HEIGHT * PLACEHOLDER_IMG_SRC * LIMIT_TAGS * HAS_PRODUCTS * HOME_URL * HAS_TAGS * COUPONS_ENABLED * SHIPPING_ENABLED * TAXES_ENABLED * DISPLAY_ITEMIZED_TAXES * SHIPPING_COST_REQUIRES_ADDRESS * SHIPPING_STATES and SHIPPING_COUNTRIES * STORE_PAGES * ALLOWED_COUNTRIES * ALLOWED_STATES * SHIPPING_METHODS_EXIST * PAYMENT_GATEWAY_SORT_ORDER * CHECKOUT_SHOW_LOGIN_REMINDER * CHECKOUT_ALLOWS_GUEST and CHECKOUT_ALLOWS_SIGNUP * ATTRIBUTES * DISPLAY_CART_PRICES_INCLUDING_TAX * DISPLAY_CART_PRICES_INCLUDING_TAX * update build for TS files * fix build dir * Move blocks build config params * Move placeholderImgSrc to core settings * Move rest api hydration hoc to shared hocs and provide it restApiRoutes directly to avoid asset data registration * Move wordCountType to abstract block * Remove WORD_COUNT_TYPE in favour of getSetting * Move IS_LARGE_CATALOG and PRODUCT_COUNT to abstract block type and use getSetting inline * Add wcBlocksConfig * fix tests * Remove unused $asset_data_registry * remove console.log * Move build settings to abstract block * Trigger build again * Move hydration back to regular hocs for compatibility with trunk (merge conflict) * Removed wcSharedHocsConfig * esc home url * Update search fixture * Update search snap * 40000 timeout * hasProducts -> productCount * Product Count is part of blocks config * update mocks * Use version comparison to determine if batching is enabled * Change isWpVersion * scrollTo button
2021-04-22 11:37:27 +00:00
import { CART_PAGE_ID } from '@woocommerce/block-settings';
import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
import {
EditorProvider,
useEditorContext,
CartProvider,
} from '@woocommerce/base-context';
import { createInterpolateElement } from 'wordpress-element';
import { useRef } from '@wordpress/element';
Move Block Type Settings into Block Type Classes (https://github.com/woocommerce/woocommerce-blocks/pull/4059) * BLOCK SETTINGS: Remove unused constants/settings * AssetDataRegistry: Helpers to check for settings that exist, and registering page ID/permalinks * Move checkout and cart block settings to checkout and cart blocktypes * Move isShippingCalculatorEnabled to cart block * Remove HAS_DARK_EDITOR_STYLE_SUPPORT and IS_SHIPPING_CALCULATOR_ENABLED in favour of getSetting * Move displayCartPricesIncludingTax to blocktypes, and implement getSetting * Move block settings to core settings and blocktypes * Fix namespace usage * Move review settings * move tag settings * Keep productCount in core data * Move min and default height * Improve storePages code * Move attributes to attribute filter block type * Move $word_count_type outside of settings array * Remove unneeded setting in preview data (shippingCostRequiresAddress) * Move min/max settings dependency from GridLayoutControl to Blocks themselves and use getSettings * DEFAULT_COLUMNS and ROWS to settings * Move product columns/rows to block types * Add grid settings to AllProducts block * Correct default rows * correct min rows default * Move hasDarkEditorStyleSupport * Move hideOutOfStockItems to block type settings * Move build settings to inline script dependency * Pass data through asset api and move restApiRoutes * Export all core settings as constants * Remove WORD_COUNT_TYPE from core settings * Move some other core settings to assets * Update constants * Make settings use TypeScript * Update CURRENT_USER_IS_ADMIN usage * WORD_COUNT_TYPE * REST_API_ROUTES * REVIEW_RATINGS_ENABLED and SHOW_AVATARS * Remove REVIEW_RATINGS_ENABLED and SHOW_AVATARS constants * Remove MIN_HEIGHT * Remove DEFAULT_HEIGHT * PLACEHOLDER_IMG_SRC * LIMIT_TAGS * HAS_PRODUCTS * HOME_URL * HAS_TAGS * COUPONS_ENABLED * SHIPPING_ENABLED * TAXES_ENABLED * DISPLAY_ITEMIZED_TAXES * SHIPPING_COST_REQUIRES_ADDRESS * SHIPPING_STATES and SHIPPING_COUNTRIES * STORE_PAGES * ALLOWED_COUNTRIES * ALLOWED_STATES * SHIPPING_METHODS_EXIST * PAYMENT_GATEWAY_SORT_ORDER * CHECKOUT_SHOW_LOGIN_REMINDER * CHECKOUT_ALLOWS_GUEST and CHECKOUT_ALLOWS_SIGNUP * ATTRIBUTES * DISPLAY_CART_PRICES_INCLUDING_TAX * DISPLAY_CART_PRICES_INCLUDING_TAX * update build for TS files * fix build dir * Move blocks build config params * Move placeholderImgSrc to core settings * Move rest api hydration hoc to shared hocs and provide it restApiRoutes directly to avoid asset data registration * Move wordCountType to abstract block * Remove WORD_COUNT_TYPE in favour of getSetting * Move IS_LARGE_CATALOG and PRODUCT_COUNT to abstract block type and use getSetting inline * Add wcBlocksConfig * fix tests * Remove unused $asset_data_registry * remove console.log * Move build settings to abstract block * Trigger build again * Move hydration back to regular hocs for compatibility with trunk (merge conflict) * Removed wcSharedHocsConfig * esc home url * Update search fixture * Update search snap * 40000 timeout * hasProducts -> productCount * Product Count is part of blocks config * update mocks * Use version comparison to determine if batching is enabled * Change isWpVersion * scrollTo button
2021-04-22 11:37:27 +00:00
import { getAdminLink, getSetting } from '@woocommerce/settings';
import { previewCart } from '@woocommerce/resource-previews';
/**
* Internal dependencies
*/
import Block from './block.js';
import EmptyCartEdit from './empty-cart-edit';
import './editor.scss';
const BlockSettings = ( { attributes, setAttributes } ) => {
const {
isShippingCalculatorEnabled,
checkoutPageId,
hasDarkControls,
Update design of cart and checkout sidebars (https://github.com/woocommerce/woocommerce-blocks/pull/4180) * Update cart/coupon/shipping design * Add order summary heading * Move and style discounts on checkout sidebar * Add rate to tax lines * Ensure the option to display taxes itemised is available to Cart block * Output individual tax items below the total & add styles for this * Add success notice under coupon input on successful coupon addition * Add border to bottom of Totals footer * Show success message when adding coupon * Add padding to cart item rows * Add preview data to cart for when taxes are enabled * Add rate to cart response type * Add showRateAfterTaxName attribute to Cart block * Add control to cart block to show rate percentage after rate name * Add rate % in cart totals only if option is toggled on * Pass showRateAfterTaxName attribute down to TotalsTaxes * Add showRateAfterTaxName to Checkout block * Add control to block editor for showRateAfterTaxName on Checkout * Pass showRateAfterTaxName down to TotalsTaxes in Checkout * Change label for showing tax rates in cart and checkout blocks * Add test to ensure Taxes section shows in Cart block * Add tests for cart sidebar and rate percentages * Remove order summary title from checkout sidebar * Check if taxes are enabled before rendering the option to show rate %s * Add ShippingVia component to show the selected rate in sidebar * Remove value from individual tax rates * Remove bold from Shipping via label * Remove coupon added successfully message * Ensure panel headings that are h2s are the same colour as others * Clean up eslint warnings * Show rate %s by default * Update snapshots following design changes Co-authored-by: Mike Jolley <mike.jolley@me.com>
2021-05-17 14:00:57 +00:00
showRateAfterTaxName,
} = attributes;
const { currentPostId } = useEditorContext();
const { current: savedCheckoutPageId } = useRef( checkoutPageId );
return (
<InspectorControls>
{ currentPostId !== CART_PAGE_ID && (
<Notice
className="wc-block-cart__page-notice"
isDismissible={ false }
status="warning"
>
{ createInterpolateElement(
__(
'If you would like to use this block as your default cart you must update your <a>page settings in WooCommerce</a>.',
'woo-gutenberg-products-block'
),
{
a: (
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
href={ getAdminLink(
'admin.php?page=wc-settings&tab=advanced'
) }
target="_blank"
rel="noopener noreferrer"
/>
),
}
) }
</Notice>
) }
Move Block Type Settings into Block Type Classes (https://github.com/woocommerce/woocommerce-blocks/pull/4059) * BLOCK SETTINGS: Remove unused constants/settings * AssetDataRegistry: Helpers to check for settings that exist, and registering page ID/permalinks * Move checkout and cart block settings to checkout and cart blocktypes * Move isShippingCalculatorEnabled to cart block * Remove HAS_DARK_EDITOR_STYLE_SUPPORT and IS_SHIPPING_CALCULATOR_ENABLED in favour of getSetting * Move displayCartPricesIncludingTax to blocktypes, and implement getSetting * Move block settings to core settings and blocktypes * Fix namespace usage * Move review settings * move tag settings * Keep productCount in core data * Move min and default height * Improve storePages code * Move attributes to attribute filter block type * Move $word_count_type outside of settings array * Remove unneeded setting in preview data (shippingCostRequiresAddress) * Move min/max settings dependency from GridLayoutControl to Blocks themselves and use getSettings * DEFAULT_COLUMNS and ROWS to settings * Move product columns/rows to block types * Add grid settings to AllProducts block * Correct default rows * correct min rows default * Move hasDarkEditorStyleSupport * Move hideOutOfStockItems to block type settings * Move build settings to inline script dependency * Pass data through asset api and move restApiRoutes * Export all core settings as constants * Remove WORD_COUNT_TYPE from core settings * Move some other core settings to assets * Update constants * Make settings use TypeScript * Update CURRENT_USER_IS_ADMIN usage * WORD_COUNT_TYPE * REST_API_ROUTES * REVIEW_RATINGS_ENABLED and SHOW_AVATARS * Remove REVIEW_RATINGS_ENABLED and SHOW_AVATARS constants * Remove MIN_HEIGHT * Remove DEFAULT_HEIGHT * PLACEHOLDER_IMG_SRC * LIMIT_TAGS * HAS_PRODUCTS * HOME_URL * HAS_TAGS * COUPONS_ENABLED * SHIPPING_ENABLED * TAXES_ENABLED * DISPLAY_ITEMIZED_TAXES * SHIPPING_COST_REQUIRES_ADDRESS * SHIPPING_STATES and SHIPPING_COUNTRIES * STORE_PAGES * ALLOWED_COUNTRIES * ALLOWED_STATES * SHIPPING_METHODS_EXIST * PAYMENT_GATEWAY_SORT_ORDER * CHECKOUT_SHOW_LOGIN_REMINDER * CHECKOUT_ALLOWS_GUEST and CHECKOUT_ALLOWS_SIGNUP * ATTRIBUTES * DISPLAY_CART_PRICES_INCLUDING_TAX * DISPLAY_CART_PRICES_INCLUDING_TAX * update build for TS files * fix build dir * Move blocks build config params * Move placeholderImgSrc to core settings * Move rest api hydration hoc to shared hocs and provide it restApiRoutes directly to avoid asset data registration * Move wordCountType to abstract block * Remove WORD_COUNT_TYPE in favour of getSetting * Move IS_LARGE_CATALOG and PRODUCT_COUNT to abstract block type and use getSetting inline * Add wcBlocksConfig * fix tests * Remove unused $asset_data_registry * remove console.log * Move build settings to abstract block * Trigger build again * Move hydration back to regular hocs for compatibility with trunk (merge conflict) * Removed wcSharedHocsConfig * esc home url * Update search fixture * Update search snap * 40000 timeout * hasProducts -> productCount * Product Count is part of blocks config * update mocks * Use version comparison to determine if batching is enabled * Change isWpVersion * scrollTo button
2021-04-22 11:37:27 +00:00
{ getSetting( 'shippingEnabled', true ) && (
<PanelBody
title={ __(
'Shipping rates',
'woo-gutenberg-products-block'
) }
>
<ToggleControl
label={ __(
'Shipping calculator',
'woo-gutenberg-products-block'
) }
help={ __(
'Allow customers to estimate shipping by entering their address.',
'woo-gutenberg-products-block'
) }
checked={ isShippingCalculatorEnabled }
onChange={ () =>
setAttributes( {
isShippingCalculatorEnabled: ! isShippingCalculatorEnabled,
} )
}
/>
</PanelBody>
) }
Update design of cart and checkout sidebars (https://github.com/woocommerce/woocommerce-blocks/pull/4180) * Update cart/coupon/shipping design * Add order summary heading * Move and style discounts on checkout sidebar * Add rate to tax lines * Ensure the option to display taxes itemised is available to Cart block * Output individual tax items below the total & add styles for this * Add success notice under coupon input on successful coupon addition * Add border to bottom of Totals footer * Show success message when adding coupon * Add padding to cart item rows * Add preview data to cart for when taxes are enabled * Add rate to cart response type * Add showRateAfterTaxName attribute to Cart block * Add control to cart block to show rate percentage after rate name * Add rate % in cart totals only if option is toggled on * Pass showRateAfterTaxName attribute down to TotalsTaxes * Add showRateAfterTaxName to Checkout block * Add control to block editor for showRateAfterTaxName on Checkout * Pass showRateAfterTaxName down to TotalsTaxes in Checkout * Change label for showing tax rates in cart and checkout blocks * Add test to ensure Taxes section shows in Cart block * Add tests for cart sidebar and rate percentages * Remove order summary title from checkout sidebar * Check if taxes are enabled before rendering the option to show rate %s * Add ShippingVia component to show the selected rate in sidebar * Remove value from individual tax rates * Remove bold from Shipping via label * Remove coupon added successfully message * Ensure panel headings that are h2s are the same colour as others * Clean up eslint warnings * Show rate %s by default * Update snapshots following design changes Co-authored-by: Mike Jolley <mike.jolley@me.com>
2021-05-17 14:00:57 +00:00
{ getSetting( 'taxesEnabled' ) &&
getSetting( 'displayItemizedTaxes', false ) &&
! getSetting( 'displayCartPricesIncludingTax', false ) && (
<PanelBody
title={ __( 'Taxes', 'woo-gutenberg-products-block' ) }
>
<ToggleControl
label={ __(
'Show rate after tax name',
'woo-gutenberg-products-block'
) }
help={ __(
'Show the percentage rate alongside each tax line in the summary.',
'woo-gutenberg-products-block'
) }
checked={ showRateAfterTaxName }
onChange={ () =>
setAttributes( {
showRateAfterTaxName: ! showRateAfterTaxName,
} )
}
/>
</PanelBody>
) }
{ ! (
currentPostId === CART_PAGE_ID && savedCheckoutPageId === 0
) && (
<PageSelector
pageId={ checkoutPageId }
setPageId={ ( id ) =>
setAttributes( { checkoutPageId: id } )
}
labels={ {
title: __(
'Proceed to Checkout button',
'woo-gutenberg-products-block'
),
default: __(
'WooCommerce Checkout Page',
'woo-gutenberg-products-block'
),
} }
/>
) }
<PanelBody title={ __( 'Style', 'woo-gutenberg-products-block' ) }>
<ToggleControl
label={ __(
'Dark mode inputs',
'woo-gutenberg-products-block'
) }
help={ __(
'Inputs styled specifically for use on dark background colors.',
'woo-gutenberg-products-block'
) }
checked={ hasDarkControls }
onChange={ () =>
setAttributes( {
hasDarkControls: ! hasDarkControls,
} )
}
/>
</PanelBody>
<CartCheckoutFeedbackPrompt />
</InspectorControls>
);
};
/**
* Component to handle edit mode of "Cart Block".
*
* Note: We need to always render `<InnerBlocks>` in the editor. Otherwise,
* if the user saves the page without having triggered the 'Empty Cart'
* view, inner blocks would not be saved and they wouldn't be visible
* in the frontend.
*
* @param {Object} props Incoming props for the component.
* @param {string} props.className CSS class used.
* @param {Object} props.attributes Attributes available.
* @param {function(any):any} props.setAttributes Setter for attributes.
*/
const CartEditor = ( { className, attributes, setAttributes } ) => {
return (
<div
className={ classnames( className, 'wp-block-woocommerce-cart', {
'is-editor-preview': attributes.isPreview,
} ) }
>
<ViewSwitcher
label={ __( 'Edit', 'woo-gutenberg-products-block' ) }
views={ [
{
value: 'full',
name: __( 'Full Cart', 'woo-gutenberg-products-block' ),
},
{
value: 'empty',
name: __(
'Empty Cart',
'woo-gutenberg-products-block'
),
},
] }
defaultView={ 'full' }
render={ ( currentView ) => (
<BlockErrorBoundary
header={ __(
'Cart Block Error',
'woo-gutenberg-products-block'
) }
text={ __(
'There was an error whilst rendering the cart block. If this problem continues, try re-creating the block.',
'woo-gutenberg-products-block'
) }
showErrorMessage={ true }
errorMessagePrefix={ __(
'Error message:',
'woo-gutenberg-products-block'
) }
>
{ currentView === 'full' && (
<>
<EditorProvider previewData={ { previewCart } }>
<BlockSettings
attributes={ attributes }
setAttributes={ setAttributes }
/>
<Disabled>
<CartProvider>
<Block attributes={ attributes } />
</CartProvider>
</Disabled>
</EditorProvider>
<EmptyCartEdit hidden={ true } />
</>
) }
{ currentView === 'empty' && <EmptyCartEdit /> }
</BlockErrorBoundary>
) }
/>
<CartCheckoutCompatibilityNotice blockName="cart" />
</div>
);
};
CartEditor.propTypes = {
className: PropTypes.string,
};
export default CartEditor;