Skip to content

Commit e608f21

Browse files
fix(travel-insurance): 🔧 code review fixes for travel insurance feature (#18)
1 parent de5879a commit e608f21

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+1243
-748
lines changed

‎cspell.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
"ipynb",
4242
"mdtxt",
4343
"mdwn",
44+
"metas",
4445
"Metas",
4546
"micnncim",
4647
"mkdn",

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,7 @@
188188
"@types/react-dom": "19.1.9",
189189
"@typescript-eslint/parser": "8.44.0",
190190
"all-contributors-cli": "6.26.1",
191+
"baseline-browser-mapping": "2.9.17",
191192
"cross-env": "10.0.0",
192193
"cspell": "9.2.1",
193194
"dotenv": "17.2.2",

‎pnpm-lock.yaml‎

Lines changed: 7 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/travel/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import { PlansOurPartner } from "@/components/plans/plans-our-partner";
77

88
import TravelImage from "../../../public/images/teavel-image.webp";
99

10-
const TRAVEL_FORM_ID_DEV = "682db403-cff2-413d-a436-0677cbe402f0";
11-
const TRAVEL_FORM_ID_PROD = "f875783f-42c0-44e3-9083-c2895a1e2340";
10+
const TRAVEL_FORM_ID_DEV = "3217d2be-1d10-46da-9785-97b79fdd0a90";
11+
const TRAVEL_FORM_ID_PROD = "d1198eb7-cbe7-4d84-a72e-5792cbd6743b";
1212
const TRAVEL_FORM_ID =
1313
process.env.NODE_ENV === "production"
1414
? TRAVEL_FORM_ID_PROD

‎src/components/form-builder/components/form-builder/form-edit/field-edit/field-edit-form-fields.tsx‎

Lines changed: 47 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,29 @@
11
import * as React from "react";
22
import { ImageIcon } from "lucide-react";
3-
import { UseFormReturn } from "react-hook-form";
3+
import type { UseFormReturn } from "react-hook-form";
44

5-
import { FormElement, FormElementSchema } from "@/lib/orpc/schemas/forms";
5+
import type { FormElement } from "@/lib/orpc/schemas/forms";
6+
import { FormElementSchema } from "@/lib/orpc/schemas/forms";
67
import { isStatic } from "@/components/form-builder/lib/utils";
78
import { Button } from "@/components/ui/button";
89
import { Label } from "@/components/ui/label";
910

11+
import type { DynamicFormValues } from "../../../render-form-element";
1012
import { RenderFormElement } from "../../../render-form-element";
1113
import { FieldEditOptionsList } from "./field-edit-components";
1214
import { fieldEditInputTypes } from "./field-edit-input-types";
1315

16+
/**
17+
* Casts a FormElement form to DynamicFormValues form for RenderFormElement compatibility.
18+
* This is safe because FormElement is structurally compatible with Record<string, unknown>.
19+
* @param {UseFormReturn<FormElement>} form - The react-hook-form instance typed for FormElement
20+
* @returns {UseFormReturn<DynamicFormValues>} The same form instance typed for DynamicFormValues
21+
*/
22+
const asDynamicForm = (
23+
form: UseFormReturn<FormElement>,
24+
): UseFormReturn<DynamicFormValues> =>
25+
form as unknown as UseFormReturn<DynamicFormValues>;
26+
1427
interface FieldEditFormFieldsProps {
1528
fieldType: Extract<FormElement["fieldType"], string>;
1629
form: UseFormReturn<FormElement>;
@@ -22,10 +35,10 @@ function IconUploadField({
2235
form,
2336
formElement,
2437
}: {
25-
form: UseFormReturn<FormElement>;
38+
form: UseFormReturn<DynamicFormValues>;
2639
formElement: FormElement;
2740
}) {
28-
const iconImage = form.watch("iconImage"); // Watch the form value for reactivity
41+
const iconImage = form.watch("iconImage") as string | undefined;
2942

3043
const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
3144
const file = e.target.files?.[0];
@@ -127,7 +140,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
127140
return (
128141
<div className="mb-4 flex flex-col gap-3">
129142
<RenderFormElement
130-
form={form}
143+
form={asDynamicForm(form)}
131144
formElement={{
132145
className: "border-secondary",
133146
defaultValue: formElement.content,
@@ -140,7 +153,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
140153
/>
141154

142155
<RenderFormElement
143-
form={form}
156+
form={asDynamicForm(form)}
144157
formElement={{
145158
className: "border-secondary",
146159
defaultValue:
@@ -161,7 +174,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
161174
<div className="mb-4 flex flex-col gap-3">
162175
{"title" in formElement && Array.isArray(formElement.title) && (
163176
<RenderFormElement
164-
form={form}
177+
form={asDynamicForm(form)}
165178
formElement={{
166179
className: "border-secondary",
167180
defaultValue: formElement.title,
@@ -176,7 +189,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
176189

177190
{"content" in formElement && Array.isArray(formElement.content) ? (
178191
<RenderFormElement
179-
form={form}
192+
form={asDynamicForm(form)}
180193
formElement={{
181194
className: "border-secondary",
182195
defaultValue: formElement.content,
@@ -189,7 +202,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
189202
/>
190203
) : (
191204
<RenderFormElement
192-
form={form}
205+
form={asDynamicForm(form)}
193206
formElement={{
194207
className: "border-secondary",
195208
defaultValue: formElement.content,
@@ -204,7 +217,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
204217

205218
{displayStyleOptions.length > 0 && (
206219
<RenderFormElement
207-
form={form}
220+
form={asDynamicForm(form)}
208221
formElement={{
209222
fieldType: "toggle-group",
210223
id: formElement.id,
@@ -243,7 +256,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
243256
<div className="mb-2 flex w-full flex-col items-center justify-start gap-3">
244257
<div className="flex w-full items-center justify-between gap-4">
245258
<RenderFormElement
246-
form={form}
259+
form={asDynamicForm(form)}
247260
formElement={{
248261
fieldType: "input",
249262
id: formElement.id,
@@ -254,7 +267,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
254267
/>
255268

256269
<RenderFormElement
257-
form={form}
270+
form={asDynamicForm(form)}
258271
formElement={{
259272
className: "outline-secondary",
260273
defaultValue: formElement.name,
@@ -269,7 +282,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
269282

270283
{!withoutPlaceholder && (
271284
<RenderFormElement
272-
form={form}
285+
form={asDynamicForm(form)}
273286
formElement={{
274287
fieldType: "input",
275288
id: formElement.id,
@@ -281,7 +294,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
281294
)}
282295

283296
<RenderFormElement
284-
form={form}
297+
form={asDynamicForm(form)}
285298
formElement={{
286299
fieldType: "textarea",
287300
id: formElement.id,
@@ -294,7 +307,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
294307
{fieldType === "input" && (
295308
<>
296309
<RenderFormElement
297-
form={form}
310+
form={asDynamicForm(form)}
298311
formElement={{
299312
fieldType: "toggle-group",
300313
id: formElement.id,
@@ -307,7 +320,10 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
307320
}}
308321
/>
309322

310-
<IconUploadField form={form} formElement={formElement} />
323+
<IconUploadField
324+
form={asDynamicForm(form)}
325+
formElement={formElement}
326+
/>
311327
</>
312328
)}
313329

@@ -317,7 +333,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
317333
Input Field Settings
318334
</h3>
319335
<RenderFormElement
320-
form={form}
336+
form={asDynamicForm(form)}
321337
formElement={{
322338
defaultValue:
323339
"inputName" in formElement ? formElement.inputName : undefined,
@@ -330,7 +346,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
330346
}}
331347
/>
332348
<RenderFormElement
333-
form={form}
349+
form={asDynamicForm(form)}
334350
formElement={{
335351
defaultValue:
336352
"inputPlaceholder" in formElement
@@ -344,7 +360,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
344360
}}
345361
/>
346362
<RenderFormElement
347-
form={form}
363+
form={asDynamicForm(form)}
348364
formElement={{
349365
fieldType: "toggle-group",
350366
id: formElement.id,
@@ -361,7 +377,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
361377
Select Field Settings
362378
</h3>
363379
<RenderFormElement
364-
form={form}
380+
form={asDynamicForm(form)}
365381
formElement={{
366382
defaultValue:
367383
"selectName" in formElement
@@ -376,7 +392,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
376392
}}
377393
/>
378394
<RenderFormElement
379-
form={form}
395+
form={asDynamicForm(form)}
380396
formElement={{
381397
defaultValue:
382398
"selectPlaceholder" in formElement
@@ -406,7 +422,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
406422
{fieldType === "slider" && (
407423
<div className="flex items-center justify-between gap-4">
408424
<RenderFormElement
409-
form={form}
425+
form={asDynamicForm(form)}
410426
formElement={{
411427
defaultValue: "min" in formElement ? formElement.min : undefined,
412428
fieldType: "input",
@@ -419,7 +435,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
419435
/>
420436

421437
<RenderFormElement
422-
form={form}
438+
form={asDynamicForm(form)}
423439
formElement={{
424440
defaultValue: "max" in formElement ? formElement.max : undefined,
425441
fieldType: "input",
@@ -432,7 +448,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
432448
/>
433449

434450
<RenderFormElement
435-
form={form}
451+
form={asDynamicForm(form)}
436452
formElement={{
437453
defaultValue:
438454
"step" in formElement ? formElement.step : undefined,
@@ -449,7 +465,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
449465

450466
{fieldType === "toggle-group" && (
451467
<RenderFormElement
452-
form={form}
468+
form={asDynamicForm(form)}
453469
formElement={{
454470
defaultValue: "type" in formElement ? formElement.type : undefined,
455471
fieldType: "toggle-group",
@@ -490,7 +506,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
490506

491507
<div className="w-full space-y-2">
492508
<RenderFormElement
493-
form={form}
509+
form={asDynamicForm(form)}
494510
formElement={{
495511
fieldType: "input",
496512
id: formElement.id,
@@ -511,7 +527,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
511527
/>
512528

513529
<RenderFormElement
514-
form={form}
530+
form={asDynamicForm(form)}
515531
formElement={{
516532
fieldType: "input",
517533
id: formElement.id,
@@ -524,7 +540,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
524540
/>
525541

526542
<RenderFormElement
527-
form={form}
543+
form={asDynamicForm(form)}
528544
formElement={{
529545
description:
530546
"Comma separated list of MIME types or file extensions",
@@ -543,7 +559,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
543559
<div className="flex w-full items-center justify-start gap-4">
544560
<div>
545561
<RenderFormElement
546-
form={form}
562+
form={asDynamicForm(form)}
547563
formElement={{
548564
fieldType: "checkbox",
549565
id: formElement.id,
@@ -555,7 +571,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
555571
</div>
556572

557573
<RenderFormElement
558-
form={form}
574+
form={asDynamicForm(form)}
559575
formElement={{
560576
fieldType: "checkbox",
561577
id: formElement.id,
@@ -568,7 +584,7 @@ export function FieldEditFormFields(props: FieldEditFormFieldsProps) {
568584

569585
{displayStyleOptions.length > 0 && (
570586
<RenderFormElement
571-
form={form}
587+
form={asDynamicForm(form)}
572588
formElement={{
573589
fieldType: "toggle-group",
574590
id: formElement.id,

‎src/components/form-builder/components/form-preview/form-elements-renderer.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import * as React from "react";
2-
import type { UseFormReturn } from "react-hook-form";
32

4-
import { FormElement } from "@/lib/orpc/schemas/forms";
3+
import type { FormElement } from "@/lib/orpc/schemas/forms";
54

5+
import type { DynamicFormValues } from "../render-form-element";
66
import { RenderFormElement } from "../render-form-element";
77

88
interface FormElementsRendererProps {
99
fields: FormElement | FormElement[];
10-
form: UseFormReturn<FormElement>;
10+
form: import("react-hook-form").UseFormReturn<DynamicFormValues>;
1111
}
1212

1313
export function FormElementsRenderer(props: FormElementsRendererProps) {

0 commit comments

Comments
 (0)