initial commit

packages/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/index.js

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { createInterpolateElement } from '@wordpress/element';
+import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
+import PropTypes from 'prop-types';
+import {
+	__experimentalApplyCheckoutFilter,
+	TotalsItem,
+} from '@woocommerce/blocks-checkout';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { getSetting } from '@woocommerce/settings';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const TotalsFooterItem = ( { currency, values } ) => {
+	const SHOW_TAXES =
+		getSetting( 'taxesEnabled', true ) &&
+		getSetting( 'displayCartPricesIncludingTax', false );
+
+	const { total_price: totalPrice, total_tax: totalTax } = values;
+
+	// Prepare props to pass to the __experimentalApplyCheckoutFilter filter.
+	// We need to pluck out receiveCart.
+	// eslint-disable-next-line no-unused-vars
+	const { receiveCart, ...cart } = useStoreCart();
+	const label = __experimentalApplyCheckoutFilter( {
+		filterName: 'totalLabel',
+		defaultValue: __( 'Total', 'woocommerce' ),
+		extensions: cart.extensions,
+		arg: { cart },
+	} );
+
+	const parsedTaxValue = parseInt( totalTax, 10 );
+
+	return (
+		<TotalsItem
+			className="wc-block-components-totals-footer-item"
+			currency={ currency }
+			label={ label }
+			value={ parseInt( totalPrice, 10 ) }
+			description={
+				SHOW_TAXES &&
+				parsedTaxValue !== 0 && (
+					<p className="wc-block-components-totals-footer-item-tax">
+						{ createInterpolateElement(
+							__(
+								'Including <TaxAmount/> in taxes',
+								'woocommerce'
+							),
+							{
+								TaxAmount: (
+									<FormattedMonetaryAmount
+										className="wc-block-components-totals-footer-item-tax-value"
+										currency={ currency }
+										value={ parsedTaxValue }
+									/>
+								),
+							}
+						) }
+					</p>
+				)
+			}
+		/>
+	);
+};
+
+TotalsFooterItem.propTypes = {
+	currency: PropTypes.object.isRequired,
+	values: PropTypes.shape( {
+		total_price: PropTypes.string,
+		total_tax: PropTypes.string,
+	} ).isRequired,
+};
+
+export default TotalsFooterItem;

packages/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/stories/index.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { text } from '@storybook/addon-knobs';
+import { currencyKnob } from '@woocommerce/knobs';
+
+/**
+ * Internal dependencies
+ */
+import TotalsFooterItem from '../';
+
+export default {
+	title:
+		'WooCommerce Blocks/@base-components/cart-checkout/totals/TotalsFooterItem',
+	component: TotalsFooterItem,
+};
+
+export const Default = () => {
+	const currency = currencyKnob();
+	const totalPrice = text( 'Total price', '1200' );
+	const totalTax = text( 'Total tax', '200' );
+
+	return (
+		<TotalsFooterItem
+			currency={ currency }
+			values={ {
+				total_price: totalPrice,
+				total_tax: totalTax,
+			} }
+		/>
+	);
+};

packages/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/style.scss

@@ -0,0 +1,14 @@
+.wc-block-components-totals-footer-item {
+	.wc-block-components-totals-item__value,
+	.wc-block-components-totals-item__label {
+		@include font-size(large);
+	}
+
+	.wc-block-components-totals-item__label {
+		font-weight: 700;
+	}
+
+	.wc-block-components-totals-footer-item-tax {
+		margin-bottom: 0;
+	}
+}

packages/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/test/__snapshots__/index.js.snap

@@ -0,0 +1,79 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TotalsFooterItem Does not show the "including %s of tax" line if tax is 0 1`] = `
+<div>
+  <div
+    class="wc-block-components-totals-item wc-block-components-totals-footer-item"
+  >
+    <span
+      class="wc-block-components-totals-item__label"
+    >
+      Total
+    </span>
+    <span
+      class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+    >
+      £85.00
+    </span>
+    <div
+      class="wc-block-components-totals-item__description"
+    />
+  </div>
+</div>
+`;
+
+exports[`TotalsFooterItem Does not show the "including %s of tax" line if tax is disabled 1`] = `
+<div>
+  <div
+    class="wc-block-components-totals-item wc-block-components-totals-footer-item"
+  >
+    <span
+      class="wc-block-components-totals-item__label"
+    >
+      Total
+    </span>
+    <span
+      class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+    >
+      £85.00
+    </span>
+    <div
+      class="wc-block-components-totals-item__description"
+    />
+  </div>
+</div>
+`;
+
+exports[`TotalsFooterItem Shows the "including %s of tax" line if tax is greater than 0 1`] = `
+<div>
+  <div
+    class="wc-block-components-totals-item wc-block-components-totals-footer-item"
+  >
+    <span
+      class="wc-block-components-totals-item__label"
+    >
+      Total
+    </span>
+    <span
+      class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-item__value"
+    >
+      £85.00
+    </span>
+    <div
+      class="wc-block-components-totals-item__description"
+    >
+      <p
+        class="wc-block-components-totals-footer-item-tax"
+      >
+        Including 
+        <span
+          class="wc-block-formatted-money-amount wc-block-components-formatted-money-amount wc-block-components-totals-footer-item-tax-value"
+        >
+          £1.00
+        </span>
+         in taxes
+      </p>
+    </div>
+  </div>
+</div>
+`;

packages/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/footer-item/test/index.js

@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import TotalsFooterItem from '../index';
+import { allSettings } from '../../../../../../settings/shared/settings-init';
+
+describe( 'TotalsFooterItem', () => {
+	beforeEach( () => {
+		allSettings.taxesEnabled = true;
+		allSettings.displayCartPricesIncludingTax = true;
+	} );
+	const currency = {
+		code: 'GBP',
+		decimalSeparator: '.',
+		minorUnit: 2,
+		prefix: '£',
+		suffix: '',
+		symbol: '£',
+		thousandSeparator: ',',
+	};
+
+	const values = {
+		currency_code: 'GBP',
+		currency_decimal_separator: '.',
+		currency_minor_unit: 2,
+		currency_prefix: '£',
+		currency_suffix: '',
+		currency_symbol: '£',
+		currency_thousand_separator: ',',
+		tax_lines: [],
+		length: 2,
+		total_discount: '0',
+		total_discount_tax: '0',
+		total_fees: '0',
+		total_fees_tax: '0',
+		total_items: '7100',
+		total_items_tax: '0',
+		total_price: '8500',
+		total_shipping: '0',
+		total_shipping_tax: '0',
+		total_tax: '0',
+	};
+
+	it( 'Does not show the "including %s of tax" line if tax is 0', () => {
+		const { container } = render(
+			<TotalsFooterItem currency={ currency } values={ values } />
+		);
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'Does not show the "including %s of tax" line if tax is disabled', () => {
+		allSettings.taxesEnabled = false;
+		/* This shouldn't ever happen if taxes are disabled, but this is to test whether the taxesEnabled setting works */
+		const valuesWithTax = {
+			...values,
+			total_tax: '100',
+			total_items_tax: '100',
+		};
+		const { container } = render(
+			<TotalsFooterItem currency={ currency } values={ valuesWithTax } />
+		);
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'Shows the "including %s of tax" line if tax is greater than 0', () => {
+		const valuesWithTax = {
+			...values,
+			total_tax: '100',
+			total_items_tax: '100',
+		};
+		const { container } = render(
+			<TotalsFooterItem currency={ currency } values={ valuesWithTax } />
+		);
+		expect( container ).toMatchSnapshot();
+	} );
+} );