Saved payment methods main view.

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/)
+    );
 };

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",

packages/peregrine/lib/Apollo/policies/index.js

@@ -143,6 +143,9 @@ const typePolicies = {
             }
         }
     },
+    CustomerPaymentTokens: {
+        keyFields: () => 'CustomerPaymentTokens'
+    },
     ProductImage: {
         keyFields: ['url']
     },

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}",

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>
 `;

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();
+});

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;

packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.js

@@ -6,37 +6,58 @@ 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);
 
-    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]
-    );
+            ));
+        } else {
+            return null;
+        }
+    }, [savedPayments]);
 
-    const { formatMessage } = useIntl();
+    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'
     });
+
+    if (isLoading) {
+        return fullPageLoadingIndicator;
+    }
+
     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>
     );
 };