design modal map in step 2

components/panel/addDoctor/index.js

@@ -9,7 +9,7 @@ import GeneralInformation from "./listMenu/generalInformation";
 import Step from "./Step";
 
 function AddDoctorPage() {
-  const [value, setValue] = useState(2);
+  const [value, setValue] = useState(1);
   const [data, setData] = useState({
     general: {
       name: { value: "", placeholder: "احسان احمدی", isEdit: true },
@@ -25,7 +25,7 @@ function AddDoctorPage() {
       degree: { value: "", isEdit: true },
     },
     office: {
-      address: { value: "", isEdit: true },
+      address: { value: "مپ", isEdit: true },
       phone: { value: "", placeholder: 1741025645, isEdit: true },
       office_number1: { value: "", isEdit: true },
       office_number2: { value: "", isEdit: true },
@@ -83,7 +83,6 @@ function AddDoctorPage() {
       },
     ],
   });
-  console.log(data);
 
   const components = [
     <GeneralInformation

components/panel/addDoctor/listMenu/officeInformation/Form.js

@@ -5,8 +5,15 @@ import EditField from "@/app/component/EditField";
 import ContentText from "@/app/component/ContentText";
 import AddLocationP from "@/components/icons/AddLocationP";
 import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
+import { useState } from "react";
+import ModalMap from "./modal";
 
 function Form({ parent, data, setData }) {
+  const [open, setOpen] = useState(false);
+
+  const handleClose = () => setOpen(false);
+  const handleOpen = () => setOpen(true);
+
   const changeData = (value, type, name) =>
     type !== "isEdit" &&
     setData((prev) => {
@@ -23,65 +30,74 @@ function Form({ parent, data, setData }) {
     });
 
   return (
-    <div className="mt-[24px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
-      <ContentText text="استان">
-        <AutoCompleteSelect
-          updateData={changeData}
-          label="انتخاب کنید..."
-          name="state"
-          list={state}
-        />
-      </ContentText>
-      <ContentText text="شهر">
-        <AutoCompleteSelect
-          updateData={changeData}
-          label="انتخاب کنید..."
-          name="city"
-          list={city}
-        />
-      </ContentText>
-      <ContentText text="آدرس">
-        <EditField
-          icon={<AddLocationP />}
-          isTransparent={true}
-          placeholder="از روی نقشه انتخاب کنید..."
-          iconGray={true}
-          changeData={changeData}
-          data={data?.address}
-          name="address"
-        />
-      </ContentText>
-      <ContentText text="شماره موبایل">
-        <EditField
-          isTransparent={true}
-          placeholder="شماره موبایل"
-          iconGray={true}
-          changeData={changeData}
-          data={data?.phone}
-          name="phone"
-        />
-      </ContentText>
-      <ContentText text="شماره مطب">
-        <EditField
-          isTransparent={true}
-          placeholder="شماره مطب"
-          iconGray={true}
-          changeData={changeData}
-          data={data?.office_number1}
-          name="office_number1"
-        />
-      </ContentText>
-      <ContentText text="شماره مطب">
-        <EditField
-          isTransparent={true}
-          placeholder="شماره مطب"
-          iconGray={true}
-          changeData={changeData}
-          data={data?.office_number2}
-          name="office_number2"
-        />
-      </ContentText>
-    </div>
+    <>
+      <div className="mt-[24px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
+        <ContentText text="استان">
+          <AutoCompleteSelect
+            updateData={changeData}
+            label="انتخاب کنید..."
+            name="state"
+            list={state}
+          />
+        </ContentText>
+        <ContentText text="شهر">
+          <AutoCompleteSelect
+            updateData={changeData}
+            label="انتخاب کنید..."
+            name="city"
+            list={city}
+          />
+        </ContentText>
+        <ContentText text="آدرس">
+          <div className="relative w-full">
+            <EditField
+              icon={<AddLocationP />}
+              isTransparent={true}
+              placeholder="از روی نقشه انتخاب کنید..."
+              iconGray={true}
+              changeData={changeData}
+              data={data?.address}
+              name="address"
+            />
+            <div
+              className="absolute left-0 top-0 w-full h-full opacity-0 z-10 cursor-pointer"
+              onClick={handleOpen}
+            ></div>
+          </div>
+        </ContentText>
+        <ContentText text="شماره موبایل">
+          <EditField
+            isTransparent={true}
+            placeholder="شماره موبایل"
+            iconGray={true}
+            changeData={changeData}
+            data={data?.phone}
+            name="phone"
+          />
+        </ContentText>
+        <ContentText text="شماره مطب">
+          <EditField
+            isTransparent={true}
+            placeholder="شماره مطب"
+            iconGray={true}
+            changeData={changeData}
+            data={data?.office_number1}
+            name="office_number1"
+          />
+        </ContentText>
+        <ContentText text="شماره مطب">
+          <EditField
+            isTransparent={true}
+            placeholder="شماره مطب"
+            iconGray={true}
+            changeData={changeData}
+            data={data?.office_number2}
+            name="office_number2"
+          />
+        </ContentText>
+      </div>
+      <ModalMap open={open} handleClose={handleClose} />
+    </>
   );
 }
 

components/panel/addDoctor/listMenu/officeInformation/modal/index.js

@@ -0,0 +1,53 @@
+import { styleDefault } from "@/mui";
+import { Modal } from "@mui/material";
+import { useState } from "react";
+
+import MapPicker from "react-google-map-picker";
+
+const DefaultLocation = {
+  lat: 9.912345921562734,
+  lng: 105.97776559918576,
+};
+const DefaultZoom = 10;
+
+function ModalMap({ open, handleClose }) {
+  const [defaultLocation, setDefaultLocation] = useState(DefaultLocation);
+
+  const [location, setLocation] = useState(defaultLocation);
+  const [zoom, setZoom] = useState(DefaultZoom);
+
+  function handleChangeLocation(lat, lng) {
+    setLocation({ lat: lat, lng: lng });
+  }
+
+  function handleChangeZoom(newZoom) {
+    setZoom(newZoom);
+  }
+
+  function handleResetLocation() {
+    setDefaultLocation({ ...DefaultLocation });
+    setZoom(DefaultZoom);
+  }
+
+  return (
+    <Modal open={open} onClose={handleClose} className="w-full">
+      <div
+        style={styleDefault}
+        className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+              !w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
+      >
+        <MapPicker
+          zoom={zoom}
+          mapTypeId="roadmap"
+          style={{ height: "500px" }}
+          onChangeZoom={handleChangeZoom}
+          defaultLocation={defaultLocation}
+          onChangeLocation={handleChangeLocation}
+          apiKey="AIzaSyD07E1VvpsN_0FvsmKAj4nK9GnLq-9jtj8"
+        />
+      </div>
+    </Modal>
+  );
+}
+
+export default ModalMap;

package-lock.json

@@ -27,6 +27,7 @@
         "npm": "^10.8.2",
         "react": "^18.0.0",
         "react-dom": "^18",
+        "react-google-map-picker": "^1.2.3",
         "styled-components": "^6.1.11",
         "stylis": "^4.3.4",
         "stylis-plugin-rtl": "^2.1.1",
@@ -19059,6 +19060,17 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-google-map-picker": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/react-google-map-picker/-/react-google-map-picker-1.2.3.tgz",
+      "integrity": "sha512-XeIj0Eh0vhNToMTebQQrt5O9fdPRDf4KtG8J22xupH7Pu49J1dP5UuhfCM6VmK2nIv5ECyQUpOT6+gZgGaQhJA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",

package.json

@@ -28,6 +28,7 @@
     "npm": "^10.8.2",
     "react": "^18.0.0",
     "react-dom": "^18",
+    "react-google-map-picker": "^1.2.3",
     "styled-components": "^6.1.11",
     "stylis": "^4.3.4",
     "stylis-plugin-rtl": "^2.1.1",