From 9b237db3b2b415ce14fe1f16899ad280959b1c92 Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Tue, 24 Nov 2020 18:26:11 +0530
Subject: [PATCH 01/29] Added payment method query to
 checkoutPageFragments.gql.js to fetch all available payment methods while
 fetching cart data on checkout page

---
 .../peregrine/lib/talons/CheckoutPage/useCheckoutPage.js     | 5 ++++-
 .../lib/components/CheckoutPage/checkoutPageFragments.gql.js | 3 +++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js b/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
index a54c262305..2180ecaf01 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
@@ -230,6 +230,9 @@ export const useCheckoutPage = props => {
         resetReviewOrderButtonClicked,
         handleReviewOrder,
         reviewOrderButtonClicked,
-        toggleActiveContent
+        toggleActiveContent,
+        availablePaymentMethods:
+            (checkoutData && checkoutData.cart.available_payment_methods) ||
+            null
     };
 };
diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPageFragments.gql.js b/packages/venia-ui/lib/components/CheckoutPage/checkoutPageFragments.gql.js
index 16a75d230a..ea78e76806 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/checkoutPageFragments.gql.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/checkoutPageFragments.gql.js
@@ -12,5 +12,8 @@ export const CheckoutPageFragment = gql`
         }
         # If total quantity is falsy we render empty.
         total_quantity
+        available_payment_methods {
+            code
+        }
     }
 `;

From fb2d1d9255351131ab663be213faaafa7f3c9e47 Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Tue, 24 Nov 2020 18:27:52 +0530
Subject: [PATCH 02/29] Added page level error message when no payment method
 implementations available for available methods

---
 packages/venia-ui/i18n/en_US.json             |  1 +
 .../components/CheckoutPage/checkoutPage.css  | 16 +++++++-
 .../components/CheckoutPage/checkoutPage.js   | 40 ++++++++++++++++++-
 3 files changed, 54 insertions(+), 3 deletions(-)

diff --git a/packages/venia-ui/i18n/en_US.json b/packages/venia-ui/i18n/en_US.json
index 2e24b6a43a..1d8a83b5dd 100644
--- a/packages/venia-ui/i18n/en_US.json
+++ b/packages/venia-ui/i18n/en_US.json
@@ -74,6 +74,7 @@
     "checkoutPage.paymentInformationStep": "3. Payment Information",
     "checkoutPage.paymentMethodStatus": "{selectedPaymentMethod} is not supported for editing.",
     "checkoutPage.paymentSummary": "{cardType} ending in {lastFour}",
+    "checkoutPage.noPaymentAvailable": "Payment is currently unavailable.",
     "checkoutPage.paymentLoadingError": "There was an error loading payments.",
     "checkoutPage.refreshOrTryAgainLater": "Please refresh or try again later.",
     "checkoutPage.placeOrder": "Place Order",
diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.css b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.css
index f37811ce18..4940a7abf9 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.css
+++ b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.css
@@ -84,6 +84,15 @@
     grid-column: 1 / span 1;
 }
 
