ivans

src/components/header/Auth/AuthDesktop.tsx

@@ -1,7 +1,7 @@
 import useModal from "../../../store/useModal";
 import Button from "../../Button";
 import AuthIcon from "../../icons/AuthIcon";
-import LoginModal from "../../modals/LoginModal";
+import LoginModal from "../../modals/auth/LoginModal";
 
 interface AuthProps {
   isAuth: boolean;

src/components/modals/auth/ContinueLoginModal.tsx

@@ -0,0 +1,94 @@
+import { createRef, useLayoutEffect, useState, RefObject } from "react";
+import useModal from "../../../store/useModal";
+import Button from "../../Button";
+import CrossIcon from "../../icons/CrossIcon";
+import RegistrationModal from "./RegistrationModal";
+
+const ContinueLoginModal = () => {
+  const { setModal } = useModal();
+  const [codeRefs, setCodeRefs] = useState<RefObject<HTMLInputElement>[]>([]);
+
+  const codeLength = 6;
+
+  useLayoutEffect(() => {
+    const refs = Array.from({ length: codeLength }).map(() =>
+      createRef<HTMLInputElement>()
+    );
+    setCodeRefs(refs);
+  }, []);
+
+  const handleOnCloseClick = () => {
+    setModal(null);
+  };
+
+  const handleOnCancelClick = () => {
+    setModal(<RegistrationModal />);
+  };
+
+  const handleOnCodeInput = (
+    refIndex: number,
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const char = e.currentTarget.value;
+    const isNotEmpty = char !== "";
+    const isCountOne = char.length === 1;
+    if (refIndex < codeLength && isNotEmpty && isCountOne) {
+      codeRefs[refIndex + 1].current?.focus();
+    }
+  };
+
+  return (
+    <div className="absolute z-50 top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-11  items-center">
+      <div className="bg-[#F3F3F2] rounded-lg col-span-3 col-start-5 py-[37px] px-8">
+        <div className="w-full flex justify-between items-center border-b pb-6">
+          <h2 className="text-[#0D1922] text-subheadline-m font-semibold">
+            Enter the code
+          </h2>
+          <button onClick={handleOnCloseClick}>
+            <CrossIcon />
+          </button>
+        </div>
+        <div className="flex gap-1 pt-6 text-m text-[#0D1922B2]">
+          We`ve sent the code to <p className="text-[#0D1922] ">number</p>
+        </div>
+        <div className="grid grid-cols-6 gap-x-2 pt-6">
+          {codeRefs.map((ref, index) => (
+            <div className="h-12 bg-white rounded-lg flex items-center justify-center overflow-clip">
+              <input
+                onChange={(e) => handleOnCodeInput(index, e)}
+                ref={ref}
+                type="number"
+                className="input_number outline-transparent aspect-square w-full text-center"
+              />
+            </div>
+          ))}
+          <p className="col-span-2 text-caption-m text-[#00BED7] font-semibold pt-6 select-none cursor-pointer">
+            Resend code
+          </p>
+
+          <div className="pt-8 col-span-full flex gap-2">
+            <Button
+              text="Cancel"
+              className="justify-center w-full"
+              onClick={handleOnCancelClick}
+            />
+            <Button
+              text="Login"
+              buttonType="cta"
+              className="justify-center w-full"
+            />
+          </div>
+          <p className="text-caption-m font-semibold text-center col-span-full text-[#0D192266] pt-4">
+            By clicking on the button, you accept the{" "}
+            <a className="text-[#00BED7] cursor-pointer select-none">
+              privacy policy
+            </a>{" "}
+            and consent to the processing of personal data.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContinueLoginModal;

src/components/modals/auth/ContinueRegistrationModal.tsx

@@ -0,0 +1,94 @@
+import { createRef, useLayoutEffect, useState, RefObject } from "react";
+import useModal from "../../../store/useModal";
+import Button from "../../Button";
+import CrossIcon from "../../icons/CrossIcon";
+import RegistrationModal from "./RegistrationModal";
+
+const ContinueRegistrationModal = () => {
+  const { setModal } = useModal();
+  const [codeRefs, setCodeRefs] = useState<RefObject<HTMLInputElement>[]>([]);
+
+  const codeLength = 6;
+
+  useLayoutEffect(() => {
+    const refs = Array.from({ length: codeLength }).map(() =>
+      createRef<HTMLInputElement>()
+    );
+    setCodeRefs(refs);
+  }, []);
+
+  const handleOnCloseClick = () => {
+    setModal(null);
+  };
+
+  const handleOnCancelClick = () => {
+    setModal(<RegistrationModal />);
+  };
+
+  const handleOnCodeInput = (
+    refIndex: number,
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const char = e.currentTarget.value;
+    const isNotEmpty = char !== "";
+    const isCountOne = char.length === 1;
+    if (refIndex < codeLength && isNotEmpty && isCountOne) {
+      codeRefs[refIndex + 1].current?.focus();
+    }
+  };
+
+  return (
+    <div className="absolute z-50 top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-11  items-center">
+      <div className="bg-[#F3F3F2] rounded-lg col-span-3 col-start-5 py-[37px] px-8">
+        <div className="w-full flex justify-between items-center border-b pb-6">
+          <h2 className="text-[#0D1922] text-subheadline-m font-semibold">
+            Enter the code
+          </h2>
+          <button onClick={handleOnCloseClick}>
+            <CrossIcon />
+          </button>
+        </div>
+        <div className="flex gap-1 pt-6 text-m text-[#0D1922B2]">
+          We`ve sent the code to <p className="text-[#0D1922] ">number</p>
+        </div>
+        <div className="grid grid-cols-6 gap-x-2 pt-6">
+          {codeRefs.map((ref, index) => (
+            <div className="h-12 bg-white rounded-lg flex items-center justify-center overflow-clip">
+              <input
+                onChange={(e) => handleOnCodeInput(index, e)}
+                ref={ref}
+                type="number"
+                className="input_number outline-transparent aspect-square w-full text-center"
+              />
+            </div>
+          ))}
+          <p className="col-span-2 text-caption-m text-[#00BED7] font-semibold pt-6 select-none cursor-pointer">
+            Resend code
+          </p>
+
+          <div className="pt-8 col-span-full flex gap-2">
+            <Button
+              text="Cancel"
+              className="justify-center w-full"
+              onClick={handleOnCancelClick}
+            />
+            <Button
+              text="Create account"
+              buttonType="cta"
+              className="justify-center w-full"
+            />
+          </div>
+          <p className="text-caption-m font-semibold text-center col-span-full text-[#0D192266] pt-4">
+            By clicking on the button, you accept the{" "}
+            <a className="text-[#00BED7] cursor-pointer select-none">
+              privacy policy
+            </a>{" "}
+            and consent to the processing of personal data.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContinueRegistrationModal;

src/components/modals/auth/LoginModal.tsx

@@ -1,14 +1,25 @@
-import useModal from "../../store/useModal";
+import useModal from "../../../store/useModal";
-import Button from "../Button";
+import Button from "../../Button";
-import MasterSelector from "../MasterSelector";
+import MasterSelector from "../../MasterSelector";
-import CrossIcon from "../icons/CrossIcon";
+import CrossIcon from "../../icons/CrossIcon";
+import ContinueLoginModal from "./ContinueLoginModal";
+import RegistrationModal from "./RegistrationModal";
 
 const LoginModal = () => {
   const { setModal } = useModal();
+
   const handleOnCloseClick = () => {
     setModal(null);
   };
 
+  const handleOnCreateAccoutClick = () => {
+    setModal(<RegistrationModal />);
+  };
+
+  const handleOnLoginClick = () => {
+    setModal(<ContinueLoginModal />);
+  };
+
   return (
     <div className="absolute z-50 top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-11  items-center">
       <div className="bg-[#F3F3F2] rounded-lg col-span-3 col-start-5 py-[37px] px-8">
@@ -22,11 +33,21 @@ const LoginModal = () => {
         </div>
         <div className="flex flex-col pt-6">
           <MasterSelector title="Contact number" />
+          <div className="pt-8">
+            <Button
+              onClick={handleOnLoginClick}
+              text="Login"
+              buttonType="cta"
+              className="justify-center w-full"
+            />
+          </div>
 
-          <Button text="Login" buttonType="cta" className="justify-center" />
           <div className="font-semibold text-caption-m flex justify-center items-center text-[#0D192266] gap-1 pt-4">
             Don`t have an account?{" "}
-            <p className="text-[#00BED7] select-none cursor-pointer">
+            <p
+              className="text-[#00BED7] select-none cursor-pointer"
+              onClick={handleOnCreateAccoutClick}
+            >
               Create one
             </p>
           </div>

src/components/modals/auth/RegistrationModal.tsx

@@ -0,0 +1,81 @@
+import useModal from "../../../store/useModal";
+import Button from "../../Button";
+import MasterInput from "../../MasterInput";
+import MasterSelector from "../../MasterSelector";
+import CrossIcon from "../../icons/CrossIcon";
+import ContinueRegistrationModal from "./ContinueRegistrationModal";
+import LoginModal from "./LoginModal";
+
+const RegistrationModal = () => {
+  const { setModal } = useModal();
+
+  const handleOnCloseClick = () => {
+    setModal(null);
+  };
+
+  const handleOnLoginClick = () => {
+    setModal(<LoginModal />);
+  };
+
+  const handleOnContinueClick = () => {
+    setModal(<ContinueRegistrationModal />)
+  }
+
+  return (
+    <div className="absolute z-50 top-0 left-0 w-screen bg-[#0D192266] h-screen backdrop-blur-[6px] grid grid-cols-11  items-center">
+      <div className="bg-[#F3F3F2] rounded-lg col-span-3 col-start-5 py-[37px] px-8">
+        <div className="w-full flex justify-between items-center border-b pb-6">
+          <h2 className="text-[#0D1922] text-subheadline-m font-semibold">
+            Create account
+          </h2>
+          <button onClick={handleOnCloseClick}>
+            <CrossIcon />
+          </button>
+        </div>
+        <div className="flex flex-col gap-4 pt-6">
+          <MasterInput title="Name" isRequired={true} placeholder="Name" />
+          <MasterInput
+            title="Company name"
+            isRequired={false}
+            placeholder="Company"
+          />
+          <MasterInput
+            title="Email"
+            isRequired={false}
+            placeholder="sample@mail.com"
+          />
+          <MasterSelector title="Contact number" />
+        </div>
+        <div className="pt-8">
+          <Button
+          onClick={handleOnContinueClick}
+            text="Continue"
+            buttonType="cta"
+            className="justify-center w-full"
+          />
+        </div>
+
+        <div className="font-semibold text-caption-m flex justify-center items-center text-[#0D192266] gap-1 pt-4">
+          Already have an account?{" "}
+          <p
+            className="text-[#00BED7] select-none cursor-pointer"
+            onClick={handleOnLoginClick}
+          >
+            login
+          </p>
+        </div>
+        <div className="font-semibold text-caption-m text-[#0D192266] gap-1 pt-8 flex">
+          <p className="text-center">
+            By clicking on the button, you accept the and consent to the{" "}
+            <a className="text-[#00BED7] select-none cursor-pointer">
+              privacy policy{" "}
+            </a>{" "}
+            processing of personal data.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RegistrationModal;

src/components/multiRangeSlider.css

@@ -51,6 +51,7 @@
   left: 50%;
   transform: translate(-50%, 0);
 }
+
 .range-slider input[type="range"] {
   -webkit-appearance: none;
   pointer-events: none;

src/components/virtualTour/VirtualTourSidebar.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import useSphere from "../../store/useSphere";
 import { IAppartmentSphere, ISphere } from "../../types/apartmentSphere";
 import Button from "../Button";
@@ -7,6 +7,8 @@ import ChevronDownIcon from "../icons/ChevronDownIcon";
 import HeartIcon from "../icons/Heart";
 import MapVectorIcon from "../icons/MapVectorIcon";
 import useCompass from "../../store/useCompass";
+import LeftArrowIcon from "../icons/LeftArrowIcon";
+import InfoIcon from "../icons/InfoIcon";
 
 interface VirtualTourSidebarProps {
   currentAppartment: null | IAppartmentSphere;
@@ -28,35 +30,43 @@ const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
     <div className="absolute w-screen h-screen grid z-[99999999] pointer-events-none select-none">
       <div className="h-screen py-[130px] px-3 w-[360px]">
         <div className="bg-white w-full rounded-lg p-5 flex flex-col relative rounded-ee-none">
-          <div className="flex flex-col gap-1 pb-[18px] border-b">
+          <div className="flex items-center justify-between gap-1 pb-[18px] border-b">
-            <p className="text-[#00BED7] text-caption-m font-medium">
+            <Button
-              Rove Home Marasi Drive{" "}
+              icon={<LeftArrowIcon />}
+              buttonType="secondary"
+              className="w-fit"
+            />
+            <p className="text-[#0D1922] font-semibold text-subheadline-s leading-6 text-right">
+              1 BR Squared, 609 Sqft
             </p>
-            <div className="text-[#73787C] flex gap-2 items-center w-fit">
-              <p className="text-caption-m font-semibold leading-4">
-                East Wing
-              </p>
-              <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
-              <p className="text-caption-m font-semibold leading-4">Floor 11</p>
-              <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
-              <p className="text-caption-m font-semibold leading-4">№ 213</p>
-            </div>
           </div>
           <div className="pt-3">
             <div className="flex gap-2 items-center">
-              <div className="bg-[#00BED7] py-[3px] px-2 rounded-full text-white text-caption-m flex items-center h-[22px]">
+              <div className="flex flex-col">
-                234
+                <p className="text-[#00BED7] text-caption-m font-medium">
+                  Rove Home Marasi Drive{" "}
+                </p>
+                <div className="text-[#73787C] flex gap-2 items-center w-fit pt-1">
+                  <p className="text-caption-m font-semibold leading-4">
+                    East Wing
+                  </p>
+                  <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
+                  <p className="text-caption-m font-semibold leading-4">
+                    Floor 11
+                  </p>
+                  <div className="w-1 h-1 bg-[#E2E2DC] rounded-full"></div>
+                  <p className="text-caption-m font-semibold leading-4">
+                    № 213
+                  </p>
+                </div>
               </div>
-              <p className="text-[#0D1922] font-semibold text-subheadline-s leading-6">
-                1 bedroom appartment
-              </p>
             </div>
             <div
               className={`transition-all duration-700 ease-in-out ${
                 !isActive ? "max-h-0 opacity-0" : "max-h-screen opacity-100"
               }`}
             >
-              <div className="my-4 relative">
+              <div className={`${isActive ? "my-4" : ""} relative`}>
                 <img src="/images/virtual-tour/studio1/map.jpg" alt="" />
                 <div
                   className="absolute"
@@ -82,14 +92,20 @@ const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
                 </div>
               </div>
             </div>
-            <div className="flex gap-2 pt-6">
+            <div className="flex flex-col">
-              <Button
+              <h2 className="text-subhealine-s font-semibold text-[#00BED7] pt-4">
-                icon={<BookingIcon />}
+                AED 1,668,888
-                text="Send Enquiry"
+              </h2>
-                buttonType="cta"
+              <div className="flex gap-2 pt-4 ">
-                className="flex-1 flex items-center justify-center"
+                <Button
-              />
+                  icon={<BookingIcon />}
-              <Button icon={<HeartIcon />} buttonType="secondary" />
+                  text="Send Enquiry"
+                  buttonType="cta"
+                  className="flex-1 flex items-center justify-center"
+                />
+                <Button icon={<InfoIcon />} buttonType="secondary" />
+                <Button icon={<HeartIcon />} buttonType="secondary" />
+              </div>
             </div>
           </div>
           <div className="h-14 absolute -bottom-14 left-0 w-full  flex justify-between">
@@ -111,11 +127,11 @@ const VirtualTourSidebar = ({ currentAppartment }: VirtualTourSidebarProps) => {
                   );
                 })}
             </div>
-            <div className="transition-all duration-300 bg-[#FFFFFFCC] px-4 py-3 w-fit h-12 rounded-ee-lg rounded-es-lg select-none cursor-pointer pointer-events-auto items-start border border-t-[#0D1922B2] active:border-[#00BED7] hover:bg-[#FFFFFF] text-[#0D1922B2] hover:text-[#0D1922]">
+            <div
-              <div
+              onClick={handleOnShowClick}
-                className="flex justify-center items-center gap-2"
+              className="transition-all duration-300 bg-[#FFFFFFCC] px-4 py-3 w-fit h-12 rounded-ee-lg rounded-es-lg select-none cursor-pointer pointer-events-auto items-start border border-t-[#0D1922B2] active:border-[#00BED7] hover:bg-[#FFFFFF] text-[#0D1922B2] hover:text-[#0D1922]"
-                onClick={handleOnShowClick}
+            >
-              >
+              <div className="flex justify-center items-center gap-2">
                 <div className="relative">
                   <div
                     className={`transition-opacity duration-300 ${