Args Table for Payment Methods

PaymentMethodRow.stories.mdx

import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'; import PaymentMethodRow from 'src/components/PaymentMethodRow/PaymentMethodRow'; import { paymentMethodFactory } from 'src/factories';

export const onDelete = () => {};

export const supportedCreditCards = [ 'Visa', 'MasterCard', 'American Express', 'Discover', 'JCB', 'Other', ];

export const getAllPaymentMethodOptions = () => { const options = supportedCreditCards.map(card_type => ({ [card_type]: paymentMethodFactory.build({ type: 'credit_card', data: { card_type }, }) })).reduce((obj, item) => { obj[Object.keys(item)[0]] = Object.values(item)[0] return obj }, {}); options['Google Pay'] = paymentMethodFactory.build({ type: 'google_pay', data: { card_type: 'Visa', }, }) options['Paypal'] = paymentMethodFactory.build({ type: 'paypal', data: { paypal_id: 'ABCDEFG123', email: '[email protected]', }, }) return options; };

export const CreditCards = () => supportedCreditCards.map((creditCard) => ( <PaymentMethodRow key={creditCard} onDelete={onDelete} paymentMethod={paymentMethodFactory.build({ type: 'credit_card', data: { card_type: creditCard, }, })} /> ));

export const Template = (args) => <PaymentMethodRow {...args} />

Payment Method Row

Credit Cards

Google Pay

{Template.bind({})}

PayPal

{Template.bind({})}

Component API

{Template.bind({})}