masterplan mobile filters

src/components/complexPage/ComplexTopPanel.tsx

@@ -11,6 +11,8 @@ import InfoIcon from "../icons/InfoIcon";
 import useFullScreen from "../../store/useFullScreen";
 import ActiveResizeIcon from "../icons/ActiveResizeIcon";
 import useWingSidebar from "../../store/useWingSidebar";
+import { MobileModalWrapper } from "../modals/mobile/MobileModalWrapper";
+import MasterplanFiltersModal from "../modals/mobile/MasterplanFiltersModal";
 
 const ComplexTopPanel = () => {
   const { setModal } = useModal();
@@ -26,6 +28,14 @@ const ComplexTopPanel = () => {
     setModal(<MasterplanFilters />);
   };
 
+  const handleOnMobileFiltersClick = () => {
+    setModal(
+      <MobileModalWrapper>
+        <MasterplanFiltersModal />
+      </MobileModalWrapper>
+    );
+  };
+
   const handleOnBackClick = () => {
     if (isSidebar) {
       setIsSidebar(false);
@@ -60,11 +70,19 @@ const ComplexTopPanel = () => {
             onClick={handleOnBackClick}
           />
           <Button
+            className="hidden lg:flex"
             icon={<FilterIcon />}
             buttonType="primary"
             text="Filters"
             onClick={handleOnFiltersClick}
           />
+          <Button
+            className="lg:hidden flex"
+            icon={<FilterIcon />}
+            buttonType="primary"
+            text="Filters"
+            onClick={handleOnMobileFiltersClick}
+          />
           <Button
             icon={<InfoIcon />}
             buttonType="primary"

src/components/modals/mobile/MasterplanFiltersModal.tsx

@@ -0,0 +1,165 @@
+import { useContext, useState } from "react";
+import useModal from "../../../store/useModal";
+import Button from "../../Button";
+import CrossIcon from "../../icons/CrossIcon";
+import { MobileModalWrapperContext } from "./MobileModalWrapper";
+import Checkbox from "../../Checkbox";
+import MultiRangeSlider from "../../MultiRangeSlider";
+import Switch from "../../Switch";
+import ResetIcon from "../../icons/ResetIcon";
+import { useSwipeable } from "react-swipeable";
+import {
+  initialCheckboxes,
+  initialSliders,
+  initialSwitchers,
+} from "../../../consts/initialMasterplanFilters";
+
+const MasterplanFiltersModal = () => {
+  const { setModal } = useModal();
+  const { setIsAnimate } = useContext(MobileModalWrapperContext);
+  const [apartmentTypeCheckboxes, setApartmentTypeCheckboxes] =
+    useState(initialCheckboxes);
+  const [switchers, setSwitchers] = useState(initialSwitchers);
+  const [multirangeSliders, setMultirangeSliders] = useState(initialSliders);
+  const handlers = useSwipeable({
+    onSwipedDown: () => handleOnCrossClick(),
+  });
+
+  const handleOnCrossClick = () => {
+    if (setIsAnimate) {
+      setIsAnimate(false);
+      const timeout = setTimeout(() => {
+        setModal(null);
+        clearTimeout(timeout);
+      }, 300);
+    }
+  };
+
+  const handleOnCheckboxApartmentTypeClick = (checkboxId: string) => {
+    const updatedCheckboxes = apartmentTypeCheckboxes.map((cbox) => {
+      if (checkboxId !== cbox.id) return cbox;
+      const isSelected = !cbox.selected;
+
+      return { ...cbox, selected: isSelected };
+    });
+
+    setApartmentTypeCheckboxes(updatedCheckboxes);
+  };
+
+  const handleOnSwitcherClick = (switcherId: string) => {
+    const updatedSwitchers = switchers.map((switcher) => {
+      if (switcherId !== switcher.id) return switcher;
+      const { isSwitched } = switcher;
+
+      return { ...switcher, isSwitched: !isSwitched };
+    });
+
+    setSwitchers(updatedSwitchers);
+  };
+
+  const handleOnSliderValueChange = (
+    sliderId: string,
+    e: [a: number, b: number]
+  ) => {
+    const updatedSliders = multirangeSliders.map((slider) => {
+      if (sliderId !== slider.id) return slider;
+
+      return { ...slider, startValue: e[0], endValue: e[1] };
+    });
+
+    setMultirangeSliders(updatedSliders);
+  };
+
+  const handleOnShowApartmentClick = () => {
+    if (setIsAnimate) {
+      setIsAnimate(false);
+      const timeout = setTimeout(() => {
+        setModal(null);
+        clearTimeout(timeout);
+      }, 300);
+    }
+  };
+
+  const handleOnResetClick = () => {
+    setSwitchers(initialSwitchers);
+    setMultirangeSliders(initialSliders);
+    setApartmentTypeCheckboxes(initialCheckboxes);
+  };
+
+  return (
+    <div
+      className="bg-[#F3F3F2] rounded-ss-lg rounded-se-lg h-full p-6 flex flex-col gap-6"
+      {...handlers}
+    >
+      <div className="flex justify-between pb-6 border-b">
+        <h2 className="text-[#0D1922] text-subheadline-m font-semibold">
+          Filters
+        </h2>
+        <Button
+          buttonType="secondary"
+          isCircleRounded
+          icon={<CrossIcon />}
+          className="text-[#0D1922B2]"
+          onClick={handleOnCrossClick}
+        />
+      </div>
+      <div className="flex flex-col w-full">
+        <p className="text-[#0D1922] text-m font-semibold pb-4">
+          Apartment type
+        </p>
+        <div className="grid grid-cols-2 gap-2">
+          {apartmentTypeCheckboxes.map((checkbox) => (
+            <Checkbox
+              checkbox={checkbox}
+              key={checkbox.id}
+              onClick={handleOnCheckboxApartmentTypeClick}
+            />
+          ))}
+        </div>
+      </div>
+      <div className="grid grid-cols-2 gap-6 border-b pb-12">
+        {multirangeSliders.map((slider) => (
+          <div className="flex flex-col gap-3">
+            <div className="flex justify-between items-center">
+              <p className="text-[#0D1922] text-m font-semibold ">
+                {slider.title}
+              </p>
+              <p className="text-[#73787C] text-m font-semibold">
+                {slider.unit}
+              </p>
+            </div>
+            <MultiRangeSlider
+              onChange={handleOnSliderValueChange}
+              multirangeSlider={slider}
+            />
+          </div>
+        ))}
+        <div className="flex flex-col gap-2 pt-6">
+          {switchers.map((switcher) => (
+            <div key={switcher.id} className="flex justify-between w-full">
+              <p className="text-s text-[#73787C]">{switcher.title}</p>
+              <Switch switcher={switcher} onClick={handleOnSwitcherClick} />
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className="flex justify-between">
+        <p className="text-[#00BED7] text-m">195 apartments found</p>
+        <Button
+          icon={<ResetIcon />}
+          text="Reset filters"
+          buttonType="tertiary"
+          onClick={handleOnResetClick}
+        />
+      </div>
+      <Button
+        text="Show Apartments"
+        buttonType="cta"
+        className="flex justify-center"
+        onClick={handleOnShowApartmentClick}
+      />
+    </div>
+  );
+};
+
+export default MasterplanFiltersModal;

src/components/modals/mobile/SearchFiltersModal.tsx

@@ -9,6 +9,12 @@ import MultiRangeSlider from "../../MultiRangeSlider";
 import Switch from "../../Switch";
 import ResetIcon from "../../icons/ResetIcon";
 import { useSwipeable } from "react-swipeable";
+import {
+  initialApartmentTypeCheckboxes,
+  initialRoveHomeCheckboxes,
+  initialSliders,
+  initialSwitchers,
+} from "../../../consts/initialSearchFilters";
 
 const SearchFiltersModal = () => {
   const { setModal } = useModal();
@@ -93,6 +99,13 @@ const SearchFiltersModal = () => {
     }
   };
 
+  const handleOnResetClick = () => {
+    setMultirangeSliders(initialSliders);
+    setApartmentTypeCheckboxes(initialApartmentTypeCheckboxes);
+    setRoveHomeTypeCheckboxes(initialRoveHomeCheckboxes);
+    setSwitchers(initialSwitchers);
+  };
+
   return (
     <div
       className="bg-[#F3F3F2] rounded-ss-lg rounded-se-lg h-full p-6 flex flex-col gap-6"
@@ -168,6 +181,7 @@ const SearchFiltersModal = () => {
           icon={<ResetIcon />}
           text="Reset filters"
           buttonType="tertiary"
+          onClick={handleOnResetClick}
         />
       </div>
       <Button