feat: add QuestionCheckbox component for handling multiple choice questions with "Doesn't matter" option

2 months ago · c14d577aa0
21 changed files with 2206 additions and 466 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Amiri } from "next/font/google";
 import localFont from "next/font/local";
+import Script from "next/script";
 import DevClickToComponent from "@/components/dev/dev-click-to-component";
 import Providers from "./providers";
 import "./globals.css";
@ -31,7 +32,9 @@ export default function RootLayout({
  return (
    <html lang="en">
      <head>
-        <script
+        <Script
+          id="flutter-response-init"
+          strategy="beforeInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              if (typeof window !== 'undefined') {
--- a/src/app/questions-list/[slug]/question-detail-client.tsx
+++ b/src/app/questions-list/[slug]/question-detail-client.tsx
@ -2,8 +2,12 @@

 import { useRouter } from "next/navigation";
 import { useEffect, useMemo } from "react";
-import { QuestionAnswersProvider } from "@/components/questions/question-answer-storage";
+import {
+  QuestionAnswersProvider,
+  useQuestionAnswers,
+} from "@/components/questions/question-answer-storage";
 import QuestionButton from "@/components/questions/question-button";
+import { QuestionCheckbox } from "@/components/questions/question-checkbox";
 import QuestionDate from "@/components/questions/question-date";
 import QuestionDropdown from "@/components/questions/question-dropdown";
 import QuestionExitNavigationButton from "@/components/questions/question-exit-navigation-button";
@ -127,6 +131,7 @@ function getStoredAge() {
 function renderQuestion(
  question: QuestionField,
  questionIndex: number,
+  disabled?: boolean,
  dobQuestion?: QuestionField,
  dobQuestionIndex?: number,
 ) {
@ -136,8 +141,25 @@ function renderQuestion(
      question.title.toLowerCase().includes("email") ||
      question.title.toLowerCase().includes("city") ||
      question.title.toLowerCase().includes("residence") ||
-      question.title.toLowerCase().includes("location")) &&
-    !question.title.toLowerCase().includes("describe") &&
+      question.title.toLowerCase().includes("location") ||
+      question.title.toLowerCase().includes("description") ||
+      question.title.toLowerCase().includes("short") ||
+      question.title.toLowerCase().includes("duration") ||
+      question.title.toLowerCase().includes("reason") ||
+       question.title.toLowerCase().includes("lifestyle") ||
+      question.title.toLowerCase().includes("marja") ||
+      question.title.toLowerCase().includes("range") ||
+      question.title.toLowerCase().includes("ethnicity") ||
+      question.title.toLowerCase().includes("nationality") ||
+      question.title.toLowerCase().includes("مدت") ||
+      question.title.toLowerCase().includes("علت") ||
+      question.title.toLowerCase().includes("بازه") ||
+      question.title.toLowerCase().includes("قومیت") ||
+      question.title.toLowerCase().includes("ملیت") ||
+      question.title.toLowerCase().includes("کوتاه") ||
+      question.title.toLowerCase().includes("سبک زندگی") ||
+      question.title.toLowerCase().includes("مرجع")) &&
+    !question.title.toLowerCase().includes("detailed") &&
    !question.title.toLowerCase().includes("biography")
      ? "h-[54px] min-h-0 py-2"
      : undefined;
@ -145,16 +167,44 @@ function renderQuestion(
  switch (question.type) {
    case "button":
      return (
-        <QuestionButton question={question} questionIndex={questionIndex} />
+        <QuestionButton
+          question={question}
+          questionIndex={questionIndex}
+          disabled={disabled}
+        />
+      );
+    case "checkbox":
+      return (
+        <QuestionCheckbox
+          question={question}
+          questionIndex={questionIndex}
+          disabled={disabled}
+        />
      );
    case "date":
-      return <QuestionDate question={question} questionIndex={questionIndex} />;
+      return (
+        <QuestionDate
+          question={question}
+          questionIndex={questionIndex}
+          disabled={disabled}
+        />
+      );
    case "dropdown":
      return (
-        <QuestionDropdown question={question} questionIndex={questionIndex} />
+        <QuestionDropdown
+          question={question}
+          questionIndex={questionIndex}
+          disabled={disabled}
+        />
      );
    case "file":
-      return <QuestionFile question={question} questionIndex={questionIndex} />;
+      return (
+        <QuestionFile
+          question={question}
+          questionIndex={questionIndex}
+          disabled={disabled}
+        />
+      );
    case "number":
      if (
        question.title === "Age" &&
@ -167,28 +217,49 @@ function renderQuestion(
            questionIndex={questionIndex}
            derivedFromQuestion={dobQuestion}
            derivedFromQuestionIndex={dobQuestionIndex}
+            disabled={disabled}
          />
        );
      }

      return (
-        <QuestionNumber question={question} questionIndex={questionIndex} />
+        <QuestionNumber
+          question={question}
+          questionIndex={questionIndex}
+          disabled={disabled}
+        />
      );
    case "phone":
      return (
-        <QuestionPhone question={question} questionIndex={questionIndex} />
+        <QuestionPhone
+          question={question}
+          questionIndex={questionIndex}
+          disabled={disabled}
+        />
      );
    case "photo":
      return (
-        <QuestionPhoto question={question} questionIndex={questionIndex} />
+        <QuestionPhoto
+          question={question}
+          questionIndex={questionIndex}
+          disabled={disabled}
+        />
      );
    case "radio":
      return (
-        <QuestionRadio question={question} questionIndex={questionIndex} />
+        <QuestionRadio
+          question={question}
+          questionIndex={questionIndex}
+          disabled={disabled}
+        />
      );
    case "slider":
      return (
-        <QuestionSlider question={question} questionIndex={questionIndex} />
+        <QuestionSlider
+          question={question}
+          questionIndex={questionIndex}
+          disabled={disabled}
+        />
      );
    case "text":
      return (
@ -196,6 +267,7 @@ function renderQuestion(
          question={question}
          questionIndex={questionIndex}
          heightClassName={compactTextHeight}
+          disabled={disabled}
        />
      );
    default:
@ -203,6 +275,70 @@ function renderQuestion(
  }
 }

+function QuestionFlowWrapper({
+  visibleQuestions,
+  itemSlug,
+  dobQuestion,
+  dobQuestionIndex,
+  requiredQuestionsCount,
+  continueLabel,
+  questionsListHref,
+}: {
+  visibleQuestions: QuestionField[];
+  itemSlug: string;
+  dobQuestion?: QuestionField;
+  dobQuestionIndex?: number;
+  requiredQuestionsCount: number;
+  continueLabel: string;
+  questionsListHref: string;
+}) {
+  const { getAnswerValue } = useQuestionAnswers();
+
+  return (
+    <QuestionSectionFlow
+      key={itemSlug}
+      total={requiredQuestionsCount}
+      continueLabel={continueLabel}
+      exitHref={questionsListHref}
+    >
+      {visibleQuestions.map((question, questionIndex) => {
+        let isDisabled = false;
+
+        if (question.logic?.dependsOn) {
+          const { title, values } = question.logic.dependsOn;
+          const dependentQuestionIndex = visibleQuestions.findIndex(
+            (q) => q.title === title,
+          );
+
+          if (dependentQuestionIndex !== -1) {
+            const answer = getAnswerValue(
+              visibleQuestions[dependentQuestionIndex],
+              dependentQuestionIndex,
+            );
+            isDisabled = !values.includes(String(answer));
+          }
+        }
+
+        return (
+          <div
+            key={`${itemSlug}-${question.title}`}
+            data-question-required={String(question.required)}
+            data-question-disabled={String(isDisabled)}
+          >
+            {renderQuestion(
+              question,
+              questionIndex,
+              isDisabled,
+              dobQuestion,
+              dobQuestionIndex,
+            )}
+          </div>
+        );
+      })}
+    </QuestionSectionFlow>
+  );
+}
+
 export default function QuestionDetailClient({
  closeLabel,
  continueLabel,
@ -298,26 +434,15 @@ export default function QuestionDetailClient({
          </StickyHeader>

          <div className="mx-auto flex w-full max-w-md flex-col px-[17px] pt-7">
-            <QuestionSectionFlow
-              key={item.slug}
-              total={requiredQuestionsCount}
+            <QuestionFlowWrapper
+              visibleQuestions={visibleQuestions}
+              itemSlug={item.slug}
+              dobQuestion={dobQuestion}
+              dobQuestionIndex={dobQuestionIndex}
+              requiredQuestionsCount={requiredQuestionsCount}
              continueLabel={continueLabel}
-              exitHref={questionsListHref}
-            >
-              {visibleQuestions.map((question, questionIndex) => (
-                <div
-                  key={`${item.slug}-${question.title}`}
-                  data-question-required={String(question.required)}
-                >
-                  {renderQuestion(
-                    question,
-                    questionIndex,
-                    dobQuestion,
-                    dobQuestionIndex,
-                  )}
-                </div>
-              ))}
-            </QuestionSectionFlow>
+              questionsListHref={questionsListHref}
+            />
          </div>
        </main>
      </QuestionAnswersProvider>
--- a/src/components/questions/question-button.tsx
+++ b/src/components/questions/question-button.tsx
@ -8,11 +8,13 @@ import QuestionTitle from "./question-title";
 type QuestionButtonProps = {
  question: QuestionField;
  questionIndex: number;
+  disabled?: boolean;
 };

 export function QuestionButton({
  question,
  questionIndex,
+  disabled,
 }: QuestionButtonProps) {
  const { setValue, value } = useQuestionAnswer(question, questionIndex);
  const isAnswered = value === true;
@ -21,7 +23,10 @@ export function QuestionButton({
    <div
      data-question-answered={isAnswered ? "true" : undefined}
      data-question-type={question.type}
-      className="space-y-3"
+      className={[
+        "space-y-3 transition-opacity duration-200",
+        disabled ? "pointer-events-none opacity-30" : "",
+      ].join(" ")}
    >
      <div className="flex items-center gap-2">
        <QuestionTitle question={question} />
@ -35,6 +40,7 @@ export function QuestionButton({
      </div>
      <button
        type="button"
+        disabled={disabled}
        onClick={() => setValue(true)}
        className="min-h-[50px] rounded-[15px] bg-[#181818] px-5 py-3 text-[15px] font-semibold text-white"
      >
--- a/src/components/questions/question-checkbox.tsx
+++ b/src/components/questions/question-checkbox.tsx
@ -0,0 +1,96 @@
+"use client";
+
+import { useId } from "react";
+import type { QuestionField } from "@/data/question-data";
+import { useQuestionAnswers } from "./question-answer-storage";
+import QuestionTitle from "./question-title";
+
+type QuestionCheckboxProps = {
+  question: QuestionField;
+  questionIndex: number;
+  disabled?: boolean;
+};
+
+export function QuestionCheckbox({
+  question,
+  questionIndex,
+  disabled,
+}: QuestionCheckboxProps) {
+  const groupId = useId();
+  const options = question.extras.options;
+  const { getAnswerValue, setAnswerValue } = useQuestionAnswers();
+  const rawValue = getAnswerValue(question, questionIndex);
+  
+  // Ensure value is an array
+  const value = Array.isArray(rawValue) ? rawValue : (rawValue ? [String(rawValue)] : []);
+
+  if (options.length === 0) {
+    return null;
+  }
+
+  const toggleOption = (option: string) => {
+    let nextValue: string[];
+    if (value.includes(option)) {
+      nextValue = value.filter((v) => v !== option);
+    } else {
+      nextValue = [...value, option];
+    }
+    
+    // Handle "Doesn't matter" (مهم نیست) logic if it exists
+    const doesnMatterOption = options.find(o => o.includes("مهم نیست") || o.includes("Doesn't matter"));
+    if (doesnMatterOption) {
+      if (option === doesnMatterOption) {
+        // If "Doesn't matter" is selected, clear everything else
+        nextValue = [doesnMatterOption];
+      } else if (nextValue.includes(doesnMatterOption)) {
+        // If something else is selected, remove "Doesn't matter"
+        nextValue = nextValue.filter(v => v !== doesnMatterOption);
+      }
+    }
+
+    setAnswerValue(question, questionIndex, nextValue.length > 0 ? nextValue : null);
+  };
+
+  return (
+    <div
+      className={[
+        "flex w-full flex-col gap-3 transition-opacity duration-200",
+        disabled ? "pointer-events-none opacity-30" : "",
+      ].join(" ")}
+    >
+      <QuestionTitle question={question} />
+      <div className="flex flex-col gap-3">
+        {options.map((option) => {
+          const optionId = `checkbox-${questionIndex}-${option}`;
+          const isSelected = value.includes(option);
+
+          return (
+            <label
+              key={option}
+              htmlFor={optionId}
+              className={[
+                "w-full cursor-pointer rounded-[12px] px-4 py-3.5",
+                "text-start text-[13px] leading-tight font-semibold transition-all duration-200",
+                isSelected
+                  ? "bg-[#F0445B] text-white shadow-[0_8px_20px_rgba(240,68,91,0.25)]"
+                  : "bg-[#F5F5F5] text-[#181818] hover:bg-[#EBEBEB]",
+              ].join(" ")}
+            >
+              <input
+                type="checkbox"
+                id={optionId}
+                checked={isSelected}
+                disabled={disabled}
+                onChange={() => toggleOption(option)}
+                className="sr-only"
+              />
+              {option}
+            </label>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default QuestionCheckbox;
--- a/src/components/questions/question-date.tsx
+++ b/src/components/questions/question-date.tsx
@ -1,33 +1,40 @@
 "use client";

 import type { QuestionField } from "@/data/question-data";
-import { useQuestionAnswer } from "./question-answer-storage";
+import { useQuestionAnswers } from "./question-answer-storage";
 import QuestionTitle from "./question-title";

 type QuestionDateProps = {
  question: QuestionField;
  questionIndex: number;
+  disabled?: boolean;
 };

-export function QuestionDate({ question, questionIndex }: QuestionDateProps) {
-  const { setValue, value } = useQuestionAnswer(question, questionIndex);
+export function QuestionDate({
+  question,
+  questionIndex,
+  disabled,
+}: QuestionDateProps) {
+  const { getAnswerValue, setAnswerValue } = useQuestionAnswers();
+  const value = getAnswerValue(question, questionIndex);
  const dateValue = typeof value === "string" ? value : "";

  return (
-    <label data-question-type={question.type} className="block space-y-3">
+    <div
+      className={[
+        "flex w-full flex-col gap-2 transition-opacity duration-200",
+        disabled ? "pointer-events-none opacity-30" : "",
+      ].join(" ")}
+    >
      <QuestionTitle question={question} />
      <input
        type="date"
-        required={question.required}
        value={dateValue}
-        onChange={(event) => {
-          const nextValue = event.target.value;
-
-          setValue(nextValue.length > 0 ? nextValue : null);
-        }}
+        onChange={(event) => setAnswerValue(question, questionIndex, event.target.value)}
+        disabled={disabled}
        className="h-[54px] w-full rounded-[15px] border border-[#E7D8D5] bg-white px-4 text-[15px] text-[#181818] outline-none focus:border-[#6F6F6F]"
      />
-    </label>
+    </div>
  );
 }

--- a/src/components/questions/question-dropdown.tsx
+++ b/src/components/questions/question-dropdown.tsx
@ -1,32 +1,36 @@
 "use client";

 import type { QuestionField } from "@/data/question-data";
-import { useQuestionAnswer } from "./question-answer-storage";
+import { useQuestionAnswers } from "./question-answer-storage";
 import QuestionTitle from "./question-title";

 type QuestionDropdownProps = {
  question: QuestionField;
  questionIndex: number;
+  disabled?: boolean;
 };

 export function QuestionDropdown({
  question,
  questionIndex,
+  disabled,
 }: QuestionDropdownProps) {
-  const { setValue, value } = useQuestionAnswer(question, questionIndex);
+  const { getAnswerValue, setAnswerValue } = useQuestionAnswers();
+  const value = getAnswerValue(question, questionIndex);
  const selectValue = typeof value === "string" ? value : "";

  return (
-    <label data-question-type={question.type} className="block space-y-3">
+    <div
+      className={[
+        "flex w-full flex-col gap-2 transition-opacity duration-200",
+        disabled ? "pointer-events-none opacity-30" : "",
+      ].join(" ")}
+    >
      <QuestionTitle question={question} />
      <select
-        required={question.required}
        value={selectValue}
-        onChange={(event) => {
-          const nextValue = event.target.value;
-
-          setValue(nextValue.length > 0 ? nextValue : null);
-        }}
+        onChange={(event) => setAnswerValue(question, questionIndex, event.target.value)}
+        disabled={disabled}
        className="h-[54px] w-full rounded-[15px] border border-[#E7D8D5] bg-white px-4 text-[15px] text-[#181818] outline-none focus:border-[#6F6F6F]"
      >
        <option value="" disabled>
@ -38,7 +42,7 @@ export function QuestionDropdown({
          </option>
        ))}
      </select>
-    </label>
+    </div>
  );
 }

--- a/src/components/questions/question-file.tsx
+++ b/src/components/questions/question-file.tsx
@ -4,26 +4,31 @@ import Image from "next/image";
 import { useState } from "react";
 import type { QuestionField } from "@/data/question-data";
 import { useUploadTmpMediaMutation } from "@/hooks/marriage/use-upload-tmp-media";
-import { useQuestionAnswer } from "./question-answer-storage";
+import { useQuestionAnswers } from "./question-answer-storage";
 import QuestionTitle from "./question-title";

 type QuestionFileProps = {
  question: QuestionField;
  questionIndex: number;
+  disabled?: boolean;
 };

-export function QuestionFile({ question, questionIndex }: QuestionFileProps) {
+export function QuestionFile({
+  question,
+  questionIndex,
+  disabled,
+}: QuestionFileProps) {
  const [selectedFileName, setSelectedFileName] = useState<string | null>(null);
  const acceptedFiles = question.extras.options
    .map((option) => option.replace(/^\./, ""))
    .join(", ");
-  const { setValue } = useQuestionAnswer(question, questionIndex);
+  const { setAnswerValue } = useQuestionAnswers();
  const uploadTmpMediaMutation = useUploadTmpMediaMutation({
    onSuccess: (response) => {
-      setValue(response.path);
+      setAnswerValue(question, questionIndex, response.path);
    },
    onError: () => {
-      setValue(null);
+      setAnswerValue(question, questionIndex, null);
    },
  });

@ -32,7 +37,7 @@ export function QuestionFile({ question, questionIndex }: QuestionFileProps) {

    if (!file) {
      setSelectedFileName(null);
-      setValue(null);
+      setAnswerValue(question, questionIndex, null);
      return;
    }

@ -41,14 +46,18 @@ export function QuestionFile({ question, questionIndex }: QuestionFileProps) {
  }

  return (
-    <label data-question-type={question.type} className="block space-y-3">
+    <div
+      className={[
+        "flex w-full flex-col gap-2 transition-opacity duration-200",
+        disabled ? "pointer-events-none opacity-30" : "",
+      ].join(" ")}
+    >
      <QuestionTitle question={question} />
      <span className="relative flex aspect-[727/330] min-h-[156px] w-full cursor-pointer flex-col items-center justify-center rounded-[29px] border-2 border-dashed border-[#8D8D8D] bg-[#F7F7F7] text-center transition-colors duration-200 focus-within:outline-2 focus-within:outline-offset-4 focus-within:outline-[#6F6F6F] hover:border-[#777777]">
        <input
          type="file"
-          required={question.required}
          accept={question.extras.options.join(",")}
-          disabled={uploadTmpMediaMutation.isPending}
+          disabled={disabled || uploadTmpMediaMutation.isPending}
          onChange={(event) => handleFileChange(event.target.files)}
          className="absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0"
        />
@ -73,7 +82,7 @@ export function QuestionFile({ question, questionIndex }: QuestionFileProps) {
          </span>
        ) : null}
      </span>
-    </label>
+    </div>
  );
 }

--- a/src/components/questions/question-number.tsx
+++ b/src/components/questions/question-number.tsx
@ -1,76 +1,80 @@
 "use client";

-import { useI18n } from "@/i18n/provider";
+import { useMemo, useEffect } from "react";
 import type { QuestionField } from "@/data/question-data";
-import { useQuestionAnswer } from "./question-answer-storage";
+import { useQuestionAnswers } from "./question-answer-storage";
 import QuestionTitle from "./question-title";
+import { useI18n } from "@/i18n/provider";

 type QuestionNumberProps = {
  question: QuestionField;
  questionIndex: number;
  disabled?: boolean;
-  valueOverride?: string;
  derivedFromQuestion?: QuestionField;
  derivedFromQuestionIndex?: number;
 };

-export function QuestionNumber({
+export default function QuestionNumber({
  question,
  questionIndex,
-  disabled = false,
-  valueOverride,
+  disabled,
  derivedFromQuestion,
  derivedFromQuestionIndex,
 }: QuestionNumberProps) {
-  const { dictionary } = useI18n();
+  const { dictionary: t } = useI18n();
+  const { getAnswerValue, setAnswerValue } = useQuestionAnswers();
+  const value = getAnswerValue(question, questionIndex);
+  
+  const derivedValue =
+    derivedFromQuestion && derivedFromQuestionIndex !== undefined
+      ? getAnswerValue(derivedFromQuestion, derivedFromQuestionIndex)
+      : null;
+
+  useEffect(() => {
+    if (derivedFromQuestion && typeof derivedValue === "string") {
+      const age = calculateAge(derivedValue);
+      if (age !== String(value)) {
+        setAnswerValue(question, questionIndex, age);
+      }
+    }
+  }, [derivedFromQuestion, derivedValue, question, questionIndex, setAnswerValue, value]);
+
  const [min, max] = question.extras.range;
-  const { setValue, value } = useQuestionAnswer(question, questionIndex);
-  const derivedAnswer = useQuestionAnswer(
-    derivedFromQuestion ?? question,
-    derivedFromQuestionIndex ?? questionIndex,
-  ).value;
-  const derivedDateValue =
-    question.title === "Age" && typeof derivedAnswer === "string"
-      ? calculateAge(derivedAnswer)
-      : undefined;
-  const inputValue =
-    valueOverride ??
-    derivedDateValue ??
-    (typeof value === "number" || typeof value === "string"
-      ? String(value)
-      : "");
  
-  const numericValue = Number.parseFloat(inputValue);
-  const isOutOfRange =
-    !Number.isNaN(numericValue) &&
-    ((min > 0 && numericValue < min) || (max > 0 && numericValue > max));
+  const numValue = typeof value === "number" ? value : (typeof value === "string" ? parseFloat(value) : NaN);
+  const isOutOfRange = useMemo(() => {
+    if (Number.isNaN(numValue)) return false;
+    if (min !== 0 && numValue < min) return true;
+    if (max !== 0 && numValue > max) return true;
+    return false;
+  }, [numValue, min, max]);
+
+  const inputValue = value === null ? "" : String(value);

  return (
-    <label data-question-type={question.type} className="block space-y-3">
+    <div
+      className={[
+        "flex w-full flex-col gap-2 transition-opacity duration-200",
+        disabled ? "pointer-events-none opacity-30" : "",
+      ].join(" ")}
+    >
      <QuestionTitle question={question} />
      <input
        type="number"
-        required={question.required}
-        disabled={disabled || question.title === "Age"}
+        required={question.required && !disabled}
+        disabled={disabled || Boolean(derivedFromQuestion)}
        min={min || undefined}
        max={max || undefined}
        placeholder={question.extras.placeHolder}
        value={inputValue}
        onChange={(event) => {
-          if (disabled) {
-            return;
-          }
-
          const nextValue = event.target.value;
-
-          if (nextValue.length === 0) {
-            setValue(null);
-            return;
+          if (nextValue === "") {
+            setAnswerValue(question, questionIndex, null);
+          } else {
+            const parsed = parseFloat(nextValue);
+            setAnswerValue(question, questionIndex, Number.isNaN(parsed) ? nextValue : parsed);
          }
-
-          const parsedValue = event.target.valueAsNumber;
-
-          setValue(Number.isNaN(parsedValue) ? nextValue : parsedValue);
        }}
        className={[
          "h-[54px] w-full rounded-[15px] border px-4 text-[15px] text-[#181818] outline-none placeholder:text-[#9D8F8C] focus:border-[#6F6F6F] disabled:bg-[#F5F2F1] disabled:text-[#7C7472]",
@ -79,10 +83,10 @@ export function QuestionNumber({
      />
      {isOutOfRange ? (
        <span className="block text-[10px] font-semibold text-[#F2465F]">
-          {dictionary.common.rangeError}
+          {t.common.rangeError || `Please enter a value between ${min} and ${max}`}
        </span>
      ) : null}
-    </label>
+    </div>
  );
 }

@ -106,5 +110,3 @@ function calculateAge(dateOfBirth: string) {

  return String(Math.max(age, 0));
 }
-
-export default QuestionNumber;
--- a/src/components/questions/question-phone.tsx
+++ b/src/components/questions/question-phone.tsx
@ -4,13 +4,14 @@ import { useEffect, useRef, useState } from "react";
 import { PhoneNumberFormat, PhoneNumberUtil } from "google-libphonenumber";
 import type { QuestionField } from "@/data/question-data";
 import type { MarriagePhoneFieldValue } from "@/hooks/marriage/types";
-import { useQuestionAnswer } from "./question-answer-storage";
+import { useQuestionAnswers } from "./question-answer-storage";
 import QuestionTitle from "./question-title";

 type QuestionPhoneProps = {
  question: QuestionField;
  questionIndex: number;
  countryCode?: string;
+  disabled?: boolean;
 };

 type PhoneValueParts = {
@ -192,8 +193,10 @@ export function QuestionPhone({
  question,
  questionIndex,
  countryCode = "+98",
+  disabled,
 }: QuestionPhoneProps) {
-  const { setValue, value } = useQuestionAnswer(question, questionIndex);
+  const { getAnswerValue, setAnswerValue } = useQuestionAnswers();
+  const value = getAnswerValue(question, questionIndex);
  const defaultCodeValue = countryCode.trim() || "+98";
  const initialValue = readPhoneValue(value, defaultCodeValue);
  const [codeValue, setCodeValue] = useState(initialValue.codeValue);
@ -235,14 +238,17 @@ export function QuestionPhone({
          : null;

    lastCommittedValueRef.current = nextValue;
-    setValue(nextValue);
+    setAnswerValue(question, questionIndex, nextValue);
  };

  return (
-    <label
+    <div
      data-question-answered={isAnswered ? "true" : "false"}
      data-question-type={question.type}
-      className="block space-y-3"
+      className={[
+        "flex w-full flex-col gap-2 transition-opacity duration-200",
+        disabled ? "pointer-events-none opacity-30" : "",
+      ].join(" ")}
    >
      <QuestionTitle question={question} />
      <div
@ -258,7 +264,7 @@ export function QuestionPhone({
            inputMode="tel"
            aria-label="Country code"
            maxLength={4}
-            required={question.required}
+            disabled={disabled}
            placeholder={defaultCodeValue}
            value={codeValue}
            onChange={(event) => {
@ -275,7 +281,7 @@ export function QuestionPhone({
          <input
            type="tel"
            inputMode="tel"
-            required={question.required}
+            disabled={disabled}
            placeholder={question.extras.placeHolder?.replace(/^\+\d+\s*/, "")}
            value={phoneValue}
            onChange={(event) => {
@ -294,7 +300,7 @@ export function QuestionPhone({
          Enter a valid phone number with country code.
        </span>
      ) : null}
-    </label>
+    </div>
  );
 }

--- a/src/components/questions/question-photo.tsx
+++ b/src/components/questions/question-photo.tsx
@ -3,12 +3,13 @@
 import Image from "next/image";
 import type { ReactNode } from "react";
 import type { QuestionField } from "@/data/question-data";
-import { useQuestionAnswer } from "./question-answer-storage";
+import { useQuestionAnswers } from "./question-answer-storage";

 type QuestionPhotoProps = {
  question: QuestionField;
  questionIndex: number;
  description?: ReactNode;
+  disabled?: boolean;
 };

 function getFileInputValue(files: FileList | null) {
@ -21,23 +22,31 @@ export function QuestionPhoto({
  question,
  questionIndex,
  description,
+  disabled,
 }: QuestionPhotoProps) {
  const acceptedFiles = question.extras.options.join(",");
  const descriptionContent = description ?? question.description;
-  const { setValue } = useQuestionAnswer(question, questionIndex);
+  const { setAnswerValue } = useQuestionAnswers();

  return (
-    <label
-      data-question-type={question.type}
-      className="block cursor-pointer text-center"
+    <div
+      className={[
+        "flex w-full flex-col items-center text-center transition-opacity duration-200",
+        disabled ? "pointer-events-none opacity-30" : "",
+      ].join(" ")}
    >
      <input
        type="file"
-        required={question.required}
        accept={acceptedFiles}
-        onChange={(event) => setValue(getFileInputValue(event.target.files))}
+        onChange={(event) => setAnswerValue(question, questionIndex, getFileInputValue(event.target.files))}
+        disabled={disabled}
        className="sr-only"
+        id={`photo-input-${questionIndex}`}
      />
+      <label
+        htmlFor={`photo-input-${questionIndex}`}
+        className="flex w-full cursor-pointer flex-col items-center"
+      >
      <span className="flex w-full flex-col items-center">
        <Image
          src="/assets/images/Frame 2095586679.svg"
@ -60,6 +69,7 @@ export function QuestionPhoto({
        ) : null}
      </span>
      </label>
+    </div>
  );
 }

--- a/src/components/questions/question-progress-tracker.tsx
+++ b/src/components/questions/question-progress-tracker.tsx
@ -47,10 +47,11 @@ function isQuestionAnswered(question: Element) {

 export function QuestionProgressTracker({
  children,
-  total,
+  total: initialTotal,
 }: QuestionProgressTrackerProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [answered, setAnswered] = useState(0);
+  const [total, setTotal] = useState(initialTotal);
  const safeTotal = Math.max(total, 0);
  const progress = safeTotal > 0 ? (answered / safeTotal) * 100 : 0;

@ -61,13 +62,16 @@ export function QuestionProgressTracker({
      return;
    }

-    const questions = Array.from(
-      container.querySelectorAll("[data-question-type]"),
-    ).filter((el) => el.getAttribute("data-question-required") === "true");
-    const nextAnswered = questions.filter(isQuestionAnswered).length;
+    const requiredQuestions = Array.from(
+      container.querySelectorAll("[data-question-required='true']"),
+    ).filter((el) => el.getAttribute("data-question-disabled") !== "true");

-    setAnswered(Math.min(nextAnswered, safeTotal));
-  }, [safeTotal]);
+    const nextTotal = requiredQuestions.length;
+    const nextAnswered = requiredQuestions.filter(isQuestionAnswered).length;
+
+    setTotal(nextTotal);
+    setAnswered(nextAnswered);
+  }, []);

  useEffect(() => {
    const container = containerRef.current;
--- a/src/components/questions/question-radio.tsx
+++ b/src/components/questions/question-radio.tsx
@ -3,62 +3,70 @@
 import { useId } from "react";

 import type { QuestionField } from "@/data/question-data";
-import { useQuestionAnswer } from "./question-answer-storage";
+import { useQuestionAnswers } from "./question-answer-storage";
 import QuestionTitle from "./question-title";

 type QuestionRadioProps = {
  question: QuestionField;
  questionIndex: number;
+  disabled?: boolean;
 };

-export function QuestionRadio({ question, questionIndex }: QuestionRadioProps) {
+export function QuestionRadio({
+  question,
+  questionIndex,
+  disabled,
+}: QuestionRadioProps) {
  const groupId = useId();
  const options = question.extras.options;
-  const { setValue, value } = useQuestionAnswer(question, questionIndex);
-  const selectedOption = typeof value === "string" ? value : undefined;
+  const { getAnswerValue, setAnswerValue } = useQuestionAnswers();
+  const value = getAnswerValue(question, questionIndex);

-  if (options.length === 0) {
+  if (question.extras.options.length === 0) {
    return null;
  }

  return (
-    <fieldset data-question-type={question.type} className="space-y-7">
-      <legend>
+    <div
+      className={[
+        "flex w-full flex-col gap-3 transition-opacity duration-200",
+        disabled ? "pointer-events-none opacity-30" : "",
+      ].join(" ")}
+    >
      <QuestionTitle question={question} />
-      </legend>
-
-      <div className="flex flex-wrap gap-x-5 gap-y-4">
-        {options.map((option) => {
-          const optionId = `${groupId}-${option}`;
-          const isSelected = selectedOption === option;
+      <div className="flex flex-col gap-3">
+        {question.extras.options.map((option) => {
+          const optionId = `question-${questionIndex}-${option}`;
+          const isSelected = String(value) === option;

          return (
            <label
              key={option}
              htmlFor={optionId}
              className={[
-                "cursor-pointer rounded-[10px] px-3.5 py-2",
-                "text-center leading-none font-semibold transition-colors",
+                "w-full cursor-pointer rounded-[12px] px-4 py-3.5",
+                "text-start text-[13px] leading-tight font-semibold transition-all duration-200",
                isSelected
-                  ? "bg-[#F0445B] text-white"
-                  : "bg-[#DBDBDB] text-[#181818]",
+                  ? "bg-[#F0445B] text-white shadow-[0_8px_20px_rgba(240,68,91,0.25)]"
+                  : "bg-[#F5F5F5] text-[#181818] hover:bg-[#EBEBEB]",
              ].join(" ")}
            >
              <input
-                id={optionId}
-                className="sr-only"
                type="radio"
-                name={groupId}
+                id={optionId}
+                name={`question-${questionIndex}`}
                value={option}
                checked={isSelected}
-                onChange={() => setValue(option)}
+                disabled={disabled}
+                onChange={() => setAnswerValue(question, questionIndex, option)}
+                className="sr-only"
              />
              {option}
            </label>
          );
        })}
      </div>
-    </fieldset>
+    </div>
  );
 }

--- a/src/components/questions/question-slider.tsx
+++ b/src/components/questions/question-slider.tsx
@ -2,24 +2,24 @@

 import { useLayoutEffect, useRef, useState } from "react";
 import type { QuestionField } from "@/data/question-data";
-import { useQuestionAnswer } from "./question-answer-storage";
+import { useQuestionAnswers } from "./question-answer-storage";
 import QuestionTitle from "./question-title";

 type QuestionSliderProps = {
  question: QuestionField;
  questionIndex: number;
+  disabled?: boolean;
 };

 export function QuestionSlider({
  question,
  questionIndex,
+  disabled,
 }: QuestionSliderProps) {
  const [min, max] = question.extras.range;
  const initialValue = Math.round((min + max) / 2);
-  const { setValue, value: storedValue } = useQuestionAnswer(
-    question,
-    questionIndex,
-  );
+  const { getAnswerValue, setAnswerValue } = useQuestionAnswers();
+  const storedValue = getAnswerValue(question, questionIndex);
  const value = typeof storedValue === "number" ? storedValue : initialValue;
  const progress = max === min ? 0 : ((value - min) / (max - min)) * 100;
  const sliderWrapperRef = useRef<HTMLDivElement>(null);
@ -67,7 +67,12 @@ export function QuestionSlider({
  }, [progress]);

  return (
-    <label data-question-type={question.type} className="block space-y-6">
+    <div
+      className={[
+        "flex w-full flex-col gap-6 transition-opacity duration-200",
+        disabled ? "pointer-events-none opacity-30" : "",
+      ].join(" ")}
+    >
      <QuestionTitle question={question} />
      <div className="pt-9">
        <div ref={sliderWrapperRef} className="relative">
@ -80,12 +85,12 @@ export function QuestionSlider({
          <input
            ref={sliderRef}
            type="range"
-            required={question.required}
            min={min}
            max={max}
            step={1}
            value={value}
-            onChange={(event) => setValue(Number(event.target.value))}
+            onChange={(event) => setAnswerValue(question, questionIndex, Number(event.target.value))}
+            disabled={disabled}
            className="question-slider-range w-full"
            style={{
              background: `linear-gradient(to right, #F43F5E 0%, #F43F5E ${progress}%, #FAD1D8 ${progress}%, #FAD1D8 100%)`,
@ -98,7 +103,7 @@ export function QuestionSlider({
          ))}
        </div>
      </div>
-    </label>
+    </div>
  );
 }

--- a/src/components/questions/question-snap-list.tsx
+++ b/src/components/questions/question-snap-list.tsx
@ -13,7 +13,7 @@ import {
 const WHEEL_GESTURE_IDLE_MS = 320;
 const TOUCH_MIN_DISTANCE = 8;
 const AUTO_FOCUS_SELECTOR = [
-  'textarea:not([disabled])',
+  "textarea:not([disabled])",
  'input[type="text"]:not([disabled])',
  'input[type="number"]:not([disabled])',
 ].join(", ");
@ -88,7 +88,10 @@ export function QuestionSnapList({

      const valueLength = firstFocusableInput.value.length;

-      if (valueLength > 0 && typeof firstFocusableInput.setSelectionRange === "function") {
+      if (
+        valueLength > 0 &&
+        typeof firstFocusableInput.setSelectionRange === "function"
+      ) {
        firstFocusableInput.setSelectionRange(valueLength, valueLength);
      }
    });
--- a/src/components/questions/question-text.tsx
+++ b/src/components/questions/question-text.tsx
@ -1,47 +1,51 @@
 "use client";

 import type { QuestionField } from "@/data/question-data";
-import { useQuestionAnswer } from "./question-answer-storage";
+import { useQuestionAnswers } from "./question-answer-storage";
 import QuestionTitle from "./question-title";

 type QuestionTextProps = {
  question: QuestionField;
  questionIndex: number;
  description?: string;
+  disabled?: boolean;
  heightClassName?: string;
 };

-export function QuestionText({
+export default function QuestionText({
  question,
  questionIndex,
  description,
-  heightClassName = "min-h-[116px]",
+  disabled,
+  heightClassName,
 }: QuestionTextProps) {
-  const { setValue, value } = useQuestionAnswer(question, questionIndex);
-  const textValue = typeof value === "string" ? value : "";
+  const { getAnswerValue, setAnswerValue } = useQuestionAnswers();
+  const value = getAnswerValue(question, questionIndex);

  return (
-    <label data-question-type={question.type} className="block space-y-3">
+    <div
+      className={[
+        "flex w-full flex-col gap-2 transition-opacity duration-200",
+        disabled ? "pointer-events-none opacity-30" : "",
+      ].join(" ")}
+    >
      <QuestionTitle question={question} />
-      <textarea
-        required={question.required}
-        rows={1}
+      <input
+        type="text"
+        value={String(value ?? "")}
+        onChange={(e) => setAnswerValue(question, questionIndex, e.target.value)}
        placeholder={question.extras.placeHolder}
-        value={textValue}
-        onChange={(event) => {
-          const nextValue = event.target.value;
-
-          setValue(nextValue.length > 0 ? nextValue : null);
-        }}
-        className={`w-full resize-none rounded-[15px] border border-[#8B8B8B] bg-white px-4 py-3 text-[#181818] outline-none placeholder:text-[#8B8B8B] focus:border-[#6F6F6F] ${heightClassName}`}
+        disabled={disabled}
+        className={[
+          "w-full rounded-[10px] bg-[#DBDBDB] px-[14px] py-[10px] text-[13px] font-semibold text-[#181818] outline-none placeholder:text-[#808080]",
+          heightClassName || "min-h-[116px]",
+        ].join(" ")}
      />
      {description ? (
        <span className="block text-[10px] font-semibold text-[#747474]">
          {description}
        </span>
      ) : null}
-    </label>
+    </div>
  );
 }
-
-export default QuestionText;
--- a/src/components/questions/question-title.tsx
+++ b/src/components/questions/question-title.tsx
@ -10,10 +10,10 @@ export function QuestionTitle({ question, className }: QuestionTitleProps) {
  return (
    <span className="block">
      {question.private ? (
-        <span className="mb-3 flex min-h-[42px] w-full items-center gap-3 rounded-[22px] bg-[#F6D7D8] px-5 py-2 text-[14px] leading-tight font-semibold text-[#DF4146]">
+        <span className="mb-3 mx-auto flex w-fit items-center gap-1.5 rounded-[10px] bg-[#F6D7D8] px-2.5 py-1.5 text-[10px] leading-tight font-semibold text-[#DF4146]">
          <IoEyeOff
            aria-hidden="true"
-            className="shrink-0 text-[24px] text-[#DF4146]"
+            className="shrink-0 text-[18px] text-[#DF4146]"
          />
          <span>Private Field (Visible to Habib Marriage advisors only)</span>
        </span>
--- a/src/data/question-data.ts
+++ b/src/data/question-data.ts
@ -28,6 +28,13 @@ type QuestionAudienceRule = {
  minAge?: number;
 };

+export type QuestionLogic = {
+  dependsOn: {
+    title: string;
+    values: string[];
+  };
+};
+
 export type QuestionField = {
  title: string;
  type: string;
@ -38,6 +45,7 @@ export type QuestionField = {
  extras: QuestionExtras;
  audience?: QuestionAudienceRule;
  requiredWhen?: QuestionAudienceRule;
+  logic?: QuestionLogic;
 };

 export type QuestionListItem = {
--- a/src/hooks/marriage/types.ts
+++ b/src/hooks/marriage/types.ts
@ -32,6 +32,7 @@ export type MarriagePhoneFieldValue = {

 export type MarriageFieldValue =
  | string
+  | string[]
  | number
  | boolean
  | MarriagePhoneFieldValue
@ -83,6 +84,7 @@ export type MarriageProfile = {
  id: number;
  status: MarriageProfileStatus;
  gender: MarriageGender | null;
+  age: number | null;
  is_registering_for_self: boolean | null;
  can_edit_profile: boolean;
  can_message_expert: boolean;
--- a/src/i18n/dictionaries.ts
+++ b/src/i18n/dictionaries.ts
@ -35,10 +35,10 @@ export const dictionaries = {
      requiredStepsProgress: "{completed} of {total} required steps completed",
      findMatches: "Find Matches",
      findingMatch: "Finding Match",
-      optionalInfoPromptTitle: "Important point",
+      optionalInfoPromptTitle: "Important Note",
      optionalInfoPromptDescription:
        "You've completed all required fields. However, filling in all sections will help us find better matches for you",
-      completeNecessaryForms: "(Complete Necessary forms)",
+      completeNecessaryForms: "(Complete Required Forms)",
      openQuestion: "Open {title}",
      answerAtYourOwnPace: "Answer at Your Own Pace",
      answerAtYourOwnPaceDescription:
@ -80,7 +80,7 @@ export const dictionaries = {
        "You can now view their family's contact details and arrange further steps.",
      viewContact: "View Contact",
      penalty:
-        "Please note: if you do not make contact within 2 days, a penalty may apply",
+        "Please note: Failure to contact within 2 days may result in a penalty",
      profileLocked: "Profile is locked",
      lockedDescription:
        "You can't edit your profile while we're searching for matches",
@ -97,7 +97,7 @@ export const dictionaries = {
    },
    candidateContact: {
      imageAlt: "Selected candidate contact status",
-      title: "The selected candidate will contact your family shortly.",
+      title: "The selected candidate will be in touch with your family shortly.",
      contacted: "contacted",
      noContactYet: "no contact yet ?",
      afterTwoDays: "(after 2 days)",
--- a/src/i18n/locales/en/questions.json
+++ b/src/i18n/locales/en/questions.json
--- a/src/i18n/locales/fa/questions.json
+++ b/src/i18n/locales/fa/questions.json