feat: implement marriage profile questions list page with progress tracking and local data synchronization

src/app/questions-list/page.tsx

@@ -283,6 +283,7 @@ export default function QuestionsListPage() {
       const result = await updateMarriageSectionData(pendingSections[0].slug, {
         current_step: pendingSections[0].storedValue.current_step,
         fields: pendingSections.flatMap((section) => section.fields),
+        version: overview.version,
       });
       applyProfilePatchResultToCache(queryClient, locale, result);
       const cleared = new Set(result.cleared_answer_ids ?? []);
@@ -451,6 +452,11 @@ export default function QuestionsListPage() {
     } catch (err) {
       console.error("Failed to sync pending sections:", err);
       setIsSyncError(true);
+      setToastMessage(
+        t[
+          "Sending the match request failed. Please check your connection and try again."
+        ] ?? "Sending the match request failed. Please check your connection and try again."
+      );
     } finally {
       setIsSyncing(false);
     }

src/components/Componentes/button.tsx

@@ -153,15 +153,7 @@ export function Button({
     );
   };
 
-  const button = (
-    <button
-      {...props}
-      type={type}
-      disabled={isDisabled}
-      aria-describedby={description && !isOutlined ? countdownId : undefined}
-      className={baseClassName}
-    >
-      {isLoading ? (
+  const content = isLoading ? (
     <LoadingThreeDot />
   ) : (
     <span className="flex w-full items-center justify-center gap-2">
@@ -187,14 +179,30 @@ export function Button({
         renderArrow("right")
       )}
     </span>
-      )}
-    </button>
   );
 
-  return href ? (
-    <Link href={localizePath(href, locale)}>{button}</Link>
-  ) : (
-    button
+  if (href) {
+    return (
+      <Link
+        href={localizePath(href, locale)}
+        aria-disabled={isDisabled}
+        className={`${baseClassName} ${isDisabled ? "pointer-events-none" : ""}`}
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <button
+      {...props}
+      type={type}
+      disabled={isDisabled}
+      aria-describedby={description && !isOutlined ? countdownId : undefined}
+      className={baseClassName}
+    >
+      {content}
+    </button>
   );
 }
 

src/components/Componentes/question-answer-storage.tsx

@@ -317,6 +317,7 @@ export function QuestionAnswersProvider({
   const storageKeyRef = useRef(storageKey);
   const slugRef = useRef(slug);
   const backendFieldsRef = useRef<MarriageField[]>([]);
+  const versionRef = useRef<number | undefined>(undefined);
   const dirtyKeysRef = useRef(new Set<string>());
 
   const { data: profile } = useMarriageProfileQuery();
@@ -331,12 +332,14 @@ export function QuestionAnswersProvider({
     slugRef.current = slug;
     questionsRef.current = questions;
     backendFieldsRef.current = serverSectionData?.data || [];
+    versionRef.current = serverSectionData?.version;
   }, [
     answers,
     hasPendingSync,
     slug,
     questions,
     serverSectionData?.data,
+    serverSectionData?.version,
   ]);
 
   useEffect(() => {
@@ -491,6 +494,7 @@ export function QuestionAnswersProvider({
         fields: nextDirtyKey
           ? fullPayload.fields.filter((field) => field.key === nextDirtyKey)
           : [],
+        version: versionRef.current,
       };
       const revision = answersRevisionRef.current;
 
@@ -591,7 +595,7 @@ export function QuestionAnswersProvider({
       const pendingFields = fullPayload.fields.filter((field) =>
         dirtyKeysRef.current.has(field.key),
       );
-      const payload = { ...fullPayload, fields: pendingFields };
+      const payload = { ...fullPayload, fields: pendingFields, version: versionRef.current };
       const revision = answersRevisionRef.current;
 
       if (payload.fields.length === 0) {
@@ -616,6 +620,7 @@ export function QuestionAnswersProvider({
       fetch(getKeepalivePatchUrl(slugRef.current), {
         body: JSON.stringify({
           answers: answersPayload,
+          version: payload.version,
         }),
         credentials: "include",
         headers,

src/hooks/marriage/types.ts

@@ -148,12 +148,14 @@ export type MarriageSectionData = {
   total_steps: number;
   completion_percent: number;
   updated_at: string | null;
+  version?: number;
 };
 
 export type UpdateMarriageSectionDataPayload = {
   current_step: number;
   total_steps?: number;
   fields: MarriageField[];
+  version?: number;
 };
 
 export type MarriageQuestionState = {

src/hooks/marriage/use-form-schema.ts

@@ -77,12 +77,14 @@ export interface FormOverviewSection extends Omit<FormSection, "cards"> {
 
 export interface FormOverviewResponse {
   form_id: string;
+  version: number;
   sections: FormOverviewSection[];
   progress: FormSchemaResponse["progress"];
 }
 
 export interface FormSectionResponse {
   form_id: string;
+  version: number;
   section: FormSection;
   answers: FormSchemaResponse["answers"];
   progress: FormSchemaResponse["progress"];

src/hooks/marriage/use-section-data.ts

@@ -25,10 +25,11 @@ type AnswersPayloadItem = {
 
 async function patchAnswers(
   answersPayload: AnswersPayloadItem[],
+  version?: number,
 ): Promise<ProfileAnswersPatchResult> {
   const response = await http.patch<ProfileAnswersPatchResult>(
     ANSWERS_ENDPOINT,
-    { answers: answersPayload },
+    { answers: answersPayload, version },
   );
   return response.data;
 }
@@ -43,7 +44,7 @@ export async function updateMarriageSectionData(
     option_id: f.option_id || undefined,
   }));
 
-  const data = await patchAnswers(answersPayload);
+  const data = await patchAnswers(answersPayload, payload.version);
 
   const prog = data.affected_sections[slug] ||
     data.progress.sections_progress[slug] || {
@@ -204,6 +205,7 @@ export function useMarriageSectionDataQuery(
             data: fields,
             ...progress,
             updated_at: null,
+            version: query.data.version,
           };
         })()
       : undefined,