fees/index.tsx000064400000002655151556322610007353 0ustar00/**
 * External dependencies
 */
import classnames from 'classnames';
import { __ } from '@wordpress/i18n';
import { getSetting } from '@woocommerce/settings';
import type { Currency } from '@woocommerce/price-format';
import type { CartFeeItem } from '@woocommerce/types';
import type { ReactElement } from 'react';

/**
 * Internal dependencies
 */
import TotalsItem from '../item';

export interface TotalsFeesProps {
	/**
	 * Currency
	 */
	currency: Currency;
	/**
	 * Cart fees
	 */
	cartFees: CartFeeItem[];
	/**
	 * Component wrapper classname
	 *
	 * @default 'wc-block-components-totals-fees'
	 */
	className?: string;
}

const TotalsFees = ( {
	currency,
	cartFees,
	className,
}: TotalsFeesProps ): ReactElement | null => {
	return (
		<>
			{ cartFees.map( ( { id, name, totals }, index ) => {
				const feesValue = parseInt( totals.total, 10 );

				if ( ! feesValue ) {
					return null;
				}

				const feesTaxValue = parseInt( totals.total_tax, 10 );

				return (
					<TotalsItem
						key={ id || `${ index }-${ name }` }
						className={ classnames(
							'wc-block-components-totals-fees',
							className
						) }
						currency={ currency }
						label={
							name || __( 'Fee', 'woo-gutenberg-products-block' )
						}
						value={
							getSetting( 'displayCartPricesIncludingTax', false )
								? feesValue + feesTaxValue
								: feesValue
						}
					/>
				);
			} ) }
		</>
	);
};

export default TotalsFees;
fees/stories/index.tsx000064400000002261151556322610011034 0ustar00/**
 * External dependencies
 */
import type { Story, Meta } from '@storybook/react';
import {
	currenciesAPIShape,
	currencies,
	currencyControl,
} from '@woocommerce/storybook-controls';

/**
 * Internal dependencies
 */
import Fees, { TotalsFeesProps } from '..';

export default {
	title: 'WooCommerce Blocks/Checkout Blocks/totals/Fees',
	component: Fees,
	argTypes: {
		currency: currencyControl,
	},
	args: {
		total: '',
		cartFees: [
			{
				id: 'my-id',
				name: 'Storybook fee',
				totals: {
					...currenciesAPIShape.USD,
					total: '1000',
					total_tax: '200',
				},
			},
		],
	},
} as Meta< TotalsFeesProps >;

type StorybookTotalFeesProps = TotalsFeesProps & { total: string };

const Template: Story< StorybookTotalFeesProps > = ( args ) => {
	return (
		<Fees
			{ ...args }
			cartFees={ [
				{
					...args.cartFees[ 0 ],
					totals: {
						...args.cartFees[ 0 ].totals,
						total: args.total,
					},
				},
			] }
		/>
	);
};

export const Default = Template.bind( {} );
Default.args = {
	currency: currencies.USD,
	total: '1000',
};

export const AlternativeCurrency = Template.bind( {} );
AlternativeCurrency.args = {
	currency: currencies.EUR,
	total: '1000',
};
index.js000064400000000304151556322610006214 0ustar00export { default as TotalsItem } from './item';
export { default as Subtotal } from './subtotal';
export { default as TotalsTaxes } from './taxes';
export { default as TotalsFees } from './fees';
item/index.tsx000064400000003053151556322610007360 0ustar00/**
 * External dependencies
 */
import classnames from 'classnames';
import { isValidElement } from '@wordpress/element';
import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
import type { ReactElement, ReactNode } from 'react';
import type { Currency } from '@woocommerce/price-format';

/**
 * Internal dependencies
 */
import './style.scss';

export interface TotalsItemProps {
	className?: string;
	currency: Currency;
	label: string;
	// Value may be a number, or react node. Numbers are passed to FormattedMonetaryAmount.
	value: number | ReactNode;
	description?: ReactNode;
}

