woocommerce/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/index.js

191 lines
5.5 KiB
JavaScript
Raw Normal View History

Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
/**
* External dependencies
*/
Add Cart totals to Cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1411) * Add Cart totals to Cart block * Accessibility improvements * Load vendors styles separately * Use same shipping placeholders for cart and checkout * Refactor how we import @wordpress/components styles so only panel styles are imported * Remove style-loader from vendors styles build process * Add htmlFor attribute to TotalsCouponCodeInput * Update totalItems shape to match API * Fix wrong total items shape using numbers instead of strings * Rename wc-blocks classes to wc-block * Remove unnecessary parseInt() * Add radix to parseInt() * Rename totalRows to totalRowsConfig * Move placeholder content out of the component * Use Card component for cart's sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/1423) * Use Card component for cart's sidebar * Split RadioControl component * No need to use Label in RadioControlOption * Remove no longer valid @todo comment * Use 'checked' prop instead of 'selected' in RadioControlOption * Rename wc-blocks classes to wc-block * Rename wc-blocks classes to wc-block (II) * Make sure radio control ids are unique using withComponentId * Load PanelBody and PanelRow from last version of @wordpress/components * Create vendors-frontend.js file * Load wordpress-component instead of @wordpress/components from <Button> component * Only load 'withRestApiHydration' HOC * Make vendors-frontend a dependency of cart-frontend script * Revert "Only load 'withRestApiHydration' HOC" This reverts commit 9f9b9759a98047b26e7d8f04189ffe78c1d5bb06. * Fix fieldset background
2020-01-10 14:37:27 +00:00
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import {
TotalsCouponCodeInput,
TotalsItem,
} from '@woocommerce/base-components/totals';
import RadioControl from '@woocommerce/base-components/radio-control';
import {
COUPONS_ENABLED,
DISPLAY_PRICES_INCLUDING_TAXES,
} from '@woocommerce/block-settings';
import { getCurrencyFromPriceResponse } from '@woocommerce/base-utils';
import { Card, CardBody } from 'wordpress-components';
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
import { previewCartItems } from '@woocommerce/resource-previews';
/**
* Internal dependencies
*/
import CheckoutButton from './checkout-button';
Add Cart totals to Cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1411) * Add Cart totals to Cart block * Accessibility improvements * Load vendors styles separately * Use same shipping placeholders for cart and checkout * Refactor how we import @wordpress/components styles so only panel styles are imported * Remove style-loader from vendors styles build process * Add htmlFor attribute to TotalsCouponCodeInput * Update totalItems shape to match API * Fix wrong total items shape using numbers instead of strings * Rename wc-blocks classes to wc-block * Remove unnecessary parseInt() * Add radix to parseInt() * Rename totalRows to totalRowsConfig * Move placeholder content out of the component * Use Card component for cart's sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/1423) * Use Card component for cart's sidebar * Split RadioControl component * No need to use Label in RadioControlOption * Remove no longer valid @todo comment * Use 'checked' prop instead of 'selected' in RadioControlOption * Rename wc-blocks classes to wc-block * Rename wc-blocks classes to wc-block (II) * Make sure radio control ids are unique using withComponentId * Load PanelBody and PanelRow from last version of @wordpress/components * Create vendors-frontend.js file * Load wordpress-component instead of @wordpress/components from <Button> component * Only load 'withRestApiHydration' HOC * Make vendors-frontend a dependency of cart-frontend script * Revert "Only load 'withRestApiHydration' HOC" This reverts commit 9f9b9759a98047b26e7d8f04189ffe78c1d5bb06. * Fix fieldset background
2020-01-10 14:37:27 +00:00
import placeholderShippingMethods from '../../placeholder-shipping-methods';
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
import CartLineItemsTitle from './cart-line-items-title';
import CartLineItemsTable from './cart-line-items-table';
import './style.scss';
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
import './editor.scss';
Add Cart totals to Cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1411) * Add Cart totals to Cart block * Accessibility improvements * Load vendors styles separately * Use same shipping placeholders for cart and checkout * Refactor how we import @wordpress/components styles so only panel styles are imported * Remove style-loader from vendors styles build process * Add htmlFor attribute to TotalsCouponCodeInput * Update totalItems shape to match API * Fix wrong total items shape using numbers instead of strings * Rename wc-blocks classes to wc-block * Remove unnecessary parseInt() * Add radix to parseInt() * Rename totalRows to totalRowsConfig * Move placeholder content out of the component * Use Card component for cart's sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/1423) * Use Card component for cart's sidebar * Split RadioControl component * No need to use Label in RadioControlOption * Remove no longer valid @todo comment * Use 'checked' prop instead of 'selected' in RadioControlOption * Rename wc-blocks classes to wc-block * Rename wc-blocks classes to wc-block (II) * Make sure radio control ids are unique using withComponentId * Load PanelBody and PanelRow from last version of @wordpress/components * Create vendors-frontend.js file * Load wordpress-component instead of @wordpress/components from <Button> component * Only load 'withRestApiHydration' HOC * Make vendors-frontend a dependency of cart-frontend script * Revert "Only load 'withRestApiHydration' HOC" This reverts commit 9f9b9759a98047b26e7d8f04189ffe78c1d5bb06. * Fix fieldset background
2020-01-10 14:37:27 +00:00
/**
* Given an API response with cart totals, generates an array of rows to display in the Cart block.
*
* @param {Object} cartTotals - Cart totals data as provided by the API.
* @returns {Object[]} Values to display in the cart block.
*/
const getTotalRowsConfig = ( cartTotals ) => {
const totalItems = parseInt( cartTotals.total_items, 10 );
const totalItemsTax = parseInt( cartTotals.total_items_tax, 10 );
const totalRowsConfig = [
{
label: __( 'List items:', 'woo-gutenberg-products-block' ),
value: DISPLAY_PRICES_INCLUDING_TAXES
? totalItems + totalItemsTax
: totalItems,
},
];
const totalFees = parseInt( cartTotals.total_fees, 10 );
if ( totalFees > 0 ) {
const totalFeesTax = parseInt( cartTotals.total_fees_tax, 10 );
totalRowsConfig.push( {
label: __( 'Fees:', 'woo-gutenberg-products-block' ),
value: DISPLAY_PRICES_INCLUDING_TAXES
? totalFees + totalFeesTax
: totalFees,
} );
}
const totalDiscount = parseInt( cartTotals.total_discount, 10 );
if ( totalDiscount > 0 ) {
const totalDiscountTax = parseInt( cartTotals.total_discount_tax, 10 );
totalRowsConfig.push( {
label: __( 'Discount:', 'woo-gutenberg-products-block' ),
value: DISPLAY_PRICES_INCLUDING_TAXES
? totalDiscount + totalDiscountTax
: totalDiscount,
} );
}
if ( ! DISPLAY_PRICES_INCLUDING_TAXES ) {
const totalTax = parseInt( cartTotals.total_tax, 10 );
totalRowsConfig.push( {
label: __( 'Taxes:', 'woo-gutenberg-products-block' ),
value: totalTax,
} );
}
const totalShipping = parseInt( cartTotals.total_shipping, 10 );
const totalShippingTax = parseInt( cartTotals.total_shipping_tax, 10 );
totalRowsConfig.push( {
label: __( 'Shipping:', 'woo-gutenberg-products-block' ),
value: DISPLAY_PRICES_INCLUDING_TAXES
? totalShipping + totalShippingTax
: totalShipping,
description: __(
'Shipping to location (change address)',
'woo-gutenberg-products-block'
),
} );
return totalRowsConfig;
};
// @todo this are placeholders
const onActivateCoupon = ( couponCode ) => {
// eslint-disable-next-line no-console
console.log( 'coupon activated: ' + couponCode );
};
const cartTotals = {
currency: 'EUR',
currency_minor_unit: 2,
total_items: '6000',
total_items_tax: '0',
total_fees: '0',
total_fees_tax: '0',
total_discount: '0',
total_discount_tax: '0',
total_shipping: '0',
total_shipping_tax: '0',
total_tax: '0',
total_price: '6000',
};
/**
* Component that renders the Cart block when user has something in cart aka "full".
*/
const Cart = () => {
Add Cart totals to Cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1411) * Add Cart totals to Cart block * Accessibility improvements * Load vendors styles separately * Use same shipping placeholders for cart and checkout * Refactor how we import @wordpress/components styles so only panel styles are imported * Remove style-loader from vendors styles build process * Add htmlFor attribute to TotalsCouponCodeInput * Update totalItems shape to match API * Fix wrong total items shape using numbers instead of strings * Rename wc-blocks classes to wc-block * Remove unnecessary parseInt() * Add radix to parseInt() * Rename totalRows to totalRowsConfig * Move placeholder content out of the component * Use Card component for cart's sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/1423) * Use Card component for cart's sidebar * Split RadioControl component * No need to use Label in RadioControlOption * Remove no longer valid @todo comment * Use 'checked' prop instead of 'selected' in RadioControlOption * Rename wc-blocks classes to wc-block * Rename wc-blocks classes to wc-block (II) * Make sure radio control ids are unique using withComponentId * Load PanelBody and PanelRow from last version of @wordpress/components * Create vendors-frontend.js file * Load wordpress-component instead of @wordpress/components from <Button> component * Only load 'withRestApiHydration' HOC * Make vendors-frontend a dependency of cart-frontend script * Revert "Only load 'withRestApiHydration' HOC" This reverts commit 9f9b9759a98047b26e7d8f04189ffe78c1d5bb06. * Fix fieldset background
2020-01-10 14:37:27 +00:00
const currency = getCurrencyFromPriceResponse( cartTotals );
const totalRowsConfig = getTotalRowsConfig( cartTotals );
const [ selectedShippingOption, setSelectedShippingOption ] = useState(
placeholderShippingMethods[ 0 ].value
);
return (
<div className="wc-block-cart">
<div className="wc-block-cart__main">
Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333) * render block on front end, add `Shopping cart` heading (baby steps) * fake data for editing full cart + show line count in header * add note about core/html using `is-active` class for toggle state * reinstate work-in-progress full cart component (lost in rebase) * reinstate full cart from master * component for full cart title & item count + margin tweaks: - add margin between main cart & sidebar - add margin after cart block * add cart items sample data + factor sample product image to module * use sample cart data for item count * basic table of cart line items (no styling) * prettification * show images for cart line items + initial table styling * cart quantity selector component (work in progress) * use state for cart product quantity, allow incr/decr from UI (WIP) * replace WIP custom quantity control with number edit (temporary) * correctly format cart line item total price * align cart item columns with headings + indent image on desktop * tweak css for cart line item padding on mobile so it's more explicit * show cart line item full price if discounted * add placeholder for cart remove item link * switch cart table to flex layout (was table)… This will allow us to move things around for mobile/responsive layout. * only show cart items table header on desktop * more cart items styling - row borders, appropriate padding + + move image width to variable + fix class name plurality for row (item not items) * use standard $gap instead of 1em for padding/margins * responsive (mobile) layout for cart line items: - shift line $ total to bottom right - stack quantity selector in product info column * remove extraneous cart table padding on mobile * comment about unused styles for quantity selector component * add follow up issue for todo * remove inappropriate href * render srcset & sizes for cart line item product image * remove todo comment * switch back to table markup for cart items (in progress): - table is more semantic, associates headers with columns * cart line items column widths - product column is larger (60%) * reinstate table row borders * bottom-align line item price on mobile * cart contents heading should be H2 + prettify * remove unused QuantitySelector code/styles, rename main class in line with BEM * defaults for QuantitySelector props * variable/property name tidies - match conventions/API * fix bug: line total price is only bottom-align on small screen * move QuantitySelector to root of components, intended to be generally useful * use lineItem directly for cart, specify shape in PropTypes * rename cart components to align with "line item" rather than "product" * rejig class names to better align with new component names & BEM style * show cart item image correct size: - use single column for product image and info, with flex container - specify image width (rem instead of px) * fix safari issue - cart product images displaying vertically stretched * shift product name left margin from image, to account for no-image case * experiment: bump bundlewatch size limit for cart temporarily: - our fake data inline image is heavy - when we switch to real API we will no longer need it * fix issue introduced when moving margin from image to details div: - product details needs margin on left (not right) * fix react props issues: - explicitly destructure image props for srcSet (vs srcset) - use API key field for line item key instead of id, fix duplicate test id - CartLineItemsTable takes an array of lineItems (incorrect PropTypes) * remove redundant divs + use conventional `null` (when no full price) * override editor styles to ensure cart product image is correct size * move cart items editor style override to editor.css * add an explicit readable heading for cart heading to match visual layout
2020-01-09 22:50:14 +00:00
<CartLineItemsTitle itemCount={ previewCartItems.length } />
<CartLineItemsTable lineItems={ previewCartItems } />
</div>
Add Cart totals to Cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1411) * Add Cart totals to Cart block * Accessibility improvements * Load vendors styles separately * Use same shipping placeholders for cart and checkout * Refactor how we import @wordpress/components styles so only panel styles are imported * Remove style-loader from vendors styles build process * Add htmlFor attribute to TotalsCouponCodeInput * Update totalItems shape to match API * Fix wrong total items shape using numbers instead of strings * Rename wc-blocks classes to wc-block * Remove unnecessary parseInt() * Add radix to parseInt() * Rename totalRows to totalRowsConfig * Move placeholder content out of the component * Use Card component for cart's sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/1423) * Use Card component for cart's sidebar * Split RadioControl component * No need to use Label in RadioControlOption * Remove no longer valid @todo comment * Use 'checked' prop instead of 'selected' in RadioControlOption * Rename wc-blocks classes to wc-block * Rename wc-blocks classes to wc-block (II) * Make sure radio control ids are unique using withComponentId * Load PanelBody and PanelRow from last version of @wordpress/components * Create vendors-frontend.js file * Load wordpress-component instead of @wordpress/components from <Button> component * Only load 'withRestApiHydration' HOC * Make vendors-frontend a dependency of cart-frontend script * Revert "Only load 'withRestApiHydration' HOC" This reverts commit 9f9b9759a98047b26e7d8f04189ffe78c1d5bb06. * Fix fieldset background
2020-01-10 14:37:27 +00:00
<Card className="wc-block-cart__sidebar" isElevated={ true }>
<CardBody>
<h2 className="wc-block-cart__totals-title">
{ __( 'Cart totals', 'woo-gutenberg-products-block' ) }
</h2>
{ totalRowsConfig.map(
( { label, value, description } ) => (
<TotalsItem
key={ label }
currency={ currency }
label={ label }
value={ value }
description={ description }
/>
)
) }
<fieldset className="wc-block-cart__shipping-options-fieldset">
<legend className="screen-reader-text">
{ __(
'Choose the shipping method.',
'woo-gutenberg-products-block'
) }
</legend>
<RadioControl
className="wc-block-cart__shipping-options"
selected={ selectedShippingOption }
options={ placeholderShippingMethods.map(
( option ) => ( {
label: option.label,
value: option.value,
description: [
option.price,
option.schedule,
]
.filter( Boolean )
.join( ' — ' ),
} )
) }
onChange={ ( newSelectedShippingOption ) =>
setSelectedShippingOption(
newSelectedShippingOption
)
}
/>
</fieldset>
{ COUPONS_ENABLED && (
<TotalsCouponCodeInput onSubmit={ onActivateCoupon } />
) }
<TotalsItem
className="wc-block-cart__totals-footer"
currency={ currency }
label={ __( 'Total', 'woo-gutenberg-products-block' ) }
value={ parseInt( cartTotals.total_price, 10 ) }
/>
<CheckoutButton />
</CardBody>
</Card>
</div>
);
};
Cart.propTypes = {};
export default Cart;