feat(patient-full-dob): Allow adding full birthday in patient registration

Author: dpapaspyros

src/hooks/api/patientHooks.ts

@@ -146,6 +146,8 @@ export const useRegisterPatient = () => {
         hospital_id: params.hospital.value,
         full_name: `${params.firstName}${params.middleName ? " " + params.middleName : ""} ${params.lastName}`,
         year_of_birth: params.yearOfBirth,
+        month_of_birth: params.monthOfBirth,
+        day_of_birth: params.dayOfBirth,
         age: params.age,
         national_id: params.nationalId,
         patient_hospital_id: params.patientHospitalId,

src/models/apiTypes.tsx

@@ -152,6 +152,8 @@ export interface RegisterPatientPayload {
   patient_hospital_id: number;
   age: number;
   year_of_birth: number;
+  month_of_birth: number;
+  day_of_birth: number;
   hospital_id: number;
   gender: string;
   phone_1: number;

src/pages/RegisterPatient/components/RegisterPatientForm/RegisterPatientForm.style.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { grid } from '@orfium/ictinus/dist/theme/functions';
 
 import { scrollBar } from '../../../../common.style';
 
@@ -19,6 +20,14 @@ export const FormContainer = styled.div<{ isDesktop: boolean }>`
   ${scrollBar};
 `;
 
+export const BirthdayFieldsContainer = styled.div<{ withMargin?: boolean }>`
+  ${grid};
+  column-gap: 8px;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  margin-bottom: ${(props) => (props.withMargin ? '24px' : null)};
+  row-gap: 8px;
+`;
+
 export const SelectWrapper = styled.div`
   & > div > div {
     max-width: unset;

src/pages/RegisterPatient/components/RegisterPatientForm/RegisterPatientForm.tsx

@@ -17,7 +17,7 @@ import { useResponsiveLayout } from '../../../../hooks/useResponsiveSidebar';
 import { HospitalsAPI } from '../../../../models/apiTypes';
 import { RegisterPatientFormType } from '../../types';
 import { getHospitalOptions } from '../../utils';
-import { FormContainer, FormHeadingContainer, SelectWrapper } from './RegisterPatientForm.style';
+import { FormContainer, FormHeadingContainer, SelectWrapper, BirthdayFieldsContainer } from './RegisterPatientForm.style';
 
 type Props = {
   values: RegisterPatientFormType;
@@ -118,7 +118,7 @@ const RegisterPatientForm: React.FC<Props> = ({ values, hospitals }) => {
             }}
           </Field>
         </FieldWrapper>
-        <FieldsContainer>
+        <BirthdayFieldsContainer>
           <Field name="age">
             {({ input: { onChange } }) => (
               <OnBlur name="yearOfBirth">
@@ -149,6 +149,44 @@ const RegisterPatientForm: React.FC<Props> = ({ values, hospitals }) => {
               }}
             </Field>
           </FieldWrapper>
+          <FieldWrapper>
+            <Field name="monthOfBirth" parse={(value) => value}>
+              {(props) => {
+                const hasError = props.meta.touched && props.meta.invalid && !props.meta.active;
+                return (
+                  <TextField
+                    id="month_of_birth"
+                    label="Month Of Birth"
+                    styleType="outlined"
+                    type="number"
+                    size="sm"
+                    status={hasError ? 'error' : 'hint'}
+                    hintMsg={hasError ? props.meta.error : undefined}
+                    {...props.input}
+                  />
+                );
+              }}
+            </Field>
+          </FieldWrapper>
+          <FieldWrapper>
+            <Field name="dayOfBirth" parse={(value) => value}>
+              {(props) => {
+                const hasError = props.meta.touched && props.meta.invalid && !props.meta.active;
+                return (
+                  <TextField
+                    id="day_of_birth"
+                    label="Day Of Birth"
+                    styleType="outlined"
+                    type="number"
+                    size="sm"
+                    status={hasError ? 'error' : 'hint'}
+                    hintMsg={hasError ? props.meta.error : undefined}
+                    {...props.input}
+                  />
+                );
+              }}
+            </Field>
+          </FieldWrapper>
           <FieldWrapper>
             <Field name="age" parse={(value) => value}>
               {(props) => {
@@ -166,7 +204,7 @@ const RegisterPatientForm: React.FC<Props> = ({ values, hospitals }) => {
               }}
             </Field>
           </FieldWrapper>
-        </FieldsContainer>
+        </BirthdayFieldsContainer>
         <FieldWrapper>
           <Field name="nationalId" parse={parseOnlyNumbers}>
             {(props) => {

src/pages/RegisterPatient/types.ts

@@ -8,6 +8,8 @@ export type RegisterPatientFormType = {
   patientHospitalId: number;
   nationalId: number;
   yearOfBirth: number;
+  monthOfBirth: number;
+  dayOfBirth: number;
   age: number;
   gender: 'male' | 'female';
   phone1: number;