const TotalsItemValue = ( {
	value,
	currency,
}: Partial< TotalsItemProps > ): ReactElement | null => {
	if ( isValidElement( value ) ) {
		return (
			<div className="wc-block-components-totals-item__value">
				{ value }
			</div>
		);
	}

	return Number.isFinite( value ) ? (
		<FormattedMonetaryAmount
			className="wc-block-components-totals-item__value"
			currency={ currency || {} }
			value={ value as number }
		/>
	) : null;
};

const TotalsItem = ( {
	className,
	currency,
	label,
	value,
	description,
}: TotalsItemProps ): ReactElement => {
	return (
		<div
			className={ classnames(
				'wc-block-components-totals-item',
				className
			) }
		>
			<span className="wc-block-components-totals-item__label">
				{ label }
			</span>
			<TotalsItemValue value={ value } currency={ currency } />
			<div className="wc-block-components-totals-item__description">
				{ description }
			</div>
		</div>
	);
};

export default TotalsItem;
item/stories/index.tsx000064400000001411151556322610011044 0ustar00/**
 * External dependencies
 */
import type { Story, Meta } from '@storybook/react';
import { currencies, currencyControl } from '@woocommerce/storybook-controls';

/**
 * Internal dependencies
 */
import Item, { TotalsItemProps } from '..';

export default {
	title: 'WooCommerce Blocks/Checkout Blocks/totals/Item',
	component: Item,
	argTypes: {
		currency: currencyControl,
		description: { control: { type: 'text' } },
	},
	args: {
		description: 'This item is so interesting',
		label: 'Interesting item',
		value: 2000,
	},
} as Meta< TotalsItemProps >;

const Template: Story< TotalsItemProps > = ( args ) => <Item { ...args } />;

export const Default = Template.bind( {} );
Default.args = {
	currency: currencies.USD,
	description: 'This item is so interesting',
};
item/style.scss000064400000000536151556322610007551 0ustar00.wc-block-components-totals-item {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	box-sizing: border-box;
}

.wc-block-components-totals-item__label {
	flex-grow: 1;
}

.wc-block-components-totals-item__value {
	font-weight: bold;
	white-space: nowrap;
}

.wc-block-components-totals-item__description {
	@include font-size(small);
	width: 100%;
}
subtotal/index.tsx000064400000002041151556322610010253 0ustar00/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { getSetting } from '@woocommerce/settings';
import type { Currency } from '@woocommerce/price-format';
import type { ReactElement } from 'react';

/**
 * Internal dependencies
 */
import TotalsItem from '../item';

interface Values {
	total_items: string;
	total_items_tax: string;
}

export interface SubtotalProps {
	className?: string;
	currency: Currency;
	values: Values | Record< string, never >;
}

const Subtotal = ( {
	currency,
	values,
	className,
}: SubtotalProps ): ReactElement => {
	const { total_items: totalItems, total_items_tax: totalItemsTax } = values;
	const itemsValue = parseInt( totalItems, 10 );
	const itemsTaxValue = parseInt( totalItemsTax, 10 );

	return (
		<TotalsItem
			className={ className }
			currency={ currency }
			label={ __( 'Subtotal', 'woo-gutenberg-products-block' ) }
			value={
				getSetting( 'displayCartPricesIncludingTax', false )
					? itemsValue + itemsTaxValue
					: itemsValue
			}
		/>
	);
};

export default Subtotal;
subtotal/stories/index.tsx000064400000001722151556322610011750 0ustar00/**
 * External dependencies
 */
import type { Story, Meta } from '@storybook/react';
import { currencies, currencyControl } from '@woocommerce/storybook-controls';

/**
 * Internal dependencies
 */
import Subtotal, { SubtotalProps } from '..';

