From 2af3f7a0fd7aeccfe1c3c0c5f902b0ff57713b90 Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Wed, 18 Nov 2020 12:13:26 -0600
Subject: [PATCH 01/28] Enabled saved payments link.

---
 .../peregrine/lib/talons/AccountMenu/useAccountMenuItems.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js b/packages/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js
index 66700af02f..8156936c39 100644
--- a/packages/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js
+++ b/packages/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js
@@ -23,7 +23,7 @@ export const useAccountMenuItems = props => {
         {
             name: 'Store Credit & Gift Cards',
             id: 'accountMenu.storeCreditLink',
-            url: ''
+            url: '/saved-payments'
         },
         {
             name: 'Favorites Lists',

From 2c505ae4539411413a72d792f3e127e0d384090b Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Wed, 18 Nov 2020 16:34:53 -0600
Subject: [PATCH 02/28] Added payment skeleton.

---
 .../SavedPaymentsPage/useSavedPaymentsPage.js |  7 +--
 .../SavedPaymentsPage/creditCard.js           | 48 +++++++++++++++++
 .../SavedPaymentsPage/paymentCard.css         | 51 +++++++++++++++++++
 .../SavedPaymentsPage/paymentCard.js          | 21 ++++++++
 .../SavedPaymentsPage/savedPaymentsPage.js    | 47 +++++------------
 5 files changed, 135 insertions(+), 39 deletions(-)
 create mode 100644 packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
 create mode 100644 packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.css
 create mode 100644 packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js

diff --git a/packages/peregrine/lib/talons/SavedPaymentsPage/useSavedPaymentsPage.js b/packages/peregrine/lib/talons/SavedPaymentsPage/useSavedPaymentsPage.js
index b9d1aebe96..4255977167 100644
--- a/packages/peregrine/lib/talons/SavedPaymentsPage/useSavedPaymentsPage.js
+++ b/packages/peregrine/lib/talons/SavedPaymentsPage/useSavedPaymentsPage.js
@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 
 import { useQuery } from '@apollo/client';
@@ -68,14 +68,9 @@ export const useSavedPaymentsPage = props => {
         setPageLoading(loading);
     }, [loading, setPageLoading]);
 
-    const handleAddPayment = useCallback(() => {
-        // TODO in PWA-637
-    }, []);
-
     const savedPayments = normalizeTokens(savedPaymentsData);
 
     return {
-        handleAddPayment,
         isLoading: loading,
         savedPayments
     };
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
new file mode 100644
index 0000000000..5a9dcf7ea5
--- /dev/null
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
@@ -0,0 +1,48 @@
+import React, { useMemo } from 'react';
+import { Edit2 as EditIcon } from 'react-feather';
+
+import Icon from '../Icon';
+
+const cardTypeMapper = {
+    VI: 'Visa'
+};
+
+const CreditCard = props => {
+    const { classes, details, public_hash } = props;
+
+    const title = 'Credit Card';
+    const cardNumberAndType = `**** ${details.maskedCC} \u00A0\u00A0 ${
+        cardTypeMapper[details.type]
+    }`;
+    const cardExpiryDate = useMemo(() => {
+        const [month, year] = details.expirationDate.split('/');
+        const longMonth = new Date(+year, +month - 1).toLocaleString(
+            'default',
+            { month: 'short' }
+        );
+
+        return `${longMonth} ${year}`;
+    }, [details.expirationDate]);
+    const editButton = (
+        <button className={classes.editButton} onClick={() => {}}>
+            <Icon
+                classes={{
+                    icon: classes.editIcon
+                }}
+                size={16}
+                src={EditIcon}
+            />
+        </button>
+    );
+
+    return (
+        <div className={classes.root} key={public_hash}>
+            <div className={classes.title}>{title}</div>
+            <div className={classes.number}>{cardNumberAndType}</div>
+            <div className={classes.expiry_date}>{cardExpiryDate}</div>
+            <div className={classes.edit}>{editButton}</div>
+        </div>
+    );
+};
+
+export default CreditCard;
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.css b/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.css
new file mode 100644
index 0000000000..f819505a29
--- /dev/null
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.css
@@ -0,0 +1,51 @@
+.root {
+    align-content: flex-start;
+    border: 2px solid rgb(var(--venia-global-color-gray-400));
+    border-radius: 0.375rem;
+    box-shadow: none;
+    cursor: pointer;
+    display: grid;
+    font-size: 1rem;
+    padding: 1rem 1.25rem;
+    position: relative;
+    row-gap: 0.5rem;
+    transition: border-color 384ms var(--venia-global-anim-in);
+    outline: none;
+}
+
+@media (min-width: 961px) {
+    .root {
+        padding: 1.25rem 2rem;
+    }
+}
+
+.root_selected {
+    composes: root;
+    border-color: rgb(var(--venia-brand-color-1-600));
+    cursor: default;
+}
+
+.root:focus {
+    box-shadow: -6px 6px rgb(var(--venia-global-color-blue-700) / 0.3);
+}
+
+.root:hover {
+    border-color: rgb(var(--venia-brand-color-1-600));
+}
+
+@media (min-width: 961px) {
+    .editButton {
+        right: 0.375rem;
+        top: 0.375rem;
+    }
+}
+
+.editButton:hover {
+    --fill: rgb(var(--venia-brand-color-1-700));
+}
+
+.editIcon {
+    stroke: rgb(var(--venia-brand-color-1-700));
+    fill: var(--fill, white);
+    transition: fill 384ms var(--venia-global-anim-standard);
+}
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js b/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js
new file mode 100644
index 0000000000..774a99e178
--- /dev/null
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
+
+import CreditCard from './creditCard';
+
+import defaultClasses from './paymentCard.css';
+
+const paymentCardMapper = {
+    braintree: CreditCard
+};
+
+const PaymentCard = props => {
+    const classes = mergeClasses(defaultClasses, props.classes);
+
+    const PaymentComponent = paymentCardMapper[props.payment_method_code];
+
+    return <PaymentComponent {...props} classes={classes} />;
+};
+
+export default PaymentCard;
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
index 8355c4af67..0e22a0fcbc 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
@@ -1,15 +1,14 @@
 import React, { useMemo } from 'react';
 import { useIntl } from 'react-intl';
-import { PlusSquare } from 'react-feather';
 
 import { useSavedPaymentsPage } from '@magento/peregrine/lib/talons/SavedPaymentsPage/useSavedPaymentsPage';
 import { mergeClasses } from '@magento/venia-ui/lib/classify';
 
-import Icon from '../Icon';
-import LinkButton from '../LinkButton';
 import { Title } from '../Head';
+import PaymentCard from './paymentCard';
 
 import { GET_SAVED_PAYMENTS_QUERY } from './savedPaymentsPage.gql';
+
 import defaultClasses from './savedPaymentsPage.css';
 
 const SavedPaymentsPage = props => {
@@ -19,21 +18,20 @@ const SavedPaymentsPage = props => {
         }
     });
 
-    const { handleAddPayment, savedPayments } = talonProps;
+    const { savedPayments } = talonProps;
 
     const classes = mergeClasses(defaultClasses, props.classes);
 
-    const savedPaymentElements = useMemo(() => {
-        return savedPayments.map(
-            ({ details, public_hash, payment_method_code }) => (
-                // TODO: Clean up in PWA-636
-                <div key={public_hash}>
-                    <div>{payment_method_code}</div>
-                    <div>{JSON.stringify(details, null, 2)}</div>
-                </div>
-            )
-        );
-    }, [savedPayments]);
+    const savedPaymentElements = useMemo(
+        () =>
+            savedPayments.map(paymentDetails => (
+                <PaymentCard
+                    key={paymentDetails.public_hash}
+                    {...paymentDetails}
+                />
+            )),
+        [savedPayments]
+    );
 
     const { formatMessage } = useIntl();
 
@@ -43,30 +41,13 @@ const SavedPaymentsPage = props => {
         { store_name: STORE_NAME }
     );
     const subHeading = formatMessage({ id: 'savedPaymentsPage.subHeading' });
-    const addButtonText = formatMessage({
-        id: 'savedPaymentsPage.addButtonText'
-    });
 
     return (
         <div className={classes.root}>
             <Title>{title}</Title>
             <h1 className={classes.heading}>{title}</h1>
             <h3 className={classes.subHeading}>{subHeading}</h3>
-            <div className={classes.content}>
-                <LinkButton
-                    className={classes.addButton}
-                    key="addPaymentButton"
-                    onClick={handleAddPayment}
-                >
-                    <Icon
-                        classes={{ icon: classes.addIcon }}
-                        size={24}
-                        src={PlusSquare}
-                    />
-                    <span className={classes.addText}>{addButtonText}</span>
-                </LinkButton>
-                {savedPaymentElements}
-            </div>
+            <div className={classes.content}>{savedPaymentElements}</div>
         </div>
     );
 };

From b90fe8631c8203a31fce71d0965397620a4df818 Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Mon, 23 Nov 2020 13:12:41 -0600
Subject: [PATCH 03/28] Moved stuff around.

---
 .../SavedPaymentsPage/creditCard.css          | 71 +++++++++++++++++++
 .../SavedPaymentsPage/creditCard.js           | 19 +++--
 .../SavedPaymentsPage/paymentCard.css         | 51 -------------
 .../SavedPaymentsPage/paymentCard.js          |  8 +--
 4 files changed, 84 insertions(+), 65 deletions(-)
 create mode 100644 packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css

diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
new file mode 100644
index 0000000000..20189c9112
--- /dev/null
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
@@ -0,0 +1,71 @@
+.root {
+    border: 2px solid rgb(var(--venia-global-color-gray-400));
+    border-radius: 0.375rem;
+    box-shadow: none;
+    cursor: pointer;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    font-size: 1rem;
+    padding: 1rem 1.25rem;
+    position: relative;
+    row-gap: 0.5rem;
+    transition: border-color 384ms var(--venia-global-anim-in);
+    outline: none;
+}
+
+@media (min-width: 961px) {
+    .root {
+        padding: 1.25rem 2rem;
+    }
+}
+
+.root_selected {
+    composes: root;
+    border-color: rgb(var(--venia-brand-color-1-600));
+    cursor: default;
+}
+
+.root:focus {
+    box-shadow: -6px 6px rgb(var(--venia-global-color-blue-700) / 0.3);
+}
+
+.root:hover {
+    border-color: rgb(var(--venia-brand-color-1-600));
+}
+
+.title {
+    grid-column: 1 / span 1;
+    grid-row: 1 / span 1;
+}
+
+.number {
+    grid-column: 1 / span 1;
+    grid-row: 2 / span 1;
+}
+
+.expiry_date {
+    grid-column: 1 / span 1;
+    grid-row: 3 / span 1;
+}
+
+.delete {
+    grid-column: 2 / span 1;
+    grid-row: 1 / span 3;
+}
+
+@media (min-width: 961px) {
+    .deleteButton {
+        right: 0.375rem;
+        top: 0.375rem;
+    }
+}
+
+.deleteButton:hover {
+    --fill: rgb(var(--venia-brand-color-1-700));
+}
+
+.deleteIcon {
+    stroke: rgb(var(--venia-brand-color-1-700));
+    fill: var(--fill, white);
+    transition: fill 384ms var(--venia-global-anim-standard);
+}
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
index 5a9dcf7ea5..bc42cf5887 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
@@ -1,14 +1,19 @@
 import React, { useMemo } from 'react';
-import { Edit2 as EditIcon } from 'react-feather';
+import { Trash2 as DeleteIcon } from 'react-feather';
+
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
 
 import Icon from '../Icon';
 
