Require payment recreate when payment price is wrong

package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "@lhci/cli": "^0.4.1",
-    "@saleor/sdk": "^0.1.0",
+    "@saleor/sdk": "github:mirumee/saleor-sdk#5b9f96b",
     "@sentry/apm": "^5.15.5",
     "@sentry/browser": "^5.15.5",
     "@stripe/react-stripe-js": "^1.1.2",

src/@next/hooks/useCheckoutStepState.ts

@@ -1,32 +1,47 @@
 import { useEffect, useState } from "react";
 
-import { IItems } from "@saleor/sdk/lib/api/Cart/types";
+import { IItems, ITotalPrice } from "@saleor/sdk/lib/api/Cart/types";
 import { ICheckout, IPayment } from "@saleor/sdk/lib/api/Checkout/types";
 import { CheckoutStep } from "@temp/core/config";
 
+interface StepState {
+  recommendedStep: CheckoutStep;
+  maxPossibleStep: CheckoutStep;
+}
+
 export const useCheckoutStepState = (
   items?: IItems,
   checkout?: ICheckout,
-  payment?: IPayment
-): CheckoutStep => {
-  const isShippingRequiredForProducts =
-    items &&
-    items.some(
-      ({ variant }) => variant.product?.productType.isShippingRequired
+  payment?: IPayment,
+  totalPrice?: ITotalPrice
+): StepState => {
+  const checkIfCheckoutPriceEqualPaymentPrice = () => {
+    return (
+      totalPrice?.gross.amount === payment?.total?.amount &&
+      totalPrice?.gross.currency === payment?.total?.currency
     );
+  };
 
-  const getStep = () => {
+  const getMaxPossibleStep = () => {
     if (!checkout?.id && items) {
       // we are creating checkout during address set up
       return CheckoutStep.Address;
     }
 
+    const isCheckoutPriceEqualPaymentPrice = checkIfCheckoutPriceEqualPaymentPrice();
+    const isShippingRequiredForProducts =
+      items &&
+      items.some(
+        ({ variant }) => variant.product?.productType.isShippingRequired
+      );
+
     const isShippingAddressSet =
       !isShippingRequiredForProducts || !!checkout?.shippingAddress;
     const isBillingAddressSet = !!checkout?.billingAddress;
     const isShippingMethodSet =
       !isShippingRequiredForProducts || !!checkout?.shippingMethod;
-    const isPaymentMethodSet = !!payment?.id;
+    const isPaymentMethodSet =
+      !!payment?.id && isCheckoutPriceEqualPaymentPrice;
 
     if (!isShippingAddressSet || !isBillingAddressSet) {
       return CheckoutStep.Address;
@@ -40,14 +55,33 @@ export const useCheckoutStepState = (
     return CheckoutStep.Review;
   };
 
-  const [step, setStep] = useState(getStep());
+  const getRecommendedStep = (newMaxPossibleStep: CheckoutStep) => {
+    const isCheckoutPriceEqualPaymentPrice = checkIfCheckoutPriceEqualPaymentPrice();
+
+    if (
+      newMaxPossibleStep > CheckoutStep.Shipping &&
+      !isCheckoutPriceEqualPaymentPrice
+    ) {
+      return CheckoutStep.Shipping;
+    }
+    return newMaxPossibleStep;
+  };
+
+  const [maxPossibleStep, setMaxPossibleStep] = useState(getMaxPossibleStep());
+  const [recommendedStep, setRecommendedStep] = useState(
+    getRecommendedStep(maxPossibleStep)
+  );
 
   useEffect(() => {
-    const newStep = getStep();
-    if (step !== newStep) {
-      setStep(newStep);
+    const newMaxPossibleStep = getMaxPossibleStep();
+    const newRecommendedStep = getRecommendedStep(newMaxPossibleStep);
+    if (maxPossibleStep !== newMaxPossibleStep) {
+      setMaxPossibleStep(newMaxPossibleStep);
+    }
+    if (recommendedStep !== newRecommendedStep) {
+      setRecommendedStep(newRecommendedStep);
     }
-  }, [checkout, items, payment]);
+  }, [checkout, items, payment, totalPrice]);
 
-  return step;
+  return { recommendedStep, maxPossibleStep };
 };

src/@next/pages/CheckoutPage/CheckoutPage.tsx

@@ -241,6 +241,7 @@ const CheckoutPage: React.FC<IProps> = ({}: IProps) => {
         items={items}
         checkout={checkout}
         payment={payment}
+        totalPrice={totalPrice}
         renderAddress={props => (
           <CheckoutAddressSubpage
             ref={checkoutAddressSubpageRef}

src/@next/pages/CheckoutPage/CheckoutRouter.tsx

@@ -8,14 +8,15 @@ import {
 } from "react-router-dom";
 
 import { useCheckoutStepFromPath, useCheckoutStepState } from "@hooks";
-import { IItems } from "@saleor/sdk/lib/api/Cart/types";
+import { IItems, ITotalPrice } from "@saleor/sdk/lib/api/Cart/types";
 import { ICheckout, IPayment } from "@saleor/sdk/lib/api/Checkout/types";
 import { CHECKOUT_STEPS } from "@temp/core/config";
 
 interface IRouterProps {
   items?: IItems;
   checkout?: ICheckout;
   payment?: IPayment;
+  totalPrice?: ITotalPrice;
   renderAddress: (props: RouteComponentProps<any>) => React.ReactNode;
   renderShipping: (props: RouteComponentProps<any>) => React.ReactNode;
   renderPayment: (props: RouteComponentProps<any>) => React.ReactNode;
@@ -26,22 +27,28 @@ const CheckoutRouter: React.FC<IRouterProps> = ({
   items,
   checkout,
   payment,
+  totalPrice,
   renderAddress,
   renderShipping,
   renderPayment,
   renderReview,
 }: IRouterProps) => {
   const { pathname } = useLocation();
-  const step = useCheckoutStepState(items, checkout, payment);
+  const { recommendedStep, maxPossibleStep } = useCheckoutStepState(
+    items,
+    checkout,
+    payment,
+    totalPrice
+  );
   const stepFromPath = useCheckoutStepFromPath(pathname);
 
   const getStepLink = () =>
-    CHECKOUT_STEPS.find(stepObj => stepObj.step === step)?.link ||
+    CHECKOUT_STEPS.find(stepObj => stepObj.step === recommendedStep)?.link ||
     CHECKOUT_STEPS[0].link;
 
   if (
     pathname !== CHECKOUT_STEPS[4].link &&
-    (!stepFromPath || (stepFromPath && step < stepFromPath))
+    (!stepFromPath || (stepFromPath && maxPossibleStep < stepFromPath))
   ) {
     return <Redirect to={getStepLink()} />;
   }