set data ssr in page booking/slug

app/booking/[slug]/page.js

@@ -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 { getStateInfo } from "@/lib/getStateInfo";
-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 Booking({ params: { slug } }) {
-  const doctor = doctors.find((item) => item.id === +slug);
+  const { matchedCity } = getStateInfo();
-
-  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} />,
-  ];
 
   return (
-    <>
+    <BookingPage slug={slug} matchedCity={matchedCity} />
-      {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>
-      )}
-    </>
   );
 }
 

app/component/date/datePicker/NextIconDatePicker.js

@@ -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

@@ -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

@@ -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

@@ -1,31 +1,71 @@
-import Information from "./information";
+"use client";
-import Location from "./location";
+
+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
+      {step === 1 || step === 2 ? (
-            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)]"
+        <RegisterPage>{elements[step]}</RegisterPage>
-    >
-      {isFirst ? (
-        <Location disableSide={disableSide} doctor={doctor} />
       ) : (
-        <Information
+        <Layout
-          disableSide={disableSide}
+          title="رزرو"
-          doctor={doctor}
+          name="booking"
-          step={step}
+          disableFooter={step > 2}
-          setStep={setStep}
+          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

@@ -6,7 +6,6 @@ function Layout({
   children,
   isTurnsDetails,
   setIsTurnsDetails,
-  title,
   name,
   isOpenSide,
   setIsOpenSide,