refactoring + bug fix

src/components/LayoutToggle.tsx

@@ -19,7 +19,7 @@ const LayoutToggle = ({
         <div
           className={`${
             currentView === 1 ? "bg-[#333] text-white" : ""
-          } py-2 px-4 w-fit rounded-[32px]  `}
+          } py-2 px-4 w-full text-center text-nowrap rounded-[32px]  `}
           onClick={() => setCurrentView(1)}
         >
           {" "}
@@ -28,7 +28,7 @@ const LayoutToggle = ({
         <div
           className={`${
             currentView === 2 ? "bg-[#333] text-white" : ""
-          }  py-2 px-4 w-fit rounded-[32px] `}
+          }  py-2 px-4 w-full rounded-[32px] text-center text-nowrap`}
           onClick={() => setCurrentView(2)}
         >
           {" "}
@@ -37,7 +37,7 @@ const LayoutToggle = ({
         <div
           className={`${
             currentView === 3 ? "bg-[#333] text-white" : ""
-          }  py-2 px-4 w-fit rounded-[32px] `}
+          }  py-2 px-4 w-full rounded-[32px] text-center text-nowrap`}
           onClick={() => setCurrentView(3)}
         >
           {" "}

src/components/Map/MapView.tsx

@@ -88,13 +88,12 @@ type MapViewComponentProps = {
 
 export const MapViewComponent = (props: MapViewComponentProps) => {
   const { children, className } = props;
-  const { selectedOnMapVilla, setModal } = useStore();
-  const [isLoading, setIsLoading] = useState(false);
+  const { selectedOnMapVilla, setLoader, setModal } = useStore();
+  const [isLoading, setIsLoading] = useState(true);
+  const [view, setView] = useState<__esri.MapView | undefined>();
 
   const mapRef = useRef(null);
 
-  const [view, setView] = useState<__esri.MapView | undefined>();
-
   useEffect(() => {
     if (!mapRef?.current) return;
 
@@ -109,8 +108,9 @@ export const MapViewComponent = (props: MapViewComponentProps) => {
 
   useEffect(() => {
     if (isLoading) {
-      setModal(<LoaderModal isSimleLoader />);
+      setLoader(<LoaderModal isSimleLoader />);
     } else {
+      setLoader(null);
       if (isMobile) {
         if (selectedOnMapVilla) {
           setModal(<SelectedHouseModal />);

src/components/ViewToggle.tsx

@@ -6,12 +6,10 @@ type ViewSwitcherProps = {
 };
 
 const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
-  const { sendMessageToUnity, setCurrentView, currentView, setIs3DTour } =
-    useStore();
+  const { sendMessageToUnity, setCurrentView, currentView } = useStore();
 
   const handleOnFirstClick = () => {
     setCurrentView(1);
-    setIs3DTour(false);
     if (sendMessageToUnity) {
       sendMessageToUnity("JsConnector", "SetOutdoor");
     }
@@ -19,7 +17,6 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
 
   const handleOnSecondClick = () => {
     setCurrentView(2);
-    setIs3DTour(false);
     if (sendMessageToUnity) {
       sendMessageToUnity("JsConnector", "SetGroundFloor");
     }
@@ -27,7 +24,6 @@ const ViewToggle = ({ offset, isDesktop }: ViewSwitcherProps) => {
 
   const handleOnThirdClick = () => {
     setCurrentView(3);
-    setIs3DTour(false);
     if (sendMessageToUnity) {
       sendMessageToUnity("JsConnector", "SetFirstFloor");
     }

src/components/mobile/Appartment/ButtomPanelModal.tsx

@@ -75,7 +75,6 @@ export default function ButtomPanelModal() {
   return (
     <div className="flex overflow-hidden">
       <a.div
-        // className={`fixed h-[calc(100vh)] w-screen z-30 border bg-white touch-none ${
         className={`fixed h-[calc(100vh + 100px)] w-screen z-30 border bg-white touch-none ${
           offset === 1 ? "rounded-ss-2xl rounded-se-2xl " : ""
         }`}
@@ -87,12 +86,12 @@ export default function ButtomPanelModal() {
           <ButtonSwipperIcon />
         </div>
         <div
-          className={`h-[calc(100vh-110px)] overflow-y-scroll ${
-            !isTouchable ? "" : "touch-pan-down"
-          }`}
+          className={`h-[calc(100vh-110px)] ${
+            offset !== 1 ? "overflow-y-scroll" : "pr-[3px]"
+          }  ${!isTouchable ? "" : "touch-pan-down"}`}
           onScroll={handleOnScroll}
         >
-          <ImageSlider />
+          <ImageSlider isScrollable={offset !== 1} />
           <Parameters />
           <LayoutSection />
         </div>

src/components/mobile/Appartment/ButtonPanel.tsx

@@ -1,9 +1,27 @@
+import { useNavigate } from "react-router-dom";
 import useStore from "../../../store/store";
 import PopupModal from "./PopupModal";
 import HelpPanel from "./HelpPanel";
 import HelpButton from "../../HelpButton";
 import BackButton from "../../BackButton";
-import { useNavigate } from "react-router-dom";
+
+function isWebview() {
+  const navigator = window.navigator;
+  const userAgent = navigator.userAgent;
+  const normalizedUserAgent = userAgent.toLowerCase();
+  const standalone = window.matchMedia("(display-mode: standalone)").matches;
+
+  const isIos =
+    /ip(ad|hone|od)/.test(normalizedUserAgent) ||
+    (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
+  const isAndroid = /android/.test(normalizedUserAgent);
+  const isSafari = /safari/.test(normalizedUserAgent);
+  const isWebview =
+    (isAndroid && /; wv\)/.test(normalizedUserAgent)) ||
+    (isIos && !standalone && !isSafari);
+
+  return isWebview;
+}
 
 const ButtonPanel = () => {
   const {
@@ -15,6 +33,7 @@ const ButtonPanel = () => {
     currentView,
   } = useStore();
   const navigate = useNavigate();
+  const isWebView = isWebview();
 
   const handleOnHelpClick = () => {
     setModal(<PopupModal />);
@@ -43,17 +62,22 @@ const ButtonPanel = () => {
               onClick={handleOnBackClick}
             />
           ) : (
-            <BackButton
-              onClick={handleOnMapClick}
-              className="w-8 h-8 flex justify-center items-center pl-[6px] pr-[6px]"
-            />
-            // <BackButton
-            //   onClick={handleOnMapClick}
-            //   title="Map"
-            //   className="w-[90px] h-10"
-            // />
+            <>
+              {!isWebView ? (
+                <BackButton
+                  onClick={handleOnMapClick}
+                  className="w-8 h-8 flex justify-center items-center pl-[6px] pr-[6px]"
+                />
+              ) : (
+                <></>
+              )}
+            </>
+          )}
+          {is3DTour ? (
+            <HelpButton handleOnHelpClick={handleOnHelpClick} />
+          ) : (
+            <></>
           )}
-          <HelpButton handleOnHelpClick={handleOnHelpClick} />
         </div>
       }
     </>

src/components/mobile/Appartment/ImageSlider.tsx

@@ -1,9 +1,17 @@
 import useStore from "../../../store/store";
 
-const ImageSlider = () => {
+type ImageSliderProps = {
+  isScrollable?: boolean;
+};
+
+const ImageSlider = ({ isScrollable = true }: ImageSliderProps) => {
   const { currentVilla } = useStore();
   return (
-    <div className="flex p-6 gap-2 overflow-x-scroll touch-pan-x">
+    <div
+      className={`flex p-6 gap-2  ${
+        isScrollable ? "overflow-x-scroll" : "overflow-x-hidden"
+      }  touch-pan-x`}
+    >
       {currentVilla &&
         currentVilla.perspectiveWorkings.map((working) => (
           <img