@kenyaemr/esm-pcs-app 5.4.5-pre.1092

package/src/add-dependant/add-dependant.workspace.tsx

@@ -0,0 +1,249 @@
+import {
+  Button,
+  ButtonSet,
+  Column,
+  Form,
+  InlineNotification,
+  RadioButton,
+  RadioButtonGroup,
+  Row,
+  TextInput,
+} from '@carbon/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  OpenmrsDatePicker,
+  ResponsiveWrapper,
+  showSnackbar,
+  useConfig,
+  Workspace2,
+  type Workspace2DefinitionProps,
+} from '@openmrs/esm-framework';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+
+import { type PcsConfig } from '../config-schema';
+import { createDependantWithTemporaryId } from '../resources/link-dependant.resource';
+import styles from './add-dependant.scss';
+
+export interface AddDependantWorkspaceProps {
+  /** The mother's PCS individual ID — the participant is created against it. */
+  motherIndividualId: string;
+  onCreated?: () => void;
+}
+
+/** The module's create endpoint is for infants, which is why the window is a year wide. */
+const oneYearAgo = () => {
+  const date = new Date();
+  date.setFullYear(date.getFullYear() - 1);
+  return date;
+};
+
+export const buildAddDependantSchema = (t: (key: string, fallback: string) => string) =>
+  z.object({
+    givenName: z.string().trim().min(1, t('givenNameRequired', 'Given name is required')),
+    middleName: z.string().trim().optional(),
+    familyName: z.string().trim().min(1, t('familyNameRequired', 'Family name is required')),
+    dateOfBirth: z
+      .date({ required_error: t('dateOfBirthRequired', 'Date of birth is required') })
+      .max(new Date(), t('dateOfBirthInFuture', 'Date of birth cannot be in the future'))
+      // PCS creates these participants for infants, so anyone older belongs to one of the
+      // linking flows rather than this one.
+      .min(oneYearAgo(), t('dependantMustBeUnderOne', 'This form is for infants — age cannot exceed one year')),
+    sex: z.enum(['M', 'F'], {
+      errorMap: () => ({ message: t('sexRequired', 'Sex is required') }),
+    }),
+  });
+
+type AddDependantFormData = z.infer<ReturnType<typeof buildAddDependantSchema>>;
+
+const AddDependantWorkspace: React.FC<Workspace2DefinitionProps<AddDependantWorkspaceProps, {}, {}>> = ({
+  closeWorkspace,
+  workspaceProps,
+}) => {
+  const { t } = useTranslation();
+
+  const { nationalIdUUID, phoneAttributeTypeUUID } = useConfig<PcsConfig>();
+  const { motherIndividualId, onCreated } = workspaceProps ?? {};
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const schema = useMemo(() => buildAddDependantSchema(t), [t]);
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = useForm<AddDependantFormData>({
+    resolver: zodResolver(schema),
+    defaultValues: { givenName: '', middleName: '', familyName: '' },
+  });
+
+  const onSubmit = async (data: AddDependantFormData) => {
+    if (!motherIndividualId) {
+      return;
+    }
+    setSubmitError(null);
+    try {
+      const { participant } = await createDependantWithTemporaryId({
+        demographics: {
+          firstName: data.givenName,
+          middleName: data.middleName,
+          lastName: data.familyName,
+          sex: data.sex,
+          dateOfBirth: data.dateOfBirth.toISOString().slice(0, 10),
+        },
+        motherIndividualId,
+        nationalIdUUID,
+        phoneAttributeTypeUUID,
+      });
+
+      showSnackbar({
+        title: t('dependantAdded', 'Dependant added'),
+        subtitle: participant?.individualId
+          ? t('dependantAddedSubtitle', 'PCS issued {{individualId}} for this dependant.', {
+              individualId: participant.individualId,
+            })
+          : undefined,
+        kind: 'success',
+        isLowContrast: true,
+      });
+
+      onCreated?.();
+
+      closeWorkspace();
+    } catch (e: any) {
+      setSubmitError(
+        e?.responseBody?.error?.message ?? e?.message ?? t('dependantAddFailed', 'The dependant could not be added.'),
+      );
+    }
+  };
+
+  if (!workspaceProps) {
+    return null;
+  }
+
+  return (
+    <Workspace2 title={t('addDependant', 'Add dependant')} hasUnsavedChanges={false}>
+      <Form onSubmit={handleSubmit(onSubmit)} className={styles.workspaceForm}>
+        <Row className={styles.workspaceContent}>
+          <Column>
+            <Controller
+              name="givenName"
+              control={control}
+              render={({ field, fieldState }) => (
+                <TextInput
+                  id="addDependantGivenName"
+                  labelText={t('givenName', 'Given name')}
+                  value={field.value ?? ''}
+                  onChange={field.onChange}
+                  invalid={Boolean(fieldState.error)}
+                  invalidText={fieldState.error?.message}
+                />
+              )}
+            />
+          </Column>
+
+          <Column>
+            <Controller
+              name="middleName"
+              control={control}
+              render={({ field, fieldState }) => (
+                <TextInput
+                  id="addDependantMiddleName"
+                  labelText={t('middleNameOptional', 'Middle name (optional)')}
+                  value={field.value ?? ''}
+                  onChange={field.onChange}
+                  invalid={Boolean(fieldState.error)}
+                  invalidText={fieldState.error?.message}
+                />
+              )}
+            />
+          </Column>
+
+          <Column>
+            <Controller
+              name="familyName"
+              control={control}
+              render={({ field, fieldState }) => (
+                <TextInput
+                  id="addDependantFamilyName"
+                  labelText={t('familyName', 'Family name')}
+                  value={field.value ?? ''}
+                  onChange={field.onChange}
+                  invalid={Boolean(fieldState.error)}
+                  invalidText={fieldState.error?.message}
+                />
+              )}
+            />
+          </Column>
+
+          <Column>
+            <Controller
+              name="dateOfBirth"
+              control={control}
+              render={({ field, fieldState }) => (
+                <ResponsiveWrapper>
+                  <OpenmrsDatePicker
+                    {...field}
+                    id="addDependantDateOfBirth"
+                    labelText={t('dateOfBirth', 'Date of birth')}
+                    value={field.value as Date}
+                    minDate={oneYearAgo()}
+                    maxDate={new Date()}
+                    invalid={Boolean(fieldState.error)}
+                    invalidText={fieldState.error?.message}
+                  />
+                </ResponsiveWrapper>
+              )}
+            />
+          </Column>
+
+          <Column>
+            <Controller
+              name="sex"
+              control={control}
+              render={({ field: { onChange, value }, fieldState }) => (
+                <RadioButtonGroup
+                  legendText={t('sex', 'Sex')}
+                  orientation="horizontal"
+                  name="addDependantSex"
+                  valueSelected={value ?? ''}
+                  // Load-bearing: without it Carbon's internal state ignores a
+                  // programmatic change to the selected value.
+                  key={value ?? 'empty'}
+                  onChange={(selected) => onChange(selected)}
+                  invalid={Boolean(fieldState.error)}
+                  invalidText={fieldState.error?.message}>
+                  <RadioButton value="F" id="addDependantSexFemale" labelText={t('female', 'Female')} />
+                  <RadioButton value="M" id="addDependantSexMale" labelText={t('male', 'Male')} />
+                </RadioButtonGroup>
+              )}
+            />
+          </Column>
+          {submitError && (
+            <InlineNotification
+              className={styles.notification}
+              kind="error"
+              lowContrast
+              hideCloseButton
+              title={t('dependantAddFailedTitle', 'Could not add dependant')}
+              subtitle={submitError}
+            />
+          )}
+        </Row>
+
+        <ButtonSet className={styles.workspaceButtonSet}>
+          <Button kind="secondary" onClick={() => closeWorkspace()}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button kind="primary" type="submit" disabled={isSubmitting}>
+            {t('save', 'Save')}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
+  );
+};
+
+export default AddDependantWorkspace;

