Added ACH story (#2821)

* Added ACH story

* Updated comment

Author: sponglord

packages/lib/src/components/Ach/types.ts

@@ -1,11 +1,20 @@
 import { Placeholders } from './components/AchInput/types';
 import { UIElementProps } from '../internal/UIElement/types';
+import { AddressData } from '../../types/global-types';
 
 export interface AchConfiguration extends UIElementProps {
     storedPaymentMethodId?: string;
     holderNameRequired?: boolean;
     hasHolderName?: boolean;
     enableStoreDetails: boolean;
-    bankAccountNumber: string;
+    bankAccountNumber?: string; // Applies when a storedPM
     placeholders?: Placeholders;
+    /**
+     * Object that contains placeholder information that you can use to prefill fields.
+     * - merchant set config option
+     */
+    data?: {
+        holderName?: string;
+        billingAddress?: Partial<AddressData>;
+    };
 }

packages/lib/storybook/stories/components/ACH.stories.tsx

@@ -0,0 +1,39 @@
+import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types';
+import { getStoryContextCheckout } from '../../utils/get-story-context-checkout';
+import { AchConfiguration } from '../../../src/components/Ach/types';
+import { Container } from '../Container';
+import { Ach } from '../../../src';
+
+type ACHStory = StoryConfiguration<AchConfiguration>;
+
+const meta: MetaConfiguration<AchConfiguration> = {
+    title: 'Components/ACH'
+};
+
+export const Default: ACHStory = {
+    render: (args: PaymentMethodStoryProps<AchConfiguration>, context) => {
+        const { componentConfiguration } = args;
+        const checkout = getStoryContextCheckout(context);
+        const ach = new Ach(checkout, componentConfiguration);
+        return <Container element={ach} />;
+    },
+    args: {
+        countryCode: 'US',
+        componentConfiguration: {
+            data: {
+                holderName: 'B. Fish',
+                billingAddress: {
+                    street: 'Infinite Loop',
+                    postalCode: '95014',
+                    city: 'Cupertino',
+                    houseNumberOrName: '1',
+                    country: 'US',
+                    stateOrProvince: 'CA'
+                }
+            },
+            enableStoreDetails: false
+        }
+    }
+};
+
+export default meta;