feat(appointment): real for-another-patient form and booking payload

Replace the mock for-another button with a real toggle: switching keeps
the user's own data, clears the form to editable patient fields (phone
becomes an input, adds علت مراجعه), and can switch back. SubmitData now
sends for_self plus patient_* only when booking for someone else, skips
the self-profile PATCH/POST in that case, stores the booking expires_at,
and surfaces a clearer 409 message. Thread appointmentExpiresAt through
the wizard to the payment step.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

components/appointment/detail/index.js

@@ -19,10 +19,12 @@ function Detail({
   selectedSlot,
   selectedDate,
   setAppointmentId,
+  setAppointmentExpiresAt,
 }) {
   const [insurance, setInsurance] = useState();
   const [supplementaryInsurance, setSupplementaryInsurance] = useState();
   const [errors, setErrors] = useState({});
+  const [selfData, setSelfData] = useState(null);
 
   const changeData = (value, type, name) =>
     setData({
@@ -33,6 +35,28 @@ function Detail({
       },
     });
 
+  const emptyPatientData = () => ({
+    phone: { value: "", isEdit: true },
+    national_code: { value: "", isEdit: true },
+    name: { value: "", isEdit: true },
+    family: { value: "", isEdit: true },
+    gender: { value: "", isEdit: true },
+    patient_reason: { value: "", isEdit: true },
+  });
+
+  const switchToAnother = () => {
+    setSelfData(data);
+    setIsForAnother(true);
+    setErrors({});
+    setData(emptyPatientData());
+  };
+
+  const switchToSelf = () => {
+    setIsForAnother(false);
+    setErrors({});
+    if (selfData) setData(selfData);
+  };
+
   useEffect(() => {
     // دریافت لیست بیمه پایه
     request.getInsuranceType().then((res) => {
@@ -78,33 +102,26 @@ function Detail({
           isForAnother={isForAnother}
           errors={errors}
         />
-        {!isForAnother && (
-          <Button
-            className="!flex !items-center !justify-start !gap-[8px] !mt-[12px] sm:!mt-[16px] md:!mt-[20px] lg:!mt-[24px] !p-1"
-            onClick={() => {
-              setIsForAnother(true);
-              setData({
-                phone: { value: "09121056987", isEdit: true },
-                codemeli: { value: "1741025645", isEdit: true },
-                name: { value: "ساغر صابری نژاد", isEdit: true },
-              });
-            }}
-          >
-            <AddCircleBlueA />
-            <p className="text-[#5559CE] text-[16px] font-medium">
-              دریافت نوبت برای فرد دیگر{" "}
-            </p>
-          </Button>
-        )}
+        <Button
+          className="!flex !items-center !justify-start !gap-[8px] !mt-[12px] sm:!mt-[16px] md:!mt-[20px] lg:!mt-[24px] !p-1"
+          onClick={() => (isForAnother ? switchToSelf() : switchToAnother())}
+        >
+          <AddCircleBlueA />
+          <p className="text-[#5559CE] text-[16px] font-medium">
+            {isForAnother ? "نوبت برای خودم است" : "نوبت برای شخص دیگری است"}
+          </p>
+        </Button>
         <SubmitData
           setStep={setStep}
           data={data}
           prevData={prevData}
           setErrors={setErrors}
           doctor={doctor}
+          isForAnother={isForAnother}
           selectedSlot={selectedSlot}
           selectedDate={selectedDate}
           setAppointmentId={setAppointmentId}
+          setAppointmentExpiresAt={setAppointmentExpiresAt}
         />
       </div>
     </div>