package/src/config-schema.ts

@@ -0,0 +1,67 @@
+import { Type } from '@openmrs/esm-framework';
+
+export const configSchema = {
+  pcsIdentifiers: {
+    _type: Type.Object,
+    _description: 'PBIDS study identifier types.',
+    _default: {
+      studyParticipantID: 'e65e699e-6b56-4be4-8d8b-14ead2de408d',
+      studyTemporaryParticipantID: 'ad7d9813-1bc7-4e7e-b730-20a55f50b8e0',
+    },
+  },
+  pcsAttributeTypes: {
+    _type: Type.Object,
+    _description: 'PCS study person attribute types. Both are java.lang.Boolean format.',
+    _default: {
+      pbidsEnrollmentStatus: '4fbf219b-8965-418a-b6d7-53229eeeb18f',
+      cardseEnrollmentStatus: 'a49c97f9-a571-47da-88ee-ed2c8558f8f4',
+    },
+  },
+  nationalIdUUID: {
+    _type: Type.String,
+    _description: 'The patient identifier type UUID for the national ID. Also set in express-workflow.',
+    _default: '49af6cdc-7968-4abb-bf46-de10d7f4859f',
+  },
+  phoneAttributeTypeUUID: {
+    _type: Type.String,
+    _description: 'The person attribute type UUID for the telephone contact number. Also set in express-workflow.',
+    _default: 'b2c38640-2603-4629-aebd-3b54f33f1e3a',
+  },
+  shaNumberUUID: {
+    _type: Type.String,
+    _description: 'The patient identifier type UUID for the SHA membership number. Also set in express-workflow.',
+    _default: '52c3c0c3-05b8-4b26-930e-2a6a54e14c90',
+  },
+  passportUUID: {
+    _type: Type.String,
+    _description: 'The patient identifier type UUID for the passport number. Also set in express-workflow.',
+    _default: 'be9beef6-aacc-4e1f-ac4e-5babeaa1e303',
+  },
+  birthCertificateUUID: {
+    _type: Type.String,
+    _description: 'The patient identifier type UUID for the birth certificate number. Also set in express-workflow.',
+    _default: '68449e5a-8829-44dd-bfef-c9c8cf2cb9b2',
+  },
+  crIdentificationNumberUUID: {
+    _type: Type.String,
+    _description: 'The patient identifier type UUID for the client registry (CR) number, the HIE sha-id-number.',
+    _default: '24aedd37-b5be-4e08-8311-3721b8d5100d',
+  },
+};
+
+export interface PcsConfig {
+  pcsIdentifiers: {
+    studyParticipantID: string;
+    studyTemporaryParticipantID: string;
+  };
+  pcsAttributeTypes: {
+    pbidsEnrollmentStatus: string;
+    cardseEnrollmentStatus: string;
+  };
+  nationalIdUUID: string;
+  phoneAttributeTypeUUID: string;
+  shaNumberUUID: string;
+  passportUUID: string;
+  birthCertificateUUID: string;
+  crIdentificationNumberUUID: string;
+}

package/src/declarations.d.ts

@@ -0,0 +1,2 @@
+declare module '*.css';
+declare module '*.scss';