refactor: implement login state management and navigation flow in appointment components

components/appointment/Container.js

@@ -7,6 +7,9 @@ import Paying from "@/components/appointment/paying";
 import Detail from "@/components/appointment/detail";
 import FailedPay from "@/components/appointment/failedPay";
 import SuccessPay from "@/components/appointment/successPay";
+import LogInPage from "@/components/register/LogInPage";
+import VerificationPage from "@/components/register/verificationPage";
+import LayoutRegister from "@/components/register/LayoutRegister";
 
 function Container({
   step,
@@ -19,11 +22,33 @@ function Container({
   isForAnother,
   setIsForAnother,
   disabledDates,
+  // Login states
+  num,
+  setNum,
+  uuid,
+  setUuid,
+  isSendMsg,
+  setIsSendMsg,
 }) {
   const elements = [
     <Date doctor={doctor} setStep={setStep} disabledDates={disabledDates} />,
-    // <LogInPage setIsSendMsg={false} setStep={setStep} />,
-    // <VerificationPage setIsSendMsg={false} link={false} setStep={setStep} />,
+    <LogInPage
+      num={num}
+      setNum={setNum}
+      setUuid={setUuid}
+      setStep={setStep}
+      setIsSendMsg={setIsSendMsg}
+      matchedCity={matchedCity}
+    />,
+    <VerificationPage
+      num={num}
+      uuid={uuid}
+      setStep={setStep}
+      setUuid={setUuid}
+      isSendMsg={isSendMsg}
+      setIsSendMsg={setIsSendMsg}
+      link={false}
+    />,
     <Detail
       data={data}
       setStep={setStep}
@@ -39,27 +64,29 @@ function Container({
 
   return (
     <>
-      {/* {step === 1 || step === 2 ? (
-        <RegisterPage>{elements[step]}</RegisterPage>
-      ) : ( */}
-      <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}
-        >
+      {step === 1 || step === 2 ? (
+        <LayoutRegister matchedCity={matchedCity}>
           {elements[step]}
-        </Content>
-      </Layout>
-      {/* )} */}
+        </LayoutRegister>
+      ) : (
+        <Layout
+          title="رزرو"
+          name="booking"
+          disableFooter={step > 4}
+          matchedCity={matchedCity}
+          paddingBottom="pb-[80px]"
+        >
+          <Content
+            disableSide={step === 5 || step === 6}
+            isFirst={step === 0}
+            setStep={setStep}
+            doctor={doctor}
+            step={step}
+          >
+            {elements[step]}
+          </Content>
+        </Layout>
+      )}
     </>
   );
 }

components/appointment/index.js

@@ -19,6 +19,11 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
   const [prevData, setPrevData] = useState(defaultData);
   const [data, setData] = useState(defaultData);
 
+  // Login states
+  const [num, setNum] = useState("");
+  const [uuid, setUuid] = useState("");
+  const [isSendMsg, setIsSendMsg] = useState(false);
+
   useEffect(() => {
     const userInfo = Cookies.get("userInfo");
     const parsedData = userInfo && JSON.parse(userInfo);
@@ -62,7 +67,7 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
           //
         });
     }
-  }, []);
+  }, [step]); // وقتی step تغییر کرد، دوباره چک می‌کنه
 
   return (
     <Container
@@ -76,6 +81,12 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
       isForAnother={isForAnother}
       setIsForAnother={setIsForAnother}
       disabledDates={disabledDates}
+      num={num}
+      setNum={setNum}
+      uuid={uuid}
+      setUuid={setUuid}
+      isSendMsg={isSendMsg}
+      setIsSendMsg={setIsSendMsg}
     />
   );
 }