File "index.tsx"
Full Path: /home/warrior1/public_html/plugins/woocommerce/packages/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/discount/stories/index.tsx
File size: 2.59 KB
MIME-type: text/x-java
Charset: utf-8
/**
* External dependencies
*/
import { useArgs } from '@storybook/client-api';
import { Story, Meta } from '@storybook/react';
import {
currenciesAPIShape as currencies,
currencyControl,
INTERACTION_TIMEOUT,
} from '@woocommerce/storybook-controls';
import { LooselyMustHave } from '@woocommerce/type-defs/utils';
import {
CartResponseCouponItemWithLabel,
CartTotalsItem,
} from '@woocommerce/types';
/**
* Internal dependencies
*/
import Discount, { TotalsDiscountProps } from '..';
const EXAMPLE_COUPONS: CartResponseCouponItemWithLabel[] = [
{
code: 'AWSMSB',
discount_type: '',
label: 'Awesome Storybook coupon',
totals: {
...currencies.EUR,
total_discount: '5000',
total_discount_tax: '250',
},
},
{
code: 'STONKS',
discount_type: '',
label: 'Most valuable coupon',
totals: {
...currencies.EUR,
total_discount: '10000',
total_discount_tax: '1000',
},
},
];
function extractValuesFromCoupons(
coupons: LooselyMustHave< CartResponseCouponItemWithLabel, 'totals' >[]
) {
return coupons.reduce(
( acc, curr ) => {
const totalDiscount =
Number( acc.total_discount ) +
Number( curr.totals.total_discount );
const totalDiscountTax =
Number( acc.total_discount_tax ) +
Number( curr.totals.total_discount_tax );
return {
total_discount: String( totalDiscount ),
total_discount_tax: String( totalDiscountTax ),
};
},
{ total_discount: '0', total_discount_tax: '0' } as LooselyMustHave<
CartTotalsItem,
'total_discount' | 'total_discount_tax'
>
);
}
export default {
title: 'WooCommerce Blocks/@base-components/cart-checkout/totals/Discount',
component: Discount,
argTypes: {
currency: currencyControl,
removeCoupon: { action: 'Removing coupon with code' },
},
args: {
cartCoupons: EXAMPLE_COUPONS,
isRemovingCoupon: false,
values: extractValuesFromCoupons( EXAMPLE_COUPONS ),
},
} as Meta< TotalsDiscountProps >;
const Template: Story< TotalsDiscountProps > = ( args ) => {
const [ {}, setArgs ] = useArgs();
const removeCoupon = ( code: string ) => {
args.removeCoupon( code );
setArgs( { isRemovingCoupon: true } );
const cartCoupons = args.cartCoupons.filter(
( coupon ) => coupon.code !== code
);
const values = extractValuesFromCoupons( cartCoupons );
setTimeout(
() => setArgs( { cartCoupons, values, isRemovingCoupon: false } ),
INTERACTION_TIMEOUT
);
};
return <Discount { ...args } removeCoupon={ removeCoupon } />;
};
export const Default = Template.bind( {} );
Default.args = {};
export const RemovingCoupon = Template.bind( {} );
RemovingCoupon.args = {
isRemovingCoupon: true,
};