Reuse the TotalsWrapper component for C& C blocks inner blocks

This component was removed in this PR, but we wrap components in the Cart and Checkout sidebar in a TotalsWrapper. This will ensure consistent spacing and borders are applied to items in the sidebar.
woocommerce · Apr 1, 2022 · 506eda5 · 506eda5
1 parent 3e35e51
commit 506eda5
Show file tree

Hide file tree

Showing 18 changed files with 117 additions and 113 deletions.
diff --git a/assets/js/base/components/cart-checkout/order-summary/index.tsx b/assets/js/base/components/cart-checkout/order-summary/index.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
 import { useContainerWidthContext } from '@woocommerce/base-context';
 import { Panel } from '@woocommerce/blocks-checkout';
 import type { CartItem } from '@woocommerce/types';
@@ -14,12 +13,10 @@ import OrderSummaryItem from './order-summary-item';
 import './style.scss';
 
 interface OrderSummaryProps {
-	className: string;
 	cartItems: CartItem[];
 }
 
 const OrderSummary = ( {
-	className = '',
 	cartItems = [],
 }: OrderSummaryProps ): null | JSX.Element => {
 	const { isLarge, hasContainerWidth } = useContainerWidthContext();
@@ -30,10 +27,7 @@ const OrderSummary = ( {
 
 	return (
 		<Panel
-			className={ classnames(
-				'wc-block-components-order-summary',
-				className
-			) }
+			className="wc-block-components-order-summary"
 			initialOpen={ isLarge }
 			hasBorder={ false }
 			title={

diff --git a/assets/js/base/components/cart-checkout/totals/coupon/index.tsx b/assets/js/base/components/cart-checkout/totals/coupon/index.tsx
@@ -13,7 +13,6 @@ import {
 	useValidationContext,
 } from '@woocommerce/base-context';
 import { Panel } from '@woocommerce/blocks-checkout';
-import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -37,18 +36,13 @@ export interface TotalsCouponProps {
 	 * Submit handler
 	 */
 	onSubmit?: ( couponValue: string ) => void;
-	/**
-	 * User defined classname in the block settings
-	 */
-	className?: string;
 }
 
 export const TotalsCoupon = ( {
 	instanceId,
 	isLoading = false,
 	initialOpen = false,
 	onSubmit = () => void 0,
-	className = '',
 }: TotalsCouponProps ): JSX.Element => {
 	const [ couponValue, setCouponValue ] = useState( '' );
 	const currentIsLoading = useRef( false );
@@ -68,10 +62,7 @@ export const TotalsCoupon = ( {
 
 	return (
 		<Panel
-			className={ classnames(
-				className,
-				'wc-block-components-totals-coupon'
-			) }
+			className="wc-block-components-totals-coupon"
 			hasBorder={ false }
 			initialOpen={ initialOpen }
 			title={

diff --git a/assets/js/base/components/cart-checkout/totals/discount/index.tsx b/assets/js/base/components/cart-checkout/totals/discount/index.tsx
@@ -15,7 +15,6 @@ import {
 	Currency,
 } from '@woocommerce/types';
 import { LooselyMustHave } from '@woocommerce/type-defs/utils';
-import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -34,7 +33,6 @@ export interface TotalsDiscountProps {
 		CartTotalsItem,
 		'total_discount' | 'total_discount_tax'
 	>;
-	className?: string;
 }
 
 const filteredCartCouponsFilterArg = {
@@ -47,7 +45,6 @@ const TotalsDiscount = ( {
 	isRemovingCoupon,
 	removeCoupon,
 	values,
-	className,
 }: TotalsDiscountProps ): JSX.Element | null => {
 	const {
 		total_discount: totalDiscount,
@@ -75,10 +72,7 @@ const TotalsDiscount = ( {
 
 	return (
 		<TotalsItem
-			className={ classNames(
-				className,
-				'wc-block-components-totals-discount'
-			) }
+			className="wc-block-components-totals-discount"
 			currency={ currency }
 			description={
 				filteredCartCoupons.length !== 0 && (

diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
@@ -4,6 +4,7 @@
 import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
 import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
+import { TotalsWrapper } from '@woocommerce/blocks-checkout';
 
 const Block = ( { className }: { className: string } ): JSX.Element | null => {
 	const couponsEnabled = getSetting( 'couponsEnabled', true );
@@ -15,11 +16,12 @@ const Block = ( { className }: { className: string } ): JSX.Element | null => {
 	}
 
 	return (
-		<TotalsCoupon
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			onSubmit={ applyCoupon }
-			isLoading={ isApplyingCoupon }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsCoupon
+				onSubmit={ applyCoupon }
+				isLoading={ isApplyingCoupon }
+			/>
+		</TotalsWrapper>
 	);
 };
 

diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx
@@ -7,7 +7,10 @@ import {
 	useStoreCartCoupons,
 	useStoreCart,
 } from '@woocommerce/base-context/hooks';
-import { ExperimentalDiscountsMeta } from '@woocommerce/blocks-checkout';
+import {
+	ExperimentalDiscountsMeta,
+	TotalsWrapper,
+} from '@woocommerce/blocks-checkout';
 
 const DiscountSlotFill = (): JSX.Element => {
 	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.
@@ -24,20 +27,20 @@ const DiscountSlotFill = (): JSX.Element => {
 
 const Block = ( { className }: { className: string } ): JSX.Element => {
 	const { cartTotals, cartCoupons } = useStoreCart();
-
 	const { removeCoupon, isRemovingCoupon } = useStoreCartCoupons();
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
 		<>
-			<TotalsDiscount
-				className={ `${ className } wc-block-components-totals-wrapper` }
-				cartCoupons={ cartCoupons }
-				currency={ totalsCurrency }
-				isRemovingCoupon={ isRemovingCoupon }
-				removeCoupon={ removeCoupon }
-				values={ cartTotals }
-			/>
+			<TotalsWrapper className={ className }>
+				<TotalsDiscount
+					cartCoupons={ cartCoupons }
+					currency={ totalsCurrency }
+					isRemovingCoupon={ isRemovingCoupon }
+					removeCoupon={ removeCoupon }
+					values={ cartTotals }
+				/>
+			</TotalsWrapper>
 			<DiscountSlotFill />
 		</>
 	);

diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TotalsFees } from '@woocommerce/blocks-checkout';
+import { TotalsFees, TotalsWrapper } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
@@ -10,11 +10,9 @@ const Block = ( { className }: { className: string } ): JSX.Element => {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<TotalsFees
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			currency={ totalsCurrency }
-			cartFees={ cartFees }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsFees currency={ totalsCurrency } cartFees={ cartFees } />
+		</TotalsWrapper>
 	);
 };
 

diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx
@@ -4,6 +4,7 @@
 import { TotalsShipping } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { TotalsWrapper } from '@woocommerce/blocks-checkout';
 
 const Block = ( {
 	className,
@@ -21,13 +22,14 @@ const Block = ( {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<TotalsShipping
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			showCalculator={ isShippingCalculatorEnabled }
-			showRateSelector={ true }
-			values={ cartTotals }
-			currency={ totalsCurrency }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsShipping
+				showCalculator={ isShippingCalculatorEnabled }
+				showRateSelector={ true }
+				values={ cartTotals }
+				currency={ totalsCurrency }
+			/>
+		</TotalsWrapper>
 	);
 };
 

diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Subtotal } from '@woocommerce/blocks-checkout';
+import { Subtotal, TotalsWrapper } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
@@ -10,11 +10,9 @@ const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<Subtotal
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			currency={ totalsCurrency }
-			values={ cartTotals }
-		/>
+		<TotalsWrapper className={ className }>
+			<Subtotal currency={ totalsCurrency } values={ cartTotals } />
+		</TotalsWrapper>
 	);
 };
 

diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TotalsTaxes } from '@woocommerce/blocks-checkout';
+import { TotalsTaxes, TotalsWrapper } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
@@ -30,12 +30,13 @@ const Block = ( {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<TotalsTaxes
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			showRateAfterTaxName={ showRateAfterTaxName }
-			currency={ totalsCurrency }
-			values={ cartTotals }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsTaxes
+				showRateAfterTaxName={ showRateAfterTaxName }
+				currency={ totalsCurrency }
+				values={ cartTotals }
+			/>
+		</TotalsWrapper>
 	);
 };
 

diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx
@@ -3,15 +3,15 @@
  */
 import { OrderSummary } from '@woocommerce/base-components/cart-checkout';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { TotalsWrapper } from '@woocommerce/blocks-checkout';
 
 const Block = ( { className }: { className: string } ): JSX.Element => {
 	const { cartItems } = useStoreCart();
 
 	return (
-		<OrderSummary
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			cartItems={ cartItems }
-		/>
+		<TotalsWrapper className={ className }>
+			<OrderSummary cartItems={ cartItems } />
+		</TotalsWrapper>
 	);
 };
 

diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx
@@ -4,6 +4,7 @@
 import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
 import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
+import { TotalsWrapper } from '@woocommerce/blocks-checkout';
 
 const Block = ( {
 	className = '',
@@ -19,11 +20,12 @@ const Block = ( {
 	}
 
 	return (
-		<TotalsCoupon
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			onSubmit={ applyCoupon }
-			isLoading={ isApplyingCoupon }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsCoupon
+				onSubmit={ applyCoupon }
+				isLoading={ isApplyingCoupon }
+			/>
+		</TotalsWrapper>
 	);
 };
 

diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
@@ -7,7 +7,10 @@ import {
 	useStoreCartCoupons,
 	useStoreCart,
 } from '@woocommerce/base-context/hooks';
-import { ExperimentalDiscountsMeta } from '@woocommerce/blocks-checkout';
+import {
+	ExperimentalDiscountsMeta,
+	TotalsWrapper,
+} from '@woocommerce/blocks-checkout';
 
 const DiscountSlotFill = (): JSX.Element => {
 	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.
@@ -24,20 +27,20 @@ const DiscountSlotFill = (): JSX.Element => {
 
 const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 	const { cartTotals, cartCoupons } = useStoreCart();
-
 	const { removeCoupon, isRemovingCoupon } = useStoreCartCoupons();
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
 		<>
-			<TotalsDiscount
-				className={ `${ className } wc-block-components-totals-wrapper` }
-				cartCoupons={ cartCoupons }
-				currency={ totalsCurrency }
-				isRemovingCoupon={ isRemovingCoupon }
-				removeCoupon={ removeCoupon }
-				values={ cartTotals }
-			/>
+			<TotalsWrapper className={ className }>
+				<TotalsDiscount
+					cartCoupons={ cartCoupons }
+					currency={ totalsCurrency }
+					isRemovingCoupon={ isRemovingCoupon }
+					removeCoupon={ removeCoupon }
+					values={ cartTotals }
+				/>
+			</TotalsWrapper>
 			<DiscountSlotFill />
 		</>
 	);

diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TotalsFees } from '@woocommerce/blocks-checkout';
+import { TotalsFees, TotalsWrapper } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
@@ -10,11 +10,9 @@ const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<TotalsFees
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			currency={ totalsCurrency }
-			cartFees={ cartFees }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsFees currency={ totalsCurrency } cartFees={ cartFees } />
+		</TotalsWrapper>
 	);
 };