43 changed files with 2444 additions and 156 deletions
-
18next.config.ts
-
3package.json
-
BINpublic/assets/fonts/ArabicYekanXRegular.woff2
-
BINpublic/assets/fonts/Faminela.woff2
-
BINpublic/assets/fonts/NotoNastaliqUrdu.woff2
-
BINpublic/assets/fonts/SegoeUIBold.woff2
-
BINpublic/assets/fonts/YekanXFaNum-R.woff2
-
BINpublic/assets/fonts/faminela.woff2
-
BINpublic/assets/fonts/segoeui.woff2
-
BINpublic/fonts/Amiri/Amiri-Bold.woff2
-
BINpublic/fonts/Amiri/Amiri-BoldItalic.woff2
-
BINpublic/fonts/Amiri/Amiri-Italic.woff2
-
BINpublic/fonts/Amiri/Amiri-Regular.woff2
-
BINpublic/fonts/Faminela/Faminela.woff2
-
BINpublic/fonts/segoeui/SegoeUIBold.woff2
-
BINpublic/fonts/segoeui/segoeui.woff2
-
BINpublic/fonts/urdu/NotoNastaliqUrdu.woff2
-
BINpublic/fonts/yekanx-arabic/ArabicYekanXRegular.woff2
-
BINpublic/fonts/yekanx/YekanXFaNum-R.woff2
-
27src/app/globals.css
-
14src/app/layout.tsx
-
87src/app/questions-list/[slug]/answer-pace-sheet.test.tsx
-
20src/app/questions-list/[slug]/question-detail-client.tsx
-
11src/app/questions-list/questions-list-client.tsx
-
93src/app/sheet-lab/page.tsx
-
108src/components/Componentes/information-sheet.test.tsx
-
131src/components/Componentes/information-sheet.tsx
-
16src/components/Componentes/question-checkbox.tsx
-
17src/components/Componentes/question-dropdown.tsx
-
4src/components/Componentes/question-progress-tracker.tsx
-
350src/components/Componentes/question-sheet.test.tsx
-
373src/components/Componentes/question-sheet.tsx
-
191src/components/Componentes/terms-sheet.test.tsx
-
416src/components/Componentes/terms-sheet.tsx
-
32src/components/Componentes/ui-icon.tsx
-
255src/data/country-calling-codes.ts
-
10src/hooks/marriage/use-form-schema.ts
-
37src/lib/auth-bridge.test.ts
-
10src/lib/geo-region.ts
-
119src/lib/marriage-cookie.test.ts
-
132src/lib/multi-select-helper.test.ts
-
76src/lib/multi-select-helper.ts
-
2src/lib/schema-adapter.ts
@ -0,0 +1,87 @@ |
|||||
|
import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react"; |
||||
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; |
||||
|
import AnswerPaceSheet, { |
||||
|
isAnswerPaceSheetSeen, |
||||
|
markAnswerPaceSheetSeen, |
||||
|
} from "./answer-pace-sheet"; |
||||
|
|
||||
|
vi.mock("@/translations/provider", () => ({ |
||||
|
useI18n: vi.fn(() => ({ |
||||
|
locale: "fa", |
||||
|
dictionary: { |
||||
|
"Information sheet": "شیت اطلاعات", |
||||
|
Close: "بستن", |
||||
|
}, |
||||
|
})), |
||||
|
})); |
||||
|
|
||||
|
vi.mock("@/lib/first-entry-helper", () => ({ |
||||
|
isFirstEntryCompleted: vi.fn(() => false), |
||||
|
})); |
||||
|
|
||||
|
describe("AnswerPaceSheet", () => { |
||||
|
beforeEach(() => { |
||||
|
window.localStorage.clear(); |
||||
|
}); |
||||
|
|
||||
|
afterEach(() => { |
||||
|
cleanup(); |
||||
|
window.localStorage.clear(); |
||||
|
}); |
||||
|
|
||||
|
it("does not render when activeQuestionIndex is less than 3", () => { |
||||
|
render( |
||||
|
<AnswerPaceSheet |
||||
|
activeQuestionIndex={2} |
||||
|
title="با آرامش پاسخ دهید" |
||||
|
description="میتوانید هر زمان نظرسنجی را متوقف کرده و بعداً ادامه دهید." |
||||
|
continueLabel="متوجه شدم" |
||||
|
/>, |
||||
|
); |
||||
|
|
||||
|
expect(screen.queryByRole("dialog")).toBeNull(); |
||||
|
}); |
||||
|
|
||||
|
it("renders when activeQuestionIndex >= 3 and displays inline play icon synchronously without network img tag", () => { |
||||
|
render( |
||||
|
<AnswerPaceSheet |
||||
|
activeQuestionIndex={3} |
||||
|
title="با آرامش پاسخ دهید" |
||||
|
description="میتوانید هر زمان نظرسنجی را متوقف کرده و بعداً ادامه دهید." |
||||
|
continueLabel="متوجه شدم" |
||||
|
/>, |
||||
|
); |
||||
|
|
||||
|
const dialog = screen.getByRole("dialog"); |
||||
|
expect(dialog).toBeDefined(); |
||||
|
expect(screen.getByText("با آرامش پاسخ دهید")).toBeDefined(); |
||||
|
expect( |
||||
|
screen.getByText( |
||||
|
"میتوانید هر زمان نظرسنجی را متوقف کرده و بعداً ادامه دهید.", |
||||
|
), |
||||
|
).toBeDefined(); |
||||
|
|
||||
|
// Critical: must render inline SVG play icon instantly with NO <img> tag
|
||||
|
expect(dialog.querySelector("img")).toBeNull(); |
||||
|
const playSvg = dialog.querySelector('svg[aria-label="Play"]'); |
||||
|
expect(playSvg).not.toBeNull(); |
||||
|
expect(playSvg?.getAttribute("viewBox")).toBe("0 0 50 50"); |
||||
|
}); |
||||
|
|
||||
|
it("marks sheet as seen and closes on button click", async () => { |
||||
|
render( |
||||
|
<AnswerPaceSheet |
||||
|
activeQuestionIndex={3} |
||||
|
title="با آرامش پاسخ دهید" |
||||
|
description="میتوانید هر زمان نظرسنجی را متوقف کرده و بعداً ادامه دهید." |
||||
|
continueLabel="متوجه شدم" |
||||
|
/>, |
||||
|
); |
||||
|
|
||||
|
const continueBtn = screen.getByRole("button", { name: "متوجه شدم" }); |
||||
|
fireEvent.click(continueBtn); |
||||
|
await waitFor(() => { |
||||
|
expect(isAnswerPaceSheetSeen()).toBe(true); |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,93 @@ |
|||||
|
"use client"; |
||||
|
|
||||
|
/** |
||||
|
* Standalone dev page for testing QuestionSheet sizing behavior in a browser. |
||||
|
* No login, no backend: profile query data is seeded into the QueryClient so |
||||
|
* QuestionAnswersProvider never needs the API. Hardcoded questions only. |
||||
|
*/ |
||||
|
|
||||
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; |
||||
|
import { useState } from "react"; |
||||
|
import QuestionSheet from "@/components/Componentes/question-sheet"; |
||||
|
import { QuestionAnswersProvider } from "@/components/Componentes/question-answer-storage"; |
||||
|
import { marriageQueryKeys } from "@/hooks/marriage/query-keys"; |
||||
|
import type { QuestionField } from "@/lib/schema-adapter"; |
||||
|
import { I18nProvider } from "@/translations/provider"; |
||||
|
|
||||
|
function makeOptions(count: number, prefix: string): QuestionField["options"] { |
||||
|
return Array.from({ length: count }, (_, index) => ({ |
||||
|
id: `${prefix}-${index + 1}`, |
||||
|
value: `${prefix}-${index + 1}`, |
||||
|
label: `${prefix} ${index + 1}`, |
||||
|
order: index + 1, |
||||
|
})); |
||||
|
} |
||||
|
|
||||
|
const fourOptionQuestion: QuestionField = { |
||||
|
id: "sheet_lab.four_options", |
||||
|
title: "Sheet Lab — 4 options (compact)", |
||||
|
type: "dropdown", |
||||
|
order: 1, |
||||
|
required: false, |
||||
|
baseRequired: false, |
||||
|
isVisible: true, |
||||
|
description: "", |
||||
|
tooltip: "", |
||||
|
extras: { placeHolder: "Select (4)", range: [0, 1], options: [] }, |
||||
|
options: makeOptions(4, "Option"), |
||||
|
ui_config: {}, |
||||
|
}; |
||||
|
|
||||
|
const manyOptionQuestion: QuestionField = { |
||||
|
id: "sheet_lab.many_options", |
||||
|
title: "Sheet Lab — 67 options (draggable)", |
||||
|
type: "dropdown", |
||||
|
order: 2, |
||||
|
required: false, |
||||
|
baseRequired: false, |
||||
|
isVisible: true, |
||||
|
description: "", |
||||
|
tooltip: "", |
||||
|
extras: { placeHolder: "Select (67)", range: [0, 1], options: [] }, |
||||
|
options: makeOptions(67, "Item"), |
||||
|
ui_config: {}, |
||||
|
}; |
||||
|
|
||||
|
export default function SheetLabPage() { |
||||
|
const [queryClient] = useState(() => { |
||||
|
const qc = new QueryClient({ |
||||
|
defaultOptions: { |
||||
|
queries: { |
||||
|
refetchOnMount: false, |
||||
|
refetchOnWindowFocus: false, |
||||
|
refetchOnReconnect: false, |
||||
|
retry: false, |
||||
|
staleTime: Infinity, |
||||
|
}, |
||||
|
}, |
||||
|
}); |
||||
|
// Seed the profile cache so QuestionAnswersProvider never hits the API.
|
||||
|
qc.setQueryData(marriageQueryKeys.profile(), { |
||||
|
id: 1, |
||||
|
can_edit_profile: true, |
||||
|
}); |
||||
|
return qc; |
||||
|
}); |
||||
|
|
||||
|
return ( |
||||
|
<I18nProvider locale="en"> |
||||
|
<QueryClientProvider client={queryClient}> |
||||
|
<QuestionAnswersProvider |
||||
|
slug="sheet-lab" |
||||
|
questions={[fourOptionQuestion, manyOptionQuestion]} |
||||
|
> |
||||
|
<main className="mx-auto flex max-w-[480px] flex-col gap-8 p-4 pt-10"> |
||||
|
<h1 className="text-lg font-bold">Sheet Lab</h1> |
||||
|
<QuestionSheet question={fourOptionQuestion} /> |
||||
|
<QuestionSheet question={manyOptionQuestion} /> |
||||
|
</main> |
||||
|
</QuestionAnswersProvider> |
||||
|
</QueryClientProvider> |
||||
|
</I18nProvider> |
||||
|
); |
||||
|
} |
||||
@ -0,0 +1,191 @@ |
|||||
|
import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react"; |
||||
|
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; |
||||
|
import TermsSheet from "./terms-sheet"; |
||||
|
|
||||
|
vi.mock("@/translations/provider", () => ({ |
||||
|
useI18n: () => ({ |
||||
|
locale: "fa", |
||||
|
dictionary: { |
||||
|
"terms & conditions": "قوانین و مقررات", |
||||
|
"Got it": "متوجه شدم", |
||||
|
"Close terms and conditions": "بستن قوانین و مقررات", |
||||
|
}, |
||||
|
}), |
||||
|
})); |
||||
|
|
||||
|
describe("TermsSheet Component (DraggableScrollableSheet Parity)", () => { |
||||
|
beforeEach(() => { |
||||
|
vi.clearAllMocks(); |
||||
|
}); |
||||
|
|
||||
|
afterEach(() => { |
||||
|
cleanup(); |
||||
|
}); |
||||
|
|
||||
|
it("does not render when isOpen is false", () => { |
||||
|
render(<TermsSheet isOpen={false} />); |
||||
|
expect(screen.queryByRole("dialog")).toBeNull(); |
||||
|
}); |
||||
|
|
||||
|
it("renders with initial 75% height when isOpen is true", () => { |
||||
|
render(<TermsSheet isOpen={true} />); |
||||
|
|
||||
|
const dialog = screen.getByRole("dialog"); |
||||
|
expect(dialog).toBeInTheDocument(); |
||||
|
|
||||
|
const section = dialog.querySelector("section")!; |
||||
|
expect(section).toHaveClass("flutter-draggable-sheet"); |
||||
|
expect(screen.getByText("قوانین و مقررات")).toBeInTheDocument(); |
||||
|
expect(screen.getByText("متوجه شدم")).toBeInTheDocument(); |
||||
|
}); |
||||
|
|
||||
|
it("grows sheet when pulling up at top of content", () => { |
||||
|
render(<TermsSheet isOpen={true} />); |
||||
|
|
||||
|
const dialog = screen.getByRole("dialog"); |
||||
|
const section = dialog.querySelector("section")!; |
||||
|
const content = screen.getByTestId("terms-sheet-content"); |
||||
|
|
||||
|
Object.defineProperty(content, "scrollHeight", { value: 1200, configurable: true }); |
||||
|
Object.defineProperty(content, "clientHeight", { value: 400, configurable: true }); |
||||
|
Object.defineProperty(content, "scrollTop", { value: 0, configurable: true }); |
||||
|
|
||||
|
fireEvent.touchStart(content, { touches: [{ clientX: 0, clientY: 400 }] }); |
||||
|
fireEvent.touchMove(content, { touches: [{ clientX: 0, clientY: 300 }] }); |
||||
|
|
||||
|
expect(section.style.getPropertyValue("--sheet-size")).toBe( |
||||
|
(0.75 + 100 / window.innerHeight).toFixed(4), |
||||
|
); |
||||
|
}); |
||||
|
|
||||
|
it("snaps to 1.0 when pulled up significantly and released", () => { |
||||
|
render(<TermsSheet isOpen={true} />); |
||||
|
|
||||
|
const dialog = screen.getByRole("dialog"); |
||||
|
const section = dialog.querySelector("section")!; |
||||
|
const content = screen.getByTestId("terms-sheet-content"); |
||||
|
|
||||
|
Object.defineProperty(content, "scrollHeight", { value: 1200, configurable: true }); |
||||
|
Object.defineProperty(content, "clientHeight", { value: 400, configurable: true }); |
||||
|
Object.defineProperty(content, "scrollTop", { value: 0, configurable: true }); |
||||
|
|
||||
|
// Pull up 100px from 0.75
|
||||
|
fireEvent.touchStart(content, { touches: [{ clientX: 0, clientY: 400 }] }); |
||||
|
fireEvent.touchMove(content, { touches: [{ clientX: 0, clientY: 300 }] }); |
||||
|
fireEvent.touchEnd(content); |
||||
|
|
||||
|
// Snaps cleanly to 1.0000
|
||||
|
expect(section.style.getPropertyValue("--sheet-size")).toBe("1.0000"); |
||||
|
}); |
||||
|
|
||||
|
it("snaps back to 0.75 when pulled up slightly and released", () => { |
||||
|
render(<TermsSheet isOpen={true} />); |
||||
|
|
||||
|
const dialog = screen.getByRole("dialog"); |
||||
|
const section = dialog.querySelector("section")!; |
||||
|
const content = screen.getByTestId("terms-sheet-content"); |
||||
|
|
||||
|
Object.defineProperty(content, "scrollHeight", { value: 1200, configurable: true }); |
||||
|
Object.defineProperty(content, "clientHeight", { value: 400, configurable: true }); |
||||
|
Object.defineProperty(content, "scrollTop", { value: 0, configurable: true }); |
||||
|
|
||||
|
// Pull up only 12px (below 30px threshold)
|
||||
|
fireEvent.touchStart(content, { touches: [{ clientX: 0, clientY: 400 }] }); |
||||
|
fireEvent.touchMove(content, { touches: [{ clientX: 0, clientY: 388 }] }); |
||||
|
fireEvent.touchEnd(content); |
||||
|
|
||||
|
// Snaps back to 0.7500
|
||||
|
expect(section.style.getPropertyValue("--sheet-size")).toBe("0.7500"); |
||||
|
}); |
||||
|
|
||||
|
it("snaps from 1.0 down to 0.75 when pulled down and released", () => { |
||||
|
render(<TermsSheet isOpen={true} />); |
||||
|
|
||||
|
const dialog = screen.getByRole("dialog"); |
||||
|
const section = dialog.querySelector("section")!; |
||||
|
const content = screen.getByTestId("terms-sheet-content"); |
||||
|
|
||||
|
Object.defineProperty(content, "scrollHeight", { value: 1200, configurable: true }); |
||||
|
Object.defineProperty(content, "clientHeight", { value: 400, configurable: true }); |
||||
|
Object.defineProperty(content, "scrollTop", { value: 0, configurable: true }); |
||||
|
|
||||
|
// Expand to 1.0 first
|
||||
|
fireEvent.touchStart(content, { touches: [{ clientX: 0, clientY: 400 }] }); |
||||
|
fireEvent.touchMove(content, { touches: [{ clientX: 0, clientY: 300 }] }); |
||||
|
fireEvent.touchEnd(content); |
||||
|
expect(section.style.getPropertyValue("--sheet-size")).toBe("1.0000"); |
||||
|
|
||||
|
// Pull down 50px from 1.0
|
||||
|
fireEvent.touchStart(content, { touches: [{ clientX: 0, clientY: 300 }] }); |
||||
|
fireEvent.touchMove(content, { touches: [{ clientX: 0, clientY: 350 }] }); |
||||
|
fireEvent.touchEnd(content); |
||||
|
|
||||
|
// Snaps down to 0.7500
|
||||
|
expect(section.style.getPropertyValue("--sheet-size")).toBe("0.7500"); |
||||
|
}); |
||||
|
|
||||
|
it("grows sheet on wheel event at top of content", () => { |
||||
|
render(<TermsSheet isOpen={true} />); |
||||
|
|
||||
|
const dialog = screen.getByRole("dialog"); |
||||
|
const section = dialog.querySelector("section")!; |
||||
|
const content = screen.getByTestId("terms-sheet-content"); |
||||
|
|
||||
|
Object.defineProperty(content, "scrollHeight", { value: 1200, configurable: true }); |
||||
|
Object.defineProperty(content, "clientHeight", { value: 400, configurable: true }); |
||||
|
Object.defineProperty(content, "scrollTop", { value: 0, configurable: true }); |
||||
|
|
||||
|
fireEvent.wheel(content, { deltaY: 120 }); |
||||
|
|
||||
|
expect(section.style.getPropertyValue("--sheet-size")).toBe( |
||||
|
(0.75 + 120 / window.innerHeight).toFixed(4), |
||||
|
); |
||||
|
}); |
||||
|
|
||||
|
it("shrinks to 60% floor and closes when pulled past it (shouldCloseOnMinExtent: true)", async () => { |
||||
|
const handleClose = vi.fn(); |
||||
|
render(<TermsSheet isOpen={true} onClose={handleClose} />); |
||||
|
|
||||
|
const dialog = screen.getByRole("dialog"); |
||||
|
const section = dialog.querySelector("section")!; |
||||
|
const content = screen.getByTestId("terms-sheet-content"); |
||||
|
|
||||
|
Object.defineProperty(content, "scrollTop", { value: 0, configurable: true }); |
||||
|
|
||||
|
// Pull down at the top: sheet shrinks and clamps at 0.6 floor
|
||||
|
fireEvent.touchStart(content, { touches: [{ clientX: 0, clientY: 400 }] }); |
||||
|
fireEvent.touchMove(content, { touches: [{ clientX: 0, clientY: 560 }] }); |
||||
|
expect(section.style.getPropertyValue("--sheet-size")).toBe("0.6000"); |
||||
|
|
||||
|
// Pull further past 0.6: triggers close
|
||||
|
fireEvent.touchMove(content, { touches: [{ clientX: 0, clientY: 580 }] }); |
||||
|
|
||||
|
await waitFor(() => { |
||||
|
expect(handleClose).toHaveBeenCalled(); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
it("calls onClose when Got it button is clicked", async () => { |
||||
|
const handleClose = vi.fn(); |
||||
|
render(<TermsSheet isOpen={true} onClose={handleClose} />); |
||||
|
|
||||
|
const gotItButton = screen.getByRole("button", { name: "متوجه شدم" }); |
||||
|
fireEvent.click(gotItButton); |
||||
|
|
||||
|
await waitFor(() => { |
||||
|
expect(handleClose).toHaveBeenCalled(); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
it("calls onClose when close X button is clicked", async () => { |
||||
|
const handleClose = vi.fn(); |
||||
|
render(<TermsSheet isOpen={true} onClose={handleClose} />); |
||||
|
|
||||
|
const closeButton = screen.getByRole("button", { name: "بستن قوانین و مقررات" }); |
||||
|
fireEvent.click(closeButton); |
||||
|
|
||||
|
await waitFor(() => { |
||||
|
expect(handleClose).toHaveBeenCalled(); |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,255 @@ |
|||||
|
/** |
||||
|
* ITU-T E.164 country calling codes mapped by ISO 3166-1 alpha-2 country code. |
||||
|
* Ultra-lightweight (~3KB) replacement for importing the entire google-libphonenumber |
||||
|
* library into the critical bootstrap and I18n bundles. |
||||
|
*/ |
||||
|
export const COUNTRY_CALLING_CODES: Readonly<Record<string, string>> = { |
||||
|
AF: "93", |
||||
|
AL: "355", |
||||
|
DZ: "213", |
||||
|
AS: "1", |
||||
|
AD: "376", |
||||
|
AO: "244", |
||||
|
AI: "1", |
||||
|
AG: "1", |
||||
|
AR: "54", |
||||
|
AM: "374", |
||||
|
AW: "297", |
||||
|
AU: "61", |
||||
|
AT: "43", |
||||
|
AZ: "994", |
||||
|
BS: "1", |
||||
|
BH: "973", |
||||
|
BD: "880", |
||||
|
BB: "1", |
||||
|
BY: "375", |
||||
|
BE: "32", |
||||
|
BZ: "501", |
||||
|
BJ: "229", |
||||
|
BM: "1", |
||||
|
BT: "975", |
||||
|
BO: "591", |
||||
|
BA: "387", |
||||
|
BW: "267", |
||||
|
BR: "55", |
||||
|
IO: "246", |
||||
|
VG: "1", |
||||
|
BN: "673", |
||||
|
BG: "359", |
||||
|
BF: "226", |
||||
|
BI: "257", |
||||
|
KH: "855", |
||||
|
CM: "237", |
||||
|
CA: "1", |
||||
|
CV: "238", |
||||
|
KY: "1", |
||||
|
CF: "236", |
||||
|
TD: "235", |
||||
|
CL: "56", |
||||
|
CN: "86", |
||||
|
CX: "61", |
||||
|
CC: "61", |
||||
|
CO: "57", |
||||
|
KM: "269", |
||||
|
CK: "682", |
||||
|
CR: "506", |
||||
|
HR: "385", |
||||
|
CU: "53", |
||||
|
CW: "599", |
||||
|
CY: "357", |
||||
|
CZ: "420", |
||||
|
CD: "243", |
||||
|
DK: "45", |
||||
|
DJ: "253", |
||||
|
DM: "1", |
||||
|
DO: "1", |
||||
|
EC: "593", |
||||
|
EG: "20", |
||||
|
SV: "503", |
||||
|
GQ: "240", |
||||
|
ER: "291", |
||||
|
EE: "372", |
||||
|
SZ: "268", |
||||
|
ET: "251", |
||||
|
FK: "500", |
||||
|
FO: "298", |
||||
|
FJ: "679", |
||||
|
FI: "358", |
||||
|
FR: "33", |
||||
|
GF: "594", |
||||
|
PF: "689", |
||||
|
GA: "241", |
||||
|
GM: "220", |
||||
|
GE: "995", |
||||
|
DE: "49", |
||||
|
GH: "233", |
||||
|
GI: "350", |
||||
|
GR: "30", |
||||
|
GL: "299", |
||||
|
GD: "1", |
||||
|
GP: "590", |
||||
|
GU: "1", |
||||
|
GT: "502", |
||||
|
GG: "44", |
||||
|
GN: "224", |
||||
|
GW: "245", |
||||
|
GY: "592", |
||||
|
HT: "509", |
||||
|
HN: "504", |
||||
|
HK: "852", |
||||
|
HU: "36", |
||||
|
IS: "354", |
||||
|
IN: "91", |
||||
|
ID: "62", |
||||
|
IR: "98", |
||||
|
IQ: "964", |
||||
|
IE: "353", |
||||
|
IM: "44", |
||||
|
IL: "972", |
||||
|
IT: "39", |
||||
|
CI: "225", |
||||
|
JM: "1", |
||||
|
JP: "81", |
||||
|
JE: "44", |
||||
|
JO: "962", |
||||
|
KZ: "7", |
||||
|
KE: "254", |
||||
|
KI: "686", |
||||
|
XK: "383", |
||||
|
KW: "965", |
||||
|
KG: "996", |
||||
|
LA: "856", |
||||
|
LV: "371", |
||||
|
LB: "961", |
||||
|
LS: "266", |
||||
|
LR: "231", |
||||
|
LY: "218", |
||||
|
LI: "423", |
||||
|
LT: "370", |
||||
|
LU: "352", |
||||
|
MO: "853", |
||||
|
MG: "261", |
||||
|
MW: "265", |
||||
|
MY: "60", |
||||
|
MV: "960", |
||||
|
ML: "223", |
||||
|
MT: "356", |
||||
|
MH: "692", |
||||
|
MQ: "596", |
||||
|
MR: "222", |
||||
|
MU: "230", |
||||
|
YT: "262", |
||||
|
MX: "52", |
||||
|
FM: "691", |
||||
|
MD: "373", |
||||
|
MC: "377", |
||||
|
MN: "976", |
||||
|
ME: "382", |
||||
|
MS: "1", |
||||
|
MA: "212", |
||||
|
MZ: "258", |
||||
|
MM: "95", |
||||
|
NA: "264", |
||||
|
NR: "674", |
||||
|
NP: "977", |
||||
|
NL: "31", |
||||
|
NC: "687", |
||||
|
NZ: "64", |
||||
|
NI: "505", |
||||
|
NE: "227", |
||||
|
NG: "234", |
||||
|
NU: "683", |
||||
|
NF: "672", |
||||
|
KP: "850", |
||||
|
MK: "389", |
||||
|
MP: "1", |
||||
|
NO: "47", |
||||
|
OM: "968", |
||||
|
PK: "92", |
||||
|
PW: "680", |
||||
|
PS: "970", |
||||
|
PA: "507", |
||||
|
PG: "675", |
||||
|
PY: "595", |
||||
|
PE: "51", |
||||
|
PH: "63", |
||||
|
PL: "48", |
||||
|
PT: "351", |
||||
|
PR: "1", |
||||
|
QA: "974", |
||||
|
CG: "242", |
||||
|
RE: "262", |
||||
|
RO: "40", |
||||
|
RU: "7", |
||||
|
RW: "250", |
||||
|
BL: "590", |
||||
|
SH: "290", |
||||
|
KN: "1", |
||||
|
LC: "1", |
||||
|
MF: "590", |
||||
|
PM: "508", |
||||
|
VC: "1", |
||||
|
WS: "685", |
||||
|
SM: "378", |
||||
|
ST: "239", |
||||
|
SA: "966", |
||||
|
SN: "221", |
||||
|
RS: "381", |
||||
|
SC: "248", |
||||
|
SL: "232", |
||||
|
SG: "65", |
||||
|
SX: "1", |
||||
|
SK: "421", |
||||
|
SI: "386", |
||||
|
SB: "677", |
||||
|
SO: "252", |
||||
|
ZA: "27", |
||||
|
KR: "82", |
||||
|
SS: "211", |
||||
|
ES: "34", |
||||
|
LK: "94", |
||||
|
SD: "249", |
||||
|
SR: "597", |
||||
|
SE: "46", |
||||
|
CH: "41", |
||||
|
SY: "963", |
||||
|
TW: "886", |
||||
|
TJ: "992", |
||||
|
TZ: "255", |
||||
|
TH: "66", |
||||
|
TL: "670", |
||||
|
TG: "228", |
||||
|
TK: "690", |
||||
|
TO: "676", |
||||
|
TT: "1", |
||||
|
TN: "216", |
||||
|
TR: "90", |
||||
|
TM: "993", |
||||
|
TC: "1", |
||||
|
TV: "688", |
||||
|
UG: "256", |
||||
|
UA: "380", |
||||
|
AE: "971", |
||||
|
GB: "44", |
||||
|
US: "1", |
||||
|
UY: "598", |
||||
|
UZ: "998", |
||||
|
VU: "678", |
||||
|
VA: "379", |
||||
|
VE: "58", |
||||
|
VN: "84", |
||||
|
VI: "1", |
||||
|
WF: "681", |
||||
|
EH: "212", |
||||
|
YE: "967", |
||||
|
ZM: "260", |
||||
|
ZW: "263", |
||||
|
}; |
||||
|
|
||||
|
export function getCallingCodeForCountry( |
||||
|
isoCode?: string | null, |
||||
|
): string | undefined { |
||||
|
if (!isoCode) return undefined; |
||||
|
const upper = isoCode.trim().toUpperCase(); |
||||
|
return COUNTRY_CALLING_CODES[upper]; |
||||
|
} |
||||
@ -0,0 +1,119 @@ |
|||||
|
import { describe, expect, it } from "vitest"; |
||||
|
import { getInitialMarriageProfile } from "@/hooks/marriage/use-profile-main"; |
||||
|
import type { MarriageProfileResponse } from "@/hooks/marriage/types"; |
||||
|
|
||||
|
/** |
||||
|
* Robust parser replicating the layout.tsx and auth-bridge.ts cookie resolution strategy. |
||||
|
*/ |
||||
|
export function parseMarriageCookie( |
||||
|
rawCookie: string | null | undefined, |
||||
|
): { parsedJson: any; profile?: MarriageProfileResponse } | null { |
||||
|
if (!rawCookie || !rawCookie.trim()) return null; |
||||
|
|
||||
|
const trimmed = rawCookie.trim(); |
||||
|
|
||||
|
// Strategy 1: Try decoding URI component first (Standard RFC-6265 percent-encoded cookie from Flutter)
|
||||
|
try { |
||||
|
const decoded = decodeURIComponent(trimmed); |
||||
|
const parsed = JSON.parse(decoded); |
||||
|
return { |
||||
|
parsedJson: parsed, |
||||
|
profile: getInitialMarriageProfile(parsed), |
||||
|
}; |
||||
|
} catch { |
||||
|
// Strategy 2: Fallback for legacy raw unencoded JSON cookies
|
||||
|
try { |
||||
|
const parsed = JSON.parse(trimmed); |
||||
|
return { |
||||
|
parsedJson: parsed, |
||||
|
profile: getInitialMarriageProfile(parsed), |
||||
|
}; |
||||
|
} catch { |
||||
|
return null; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
describe("HABIB_MARRIAGE_DATA Cookie Encoding & Decoding Suite", () => { |
||||
|
it("successfully parses standard URL-encoded JSON with Persian characters (Uri.encodeComponent)", () => { |
||||
|
const originalData = { |
||||
|
id: 101, |
||||
|
status: "match_found", |
||||
|
gender: "male", |
||||
|
city: "تهران", |
||||
|
bio: "مهندس کامپیوتر، علاقهمند به کتابخوانی و طبیعتگردی", |
||||
|
match_summary: { |
||||
|
id: 202, |
||||
|
gender: "female", |
||||
|
public_info: [ |
||||
|
{ label: "شهر", value: "اصفهان" }, |
||||
|
{ label: "تحصیلات", value: "کارشناسی ارشد" }, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
// Simulate Flutter: Uri.encodeComponent(json.encode(marriageData))
|
||||
|
const encodedCookie = encodeURIComponent(JSON.stringify(originalData)); |
||||
|
|
||||
|
// Verify it's purely US-ASCII
|
||||
|
expect(/^[\x00-\x7F]*$/.test(encodedCookie)).toBe(true); |
||||
|
|
||||
|
const result = parseMarriageCookie(encodedCookie); |
||||
|
expect(result).not.toBeNull(); |
||||
|
expect(result?.parsedJson.city).toBe("تهران"); |
||||
|
expect(result?.parsedJson.bio).toBe("مهندس کامپیوتر، علاقهمند به کتابخوانی و طبیعتگردی"); |
||||
|
expect(result?.parsedJson.match_summary.public_info[0].value).toBe("اصفهان"); |
||||
|
expect(result?.profile?.status).toBe("match_found"); |
||||
|
}); |
||||
|
|
||||
|
it("successfully parses legacy raw unencoded JSON with Persian characters", () => { |
||||
|
const legacyRawCookie = JSON.stringify({ |
||||
|
id: 102, |
||||
|
status: "active", |
||||
|
gender: "female", |
||||
|
city: "مشهد", |
||||
|
interests: ["زیارت", "خانواده"], |
||||
|
}); |
||||
|
|
||||
|
const result = parseMarriageCookie(legacyRawCookie); |
||||
|
expect(result).not.toBeNull(); |
||||
|
expect(result?.parsedJson.city).toBe("مشهد"); |
||||
|
expect(result?.parsedJson.interests).toEqual(["زیارت", "خانواده"]); |
||||
|
}); |
||||
|
|
||||
|
it("handles complex strings with percentage signs, quotes, and emojis without crashing", () => { |
||||
|
const complexData = { |
||||
|
id: 103, |
||||
|
status: "match_found", |
||||
|
note: "تطابق با دقت ۱۰۰% و رضایت ۹۵% 💍❤️", |
||||
|
query: "param1=val¶m2=50%off", |
||||
|
}; |
||||
|
|
||||
|
const encodedCookie = encodeURIComponent(JSON.stringify(complexData)); |
||||
|
const result = parseMarriageCookie(encodedCookie); |
||||
|
|
||||
|
expect(result).not.toBeNull(); |
||||
|
expect(result?.parsedJson.note).toBe("تطابق با دقت ۱۰۰% و رضایت ۹۵% 💍❤️"); |
||||
|
expect(result?.parsedJson.query).toBe("param1=val¶m2=50%off"); |
||||
|
}); |
||||
|
|
||||
|
it("handles unencoded JSON containing raw percent sign gracefully via fallback", () => { |
||||
|
// If an unencoded cookie contains raw %, decodeURIComponent will throw URIError.
|
||||
|
// The parser MUST catch it and fallback to JSON.parse directly.
|
||||
|
const rawWithPercent = '{"status":"active","progress":"100% completed","city":"شیراز"}'; |
||||
|
|
||||
|
const result = parseMarriageCookie(rawWithPercent); |
||||
|
expect(result).not.toBeNull(); |
||||
|
expect(result?.parsedJson.progress).toBe("100% completed"); |
||||
|
expect(result?.parsedJson.city).toBe("شیراز"); |
||||
|
}); |
||||
|
|
||||
|
it("returns null safely for corrupted, empty, or invalid cookies", () => { |
||||
|
expect(parseMarriageCookie(null)).toBeNull(); |
||||
|
expect(parseMarriageCookie("")).toBeNull(); |
||||
|
expect(parseMarriageCookie(" ")).toBeNull(); |
||||
|
expect(parseMarriageCookie("undefined")).toBeNull(); |
||||
|
expect(parseMarriageCookie("invalid-not-json")).toBeNull(); |
||||
|
expect(parseMarriageCookie("%E0%A4%A")).toBeNull(); // Malformed URI sequence
|
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,132 @@ |
|||||
|
import { describe, it, expect } from "vitest"; |
||||
|
import { |
||||
|
isExclusiveOption, |
||||
|
resolveMultiOptionToggle, |
||||
|
type MultiSelectOption, |
||||
|
} from "./multi-select-helper"; |
||||
|
|
||||
|
describe("multi-select-helper", () => { |
||||
|
const options: MultiSelectOption[] = [ |
||||
|
{ id: "opt1", value: "football", label: "Football" }, |
||||
|
{ id: "opt2", value: "swimming", label: "Swimming" }, |
||||
|
{ id: "opt3", value: "running", label: "Running" }, |
||||
|
{ id: "opt_none", value: "none", label: "None of the above", is_exclusive: true }, |
||||
|
]; |
||||
|
|
||||
|
describe("isExclusiveOption", () => { |
||||
|
it("identifies explicit is_exclusive property", () => { |
||||
|
expect(isExclusiveOption({ id: "custom", is_exclusive: true })).toBe(true); |
||||
|
expect(isExclusiveOption({ id: "custom", is_exclusive: false })).toBe(false); |
||||
|
}); |
||||
|
|
||||
|
it("accepts the explicit flag and rejects everything else (SSOT: backend flag only)", () => { |
||||
|
expect(isExclusiveOption({ id: "custom", is_exclusive: true })).toBe(true); |
||||
|
expect(isExclusiveOption({ id: "custom", is_exclusive: false })).toBe(false); |
||||
|
expect(isExclusiveOption({ id: "custom" })).toBe(false); |
||||
|
}); |
||||
|
|
||||
|
it("returns false for missing/empty/string-only input (no flag = not exclusive)", () => { |
||||
|
expect(isExclusiveOption("")).toBe(false); |
||||
|
expect(isExclusiveOption("test.none")).toBe(false); |
||||
|
}); |
||||
|
|
||||
|
it("does NOT guess from canonical values or slug suffixes (SSOT: backend flag only)", () => { |
||||
|
expect(isExclusiveOption({ id: "test.none", value: "none" })).toBe(false); |
||||
|
expect(isExclusiveOption({ id: "test.no_pets", value: "no_pets" })).toBe(false); |
||||
|
expect( |
||||
|
isExclusiveOption( |
||||
|
"spouse_criteria.appearance_dealbreakers_aspects.no_appearance_feature_alone_makes_difficult", |
||||
|
), |
||||
|
).toBe(false); |
||||
|
expect( |
||||
|
isExclusiveOption({ |
||||
|
id: "spouse_criteria.appearance_dealbreakers_aspects.no_appearance_feature_alone_makes_difficult", |
||||
|
value: "no_appearance_feature_alone_makes_difficult", |
||||
|
}), |
||||
|
).toBe(false); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
describe("resolveMultiOptionToggle", () => { |
||||
|
it("adds a regular option when none was selected", () => { |
||||
|
const res = resolveMultiOptionToggle({ |
||||
|
currentSelected: [], |
||||
|
optionId: "opt1", |
||||
|
options, |
||||
|
}); |
||||
|
expect(res).toEqual(["opt1"]); |
||||
|
}); |
||||
|
|
||||
|
it("adds multiple regular options sequentially", () => { |
||||
|
const res1 = resolveMultiOptionToggle({ |
||||
|
currentSelected: ["opt1"], |
||||
|
optionId: "opt2", |
||||
|
options, |
||||
|
}); |
||||
|
expect(res1).toEqual(["opt1", "opt2"]); |
||||
|
|
||||
|
const res2 = resolveMultiOptionToggle({ |
||||
|
currentSelected: ["opt1", "opt2"], |
||||
|
optionId: "opt3", |
||||
|
options, |
||||
|
}); |
||||
|
expect(res2).toEqual(["opt1", "opt2", "opt3"]); |
||||
|
}); |
||||
|
|
||||
|
it("deselects a regular option when toggled again", () => { |
||||
|
const res = resolveMultiOptionToggle({ |
||||
|
currentSelected: ["opt1", "opt2"], |
||||
|
optionId: "opt1", |
||||
|
options, |
||||
|
}); |
||||
|
expect(res).toEqual(["opt2"]); |
||||
|
}); |
||||
|
|
||||
|
it("clears ALL regular options when an exclusive option is selected", () => { |
||||
|
const res = resolveMultiOptionToggle({ |
||||
|
currentSelected: ["opt1", "opt2", "opt3"], |
||||
|
optionId: "opt_none", |
||||
|
options, |
||||
|
}); |
||||
|
expect(res).toEqual(["opt_none"]); |
||||
|
}); |
||||
|
|
||||
|
it("deselects the exclusive option when toggled again", () => { |
||||
|
const res = resolveMultiOptionToggle({ |
||||
|
currentSelected: ["opt_none"], |
||||
|
optionId: "opt_none", |
||||
|
options, |
||||
|
}); |
||||
|
expect(res).toEqual([]); |
||||
|
}); |
||||
|
|
||||
|
it("clears the exclusive option when a regular option is clicked", () => { |
||||
|
const res = resolveMultiOptionToggle({ |
||||
|
currentSelected: ["opt_none"], |
||||
|
optionId: "opt1", |
||||
|
options, |
||||
|
}); |
||||
|
expect(res).toEqual(["opt1"]); |
||||
|
}); |
||||
|
|
||||
|
it("enforces maxSelect for regular options without exclusive conflict", () => { |
||||
|
const res = resolveMultiOptionToggle({ |
||||
|
currentSelected: ["opt1", "opt2"], |
||||
|
optionId: "opt3", |
||||
|
options, |
||||
|
maxSelect: 2, |
||||
|
}); |
||||
|
expect(res).toEqual(["opt1", "opt2"]); // Capped at 2
|
||||
|
}); |
||||
|
|
||||
|
it("allows selecting exclusive option even when regular options reach maxSelect", () => { |
||||
|
const res = resolveMultiOptionToggle({ |
||||
|
currentSelected: ["opt1", "opt2"], |
||||
|
optionId: "opt_none", |
||||
|
options, |
||||
|
maxSelect: 2, |
||||
|
}); |
||||
|
expect(res).toEqual(["opt_none"]); |
||||
|
}); |
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,76 @@ |
|||||
|
export type MultiSelectOption = { |
||||
|
id: string; |
||||
|
value?: string | number; |
||||
|
label?: string; |
||||
|
is_exclusive?: boolean; |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* Determine if an option is mutually exclusive (مانعةالجمع) with the other |
||||
|
* options of its question. |
||||
|
* |
||||
|
* ⚠️ Single Source of Truth: exclusivity is configured in the live database |
||||
|
* (via the admin dashboard) and delivered by the backend as the |
||||
|
* `is_exclusive` flag on every option. No hardcoded slug/suffix heuristics. |
||||
|
*/ |
||||
|
export function isExclusiveOption(option: MultiSelectOption | string): boolean { |
||||
|
if (!option || typeof option !== "object") return false; |
||||
|
return option.is_exclusive === true; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Resolves toggling an option in a multi-select context with automatic mutual exclusion (مانعةالجمع). |
||||
|
* |
||||
|
* Behavior: |
||||
|
* 1. If an exclusive option is selected: |
||||
|
* - All other selected options are automatically cleared (deselected). |
||||
|
* - Only the exclusive option remains selected. |
||||
|
* 2. If an exclusive option is deselected: |
||||
|
* - It is removed, leaving an empty selection. |
||||
|
* 3. If a regular (non-exclusive) option is selected while an exclusive option was active: |
||||
|
* - The exclusive option is automatically cleared (deselected). |
||||
|
* - The new regular option is selected. |
||||
|
* 4. Respects maxSelect limit for regular options. |
||||
|
*/ |
||||
|
export function resolveMultiOptionToggle({ |
||||
|
currentSelected, |
||||
|
optionId, |
||||
|
options = [], |
||||
|
maxSelect, |
||||
|
}: { |
||||
|
currentSelected: string[]; |
||||
|
optionId: string; |
||||
|
options?: MultiSelectOption[]; |
||||
|
maxSelect?: number; |
||||
|
}): string[] { |
||||
|
const targetOption = options.find((o) => o.id === optionId) || { id: optionId }; |
||||
|
const isExclusive = isExclusiveOption(targetOption); |
||||
|
const isAlreadySelected = currentSelected.includes(optionId); |
||||
|
|
||||
|
// Case 1: Toggling an exclusive option
|
||||
|
if (isExclusive) { |
||||
|
if (isAlreadySelected) { |
||||
|
return []; |
||||
|
} |
||||
|
return [optionId]; |
||||
|
} |
||||
|
|
||||
|
// Case 2: Toggling a regular option that is already selected -> remove it
|
||||
|
if (isAlreadySelected) { |
||||
|
return currentSelected.filter((id) => id !== optionId); |
||||
|
} |
||||
|
|
||||
|
// Case 3: Adding a regular option that was NOT selected:
|
||||
|
// First, filter out any exclusive option(s) from current selection
|
||||
|
const cleanSelected = currentSelected.filter((id) => { |
||||
|
const opt = options.find((o) => o.id === id) || { id }; |
||||
|
return !isExclusiveOption(opt); |
||||
|
}); |
||||
|
|
||||
|
// Check maxSelect limit
|
||||
|
if (maxSelect && cleanSelected.length >= maxSelect) { |
||||
|
return cleanSelected; |
||||
|
} |
||||
|
|
||||
|
return [...cleanSelected, optionId]; |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue