[PWA-1514] Cannot place order again after initial order was declined (#…

…3091) * PWA-1514: [bug]: Cannot place order again after initial order was declined * PWA-1514: [bug]: Cannot place order again after initial order was declined Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com>
magento · Mar 31, 2021 · 3f35a5e · 3f35a5e
1 parent 9fef965
commit 3f35a5e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 15 deletions.
diff --git a/packages/peregrine/lib/talons/CheckoutPage/PlaceOrderErrors.js b/packages/peregrine/lib/talons/CheckoutPage/PlaceOrderErrors.js
@@ -5,5 +5,4 @@
  * https://devdocs.magento.com/guides/v2.3/graphql/mutations/place-order.html#errors
  */
 
-export const PAYMENT_ERROR =
-    'Unable to place order: Transaction has been declined. Please try again later.';
+export const PAYMENT_ERROR = 'Unable to place order:';
diff --git a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useCheckoutPage.spec.js
@@ -289,7 +289,7 @@ test("should place order and cleanup when we have order details and place order
     const removeCart = jest.fn();
     const fetchCartId = jest.fn();
 
-    useCartContext.mockReturnValueOnce([
+    useCartContext.mockReturnValue([
         { cartId: '123' },
         { createCart, removeCart }
     ]);
@@ -321,7 +321,7 @@ test('should set checkout step and review order button click state when an error
     });
     const fetchCartId = jest.fn();
 
-    useCartContext.mockReturnValueOnce([
+    useCartContext.mockReturnValue([
         { cartId: '123' },
         { createCart, removeCart }
     ]);

diff --git a/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js b/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
@@ -97,8 +97,7 @@ export const useCheckoutPage = (props = {}) => {
         {
             data: placeOrderData,
             error: placeOrderError,
-            loading: placeOrderLoading,
-            called: placeOrderCalled
+            loading: placeOrderLoading
         }
     ] = useMutation(placeOrderMutation);
 
@@ -174,7 +173,7 @@ export const useCheckoutPage = (props = {}) => {
 
     const resetReviewOrderButtonClicked = useCallback(() => {
         setReviewOrderButtonClicked(false);
-    }, [setReviewOrderButtonClicked]);
+    }, []);
 
     const scrollShippingInformationIntoView = useCallback(() => {
         if (shippingInformationRef.current) {
@@ -188,7 +187,7 @@ export const useCheckoutPage = (props = {}) => {
         if (checkoutStep === CHECKOUT_STEP.SHIPPING_ADDRESS) {
             setCheckoutStep(CHECKOUT_STEP.SHIPPING_METHOD);
         }
-    }, [checkoutStep, setCheckoutStep]);
+    }, [checkoutStep]);
 
     const scrollShippingMethodIntoView = useCallback(() => {
         if (shippingMethodRef.current) {
@@ -202,7 +201,7 @@ export const useCheckoutPage = (props = {}) => {
         if (checkoutStep === CHECKOUT_STEP.SHIPPING_METHOD) {
             setCheckoutStep(CHECKOUT_STEP.PAYMENT);
         }
-    }, [checkoutStep, setCheckoutStep]);
+    }, [checkoutStep]);
 
     const setPaymentInformationDone = useCallback(() => {
         if (checkoutStep === CHECKOUT_STEP.PAYMENT) {
@@ -213,18 +212,21 @@ export const useCheckoutPage = (props = {}) => {
             });
             setCheckoutStep(CHECKOUT_STEP.REVIEW);
         }
-    }, [checkoutStep, setCheckoutStep]);
+    }, [checkoutStep]);
+
+    const [isPlacingOrder, setIsPlacingOrder] = useState(false);
 
     const handlePlaceOrder = useCallback(async () => {
         // Fetch order details and then use an effect to actually place the
         // order. If/when Apollo returns promises for invokers from useLazyQuery
         // we can just await this function and then perform the rest of order
         // placement.
-        getOrderDetails({
+        await getOrderDetails({
             variables: {
                 cartId
             }
         });
+        setIsPlacingOrder(true);
     }, [cartId, getOrderDetails]);
 
     // Go back to checkout if shopper logs in
@@ -242,7 +244,6 @@ export const useCheckoutPage = (props = {}) => {
                         cartId
                     }
                 });
-
                 // Cleanup stale cart and customer info.
                 await removeCart();
                 await clearCartDataFromCache(apolloClient);
@@ -260,7 +261,8 @@ export const useCheckoutPage = (props = {}) => {
             }
         }
 
-        if (orderDetailsData && !placeOrderCalled) {
+        if (orderDetailsData && isPlacingOrder) {
+            setIsPlacingOrder(false);
             placeOrderAndCleanup();
         }
     }, [
@@ -270,8 +272,8 @@ export const useCheckoutPage = (props = {}) => {
         fetchCartId,
         orderDetailsData,
         placeOrder,
-        placeOrderCalled,
-        removeCart
+        removeCart,
+        isPlacingOrder
     ]);
 
     return {