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

set data ssr in page booking/slug

Browse Source
This commit is contained in:
Ehsan
2025-05-11 23:48:50 +03:30
parent 1b2f579d0d
commit 7d05ef0a7d
6 changed files with 101 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/booking/[slug]/page.js
+3 -62
View File
@@ -1,70 +1,11 @@
"use client";
import { useState } from "react";
import Layout from "@/components/layout";
import doctors from "@/data/doctors.json";
import Date from "@/components/booking/date";
import BookingPage from "@/components/booking";
import RegisterPage from "@/components/register";
import Paying from "@/components/booking/paying";
import Detail from "@/components/booking/detail";
import FailedPay from "@/components/booking/failedPay";
import LogInPage from "@/components/register/LogInPage";
import SuccessPay from "@/components/booking/successPay";
import SetCodePage from "@/components/register/SetCodePage";
import { getStateInfo } from "@/lib/getStateInfo";
function Booking({ params: { slug } }) {
const doctor = doctors.find((item) => item.id === +slug);
const [step, setStep] = useState(0);
const [isForAnother, setIsForAnother] = useState(false);
const [data, setData] = useState({
phone: { value: "09121056987", isEdit: true },
codemeli: { value: "1741025645", isEdit: true },
name: { value: "ساغر صابری نژاد", isEdit: true },
});
const elements = [
<Date doctor={doctor} setStep={setStep} />,
<LogInPage setIsSendMsg={false} setStep={setStep} />,
<SetCodePage setIsSendMsg={false} link={false} setStep={setStep} />,
<Detail
isForAnother={isForAnother}
setIsForAnother={setIsForAnother}
setStep={setStep}
data={data}
setData={setData}
/>,
<Paying setStep={setStep} />,
<SuccessPay setStep={setStep} />,
<FailedPay setStep={setStep} />,
];
const { matchedCity } = getStateInfo();
return (
<>
{step === 1 || step === 2 ? (
<RegisterPage>{elements[step]}</RegisterPage>
) : (
<Layout
title="رزرو"
name="booking"
disableFooter={step > 2}
paddingBottom="pb-[80px]"
>
<BookingPage
disableSide={step === 5 || step === 6}
isFirst={step === 0}
setStep={setStep}
doctor={doctor}
step={step}
>
{elements[step]}
</BookingPage>
</Layout>
)}
</>
<BookingPage slug={slug} matchedCity={matchedCity} />
);
}
app/component/date/datePicker/NextIconDatePicker.js
+1
View File
@@ -11,6 +11,7 @@ function NextIconDatePicker({ nextIconDatePicker }) {
<Image
src="/assets/icons/arrow-right.svg"
className="icon-left-datepicker"
alt="arrow"
height={24}
width={24}
/>
app/component/date/datePicker/PrevIconDatePicker.js
+1
View File
@@ -11,6 +11,7 @@ function PrevIconDatePicker({ prevIconDatePicker }) {
<Image
src="/assets/icons/arrow-right.svg"
className="icon-left-datepicker"
alt="arrow"
height={24}
width={24}
/>
components/booking/Content.js
+32
View File
@@ -0,0 +1,32 @@
import Information from "./information";
import Location from "./location";
function Content({
doctor,
step,
setStep,
children,
isFirst,
disableSide,
}) {
return (
<div
className="flex flex-col lg:flex-row justify-center gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px] padding-responsive
items-stretch pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]"
>
{isFirst ? (
<Location disableSide={disableSide} doctor={doctor} />
) : (
<Information
disableSide={disableSide}
doctor={doctor}
step={step}
setStep={setStep}
/>
)}
{children}
</div>
);
}
export default Content;
components/booking/index.js
+64 -24
View File
@@ -1,31 +1,71 @@
import Information from "./information";
import Location from "./location";
"use client";
import { useState } from "react";
import Content from "./Content";
import Layout from "@/components/layout";
import doctors from "@/data/doctors.json";
import Date from "@/components/booking/date";
import RegisterPage from "@/components/register";
import Paying from "@/components/booking/paying";
import Detail from "@/components/booking/detail";
import FailedPay from "@/components/booking/failedPay";
import LogInPage from "@/components/register/LogInPage";
import SuccessPay from "@/components/booking/successPay";
import SetCodePage from "@/components/register/SetCodePage";
function BookingPage({ slug, matchedCity }) {
const doctor = doctors.find((item) => item.id === +slug);
const [step, setStep] = useState(0);
const [isForAnother, setIsForAnother] = useState(false);
const [data, setData] = useState({
phone: { value: "09121056987", isEdit: true },
codemeli: { value: "1741025645", isEdit: true },
name: { value: "ساغر صابری نژاد", isEdit: true },
});
const elements = [
<Date doctor={doctor} setStep={setStep} />,
<LogInPage setIsSendMsg={false} setStep={setStep} />,
<SetCodePage setIsSendMsg={false} link={false} setStep={setStep} />,
<Detail
isForAnother={isForAnother}
setIsForAnother={setIsForAnother}
setStep={setStep}
data={data}
setData={setData}
/>,
<Paying setStep={setStep} />,
<SuccessPay setStep={setStep} />,
<FailedPay setStep={setStep} />,
];
function BookingPage({
doctor,
step,
setStep,
children,
isFirst,
disableSide,
}) {
return (
<div
className="flex flex-col lg:flex-row justify-center gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px] padding-responsive
items-stretch pt-[calc(12px_+_75px_+_32px)] sm:pt-[calc(21px_+_75px_+_45px)] md:pt-[calc(30px_+_75px_+_58px)] lg:pt-[calc(40px_+_75px_+_78px)]"
>
{isFirst ? (
<Location disableSide={disableSide} doctor={doctor} />
<>
{step === 1 || step === 2 ? (
<RegisterPage>{elements[step]}</RegisterPage>
) : (
<Information
disableSide={disableSide}
doctor={doctor}
step={step}
setStep={setStep}
/>
<Layout
title="رزرو"
name="booking"
disableFooter={step > 2}
matchedCity={matchedCity}
paddingBottom="pb-[80px]"
>
<Content
disableSide={step === 5 || step === 6}
isFirst={step === 0}
setStep={setStep}
doctor={doctor}
step={step}
>
{elements[step]}
</Content>
</Layout>
)}
{children}
</div>
</>
);
}
components/layout/index.js
-1
View File
@@ -6,7 +6,6 @@ function Layout({
children,
isTurnsDetails,
setIsTurnsDetails,
title,
name,
isOpenSide,
setIsOpenSide,