+.formErrors {
+    border-color: rgb(var(--venia-global-color-error));
+    border-style: solid;
+    border-width: 0 0 0 5px;
+    padding: 1rem 0 1rem 1rem;
+    display: grid;
+    grid-column: 1 / span 1;
+}
+
 @media (min-width: 961px) {
     .summaryContainer {
         grid-column: 2 / span 1;
@@ -93,9 +102,14 @@
         height: min-content;
     }
 
-    .signin_container ~ .summaryContainer {
+    .signin_container ~ .summaryContainer,
+    .formErrors ~ .summaryContainer {
         grid-row: 3 / span 3;
     }
+
+    .signin_container + .formErrors ~ .summaryContainer {
+        grid-row: 4 / span 3;
+    }
 }
 
 .review_order_button {
diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
index 5a430851db..bd2e222240 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
@@ -16,6 +16,7 @@ import Icon from '../Icon';
 import LinkButton from '../LinkButton';
 import { fullPageLoadingIndicator } from '../LoadingIndicator';
 import StockStatusMessage from '../StockStatusMessage';
+import FormError from '../FormError';
 import AddressBook from './AddressBook';
 import OrderSummary from './OrderSummary';
 import PaymentInformation from './PaymentInformation';
@@ -24,6 +25,7 @@ import ShippingMethod from './ShippingMethod';
 import ShippingInformation from './ShippingInformation';
 import OrderConfirmationPage from './OrderConfirmationPage';
 import ItemsReview from './ItemsReview';
+import payments from './PaymentInformation/paymentMethodCollection';
 import defaultClasses from './checkoutPage.css';
 import CheckoutPageOperations from './checkoutPage.gql.js';
 
@@ -65,7 +67,8 @@ const CheckoutPage = props => {
         resetReviewOrderButtonClicked,
         handleReviewOrder,
         reviewOrderButtonClicked,
-        toggleActiveContent
+        toggleActiveContent,
+        availablePaymentMethods
     } = talonProps;
 
     const [, { addToast }] = useToasts();
@@ -162,6 +165,29 @@ const CheckoutPage = props => {
                 </h3>
             );
 
+        const isPaymentAvailable = !!availablePaymentMethods
+            .map(({ code }) => {
+                // If we don't have an implementation for a method type, ignore it.
+                if (!Object.keys(payments).includes(code)) {
+                    return;
+                }
+                return true;
+            })
+            .filter(paymentMethod => !!paymentMethod).length;
+
+        const errors = new Map();
+
+        if (!isPaymentAvailable) {
+            errors.set('paymentMethods', [
+                new Error(
+                    formatMessage({
+                        id: 'checkoutPage.noPaymentAvailable',
+                        defaultMessage: 'Payment is currently unavailable.'
+                    })
+                )
+            ]);
+        }
+
         const paymentInformationSection =
             checkoutStep >= CHECKOUT_STEP.PAYMENT ? (
                 <PaymentInformation
@@ -193,7 +219,11 @@ const CheckoutPage = props => {
                     onClick={handleReviewOrder}
                     priority="high"
                     className={classes.review_order_button}
-                    disabled={reviewOrderButtonClicked || isUpdating}
+                    disabled={
+                        reviewOrderButtonClicked ||
+                        isUpdating ||
+                        !isPaymentAvailable
+                    }
                 >
                     <FormattedMessage
                         id={'checkoutPage.reviewOrder'}
@@ -280,6 +310,12 @@ const CheckoutPage = props => {
         checkoutContent = (
             <div className={checkoutContentClass}>
                 {loginButton}
+                <FormError
+                    classes={{
+                        root: classes.formErrors
+                    }}
+                    errors={errors.get('paymentMethods') || []}
+                />
                 <div className={classes.heading_container}>
                     <StockStatusMessage
                         cartItems={cartItems}

From e1c385d409660573bbee172087bf515e5bd93329 Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Wed, 25 Nov 2020 16:49:14 +0530
Subject: [PATCH 03/29] Adding checkout page test update

---
 .../__snapshots__/checkoutPage.spec.js.snap   | 36 +++++++++++++++++++
 .../__tests__/checkoutPage.spec.js            |  3 +-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap b/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap
index 015770cce8..c37ef46ee0 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap
@@ -8,6 +8,15 @@ exports[`CheckoutPage renders address book for customer 1`] = `
   <div
     className="checkoutContent_hidden"
   >
+    <div
+      className="root"
+    >
+      <span
+        className="errorMessage"
+      >
+        Payment is currently unavailable.
+      </span>
+    </div>
     <div
       className="heading_container"
     >
@@ -92,6 +101,15 @@ exports[`CheckoutPage renders checkout content for customer - default address 1`
   <div
     className="checkoutContent"
   >
+    <div
+      className="root"
+    >
+      <span
+        className="errorMessage"
+      >
+        Payment is currently unavailable.
+      </span>
+    </div>
     <div
       className="heading_container"
     >
@@ -176,6 +194,15 @@ exports[`CheckoutPage renders checkout content for customer - no default address
   <div
     className="checkoutContent"
   >
+    <div
+      className="root"
+    >
+      <span
+        className="errorMessage"
+      >
+        Payment is currently unavailable.
+      </span>
+    </div>
     <div
       className="heading_container"
     >
@@ -279,6 +306,15 @@ exports[`CheckoutPage renders checkout content for guest 1`] = `
         </span>
       </button>
     </div>
+    <div
+      className="root"
+    >
+      <span
+        className="errorMessage"
+      >
+        Payment is currently unavailable.
+      </span>
+    </div>
     <div
       className="heading_container"
     >
diff --git a/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js b/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js
index 03899f1f31..6e4a4ed5af 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js
@@ -69,7 +69,8 @@ const defaultTalonProps = {
         .mockName('setShippingInformationDone'),
     setShippingMethodDone: jest.fn().mockName('setShippingMethodDone'),
     setPaymentInformationDone: jest.fn().mockName('setPaymentInformationDone'),
-    toggleActiveContent: jest.fn().mockName('toggleActiveContent')
+    toggleActiveContent: jest.fn().mockName('toggleActiveContent'),
+    availablePaymentMethods: [],
 };
 describe('CheckoutPage', () => {
     test('throws a toast if there is an error', () => {

From e8ff5afd987f869b9a860aa48ba78c7ebfd07fce Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Wed, 25 Nov 2020 16:49:29 +0530
Subject: [PATCH 04/29] Adding useCheckoutPage talon test

---
 .../__snapshots__/useCheckoutPage.spec.js.snap   |  1 +
 .../__tests__/useCheckoutPage.spec.js            | 16 ++++++++++++++++
 2 files changed, 17 insertions(+)

diff --git a/packages/peregrine/lib/talons/CheckoutPage/__tests__/__snapshots__/useCheckoutPage.spec.js.snap b/packages/peregrine/lib/talons/CheckoutPage/__tests__/__snapshots__/useCheckoutPage.spec.js.snap
index c194b82e31..cc65cfcd27 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/__tests__/__snapshots__/useCheckoutPage.spec.js.snap
+++ b/packages/peregrine/lib/talons/CheckoutPage/__tests__/__snapshots__/useCheckoutPage.spec.js.snap
@@ -30,5 +30,6 @@ Object {
   "setShippingInformationDone": [Function],
   "setShippingMethodDone": [Function],
   "toggleActiveContent": [Function],
+  "availablePaymentMethods": null
 }
 `;
diff --git a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
index 3e3116d801..d2f115c6f9 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
@@ -590,3 +590,19 @@ test('resetReviewOrderButtonClicked should set reviewOrderButtonClicked to false
 
     expect(step2Props.reviewOrderButtonClicked).toBeFalsy();
 });
+
+test('check availablePaymentMethods, if not implemented then show page level message', () => {
+
+    placeOrderMutationResult.mockReturnValueOnce([
+        () => {},
+        {
+            data: null,
+            loading: false,
+            error: null
+        }
+    ]);
+
+    const { talonProps } = getTalonProps(props);
+
+    expect(talonProps.availablePaymentMethods).toBeNull();
+});

From 6aff5b506f8e46ee763782d5fb21f3740fd567ca Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Wed, 25 Nov 2020 18:31:34 +0530
Subject: [PATCH 05/29] executed prettier on checkoutPage.spec.js

---
 .../lib/components/CheckoutPage/__tests__/checkoutPage.spec.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js b/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js
index 6e4a4ed5af..d968c030b1 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js
@@ -70,7 +70,7 @@ const defaultTalonProps = {
     setShippingMethodDone: jest.fn().mockName('setShippingMethodDone'),
     setPaymentInformationDone: jest.fn().mockName('setPaymentInformationDone'),
     toggleActiveContent: jest.fn().mockName('toggleActiveContent'),
-    availablePaymentMethods: [],
+    availablePaymentMethods: []
 };
 describe('CheckoutPage', () => {
     test('throws a toast if there is an error', () => {

From aefa7a80f2acb6254f97a115b828c00287073ab5 Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Wed, 25 Nov 2020 18:31:45 +0530
Subject: [PATCH 06/29] executed prettier on useCheckoutPage.spec.js

---
 .../lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
index d2f115c6f9..f8756e31ac 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
@@ -592,7 +592,6 @@ test('resetReviewOrderButtonClicked should set reviewOrderButtonClicked to false
 });
 
 test('check availablePaymentMethods, if not implemented then show page level message', () => {
-
     placeOrderMutationResult.mockReturnValueOnce([
         () => {},
         {

From 342e5e75e38e8477bd5536db1b0e86726b0039a1 Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Thu, 26 Nov 2020 10:52:57 +0530
Subject: [PATCH 07/29] Updated unit test

---
 .../CheckoutPage/__tests__/useCheckoutPage.spec.js       | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
index f8756e31ac..fb74e01164 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
@@ -592,15 +592,6 @@ test('resetReviewOrderButtonClicked should set reviewOrderButtonClicked to false
 });
 
 test('check availablePaymentMethods, if not implemented then show page level message', () => {
-    placeOrderMutationResult.mockReturnValueOnce([
-        () => {},
-        {
-            data: null,
-            loading: false,
-            error: null
-        }
-    ]);
-
     const { talonProps } = getTalonProps(props);
 
     expect(talonProps.availablePaymentMethods).toBeNull();

From 717ac9bf92909a08fb1cbb6fc940af199decd528 Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Thu, 26 Nov 2020 11:22:38 +0530
Subject: [PATCH 08/29] Corrected test snap to pass the unit test

---
 .../__tests__/__snapshots__/useCheckoutPage.spec.js.snap        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/peregrine/lib/talons/CheckoutPage/__tests__/__snapshots__/useCheckoutPage.spec.js.snap b/packages/peregrine/lib/talons/CheckoutPage/__tests__/__snapshots__/useCheckoutPage.spec.js.snap
index cc65cfcd27..4918e21a08 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/__tests__/__snapshots__/useCheckoutPage.spec.js.snap
+++ b/packages/peregrine/lib/talons/CheckoutPage/__tests__/__snapshots__/useCheckoutPage.spec.js.snap
@@ -3,6 +3,7 @@
 exports[`Should return correct shape 1`] = `
 Object {
   "activeContent": "checkout",
+  "availablePaymentMethods": null,
   "cartItems": Array [],
   "checkoutStep": 1,
   "customer": Object {
@@ -30,6 +31,5 @@ Object {
   "setShippingInformationDone": [Function],
   "setShippingMethodDone": [Function],
   "toggleActiveContent": [Function],
-  "availablePaymentMethods": null
 }
 `;

From 08be4178f42e2d1b1b01dadf2c34d377bb23bc38 Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Thu, 26 Nov 2020 13:06:24 +0530
Subject: [PATCH 09/29] Converted "CheckoutPageOperations" to peregrine. Also
 moved other connected queries to peregrine.

---
 .../talons}/CheckoutPage/ItemsReview/itemsReview.gql.js  | 0
 .../CheckoutPage/ItemsReview/itemsReviewFragments.gql.js | 0
 .../orderConfirmationPageFragments.gql.js                | 0
 .../lib/talons}/CheckoutPage/checkoutPage.gql.js         | 0
 .../talons}/CheckoutPage/checkoutPageFragments.gql.js    | 0
 .../peregrine/lib/talons/CheckoutPage/useCheckoutPage.js | 9 ++++++++-
 .../components/CheckoutPage/ItemsReview/itemsReview.js   | 2 +-
 .../venia-ui/lib/components/CheckoutPage/checkoutPage.js | 5 +----
 8 files changed, 10 insertions(+), 6 deletions(-)
 rename packages/{venia-ui/lib/components => peregrine/lib/talons}/CheckoutPage/ItemsReview/itemsReview.gql.js (100%)
 rename packages/{venia-ui/lib/components => peregrine/lib/talons}/CheckoutPage/ItemsReview/itemsReviewFragments.gql.js (100%)
 rename packages/{venia-ui/lib/components => peregrine/lib/talons}/CheckoutPage/OrderConfirmationPage/orderConfirmationPageFragments.gql.js (100%)
 rename packages/{venia-ui/lib/components => peregrine/lib/talons}/CheckoutPage/checkoutPage.gql.js (100%)
 rename packages/{venia-ui/lib/components => peregrine/lib/talons}/CheckoutPage/checkoutPageFragments.gql.js (100%)

diff --git a/packages/venia-ui/lib/components/CheckoutPage/ItemsReview/itemsReview.gql.js b/packages/peregrine/lib/talons/CheckoutPage/ItemsReview/itemsReview.gql.js
similarity index 100%
rename from packages/venia-ui/lib/components/CheckoutPage/ItemsReview/itemsReview.gql.js
rename to packages/peregrine/lib/talons/CheckoutPage/ItemsReview/itemsReview.gql.js
diff --git a/packages/venia-ui/lib/components/CheckoutPage/ItemsReview/itemsReviewFragments.gql.js b/packages/peregrine/lib/talons/CheckoutPage/ItemsReview/itemsReviewFragments.gql.js
similarity index 100%
rename from packages/venia-ui/lib/components/CheckoutPage/ItemsReview/itemsReviewFragments.gql.js
rename to packages/peregrine/lib/talons/CheckoutPage/ItemsReview/itemsReviewFragments.gql.js
diff --git a/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPageFragments.gql.js b/packages/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/orderConfirmationPageFragments.gql.js
similarity index 100%
rename from packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPageFragments.gql.js
rename to packages/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/orderConfirmationPageFragments.gql.js
diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.gql.js b/packages/peregrine/lib/talons/CheckoutPage/checkoutPage.gql.js
similarity index 100%
rename from packages/venia-ui/lib/components/CheckoutPage/checkoutPage.gql.js
rename to packages/peregrine/lib/talons/CheckoutPage/checkoutPage.gql.js
diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPageFragments.gql.js b/packages/peregrine/lib/talons/CheckoutPage/checkoutPageFragments.gql.js
similarity index 100%
rename from packages/venia-ui/lib/components/CheckoutPage/checkoutPageFragments.gql.js
rename to packages/peregrine/lib/talons/CheckoutPage/checkoutPageFragments.gql.js
diff --git a/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js b/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
index 2180ecaf01..e64796a3dd 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
@@ -10,6 +10,11 @@ import { clearCartDataFromCache } from '../../Apollo/clearCartDataFromCache';
 import { useAppContext } from '../../context/app';
 import { useUserContext } from '../../context/user';
 import { useCartContext } from '../../context/cart';
+
+import mergeOperations from '../../util/shallowMerge';
+
+import DEFAULT_OPERATIONS from './checkoutPage.gql.js';
+
 import CheckoutError from './CheckoutError';
 
 export const CHECKOUT_STEP = {
@@ -20,6 +25,8 @@ export const CHECKOUT_STEP = {
 };
 
 export const useCheckoutPage = props => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+
     const {
         mutations: { createCartMutation, placeOrderMutation },
         queries: {
@@ -27,7 +34,7 @@ export const useCheckoutPage = props => {
             getCustomerQuery,
             getOrderDetailsQuery
         }
-    } = props;
+    } = operations;
 
     const [reviewOrderButtonClicked, setReviewOrderButtonClicked] = useState(
         false
diff --git a/packages/venia-ui/lib/components/CheckoutPage/ItemsReview/itemsReview.js b/packages/venia-ui/lib/components/CheckoutPage/ItemsReview/itemsReview.js
index 9241956e6a..60404c4ff8 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/ItemsReview/itemsReview.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/ItemsReview/itemsReview.js
@@ -8,7 +8,7 @@ import ShowAllButton from './showAllButton';
 import LoadingIndicator from '../../LoadingIndicator';
 import { mergeClasses } from '../../../classify';
 
-import LIST_OF_PRODUCTS_IN_CART_QUERY from './itemsReview.gql';
+import LIST_OF_PRODUCTS_IN_CART_QUERY from '@magento/peregrine/lib/talons/CheckoutPage/ItemsReview/itemsReview.gql';
 
 import defaultClasses from './itemsReview.css';
 
diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
index bd2e222240..5e4a1465e2 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
@@ -27,16 +27,13 @@ import OrderConfirmationPage from './OrderConfirmationPage';
 import ItemsReview from './ItemsReview';
 import payments from './PaymentInformation/paymentMethodCollection';
 import defaultClasses from './checkoutPage.css';
-import CheckoutPageOperations from './checkoutPage.gql.js';
 
 const errorIcon = <Icon src={AlertCircleIcon} size={20} />;
 
 const CheckoutPage = props => {
     const { classes: propClasses } = props;
     const { formatMessage } = useIntl();
-    const talonProps = useCheckoutPage({
-        ...CheckoutPageOperations
-    });
+    const talonProps = useCheckoutPage({});
 
     const {
         /**

From 395e2197f7a90967e340a66b7216ab1e2e3bb643 Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Thu, 26 Nov 2020 15:03:50 +0530
Subject: [PATCH 10/29] Fixed useCheckoutPage.spec.js to make it compatible
 with migrated "CheckoutPageOperations" in useCheckoutPage.js peregrine
 component

---
 .../__tests__/useCheckoutPage.spec.js         | 60 ++++++++++---------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
index fb74e01164..034bbee507 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
@@ -68,9 +68,11 @@ const getCheckoutDetailsQuery = 'getCheckoutDetailsQuery';
 const getOrderDetailsQuery = 'getOrderDetailsQuery';
 const getCustomerQuery = 'getCustomerQuery';
 
-const props = {
-    mutations: { createCartMutation, placeOrderMutation },
-    queries: { getCheckoutDetailsQuery, getOrderDetailsQuery, getCustomerQuery }
+const defaultProps = {
+    operations: {
+        mutations: { createCartMutation, placeOrderMutation },
+        queries: { getCheckoutDetailsQuery, getOrderDetailsQuery, getCustomerQuery }
+    }
 };
 
 const readQuery = jest.fn().mockReturnValue({ cart: {} });
@@ -186,7 +188,7 @@ beforeEach(() => {
  */
 
 test('Should return correct shape', () => {
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps).toMatchSnapshot();
 });
@@ -197,7 +199,7 @@ test('isLoading should be set to true if the checkout details query networkStatu
         networkStatus: 4
     });
 
-    const { talonProps, update } = getTalonProps(props);
+    const { talonProps, update } = getTalonProps(defaultProps);
 
     expect(talonProps.isLoading).toBeTruthy();
 
@@ -225,7 +227,7 @@ test('isLoading should be set to true if the customer details query is loading',
         loading: true
     });
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps.isLoading).toBeTruthy();
 });
@@ -235,7 +237,7 @@ test('returns cartItems from getOrderDetails query', () => {
     getCheckoutDetailsQueryResult.mockReturnValueOnce({
         data: { cart: { items: cartItems } }
     });
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps.cartItems).toEqual(cartItems);
 });
@@ -251,7 +253,7 @@ test('returned error prop should be error from place order mutation', () => {
         }
     ]);
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps.error).toBeInstanceOf(CheckoutError);
 });
@@ -262,7 +264,7 @@ test('should get order details when handlePlaceOrder called', () => {
         { createCart: () => {}, removeCart: () => {} }
     ]);
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     act(() => {
         talonProps.handlePlaceOrder();
@@ -288,7 +290,7 @@ test("should place order and cleanup when we have order details and place order
         return [jest.fn(), { data: {}, loading: false }];
     });
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     await act(async () => {
         await talonProps.handlePlaceOrder();
@@ -312,7 +314,7 @@ test('hasError should be true if place order mutation failed with errors', () =>
         }
     ]);
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps.hasError).toBeTruthy();
 });
@@ -325,7 +327,7 @@ describe('isCartEmpty', () => {
             loading: false
         });
 
-        const { talonProps } = getTalonProps(props);
+        const { talonProps } = getTalonProps(defaultProps);
 
         expect(talonProps.isCartEmpty).toBeTruthy();
     });
