add form create inquiryPrivacyFencing

src/core/components/DialogTransition.jsx

@@ -0,0 +1,8 @@
+import { Slide } from "@mui/material";
+import React from "react";
+
+const DialogTransition = React.forwardRef(function Transition(props, ref) {
+    return <Slide direction="up" ref={ref} {...props} />;
+});
+
+export default DialogTransition

src/core/components/MapLayer/Loading/index.jsx

@@ -0,0 +1,17 @@
+import { Box, LinearProgress, Stack } from "@mui/material";
+
+function MapLoading() {
+    return (
+        <Stack
+            sx={{ height: "100%" }}
+            alignItems={"center"}
+            justifyContent={"center"}
+        >
+            <Box sx={{ width: 200 }}>
+                <LinearProgress />
+            </Box>
+        </Stack>
+    );
+}
+
+export default MapLoading;

src/core/components/MapLayer/MarkerLocation/index.jsx

@@ -0,0 +1,34 @@
+import { useFormikContext } from "formik";
+import { useRef } from "react";
+import { Marker, useMapEvents } from "react-leaflet"
+
+const prefix = process.env.NODE_ENV === "production" ? "/v3" : "";
+
+const locationMarker = L.icon({
+    iconUrl: prefix + "/images/locationMarker.png",
+    iconSize: [50, 50],
+    iconAnchor: [25, 50],
+});
+
+const MarkerLocation = () => {
+    const { setFieldValue } = useFormikContext()
+    const location = useRef();
+    const map = useMapEvents({
+        move: (e) => {
+            const latlon = e.target.getCenter()
+            location.current?.setLatLng(latlon);
+            setFieldValue('lat', latlon.lat)
+            setFieldValue('lon', latlon.lng)
+        },
+        zoom: (e) => {
+            const latlon = e.target.getCenter()
+            location.current?.setLatLng(latlon);
+            setFieldValue('lat', latlon.lat)
+            setFieldValue('lon', latlon.lng)
+        },
+    });
+    return (
+        <Marker ref={location} icon={locationMarker} position={map.getCenter()} key="location" />
+    )
+}
+export default MarkerLocation

src/core/components/MapLayer/index.jsx

@@ -0,0 +1,43 @@
+"use client";
+import { MapContainer, TileLayer, useMap } from "react-leaflet";
+
+export const IRAN_CENTER = L.latLng(32.4279, 53.6880);
+
+const MapOptions = ({ options }) => {
+    const map = useMap();
+    if (!options) return;
+
+    if (options.mapDrag) {
+        map.dragging.enable();
+        map.scrollWheelZoom.enable();
+        map.touchZoom.enable();
+        map.doubleClickZoom.enable();
+    } else {
+        map.dragging.disable();
+        map.scrollWheelZoom.disable();
+        map.touchZoom.disable();
+        map.doubleClickZoom.disable();
+    }
+};
+
+function MapLayer({ children, style, otherLayers, options }) {
+    return (
+        <>
+            <MapContainer
+                style={{ width: "100%", height: "100%", ...style }}
+                center={IRAN_CENTER}
+                zoom={6}
+                zoomControl={false}
+                attributionControl={false}
+                {...options}
+            >
+                <MapOptions options={options} />
+                <TileLayer url={`${process.env.NEXT_PUBLIC_MAPTILE_ENDPOINT}/{z}/{x}/{y}.png`} />
+                {children}
+            </MapContainer>
+            {otherLayers}
+        </>
+    );
+}
+
+export default MapLayer;

src/core/components/StyledForm.jsx

@@ -0,0 +1,6 @@
+import { styled } from "@mui/material";
+import { Form } from "formik";
+
+const StyledForm = styled(Form)``;
+
+export default StyledForm;