checkout add conditional state, focus

com.twin.app.shoptime/src/views/CheckOutPanel/CheckOutPanel.jsx

@@ -30,6 +30,7 @@ import useLogService from "../../hooks/useLogService";
 import useScrollTo from "../../hooks/useScrollTo";
 import * as Config from "../../utils/Config";
 import { $L, scaleH, scaleW } from "../../utils/helperMethods";
+import { SpotlightIds } from "../../utils/SpotlightIds";
 import css from "./CheckOutPanel.module.less";
 import PinCodeInput from "./components/PinCodeInput";
 import FixedSideBar from "./container/FixedSideBar";
@@ -61,6 +62,7 @@ export default function CheckOutPanel() {
   const { popupVisible, activePopup } = useSelector(
     (state) => state.common.popup
   );
+  const popup = useSelector((state) => state.common.popup);
   const { currSign, currSignLoc } = productData?.[0] || {};
 
   const [orderSideBarOpen, setOrderSideBarOpen] = useState(false);
@@ -102,6 +104,20 @@ export default function CheckOutPanel() {
     dispatch(getShoptimeTerms());
   }, [dispatch]);
 
+  function totalAmtValidate(response) {
+    if (response) {
+      if (response.retCode !== 0) {
+        if (response.retMsg) {
+          dispatch(
+            setShowPopup(Config.ACTIVE_POPUP.errorPopup, {
+              text: response.retMsg,
+            })
+          );
+        }
+      }
+    }
+  }
+
   useEffect(() => {
     if (infoForCheckoutData && productData) {
       const orderProductCoupontUse = Object.keys(selectedCoupons).map(
@@ -125,13 +141,16 @@ export default function CheckOutPanel() {
         infoForCheckoutData.bilAddrSno
       ) {
         dispatch(
-          getCheckoutTotalAmt({
-            mbrNo: userNumber,
-            dirPurcSelYn: "Y",
-            bilAddrSno: infoForCheckoutData.bilAddrSno,
-            dlvrAddrSno: infoForCheckoutData.dlvrAddrSno,
-            orderProductCoupontUse,
-          })
+          getCheckoutTotalAmt(
+            {
+              mbrNo: userNumber,
+              dirPurcSelYn: "Y",
+              bilAddrSno: infoForCheckoutData.bilAddrSno,
+              dlvrAddrSno: infoForCheckoutData.dlvrAddrSno,
+              orderProductCoupontUse,
+            },
+            totalAmtValidate
+          )
         );
       }
     }
@@ -156,18 +175,18 @@ export default function CheckOutPanel() {
   }, [dispatch]);
 
   useEffect(() => {
-    if (!activePopup === Config.ACTIVE_POPUP.qrPopup2) {
-      spotJob.current.start(() => {
+    const spotJobValue = spotJob.current;
+
+    spotJobValue.start(() => {
+      if (!activePopup) {
         Spotlight.focus("spotlightId_placeOrderBtn");
-      });
-    } else {
-      spotJob.current.start(() => {
-        Spotlight.focus("checkoutCloseButton");
-      });
-    }
+      } else if (activePopup === Config.ACTIVE_POPUP.errorPopup) {
+        Spotlight.focus(SpotlightIds.TPOPUP);
+      }
+    });
 
     return () => {
-      spotJob.current.stop();
+      spotJobValue.stop();
     };
   }, [activePopup]);
 
@@ -191,6 +210,11 @@ export default function CheckOutPanel() {
     dispatch(setHidePopup());
   }, [dispatch]);
 
+  const handlePopPanel = useCallback(() => {
+    dispatch(setHidePopup());
+    dispatch(popPanel());
+  }, [dispatch]);
+
   const handleTermsClick = useCallback(
     (termsID) => {
       if (empTermsData) {
@@ -232,7 +256,7 @@ export default function CheckOutPanel() {
 
   useEffect(() => {
     Spotlight.focus();
-  }, [popupVisible]);
+  }, [popupVisible, orderSideBarOpen, offerSideBarOpen]);
 
   return (
     <>
@@ -310,6 +334,18 @@ export default function CheckOutPanel() {
         </TPopUp>
       )}
 
+      {activePopup === Config.ACTIVE_POPUP.errorPopup && (
+        <TPopUp
+          kind="errorPopup"
+          hasText
+          open={popupVisible}
+          text={popup.text ? popup.text : "unknown error"}
+          hasButton
+          button1Text={$L("CLOSE")}
+          onClick={handlePopPanel}
+        />
+      )}
+
       <TFullPopup
         open={placeOrderPopup}
         className={css.pinCodePopup}