Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Commit

Permalink
Update design of cart and checkout sidebars (#4180)
Browse files Browse the repository at this point in the history
* 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 <[email protected]>
  • Loading branch information
2 people authored and grogou committed Aug 20, 2021
1 parent 0464883 commit 0b91fbe
Show file tree
Hide file tree
Showing 30 changed files with 2,575 additions and 77 deletions.
1 change: 1 addition & 0 deletions assets/css/abstracts/_colors.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
$no-stock-color: $alert-red;
$low-stock-color: $alert-yellow;
$in-stock-color: $alert-green;
$discount-color: $alert-green;

$placeholder-color: var(--global--color-primary, $gray-200);
$input-border-gray: #50575e;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,10 @@
import classNames from 'classnames';
import { _n, sprintf } from '@wordpress/i18n';
import { decodeEntities } from '@wordpress/html-entities';
import Label from '@woocommerce/base-components/label';
import Title from '@woocommerce/base-components/title';
import type { ReactElement } from 'react';
import type { PackageRateOption } from '@woocommerce/type-defs/shipping';
import { Panel } from '@woocommerce/blocks-checkout';
import Label from '@woocommerce/base-components/label';
import { useSelectShippingRate } from '@woocommerce/base-context/hooks';
import type { CartShippingPackageShippingRate } from '@woocommerce/type-defs/cart';

Expand Down Expand Up @@ -77,12 +76,9 @@ export const ShippingRatesControlPackage = ( {
const header = (
<>
{ ( showItems || collapsible ) && (
<Title
className="wc-block-components-shipping-rates-control__package-title"
headingLevel="3"
>
<div className="wc-block-components-shipping-rates-control__package-title">
{ packageData.name }
</Title>
</div>
) }
{ showItems && (
<ul className="wc-block-components-shipping-rates-control__package-items">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,6 @@
padding-top: em($gap-small);
}

.wc-block-components-shipping-rates-control__package-title {
@include text-heading();
font-weight: bold;
margin: 0;
}

// Remove panel padding because we are adding bottom padding to `.wc-block-components-radio-control`
// and `.wc-block-components-radio-control__option-layout` in the next ruleset.
.wc-block-components-panel__content {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,11 @@ const TotalsCoupon = ( {
title={
<Label
label={ __(
'Coupon Code?',
'Coupon code',
'woo-gutenberg-products-block'
) }
screenReaderLabel={ __(
'Introduce Coupon Code',
'Apply a coupon code',
'woo-gutenberg-products-block'
) }
htmlFor={ textInputId }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,7 @@
margin: 0;
padding: 0;
}

.wc-block-components-totals-discount .wc-block-components-totals-item__value {
color: $discount-color;
}
26 changes: 21 additions & 5 deletions assets/js/base/components/cart-checkout/totals/shipping/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { TotalsItem } from '@woocommerce/blocks-checkout';
import type { Currency } from '@woocommerce/price-format';
import type { ReactElement } from 'react';
import { getSetting, EnteredAddress } from '@woocommerce/settings';
import { ShippingVia } from '@woocommerce/base-components/cart-checkout/totals/shipping/shipping-via';

/**
* Internal dependencies
Expand Down Expand Up @@ -146,6 +147,14 @@ const TotalsShipping = ( {
setIsShippingCalculatorOpen,
};

const selectedShippingRates = shippingRates.flatMap(
( shippingPackage ) => {
return shippingPackage.shipping_rates
.filter( ( rate ) => rate.selected )
.flatMap( ( rate ) => rate.name );
}
);

return (
<div
className={ classnames(
Expand All @@ -168,11 +177,18 @@ const TotalsShipping = ( {
description={
<>
{ cartHasCalculatedShipping && (
<ShippingAddress
shippingAddress={ shippingAddress }
showCalculator={ showCalculator }
{ ...calculatorButtonProps }
/>
<>
<ShippingVia
selectedShippingRates={
selectedShippingRates
}
/>
<ShippingAddress
shippingAddress={ shippingAddress }
showCalculator={ showCalculator }
{ ...calculatorButtonProps }
/>
</>
) }
</>
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';

export const ShippingVia = ( {
selectedShippingRates,
}: {
selectedShippingRates: string[];
} ): JSX.Element => {
return (
<div className="wc-block-components-totals-item__description wc-block-components-totals-shipping__via">
{ __( 'via', 'woo-gutenberg-products-block' ) }{ ' ' }
{ selectedShippingRates.join( ', ' ) }
</div>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
border: 0;
}

.wc-block-components-totals-shipping__via {
margin-bottom: $gap;
}

.wc-block-components-totals-shipping__options {
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__description,
Expand Down
7 changes: 7 additions & 0 deletions assets/js/base/components/sidebar-layout/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,13 @@
}
}

.wc-block-components-sidebar .wc-block-components-panel > h2 {
@include reset-typography();
.wc-block-components-panel__button {
font-weight: 400;
}
}

// For Twenty Twenty we need to increase specificity a bit more.
.theme-twentytwenty {
.wc-block-components-sidebar .wc-block-components-panel > h2 {
Expand Down
4 changes: 4 additions & 0 deletions assets/js/blocks/cart-checkout/cart/attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ const blockAttributes = {
type: 'boolean',
default: getSetting( 'hasDarkEditorStyleSupport', false ),
},
showRateAfterTaxName: {
type: 'boolean',
default: true,
},
};

export default blockAttributes;
25 changes: 25 additions & 0 deletions assets/js/blocks/cart-checkout/cart/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ const BlockSettings = ( { attributes, setAttributes } ) => {
isShippingCalculatorEnabled,
checkoutPageId,
hasDarkControls,
showRateAfterTaxName,
} = attributes;
const { currentPostId } = useEditorContext();
const { current: savedCheckoutPageId } = useRef( checkoutPageId );
Expand Down Expand Up @@ -95,6 +96,30 @@ const BlockSettings = ( { attributes, setAttributes } ) => {
/>
</PanelBody>
) }
{ 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
) && (
Expand Down
21 changes: 14 additions & 7 deletions assets/js/blocks/cart-checkout/cart/full-cart/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ interface CartAttributes {
isShippingCalculatorEnabled: boolean;
checkoutPageId: number;
isPreview: boolean;
showRateAfterTaxName: boolean;
}

interface CartProps {
Expand All @@ -60,7 +61,11 @@ interface CartProps {
* @param {Object} props.attributes Incoming attributes for block.
*/
const Cart = ( { attributes }: CartProps ) => {
const { isShippingCalculatorEnabled, hasDarkControls } = attributes;
const {
isShippingCalculatorEnabled,
hasDarkControls,
showRateAfterTaxName,
} = attributes;

const {
cartItems,
Expand Down Expand Up @@ -141,6 +146,12 @@ const Cart = ( { attributes }: CartProps ) => {
removeCoupon={ removeCoupon }
values={ cartTotals }
/>
{ getSetting( 'couponsEnabled', true ) && (
<TotalsCoupon
onSubmit={ applyCoupon }
isLoading={ isApplyingCoupon }
/>
) }
{ cartNeedsShipping && (
<TotalsShipping
showCalculator={ isShippingCalculatorEnabled }
Expand All @@ -154,16 +165,12 @@ const Cart = ( { attributes }: CartProps ) => {
false
) && (
<TotalsTaxes
showRateAfterTaxName={ showRateAfterTaxName }
currency={ totalsCurrency }
values={ cartTotals }
/>
) }
{ getSetting( 'couponsEnabled', true ) && (
<TotalsCoupon
onSubmit={ applyCoupon }
isLoading={ isApplyingCoupon }
/>
) }

<TotalsFooterItem
currency={ totalsCurrency }
values={ cartTotals }
Expand Down
21 changes: 16 additions & 5 deletions assets/js/blocks/cart-checkout/cart/full-cart/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,17 @@ table.wc-block-cart-items {
}
}

.wc-block-cart .wc-block-components-shipping-rates-control__package {
@include with-translucent-border(1px 0 0);
.wc-block-cart {
.wc-block-components-totals-taxes,
.wc-block-components-totals-footer-item {
@include with-translucent-border(1px 0 0);
margin: 0;
padding: em($gap-small) 0;
}

.wc-block-components-totals-footer-item {
@include with-translucent-border(1px 0);
}
}

// Loading placeholder state.
Expand Down Expand Up @@ -236,13 +245,15 @@ table.wc-block-cart-items {
}
td {
@include with-translucent-border(1px 0 0);
padding: $gap $gap $gap 0;
padding: $gap 0 $gap $gap;
vertical-align: top;
}
th:last-child,
td:last-child {
th:last-child {
padding-right: 0;
}
td:last-child {
padding-right: $gap;
}
}

.wc-block-components-radio-control__input {
Expand Down
Loading

0 comments on commit 0b91fbe

Please sign in to comment.