+import defaultClasses from './creditCard.css';
+
 const cardTypeMapper = {
     VI: 'Visa'
 };
 
 const CreditCard = props => {
-    const { classes, details, public_hash } = props;
+    const { classes: propClasses, details, public_hash } = props;
+    const classes = mergeClasses(defaultClasses, propClasses);
 
     const title = 'Credit Card';
     const cardNumberAndType = `**** ${details.maskedCC} \u00A0\u00A0 ${
@@ -23,14 +28,14 @@ const CreditCard = props => {
 
         return `${longMonth} ${year}`;
     }, [details.expirationDate]);
-    const editButton = (
-        <button className={classes.editButton} onClick={() => {}}>
+    const deleteButton = (
+        <button className={classes.deleteButton} onClick={() => {}}>
             <Icon
                 classes={{
-                    icon: classes.editIcon
+                    icon: classes.deleteIcon
                 }}
                 size={16}
-                src={EditIcon}
+                src={DeleteIcon}
             />
         </button>
     );
@@ -40,7 +45,7 @@ const CreditCard = props => {
             <div className={classes.title}>{title}</div>
             <div className={classes.number}>{cardNumberAndType}</div>
             <div className={classes.expiry_date}>{cardExpiryDate}</div>
-            <div className={classes.edit}>{editButton}</div>
+            <div className={classes.delete}>{deleteButton}</div>
         </div>
     );
 };
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.css b/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.css
index f819505a29..e69de29bb2 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.css
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.css
@@ -1,51 +0,0 @@
-.root {
-    align-content: flex-start;
-    border: 2px solid rgb(var(--venia-global-color-gray-400));
-    border-radius: 0.375rem;
-    box-shadow: none;
-    cursor: pointer;
-    display: grid;
-    font-size: 1rem;
-    padding: 1rem 1.25rem;
-    position: relative;
-    row-gap: 0.5rem;
-    transition: border-color 384ms var(--venia-global-anim-in);
-    outline: none;
-}
-
-@media (min-width: 961px) {
-    .root {
-        padding: 1.25rem 2rem;
-    }
-}
-
-.root_selected {
-    composes: root;
-    border-color: rgb(var(--venia-brand-color-1-600));
-    cursor: default;
-}
-
-.root:focus {
-    box-shadow: -6px 6px rgb(var(--venia-global-color-blue-700) / 0.3);
-}
-
-.root:hover {
-    border-color: rgb(var(--venia-brand-color-1-600));
-}
-
-@media (min-width: 961px) {
-    .editButton {
-        right: 0.375rem;
-        top: 0.375rem;
-    }
-}
-
-.editButton:hover {
-    --fill: rgb(var(--venia-brand-color-1-700));
-}
-
-.editIcon {
-    stroke: rgb(var(--venia-brand-color-1-700));
-    fill: var(--fill, white);
-    transition: fill 384ms var(--venia-global-anim-standard);
-}
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js b/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js
index 774a99e178..788b6d77ed 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js
@@ -1,21 +1,15 @@
 import React from 'react';
 
-import { mergeClasses } from '@magento/venia-ui/lib/classify';
-
 import CreditCard from './creditCard';
 
-import defaultClasses from './paymentCard.css';
-
 const paymentCardMapper = {
     braintree: CreditCard
 };
 
 const PaymentCard = props => {
-    const classes = mergeClasses(defaultClasses, props.classes);
-
     const PaymentComponent = paymentCardMapper[props.payment_method_code];
 
-    return <PaymentComponent {...props} classes={classes} />;
+    return <PaymentComponent {...props} />;
 };
 
 export default PaymentCard;

From e295112e94a1a6f7dfb1249c458d3968c30c642d Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Mon, 23 Nov 2020 13:12:48 -0600
Subject: [PATCH 04/28] Snapshot update.

---
 .../savedPaymentsPage.spec.js.snap            | 28 +------------------
 1 file changed, 1 insertion(+), 27 deletions(-)

diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
index 002b0ac498..824c620daa 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
@@ -76,32 +76,6 @@ exports[`renders correctly when there are no existing saved payments 1`] = `
   </h3>
   <div
     className="content"
-  >
-    <button
-      className="addButton"
-      disabled={false}
-      onClick={[MockFunction handleAddPayment]}
-      type="button"
-    >
-      <span
-        className="content"
-      >
-        <Icon
-          classes={
-            Object {
-              "icon": "addIcon",
-            }
-          }
-          size={24}
-          src={[Function]}
-        />
-        <span
-          className="addText"
-        >
-          Add a credit card
-        </span>
-      </span>
-    </button>
-  </div>
+  />
 </div>
 `;

From 4098a4c202e216d142940d11ca79bf36464591c2 Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Mon, 23 Nov 2020 16:47:51 -0600
Subject: [PATCH 05/28] Added other card types.

---
 .../SavedPaymentsPage/creditCard.css          |  8 +++++
 .../SavedPaymentsPage/creditCard.js           | 30 +++++++++++++++----
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
index 20189c9112..e9e81fdba4 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
@@ -4,6 +4,8 @@
     box-shadow: none;
     cursor: pointer;
     display: grid;
+    column-gap: 1rem;
+    row-gap: 2rem;
     grid-template-columns: 1fr auto;
     font-size: 1rem;
     padding: 1rem 1.25rem;
@@ -34,6 +36,7 @@
 }
 
 .title {
+    font-weight: 600;
     grid-column: 1 / span 1;
     grid-row: 1 / span 1;
 }
@@ -69,3 +72,8 @@
     fill: var(--fill, white);
     transition: fill 384ms var(--venia-global-anim-standard);
 }
+
+.deleteText {
+    padding-left: 5px;
+    stroke: rgb(var(--venia-brand-color-1-700));
+}
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
index bc42cf5887..6d45843c93 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Trash2 as DeleteIcon } from 'react-feather';
 
 import { mergeClasses } from '@magento/venia-ui/lib/classify';
@@ -7,8 +7,24 @@ import Icon from '../Icon';
 
 import defaultClasses from './creditCard.css';
 
+/**
+ * Enumerated list of supported credit card types from
+ *
+ * https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Payment/view/base/web/js/model/credit-card-validation/credit-card-number-validator/credit-card-type.js
+ */
 const cardTypeMapper = {
-    VI: 'Visa'
+    VI: 'Visa',
+    MC: 'MasterCard',
+    AE: 'American Express',
+    DN: 'Diners',
+    DI: 'Discover',
+    JCB: 'JCB',
+    UN: 'UnionPay',
+    MI: 'Maestro International',
+    MD: 'Maestro Domestic',
+    HC: 'Hipercard',
+    ELO: 'Elo',
+    AU: 'Aura'
 };
 
 const CreditCard = props => {
@@ -16,7 +32,7 @@ const CreditCard = props => {
     const classes = mergeClasses(defaultClasses, propClasses);
 
     const title = 'Credit Card';
-    const cardNumberAndType = `**** ${details.maskedCC} \u00A0\u00A0 ${
+    const number = `**** ${details.maskedCC} \u00A0\u00A0 ${
         cardTypeMapper[details.type]
     }`;
     const cardExpiryDate = useMemo(() => {
@@ -28,8 +44,11 @@ const CreditCard = props => {
 
         return `${longMonth} ${year}`;
     }, [details.expirationDate]);
+
+    // Should be moved to a talon in the future
+    const handleDelete = useCallback(() => {}, []);
     const deleteButton = (
-        <button className={classes.deleteButton} onClick={() => {}}>
+        <button className={classes.deleteButton} onClick={handleDelete}>
             <Icon
                 classes={{
                     icon: classes.deleteIcon
@@ -37,13 +56,14 @@ const CreditCard = props => {
                 size={16}
                 src={DeleteIcon}
             />
+            <span className={classes.deleteText}>{'Delete'}</span>
         </button>
     );
 
     return (
         <div className={classes.root} key={public_hash}>
             <div className={classes.title}>{title}</div>
-            <div className={classes.number}>{cardNumberAndType}</div>
+            <div className={classes.number}>{number}</div>
             <div className={classes.expiry_date}>{cardExpiryDate}</div>
             <div className={classes.delete}>{deleteButton}</div>
         </div>

From 6ac74aaa68a6f9ff53e46eafa4c95377de4fc35d Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Mon, 30 Nov 2020 16:22:17 -0600
Subject: [PATCH 06/28] Cleaned up some css.

---
 .../SavedPaymentsPage/creditCard.css          | 49 ++++++++++---------
 .../SavedPaymentsPage/creditCard.js           | 18 ++++---
 2 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
index e9e81fdba4..5f0de1d82c 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
@@ -1,23 +1,23 @@
 .root {
-    border: 2px solid rgb(var(--venia-global-color-gray-400));
     border-radius: 0.375rem;
+    border: 2px solid rgb(var(--venia-global-color-gray-400));
     box-shadow: none;
+    column-gap: 1rem;
     cursor: pointer;
     display: grid;
-    column-gap: 1rem;
-    row-gap: 2rem;
-    grid-template-columns: 1fr auto;
     font-size: 1rem;
-    padding: 1rem 1.25rem;
+    grid-template-columns: 1fr auto;
+    min-height: 10rem;
+    min-width: 25rem;
+    outline: none;
+    padding: 1.5rem 2rem;
     position: relative;
-    row-gap: 0.5rem;
     transition: border-color 384ms var(--venia-global-anim-in);
-    outline: none;
 }
 
-@media (min-width: 961px) {
+@media (max-width: 960px) {
     .root {
-        padding: 1.25rem 2rem;
+        min-width: 20rem;
     }
 }
 
@@ -56,24 +56,25 @@
     grid-row: 1 / span 3;
 }
 
-@media (min-width: 961px) {
-    .deleteButton {
-        right: 0.375rem;
-        top: 0.375rem;
-    }
+.deleteButton {
+    padding: 1rem;
+    margin: -1rem;
+    color: rgb(var(--venia-brand-color-1-700));
 }
 
-.deleteButton:hover {
-    --fill: rgb(var(--venia-brand-color-1-700));
+.buttonContent {
+    align-items: center;
+    display: inline-grid;
+    gap: 0.35rem;
+    grid-auto-flow: column;
+    justify-content: center;
+    justify-items: center;
 }
 
 .deleteIcon {
-    stroke: rgb(var(--venia-brand-color-1-700));
-    fill: var(--fill, white);
-    transition: fill 384ms var(--venia-global-anim-standard);
-}
-
-.deleteText {
-    padding-left: 5px;
-    stroke: rgb(var(--venia-brand-color-1-700));
+    --stroke: rgb(var(--venia-global-color-text));
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    touch-action: manipulation;
 }
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
index 6d45843c93..cbdcca0255 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
@@ -49,14 +49,16 @@ const CreditCard = props => {
     const handleDelete = useCallback(() => {}, []);
     const deleteButton = (
         <button className={classes.deleteButton} onClick={handleDelete}>
-            <Icon
-                classes={{
-                    icon: classes.deleteIcon
-                }}
-                size={16}
-                src={DeleteIcon}
-            />
-            <span className={classes.deleteText}>{'Delete'}</span>
+            <span className={classes.buttonContent}>
+                <Icon
+                    classes={{
+                        icon: classes.deleteIcon
+                    }}
+                    size={16}
+                    src={DeleteIcon}
+                />
+                <span className={classes.deleteText}>{'Delete'}</span>
+            </span>
         </button>
     );
 

From e294ac8db067a66ded5bf6d80dcf3c76aa0fbccb Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Mon, 30 Nov 2020 16:28:01 -0600
Subject: [PATCH 07/28] Using INTL.

---
 packages/venia-ui/i18n/en_US.json             | 38 ++++++++++---------
 .../SavedPaymentsPage/creditCard.js           | 16 ++++++--
 2 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/packages/venia-ui/i18n/en_US.json b/packages/venia-ui/i18n/en_US.json
index a70f2e9176..d5d2473163 100644
--- a/packages/venia-ui/i18n/en_US.json
+++ b/packages/venia-ui/i18n/en_US.json
@@ -48,8 +48,8 @@
     "categoryLeaf.allLabel": "All {name}",
     "categoryList.errorFetch": "Data Fetch Error: ",
     "categoryList.noResults": "No child categories found.",
-    "checkoutPage.additionalText": "You will also receive an email with the details and we will let you know when your order has shipped.",
     "checkoutPage.accountSuccessfullyCreated": "Account successfully created.",
+    "checkoutPage.additionalText": "You will also receive an email with the details and we will let you know when your order has shipped.",
     "checkoutPage.billingAddressSame": "Billing address same as shipping address",
     "checkoutPage.checkout": "Checkout",
     "checkoutPage.couponCode": "Enter Coupon Code",
@@ -78,8 +78,8 @@
     "checkoutPage.quantity": "Qty : {quantity}",
     "checkoutPage.quickCheckout": "Quick Checkout When You Return",
     "checkoutPage.returnToCart": "Return to Cart",
-    "checkoutPage.reviewOrder": "Review Order",
     "checkoutPage.reviewAndPlaceOrder": "Review and Place Order",
+    "checkoutPage.reviewOrder": "Review Order",
     "checkoutPage.setAPasswordAndSave": "Set a password and save your information for next time in one easy step!",
     "checkoutPage.shippingMethodStep": "2. Shipping Method",
     "checkoutPage.showAllItems": "SHOW ALL ITEMS",
@@ -197,8 +197,8 @@
     "Live Chat": "Live Chat",
     "loadingIndicator.message": "Fetching Data...",
     "logo.title": "Venia",
-    "magentoRoute.routeError": "That page could not be found. Please try again.",
     "magentoRoute.internalError": "Something went wrong. Please try again.",
+    "magentoRoute.routeError": "That page could not be found. Please try again.",
     "miniCart.checkout": "CHECKOUT",
     "miniCart.editCartButton": "Edit Shopping Bag",
     "miniCart.emptyMessage": "There are no items in your cart.",
@@ -219,6 +219,7 @@
     "orderDetails.billingInformationLabel": "Billing Information",
     "orderDetails.buyAgain": "Buy Again",
     "orderDetails.discount": "Discount",
+    "orderDetails.noShippingInformation": "No shipping information",
     "orderDetails.orderTotal": "Order Total",
     "orderDetails.paymentMethodLabel": "Payment Method",
     "orderDetails.printLabel": "Print Receipt",
@@ -231,8 +232,10 @@
     "orderDetails.tax": "Tax",
     "orderDetails.total": "Total",
     "orderDetails.trackingInformation": "<strong>Tracking number:</strong> {number}",
+    "orderDetails.waitingOnTracking": "Waiting for tracking information",
     "orderHistoryPage.emptyDataMessage": "You don't have any orders yet.",
     "orderHistoryPage.pageTitleText": "Order History",
+    "orderItems.itemsHeading": "Items",
     "orderProgressBar.deliveredText": "Delivered",
     "orderProgressBar.processingText": "Processing",
     "orderProgressBar.readyToShipText": "Ready to ship",
@@ -246,9 +249,10 @@
     "orderRow.shippedText": "Shipped",
     "Our Story": "Our Story",
     "pagination.firstPage": "move to the first page",
-    "pagination.prevPage": "move to the previous page",
-    "pagination.nextPage": "move to the next page",
     "pagination.lastPage": "move to the last page",
+    "pagination.nextPage": "move to the next page",
+    "pagination.prevPage": "move to the previous page",
+    "postcode.label": "ZIP / Postal Code",
     "priceAdjustments.couponCode": "Enter Coupon Code",
     "priceAdjustments.giftOptions": "See Gift Options",
     "priceAdjustments.shippingMethod": "Estimate your Shipping",
@@ -286,7 +290,6 @@
     "productOptions.selectedLabel": "Selected {label}:",
     "productQuantity.label": "product's quantity",
     "productSort.sortButton": "Sort",
-    "postcode.label": "ZIP / Postal Code",
     "quantity.buttonDecrement": "Decrease Quantity",
     "quantity.buttonIncrement": "Increase Quantity",
     "quantity.input": "Item Quantity",
@@ -296,8 +299,8 @@
     "resetPassword.invalidTokenMessage": "Uh oh, something went wrong. Check the link or try again.",
     "resetPassword.newPasswordText": "New Password",
     "resetPassword.pageTitleText": "Reset Password",
-    "resetPassword.savePassword": "Save Password",
     "resetPassword.savedPasswordText": "Your new password has been saved.",
+    "resetPassword.savePassword": "Save Password",
     "resetPassword.successMessage": "Your new password has been saved. Please use this password to sign into your Account.",
     "Returns": "Returns",
     "savedPaymentsPage.addButtonText": "Add a credit card",
@@ -321,14 +324,14 @@
     "shippingInformation.editTitle": "1. Shipping Information",
     "shippingInformation.loading": "Fetching Shipping Information...",
     "shippingMethod.continueToNextStep": "Continue to Payment Information",
-    "shippingMethod.loading": "Loading shipping methods...",
     "shippingMethod.heading": "Shipping Method",
+    "shippingMethod.loading": "Loading shipping methods...",
     "shippingMethods.estimateButton": "I want to estimate my shipping",
     "shippingMethods.message": "For shipping estimates before proceeding to checkout, please provide the Country, State, and ZIP for the destination of your order.",
     "shippingMethods.prompt": "Shipping Methods",
+    "shippingRadios.errorLoading": "Error loading shipping methods. Please ensure a shipping address is set and try again.",
     "shippingSummary.estimatedShipping": "Estimated Shipping",
     "shippingSummary.shipping": "Shipping",
-    "shippingRadios.errorLoading": "Error loading shipping methods. Please ensure a shipping address is set and try again.",
     "Sign In": "Sign In",
     "signIn.createAccountText": "Create an Account",
     "signIn.emailAddressText": "Email address",
@@ -341,6 +344,8 @@
     "sortItem.priceDesc": "Price: High to Low",
     "sortItem.relevance": "Best Match",
     "stockStatusMessage.message": "An item in your cart is currently out-of-stock and must be removed in order to Checkout.",
+    "storedPayments.creditCard": "Credit Card",
+    "storedPayments.delete": "Delete",
     "taxSummary.estimatedTax": "Estimated Tax",
     "taxSummary.tax": "Tax",
     "validation.hasLengthAtLeast": "Must contain at least {value} character(s).",
@@ -357,21 +362,18 @@
     "wishlist.emptyListText": "There are currently no items in this list",
     "wishlist.privateText": "Private",
     "wishlist.publicText": "Public",
+    "wishlistConfirmRemoveProductDialog.confirmationPrompt": "Are you sure you want to delete this product from the list?",
+    "wishlistConfirmRemoveProductDialog.confirmButton": "Delete",
+    "wishlistConfirmRemoveProductDialog.errorMessage": "There was an error deleting this product. Please try again later.",
+    "wishlistConfirmRemoveProductDialog.title": "Remove Product from Wishlist",
     "wishlistItem.addToCart": "Add to Cart",
     "wishlistItem.addToCartError": "Something went wrong. Please refresh and try again.",
     "wishlistMoreActionsDialog.copy": "Copy to",
     "wishlistMoreActionsDialog.delete": "Remove",
     "wishlistMoreActionsDialog.move": "Move to",
     "wishlistMoreActionsDialog.title": "Actions",
-    "wishlistConfirmRemoveProductDialog.confirmButton": "Delete",
-    "wishlistConfirmRemoveProductDialog.confirmationPrompt": "Are you sure you want to delete this product from the list?",
-    "wishlistConfirmRemoveProductDialog.errorMessage": "There was an error deleting this product. Please try again later.",
-    "wishlistConfirmRemoveProductDialog.title": "Remove Product from Wishlist",
     "wishlistPage.disabledMessage": "Sorry, this feature has been disabled.",
     "wishlistPage.fetchErrorMessage": "Something went wrong. Please refresh and try again.",
     "wishlistPage.headingText": "Favorites Lists",
-    "wishlistPage.wishlistDisabledMessage": "The wishlist is not currently available.",
-    "orderDetails.waitingOnTracking": "Waiting for tracking information",
-    "orderItems.itemsHeading": "Items",
-    "orderDetails.noShippingInformation": "No shipping information"
-}
+    "wishlistPage.wishlistDisabledMessage": "The wishlist is not currently available."
+}
\ No newline at end of file
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
index cbdcca0255..381c92d541 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { Trash2 as DeleteIcon } from 'react-feather';
 
 import { mergeClasses } from '@magento/venia-ui/lib/classify';
@@ -31,7 +32,6 @@ const CreditCard = props => {
     const { classes: propClasses, details, public_hash } = props;
     const classes = mergeClasses(defaultClasses, propClasses);
 
-    const title = 'Credit Card';
     const number = `**** ${details.maskedCC} \u00A0\u00A0 ${
         cardTypeMapper[details.type]
     }`;
@@ -57,14 +57,24 @@ const CreditCard = props => {
                     size={16}
                     src={DeleteIcon}
                 />
-                <span className={classes.deleteText}>{'Delete'}</span>
+                <span className={classes.deleteText}>
+                    <FormattedMessage
+                        id={'storedPayments.delete'}
+                        defaultMessage={'Delete'}
+                    />
+                </span>
             </span>
         </button>
     );
 
     return (
         <div className={classes.root} key={public_hash}>
-            <div className={classes.title}>{title}</div>
+            <div className={classes.title}>
+                <FormattedMessage
+                    id={'storedPayments.creditCard'}
+                    defaultMessage={'Credit Card'}
+                />
+            </div>
             <div className={classes.number}>{number}</div>
             <div className={classes.expiry_date}>{cardExpiryDate}</div>
             <div className={classes.delete}>{deleteButton}</div>

From 7c739504ef5ff8eaa340789038d4c1416ffd09c8 Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Mon, 30 Nov 2020 16:37:01 -0600
Subject: [PATCH 08/28] Minor.

---
 packages/venia-ui/i18n/en_US.json                |  5 ++---
 .../components/SavedPaymentsPage/creditCard.js   | 16 ++++++++--------
 .../SavedPaymentsPage/savedPaymentsPage.js       |  9 +--------
 3 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/packages/venia-ui/i18n/en_US.json b/packages/venia-ui/i18n/en_US.json
index d5d2473163..6a18098557 100644
--- a/packages/venia-ui/i18n/en_US.json
+++ b/packages/venia-ui/i18n/en_US.json
@@ -304,8 +304,7 @@
     "resetPassword.successMessage": "Your new password has been saved. Please use this password to sign into your Account.",
     "Returns": "Returns",
     "savedPaymentsPage.addButtonText": "Add a credit card",
-    "savedPaymentsPage.subHeading": "Credit Cards saved here will be available during checkout.",
-    "savedPaymentsPage.title": "Saved Payments - {store_name}",
+    "savedPaymentsPage.title": "Saved Payments",
     "searchBar.heading": "Product Suggestions",
     "searchBar.label": " in {label}",
     "searchPage.filterButton": "Filter",
@@ -376,4 +375,4 @@
     "wishlistPage.fetchErrorMessage": "Something went wrong. Please refresh and try again.",
     "wishlistPage.headingText": "Favorites Lists",
     "wishlistPage.wishlistDisabledMessage": "The wishlist is not currently available."
-}
\ No newline at end of file
+}
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
index 381c92d541..6324593251 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
@@ -14,18 +14,18 @@ import defaultClasses from './creditCard.css';
  * https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Payment/view/base/web/js/model/credit-card-validation/credit-card-number-validator/credit-card-type.js
  */
 const cardTypeMapper = {
-    VI: 'Visa',
-    MC: 'MasterCard',
     AE: 'American Express',
-    DN: 'Diners',
+    AU: 'Aura',
     DI: 'Discover',
+    DN: 'Diners',
+    ELO: 'Elo',
+    HC: 'Hipercard',
     JCB: 'JCB',
-    UN: 'UnionPay',
-    MI: 'Maestro International',
+    MC: 'MasterCard',
     MD: 'Maestro Domestic',
-    HC: 'Hipercard',
-    ELO: 'Elo',
-    AU: 'Aura'
+    MI: 'Maestro International',
+    UN: 'UnionPay',
+    VI: 'Visa'
 };
 
 const CreditCard = props => {
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
index 0e22a0fcbc..e9f7da72b4 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
@@ -35,18 +35,11 @@ const SavedPaymentsPage = props => {
 
     const { formatMessage } = useIntl();
 
-    // STORE_NAME is injected by Webpack at build time.
-    const title = formatMessage(
-        { id: 'savedPaymentsPage.title' },
-        { store_name: STORE_NAME }
-    );
-    const subHeading = formatMessage({ id: 'savedPaymentsPage.subHeading' });
-
+    const title = formatMessage({ id: 'savedPaymentsPage.title' });
     return (
         <div className={classes.root}>
             <Title>{title}</Title>
             <h1 className={classes.heading}>{title}</h1>
-            <h3 className={classes.subHeading}>{subHeading}</h3>
             <div className={classes.content}>{savedPaymentElements}</div>
         </div>
     );

From b1d7f0408dac854714f0a11efa1f6110c3c61b41 Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Mon, 30 Nov 2020 16:42:56 -0600
Subject: [PATCH 09/28] Minor css change.

---
 .../lib/components/SavedPaymentsPage/creditCard.css       | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
index 5f0de1d82c..276e0def99 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
@@ -8,19 +8,13 @@
     font-size: 1rem;
     grid-template-columns: 1fr auto;
     min-height: 10rem;
-    min-width: 25rem;
+    min-width: 20rem;
     outline: none;
     padding: 1.5rem 2rem;
     position: relative;
     transition: border-color 384ms var(--venia-global-anim-in);
 }
 
-@media (max-width: 960px) {
-    .root {
-        min-width: 20rem;
-    }
-}
-
 .root_selected {
     composes: root;
     border-color: rgb(var(--venia-brand-color-1-600));

From 3a1c7fed250eb3029f06f37a1233a9d3ac75f725 Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Tue, 1 Dec 2020 10:43:36 -0600
Subject: [PATCH 10/28] Changed name of payments target to
 checkoutPagePaymentTypes.

---
 ...aymentMethodList.js => CheckoutPagePaymentsList.js} | 10 +++++-----
 packages/venia-ui/lib/targets/venia-ui-declare.js      |  8 +++++---
 packages/venia-ui/lib/targets/venia-ui-intercept.js    |  6 +++---
 3 files changed, 13 insertions(+), 11 deletions(-)
 rename packages/venia-ui/lib/targets/{PaymentMethodList.js => CheckoutPagePaymentsList.js} (75%)

diff --git a/packages/venia-ui/lib/targets/PaymentMethodList.js b/packages/venia-ui/lib/targets/CheckoutPagePaymentsList.js
similarity index 75%
rename from packages/venia-ui/lib/targets/PaymentMethodList.js
rename to packages/venia-ui/lib/targets/CheckoutPagePaymentsList.js
index 1146ccbd83..166c01a1b4 100644
--- a/packages/venia-ui/lib/targets/PaymentMethodList.js
+++ b/packages/venia-ui/lib/targets/CheckoutPagePaymentsList.js
@@ -1,14 +1,14 @@
 /**
- * Implementation of our 'payments' target. This will gather
+ * Implementation of our 'checkoutPagePaymentTypes' target. This will gather
  * PaymentMethod declarations { paymentCode, importPath } from all
  * interceptors, and then tap `builtins.transformModules` to inject a module
  * transform into the build which is configured to generate an object of modules
  * to be imported and then exported.
  *
  * An instance of this class is made available when you use VeniaUI's
- * `payments` target.
+ * `checkoutPagePaymentTypes` target.
  */
-class PaymentMethodList {
+class CheckoutPagePaymentsList {
     /** @hideconstructor */
     constructor(venia) {
         const registry = this;
@@ -16,7 +16,7 @@ class PaymentMethodList {
             module:
                 '@magento/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethodCollection.js',
             publish(targets) {
-                targets.payments.call(registry);
+                targets.checkoutPagePaymentTypes.call(registry);
             }
         });
     }
@@ -26,4 +26,4 @@ class PaymentMethodList {
     }
 }
 
-module.exports = PaymentMethodList;
+module.exports = CheckoutPagePaymentsList;
diff --git a/packages/venia-ui/lib/targets/venia-ui-declare.js b/packages/venia-ui/lib/targets/venia-ui-declare.js
index 19eadf58aa..1af171ff91 100644
--- a/packages/venia-ui/lib/targets/venia-ui-declare.js
+++ b/packages/venia-ui/lib/targets/venia-ui-declare.js
@@ -77,14 +77,16 @@ module.exports = targets => {
          * @see [Payment definition object]{@link PaymentDefinition}
          *
          * @example <caption>Add a payment</caption>
-         * targets.of('@magento/venia-ui').payments.tap(
-         *   payments => payments.add({
+         * targets.of('@magento/venia-ui').checkoutPagePaymentTypes.tap(
+         *   checkoutPagePaymentTypes => checkoutPagePaymentTypes.add({
          *     paymentCode: 'braintree',
          *     importPath: '@magento/braintree_payment'
          *   })
          * );
          */
-        payments: new targets.types.Sync(['payments'])
+        checkoutPagePaymentTypes: new targets.types.Sync([
+            'checkoutPagePaymentTypes'
+        ])
     });
 };
 
diff --git a/packages/venia-ui/lib/targets/venia-ui-intercept.js b/packages/venia-ui/lib/targets/venia-ui-intercept.js
index 4d41478a1c..1bbaef121d 100644
--- a/packages/venia-ui/lib/targets/venia-ui-intercept.js
+++ b/packages/venia-ui/lib/targets/venia-ui-intercept.js
@@ -4,7 +4,7 @@
 const { Targetables } = require('@magento/pwa-buildpack');
 const RichContentRendererList = require('./RichContentRendererList');
 const makeRoutesTarget = require('./makeRoutesTarget');
-const PaymentMethodList = require('./PaymentMethodList');
+const CheckoutPagePaymentsList = require('./CheckoutPagePaymentsList');
 
 module.exports = veniaTargets => {
     const venia = Targetables.using(veniaTargets);
@@ -27,8 +27,8 @@ module.exports = veniaTargets => {
         importPath: './plainHtmlRenderer'
     });
 
-    const paymentMethodList = new PaymentMethodList(venia);
-    paymentMethodList.add({
+    const checkoutPagePaymentsList = new CheckoutPagePaymentsList(venia);
+    checkoutPagePaymentsList.add({
         paymentCode: 'braintree',
         importPath:
             '@magento/venia-ui/lib/components/CheckoutPage/PaymentInformation/creditCard'

From 721a5211c63c4c9426b8b973e41a8d190a89a5c9 Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Tue, 1 Dec 2020 15:00:18 -0600
Subject: [PATCH 11/28] Added savedPaymentTypes target.

---
 .../SavedPaymentsPage/paymentCard.js          |  6 +---
 .../SavedPaymentsPage/savedPaymentTypes.js    | 22 ++++++++++++++
 .../venia-ui/lib/targets/SavedPaymentTypes.js | 29 +++++++++++++++++++
 .../venia-ui/lib/targets/venia-ui-declare.js  |  4 ++-
 .../lib/targets/venia-ui-intercept.js         |  8 +++++
 5 files changed, 63 insertions(+), 6 deletions(-)
 create mode 100644 packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentTypes.js
 create mode 100644 packages/venia-ui/lib/targets/SavedPaymentTypes.js

diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js b/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js
index 788b6d77ed..65c7926174 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js
@@ -1,10 +1,6 @@
 import React from 'react';
 
-import CreditCard from './creditCard';
-
-const paymentCardMapper = {
-    braintree: CreditCard
-};
+import paymentCardMapper from './savedPaymentTypes';
 
 const PaymentCard = props => {
     const PaymentComponent = paymentCardMapper[props.payment_method_code];
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentTypes.js b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentTypes.js
new file mode 100644
index 0000000000..ff47c24c3a
--- /dev/null
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentTypes.js
@@ -0,0 +1,22 @@
+/**
+ * This file is augmented at build time using the @magento/venia-ui build
+ * target "payments", which allows third-party modules to add new payment component mappings.
+ *
+ * @see [Payment definition object]{@link PaymentDefinition}
+ */
+export default {};
+
+/**
+ * A payment definition object that describes a payment in your storefront.
+ *
+ * @typedef {Object} PaymentDefinition
+ * @property {string} paymentCode is use to map your payment
+ * @property {string} importPath Resolvable path to the component the
+ *   Route component will render
+ *
+ * @example <caption>A custom payment method</caption>
+ * const myCustomPayment = {
+ *      paymentCode: 'cc',
+ *     importPath: '@partner/module/path_to_your_component'
+ * }
+ */
diff --git a/packages/venia-ui/lib/targets/SavedPaymentTypes.js b/packages/venia-ui/lib/targets/SavedPaymentTypes.js
new file mode 100644
index 0000000000..d1fa70bb47
--- /dev/null
+++ b/packages/venia-ui/lib/targets/SavedPaymentTypes.js
@@ -0,0 +1,29 @@
+/**
+ * Implementation of our 'checkoutPagePaymentTypes' target. This will gather
+ * PaymentMethod declarations { paymentCode, importPath } from all
+ * interceptors, and then tap `builtins.transformModules` to inject a module
+ * transform into the build which is configured to generate an object of modules
+ * to be imported and then exported.
+ *
+ * An instance of this class is made available when you use VeniaUI's
+ * `checkoutPagePaymentTypes` target.
+ */
+class SavedPaymentTypes {
+    /** @hideconstructor */
+    constructor(venia) {
+        const registry = this;
+        this._methods = venia.esModuleObject({
+            module:
+                '@magento/venia-ui/lib/components/SavedPaymentsPage/savedPaymentTypes.js',
+            publish(targets) {
+                targets.savedPaymentTypes.call(registry);
+            }
+        });
+    }
+
+    add({ paymentCode, importPath }) {
+        this._methods.add(`import ${paymentCode} from '${importPath}'`);
+    }
+}
+
+module.exports = SavedPaymentTypes;
diff --git a/packages/venia-ui/lib/targets/venia-ui-declare.js b/packages/venia-ui/lib/targets/venia-ui-declare.js
index 1af171ff91..551ac372d0 100644
--- a/packages/venia-ui/lib/targets/venia-ui-declare.js
+++ b/packages/venia-ui/lib/targets/venia-ui-declare.js
@@ -86,7 +86,9 @@ module.exports = targets => {
          */
         checkoutPagePaymentTypes: new targets.types.Sync([
             'checkoutPagePaymentTypes'
-        ])
+        ]),
+
+        savedPaymentTypes: new targets.types.Sync(['savedPaymentTypes'])
     });
 };
 
diff --git a/packages/venia-ui/lib/targets/venia-ui-intercept.js b/packages/venia-ui/lib/targets/venia-ui-intercept.js
index 1bbaef121d..cf2ea3f59a 100644
--- a/packages/venia-ui/lib/targets/venia-ui-intercept.js
+++ b/packages/venia-ui/lib/targets/venia-ui-intercept.js
@@ -5,6 +5,7 @@ const { Targetables } = require('@magento/pwa-buildpack');
 const RichContentRendererList = require('./RichContentRendererList');
 const makeRoutesTarget = require('./makeRoutesTarget');
 const CheckoutPagePaymentsList = require('./CheckoutPagePaymentsList');
+const SavedPaymentTypes = require('./SavedPaymentTypes');
 
 module.exports = veniaTargets => {
     const venia = Targetables.using(veniaTargets);
@@ -33,4 +34,11 @@ module.exports = veniaTargets => {
         importPath:
             '@magento/venia-ui/lib/components/CheckoutPage/PaymentInformation/creditCard'
     });
+
+    const savedPaymentTypes = new SavedPaymentTypes(venia);
+    savedPaymentTypes.add({
+        paymentCode: 'braintree',
+        importPath:
+            '@magento/venia-ui/lib/components/SavedPaymentsPage/creditCard'
+    });
 };

From e586dbc32922fbded9250a8bcb4b7b219b96fb77 Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Tue, 1 Dec 2020 16:31:53 -0600
Subject: [PATCH 12/28] Updated target docs.

---
 .../paymentMethodCollection.js                |  5 +-
 .../SavedPaymentsPage/savedPaymentTypes.js    | 12 ++--
 .../venia-ui/lib/targets/SavedPaymentTypes.js |  9 ++-
 .../venia-ui/lib/targets/venia-ui-declare.js  | 55 +++++++++++++------
 4 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethodCollection.js b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethodCollection.js
index ff47c24c3a..6250110945 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethodCollection.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethodCollection.js
@@ -1,6 +1,7 @@
 /**
  * This file is augmented at build time using the @magento/venia-ui build
- * target "payments", which allows third-party modules to add new payment component mappings.
+ * target "checkoutPagePaymentTypes", which allows third-party modules to
+ * add new payment component mappings for the checkout page.
  *
  * @see [Payment definition object]{@link PaymentDefinition}
  */
@@ -17,6 +18,6 @@ export default {};
  * @example <caption>A custom payment method</caption>
  * const myCustomPayment = {
  *      paymentCode: 'cc',
- *     importPath: '@partner/module/path_to_your_component'
+ *      importPath: '@partner/module/path_to_your_component'
  * }
  */
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentTypes.js b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentTypes.js
index ff47c24c3a..b8d34b1e6b 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentTypes.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentTypes.js
@@ -1,22 +1,22 @@
 /**
  * This file is augmented at build time using the @magento/venia-ui build
- * target "payments", which allows third-party modules to add new payment component mappings.
+ * target "savedPaymentTypes", which allows third-party modules to add new saved payment component mappings.
  *
- * @see [Payment definition object]{@link PaymentDefinition}
+ * @see [SavedPayment definition object]{@link SavedPaymentDefinition}
  */
 export default {};
 
 /**
- * A payment definition object that describes a payment in your storefront.
+ * A payment definition object that describes a saved payment in your storefront.
  *
- * @typedef {Object} PaymentDefinition
+ * @typedef {Object} SavedPaymentDefinition
  * @property {string} paymentCode is use to map your payment
  * @property {string} importPath Resolvable path to the component the
  *   Route component will render
  *
  * @example <caption>A custom payment method</caption>
- * const myCustomPayment = {
+ * const myCustomSavedPayment = {
  *      paymentCode: 'cc',
- *     importPath: '@partner/module/path_to_your_component'
+ *      importPath: '@partner/module/path_to_your_component'
  * }
  */
diff --git a/packages/venia-ui/lib/targets/SavedPaymentTypes.js b/packages/venia-ui/lib/targets/SavedPaymentTypes.js
index d1fa70bb47..7631e012ab 100644
--- a/packages/venia-ui/lib/targets/SavedPaymentTypes.js
+++ b/packages/venia-ui/lib/targets/SavedPaymentTypes.js
@@ -1,12 +1,15 @@
 /**
- * Implementation of our 'checkoutPagePaymentTypes' target. This will gather
- * PaymentMethod declarations { paymentCode, importPath } from all
+ * Implementation of our 'savedPaymentTypes' target. This will gather
+ * SavedPaymentMethod declarations { paymentCode, importPath } from all
  * interceptors, and then tap `builtins.transformModules` to inject a module
  * transform into the build which is configured to generate an object of modules
  * to be imported and then exported.
  *
  * An instance of this class is made available when you use VeniaUI's
- * `checkoutPagePaymentTypes` target.
+ * `savedPaymentTypes` target.
+ *
+ * The SavedPaymentMethod declarations collected as part of this target will be
+ * used to render the saved payment methods section in My Account.
  */
 class SavedPaymentTypes {
     /** @hideconstructor */
diff --git a/packages/venia-ui/lib/targets/venia-ui-declare.js b/packages/venia-ui/lib/targets/venia-ui-declare.js
index 551ac372d0..fb85ba8ed0 100644
--- a/packages/venia-ui/lib/targets/venia-ui-declare.js
+++ b/packages/venia-ui/lib/targets/venia-ui-declare.js
@@ -66,15 +66,15 @@ module.exports = targets => {
         routes: new targets.types.AsyncSeriesWaterfall(['routes']),
 
         /**
-         * Provides access to Venia's payment methods
+         * Provides access to Venia's checkout page payment methods
          *
-         * This target lets you add new payment to your storefronts.
+         * This target lets you add new checkout page payment to your storefronts.
          *
          * @member {tapable.SyncHook}
          *
          * @see [Intercept function signature]{@link paymentInterceptFunction}
-         * @see [PaymentMethodList]{@link #PaymentMethodList}
-         * @see [Payment definition object]{@link PaymentDefinition}
+         * @see [CheckoutPaymentTypes]{@link #CheckoutPaymentTypesDefinition}
+         * @see [CheckoutPayment definition object]{@link CheckoutPaymentDefinition}
          *
          * @example <caption>Add a payment</caption>
          * targets.of('@magento/venia-ui').checkoutPagePaymentTypes.tap(
@@ -88,6 +88,25 @@ module.exports = targets => {
             'checkoutPagePaymentTypes'
         ]),
 
+        /**
+         * Provides access to Venia's saved payment methods
+         *
+         * This target lets you add new saved payment method to your storefronts.
+         *
+         * @member {tapable.SyncHook}
+         *
+         * @see [Intercept function signature]{@link savedPaymentInterceptFunction}
+         * @see [SavedPaymentTypes]{@link #SavedPaymentTypesDefinition}
+         * @see [SavedPayment definition object]{@link SavedPaymentDefinition}
+         *
+         * @example <caption>Add a payment</caption>
+         * targets.of('@magento/venia-ui').savedPaymentTypes.tap(
+         *   savedPaymentTypes => savedPaymentTypes.add({
+         *     paymentCode: 'braintree',
+         *     importPath: '@magento/braintree_payment'
+         *   })
+         * );
+         */
         savedPaymentTypes: new targets.types.Sync(['savedPaymentTypes'])
     });
 };
@@ -185,24 +204,24 @@ module.exports = targets => {
  * }
  */
 
-/** Type definition related to: payments */
+/** Type definition related to: checkoutPagePaymentTypes */
 
 /**
- * Intercept function signature for the `payments` target.
+ * Intercept function signature for the `checkoutPagePaymentTypes` target.
  *
- * Interceptors of `payments` should call `.add` on the provided [payment list]{@link #PaymentMethodList}.
+ * Interceptors of `checkoutPagePaymentTypes` should call `.add` on the provided [payment list]{@link #CheckoutPaymentTypesDefinition}.
  *
  * @callback paymentInterceptFunction
  *
- * @param {PaymentMethodList} renderers The list of payments registered
+ * @param {CheckoutPaymentTypesDefinition} renderers The list of payments registered
  * so far in the build.
  *
  */
 
 /**
- * A payment definition object that describes a payment in your storefront.
+ * A payment definition object that describes a checkout page payment in your storefront.
  *
- * @typedef {Object} PaymentDefinition
+ * @typedef {Object} CheckoutPaymentDefinition
  * @property {string} paymentCode is use to map your payment
  * @property {string} importPath Resolvable path to the component the
  *   Route component will render
@@ -214,24 +233,24 @@ module.exports = targets => {
  * }
  */
 
-/** Type definition related to: payments */
+/** Type definition related to: savedPaymentTypes */
 
 /**
- * Intercept function signature for the `payments` target.
+ * Intercept function signature for the `savedPaymentTypes` target.
  *
- * Interceptors of `payments` should call `.add` on the provided [payment list]{@link #PaymentMethodList}.
+ * Interceptors of `savedPaymentTypes` should call `.add` on the provided [payment list]{@link #SavedPaymentTypesDefinition}.
  *
- * @callback paymentInterceptFunction
+ * @callback savedPaymentInterceptFunction
  *
- * @param {PaymentMethodList} renderers The list of payments registered
+ * @param {SavedPaymentTypesDefinition} renderers The list of saved payments registered
  * so far in the build.
  *
  */
 
 /**
- * A payment definition object that describes a payment in your storefront.
+ * A payment definition object that describes a saved payment in your storefront.
  *
- * @typedef {Object} PaymentDefinition
+ * @typedef {Object} SavedPaymentDefinition
  * @property {string} paymentCode is use to map your payment
  * @property {string} importPath Resolvable path to the component the
  *   Route component will render
@@ -239,6 +258,6 @@ module.exports = targets => {
  * @example <caption>A custom payment method</caption>
  * const myCustomPayment = {
  *      paymentCode: 'cc',
- *     importPath: '@partner/module/path_to_your_component'
+ *      importPath: '@partner/module/path_to_your_component'
  * }
  */

From 8eb9f2c2c071413c37096b5955062943b6e2321b Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Wed, 2 Dec 2020 15:02:41 -0600
Subject: [PATCH 13/28] Minor.

---
 .../lib/components/SavedPaymentsPage/paymentCard.css         | 0
 .../lib/components/SavedPaymentsPage/savedPaymentsPage.js    | 5 ++++-
 2 files changed, 4 insertions(+), 1 deletion(-)
 delete mode 100644 packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.css

diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.css b/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
index e9f7da72b4..57a190ca8f 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
@@ -35,7 +35,10 @@ const SavedPaymentsPage = props => {
 
     const { formatMessage } = useIntl();
 
-    const title = formatMessage({ id: 'savedPaymentsPage.title' });
+    const title = formatMessage({
+        id: 'savedPaymentsPage.title',
+        defaultMessage: 'Saved Payments'
+    });
     return (
         <div className={classes.root}>
             <Title>{title}</Title>

From 6a35ae681fc68bfb8bef14e090a13b28589f324e Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Thu, 3 Dec 2020 11:48:05 -0600
Subject: [PATCH 14/28] Hide delete text in mobile view.

---
 .../lib/components/SavedPaymentsPage/creditCard.css         | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
index 276e0def99..0f65702ceb 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
@@ -72,3 +72,9 @@
     justify-content: center;
     touch-action: manipulation;
 }
+
+@media (max-width: 960px) {
+    .deleteText {
+        display: none;
+    }
+}

From d3ea89e0455481f40e05356f2b3dfadb14ebd6f0 Mon Sep 17 00:00:00 2001
From: Tommy Wiebell <twiebell@adobe.com>
Date: Wed, 9 Dec 2020 17:25:01 -0600
Subject: [PATCH 15/28] Address PR feedback

---
 .../talons/AccountMenu/useAccountMenuItems.js |  2 +-
 .../savedPaymentsPage.gql.js                  |  6 +--
 .../SavedPaymentsPage/useSavedPaymentsPage.js | 14 ++++---
 .../SavedPaymentsPage/creditCard.css          | 39 ++----------------
 .../SavedPaymentsPage/creditCard.js           | 40 +++++++++----------
 .../SavedPaymentsPage/paymentCard.js          |  6 +++
 .../SavedPaymentsPage/savedPaymentsPage.js    |  9 +----
 7 files changed, 39 insertions(+), 77 deletions(-)
 rename packages/{venia-ui/lib/components => peregrine/lib/talons}/SavedPaymentsPage/savedPaymentsPage.gql.js (77%)

diff --git a/packages/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js b/packages/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js
index 8156936c39..66700af02f 100644
--- a/packages/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js
+++ b/packages/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js
@@ -23,7 +23,7 @@ export const useAccountMenuItems = props => {
         {
             name: 'Store Credit & Gift Cards',
             id: 'accountMenu.storeCreditLink',
-            url: '/saved-payments'
+            url: ''
         },
         {
             name: 'Favorites Lists',
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.gql.js b/packages/peregrine/lib/talons/SavedPaymentsPage/savedPaymentsPage.gql.js
similarity index 77%
rename from packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.gql.js
rename to packages/peregrine/lib/talons/SavedPaymentsPage/savedPaymentsPage.gql.js
index 1ef294a254..a7b2411570 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.gql.js
+++ b/packages/peregrine/lib/talons/SavedPaymentsPage/savedPaymentsPage.gql.js
@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export const GET_SAVED_PAYMENTS_QUERY = gql`
-    query getSavedPayments {
+    query GetSavedPayments {
         customerPaymentTokens {
             items {
                 details
@@ -13,7 +13,5 @@ export const GET_SAVED_PAYMENTS_QUERY = gql`
 `;
 
 export default {
-    queries: {
-        GET_SAVED_PAYMENTS_QUERY
-    }
+    getSavedPaymentsQuery: GET_SAVED_PAYMENTS_QUERY
 };
diff --git a/packages/peregrine/lib/talons/SavedPaymentsPage/useSavedPaymentsPage.js b/packages/peregrine/lib/talons/SavedPaymentsPage/useSavedPaymentsPage.js
index 4255977167..8552125597 100644
--- a/packages/peregrine/lib/talons/SavedPaymentsPage/useSavedPaymentsPage.js
+++ b/packages/peregrine/lib/talons/SavedPaymentsPage/useSavedPaymentsPage.js
@@ -6,6 +6,9 @@ import { useQuery } from '@apollo/client';
 import { useAppContext } from '@magento/peregrine/lib/context/app';
 import { useUserContext } from '@magento/peregrine/lib/context/user';
 
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import defaultOperations from './savedPaymentsPage.gql';
+
 export const normalizeTokens = responseData => {
     const paymentTokens =
         (responseData && responseData.customerPaymentTokens.items) || [];
@@ -26,17 +29,16 @@ export const normalizeTokens = responseData => {
  * @function
  *
  * @param {Object} props
- * @param {SavedPaymentsPageQueries} props.queries GraphQL queries
+ * @param {SavedPaymentsPageQueries} props.operations GraphQL queries
  *
  * @returns {SavedPaymentsPageTalonProps}
  *
  * @example <caption>Importing into your project</caption>
  * import { useSavedPayments } from '@magento/peregrine/lib/talons/SavedPaymentsPage/useSavedPaymentsPage';
  */
-export const useSavedPaymentsPage = props => {
-    const {
-        queries: { getSavedPaymentsQuery }
-    } = props;
+export const useSavedPaymentsPage = (props = {}) => {
+    const operations = mergeOperations(defaultOperations, props.operations);
+    const { getSavedPaymentsQuery } = operations;
 
     const [
         ,
@@ -85,7 +87,7 @@ export const useSavedPaymentsPage = props => {
  *
  * @property {GraphQLAST} getSavedPaymentsQuery Query for getting saved payments. See https://devdocs.magento.com/guides/v2.4/graphql/queries/customer-payment-tokens.html
  *
- * @see [savedPaymentsPage.gql.js]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.gql.js}
+ * @see [savedPaymentsPage.gql.js]{@link https://github.com/magento/pwa-studio/blob/develop/packages/peregrine/lib/talons/SavedPaymentsPage/savedPaymentsPage.gql.js}
  * for queries used in Venia
  */
 
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
index 0f65702ceb..f402f75809 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
@@ -1,36 +1,21 @@
 .root {
     border-radius: 0.375rem;
     border: 2px solid rgb(var(--venia-global-color-gray-400));
-    box-shadow: none;
     column-gap: 1rem;
-    cursor: pointer;
     display: grid;
-    font-size: 1rem;
     grid-template-columns: 1fr auto;
     min-height: 10rem;
     min-width: 20rem;
-    outline: none;
     padding: 1.5rem 2rem;
-    position: relative;
-    transition: border-color 384ms var(--venia-global-anim-in);
 }
 
 .root_selected {
     composes: root;
     border-color: rgb(var(--venia-brand-color-1-600));
-    cursor: default;
-}
-
-.root:focus {
-    box-shadow: -6px 6px rgb(var(--venia-global-color-blue-700) / 0.3);
-}
-
-.root:hover {
-    border-color: rgb(var(--venia-brand-color-1-600));
 }
 
 .title {
-    font-weight: 600;
+    font-weight: var(--venia-global-fontWeight-semibold);
     grid-column: 1 / span 1;
     grid-row: 1 / span 1;
 }
@@ -51,26 +36,8 @@
 }
 
 .deleteButton {
-    padding: 1rem;
-    margin: -1rem;
-    color: rgb(var(--venia-brand-color-1-700));
-}
-
-.buttonContent {
-    align-items: center;
-    display: inline-grid;
-    gap: 0.35rem;
-    grid-auto-flow: column;
-    justify-content: center;
-    justify-items: center;
-}
-
-.deleteIcon {
-    --stroke: rgb(var(--venia-global-color-text));
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-    touch-action: manipulation;
+    composes: root from '../LinkButton/linkButton.css';
+    text-decoration: none;
 }
 
 @media (max-width: 960px) {
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
index 6324593251..f5614d7f2f 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
@@ -7,6 +7,7 @@ import { mergeClasses } from '@magento/venia-ui/lib/classify';
 import Icon from '../Icon';
 
 import defaultClasses from './creditCard.css';
+import LinkButton from '../LinkButton';
 
 /**
  * Enumerated list of supported credit card types from
@@ -29,46 +30,41 @@ const cardTypeMapper = {
 };
 
 const CreditCard = props => {
-    const { classes: propClasses, details, public_hash } = props;
+    const { classes: propClasses, details } = props;
     const classes = mergeClasses(defaultClasses, propClasses);
 
-    const number = `**** ${details.maskedCC} \u00A0\u00A0 ${
-        cardTypeMapper[details.type]
-    }`;
+    const number = `**** ${details.maskedCC} \u00A0\u00A0 ${cardTypeMapper[
+        details.type
+    ] || ''}`;
     const cardExpiryDate = useMemo(() => {
         const [month, year] = details.expirationDate.split('/');
-        const longMonth = new Date(+year, +month - 1).toLocaleString(
+        const shortMonth = new Date(+year, +month - 1).toLocaleString(
             'default',
             { month: 'short' }
         );
 
-        return `${longMonth} ${year}`;
+        return `${shortMonth}. ${year}`;
     }, [details.expirationDate]);
 
     // Should be moved to a talon in the future
     const handleDelete = useCallback(() => {}, []);
     const deleteButton = (
-        <button className={classes.deleteButton} onClick={handleDelete}>
-            <span className={classes.buttonContent}>
-                <Icon
-                    classes={{
-                        icon: classes.deleteIcon
-                    }}
-                    size={16}
-                    src={DeleteIcon}
+        <LinkButton
+            classes={{ root: classes.deleteButton }}
+            onClick={handleDelete}
+        >
+            <Icon classes={{ icon: undefined }} size={16} src={DeleteIcon} />
+            <span className={classes.deleteText}>
+                <FormattedMessage
+                    id={'storedPayments.delete'}
+                    defaultMessage={'Delete'}
                 />
-                <span className={classes.deleteText}>
-                    <FormattedMessage
-                        id={'storedPayments.delete'}
-                        defaultMessage={'Delete'}
-                    />
-                </span>
             </span>
-        </button>
+        </LinkButton>
     );
 
     return (
-        <div className={classes.root} key={public_hash}>
+        <div className={classes.root}>
             <div className={classes.title}>
                 <FormattedMessage
                     id={'storedPayments.creditCard'}
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js b/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js
index 65c7926174..5614409d3b 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { string } from 'prop-types';
 
 import paymentCardMapper from './savedPaymentTypes';
 
@@ -9,3 +10,8 @@ const PaymentCard = props => {
 };
 
 export default PaymentCard;
+
+PaymentCard.propTypes = {
+    details: string,
+    payment_method_code: string.isRequired
+};
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
index 57a190ca8f..90e6437481 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
@@ -6,17 +6,10 @@ import { mergeClasses } from '@magento/venia-ui/lib/classify';
 
 import { Title } from '../Head';
 import PaymentCard from './paymentCard';
-
-import { GET_SAVED_PAYMENTS_QUERY } from './savedPaymentsPage.gql';
-
 import defaultClasses from './savedPaymentsPage.css';
 
 const SavedPaymentsPage = props => {
-    const talonProps = useSavedPaymentsPage({
-        queries: {
-            getSavedPaymentsQuery: GET_SAVED_PAYMENTS_QUERY
-        }
-    });
+    const talonProps = useSavedPaymentsPage();
 
     const { savedPayments } = talonProps;
 

From 133131c012866c49e2e71022d5ce9645ac9357ee Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Tue, 15 Dec 2020 11:51:41 -0600
Subject: [PATCH 16/28] Snapshot updates.

---
 .../__tests__/__snapshots__/savedPaymentsPage.spec.js.snap | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
index 824c620daa..6991ac6be8 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
@@ -67,13 +67,8 @@ exports[`renders correctly when there are no existing saved payments 1`] = `
   <h1
     className="heading"
   >
-    Saved Payments - Venia
+    Saved Payments
   </h1>
-  <h3
-    className="subHeading"
-  >
-    Credit Cards saved here will be available during checkout.
-  </h3>
   <div
     className="content"
   />

From 4b853187a5cff4e113f4fe3c153b3f15d8b1454c Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Tue, 15 Dec 2020 12:17:02 -0600
Subject: [PATCH 17/28] Updated snapshots.

---
 .../useSavedPaymentsPage.spec.js.snap         |  8 +++
 .../__tests__/useSavedPaymentsPage.spec.js    |  7 ++-
 .../savedPaymentsPage.spec.js.snap            | 53 ++++---------------
 .../__tests__/savedPaymentsPage.spec.js       | 15 ++++--
 4 files changed, 33 insertions(+), 50 deletions(-)
 create mode 100644 packages/peregrine/lib/talons/SavedPaymentsPage/__tests__/__snapshots__/useSavedPaymentsPage.spec.js.snap

diff --git a/packages/peregrine/lib/talons/SavedPaymentsPage/__tests__/__snapshots__/useSavedPaymentsPage.spec.js.snap b/packages/peregrine/lib/talons/SavedPaymentsPage/__tests__/__snapshots__/useSavedPaymentsPage.spec.js.snap
new file mode 100644
index 0000000000..4e4bb1f389
--- /dev/null
+++ b/packages/peregrine/lib/talons/SavedPaymentsPage/__tests__/__snapshots__/useSavedPaymentsPage.spec.js.snap
@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it returns the proper shape 1`] = `
+Object {
+  "isLoading": false,
+  "savedPayments": Array [],
+}
+`;
diff --git a/packages/peregrine/lib/talons/SavedPaymentsPage/__tests__/useSavedPaymentsPage.spec.js b/packages/peregrine/lib/talons/SavedPaymentsPage/__tests__/useSavedPaymentsPage.spec.js
index 09c3de03bb..b8e7b5ae54 100644
--- a/packages/peregrine/lib/talons/SavedPaymentsPage/__tests__/useSavedPaymentsPage.spec.js
+++ b/packages/peregrine/lib/talons/SavedPaymentsPage/__tests__/useSavedPaymentsPage.spec.js
@@ -69,7 +69,7 @@ const Component = props => {
 };
 
 const props = {
-    queries: {
+    operations: {
         getSavedPaymentsQuery: 'getSavedPaymentsQuery'
     }
 };
@@ -80,9 +80,8 @@ test('it returns the proper shape', () => {
 
     // Assert.
     const talonProps = log.mock.calls[0][0];
-    const actualKeys = Object.keys(talonProps);
-    const expectedKeys = ['savedPayments', 'handleAddPayment', 'isLoading'];
-    expect(actualKeys.sort()).toEqual(expectedKeys.sort());
+
+    expect(talonProps).toMatchSnapshot();
 });
 
 test('it returns the savedPayments correctly when present', () => {
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
index 6991ac6be8..4da1d41681 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
@@ -8,53 +8,20 @@ exports[`renders correctly when there are existing saved payments 1`] = `
   <h1
     className="heading"
   >
-    Saved Payments - Venia
+    Saved Payments
   </h1>
-  <h3
-    className="subHeading"
-  >
-    Credit Cards saved here will be available during checkout.
-  </h3>
   <div
     className="content"
   >
-    <button
-      className="addButton"
-      disabled={false}
-      onClick={[MockFunction handleAddPayment]}
-      type="button"
-    >
-      <span
-        className="content"
-      >
-        <Icon
-          classes={
-            Object {
-              "icon": "addIcon",
-            }
-          }
-          size={24}
-          src={[Function]}
-        />
-        <span
-          className="addText"
-        >
-          Add a credit card
-        </span>
-      </span>
-    </button>
-    <div>
-      <div />
-      <div />
-    </div>
-    <div>
-      <div />
-      <div />
-    </div>
-    <div>
-      <div />
-      <div />
-    </div>
+    <mock-PaymentCard
+      0="a"
+    />
+    <mock-PaymentCard
+      0="b"
+    />
+    <mock-PaymentCard
+      0="c"
+    />
   </div>
 </div>
 `;
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js
index 435e5aa7cf..5f10bdcf92 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js
@@ -7,7 +7,6 @@ import SavedPaymentsPage from '../savedPaymentsPage';
 jest.mock('@magento/venia-ui/lib/classify');
 
 jest.mock('../../Head', () => ({ Title: () => 'Title' }));
-jest.mock('../../Icon', () => 'Icon');
 jest.mock(
     '@magento/peregrine/lib/talons/SavedPaymentsPage/useSavedPaymentsPage',
     () => {
@@ -16,11 +15,21 @@ jest.mock(
         };
     }
 );
+jest.mock('../PaymentCard', () => props => <mock-PaymentCard {...props} />);
 
 const props = {};
 const talonProps = {
-    savedPayments: [],
-    handleAddPayment: jest.fn().mockName('handleAddPayment')
+    savedPayments: [
+        {
+            public_hash: '78asfg87ibafv',
+            payment_method_code: 'braintree',
+            details: {
+                maskedCC: '1234',
+                type: 'VI',
+                expirationDate: '12/12/2022'
+            }
+        }
+    ]
 };
 
 it('renders correctly when there are no existing saved payments', () => {

From a6d5603a659206362a7c7082f2557503dfa04232 Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Tue, 15 Dec 2020 15:30:21 -0600
Subject: [PATCH 18/28] Updated tests.

---
 .../savedPaymentsPage.spec.js.snap            | 16 +++++++------
 .../__tests__/savedPaymentsPage.spec.js       |  8 ++-----
 .../__tests__/venia-ui-targets.spec.js        | 24 +++++++++----------
 3 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
index 4da1d41681..7307f6344d 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
@@ -14,13 +14,15 @@ exports[`renders correctly when there are existing saved payments 1`] = `
     className="content"
   >
     <mock-PaymentCard
-      0="a"
-    />
-    <mock-PaymentCard
-      0="b"
-    />
-    <mock-PaymentCard
-      0="c"
+      details={
+        Object {
+          "expirationDate": "12/12/2022",
+          "maskedCC": "1234",
+          "type": "VI",
+        }
+      }
+      payment_method_code="braintree"
+      public_hash="78asfg87ibafv"
     />
   </div>
 </div>
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js
index 5f10bdcf92..b370b24496 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js
@@ -34,7 +34,7 @@ const talonProps = {
 
 it('renders correctly when there are no existing saved payments', () => {
     // Arrange.
-    useSavedPaymentsPage.mockReturnValueOnce(talonProps);
+    useSavedPaymentsPage.mockReturnValueOnce({ savedPayments: [] });
 
     // Act.
     const instance = createTestInstance(<SavedPaymentsPage {...props} />);
@@ -45,11 +45,7 @@ it('renders correctly when there are no existing saved payments', () => {
 
 it('renders correctly when there are existing saved payments', () => {
     // Arrange.
-    const myTalonProps = {
-        ...talonProps,
-        savedPayments: ['a', 'b', 'c']
-    };
-    useSavedPaymentsPage.mockReturnValueOnce(myTalonProps);
+    useSavedPaymentsPage.mockReturnValueOnce(talonProps);
 
     // Act.
     const instance = createTestInstance(<SavedPaymentsPage {...props} />);
diff --git a/packages/venia-ui/lib/targets/__tests__/venia-ui-targets.spec.js b/packages/venia-ui/lib/targets/__tests__/venia-ui-targets.spec.js
index 9937e5016c..c2537db6bd 100644
--- a/packages/venia-ui/lib/targets/__tests__/venia-ui-targets.spec.js
+++ b/packages/venia-ui/lib/targets/__tests__/venia-ui-targets.spec.js
@@ -99,18 +99,18 @@ test('uses routes to inject client-routed pages', async () => {
     expect(built.bundle).toContain('DynamicCheckout');
 });
 
-test('declares payments target', async () => {
+test('declares checkoutPagePaymentTypes target', async () => {
     const bus = mockBuildBus({
         context: __dirname,
         dependencies: [thisDep]
     });
     bus.runPhase('declare');
-    const { payments } = bus.getTargetsOf('@magento/venia-ui');
+    const { checkoutPagePaymentTypes } = bus.getTargetsOf('@magento/venia-ui');
 
     const interceptor = jest.fn();
     // no implementation testing in declare phase
-    payments.tap('test', interceptor);
-    payments.call('woah');
+    checkoutPagePaymentTypes.tap('test', interceptor);
+    checkoutPagePaymentTypes.call('woah');
     expect(interceptor).toHaveBeenCalledWith('woah');
 });
 
@@ -125,22 +125,22 @@ test('uses RichContentRenderers to default strategy Payment Method', async () =>
         }
     );
 
-    const payments = built.run();
-    expect(payments).toHaveProperty('braintree');
+    const checkoutPagePaymentTypes = built.run();
+    expect(checkoutPagePaymentTypes).toHaveProperty('braintree');
 });
 
-test('declares payments target', async () => {
+test('declares checkoutPagePaymentTypes target', async () => {
     const bus = mockBuildBus({
         context: __dirname,
         dependencies: [thisDep]
     });
     bus.runPhase('declare');
-    const { payments } = bus.getTargetsOf('@magento/venia-ui');
+    const { checkoutPagePaymentTypes } = bus.getTargetsOf('@magento/venia-ui');
 
     const interceptor = jest.fn();
     // no implementation testing in declare phase
-    payments.tap('test', interceptor);
-    payments.call('woah');
+    checkoutPagePaymentTypes.tap('test', interceptor);
+    checkoutPagePaymentTypes.call('woah');
     expect(interceptor).toHaveBeenCalledWith('woah');
 });
 
@@ -155,6 +155,6 @@ test('uses RichContentRenderers to default strategy Payment Method', async () =>
         }
     );
 
-    const payments = built.run();
-    expect(payments).toHaveProperty('braintree');
+    const checkoutPagePaymentTypes = built.run();
+    expect(checkoutPagePaymentTypes).toHaveProperty('braintree');
 });

From b6a62baaf110ccd3332d254aed4512429a777017 Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Tue, 15 Dec 2020 15:53:40 -0600
Subject: [PATCH 19/28] Added new tests.

---
 .../__tests__/SavedPaymentTypes.spec.js       | 35 +++++++++++++++++++
 .../SavedPaymentTypes.spec.js.snap            |  9 +++++
 .../__tests__/venia-ui-targets.spec.js        | 23 +++---------
 3 files changed, 48 insertions(+), 19 deletions(-)
 create mode 100644 packages/venia-ui/lib/targets/__tests__/SavedPaymentTypes.spec.js
 create mode 100644 packages/venia-ui/lib/targets/__tests__/__snapshots__/SavedPaymentTypes.spec.js.snap

diff --git a/packages/venia-ui/lib/targets/__tests__/SavedPaymentTypes.spec.js b/packages/venia-ui/lib/targets/__tests__/SavedPaymentTypes.spec.js
new file mode 100644
index 0000000000..79370c54c5
--- /dev/null
+++ b/packages/venia-ui/lib/targets/__tests__/SavedPaymentTypes.spec.js
@@ -0,0 +1,35 @@
+import SavedPaymentTypes from '../SavedPaymentTypes';
+
+const add = jest.fn().mockName('esModuleObject.add');
+
+const esModuleObject = jest
+    .fn()
+    .mockName('esModuleObject')
+    .mockReturnValue({
+        add
+    });
+
+const venia = {
+    esModuleObject
+};
+
+test('Should return correct shape', () => {
+    const savedPaymentTypes = new SavedPaymentTypes(venia);
+
+    expect(savedPaymentTypes).toMatchSnapshot();
+});
+
+test('Should add new import when add is called', () => {
+    const savedPaymentTypes = new SavedPaymentTypes(venia);
+
+    const paymentCode = 'braintree';
+    const importPath = 'path/to/the/component.js';
+    savedPaymentTypes.add({
+        paymentCode,
+        importPath
+    });
+
+    expect(add).toHaveBeenCalledWith(
+        `import ${paymentCode} from '${importPath}'`
+    );
+});
diff --git a/packages/venia-ui/lib/targets/__tests__/__snapshots__/SavedPaymentTypes.spec.js.snap b/packages/venia-ui/lib/targets/__tests__/__snapshots__/SavedPaymentTypes.spec.js.snap
new file mode 100644
index 0000000000..374ab24583
--- /dev/null
+++ b/packages/venia-ui/lib/targets/__tests__/__snapshots__/SavedPaymentTypes.spec.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should return correct shape 1`] = `
+SavedPaymentTypes {
+  "_methods": Object {
+    "add": [MockFunction esModuleObject.add],
+  },
+}
+`;
diff --git a/packages/venia-ui/lib/targets/__tests__/venia-ui-targets.spec.js b/packages/venia-ui/lib/targets/__tests__/venia-ui-targets.spec.js
index c2537db6bd..790ee034e7 100644
--- a/packages/venia-ui/lib/targets/__tests__/venia-ui-targets.spec.js
+++ b/packages/venia-ui/lib/targets/__tests__/venia-ui-targets.spec.js
@@ -129,32 +129,17 @@ test('uses RichContentRenderers to default strategy Payment Method', async () =>
     expect(checkoutPagePaymentTypes).toHaveProperty('braintree');
 });
 
-test('declares checkoutPagePaymentTypes target', async () => {
+test('declares savedPaymentTypes target', async () => {
     const bus = mockBuildBus({
         context: __dirname,
         dependencies: [thisDep]
     });
     bus.runPhase('declare');
-    const { checkoutPagePaymentTypes } = bus.getTargetsOf('@magento/venia-ui');
+    const { savedPaymentTypes } = bus.getTargetsOf('@magento/venia-ui');
 
     const interceptor = jest.fn();
     // no implementation testing in declare phase
-    checkoutPagePaymentTypes.tap('test', interceptor);
-    checkoutPagePaymentTypes.call('woah');
+    savedPaymentTypes.tap('test', interceptor);
+    savedPaymentTypes.call('woah');
     expect(interceptor).toHaveBeenCalledWith('woah');
 });
-
-test('uses RichContentRenderers to default strategy Payment Method', async () => {
-    jest.setTimeout(WEBPACK_BUILD_TIMEOUT);
-
-    const built = await buildModuleWith(
-        '../../components/CheckoutPage/PaymentInformation/paymentMethodCollection.js',
-        {
-            context: __dirname,
-            dependencies: ['@magento/peregrine', thisDep]
-        }
-    );
-
-    const checkoutPagePaymentTypes = built.run();
-    expect(checkoutPagePaymentTypes).toHaveProperty('braintree');
-});

From 1b483cb3a21b1553d8bc3ca66201611a52d3550b Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Tue, 15 Dec 2020 16:27:33 -0600
Subject: [PATCH 20/28] Minor

---
 .../SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js
index b370b24496..23d13a183d 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js
@@ -15,7 +15,7 @@ jest.mock(
         };
     }
 );
-jest.mock('../PaymentCard', () => props => <mock-PaymentCard {...props} />);
+jest.mock('../paymentCard', () => props => <mock-PaymentCard {...props} />);
 
 const props = {};
 const talonProps = {

From e00d30d1aa8a48d283a4591410947f6b08ddbb73 Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Tue, 15 Dec 2020 16:46:56 -0600
Subject: [PATCH 21/28] Hiding delete button till PWA-638 comes in.

---
 .../venia-ui/lib/components/SavedPaymentsPage/creditCard.css     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
index f402f75809..bf8fb00200 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.css
@@ -38,6 +38,7 @@
 .deleteButton {
     composes: root from '../LinkButton/linkButton.css';
     text-decoration: none;
+    visibility: hidden;
 }
 
 @media (max-width: 960px) {

From 33677e8a62a00a766dc835b7f005906e21fd2f90 Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Tue, 15 Dec 2020 17:09:47 -0600
Subject: [PATCH 22/28] Added new tests.

---
 .../__snapshots__/creditCard.spec.js.snap     | 66 +++++++++++++++++++
 .../__snapshots__/paymentCard.spec.js.snap    | 14 ++++
 .../__tests__/creditCard.spec.js              | 18 +++++
 .../__tests__/paymentCard.spec.js             | 23 +++++++
 .../SavedPaymentsPage/creditCard.js           | 23 ++++++-
 .../SavedPaymentsPage/paymentCard.js          |  8 ++-
 6 files changed, 147 insertions(+), 5 deletions(-)
 create mode 100644 packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/creditCard.spec.js.snap
 create mode 100644 packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/paymentCard.spec.js.snap
 create mode 100644 packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/creditCard.spec.js
 create mode 100644 packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/paymentCard.spec.js

diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/creditCard.spec.js.snap b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/creditCard.spec.js.snap
new file mode 100644
index 0000000000..f14720c4df
--- /dev/null
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/creditCard.spec.js.snap
@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render properly 1`] = `
+<div>
+  <div>
+    <mock-FormattedMessage
+      defaultMessage="Credit Card"
+      id="storedPayments.creditCard"
+    />
+  </div>
+  <div>
+    **** 1234    Visa
+  </div>
+  <div>
+    Dec. 12
+  </div>
+  <div>
+    <button
+      disabled={false}
+      onClick={[Function]}
+      type="button"
+    >
+      <span>
+        <span>
+          <svg
+            fill="none"
+            height={16}
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            width={16}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <polyline
+              points="3 6 5 6 21 6"
+            />
+            <path
+              d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+            />
+            <line
+              x1="10"
+              x2="10"
+              y1="11"
+              y2="17"
+            />
+            <line
+              x1="14"
+              x2="14"
+              y1="11"
+              y2="17"
+            />
+          </svg>
+        </span>
+        <span>
+          <mock-FormattedMessage
+            defaultMessage="Delete"
+            id="storedPayments.delete"
+          />
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/paymentCard.spec.js.snap b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/paymentCard.spec.js.snap
new file mode 100644
index 0000000000..a274d240bc
--- /dev/null
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/paymentCard.spec.js.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render properly 1`] = `
+<mock-CreditCard
+  details={
+    Object {
+      "expirationDate": "12/12/2022",
+      "maskedCC": "1234",
+      "type": "VI",
+    }
+  }
+  payment_method_code="braintree"
+/>
+`;
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/creditCard.spec.js b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/creditCard.spec.js
new file mode 100644
index 0000000000..890ca23145
--- /dev/null
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/creditCard.spec.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import CreditCard from '../creditCard';
+
+import { createTestInstance } from '@magento/peregrine';
+
+const props = {
+    details: {
+        maskedCC: '1234',
+        type: 'VI',
+        expirationDate: '12/12/2022'
+    }
+};
+
+test('Should render properly', () => {
+    const instance = createTestInstance(<CreditCard {...props} />);
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/paymentCard.spec.js b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/paymentCard.spec.js
new file mode 100644
index 0000000000..10773e5229
--- /dev/null
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/paymentCard.spec.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import PaymentCard from '../paymentCard';
+
+import { createTestInstance } from '@magento/peregrine';
+
+jest.mock('../savedPaymentTypes', () => ({
+    braintree: props => <mock-CreditCard {...props} />
+}));
+
+const props = {
+    payment_method_code: 'braintree',
+    details: {
+        maskedCC: '1234',
+        type: 'VI',
+        expirationDate: '12/12/2022'
+    }
+};
+
+test('Should render properly', () => {
+    const instance = createTestInstance(<PaymentCard {...props} />);
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
index f5614d7f2f..c8fd5f013b 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/creditCard.js
@@ -1,13 +1,13 @@
 import React, { useCallback, useMemo } from 'react';
+import { shape, string } from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { Trash2 as DeleteIcon } from 'react-feather';
 
-import { mergeClasses } from '@magento/venia-ui/lib/classify';
-
+import LinkButton from '../LinkButton';
 import Icon from '../Icon';
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
 
 import defaultClasses from './creditCard.css';
-import LinkButton from '../LinkButton';
 
 /**
  * Enumerated list of supported credit card types from
@@ -79,3 +79,20 @@ const CreditCard = props => {
 };
 
 export default CreditCard;
+
+CreditCard.propTypes = {
+    classes: shape({
+        delete: 'string',
+        deleteButton: 'string',
+        expiry_date: 'string',
+        number: 'string',
+        root_selected: 'string',
+        root: 'string',
+        title: 'string'
+    }),
+    details: shape({
+        expirationDate: string,
+        maskedCC: string,
+        type: string
+    })
+};
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js b/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js
index 5614409d3b..f1becc4b92 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { string } from 'prop-types';
+import { shape, string } from 'prop-types';
 
 import paymentCardMapper from './savedPaymentTypes';
 
@@ -12,6 +12,10 @@ const PaymentCard = props => {
 export default PaymentCard;
 
 PaymentCard.propTypes = {
-    details: string,
+    details: shape({
+        expirationDate: string,
+        maskedCC: string,
+        type: string
+    }),
     payment_method_code: string.isRequired
 };

From 71a4f64413686dbb42c9066b326e5dc4b1d739c0 Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Wed, 16 Dec 2020 11:07:01 -0600
Subject: [PATCH 23/28] Minor.

---
 .../lib/components/SavedPaymentsPage/paymentCard.js         | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js b/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js
index f1becc4b92..cb38d1ddd0 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/paymentCard.js
@@ -6,6 +6,12 @@ import paymentCardMapper from './savedPaymentTypes';
 const PaymentCard = props => {
     const PaymentComponent = paymentCardMapper[props.payment_method_code];
 
+    if (!PaymentComponent) {
+        /**
+         * Will be handled in https://jira.corp.magento.com/browse/PWA-1202
+         */
+    }
+
     return <PaymentComponent {...props} />;
 };
 

From 59672a4134f6d5615ee2877eba955d2f3eac01ec Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Wed, 16 Dec 2020 13:55:54 -0600
Subject: [PATCH 24/28] Rendering no payments message.

---
 packages/venia-ui/i18n/en_US.json             |  1 +
 .../SavedPaymentsPage/savedPaymentsPage.css   |  4 +++
 .../SavedPaymentsPage/savedPaymentsPage.js    | 31 ++++++++++++++-----
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/packages/venia-ui/i18n/en_US.json b/packages/venia-ui/i18n/en_US.json
index 0508431a24..cc86197d28 100644
--- a/packages/venia-ui/i18n/en_US.json
+++ b/packages/venia-ui/i18n/en_US.json
@@ -313,6 +313,7 @@
     "resetPassword.successMessage": "Your new password has been saved. Please use this password to sign into your Account.",
     "Returns": "Returns",
     "savedPaymentsPage.addButtonText": "Add a credit card",
+    "savedPaymentsPage.noSavedPayments": "You have no saved payments.",
     "savedPaymentsPage.title": "Saved Payments",
     "searchBar.heading": "Product Suggestions",
     "searchBar.label": " in {label}",
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.css b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.css
index fb952d812a..2fe729d5d1 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.css
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.css
@@ -25,6 +25,10 @@
     grid-template-columns: 1fr 1fr 1fr;
 }
 
+.noPayments {
+    text-align: center;
+}
+
 .addButton {
     border: 2px dashed rgb(var(--venia-global-color-gray-400));
     border-radius: 0.375rem;
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
index 90e6437481..0ba082adfe 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
@@ -15,28 +15,43 @@ const SavedPaymentsPage = props => {
 
     const classes = mergeClasses(defaultClasses, props.classes);
 
-    const savedPaymentElements = useMemo(
-        () =>
-            savedPayments.map(paymentDetails => (
+    const { formatMessage } = useIntl();
+
+    const savedPaymentElements = useMemo(() => {
+        if (savedPayments.length) {
+            return savedPayments.map(paymentDetails => (
                 <PaymentCard
                     key={paymentDetails.public_hash}
                     {...paymentDetails}
                 />
-            )),
-        [savedPayments]
-    );
-
-    const { formatMessage } = useIntl();
+            ));
+        } else {
+            return null;
+        }
+    }, [savedPayments]);
+
+    const noSavedPayments = useMemo(() => {
+        if (!savedPayments.length) {
+            return formatMessage({
+                id: 'savedPaymentsPage.noSavedPayments',
+                defaultMessage: 'You have no saved payments.'
+            });
+        } else {
+            return null;
+        }
+    }, [savedPayments, formatMessage]);
 
     const title = formatMessage({
         id: 'savedPaymentsPage.title',
         defaultMessage: 'Saved Payments'
     });
+
     return (
         <div className={classes.root}>
             <Title>{title}</Title>
             <h1 className={classes.heading}>{title}</h1>
             <div className={classes.content}>{savedPaymentElements}</div>
+            <div className={classes.noPayments}>{noSavedPayments}</div>
         </div>
     );
 };

From 9634eed8e739f59793dd9dc23378404d78cf8730 Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Wed, 16 Dec 2020 15:16:46 -0600
Subject: [PATCH 25/28] Clear CustomerPaymentTokens on signout.

---
 packages/peregrine/lib/Apollo/clearCartDataFromCache.js | 3 +++
 packages/peregrine/lib/Apollo/policies/index.js         | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/packages/peregrine/lib/Apollo/clearCartDataFromCache.js b/packages/peregrine/lib/Apollo/clearCartDataFromCache.js
index 205f79a2d3..1febdbba45 100644
--- a/packages/peregrine/lib/Apollo/clearCartDataFromCache.js
+++ b/packages/peregrine/lib/Apollo/clearCartDataFromCache.js
@@ -16,4 +16,7 @@ export const clearCartDataFromCache = async client => {
     await deleteCacheEntry(client, key =>
         key.match(/^\$?AvailableShippingMethod/)
     );
+    await deleteCacheEntry(client, key =>
+        key.match(/^\$?customerPaymentTokens/)
+    );
 };
diff --git a/packages/peregrine/lib/Apollo/policies/index.js b/packages/peregrine/lib/Apollo/policies/index.js
index 5f5669b6c7..32f8c10dc3 100644
--- a/packages/peregrine/lib/Apollo/policies/index.js
+++ b/packages/peregrine/lib/Apollo/policies/index.js
@@ -143,6 +143,9 @@ const typePolicies = {
             }
         }
     },
+    CustomerPaymentTokens: {
+        keyFields: () => 'CustomerPaymentTokens'
+    },
     ProductImage: {
         keyFields: ['url']
     },

From ca5f94ac8bcf0d08652f93bf4a490074751bea42 Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Wed, 16 Dec 2020 15:25:40 -0600
Subject: [PATCH 26/28] Rendering fullpageindicator when data is loading.

---
 .../savedPaymentsPage.spec.js.snap            | 88 +++++++++++++++++++
 .../__tests__/savedPaymentsPage.spec.js       | 18 +++-
 .../SavedPaymentsPage/savedPaymentsPage.js    |  8 +-
 3 files changed, 111 insertions(+), 3 deletions(-)

diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
index 7307f6344d..33fa304cf5 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap
@@ -25,6 +25,9 @@ exports[`renders correctly when there are existing saved payments 1`] = `
       public_hash="78asfg87ibafv"
     />
   </div>
+  <div
+    className="noPayments"
+  />
 </div>
 `;
 
@@ -41,5 +44,90 @@ exports[`renders correctly when there are no existing saved payments 1`] = `
   <div
     className="content"
   />
+  <div
+    className="noPayments"
+  >
+    You have no saved payments.
+  </div>
+</div>
+`;
+
+exports[`renders loading indicator when isLoading is true 1`] = `
+<div
+  className="global"
+>
+  <span
+    className="root"
+  >
+    <svg
+      className="icon"
+      fill="none"
+      height={64}
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      width={64}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <line
+        x1="12"
+        x2="12"
+        y1="2"
+        y2="6"
+      />
+      <line
+        x1="12"
+        x2="12"
+        y1="18"
+        y2="22"
+      />
+      <line
+        x1="4.93"
+        x2="7.76"
+        y1="4.93"
+        y2="7.76"
+      />
+      <line
+        x1="16.24"
+        x2="19.07"
+        y1="16.24"
+        y2="19.07"
+      />
+      <line
+        x1="2"
+        x2="6"
+        y1="12"
+        y2="12"
+      />
+      <line
+        x1="18"
+        x2="22"
+        y1="12"
+        y2="12"
+      />
+      <line
+        x1="4.93"
+        x2="7.76"
+        y1="19.07"
+        y2="16.24"
+      />
+      <line
+        x1="16.24"
+        x2="19.07"
+        y1="7.76"
+        y2="4.93"
+      />
+    </svg>
+  </span>
+  <span
+    className="message"
+  >
+    <mock-FormattedMessage
+      defaultMessage="Fetching Data..."
+      id="loadingIndicator.message"
+    />
+  </span>
 </div>
 `;
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js
index 23d13a183d..dff14ad0a9 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/savedPaymentsPage.spec.js
@@ -32,7 +32,7 @@ const talonProps = {
     ]
 };
 
-it('renders correctly when there are no existing saved payments', () => {
+test('renders correctly when there are no existing saved payments', () => {
     // Arrange.
     useSavedPaymentsPage.mockReturnValueOnce({ savedPayments: [] });
 
@@ -43,7 +43,7 @@ it('renders correctly when there are no existing saved payments', () => {
     expect(instance.toJSON()).toMatchSnapshot();
 });
 
-it('renders correctly when there are existing saved payments', () => {
+test('renders correctly when there are existing saved payments', () => {
     // Arrange.
     useSavedPaymentsPage.mockReturnValueOnce(talonProps);
 
@@ -53,3 +53,17 @@ it('renders correctly when there are existing saved payments', () => {
     // Assert.
     expect(instance.toJSON()).toMatchSnapshot();
 });
+
+test('renders loading indicator when isLoading is true', () => {
+    // Arrange.
+    useSavedPaymentsPage.mockReturnValueOnce({
+        ...talonProps,
+        isLoading: true
+    });
+
+    // Act.
+    const instance = createTestInstance(<SavedPaymentsPage {...props} />);
+
+    // Assert.
+    expect(instance.toJSON()).toMatchSnapshot();
+});
diff --git a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
index 0ba082adfe..9e3b8a989a 100644
--- a/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
+++ b/packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js
@@ -6,12 +6,14 @@ import { mergeClasses } from '@magento/venia-ui/lib/classify';
 
 import { Title } from '../Head';
 import PaymentCard from './paymentCard';
+import { fullPageLoadingIndicator } from '../LoadingIndicator';
+
 import defaultClasses from './savedPaymentsPage.css';
 
 const SavedPaymentsPage = props => {
     const talonProps = useSavedPaymentsPage();
 
-    const { savedPayments } = talonProps;
+    const { isLoading, savedPayments } = talonProps;
 
     const classes = mergeClasses(defaultClasses, props.classes);
 
@@ -46,6 +48,10 @@ const SavedPaymentsPage = props => {
         defaultMessage: 'Saved Payments'
     });
 
+    if (isLoading) {
+        return fullPageLoadingIndicator;
+    }
+
     return (
         <div className={classes.root}>
             <Title>{title}</Title>

From 728274895e8dc049c66e9abae962e7ee0ca98e35 Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Wed, 16 Dec 2020 17:03:30 -0600
Subject: [PATCH 27/28] Snapshot update.

---
 .../Apollo/policies/__tests__/__snapshots__/index.spec.js.snap | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/peregrine/lib/Apollo/policies/__tests__/__snapshots__/index.spec.js.snap b/packages/peregrine/lib/Apollo/policies/__tests__/__snapshots__/index.spec.js.snap
index fd59da86ce..679b5332a3 100644
--- a/packages/peregrine/lib/Apollo/policies/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/peregrine/lib/Apollo/policies/__tests__/__snapshots__/index.spec.js.snap
@@ -66,6 +66,9 @@ Object {
       },
     },
   },
+  "CustomerPaymentTokens": Object {
+    "keyFields": [Function],
+  },
   "ProductImage": Object {
     "keyFields": Array [
       "url",

From a60740058a30c3ab543bdbbdd0c3b7ba935ae3ab Mon Sep 17 00:00:00 2001
From: Revanth Kumar <revanth0212@gmail.com>
Date: Thu, 17 Dec 2020 12:08:21 -0600
Subject: [PATCH 28/28] Removing unnecessary piece of code.

---
 packages/peregrine/lib/Apollo/clearCartDataFromCache.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/peregrine/lib/Apollo/clearCartDataFromCache.js b/packages/peregrine/lib/Apollo/clearCartDataFromCache.js
index 1febdbba45..205f79a2d3 100644
--- a/packages/peregrine/lib/Apollo/clearCartDataFromCache.js
+++ b/packages/peregrine/lib/Apollo/clearCartDataFromCache.js
@@ -16,7 +16,4 @@ export const clearCartDataFromCache = async client => {
     await deleteCacheEntry(client, key =>
         key.match(/^\$?AvailableShippingMethod/)
     );
-    await deleteCacheEntry(client, key =>
-        key.match(/^\$?customerPaymentTokens/)
-    );
 };