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

package/src/modals/link-dependant.modal.tsx

@@ -0,0 +1,244 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  InlineLoading,
+  InlineNotification,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  RadioButton,
+  RadioButtonGroup,
+  StructuredListBody,
+  StructuredListCell,
+  StructuredListRow,
+  StructuredListWrapper,
+} from '@carbon/react';
+import { showSnackbar, useConfig } from '@openmrs/esm-framework';
+
+import { type PcsConfig } from '../config-schema';
+import { useIdentifierTypeUuids } from '../resources/use-identifier-type-uuids';
+import { getDependentsFromContacts } from '../resources/hie-contacts';
+import { formatParticipantName, getPrimaryContact } from '../resources/pcs.resource';
+import {
+  createAndLinkFromParticipant,
+  linkDependantToParticipant,
+  useHieDependantLinkState,
+} from '../resources/link-dependant.resource';
+import { type PcsParticipant } from '../types';
+import styles from './link-participant.scss';
+
+interface LinkDependantModalProps {
+  closeModal: () => void;
+  /** The PCS dependant being linked to. */
+  participant: PcsParticipant;
+  /** The mother's HIE record — her `contact` array is the candidate list. */
+  hiePatient?: fhir.Patient;
+  parentPhoneNumber?: string;
+  onLinked?: () => void;
+}
+
+/** Sentinel for "PCS knows this child, the HIE does not". */
+const PCS_DETAILS_OPTION = '__pcs_details__';
+
+const LinkDependantModal: React.FC<LinkDependantModalProps> = ({
+  closeModal,
+  participant,
+  hiePatient,
+  parentPhoneNumber,
+  onLinked,
+}) => {
+  const { t } = useTranslation();
+  const uuids = useIdentifierTypeUuids();
+  const { pcsIdentifiers, pcsAttributeTypes, nationalIdUUID, phoneAttributeTypeUUID } = useConfig<PcsConfig>();
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [isLinking, setIsLinking] = useState(false);
+  const [linkError, setLinkError] = useState<string | null>(null);
+
+  // Read straight off the record already in hand — no request.
+  const candidates = useMemo(() => (hiePatient ? getDependentsFromContacts(hiePatient as any) : []), [hiePatient]);
+  const isFromPcsDetails = selectedId === PCS_DETAILS_OPTION;
+  const selected = candidates.find((candidate) => candidate.id === selectedId);
+  const yesNo = (flag: boolean) => (flag ? t('yes', 'Yes') : t('no', 'No'));
+  const primaryContact = getPrimaryContact(participant);
+
+  // A candidate already linked to some participant must not be offered: linking them again
+  // would re-point that child from one participant to another.
+  const { linkedById, isChecking } = useHieDependantLinkState(candidates, [
+    pcsIdentifiers.studyParticipantID,
+    pcsIdentifiers.studyTemporaryParticipantID,
+  ]);
+
+  const handleLink = async () => {
+    if (!selected && !isFromPcsDetails) {
+      return;
+    }
+    setLinkError(null);
+    setIsLinking(true);
+    try {
+      const studyTypes = {
+        studyParticipantIdentifierType: pcsIdentifiers.studyParticipantID,
+        pbidsEnrollmentAttributeType: pcsAttributeTypes.pbidsEnrollmentStatus,
+        cardseEnrollmentAttributeType: pcsAttributeTypes.cardseEnrollmentStatus,
+      };
+
+      if (isFromPcsDetails) {
+        // The participant already holds a permanent individualId, so this stamps that —
+        // nothing temporary is minted and PCS keeps one record for the child.
+        await createAndLinkFromParticipant({ participant, nationalIdUUID, phoneAttributeTypeUUID, ...studyTypes });
+      } else {
+        await linkDependantToParticipant({
+          dependant: selected!,
+          parentPhoneNumber,
+          participant,
+          ...studyTypes,
+          uuids,
+        });
+      }
+      showSnackbar({
+        title: t('participantLinked', 'Records linked'),
+        subtitle: t('participantLinkedSubtitle', 'The patient is now linked to PCS participant {{individualId}}.', {
+          individualId: participant.individualId,
+        }),
+        kind: 'success',
+        isLowContrast: true,
+      });
+      onLinked?.();
+      closeModal();
+    } catch (e: any) {
+      // A study ID already held by another patient comes back from OpenMRS as a duplicate
+      // identifier error — worth showing verbatim.
+      setLinkError(
+        e?.responseBody?.error?.message ??
+          e?.message ??
+          t('participantLinkFailedSubtitle', 'The patient record could not be updated.'),
+      );
+    } finally {
+      setIsLinking(false);
+    }
+  };
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={t('linkDependantToPcs', 'Link dependant to PCS')} />
+      <ModalBody>
+        <div className={styles.comparison}>
+          <div className={styles.side}>
+            <span className={styles.sideLabel}>{t('pcsParticipant', 'PCS participant')}</span>
+            <span className={styles.sideValue}>{formatParticipantName(participant)}</span>
+          </div>
+          <div className={styles.side}>
+            <span className={styles.sideLabel}>{t('individualId', 'Individual ID')}</span>
+            <span className={styles.sideValue}>{participant.individualId}</span>
+          </div>
+        </div>
+
+        <p className={styles.willWrite}>{t('mothersDependantsInHie', "Mother's dependants in the HIE")}</p>
+
+        {candidates.length === 0 && (
+          <p className={styles.note}>{t('noHieDependants', 'The HIE record lists no dependants for this mother.')}</p>
+        )}
+
+        {/* The PCS-details option is always offered, including when the mother has no HIE
+            contacts at all — which is exactly the case it exists for. */}
+        <RadioButtonGroup
+          name="hieDependant"
+          orientation="vertical"
+          valueSelected={selectedId ?? undefined}
+          onChange={(value) => setSelectedId(String(value))}>
+          {candidates.map((candidate) => {
+            const linkedTo = linkedById[candidate.id];
+
+            return (
+              <RadioButton
+                key={candidate.id}
+                value={candidate.id}
+                // Disabled while the check runs too, so nothing can be picked in the window
+                // before its state is known.
+                disabled={isChecking || Boolean(linkedTo)}
+                labelText={`${candidate.name} · ${candidate.relationship} · ${candidate.gender}${
+                  candidate.birthDate && candidate.birthDate !== 'Unknown' ? ` · ${candidate.birthDate}` : ''
+                }${
+                  linkedTo
+                    ? ` — ${t('alreadyLinkedTo', 'already linked to {{individualId}}', { individualId: linkedTo })}`
+                    : ''
+                }`}
+              />
+            );
+          })}
+          <RadioButton
+            value={PCS_DETAILS_OPTION}
+            labelText={t('notInHie', 'Not in the HIE — create from PCS details')}
+          />
+        </RadioButtonGroup>
+
+        {isFromPcsDetails && (
+          <p className={styles.note}>
+            {t(
+              'willCreateFromPcsDetails',
+              'A patient will be created as {{name}} · {{sex}}{{dateOfBirth}}{{contact}}.',
+              {
+                name: formatParticipantName(participant),
+                sex: participant.sex,
+                dateOfBirth: participant.dateOfBirth ? ` · ${participant.dateOfBirth}` : '',
+                contact: primaryContact?.nationalId ? ` · ${primaryContact.nationalId}` : '',
+              },
+            )}
+          </p>
+        )}
+
+        {(selected || isFromPcsDetails) && (
+          <>
+            <p className={styles.willWrite}>
+              {t('willBeWritten', 'The following will be written to the patient record')}
+            </p>
+            <StructuredListWrapper isCondensed selection={false}>
+              <StructuredListBody>
+                {(
+                  [
+                    [t('studyParticipantId', 'Study participant ID'), participant.individualId],
+                    [t('pbidsEnrollment', 'PBIDS enrollment'), yesNo(participant.pbidsEnrolled)],
+                    [t('cardseEnrollment', 'CARDSE enrollment'), yesNo(participant.cardse)],
+                  ] as Array<[string, string]>
+                ).map(([label, value]) => (
+                  <StructuredListRow key={label}>
+                    <StructuredListCell>{label}</StructuredListCell>
+                    <StructuredListCell className={styles.value}>{value}</StructuredListCell>
+                  </StructuredListRow>
+                ))}
+              </StructuredListBody>
+            </StructuredListWrapper>
+          </>
+        )}
+
+        {linkError && (
+          <InlineNotification
+            className={styles.notification}
+            kind="error"
+            lowContrast
+            hideCloseButton
+            title={t('participantLinkFailed', 'Could not link records')}
+            subtitle={linkError}
+          />
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal} disabled={isLinking}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="primary" onClick={handleLink} disabled={isLinking || (!selected && !isFromPcsDetails)}>
+          {isLinking ? (
+            <InlineLoading description={t('linkingRecords', 'Linking records...')} />
+          ) : isFromPcsDetails ? (
+            // This branch creates the patient before linking, so say so before it's pressed.
+            t('createAndLinkRecords', 'Create and link records')
+          ) : (
+            t('linkRecords', 'Link records')
+          )}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default LinkDependantModal;

package/src/modals/link-participant.modal.tsx

@@ -0,0 +1,143 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  InlineLoading,
+  InlineNotification,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  StructuredListBody,
+  StructuredListCell,
+  StructuredListRow,
+  StructuredListWrapper,
+} from '@carbon/react';
+import { showSnackbar, useConfig } from '@openmrs/esm-framework';
+
+import { type PcsConfig } from '../config-schema';
+import { useIdentifierTypeUuids } from '../resources/use-identifier-type-uuids';
+import { formatParticipantName } from '../resources/pcs.resource';
+import { linkParticipantToPatient } from '../resources/link-participant.resource';
+import { type PcsParticipant, type PcsSearchSubject } from '../types';
+import styles from './link-participant.scss';
+
+interface LinkParticipantModalProps {
+  closeModal: () => void;
+  subject: PcsSearchSubject;
+  participant: PcsParticipant;
+  onLinked?: () => void;
+}
+
+const LinkParticipantModal: React.FC<LinkParticipantModalProps> = ({ closeModal, subject, participant, onLinked }) => {
+  const { t } = useTranslation();
+  const uuids = useIdentifierTypeUuids();
+  const { pcsIdentifiers, pcsAttributeTypes } = useConfig<PcsConfig>();
+  const [isLinking, setIsLinking] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Written as booleans; shown as Yes/No because that is what a person reads.
+  const yesNo = (flag: boolean) => (flag ? t('yes', 'Yes') : t('no', 'No'));
+
+  const rows: Array<[string, string]> = [
+    [t('studyParticipantId', 'Study participant ID'), participant.individualId],
+    [t('pbidsEnrollment', 'PBIDS enrollment'), yesNo(participant.pbidsEnrolled)],
+    [t('cardseEnrollment', 'CARDSE enrollment'), yesNo(participant.cardse)],
+  ];
+
+  const handleLink = async () => {
+    setError(null);
+    setIsLinking(true);
+    try {
+      await linkParticipantToPatient({
+        subject,
+        participant,
+        studyParticipantIdentifierType: pcsIdentifiers.studyParticipantID,
+        pbidsEnrollmentAttributeType: pcsAttributeTypes.pbidsEnrollmentStatus,
+        cardseEnrollmentAttributeType: pcsAttributeTypes.cardseEnrollmentStatus,
+        uuids,
+      });
+      showSnackbar({
+        title: t('participantLinked', 'Records linked'),
+        subtitle: t('participantLinkedSubtitle', 'The patient is now linked to PCS participant {{individualId}}.', {
+          individualId: participant.individualId,
+        }),
+        kind: 'success',
+        isLowContrast: true,
+      });
+      onLinked?.();
+      closeModal();
+    } catch (e: any) {
+      // Surface the server's own wording — a duplicate study ID or a concept-format
+      // attribute type both come back with a message worth reading.
+      const message =
+        e?.responseBody?.error?.message ??
+        e?.message ??
+        t('participantLinkFailedSubtitle', 'The patient record could not be updated.');
+      setError(message);
+    } finally {
+      setIsLinking(false);
+    }
+  };
+
+  return (
+    <>
+      <ModalHeader closeModal={closeModal} title={t('linkToPcsParticipant', 'Link to PCS participant')} />
+      <ModalBody>
+        <div className={styles.comparison}>
+          <div className={styles.side}>
+            <span className={styles.sideLabel}>{t('emrPatient', 'EMR patient')}</span>
+            <span className={styles.sideValue}>{subject.name}</span>
+          </div>
+          <div className={styles.side}>
+            <span className={styles.sideLabel}>{t('pcsParticipant', 'PCS participant')}</span>
+            <span className={styles.sideValue}>{formatParticipantName(participant)}</span>
+          </div>
+        </div>
+
+        <p className={styles.willWrite}>{t('willBeWritten', 'The following will be written to the patient record')}</p>
+
+        <StructuredListWrapper isCondensed selection={false}>
+          <StructuredListBody>
+            {rows.map(([label, value]) => (
+              <StructuredListRow key={label}>
+                <StructuredListCell>{label}</StructuredListCell>
+                <StructuredListCell className={styles.value}>{value}</StructuredListCell>
+              </StructuredListRow>
+            ))}
+          </StructuredListBody>
+        </StructuredListWrapper>
+
+        {subject.source === 'hie' && (
+          <p className={styles.note}>
+            {t('patientWillBeCreated', 'This patient is not registered here yet and will be created first.')}
+          </p>
+        )}
+
+        {error && (
+          <InlineNotification
+            className={styles.notification}
+            kind="error"
+            lowContrast
+            hideCloseButton
+            title={t('participantLinkFailed', 'Could not link records')}
+            subtitle={error}
+          />
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={closeModal} disabled={isLinking}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button kind="primary" onClick={handleLink} disabled={isLinking}>
+          {isLinking ? (
+            <InlineLoading description={t('linkingRecords', 'Linking records...')} />
+          ) : (
+            t('linkRecords', 'Link records')
+          )}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default LinkParticipantModal;

package/src/modals/link-participant.scss

@@ -0,0 +1,48 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.comparison {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
+}
+
+.side {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-02;
+  min-width: 0;
+}
+
+.sideLabel {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+}
+
+.sideValue {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-100;
+}
+
+.willWrite {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-03;
+}
+
+.value {
+  font-weight: 600;
+}
+
+.note {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  margin-top: layout.$spacing-04;
+}
+
+.notification {
+  margin-top: layout.$spacing-04;
+  max-width: 100%;
+}

package/src/pcs.scss

@@ -0,0 +1,241 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.pcsColumn {
+  width: 100%;
+  min-width: 0;
+  margin-top: layout.$spacing-05;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-04;
+  background-color: colors.$white;
+  border: 1px solid colors.$gray-20;
+  border-radius: 4px;
+  padding: layout.$spacing-04;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    margin-top: layout.$spacing-04;
+    padding: layout.$spacing-03;
+  }
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-02;
+    border-radius: 2px;
+  }
+}
+
+.pcsHeader {
+  padding-bottom: layout.$spacing-02;
+}
+
+.pcsTitle {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-100;
+  display: block;
+}
+
+.pcsFilters {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+  padding-bottom: layout.$spacing-03;
+}
+
+.pcsFilterRow {
+  display: flex;
+  align-items: flex-end;
+  gap: layout.$spacing-02;
+}
+
+.pcsFilterTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-02;
+}
+
+.pcsFilterActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: layout.$spacing-02;
+}
+
+.pcsFilterHint {
+  @include type.type-style('label-01');
+  color: colors.$red-60;
+}
+
+.pcsResults {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+}
+
+.pcsResultsCount {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+}
+
+.pcsLinkedBanner {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-02;
+  padding: layout.$spacing-03;
+  background-color: colors.$green-10;
+  border-left: 3px solid colors.$green-50;
+  border-radius: 4px;
+}
+
+.pcsLinkedTitle {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-100;
+}
+
+.pcsLinkedSubtitle {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+}
+
+.pcsLinkedActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-02;
+  margin-top: layout.$spacing-02;
+}
+
+/* Same dashed rule as .pcsContacts, so the banner has one divider style rather than two. */
+.pcsLinkedQuestions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: layout.$spacing-01;
+  margin-top: layout.$spacing-02;
+  padding-top: layout.$spacing-02;
+  border-top: 1px dashed colors.$gray-20;
+}
+
+.pcsContacts {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+  padding-top: layout.$spacing-02;
+  border-top: 1px dashed colors.$gray-20;
+}
+
+.pcsLinkError {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-02;
+  padding: layout.$spacing-04;
+  text-align: center;
+}
+
+.pcsTile {
+  background-color: colors.$gray-10;
+  border: 1px solid colors.$gray-20;
+  border-left: 3px solid colors.$gray-40;
+  border-radius: 4px;
+  padding: layout.$spacing-03;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-02;
+  position: relative;
+}
+
+.pcsName {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-100;
+}
+
+.pcsRow {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: layout.$spacing-02;
+}
+
+.pcsTileActions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: layout.$spacing-02;
+  padding-top: layout.$spacing-02;
+  border-top: 1px solid colors.$gray-20;
+}
+
+.pcsHousehold {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  padding-top: layout.$spacing-02;
+}
+
+.pcsFieldLabel {
+  color: colors.$gray-60;
+}
+
+.separator {
+  color: colors.$gray-40;
+}
+
+.genderIcon {
+  display: inline-flex;
+  align-items: center;
+  gap: layout.$spacing-02;
+
+  svg {
+    fill: colors.$gray-70;
+  }
+}
+
+.matchTag {
+  position: absolute;
+  top: layout.$spacing-03;
+  right: layout.$spacing-03;
+}
+
+/* In-flow tags. Zeroing Carbon's own tag margin leaves the parent row's `gap` as the single
+   source of spacing, so several can sit side by side. */
+.enrollmentTag {
+  margin: 0;
+}
+
+.pcsLoading {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+}
+
+.pcsSkeletonTile {
+  border: 1px solid colors.$gray-20;
+  border-radius: 4px;
+  padding: layout.$spacing-03;
+}
+
+.pcsEmptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  min-height: 12rem;
+  row-gap: layout.$spacing-02;
+  padding: layout.$spacing-04;
+
+  svg {
+    width: 140px;
+    height: 70px;
+  }
+
+  .pcsEmptyTitle {
+    @include type.type-style('heading-compact-01');
+    color: colors.$cool-gray-70;
+  }
+
+  .pcsEmptySubtitle {
+    @include type.type-style('label-01');
+    color: colors.$cool-gray-70;
+  }
+}