/**
* External dependencies
*/
import { useArgs } from '@storybook/client-api';
import { Story, Meta } from '@storybook/react';
import {
useValidationContext,
ValidationContextProvider,
} from '@woocommerce/base-context';
import { INTERACTION_TIMEOUT } from '@woocommerce/storybook-controls';
/**
* Internal dependencies
*/
import { TotalsCoupon, TotalsCouponProps } from '..';
export default {
title: 'WooCommerce Blocks/@base-components/cart-checkout/totals/Coupon',
component: TotalsCoupon,
args: {
initialOpen: true,
},
} as Meta< TotalsCouponProps >;
const INVALID_COUPON_ERROR = {
hidden: false,
message: 'Invalid coupon code',
};
const Template: Story< TotalsCouponProps > = ( args ) => {
const [ {}, setArgs ] = useArgs();
const onSubmit = ( code: string ) => {
args.onSubmit?.( code );
setArgs( { isLoading: true } );
setTimeout(
() => setArgs( { isLoading: false } ),
INTERACTION_TIMEOUT
);
};
return <TotalsCoupon { ...args } onSubmit={ onSubmit } />;
};
export const Default = Template.bind( {} );
Default.args = {};
export const LoadingState = Template.bind( {} );
LoadingState.args = {
isLoading: true,
};
export const ErrorState: Story< TotalsCouponProps > = ( args ) => {
const { setValidationErrors } = useValidationContext();
setValidationErrors( { coupon: INVALID_COUPON_ERROR } );
return <TotalsCoupon { ...args } />;
};
ErrorState.decorators = [
( StoryComponent ) => {
return (
<ValidationContextProvider>
<StoryComponent />
</ValidationContextProvider>
);
},
];