Saved payment methods main view.

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 [],
+}
+`;

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', () => {

packages/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.gql.js → 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
 };

packages/peregrine/lib/talons/SavedPaymentsPage/useSavedPaymentsPage.js

@@ -1,11 +1,14 @@
-import { useCallback, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 
 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 [
         ,
@@ -68,14 +70,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
     };
@@ -90,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
  */
 

packages/venia-ui/i18n/en_US.json

@@ -52,8 +52,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",
@@ -84,8 +84,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",
@@ -204,8 +204,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.",
@@ -226,6 +226,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",
@@ -238,8 +239,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",
@@ -253,9 +256,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",
@@ -293,7 +297,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",
@@ -303,13 +306,12 @@
     "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",
-    "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",
@@ -328,14 +330,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",
@@ -348,6 +350,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).",
@@ -364,21 +368,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."
 }

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'
  * }
  */

packages/venia-ui/lib/components/SavedPaymentsPage/__tests__/__snapshots__/savedPaymentsPage.spec.js.snap

@@ -8,53 +8,22 @@ 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
+      details={
+        Object {
+          "expirationDate": "12/12/2022",
+          "maskedCC": "1234",
+          "type": "VI",
+        }
+      }
+      payment_method_code="braintree"
+      public_hash="78asfg87ibafv"
+    />
   </div>
 </div>
 `;
@@ -67,41 +36,10 @@ 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"
-  >
-    <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>
 `;