change packages & change data in weekly day & add fields to modal add & remove validation from login page

app/component/date/datePicker/index.js

@@ -3,8 +3,9 @@
 import { useEffect, useRef, useState } from "react";
 import FirstDatePicker from "./date/FirstDatePicker";
 import SecondDatePicker from "./date/SecondDatePicker";
+import { dateToTimestamp } from "@/helper";
 
-function DatePicker({ date, updateDate }) {
+function DatePicker({ setDate }) {
   const nextIconDatePickerF = useRef();
   const prevIconDatePickerF = useRef();
   const nextIconDatePickerS = useRef();
@@ -16,13 +17,15 @@ function DatePicker({ date, updateDate }) {
 
   const handleStartDateChange = (date, e) => {
     if (date) {
-      setStartDate(date);
+      setDate(dateToTimestamp(date));
       setEndDate(null);
+      setStartDate(date);
     }
   };
 
   const handleEndDateChange = (date) => {
     if (date) {
+      setDate(dateToTimestamp(date));
       setEndDate(date);
       setStartDate(null);
     }
@@ -36,7 +39,6 @@ function DatePicker({ date, updateDate }) {
   useEffect(() => {
     if (nextIconDatePickerS.current) {
       nextIconDatePickerS.current.click();
-      console.log(nextIconDatePickerS.current);
 
       setLoading(false);
     }

app/component/date/dateTime/Hours.js

@@ -1,34 +0,0 @@
-import { Button } from "@mui/material";
-
-function Hours({ doctor, hour, setHour, value, nameHours }) {
-  return (
-    <ul className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-[16px] gap-y-[12px] sm:gap-y-[16px] md:gap-y-[20px] lg:gap-y-[24px] mt-[24px] mb-[40px]">
-      {doctor &&
-        nameHours &&
-        doctor[nameHours[value]]?.map((item, idx) => (
-          <li key={idx}>
-            <Button
-              onClick={() => setHour(idx)}
-              disabled={!item.active}
-              className={`
-                        !w-full !rounded-[8px] !bg-[#EFEFEF] !flex !justify-center !items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
-                        ${idx === hour ? "!bg-[#F79463] " : ""}
-                    `}
-            >
-              <p
-                className={`
-                        text-[16px] font-semibold text-[#525252]
-                        ${item.active ? "text-[#525252]" : "text-[#D7D7D7]"}
-                        ${idx === hour ? "!text-[#FAFAFA] " : ""}
-                    `}
-              >
-                {item.hour}
-              </p>
-            </Button>
-          </li>
-        ))}
-    </ul>
-  );
-}
-
-export default Hours;

app/component/date/dateTime/SendAppo.js

@@ -0,0 +1,49 @@
+import ArrowLeftB from "@/components/icons/ArrowLeftB";
+import { request } from "@/services/response";
+import { Button } from "@mui/material";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+
+function SendAppo({ hour }) {
+  const params = useParams();
+  const doctorId = params.doctorId;
+  const [loading, setLoading] = useState(false);
+
+  const sendReq = () => {
+    setLoading(true);
+    request
+      .postAppointment({
+        doctor_id: doctorId,
+        slot: hour,
+      })
+      .then((res) => {
+        console.log(res);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+    // if (locateVisit) {
+    //   setStep((prev) => prev + 1);
+    // } else {
+    //   setIsError(true);
+    // }
+  };
+
+  return (
+    <div className="w-full flex justify-end">
+      <Button
+        className="!gap-[4px] !text-[16px] !font-medium !shadow-none !px-[12px] !py-[8px] md:!py-[9px] !w-full md:!w-fit !min-w-[157px]"
+        variant="contained"
+        loading={loading}
+        onClick={sendReq}
+        disabled={!hour}
+      >
+        تایید نوبت
+        <ArrowLeftB />
+      </Button>
+    </div>
+  );
+}
+
+export default SendAppo;

app/component/date/dateTime/hours/List.js

@@ -0,0 +1,44 @@
+import { Button } from "@mui/material";
+import React from "react";
+
+function List({ appo, hour, setHour, value }) {
+  const list = appo && appo[value ? "evening" : "morning"];
+
+  if (list && list.length) {
+    return (
+      <ul className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-[16px] gap-y-[12px] sm:gap-y-[16px] md:gap-y-[20px] lg:gap-y-[24px] mt-[24px] mb-[40px]">
+        {list.map((item, idx) => (
+          <li key={idx}>
+            <Button
+              onClick={() => setHour(item)}
+              disabled={!item.status === "available"}
+              className={`
+                          !w-full !rounded-[8px] !bg-[#EFEFEF] !flex !justify-center !items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
+                          ${JSON.stringify(item) === JSON.stringify(hour) ? "!bg-[#F79463] " : ""}
+                      `}
+            >
+              <p
+                className={`
+                          text-[16px] font-semibold text-[#525252]
+                          ${item.status === "available" ? "text-[#525252]" : "text-[#D7D7D7]"}
+                          ${JSON.stringify(item) === JSON.stringify(hour) ? "!text-[#FAFAFA] " : ""}
+                      `}
+              >
+                {item.time}
+              </p>
+            </Button>
+          </li>
+        ))}
+      </ul>
+    );
+  } else {
+    return (
+      <p className="text-[#525252] text-[14px] md:text-[16px] font-medium py-[56px]">
+        در حال حاضر، نوبتی برای ساعت‌های {[value ? "بعد از ظهر" : "صبح"]} موجود
+        نمی‌باشد.
+      </p>
+    );
+  }
+}
+
+export default List;

app/component/date/dateTime/hours/Loading.js

@@ -0,0 +1,23 @@
+import { CircularProgress } from "@mui/material";
+
+function Loading() {
+  return (
+    <div className="w-full grid place-items-center py-[48px]">
+      <CircularProgress
+        sx={{
+          "& .MuiCircularProgress-circle": {
+            stroke: "#F17732",
+            // strokeLinecap: "round",
+          },
+          "& .MuiCircularProgress-svg": {
+            // borderRadius: "50%",
+            // boxShadow: "inset 0 0 0 11px #D7D7D7",
+          },
+        }}
+        className="!mx-auto"
+      />
+    </div>
+  );
+}
+
+export default Loading;

app/component/date/dateTime/hours/index.js

@@ -0,0 +1,18 @@
+import List from "./List";
+import Loading from "./Loading";
+
+function Hours({ appo, doctor, hour, setHour, value, nameHours }) {
+  if (appo === "loading") {
+    return <Loading />;
+  } else if (typeof appo === "string") {
+    return (
+      <p className="text-[#525252] text-[14px] md:text-[16px] font-medium py-[56px]">
+        {appo}
+      </p>
+    );
+  } else {
+    return <List appo={appo} hour={hour} value={value} setHour={setHour} />;
+  }
+}
+
+export default Hours;

app/component/date/dateTime/index.js

@@ -1,19 +1,46 @@
 "use client";
 
-import { useState } from "react";
-import Hours from "./Hours";
+import { useEffect, useState } from "react";
+import Hours from "./hours";
 import Tabs from "../../Tabs";
 import { Button } from "@mui/material";
 import ArrowLeftB from "@/components/icons/ArrowLeftB";
+import { request } from "@/services/response";
+import { useParams, useSearchParams } from "next/navigation";
+import SendAppo from "./SendAppo";
 
 const listTab = ["صبح", "بعد از ظهر"];
 const nameHours = ["hours_morning", "hours_afternoon"];
 
-function DateTime({ doctor, setStep, setIsError, locateVisit }) {
+function DateTime({ date, doctor, setStep, setIsError, locateVisit }) {
+  const params = useParams();
+  const doctorId = params.doctorId;
   const [value, setValue] = useState(0);
-  const [hour, setHour] = useState(0);
+  const [hour, setHour] = useState();
+  const [appo, setAppo] = useState("تاریخ مورد نظرتان را انتخاب کنید.");
 
-  const handleChange = (event, newValue) => setValue(newValue);
+  const handleChange = (event, newValue) => {
+    setHour();
+    setValue(newValue);
+  };
+  console.log(hour);
+
+  useEffect(() => {
+    if (date) {
+      setAppo("loading");
+      setHour();
+      request
+        .getAppointment(doctorId, date)
+        .then((res) => {
+          console.log(res);
+          setAppo(res);
+        })
+        .catch((err) => {
+          console.log(err);
+          setAppo("در حال حاضر، نوبتی برای ساعت‌های صبح موجود نمی‌باشد.");
+        });
+    }
+  }, [date]);
 
   return (
     <div className="w-full">
@@ -41,29 +68,14 @@ function DateTime({ doctor, setStep, setIsError, locateVisit }) {
         handleChange={handleChange}
       />
       <Hours
+        appo={appo}
         hour={hour}
         value={value}
         doctor={doctor}
         setHour={setHour}
         nameHours={nameHours}
       />
-      <div className="w-full flex justify-end">
-        <Button
-          className="!gap-[4px] !shadow-none !px-[12px] !py-[8px] md:!py-[9px] !w-full md:!w-fit !min-w-[157px]"
-          onClick={() => {
-            if (locateVisit) {
-              localStorage.setItem("doctor-id", doctor?.id);
-              setStep((prev) => prev + 1);
-            } else {
-              setIsError(true);
-            }
-          }}
-          variant="contained"
-        >
-          <p className="text-[#EFEFEF] text-[16px] font-medium">تایید نوبت</p>
-          <ArrowLeftB />
-        </Button>
-      </div>
+      <SendAppo hour={hour} />
     </div>
   );
 }

components/appointment/date/Time/SelectDatePicker.js

@@ -1,20 +1,7 @@
 import DatePicker from "@/app/component/date/datePicker";
-import { request } from "@/services/response";
-import { useEffect } from "react";
 
-function SelectDatePicker() {
-  useEffect(() => {
-    request
-      .getAppointment(47, 1753859133)
-      .then((res) => {
-        console.log(res);
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  });
-
-  return <DatePicker />;
+function SelectDatePicker({ setDate }) {
+  return <DatePicker setDate={setDate} />;
 }
 
 export default SelectDatePicker;

components/appointment/date/Time/index.js

@@ -1,12 +1,12 @@
 import SelectDatePicker from "./SelectDatePicker";
 
-function Time({ isStep }) {
+function Time({ isStep, setDate }) {
   return (
     <div className="flex relative mt-[24px] flex-col items-start gap-[19px] justify-start">
       <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
         2. انتخاب روز
       </p>
-      <SelectDatePicker />
+      <SelectDatePicker setDate={setDate} />
       {!isStep && (
         <div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
       )}

components/appointment/date/hour/index.js

@@ -1,12 +1,13 @@
 import DateTime from "@/app/component/date/dateTime";
 
-function Hour({ doctor, setStep, setIsError, locateVisit, isStep }) {
+function Hour({ doctor, setStep, date, setIsError, locateVisit, isStep }) {
   return (
     <div className="flex relative mt-[24px] flex-col items-start gap-[12px] justify-start">
       <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold">
         3. انتخاب ساعت
       </p>
       <DateTime
+        date={date}
         doctor={doctor}
         setStep={setStep}
         setIsError={setIsError}

components/appointment/date/index.js

@@ -6,6 +6,7 @@ import PlaceVisit from "./PlaceVisit";
 function Date({ doctor, setStep }) {
   const [locateVisit, setLocateVisit] = useState(true);
   const [isError, setIsError] = useState(false);
+  const [date, setDate] = useState();
 
   return (
     <div className="w-full lg:w-[61%]">
@@ -19,8 +20,9 @@ function Date({ doctor, setStep }) {
           isError={isError}
         />
         <Time
-          isStep={doctor?.multiwork ? locateVisit : true}
+          setDate={setDate}
           locateVisit={locateVisit}
+          isStep={doctor?.multiwork ? locateVisit : true}
         />
         <Hour
           isStep={doctor?.multiwork ? locateVisit : true}
@@ -29,6 +31,7 @@ function Date({ doctor, setStep }) {
           setIsError={setIsError}
           setStep={setStep}
           doctor={doctor}
+          date={date}
         />
       </div>
     </div>

helper/index.js

@@ -237,3 +237,20 @@ export const changeDateType = (data, toTimeStamp) => {
   }
   return newData;
 };
+
+export const removeTokenHead = {
+  headers: {
+    Authorization: "",
+  },
+};
+
+export const dateToTimestamp = (date) => {
+  const gregorianMoment = date.clone().locale("fa");
+
+  // Get the Unix timestamp in milliseconds
+  const unixTimestamp = gregorianMoment.valueOf();
+
+  const inSeconde = unixTimestamp / 1000;
+
+  return inSeconde;
+};

services/response.js

@@ -1,3 +1,4 @@
+import { removeTokenHead } from "@/helper";
 import api from "./api";
 
 export const request = {
@@ -8,11 +9,7 @@ export const request = {
         mobile,
         captcha_token,
       },
-      {
-        headers: {
-          Authorization: "",
-        },
-      }
+      removeTokenHead
     ),
   getToken: (grant_type, client_id, client_secret, uuid, code) => {
     const formData = new URLSearchParams();
@@ -47,11 +44,7 @@ export const request = {
     }),
   getUserInfo: (headers) => api.get("oauth/userinfo", headers),
   getInsuranceType: () =>
-    api.get("api/v1/categorys/insurance_type", {
-      headers: {
-        Authorization: "",
-      },
-    }),
+    api.get("api/v1/categorys/insurance_type", removeTokenHead),
   getAppointmentWeeklySchedule: (uuid) =>
     api.get(`api/v1/appointment-settings/weekly-schedule/${uuid}`),
   postAppointmentWeeklySchedule: () =>
@@ -61,6 +54,9 @@ export const request = {
   deleteAppointmentWeeklySchedule: (uuid) =>
     api.delete(`api/v1/appointment-settings/weekly-schedule/${uuid}`),
   getAppointment: (doctor_id, date) =>
-    api.get(`api/v1/appointment?doctor_id=${doctor_id}&date=${date}`),
+    api.get(
+      `api/v1/appointment-slots?doctor_id=${doctor_id}&date=${date}`,
+      removeTokenHead
+    ),
   postAppointment: (data) => api.post(`api/v1/appointment`, data),
 };