handle filter list city by url

app/component/modalSearchCity/Content.js

@@ -0,0 +1,74 @@
+import { Button } from "@mui/material";
+
+// Icon
+import CloseModalD from "@/components/icons/CloseModalD";
+import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
+import ArrowLeftM from "@/components/icons/ArrowLeftM";
+
+function Content({
+  states,
+  selected,
+  updateData,
+  handleClose,
+  filteredCities,
+  provinceSelected,
+  isProvinceInclude,
+}) {
+  const citySelected = selected.city;
+
+  return (
+    <div>
+      <div className="flex justify-end w-full">
+        <div className="cursor-pointer" onClick={handleClose}>
+          <CloseModalD />
+        </div>
+      </div>
+      <div className="md:p-[24px] pt-0">
+        <p className="text-[#525252] mt-[38px] md:mt-4 text-[16px] font-medium text-center">
+          شهر یا استان مورد نظر را انتخاب نمایید:
+        </p>
+        <div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
+          <AutoCompleteSelect
+            updateData={updateData}
+            value={selected && provinceSelected}
+            disabled={isProvinceInclude}
+            list={states}
+            label="استان"
+            name="province"
+          />
+          <AutoCompleteSelect
+            updateData={updateData}
+            value={
+              selected &&
+              citySelected &&
+              filteredCities.find((item) => item.label === citySelected) &&
+              citySelected
+            }
+            list={filteredCities}
+            name="city"
+            label="شهر"
+            disabled={
+              !isProvinceInclude ||
+              !provinceSelected ||
+              filteredCities.length === 0
+            }
+          />
+        </div>
+        <div className="w-full flex justify-end">
+          <Button
+            className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
+            onClick={handleClose}
+            variant="contained"
+            color="primary"
+            disabled={!provinceSelected || !citySelected}
+          >
+            تایید و ادامه
+            <ArrowLeftM />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Content;

app/component/modalSearchCity/index.js

@@ -1,21 +1,21 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Box, Button, Modal } from "@mui/material";
+import { Modal, Box } from "@mui/material";
-
-// Icon
 import { styleDefault } from "@/mui";
-import CloseModalD from "@/components/icons/CloseModalD";
-import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
-import ArrowLeftM from "@/components/icons/ArrowLeftM";
 
 // Data
 import statesData from "@/data/state.json";
 import citiesData from "@/data/city.json";
+import Content from "./Content";
 
 function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
   const provinceSelected = selected.province;
-  const citySelected = selected.city;
+  // const hostName = window.location.host;
+  const hostName = "urmia-nobat.ir";
+  const isProvinceInclude = citiesData.find(
+    (city) => city.domain !== "nobat724.com" && hostName.includes(city.domain)
+  );
   const [states, setStates] = useState([]);
   const [cities, setCities] = useState([]);
   const [filteredCities, setFilteredCities] = useState([]);
@@ -54,6 +54,13 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
         );
         setFilteredCities(filteredCities);
       }
+    } else if (isProvinceInclude) {
+      setSelected({
+        ...selected,
+        province: statesData.find(
+          (state) => state.id === isProvinceInclude.province_id
+        )?.name,
+      });
     } else {
       setFilteredCities([]);
       setSelected({ ...selected, city: "" });
@@ -77,50 +84,15 @@ function ModalSearchCity({ children, selected, setSelected, open, setOpen }) {
       {/* Content Modal */}
       <Modal open={open} onClose={handleClose}>
         <Box sx={styleDefault} className="!w-full !h-full md:!w-fit md:!h-fit">
-          <div className="flex justify-end w-full">
+          <Content
-            <div className="cursor-pointer" onClick={handleClose}>
+            states={states}
-              <CloseModalD />
+            selected={selected}
-            </div>
+            updateData={updateData}
-          </div>
+            handleClose={handleClose}
-          <div className="md:p-[24px] pt-0">
+            filteredCities={filteredCities}
-            <p className="text-[#525252] mt-[38px] md:mt-4 text-[16px] font-medium text-center">
+            provinceSelected={provinceSelected}
-              شهر یا استان مورد نظر را انتخاب نمایید:
+            isProvinceInclude={isProvinceInclude}
-            </p>
+          />
-            <div className="flex md:min-w-[344px] flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
-              <AutoCompleteSelect
-                updateData={updateData}
-                value={selected && provinceSelected}
-                list={states}
-                label="استان"
-                name="province"
-              />
-              <AutoCompleteSelect
-                updateData={updateData}
-                value={
-                  selected &&
-                  citySelected &&
-                  filteredCities.find((item) => item.label === citySelected) &&
-                  citySelected
-                }
-                list={filteredCities}
-                name="city"
-                label="شهر"
-                disabled={!provinceSelected || filteredCities.length === 0}
-              />
-            </div>
-            <div className="w-full flex justify-end">
-              <Button
-                className="!w-full md:!w-fit !flex !px-3 items-center justify-center gap-1 mr-auto"
-                onClick={handleClose}
-                variant="contained"
-                color="primary"
-                disabled={!provinceSelected || !citySelected}
-              >
-                تایید و ادامه
-                <ArrowLeftM />
-              </Button>
-            </div>
-          </div>
         </Box>
       </Modal>
     </>

package-lock.json

@@ -42,6 +42,7 @@
         "universal-cookie": "^7.2.1"
       },
       "devDependencies": {
+        "cross-env": "^7.0.3",
         "postcss": "^8",
         "tailwindcss": "^3.4.1"
       }

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "cross-env HOST=nobat724.localhost PORT=3000 next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -43,6 +43,7 @@
     "universal-cookie": "^7.2.1"
   },
   "devDependencies": {
+    "cross-env": "^7.0.3",
     "postcss": "^8",
     "tailwindcss": "^3.4.1"
   }