add getQRCodeUrl, apply myInfo / checkout

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

@@ -45,10 +45,6 @@ export default function CheckOutPanel() {
   const { userNumber } = useSelector(
     (state) => state.common.appStatus.loginUserData
   );
-  const checkoutPanelInfo = panels.find(
-    (panel) => panel.name === "checkoutpanel"
-  )?.panelInfo;
-
   const productData = useSelector(
     (state) => state.checkout?.checkoutData.productList
   );
@@ -72,6 +68,7 @@ export default function CheckOutPanel() {
   const [tabList, setTabList] = useState([]);
   const [selectedTabIndex, setSelectedTabIndex] = useState(0);
   const [resetScroll, setResetScroll] = useState(false);
+  const [spotlightDisalbed, setSpotlightDisabled] = useState(false);
 
   const isMounted = useRef(true);
 
@@ -196,14 +193,17 @@ export default function CheckOutPanel() {
 
   const toggleOrderSideBar = useCallback(() => {
     setOrderSideBarOpen((prev) => !prev);
+    setTimeout(() => Spotlight.focus(), 0);
   }, []);
 
   const toggleOfferSideBar = useCallback(() => {
     setOfferSideBarOpen((prev) => !prev);
+    setTimeout(() => Spotlight.focus(), 0);
   }, []);
 
   const onClosePopup = useCallback(() => {
     setPlaceOrderPopup(false);
+    setTimeout(() => Spotlight.focus(), 0);
   }, []);
 
   const onCloseTermsPopup = useCallback(() => {
@@ -254,15 +254,38 @@ export default function CheckOutPanel() {
     }
   }, [resetScroll]);
 
-  useEffect(() => {
-    Spotlight.focus();
-  }, [popupVisible, orderSideBarOpen, offerSideBarOpen]);
+  const onCancelCheckoutPanel = useCallback(
+    (e) => {
+      if (orderSideBarOpen) {
+        setOrderSideBarOpen(false);
+        setTimeout(() => Spotlight.focus(), 0);
+
+        return;
+      }
+
+      if (offerSideBarOpen) {
+        setOfferSideBarOpen(false);
+        setTimeout(() => Spotlight.focus(), 0);
+
+        return;
+      }
+
+      if (!orderSideBarOpen && !offerSideBarOpen) {
+        dispatch(popPanel());
+        e.stopPropagation();
+      }
+    },
+    [orderSideBarOpen, offerSideBarOpen, dispatch]
+  );
 
   return (
     <>
       <TPanel
         isTabActivated={false}
-        spotlightDisabled={orderSideBarOpen || offerSideBarOpen}
+        spotlightDisabled={
+          orderSideBarOpen || offerSideBarOpen || placeOrderPopup
+        }
+        handleCancel={onCancelCheckoutPanel}
       >
         <TBody className={css.tbody} cbScrollTo={getScrollToBody}>
           <THeader
@@ -351,6 +374,7 @@ export default function CheckOutPanel() {
         className={css.pinCodePopup}
         onClose={onClosePopup}
         noAnimation={true}
+        spotlightId="pinCodeFullPopup"
       >
         <PinCodeInput setPlaceOrderPopup={setPlaceOrderPopup} />
       </TFullPopup>