hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: enhance appointment flow by adding selected slot and date management across components

Browse Source
This commit is contained in:
hamed
2025-11-17 15:33:47 +03:30
parent 2777db3b8c
commit b46a017773
12 changed files with 135 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/component/date/dateTime/SendAppo.js
+7 -1
View File
@@ -4,7 +4,7 @@ import Cookies from "js-cookie";
import { useParams } from "next/navigation";
import { useState } from "react";
function SendAppo({ hour, setStep }) {
function SendAppo({ hour, setStep, setSelectedSlot, date, setSelectedDate }) {
const params = useParams();
const doctorId = params.doctorId;
const [loading, setLoading] = useState(false);
@@ -12,6 +12,12 @@ function SendAppo({ hour, setStep }) {
const sendReq = () => {
const isLogged = Cookies.get("access_token");
// ذخیره کردن اطلاعات اسلات انتخاب شده
if (hour && date) {
setSelectedSlot(hour);
setSelectedDate(date);
}
if (isLogged) {
// اگر لاگین کرده، به مرحله 3 (Detail) می‌رود
setStep(3);
app/component/date/dateTime/index.js
+8 -2
View File
@@ -9,7 +9,7 @@ import SendAppo from "./SendAppo";
const listTab = ["صبح", "بعد از ظهر"];
const nameHours = ["hours_morning", "hours_afternoon"];
function DateTime({ date, doctor, setStep }) {
function DateTime({ date, doctor, setStep, setSelectedSlot, setSelectedDate }) {
const [value, setValue] = useState(0);
const [hour, setHour] = useState();
const [appo, setAppo] = useState("تاریخ مورد نظرتان را انتخاب کنید.");
@@ -105,7 +105,13 @@ function DateTime({ date, doctor, setStep }) {
nameHours={nameHours}
locationAddress={locationAddress}
/>
<SendAppo hour={hour} setStep={setStep} />
<SendAppo
hour={hour}
setStep={setStep}
setSelectedSlot={setSelectedSlot}
date={date}
setSelectedDate={setSelectedDate}
/>
</div>
);
}
components/appointment/Container.js
+14 -1
View File
@@ -29,9 +29,20 @@ function Container({
setUuid,
isSendMsg,
setIsSendMsg,
// Appointment slot states
selectedSlot,
setSelectedSlot,
selectedDate,
setSelectedDate,
}) {
const elements = [
<Date doctor={doctor} setStep={setStep} disabledDates={disabledDates} />,
<Date
doctor={doctor}
setStep={setStep}
disabledDates={disabledDates}
setSelectedSlot={setSelectedSlot}
setSelectedDate={setSelectedDate}
/>,
<LogInPage
num={num}
setNum={setNum}
@@ -82,6 +93,8 @@ function Container({
setStep={setStep}
doctor={doctor}
step={step}
selectedSlot={selectedSlot}
selectedDate={selectedDate}
>
{elements[step]}
</Content>
components/appointment/Content.js
+3 -1
View File
@@ -1,7 +1,7 @@
import Information from "./information";
import Location from "./location";
function Content({ doctor, step, setStep, children, isFirst, disableSide }) {
function Content({ doctor, step, setStep, children, isFirst, disableSide, selectedSlot, selectedDate }) {
return (
<div
className="flex flex-col lg:flex-row justify-center gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px] padding-responsive
@@ -15,6 +15,8 @@ function Content({ doctor, step, setStep, children, isFirst, disableSide }) {
doctor={doctor}
step={step}
setStep={setStep}
selectedSlot={selectedSlot}
selectedDate={selectedDate}
/>
)}
{children}
components/appointment/date/hour/index.js
+3 -1
View File
@@ -1,6 +1,6 @@
import DateTime from "@/app/component/date/dateTime";
function Hour({ doctor, setStep, date, locateVisit, isStep }) {
function Hour({ doctor, setStep, date, locateVisit, isStep, setSelectedSlot, setSelectedDate }) {
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">
@@ -11,6 +11,8 @@ function Hour({ doctor, setStep, date, locateVisit, isStep }) {
doctor={doctor}
setStep={setStep}
locateVisit={locateVisit}
setSelectedSlot={setSelectedSlot}
setSelectedDate={setSelectedDate}
/>
{!isStep && (
<div className="absolute left-0 top-0 w-full h-full bg-[rgba(255,255,255,0.84)]"></div>
components/appointment/date/index.js
+3 -1
View File
@@ -2,7 +2,7 @@ import { useState } from "react";
import Hour from "./hour";
import Time from "./Time";
function Date({ doctor, setStep, disabledDates }) {
function Date({ doctor, setStep, disabledDates, setSelectedSlot, setSelectedDate }) {
const [locateVisit, setLocateVisit] = useState(true);
const [date, setDate] = useState();
@@ -25,6 +25,8 @@ function Date({ doctor, setStep, disabledDates }) {
setStep={setStep}
doctor={doctor}
date={date}
setSelectedSlot={setSelectedSlot}
setSelectedDate={setSelectedDate}
/>
</div>
</div>
components/appointment/detail/index.js
+9
View File
@@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import { Button } from "@mui/material";
import AddCircleBlueA from "@/components/icons/AddCircleBlueA";
import ArrowRightS from "@/components/icons/ArrowRightS";
import Form from "./Form";
import { request } from "@/services/response";
import SubmitData from "./SubmitData";
@@ -41,6 +42,14 @@ function Detail({
rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]
`}
>
{/* دکمه برگشت */}
<div
className="cursor-pointer mb-[16px]"
onClick={() => setStep(0)}
>
<ArrowRightS />
</div>
<p className="text-[#3B3B3B] text-[20px] font-bold">
{isForAnother ? "اطلاعات کاربر جدید" : "اطلاعات حساب کاربری"}
</p>
components/appointment/index.js
+8
View File
@@ -24,6 +24,10 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
const [uuid, setUuid] = useState("");
const [isSendMsg, setIsSendMsg] = useState(false);
// Appointment slot states
const [selectedSlot, setSelectedSlot] = useState(null);
const [selectedDate, setSelectedDate] = useState(null);
useEffect(() => {
const userInfo = Cookies.get("userInfo");
const parsedData = userInfo && JSON.parse(userInfo);
@@ -87,6 +91,10 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
setUuid={setUuid}
isSendMsg={isSendMsg}
setIsSendMsg={setIsSendMsg}
selectedSlot={selectedSlot}
setSelectedSlot={setSelectedSlot}
selectedDate={selectedDate}
setSelectedDate={setSelectedDate}
/>
);
}
components/appointment/information/Detail.js
+40 -9
View File
@@ -1,13 +1,44 @@
"use client";
import ArrowLeftOrangeA from "@/components/icons/ArrowLeftOrangeA";
import CalendarA from "@/components/icons/CalendarA";
import ClockA from "@/components/icons/ClockA";
import LocationA from "@/components/icons/LocationA";
import TickCircleOrange from "@/components/icons/TickCircleOrange";
import { Button } from "@mui/material";
import moment from "moment-jalaali";
import { useEffect, useState } from "react";
import { request } from "@/services/response";
function Detail({ doctor, step, setStep }) {
// دریافت اولین آدرس از لیست
const firstAddress = doctor?.address?.[0]?.address || doctor?.location || "آدرس موجود نیست";
function Detail({ doctor, step, setStep, selectedSlot, selectedDate }) {
const [address, setAddress] = useState("آدرس موجود نیست");
// دریافت آدرس بر اساس location_id از اسلات انتخاب شده
useEffect(() => {
if (selectedSlot?.location_id) {
request
.getDoctorAddress(selectedSlot.location_id)
.then((res) => {
if (res?.address) {
setAddress(res.address);
}
})
.catch((err) => {
console.error("Error fetching address:", err);
});
} else if (doctor?.address?.[0]?.address) {
// اگر اسلات location_id نداشت، از آدرس دکتر استفاده کن
setAddress(doctor.address[0].address);
}
}, [selectedSlot, doctor]);
// فرمت کردن تاریخ به شمسی
const formattedDate = selectedDate
? moment.unix(selectedDate).locale('fa').format('jDD jMMMM jYYYY')
: "تاریخ انتخاب نشده";
// فرمت کردن زمان
const formattedTime = selectedSlot?.time || "زمان انتخاب نشده";
return (
<div className="">
@@ -17,7 +48,7 @@ function Detail({ doctor, step, setStep }) {
<LocationA />
</div>
<p className="text-[#616161] text-[14px] md:text-[16px] font-normal">
آدرس: {firstAddress}
آدرس: {address}
</p>
</li>
<li className="flex items-center justify-between w-full">
@@ -30,7 +61,7 @@ function Detail({ doctor, step, setStep }) {
تاریخ نوبت:{" "}
</p>
<p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">
13 خرداد 1403
{formattedDate}
</p>
</div>
</div>
@@ -59,7 +90,7 @@ function Detail({ doctor, step, setStep }) {
زمان نوبت:{" "}
</p>
<p className="text-[#2F2F2F] text-[14px] md:text-[16px] font-medium mr-1">
ساعت 17:20
ساعت {formattedTime}
</p>
</div>
</div>
@@ -85,7 +116,7 @@ function Detail({ doctor, step, setStep }) {
w-full h-px bg-[#D7D7D7] block"
></span>
<ul className="flex flex-col items-start justify-start gap-[8px] sm:gap-[13px] md:gap-[19px] lg:gap-[24px]">
<li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
{/* <li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
<div
className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
w-[16px] sm:w-[19px] md:w-[21px] lg:w-[24px] h-[16px] sm:h-[19px] md:h-[21px] lg:h-[24px]"
@@ -93,10 +124,10 @@ function Detail({ doctor, step, setStep }) {
<TickCircleOrange />
</div>
<p className="text-[#616161] text-[12px] md:text-[14px] lg:text-[16px] font-normal">
فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه
فقط در صورت لغو نوبت تا 5 ساعت قبل از زمان ویزیت، امکان استرداد وجه
ممکن می باشد.
</p>
</li>
</li> */}
<li className="flex items-center justify-start gap-[4px] md:gap-[6px] lg:gap-[8px]">
<div
className="min-w-[16px] sm:min-w-[19px] md:min-w-[21px] lg:min-w-[24px] min-h-[16px] sm:min-h-[19px] md:min-h-[21px] lg:min-h-[24px]
components/appointment/information/index.js
+16 -10
View File
@@ -1,29 +1,35 @@
"use client";
import Detail from "./Detail";
import Head from "./Head";
function Information({ doctor, step, setStep, typePay, isPay, disableSide }) {
function Information({ doctor, step, setStep, typePay, isPay, disableSide, selectedSlot, selectedDate }) {
return (
<div
className={`w-full lg:w-[41%] relative ${
disableSide ? "hidden lg:flex" : ""
}`}
className={`w-full lg:w-[41%] relative ${disableSide ? "hidden lg:flex" : ""
}`}
>
<div
className={`p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px] sticky right-0 w-full opacity-page rounded-[8px] border
border-solid border-[#EFEFEF] bg-[#FFF]
top-[calc(12px_+_75px_+_32px)] sm:top-[calc(21px_+_75px_+_45px)] md:top-[calc(30px_+_75px_+_58px)] lg:top-[calc(40px_+_75px_+_78px)]
${
typePay === "success" || typePay === "failed"
? "hidden md:block"
: "block"
}
${typePay === "success" || typePay === "failed"
? "hidden md:block"
: "block"
}
`}
>
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
جزئیات نوبت
</p>
<Head doctor={doctor} />
<Detail doctor={doctor} step={step} setStep={setStep} />
<Detail
doctor={doctor}
step={step}
setStep={setStep}
selectedSlot={selectedSlot}
selectedDate={selectedDate}
/>
</div>
</div>
);
services/api.js
+17 -3
View File
@@ -4,17 +4,31 @@ import "react-toastify/dist/ReactToastify.css";
const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
const token = Cookies.get("access_token");
const api = axios.create({
baseURL: BASE_URL,
"X-CSRF-Token": "",
headers: {
"Content-Type": "application/json",
Authorization: token ? `Bearer ${token}` : "",
},
});
// اضافه کردن interceptor برای افزودن token به ریکوست‌هایی که نیاز به احراز هویت دارند
api.interceptors.request.use(
(config) => {
// فقط اگر requireAuth در config تنظیم شده باشد، token اضافه می‌شود
if (config.requireAuth) {
const token = Cookies.get("access_token");
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
api.interceptors.response.use(
(response) => {
return response.data;
services/response.js
+7 -15
View File
@@ -35,21 +35,13 @@ export const request = {
},
});
},
getUserProfile: (uuid) => api.get(`/api/v1/user-profile/${uuid}`),
postUserProfile: (data) => api.post("api/v1/user-profile", data),
patchUserProfile: (data, uuid, token) =>
api.patch(
`api/v1/user-profile/${uuid}`,
data,
token && {
headers: {
Authorization: `Bearer ${token}`,
},
}
),
getUserInfo: (headers) => api.get("oauth/userinfo", headers),
getInsuranceType: () =>
api.get("api/v1/categorys/insurance_type", removeTokenHead),
getUserProfile: (uuid) => api.get(`/api/v1/user-profile/${uuid}`, { requireAuth: true }),
postUserProfile: (data) => api.post("api/v1/user-profile", data, { requireAuth: true }),
patchUserProfile: (data, uuid) =>
api.patch(`api/v1/user-profile/${uuid}`, data, { requireAuth: true }),
getUserInfo: (headers) => api.get("oauth/userinfo", { ...headers, requireAuth: true }),
getInsuranceType: (page = 1, limit = 10) =>
api.get(`api/v1/categorys/insurance_type?page=${page}&limit=${limit}`, removeTokenHead),
getDoctors: (params) =>
api.get("api/v1/doctors", {
params,