[FS-247]: Householder Contact Information Form (#140)

This PR householders contact information form. --------- Co-authored-by: ASafaierad <[email protected]>
fullstacksjs · Mar 27, 2024 · cc375bc · cc375bc
1 parent 2c1c539
commit cc375bc
Show file tree

Hide file tree

Showing 69 changed files with 2,147 additions and 554 deletions.
diff --git a/app/Dashboard/Households/HouseholdDetail/HouseholdDetail.tsx b/app/Dashboard/Households/HouseholdDetail/HouseholdDetail.tsx
@@ -18,7 +18,7 @@ import {
 import type { HouseholdSeverityEnum } from '@camp/domain';
 import {
   createResolver,
-  householderSchema,
+  householderIdentitySchema,
   householdSchema,
   severities,
 } from '@camp/domain';
@@ -49,7 +49,7 @@ interface FormSchema {
 const resolver = createResolver<FormSchema>({
   name: householdSchema.name(),
   severity: householdSchema.severity(),
-  membersCount: householderSchema.membersCount(),
+  membersCount: householderIdentitySchema.membersCount(),
 });
 
 // eslint-disable-next-line max-lines-per-function

diff --git a/...etail/_components/AddHouseholderVisit/AddHouseholderVisitForm/AddHouseholderVisitForm.tsx b/...etail/_components/AddHouseholderVisit/AddHouseholderVisitForm/AddHouseholderVisitForm.tsx
@@ -1,6 +1,7 @@
-import { useCreateVisitMutation } from '@camp/data-layer';
+import { useCreateVisitMutation, useVisitNameQuery } from '@camp/data-layer';
 import { debug } from '@camp/debug';
 import {
+  ControlledAutocomplete,
   ControlledDateInput,
   ControlledFileUpload,
   showNotification,
@@ -58,6 +59,14 @@ export const AddHouseholderVisitForm = ({
     mode: 'onChange',
   });
   const [createVisit, { loading }] = useCreateVisitMutation();
+  const { data: visitNameData, loading: isLoadingVisitNames } =
+    useVisitNameQuery({
+      variables: {
+        householdId,
+      },
+    });
+
+  const visitNames = visitNameData?.visitNames?.map(v => v.name) ?? [];
 
   const onSubmit = handleSubmit(async inputs => {
     try {
@@ -89,15 +98,18 @@ export const AddHouseholderVisitForm = ({
   return (
     <form onSubmit={onSubmit} {...tid(ids.form)}>
       <Stack spacing={40}>
-        <TextInput
+        <ControlledAutocomplete
+          data={visitNames}
+          name="name"
+          loading={isLoadingVisitNames}
+          control={control}
           data-autoFocus
           required
           placeholder={tt.nameInput.placeholder}
           label={tt.nameInput.label}
           size="sm"
           error={formState.errors.name?.message}
           wrapperProps={tid(ids.nameInput)}
-          {...register('name')}
         />
         <ControlledDateInput
           name="date"
@@ -120,7 +132,6 @@ export const AddHouseholderVisitForm = ({
           control={control}
           name="documents"
           defaultValue={[]}
-          required
           label={tt.documentsInput.label}
           helper={tt.documentsInput.maxSize}
           upload={fileStorageClient.upload}

diff --git a/app/Dashboard/Households/HouseholdDetail/_components/HouseholderDetail/HouseholderDetail.tsx b/app/Dashboard/Households/HouseholdDetail/_components/HouseholderDetail/HouseholderDetail.tsx
@@ -2,7 +2,7 @@ import { useHouseholderQuery } from '@camp/data-layer';
 import { debug, DebugScopes } from '@camp/debug';
 import { FullPageLoader } from '@camp/design';
 
-import { HouseholderForm } from '../HouseholderForm';
+import { HouseholderForms } from '../HouseholderForm';
 
 interface Props {
   householdId: string;
@@ -20,7 +20,7 @@ export const HouseholderDetail = ({ householdId, householdName }: Props) => {
   if (loading) return <FullPageLoader />;
 
   return (
-    <HouseholderForm
+    <HouseholderForms
       householdId={householdId}
       initialHouseholder={householder}
       householdName={householdName}

diff --git a/...hboard/Households/HouseholdDetail/_components/HouseholderForm/HouseholderForm.stories.tsx b/...hboard/Households/HouseholdDetail/_components/HouseholderForm/HouseholderForm.stories.tsx
diff --git a/...oard/Households/HouseholdDetail/_components/HouseholderForm/HouseholderFormActions.ids.ts b/...oard/Households/HouseholdDetail/_components/HouseholderForm/HouseholderFormActions.ids.ts
@@ -0,0 +1,5 @@
+export const householderFormActionsIds = {
+  submitBtn: 'submit-button',
+  editBtn: 'edit-button',
+  cancel: 'cancel-button',
+} as const;
diff --git a/...shboard/Households/HouseholdDetail/_components/HouseholderForm/HouseholderFormActions.tsx b/...shboard/Households/HouseholdDetail/_components/HouseholderForm/HouseholderFormActions.tsx
@@ -4,40 +4,42 @@ import { messages } from '@camp/messages';
 import { tid } from '@camp/test';
 import { Button, Group } from '@mantine/core';
 
-import { householderFormIds as ids } from './HouseholderForm.ids';
-
-const t = messages.householder.form;
+import { householderFormActionsIds as ids } from './HouseholderFormActions.ids';
 
 interface Props {
   isEditMode?: boolean;
   canUndo?: boolean;
   canSubmit?: boolean;
+  title: string;
   onUndo: VoidFunction;
   onEdit: VoidFunction;
+  idPrefix: string;
 }
 
 export const HouseholderFormActions = ({
   canSubmit,
   canUndo,
+  title,
   isEditMode,
   onUndo,
   onEdit,
+  idPrefix,
 }: Props) => {
   return (
     <Group position="apart" mih="100%">
-      <DashboardTitle>{t.title}</DashboardTitle>
+      <DashboardTitle>{title}</DashboardTitle>
       <Group spacing={20}>
         {isEditMode ? (
           <>
             <DestructiveButton
               disabled={!canUndo}
               onClick={onUndo}
-              {...tid(ids.cancel)}
+              {...tid(`${idPrefix}-${ids.cancel}`)}
             >
               {messages.actions.undoBtn}
             </DestructiveButton>
             <Button
-              {...tid(ids.submitBtn)}
+              {...tid(`${idPrefix}-${ids.submitBtn}`)}
               type="submit"
               leftIcon={<CheckIcon size={16} />}
               disabled={!canSubmit}
@@ -48,7 +50,7 @@ export const HouseholderFormActions = ({
         ) : (
           <Button
             key={1}
-            {...tid(ids.editBtn)}
+            {...tid(`${idPrefix}-${ids.editBtn}`)}
             variant="outline"
             onClick={onEdit}
             leftIcon={<EditIcon size={16} />}

diff --git a/app/Dashboard/Households/HouseholdDetail/_components/HouseholderForm/HouseholderForms.tsx b/app/Dashboard/Households/HouseholdDetail/_components/HouseholderForm/HouseholderForms.tsx
@@ -0,0 +1,44 @@
+import type { Householder } from '@camp/domain';
+import { Stack } from '@mantine/core';
+
+import { HouseholderContactForm } from './_components/HouseholderContactForm';
+import { HouseholderFinancialForm } from './_components/HouseholderFinancialForm';
+import { HouseholderHealthForm } from './_components/HouseholderHealthForm';
+import { HouseholderIdentityForm } from './_components/HouseholderIdentityForm';
+
+interface Props {
+  initialHouseholder?: Householder;
+  householdId: string;
+  householdName: string;
+}
+
+export const HouseholderForms = ({
+  initialHouseholder,
+  householdId,
+  householdName,
+}: Props) => {
+  return (
+    <Stack spacing={30}>
+      <HouseholderIdentityForm
+        initialHouseholder={initialHouseholder}
+        householdId={householdId}
+        householdName={householdName}
+      />
+      <HouseholderContactForm
+        householdId={householdId}
+        householdName={householdName}
+        initialHouseholder={initialHouseholder}
+      />
+      <HouseholderHealthForm
+        householdId={householdId}
+        householdName={householdName}
+        initialHouseholder={initialHouseholder}
+      />
+      <HouseholderFinancialForm
+        householdId={householdId}
+        householdName={householdName}
+        initialHouseholder={initialHouseholder}
+      />
+    </Stack>
+  );
+};
diff --git a/...mponents/HouseholderForm/_components/HouseholderContactForm/HouseholderContactForm.ids.ts b/...mponents/HouseholderForm/_components/HouseholderContactForm/HouseholderContactForm.ids.ts
@@ -0,0 +1,14 @@
+export const householderContactFormIds = {
+  form: 'householder-contact-form',
+  provinceInput: 'householder-province',
+  cityInput: 'householder-city',
+  addressInput: 'householder-address',
+  neighborhoodInput: 'householder-neighborhood',
+  zipCodeInput: 'householder-zip-code',
+  priorAccommodationAddressInput: 'householder-priorAccommodation-address',
+  accommodationTypeInput: 'householder-accommodationType',
+  descriptionInput: 'householder-description',
+  nationalityInput: 'householder-nationality',
+  cityOfBirthInput: 'householder-city-of-birth',
+  idPrefix: 'householder-contact',
+} as const;