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
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>
);