@@ -341,7 +343,7 @@ describe('isCartEmpty', () => {
             loading: false
         });
 
-        const { talonProps } = getTalonProps(props);
+        const { talonProps } = getTalonProps(defaultProps);
 
         expect(talonProps.isCartEmpty).toBeTruthy();
     });
@@ -357,7 +359,7 @@ describe('isCartEmpty', () => {
             loading: false
         });
 
-        const { talonProps } = getTalonProps(props);
+        const { talonProps } = getTalonProps(defaultProps);
 
         expect(talonProps.isCartEmpty).toBeFalsy();
     });
@@ -366,7 +368,7 @@ describe('isCartEmpty', () => {
 test('isGuestCheckout should be negation of isSignedIn from useUserContext', () => {
     useUserContext.mockReturnValueOnce([{ isSignedIn: false }]);
 
-    const { talonProps, update } = getTalonProps(props);
+    const { talonProps, update } = getTalonProps(defaultProps);
 
     expect(talonProps.isGuestCheckout).toBeTruthy();
 
@@ -388,7 +390,7 @@ test('orderDetailsData should be data from getOrderDetailsQuery', () => {
         }
     ]);
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps.orderDetailsData).toBe(data);
 });
@@ -403,7 +405,7 @@ test('orderDetailsLoading should be loading status of the getOrderDetailsQuery',
         }
     ]);
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps.orderDetailsLoading).toBeTruthy();
 });
@@ -424,7 +426,7 @@ test('orderNumber should be the order_number from the place order mutation resul
         }
     ]);
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps.orderNumber).toBe('123');
 });
@@ -439,7 +441,7 @@ test('orderNumber should be the null if place order mutation result is falsy', (
         }
     ]);
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps.orderNumber).toBeNull();
 });