export default {
	title: 'WooCommerce Blocks/Checkout Blocks/totals/Subtotal',
	component: Subtotal,
	argTypes: {
		currency: currencyControl,
	},
	args: {
		values: {
			total_items: '1000',
			total_items_tax: '200',
		},
	},
} as Meta< SubtotalProps >;

type StorybookSubtotalProps = SubtotalProps & { total_items: string };

const Template: Story< StorybookSubtotalProps > = ( args ) => {
	const totalItems = args.total_items;
	const values = {
		total_items: totalItems,
		total_items_tax: args.values.total_items_tax,
	};

	return (
		<Subtotal { ...args } currency={ args.currency } values={ values } />
	);
};

export const Default = Template.bind( {} );
Default.args = {
	currency: currencies.USD,
	total_items: '1000',
};
taxes/index.tsx000064400000003620151556322610007546 0ustar00/**
 * External dependencies
 */
import classnames from 'classnames';
import { __ } from '@wordpress/i18n';
import { getSetting } from '@woocommerce/settings';
import type { Currency } from '@woocommerce/price-format';
import type { CartTotalsTaxLineItem } from '@woocommerce/types';
import type { ReactElement } from 'react';

/**
 * Internal dependencies
 */
import TotalsItem from '../item';

interface Values {
	tax_lines: CartTotalsTaxLineItem[];
	total_tax: string;
}

export interface TotalsTaxesProps {
	className?: string;
	currency: Currency;
	showRateAfterTaxName: boolean;
	values: Values | Record< string, never >;
}

const TotalsTaxes = ( {
	currency,
	values,
	className,
	showRateAfterTaxName,
}: TotalsTaxesProps ): ReactElement | null => {
	const { total_tax: totalTax, tax_lines: taxLines } = values;

	if (
		! getSetting( 'taxesEnabled', true ) &&
		parseInt( totalTax, 10 ) <= 0
	) {
		return null;
	}

	const showItemisedTaxes = getSetting(
		'displayItemizedTaxes',
		false
	) as boolean;

	const itemisedTaxItems: ReactElement | null =
		showItemisedTaxes && taxLines.length > 0 ? (
			<>
				{ taxLines.map( ( { name, rate, price }, i ) => {
					const label = `${ name }${
						showRateAfterTaxName ? ` ${ rate }` : ''
					}`;
					return (
						<TotalsItem
							key={ `tax-line-${ i }` }
							className={ classnames(
								'wc-block-components-totals-taxes',
								className
							) }
							currency={ currency }
							label={ label }
							value={ parseInt( price, 10 ) }
						/>
					);
				} ) }{ ' ' }
			</>
		) : null;

	return showItemisedTaxes ? (
		itemisedTaxItems
	) : (
		<>
			<TotalsItem
				className={ classnames(
					'wc-block-components-totals-taxes',
					className
				) }
				currency={ currency }
				label={ __( 'Taxes', 'woo-gutenberg-products-block' ) }
				value={ parseInt( totalTax, 10 ) }
				description={ null }
			/>
		</>
	);
};

export default TotalsTaxes;
taxes/stories/index.tsx000064400000001447151556322610011243 0ustar00/**
 * External dependencies
 */
import type { Story, Meta } from '@storybook/react';
import { currencies, currencyControl } from '@woocommerce/storybook-controls';

/**
 * Internal dependencies
 */
import Taxes, { TotalsTaxesProps } from '..';

export default {
	title: 'WooCommerce Blocks/Checkout Blocks/totals/Taxes',
	component: Taxes,
	argTypes: {
		currency: currencyControl,
		showRateAfterTaxName: {
			table: { disable: true },
		},
	},
	args: {
		values: {
			tax_lines: [
				{
					name: 'Expensive tax fee',
					price: '1000',
					rate: '500',
				},
			],
			total_tax: '2000',
		},
	},
} as Meta< TotalsTaxesProps >;

const Template: Story< TotalsTaxesProps > = ( args ) => <Taxes { ...args } />;

export const Default = Template.bind( {} );
Default.args = {
	currency: currencies.USD,
};