adding storedCard story (#2823)

* adding storedCard story

* Better markup for storedCard info

* Adjusted font size in info panel

Author: sponglord

packages/lib/storybook/stories/cards/Card.stories.tsx

@@ -5,6 +5,7 @@ import { Card } from '../../../src';
 import { Container } from '../Container';
 import { searchFunctionExample } from '../../../../playground/src/utils';
 import { CardWith3DS2Redirect } from './cardStoryHelpers/CardWith3DS2Redirect';
+import './cardStoryHelpers/storedCard.style.scss';
 
 type CardStory = StoryConfiguration<CardConfiguration>;
 
@@ -20,6 +21,53 @@ const createComponent = (args: PaymentMethodStoryProps<CardConfiguration>, conte
     return <Container element={card} />;
 };
 
+const createStoredCardComponent = (args: PaymentMethodStoryProps<CardConfiguration>, context) => {
+    const { componentConfiguration } = args;
+    const checkout = getStoryContextCheckout(context);
+
+    if (checkout.paymentMethodsResponse.storedPaymentMethods && checkout.paymentMethodsResponse.storedPaymentMethods.length > 0) {
+        // We are only interested in card based storedPaymentMethods that support Ecommerce  - a quick way to distinguish these is if they have a brand property
+        let storedCardData;
+        let storedPM;
+        for (let i = 0; i < checkout.paymentMethodsResponse.storedPaymentMethods.length; i++) {
+            storedPM = checkout.paymentMethodsResponse.storedPaymentMethods[i];
+            if (storedPM.brand && storedPM.supportedShopperInteractions.includes('Ecommerce')) {
+                storedCardData = checkout.paymentMethodsResponse.storedPaymentMethods[i];
+                break; // exit, now we've found the first storedCard
+            }
+        }
+
+        if (storedCardData) {
+            const card = new Card(checkout, { ...storedCardData, ...componentConfiguration });
+
+            return (
+                <div>
+                    <div className={'stored-card-info'}>
+                        <p>
+                            <i>Stored card info:</i>
+                        </p>
+                        <div className={'info-container'}>
+                            <div>
+                                <div>Brand:</div>
+                                <img src={card.icon} alt={'stored-card-brand-icon'} />
+                            </div>
+                            <div className={'info-extra-item'}>
+                                <div>Last four digits:</div>
+                                <div className={'info-last-four-digits'}>{storedPM.lastFour}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <Container element={card} />
+                </div>
+            );
+        } else {
+            return <div>No stored cards found</div>;
+        }
+    } else {
+        return <div>No stored payment methods found</div>;
+    }
+};
+
 export const Default: CardStory = {
     render: createComponent,
     args: {
@@ -160,4 +208,14 @@ export const CardWith_3DS2_Redirect: CardStory = {
     }
 };
 
+export const StoredCard: CardStory = {
+    render: createStoredCardComponent,
+    args: {
+        componentConfiguration: {
+            _disableClickToPay: true,
+            hideCVC: false
+        }
+    }
+};
+
 export default meta;

packages/lib/storybook/stories/cards/cardStoryHelpers/storedCard.style.scss

@@ -0,0 +1,15 @@
+.stored-card-info{
+  font-size: 0.9em;
+}
+
+.info-container{
+  display:flex;
+}
+
+.info-extra-item{
+  margin-left:30px;
+}
+
+.info-last-four-digits{
+  margin-top: 3px;
+}