@@ -454,14 +456,14 @@ test('placeOrderLoading should be loading status of the place order mutation', (
         }
     ]);
 
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps.placeOrderLoading).toBeTruthy();
 });
 
 describe('setShippingInformationDone', () => {
     test('should set the checkoutStep to SHIPPING_METHOD if current checkoutStep is SHIPPING_ADDRESS', () => {
-        const { talonProps, update } = getTalonProps(props);
+        const { talonProps, update } = getTalonProps(defaultProps);
 
         talonProps.setCheckoutStep(CHECKOUT_STEP.SHIPPING_ADDRESS);
 
@@ -477,7 +479,7 @@ describe('setShippingInformationDone', () => {
     });
 
     test('should not set the checkoutStep to SHIPPING_METHOD if current checkoutStep is not SHIPPING_ADDRESS', () => {
-        const { talonProps, update } = getTalonProps(props);
+        const { talonProps, update } = getTalonProps(defaultProps);
 
         talonProps.setCheckoutStep(CHECKOUT_STEP.PAYMENT);
 
@@ -495,7 +497,7 @@ describe('setShippingInformationDone', () => {
 
 describe('setShippingMethodDone', () => {
     test('should set the checkoutStep to PAYMENT if current checkoutStep is SHIPPING_METHOD', () => {
-        const { talonProps, update } = getTalonProps(props);
+        const { talonProps, update } = getTalonProps(defaultProps);
 
         talonProps.setCheckoutStep(CHECKOUT_STEP.SHIPPING_METHOD);
 
@@ -511,7 +513,7 @@ describe('setShippingMethodDone', () => {
     });
 
     test('should not set the checkoutStep to PAYMENT if current checkoutStep is not SHIPPING_METHOD', () => {
-        const { talonProps, update } = getTalonProps(props);
+        const { talonProps, update } = getTalonProps(defaultProps);
 
         talonProps.setCheckoutStep(CHECKOUT_STEP.REVIEW);
 
@@ -529,7 +531,7 @@ describe('setShippingMethodDone', () => {
 
 describe('setPaymentInformationDone', () => {
     test('should set the checkoutStep to REVIEW if current checkoutStep is PAYMENT', () => {
-        const { talonProps, update } = getTalonProps(props);
+        const { talonProps, update } = getTalonProps(defaultProps);
 
         talonProps.setCheckoutStep(CHECKOUT_STEP.PAYMENT);
 
@@ -545,7 +547,7 @@ describe('setPaymentInformationDone', () => {
     });
 
     test('should not set the checkoutStep to REVIEW if current checkoutStep is not PAYMENT', () => {
-        const { talonProps, update } = getTalonProps(props);
+        const { talonProps, update } = getTalonProps(defaultProps);
 
         talonProps.setCheckoutStep(CHECKOUT_STEP.SHIPPING_METHOD);
 
@@ -562,7 +564,7 @@ describe('setPaymentInformationDone', () => {
 });
 
 test('handleReviewOrder should set reviewOrderButtonClicked to true', () => {
-    const { talonProps, update } = getTalonProps(props);
+    const { talonProps, update } = getTalonProps(defaultProps);
 
     expect(talonProps.reviewOrderButtonClicked).toBeFalsy();
 
@@ -574,7 +576,7 @@ test('handleReviewOrder should set reviewOrderButtonClicked to true', () => {
 });
 
 test('resetReviewOrderButtonClicked should set reviewOrderButtonClicked to false', () => {
-    const { talonProps, update } = getTalonProps(props);
+    const { talonProps, update } = getTalonProps(defaultProps);
 
     expect(talonProps.reviewOrderButtonClicked).toBeFalsy();
 
@@ -592,7 +594,7 @@ test('resetReviewOrderButtonClicked should set reviewOrderButtonClicked to false
 });
 
 test('check availablePaymentMethods, if not implemented then show page level message', () => {
-    const { talonProps } = getTalonProps(props);
+    const { talonProps } = getTalonProps(defaultProps);
 
     expect(talonProps.availablePaymentMethods).toBeNull();
 });

From a251e7e8dc6224c99297251ac9baa532a8df5a56 Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Thu, 26 Nov 2020 15:20:04 +0530
Subject: [PATCH 11/29] Prettier-ed useCheckoutPage.spec.js

---
 .../talons/CheckoutPage/__tests__/useCheckoutPage.spec.js   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
index 034bbee507..6137d418f9 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
@@ -71,7 +71,11 @@ const getCustomerQuery = 'getCustomerQuery';
 const defaultProps = {
     operations: {
         mutations: { createCartMutation, placeOrderMutation },
-        queries: { getCheckoutDetailsQuery, getOrderDetailsQuery, getCustomerQuery }
+        queries: {
+            getCheckoutDetailsQuery,
+            getOrderDetailsQuery,
+            getCustomerQuery
+        }
     }
 };
 

From f05b171fd8eceda355013bd9ed4a7723bed1c9ab Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Thu, 26 Nov 2020 15:39:47 +0530
Subject: [PATCH 12/29] Fixed issue with gql client after migration of
 CheckoutPageOperations to peregrine.

---
 .../lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
index 6137d418f9..ba95de0833 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
@@ -20,6 +20,7 @@ import CheckoutError from '../CheckoutError';
 
 jest.mock('@apollo/client', () => {
     return {
+        ...jest.requireActual('@apollo/client'),
         useLazyQuery: jest.fn(),
         useApolloClient: jest.fn(),
         useMutation: jest.fn(),

From 04cb94bb8edd6bbe968b9c5e9e34d28bc5cee2b0 Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Thu, 26 Nov 2020 15:57:39 +0530
Subject: [PATCH 13/29] Fixed issue with gql client after migration of
 CheckoutPageOperations to peregrine.

---
 .../PaymentInformation/__tests__/usePaymentInformation.spec.js   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/usePaymentInformation.spec.js b/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/usePaymentInformation.spec.js
index 569f1f4b69..c6a17afb12 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/usePaymentInformation.spec.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/usePaymentInformation.spec.js
@@ -12,6 +12,7 @@ jest.mock('../../../../context/cart', () => ({
 
 jest.mock('@apollo/client', () => {
     return {
+        ...jest.requireActual('@apollo/client'),
         useApolloClient: jest.fn(),
         useQuery: jest.fn().mockReturnValue({
             data: {

From 388c29c8ba5f924b152b9394577a69f870d6b906 Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Thu, 21 Jan 2021 14:25:59 +0530
Subject: [PATCH 14/29] Sorted the new lang definitions while adding

---
 packages/venia-ui/i18n/en_US.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/venia-ui/i18n/en_US.json b/packages/venia-ui/i18n/en_US.json
index ab707c87d9..0c44054d34 100644
--- a/packages/venia-ui/i18n/en_US.json
+++ b/packages/venia-ui/i18n/en_US.json
@@ -70,13 +70,13 @@
     "checkoutPage.itemsInYourOrder": " items in your order",
     "checkoutPage.loadingPayment": "Loading Payment",
     "checkoutPage.loadingPaymentInformation": "Fetching Payment Information",
+    "checkoutPage.noPaymentAvailable": "Payment is currently unavailable.",
     "checkoutPage.orderNumber": "Order Number: {orderNumber}",
     "checkoutPage.orderSummary": "Order Summary",
     "checkoutPage.paymentInformation": "Payment Information",
     "checkoutPage.paymentInformationStep": "3. Payment Information",
     "checkoutPage.paymentMethodStatus": "{selectedPaymentMethod} is not supported for editing.",
     "checkoutPage.paymentSummary": "{cardType} ending in {lastFour}",
-    "checkoutPage.noPaymentAvailable": "Payment is currently unavailable.",
     "checkoutPage.paymentLoadingError": "There was an error loading payments.",
     "checkoutPage.refreshOrTryAgainLater": "Please refresh or try again later.",
     "checkoutPage.placeOrder": "Place Order",

From 39598f4ae0bf4e019ee04f5fde5b62af0831b36e Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Thu, 21 Jan 2021 14:26:28 +0530
Subject: [PATCH 15/29] Used the ternary operator instead of the logical
 operators

---
 .../peregrine/lib/talons/CheckoutPage/useCheckoutPage.js    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js b/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
index 8800e73ce8..5711c8a111 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
@@ -243,8 +243,8 @@ export const useCheckoutPage = props => {
         reviewOrderButtonClicked,
         toggleAddressBookContent,
         toggleSignInContent,
-        availablePaymentMethods:
-            (checkoutData && checkoutData.cart.available_payment_methods) ||
-            null
+        availablePaymentMethods: checkoutData
+            ? checkoutData.cart.available_payment_methods
+            : null
     };
 };

From 4c987b7a661aea45e4be44ad306f90d8abf66405 Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Thu, 21 Jan 2021 15:00:16 +0530
Subject: [PATCH 16/29] Changed variable "props" to "defaultProps"

---
 .../talons/CheckoutPage/__tests__/useCheckoutPage.spec.js   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
index e8d80e9600..69477283e5 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
@@ -595,7 +595,7 @@ test('resetReviewOrderButtonClicked should set reviewOrderButtonClicked to false
 });
 
 test('toggles addressBook content', () => {
-    const { talonProps: initialProps, update } = getTalonProps(props);
+    const { talonProps: initialProps, update } = getTalonProps(defaultProps);
 
     initialProps.toggleAddressBookContent();
     const step1Props = update();
@@ -609,7 +609,7 @@ test('toggles addressBook content', () => {
 });
 
 test('toggles signIn content', () => {
-    const { talonProps: initialProps, update } = getTalonProps(props);
+    const { talonProps: initialProps, update } = getTalonProps(defaultProps);
 
     initialProps.toggleSignInContent();
     const step1Props = update();
@@ -623,7 +623,7 @@ test('toggles signIn content', () => {
 });
 
 test('resets active content to checkout on sign in', () => {
-    const { talonProps: initialProps, update } = getTalonProps(props);
+    const { talonProps: initialProps, update } = getTalonProps(defaultProps);
 
     initialProps.toggleSignInContent();
     const step1Props = update();

From 0661e00858f25385521a5099096b1783b3357aa0 Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Thu, 21 Jan 2021 15:21:56 +0530
Subject: [PATCH 17/29] Removed empty object usage as it was not required
 anymore.

---
 .../components/CheckoutPage/checkoutPage.js   | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
index 357db1ae37..ee2efaa5e7 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
@@ -33,7 +33,7 @@ const errorIcon = <Icon src={AlertCircleIcon} size={20} />;
 const CheckoutPage = props => {
     const { classes: propClasses } = props;
     const { formatMessage } = useIntl();
-    const talonProps = useCheckoutPage({});
+    const talonProps = useCheckoutPage();
 
     const {
         /**
@@ -172,27 +172,24 @@ const CheckoutPage = props => {
                 </h3>
             );
 
-        const isPaymentAvailable = !!availablePaymentMethods
-            .map(({ code }) => {
-                // If we don't have an implementation for a method type, ignore it.
-                if (!Object.keys(payments).includes(code)) {
-                    return;
-                }
-                return true;
-            })
-            .filter(paymentMethod => !!paymentMethod).length;
+        let formErrors = [];
 
-        const errors = new Map();
+        const paymentMethods = Object.keys(payments);
+
+        // If we don't have an implementation for a method type, ignore it.
+        const isPaymentAvailable = !!availablePaymentMethods.find(({ code }) =>
+            paymentMethods.includes(code)
+        );
 
         if (!isPaymentAvailable) {
-            errors.set('paymentMethods', [
+            formErrors.push(
                 new Error(
                     formatMessage({
                         id: 'checkoutPage.noPaymentAvailable',
                         defaultMessage: 'Payment is currently unavailable.'
                     })
                 )
-            ]);
+            );
         }
 
         const paymentInformationSection =
@@ -316,12 +313,11 @@ const CheckoutPage = props => {
         );
         checkoutContent = (
             <div className={checkoutContentClass}>
-                {loginButton}
                 <FormError
                     classes={{
                         root: classes.formErrors
                     }}
-                    errors={errors.get('paymentMethods') || []}
+                    errors={formErrors}
                 />
                 <div className={classes.heading_container}>
                     <StockStatusMessage

From 1f110ebc0fbcafc429dd44e6d281b8700b87f512 Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Wed, 27 Jan 2021 13:49:01 +0530
Subject: [PATCH 18/29] Corrected lint error related to array reassignment due
 to let declaration

---
 packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
index ee2efaa5e7..09d9e361ed 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
@@ -172,8 +172,7 @@ const CheckoutPage = props => {
                 </h3>
             );
 
-        let formErrors = [];
-
+        const formErrors = [];
         const paymentMethods = Object.keys(payments);
 
         // If we don't have an implementation for a method type, ignore it.

From ffeb00145fb84eb36c0c7a9aa381c136f08822df Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Wed, 27 Jan 2021 21:25:27 +0530
Subject: [PATCH 19/29] Update
 packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js

Co-authored-by: Stephen <sirugh@users.noreply.github.com>
---
 packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js b/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
index 5711c8a111..9fb30d03b1 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
@@ -23,7 +23,7 @@ export const CHECKOUT_STEP = {
     REVIEW: 4
 };
 
-export const useCheckoutPage = props => {
+export const useCheckoutPage = (props = {}) => {
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
 
     const {

From 111ef663f1aa61f685cb595b7b38aa96e8adbef6 Mon Sep 17 00:00:00 2001
From: sirugh <rugh@adobe.com>
Date: Wed, 27 Jan 2021 10:49:50 -0600
Subject: [PATCH 20/29] Re-add lost query

---
 .../CheckoutPage/ItemsReview/itemsReview.gql.js | 17 ++++++++++++++++-
 .../CheckoutPage/ItemsReview/itemsReview.js     |  5 -----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/peregrine/lib/talons/CheckoutPage/ItemsReview/itemsReview.gql.js b/packages/peregrine/lib/talons/CheckoutPage/ItemsReview/itemsReview.gql.js
index 0dd7a6756b..4c827a905b 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/ItemsReview/itemsReview.gql.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/ItemsReview/itemsReview.gql.js
@@ -1,5 +1,7 @@
 import { gql } from '@apollo/client';
 
+import { ItemsReviewFragment } from './itemsReviewFragments.gql';
+
 export const GET_CONFIGURABLE_THUMBNAIL_SOURCE = gql`
     query getConfigurableThumbnailSource {
         storeConfig {
@@ -9,6 +11,19 @@ export const GET_CONFIGURABLE_THUMBNAIL_SOURCE = gql`
     }
 `;
 
+
+export const LIST_OF_PRODUCTS_IN_CART_QUERY = gql`
+    query getItemsInCart($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            ...ItemsReviewFragment
+        }
+    }
+
+    ${ItemsReviewFragment}
+`;
+
 export default {
-    getConfigurableThumbnailSource: GET_CONFIGURABLE_THUMBNAIL_SOURCE
+    getConfigurableThumbnailSource: GET_CONFIGURABLE_THUMBNAIL_SOURCE,
+    getItemsInCart: LIST_OF_PRODUCTS_IN_CART_QUERY
 };
diff --git a/packages/venia-ui/lib/components/CheckoutPage/ItemsReview/itemsReview.js b/packages/venia-ui/lib/components/CheckoutPage/ItemsReview/itemsReview.js
index 9f991f5f3f..9eb697f214 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/ItemsReview/itemsReview.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/ItemsReview/itemsReview.js
@@ -8,8 +8,6 @@ import ShowAllButton from './showAllButton';
 import LoadingIndicator from '../../LoadingIndicator';
 import { mergeClasses } from '../../../classify';
 
-import LIST_OF_PRODUCTS_IN_CART_QUERY from '@magento/peregrine/lib/talons/CheckoutPage/ItemsReview/itemsReview.gql';
-
 import defaultClasses from './itemsReview.css';
 
 /**
@@ -22,9 +20,6 @@ const ItemsReview = props => {
     const classes = mergeClasses(defaultClasses, propClasses);
 
     const talonProps = useItemsReview({
-        operations: {
-            getItemsInCart: LIST_OF_PRODUCTS_IN_CART_QUERY
-        },
         data: props.data
     });
 

From 9e43e95905decc5a04db1fa288d5d66b025549a2 Mon Sep 17 00:00:00 2001
From: sirugh <rugh@adobe.com>
Date: Wed, 27 Jan 2021 11:08:15 -0600
Subject: [PATCH 21/29] Add missing mock in test

Signed-off-by: sirugh <rugh@adobe.com>
---
 .../__snapshots__/checkoutPage.spec.js.snap   | 36 -------------------
 .../__tests__/checkoutPage.spec.js            |  3 +-
 .../components/CheckoutPage/checkoutPage.js   |  3 +-
 3 files changed, 4 insertions(+), 38 deletions(-)

diff --git a/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap b/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap
index 3ab03f9727..0064fe9f22 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap
@@ -8,15 +8,6 @@ exports[`CheckoutPage renders address book for customer 1`] = `
   <div
     className="checkoutContent_hidden"
   >
-    <div
-      className="root"
-    >
-      <span
-        className="errorMessage"
-      >
-        Payment is currently unavailable.
-      </span>
-    </div>
     <div
       className="heading_container"
     >
@@ -101,15 +92,6 @@ exports[`CheckoutPage renders checkout content for customer - default address 1`
   <div
     className="checkoutContent"
   >
-    <div
-      className="root"
-    >
-      <span
-        className="errorMessage"
-      >
-        Payment is currently unavailable.
-      </span>
-    </div>
     <div
       className="heading_container"
     >
@@ -194,15 +176,6 @@ exports[`CheckoutPage renders checkout content for customer - no default address
   <div
     className="checkoutContent"
   >
-    <div
-      className="root"
-    >
-      <span
-        className="errorMessage"
-      >
-        Payment is currently unavailable.
-      </span>
-    </div>
     <div
       className="heading_container"
     >
@@ -287,15 +260,6 @@ exports[`CheckoutPage renders checkout content for guest 1`] = `
   <div
     className="checkoutContent"
   >
-    <div
-      className="root"
-    >
-      <span
-        className="errorMessage"
-      >
-        Payment is currently unavailable.
-      </span>
-    </div>
     <div
       className="heading_container"
     >
diff --git a/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js b/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js
index 9f9054c3ca..75411422d6 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js
@@ -44,6 +44,7 @@ jest.mock('../OrderConfirmationPage', () => 'OrderConfirmationPage');
 jest.mock('../ShippingInformation', () => 'ShippingInformation');
 jest.mock('../ShippingMethod', () => 'ShippingMethod');
 jest.mock('../PaymentInformation', () => 'PaymentInformation');
+jest.mock('../PaymentInformation/paymentMethodCollection', () => ({ braintree: {} }));
 jest.mock('../PriceAdjustments', () => 'PriceAdjustments');
 jest.mock('../AddressBook', () => 'AddressBook');
 
@@ -72,7 +73,7 @@ const defaultTalonProps = {
     setPaymentInformationDone: jest.fn().mockName('setPaymentInformationDone'),
     toggleAddressBookContent: jest.fn().mockName('toggleAddressBookContent'),
     toggleSignInContent: jest.fn().mockName('toggleSignInContent'),
-    availablePaymentMethods: []
+    availablePaymentMethods: [{ code: "braintree" }]
 };
 describe('CheckoutPage', () => {
     test('throws a toast if there is an error', () => {
diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
index 09d9e361ed..2306b83d3a 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
@@ -20,12 +20,13 @@ import AddressBook from './AddressBook';
 import GuestSignIn from './GuestSignIn';
 import OrderSummary from './OrderSummary';
 import PaymentInformation from './PaymentInformation';
+import payments from './PaymentInformation/paymentMethodCollection';
 import PriceAdjustments from './PriceAdjustments';
 import ShippingMethod from './ShippingMethod';
 import ShippingInformation from './ShippingInformation';
 import OrderConfirmationPage from './OrderConfirmationPage';
 import ItemsReview from './ItemsReview';
-import payments from './PaymentInformation/paymentMethodCollection';
+
 import defaultClasses from './checkoutPage.css';
 
 const errorIcon = <Icon src={AlertCircleIcon} size={20} />;

From 7b49371c28c9db0554f1ed01f18826afe782f3fd Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Thu, 28 Jan 2021 09:19:03 +0530
Subject: [PATCH 22/29] Prettified

---
 .../lib/talons/CheckoutPage/ItemsReview/itemsReview.gql.js  | 1 -
 .../components/CheckoutPage/__tests__/checkoutPage.spec.js  | 6 ++++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/peregrine/lib/talons/CheckoutPage/ItemsReview/itemsReview.gql.js b/packages/peregrine/lib/talons/CheckoutPage/ItemsReview/itemsReview.gql.js
index 4c827a905b..76d2839d0c 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/ItemsReview/itemsReview.gql.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/ItemsReview/itemsReview.gql.js
@@ -11,7 +11,6 @@ export const GET_CONFIGURABLE_THUMBNAIL_SOURCE = gql`
     }
 `;
 
-
 export const LIST_OF_PRODUCTS_IN_CART_QUERY = gql`
     query getItemsInCart($cartId: String!) {
         cart(cart_id: $cartId) {
diff --git a/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js b/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js
index 75411422d6..a5db27e0d6 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js
@@ -44,7 +44,9 @@ jest.mock('../OrderConfirmationPage', () => 'OrderConfirmationPage');
 jest.mock('../ShippingInformation', () => 'ShippingInformation');
 jest.mock('../ShippingMethod', () => 'ShippingMethod');
 jest.mock('../PaymentInformation', () => 'PaymentInformation');
-jest.mock('../PaymentInformation/paymentMethodCollection', () => ({ braintree: {} }));
+jest.mock('../PaymentInformation/paymentMethodCollection', () => ({
+    braintree: {}
+}));
 jest.mock('../PriceAdjustments', () => 'PriceAdjustments');
 jest.mock('../AddressBook', () => 'AddressBook');
 
@@ -73,7 +75,7 @@ const defaultTalonProps = {
     setPaymentInformationDone: jest.fn().mockName('setPaymentInformationDone'),
     toggleAddressBookContent: jest.fn().mockName('toggleAddressBookContent'),
     toggleSignInContent: jest.fn().mockName('toggleSignInContent'),
-    availablePaymentMethods: [{ code: "braintree" }]
+    availablePaymentMethods: [{ code: 'braintree' }]
 };
 describe('CheckoutPage', () => {
     test('throws a toast if there is an error', () => {

From ce0b03b26325c6d78100a73e3475b68dab72682f Mon Sep 17 00:00:00 2001
From: sirugh <rugh@adobe.com>
Date: Mon, 8 Feb 2021 15:54:09 -0600
Subject: [PATCH 23/29] exporting default operations as root properties

---
 .../lib/talons/CheckoutPage/checkoutPage.gql.js    | 14 +++++---------
 .../lib/talons/CheckoutPage/useCheckoutPage.js     | 11 +++++------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/packages/peregrine/lib/talons/CheckoutPage/checkoutPage.gql.js b/packages/peregrine/lib/talons/CheckoutPage/checkoutPage.gql.js
index bccf2b1c16..e35c39badf 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/checkoutPage.gql.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/checkoutPage.gql.js
@@ -53,13 +53,9 @@ export const GET_CUSTOMER = gql`
 `;
 
 export default {
-    mutations: {
-        createCartMutation: CREATE_CART,
-        placeOrderMutation: PLACE_ORDER
-    },
-    queries: {
-        getCheckoutDetailsQuery: GET_CHECKOUT_DETAILS,
-        getCustomerQuery: GET_CUSTOMER,
-        getOrderDetailsQuery: GET_ORDER_DETAILS
-    }
+    createCartMutation: CREATE_CART,
+    getCheckoutDetailsQuery: GET_CHECKOUT_DETAILS,
+    getCustomerQuery: GET_CUSTOMER,
+    getOrderDetailsQuery: GET_ORDER_DETAILS,
+    placeOrderMutation: PLACE_ORDER
 };
diff --git a/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js b/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
index 9fb30d03b1..c15ed675f5 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
@@ -27,12 +27,11 @@ export const useCheckoutPage = (props = {}) => {
     const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
 
     const {
-        mutations: { createCartMutation, placeOrderMutation },
-        queries: {
-            getCheckoutDetailsQuery,
-            getCustomerQuery,
-            getOrderDetailsQuery
-        }
+        createCartMutation,
+        getCheckoutDetailsQuery,
+        getCustomerQuery,
+        getOrderDetailsQuery,
+        placeOrderMutation
     } = operations;
 
     const [reviewOrderButtonClicked, setReviewOrderButtonClicked] = useState(

From 21ab6708f45c5ab4dc91d2fb78f543b5ccfcf2be Mon Sep 17 00:00:00 2001
From: sirugh <rugh@adobe.com>
Date: Mon, 8 Feb 2021 16:06:13 -0600
Subject: [PATCH 24/29] Remove styles

Signed-off-by: sirugh <rugh@adobe.com>
---
 .../lib/components/CheckoutPage/checkoutPage.css         | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.css b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.css
index d1bbbe711b..6ab398be24 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.css
+++ b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.css
@@ -111,15 +111,6 @@
         top: 5.5rem;
         height: min-content;
     }
-
-    .signin_container ~ .summaryContainer,
-    .formErrors ~ .summaryContainer {
-        grid-row: 3 / span 3;
-    }
-
-    .signin_container + .formErrors ~ .summaryContainer {
-        grid-row: 4 / span 3;
-    }
 }
 
 .review_order_button {

From 59f3741a68b51a8b6fda57c964b9befe1991948c Mon Sep 17 00:00:00 2001
From: sirugh <rugh@adobe.com>
Date: Wed, 10 Feb 2021 14:55:28 -0600
Subject: [PATCH 25/29] fix operations mock in tests

Signed-off-by: sirugh <rugh@adobe.com>
---
 .../CheckoutPage/__tests__/useCheckoutPage.spec.js    | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
index 69477283e5..a5ade40d7b 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
@@ -67,12 +67,11 @@ const getCustomerQuery = 'getCustomerQuery';
 
 const defaultProps = {
     operations: {
-        mutations: { createCartMutation, placeOrderMutation },
-        queries: {
-            getCheckoutDetailsQuery,
-            getOrderDetailsQuery,
-            getCustomerQuery
-        }
+        createCartMutation,
+        getCheckoutDetailsQuery,
+        getOrderDetailsQuery,
+        getCustomerQuery,
+        placeOrderMutation
     }
 };
 

From b2617910b029ec9b3995f31b061c2663614baeb4 Mon Sep 17 00:00:00 2001
From: sirugh <rugh@adobe.com>
Date: Tue, 23 Feb 2021 14:37:13 -0600
Subject: [PATCH 26/29] Fix zero total checkout use case. Add tests

---
 .../talons/CheckoutPage/useCheckoutPage.js    |   8 +-
 .../__snapshots__/checkoutPage.spec.js.snap   | 169 ++++++++++++++++++
 .../__tests__/checkoutPage.spec.js            |  28 ++-
 .../components/CheckoutPage/checkoutPage.js   |  11 +-
 4 files changed, 205 insertions(+), 11 deletions(-)

diff --git a/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js b/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
index c15ed675f5..50f137ff52 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
+++ b/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
@@ -216,6 +216,9 @@ export const useCheckoutPage = (props = {}) => {
 
     return {
         activeContent,
+        availablePaymentMethods: checkoutData
+            ? checkoutData.cart.available_payment_methods
+            : null,
         cartItems,
         checkoutStep,
         customer,
@@ -241,9 +244,6 @@ export const useCheckoutPage = (props = {}) => {
         handleReviewOrder,
         reviewOrderButtonClicked,
         toggleAddressBookContent,
-        toggleSignInContent,
-        availablePaymentMethods: checkoutData
-            ? checkoutData.cart.available_payment_methods
-            : null
+        toggleSignInContent
     };
 };
diff --git a/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap b/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap
index c9c6dfd0c5..56a4197255 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap
@@ -8,6 +8,14 @@ exports[`CheckoutPage renders address book for customer 1`] = `
   <div
     className="checkoutContent_hidden"
   >
+    <FormError
+      classes={
+        Object {
+          "root": "formErrors",
+        }
+      }
+      errors={Array []}
+    />
     <div
       className="heading_container"
     >
@@ -84,6 +92,143 @@ exports[`CheckoutPage renders address book for customer 1`] = `
 </div>
 `;
 
+exports[`CheckoutPage renders an error and disables review order button if there is no payment method 1`] = `
+<div
+  className="root"
+>
+  Title
+  <div
+    className="checkoutContent"
+  >
+    <FormError
+      classes={
+        Object {
+          "root": "formErrors",
+        }
+      }
+      errors={
+        Array [
+          [Error: Payment is currently unavailable.],
+        ]
+      }
+    />
+    <div
+      className="heading_container"
+    >
+      <StockStatusMessage
+        cartItems={Array []}
+        message={
+          <React.Fragment>
+            <FormattedMessage
+              defaultMessage="An item in your cart is currently out-of-stock and must be removed in order to Checkout. Please return to your cart to remove the item."
+              id="checkoutPage.stockStatusMessage"
+            />
+            <Link
+              className="cartLink"
+              to="/cart"
+            >
+              <FormattedMessage
+                defaultMessage="Return to Cart"
+                id="checkoutPage.returnToCart"
+              />
+            </Link>
+          </React.Fragment>
+        }
+      />
+      <h1
+        className="heading"
+      >
+        Guest Checkout
+      </h1>
+    </div>
+    <div
+      className="signInContainer"
+    >
+      <span
+        className="signInLabel"
+      >
+        <mock-FormattedMessage
+          defaultMessage="Sign in for Express Checkout"
+          id="checkoutPage.signInLabel"
+        />
+      </span>
+      <button
+        className="signInButton"
+        disabled={false}
+        onClick={[MockFunction toggleSignInContent]}
+        type="button"
+      >
+        <span
+          className="content"
+        >
+          <mock-FormattedMessage
+            defaultMessage="Sign In"
+            id="checkoutPage.signInButton"
+          />
+        </span>
+      </button>
+    </div>
+    <div
+      className="shipping_information_container"
+    >
+      <ShippingInformation
+        onSave={[MockFunction setShippingInformationDone]}
+        toggleActiveContent={[MockFunction toggleAddressBookContent]}
+      />
+    </div>
+    <div
+      className="shipping_method_container"
+    >
+      <ShippingMethod
+        onSave={[MockFunction setShippingMethodDone]}
+        pageIsUpdating={true}
+        setPageIsUpdating={[MockFunction setIsUpdating]}
+      />
+    </div>
+    <div
+      className="payment_information_container"
+    >
+      <PaymentInformation
+        checkoutError={false}
+        onSave={[MockFunction setPaymentInformationDone]}
+      />
+    </div>
+    <div
+      className="price_adjustments_container"
+    >
+      <PriceAdjustments
+        setPageIsUpdating={[MockFunction setIsUpdating]}
+      />
+    </div>
+    <button
+      className="review_order_button"
+      disabled={true}
+      type="button"
+    >
+      <span
+        className="content"
+      >
+        <mock-FormattedMessage
+          defaultMessage="Review Order"
+          id="checkoutPage.reviewOrder"
+        />
+      </span>
+    </button>
+    <div
+      className="summaryContainer"
+    >
+      <OrderSummary
+        isUpdating={true}
+      />
+    </div>
+  </div>
+  <GuestSignIn
+    isActive={false}
+    toggleActiveContent={[MockFunction toggleSignInContent]}
+  />
+</div>
+`;
+
 exports[`CheckoutPage renders checkout content for customer - default address 1`] = `
 <div
   className="root"
@@ -92,6 +237,14 @@ exports[`CheckoutPage renders checkout content for customer - default address 1`
   <div
     className="checkoutContent"
   >
+    <FormError
+      classes={
+        Object {
+          "root": "formErrors",
+        }
+      }
+      errors={Array []}
+    />
     <div
       className="heading_container"
     >
@@ -176,6 +329,14 @@ exports[`CheckoutPage renders checkout content for customer - no default address
   <div
     className="checkoutContent"
   >
+    <FormError
+      classes={
+        Object {
+          "root": "formErrors",
+        }
+      }
+      errors={Array []}
+    />
     <div
       className="heading_container"
     >
@@ -260,6 +421,14 @@ exports[`CheckoutPage renders checkout content for guest 1`] = `
   <div
     className="checkoutContent"
   >
+    <FormError
+      classes={
+        Object {
+          "root": "formErrors",
+        }
+      }
+      errors={Array []}
+    />
     <div
       className="heading_container"
     >
diff --git a/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js b/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js
index 0d72e44739..fc0b7c8f0b 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js
@@ -7,6 +7,7 @@ import {
 } from '@magento/peregrine/lib/talons/CheckoutPage/useCheckoutPage';
 import CheckoutPage from '../checkoutPage';
 import OrderConfirmationPage from '../OrderConfirmationPage';
+import FormError from '../../FormError';
 
 jest.mock('@magento/peregrine', () => {
     const actual = jest.requireActual('@magento/peregrine');
@@ -36,6 +37,7 @@ jest.mock('@magento/peregrine/lib/talons/CheckoutPage/useCheckoutPage', () => {
 jest.mock('../../../classify');
 
 jest.mock('../../../components/Head', () => ({ Title: () => 'Title' }));
+jest.mock('../../FormError', () => 'FormError');
 jest.mock('../../StockStatusMessage', () => 'StockStatusMessage');
 jest.mock('../ItemsReview', () => 'ItemsReview');
 jest.mock('../GuestSignIn', () => 'GuestSignIn');
@@ -52,6 +54,7 @@ jest.mock('../AddressBook', () => 'AddressBook');
 
 const defaultTalonProps = {
     activeContent: 'checkout',
+    availablePaymentMethods: [{ code: 'braintree' }],
     cartItems: [],
     checkoutStep: 1,
     customer: null,
@@ -74,9 +77,9 @@ const defaultTalonProps = {
     setShippingMethodDone: jest.fn().mockName('setShippingMethodDone'),
     setPaymentInformationDone: jest.fn().mockName('setPaymentInformationDone'),
     toggleAddressBookContent: jest.fn().mockName('toggleAddressBookContent'),
-    toggleSignInContent: jest.fn().mockName('toggleSignInContent'),
-    availablePaymentMethods: [{ code: 'braintree' }]
+    toggleSignInContent: jest.fn().mockName('toggleSignInContent')
 };
+
 describe('CheckoutPage', () => {
     test('throws a toast if there is an error', () => {
         useCheckoutPage.mockReturnValueOnce({
@@ -215,4 +218,25 @@ describe('CheckoutPage', () => {
         expect(priceAdjustmentsComponent.props).toMatchSnapshot();
         expect(reviewOrderButtonComponent.props).toMatchSnapshot();
     });
+
+    test('renders an error and disables review order button if there is no payment method', () => {
+        useCheckoutPage.mockReturnValueOnce({
+            ...defaultTalonProps,
+            checkoutStep: CHECKOUT_STEP.PAYMENT,
+            isUpdating: true,
+            availablePaymentMethods: []
+        });
+
+        const tree = createTestInstance(<CheckoutPage />);
+        const formErrorComponent = tree.root.findByType(FormError);
+        const reviewOrderButtonComponent = tree.root.findByProps({
+            className: 'review_order_button'
+        });
+
+        expect(tree).toMatchSnapshot();
+        expect(formErrorComponent.props.errors[0]).toEqual(
+            new Error('Payment is currently unavailable.')
+        );
+        expect(reviewOrderButtonComponent.props.disabled).toBe(true);
+    });
 });
diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
index 2306b83d3a..c417e4ce8a 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
@@ -42,6 +42,7 @@ const CheckoutPage = props => {
          * SHIPPING_ADDRESS, SHIPPING_METHOD, PAYMENT, REVIEW
          */
         activeContent,
+        availablePaymentMethods,
         cartItems,
         checkoutStep,
         customer,
@@ -65,8 +66,7 @@ const CheckoutPage = props => {
         handleReviewOrder,
         reviewOrderButtonClicked,
         toggleAddressBookContent,
-        toggleSignInContent,
-        availablePaymentMethods
+        toggleSignInContent
     } = talonProps;
 
     const [, { addToast }] = useToasts();
@@ -176,9 +176,10 @@ const CheckoutPage = props => {
         const formErrors = [];
         const paymentMethods = Object.keys(payments);
 
-        // If we don't have an implementation for a method type, ignore it.
-        const isPaymentAvailable = !!availablePaymentMethods.find(({ code }) =>
-            paymentMethods.includes(code)
+        // If we have an implementation, or if this is a "zero" checkout,
+        // we can allow checkout to proceed.
+        const isPaymentAvailable = !!availablePaymentMethods.find(
+            ({ code }) => code === 'free' || paymentMethods.includes(code)
         );
 
         if (!isPaymentAvailable) {

From b40cfd8a49e270c5e89a51bc30aa599468f61a63 Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Fri, 26 Feb 2021 09:31:55 +0530
Subject: [PATCH 27/29] Fixed layout issue with multiple page errors on
 checkoutPage.

---
 .../lib/components/CheckoutPage/checkoutPage.js      | 12 ++++++------
 .../StockStatusMessage/stockStatusMessage.css        |  5 +++--
 .../StockStatusMessage/stockStatusMessage.js         |  4 ++--
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
index c417e4ce8a..f79566247a 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
@@ -314,13 +314,13 @@ const CheckoutPage = props => {
         );
         checkoutContent = (
             <div className={checkoutContentClass}>
-                <FormError
-                    classes={{
-                        root: classes.formErrors
-                    }}
-                    errors={formErrors}
-                />
                 <div className={classes.heading_container}>
+                    <FormError
+                        classes={{
+                            root: classes.formErrors
+                        }}
+                        errors={formErrors}
+                    />
                     <StockStatusMessage
                         cartItems={cartItems}
                         message={stockStatusMessageElement}
diff --git a/packages/venia-ui/lib/components/StockStatusMessage/stockStatusMessage.css b/packages/venia-ui/lib/components/StockStatusMessage/stockStatusMessage.css
index 1da1c16f22..01b089cc10 100644
--- a/packages/venia-ui/lib/components/StockStatusMessage/stockStatusMessage.css
+++ b/packages/venia-ui/lib/components/StockStatusMessage/stockStatusMessage.css
@@ -1,7 +1,8 @@
 .root {
-    border-left: 4px solid rgb(var(--venia-global-color-error));
+    border-left: 5px solid rgb(var(--venia-global-color-error));
     color: rgb(var(--venia-global-color-error));
     font-size: var(--venia-typography-body-S-fontSize);
     font-weight: var(--venia-global-fontWeight-semibold);
-    padding: 0.625rem 0 0.625rem 1rem;
+    line-height: var(--venia-global-lineHeight-300);
+    padding: 1rem 0 1rem 1rem;
 }
diff --git a/packages/venia-ui/lib/components/StockStatusMessage/stockStatusMessage.js b/packages/venia-ui/lib/components/StockStatusMessage/stockStatusMessage.js
index 324d65a852..ac0832bdf1 100644
--- a/packages/venia-ui/lib/components/StockStatusMessage/stockStatusMessage.js
+++ b/packages/venia-ui/lib/components/StockStatusMessage/stockStatusMessage.js
@@ -14,9 +14,9 @@ const StockStatusMessage = props => {
     const { hasOutOfStockItem } = talonProps;
 
     const stockStatusMessageElement = hasOutOfStockItem ? (
-        <p className={classes.root}>
+        <div className={classes.root}>
             <FormattedMessage id={messageId} defaultMessage={message} />
-        </p>
+        </div>
     ) : null;
 
     return stockStatusMessageElement;

From bc79f6c4212121262574a1a7c208d7e99ab09b5b Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Fri, 26 Feb 2021 09:35:03 +0530
Subject: [PATCH 28/29] Updated test snapshots

---
 .../__snapshots__/checkoutPage.spec.js.snap      | 16 ++++++++--------
 .../stockStatusMessage.spec.js.snap              |  4 ++--
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap b/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap
index 56a4197255..cf5a4bbbb9 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap
@@ -8,17 +8,17 @@ exports[`CheckoutPage renders address book for customer 1`] = `
   <div
     className="checkoutContent_hidden"
   >
-    <FormError
-      classes={
-        Object {
-          "root": "formErrors",
-        }
-      }
-      errors={Array []}
-    />
     <div
       className="heading_container"
     >
+      <FormError
+        classes={
+          Object {
+            "root": "formErrors",
+          }
+        }
+        errors={Array []}
+      />
       <StockStatusMessage
         cartItems={Array []}
         message={
diff --git a/packages/venia-ui/lib/components/StockStatusMessage/__tests__/__snapshots__/stockStatusMessage.spec.js.snap b/packages/venia-ui/lib/components/StockStatusMessage/__tests__/__snapshots__/stockStatusMessage.spec.js.snap
index 1d697ea2df..be6fa2e83b 100644
--- a/packages/venia-ui/lib/components/StockStatusMessage/__tests__/__snapshots__/stockStatusMessage.spec.js.snap
+++ b/packages/venia-ui/lib/components/StockStatusMessage/__tests__/__snapshots__/stockStatusMessage.spec.js.snap
@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders cart message 1`] = `
-<p
+<div
   className="root"
 >
   <mock-FormattedMessage
     defaultMessage="An item in your cart is currently out-of-stock and must be removed in order to Checkout."
     id="stockStatusMessage.message"
   />
-</p>
+</div>
 `;
 
 exports[`renders null with no out of stock products 1`] = `null`;

From a09f4d84126b5c718f5c4a1961f2d776198d74d7 Mon Sep 17 00:00:00 2001
From: Ankur Raiyani <ankurvr7003@gmail.com>
Date: Fri, 26 Feb 2021 11:02:40 +0530
Subject: [PATCH 29/29] Updated test cases snapshots

---
 .../__snapshots__/checkoutPage.spec.js.snap   | 72 +++++++++----------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap b/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap
index cf5a4bbbb9..ff3fb57176 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap
@@ -100,21 +100,21 @@ exports[`CheckoutPage renders an error and disables review order button if there
   <div
     className="checkoutContent"
   >
-    <FormError
-      classes={
-        Object {
-          "root": "formErrors",
-        }
-      }
-      errors={
-        Array [
-          [Error: Payment is currently unavailable.],
-        ]
-      }
-    />
     <div
       className="heading_container"
     >
+      <FormError
+        classes={
+          Object {
+            "root": "formErrors",
+          }
+        }
+        errors={
+          Array [
+            [Error: Payment is currently unavailable.],
+          ]
+        }
+      />
       <StockStatusMessage
         cartItems={Array []}
         message={
@@ -237,17 +237,17 @@ exports[`CheckoutPage renders checkout content for customer - default address 1`
   <div
     className="checkoutContent"
   >
-    <FormError
-      classes={
-        Object {
-          "root": "formErrors",
-        }
-      }
-      errors={Array []}
-    />
     <div
       className="heading_container"
     >
+      <FormError
+        classes={
+          Object {
+            "root": "formErrors",
+          }
+        }
+        errors={Array []}
+      />
       <StockStatusMessage
         cartItems={Array []}
         message={
@@ -329,17 +329,17 @@ exports[`CheckoutPage renders checkout content for customer - no default address
   <div
     className="checkoutContent"
   >
-    <FormError
-      classes={
-        Object {
-          "root": "formErrors",
-        }
-      }
-      errors={Array []}
-    />
     <div
       className="heading_container"
     >
+      <FormError
+        classes={
+          Object {
+            "root": "formErrors",
+          }
+        }
+        errors={Array []}
+      />
       <StockStatusMessage
         cartItems={Array []}
         message={
@@ -421,17 +421,17 @@ exports[`CheckoutPage renders checkout content for guest 1`] = `
   <div
     className="checkoutContent"
   >
-    <FormError
-      classes={
-        Object {
-          "root": "formErrors",
-        }
-      }
-      errors={Array []}
-    />
     <div
       className="heading_container"
     >
+      <FormError
+        classes={
+          Object {
+            "root": "formErrors",
+          }
+        }
+        errors={Array []}
+      />
       <StockStatusMessage
         cartItems={Array []}
         message={