@ampath/esm-dha-workflow-app 4.0.0-next.34 → 4.0.0-next.340

package/src/billing/dashboard/v3/claim-visits/modal/close-claim/close-claim.modal.tsx

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import { Modal, ModalBody, Select, SelectItem, TextInput } from '@carbon/react';
+import styles from './close-claim.modal.scss';
+import { addClaimItem, closeClaim } from '../../../../../billing-claims.resource';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { ClaimCloseReasonType, type CloseClaimDto } from '../../../types';
+
+interface closeClaimModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  consentToken: string;
+  locationUuid: string;
+}
+const CloseClaimModal: React.FC<closeClaimModalProps> = ({ open, onClose, onSuccess, locationUuid, consentToken }) => {
+  const [loading, setLoading] = useState<boolean>(false);
+  const [cancelReasonType, setCancelReasonType] = useState<string>('');
+  const [cancelReason, setCancelReason] = useState<string>('');
+  const closeClaimReasonTypes = Object.values(ClaimCloseReasonType);
+  async function handleCloseClaim() {
+    setLoading(true);
+    try {
+      const closeClaimPayload = getCloseClaimPayload();
+      if (!isValidClaimClosePayload(closeClaimPayload)) {
+        return false;
+      }
+
+      const resp = await closeClaim(closeClaimPayload);
+      if ('error' in resp) {
+        showSnackbar({
+          title: 'Error Closing claim',
+          kind: 'error',
+          subtitle: 'An error occurred while closing the claim. Kindy retry or contact support',
+        });
+        onSuccess();
+      } else {
+        showSnackbar({
+          title: 'Sucess Closing Claim',
+          kind: 'success',
+          subtitle: 'Claim closed successfully',
+        });
+        onSuccess();
+      }
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Error Closing Claim',
+        subtitle: 'An error occurred while closing the claim. Kindy retry or contact support',
+      });
+    } finally {
+      setLoading(false);
+    }
+  }
+  function getCloseClaimPayload(): CloseClaimDto {
+    return {
+      consentToken: consentToken,
+      cancelReasonType: cancelReasonType ?? '',
+      cancelReasonText: cancelReason ?? '',
+      locationUuid: locationUuid,
+    };
+  }
+  function holderFunction() {
+    return;
+  }
+  function cancelClaimReasonTypeHandler(cancelReasonType: string) {
+    setCancelReasonType(cancelReasonType);
+  }
+  function cancelClaimReasonHandler(cancelReason: string) {
+    setCancelReason(cancelReason);
+  }
+  function isValidClaimClosePayload(closeClaimDto: CloseClaimDto): boolean {
+    if (!closeClaimDto.cancelReasonText) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Missing Cancel Reason',
+        subtitle: 'Please add a cancel reason',
+      });
+      return false;
+    }
+    if (!closeClaimDto.cancelReasonType) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Missing Cancel Reason Type',
+        subtitle: 'Please add a cancel reason type',
+      });
+      return false;
+    }
+    return true;
+  }
+  return (
+    <>
+      <Modal
+        modalHeading="Close Claim"
+        open={open}
+        size="md"
+        onSecondarySubmit={onClose}
+        onRequestClose={onClose}
+        onRequestSubmit={loading ? holderFunction : handleCloseClaim}
+        primaryButtonText={loading ? 'Closing Claim...' : 'Close Claim'}
+        secondaryButtonText="Close"
+      >
+        <ModalBody>
+          <div className={styles.closeClaimModalLayout}>
+            <div className={styles.closeClaimModalRow}>
+              <Select
+                id="cancel_reason_type"
+                labelText="Cancel Reason Type"
+                onChange={($event) => cancelClaimReasonTypeHandler($event.target.value)}
+              >
+                <SelectItem value="" text="Select" />;
+                {closeClaimReasonTypes.map((c) => {
+                  return <SelectItem value={c} text={c} />;
+                })}
+              </Select>
+            </div>
+            <div className={styles.closeClaimModalRow}>
+              <TextInput
+                id="cancel_reason_text"
+                labelText="Cancel Reason"
+                onChange={($event) => cancelClaimReasonHandler($event.target.value)}
+              />
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+export default CloseClaimModal;

package/src/billing/dashboard/v3/claim-visits/modal/submit-claim/submit-claim.modal.tsx

@@ -0,0 +1,204 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import dayjs from 'dayjs';
+import { Button, Modal, ModalBody, Row, Select, SelectItem, TextInput } from '@carbon/react';
+import { submitClaim } from '../../../../../billing-claims.resource';
+import { Patient, showModal, showSnackbar } from '@openmrs/esm-framework';
+import { DischargeReasonType, type ClaimsVisit, type SubmitClaimDto } from '../../../types';
+import { type HieClient, HieIdentificationType } from '../../../../../../registry/types';
+import { Intervention, VisitType } from '../../../../../../claims';
+import { searchPatientByCrNumber } from '../../../../../../resources/patient-search.resource';
+import { IdentifierTypesUuids } from '../../../../../../resources/identifier-types';
+import ClaimsConsentExtension from '../../../../../../registry/modal/otp-verification-modal/extension/claims-consent.extension';
+
+interface submitClaimModalProps {
+    open: boolean;
+    onClose: () => void;
+    onSuccess: () => void;
+    claimsVisit: ClaimsVisit;
+    invoiceNumber: string;
+    locationUuid: string;
+    visitType: VisitType;
+}
+const SubmitClaimModal: React.FC<submitClaimModalProps> = ({ open, onClose, onSuccess, locationUuid, claimsVisit, invoiceNumber, visitType }) => {
+    const [loading, setLoading] = useState<boolean>(false);
+    const [otp, setOtp] = useState("");
+    const [authGuid, setAuthGuid] = useState("");
+    const [dischargeReason, setDischargeReason] = useState<DischargeReasonType>();
+    const [notes, setNotes] = useState("");
+    const DischargeReasonTypes = Object.values(DischargeReasonType);
+    const [patient, setPatient] = useState<Patient>();
+
+    useEffect(() => {
+        const fn = async () => {
+            const response = await searchPatientByCrNumber(claimsVisit.member_number);
+            if (response.results.length) {
+                setPatient(response.results[0]);
+            }
+        }
+
+        if (claimsVisit) {
+            fn();
+        }
+    }, [claimsVisit]);
+
+    const consentComplete = useMemo(() => {
+        if (otp || authGuid) {
+            return true;
+        }
+        return false;
+    }, [otp, authGuid]);
+
+    const invalidValues = useMemo(() => {
+        if (invoiceNumber && claimsVisit) {
+            return false;
+        }
+        return true;
+    }, [invoiceNumber, claimsVisit]);
+
+    function onClientConsent({ otp, authGuid }: { otp?: string, authGuid?: string }) {
+        if (otp) {
+            setOtp(otp);
+        }
+        if (authGuid) {
+            setAuthGuid(authGuid);
+        }
+    }
+
+    const nationalId = useMemo(() => {
+        if (patient) {
+            const identifiers = patient.identifiers;
+            return identifiers.find(i => i.identifierType.uuid === IdentifierTypesUuids.NATIONAL_ID_UUID)?.identifier ?? "";
+        }
+    }, [patient]);
+
+    // Under-18 clients skip biometric verification and whitelisting further down in
+    // ClaimsConsentExtension — mirrors send-to-queue.modal.tsx's isMinor check, but reads
+    // the OpenMRS REST person shape (person.age / person.birthdate) since this patient
+    // comes from searchPatientByCrNumber rather than the FHIR-shaped usePatient().
+    const isMinor = useMemo(() => {
+        const age = patient?.person?.age;
+        if (typeof age === 'number') {
+            return age < 18;
+        }
+        const birthdate = patient?.person?.birthdate;
+        if (!birthdate) {
+            return false;
+        }
+        const computedAge = dayjs().diff(dayjs(birthdate), 'year');
+        return Number.isFinite(computedAge) && computedAge < 18;
+    }, [patient]);
+
+    const consentPatient = useMemo<HieClient>(() => {
+        return {
+            id: String(claimsVisit.member_number),
+            first_name: claimsVisit.patient_name ?? '',
+            identification_type: HieIdentificationType.NationalID,
+            identification_number: nationalId ? String(nationalId) : ""
+        } as unknown as HieClient;
+    }, [claimsVisit, nationalId]);
+
+    const getIntervention = () => {
+        const interventions = claimsVisit.interventions;
+        if (interventions && interventions.length) {
+            const intervention = interventions[interventions.length - 1];
+            return {
+                code: intervention.intervention_code,
+                paymentMechanism: intervention.intervention_payment_mechanism
+            } as Intervention;
+        }
+    }
+
+    async function handleSubmitClaim() {
+        setLoading(true);
+        try {
+            const submitClaimPayload = getSubmitClaimPayload();
+            const resp = await submitClaim(submitClaimPayload, claimsVisit.service_type);
+            if ('error' in resp) {
+                let message = 'message' in resp ? String(resp?.message) : "An error occurred while submitting the claim. Kindy retry or contact support"
+                showSnackbar({
+                    title: 'Error submitting claim',
+                    kind: 'error',
+                    subtitle: message,
+                });
+                onSuccess();
+            } else {
+                showSnackbar({
+                    title: 'Success submitting claim',
+                    kind: 'success',
+                    subtitle: 'Claim submitted successfully',
+                });
+                onSuccess();
+            }
+        } catch (error) {
+            showSnackbar({
+                kind: 'error',
+                title: 'Error submitting claim',
+                subtitle: 'An error occurred while submitting the claim. Kindy retry or contact support',
+            });
+        } finally {
+            setLoading(false);
+        }
+    }
+    function getSubmitClaimPayload(): SubmitClaimDto {
+        let payload = {
+            consentToken: claimsVisit.authorization_code,
+            invoiceNumber,
+            locationUuid,
+            dischargeReason
+        };
+        if (otp) {
+            payload["otp"] = otp;
+        }
+        if (authGuid) {
+            payload["dischargeAuthGuid"] = authGuid;
+        }
+        if (notes) {
+            payload["notes"] = notes;
+        }
+        return payload;
+    }
+    function holderFunction() {
+        return;
+    }
+    return (
+        <>
+            <Modal
+                modalHeading="Submit Claim"
+                open={open}
+                size="md"
+                onSecondarySubmit={onClose}
+                onRequestClose={onClose}
+                onRequestSubmit={!invalidValues ? (loading ? holderFunction : (consentComplete ? handleSubmitClaim : null)) : null}
+                primaryButtonText={!invalidValues ? (loading ? 'Submitting claim...' : (consentComplete ? 'Submit claim' : null)) : null}
+                secondaryButtonText="Close"
+            >
+                <ModalBody>
+                    <Row>
+                        <Select
+                            id="discharge-reason"
+                            labelText="Discharge reason"
+                            onChange={($event) => setDischargeReason($event.target.value as DischargeReasonType)}
+                        >
+                            <SelectItem value="" text="Select" />;
+                            {DischargeReasonTypes.map((c) => {
+                                return <SelectItem value={c} text={c} />;
+                            })}
+                        </Select>
+                    </Row>
+                    <Row>
+                        <TextInput
+                            id="notes"
+                            labelText="Notes"
+                            onChange={($event) => setNotes($event.target.value)}
+                        />
+                    </Row>
+                    {
+                        (dischargeReason && notes) &&
+                        <ClaimsConsentExtension patient={consentPatient} intervention={getIntervention()} crIdentifierId={claimsVisit.member_number} visitType={visitType} onClientConsent={onClientConsent} consentToken={claimsVisit.authorization_code} isDischarge={true} isMinor={isMinor}/>
+                    }
+                </ModalBody>
+            </Modal>
+        </>
+    );
+};
+export default SubmitClaimModal;

package/src/billing/dashboard/v3/claim-visits/payer-preview/index.scss

@@ -0,0 +1,140 @@
+@use '@carbon/layout';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/colors' as *;
+
+.detailsGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+    gap: layout.$spacing-05 layout.$spacing-06;
+    margin: 0;
+}
+
+.detailRow {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+
+    dt {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+        color: #6f6f6f;
+    }
+
+    dd {
+        margin: 0;
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: #161616;
+        overflow-wrap: anywhere;
+    }
+}
+
+.workspaceContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.tiles {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 $spacing-05;
+}
+ 
+.summaryTile {
+  margin-bottom: $spacing-03;
+}
+ 
+.summaryHeaderRow {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: $spacing-03;
+}
+ 
+.memberName {
+  @include type-style('heading-compact-02');
+}
+ 
+.memberMeta {
+  @include type-style('body-compact-01');
+  margin-top: $spacing-02;
+}
+ 
+.workflowNotification {
+  margin-top: $spacing-04;
+  max-width: 100%;
+}
+ 
+.summaryGrid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: $spacing-04;
+  margin-top: $spacing-05;
+}
+ 
+.label {
+  @include type-style('label-01');
+  margin-bottom: $spacing-02;
+}
+ 
+.value {
+  @include type-style('body-compact-01');
+  word-break: break-word;
+}
+
+.timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+ 
+.timelineItem {
+  display: flex;
+  align-items: flex-start;
+  gap: $spacing-04;
+  padding-bottom: $spacing-05;
+  position: relative;
+ 
+  &:not(:last-child)::before {
+    content: '';
+    position: absolute;
+    left: 3px;
+    top: $spacing-05;
+    bottom: 0;
+    width: 1px;
+  }
+}
+
+.timelineDot {
+  flex-shrink: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-top: $spacing-02;
+}
+
+ 
+.nestedTile {
+  margin-bottom: $spacing-04;
+}
+ 
+.tagGroup {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-02;
+  margin-top: $spacing-04;
+}
+ 
+.footer {
+  display: flex;
+}
+ 
+.footerButton {
+  flex: 1;
+  max-width: none;
+}

package/src/billing/dashboard/v3/claim-visits/payer-preview/payer-preview-tile.component.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect } from "react";
+import { PayerPreviewResult } from "../../../../types";
+import { Button, InlineLoading, Tile } from "@carbon/react";
+import styles from "./index.scss";
+import { launchWorkspace } from "@openmrs/esm-framework";
+import { AccessibilityColor } from "@carbon/react/icons";
+
+interface PayerPreviewTileProps {
+    isLoadingPayerPreview: boolean;
+    payerPreviewResult: PayerPreviewResult;
+}
+
+const PayerPreviewTile: React.FC<PayerPreviewTileProps> = ({ isLoadingPayerPreview, payerPreviewResult }) => {
+    const handlePayerPreview = () => {
+        launchWorkspace('payer-preview-workspace', {
+            payerPreviewResult
+        });
+    }
+
+    if (isLoadingPayerPreview) {
+        return <InlineLoading title='Loading payer preview...' />;
+    }
+
+    if (!isLoadingPayerPreview && !payerPreviewResult) {
+        return;
+    }
+
+    return (
+        <Tile
+            id="payer-preview"
+        >
+            <dd>Payer preview</dd>
+            <br />
+            <br />
+            {
+                (!isLoadingPayerPreview && payerPreviewResult) ?
+                    <>
+                        <dl className={styles.detailsGrid}>
+                            <div className={styles.detailRow}>
+                                <dt>Workflow state</dt>
+                                <dd>{payerPreviewResult.workflowState}</dd>
+                            </div>
+                            <div className={styles.detailRow}>
+                                <dt>Workflow display name</dt>
+                                <dd>{payerPreviewResult.workflowDisplayName}</dd>
+                            </div>
+                            <Button kind='tertiary' size="md" renderIcon={AccessibilityColor} onClick={handlePayerPreview}>View</Button>
+                        </dl>
+                    </> : <></>
+            }
+        </Tile>
+    )
+}
+
+export default PayerPreviewTile;

package/src/billing/dashboard/v3/claim-visits/payer-preview/payer-preview-workspace.component.tsx

@@ -0,0 +1,157 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+    Button,
+    ButtonSet,
+    Tag,
+    Tile,
+    InlineNotification,
+} from '@carbon/react';
+import { type DefaultWorkspaceProps, formatDate, parseDate } from '@openmrs/esm-framework';
+import styles from './index.scss';
+import { PayerPreviewResult } from '../../../../types';
+import PayerClaimDoctors from './tables/payer-claim-doctors.component';
+import PayerClaimNotes from './tables/payer-claim-notes.component';
+import PayerClaimLines from './tables/payer-claim-lines.component';
+import PayerDiagnoses from './tables/payer-diagnoses.component';
+import PayerInterventions from './tables/payer-interventions.component';
+
+export interface ClaimDetailsWorkspaceProps extends DefaultWorkspaceProps {
+    payerPreviewResult: PayerPreviewResult;
+}
+
+const workflowStateTagType: Record<string, 'red' | 'blue' | 'purple' | 'cyan' | 'gray' | 'green'> = {
+    SENT_BACK: 'red',
+    REJECTED: 'red',
+    AUTOMATIC_CHECKS_DONE: 'blue',
+    SUBMITTED_PAYER: 'purple',
+    SUBMITTED_PROVIDER: 'cyan',
+    DRAFT_PROVIDER: 'gray',
+    APPROVED: 'green',
+};
+
+function getWorkflowTagType(state: string) {
+    return workflowStateTagType[state] ?? 'gray';
+}
+
+function humanizeState(state: string) {
+    return state.replace(/_/g, ' ');
+}
+
+function formatMoney(value: string) {
+    const amount = Number(value);
+    return Number.isNaN(amount) ? value : amount.toLocaleString(undefined, { minimumFractionDigits: 2 });
+}
+
+const PayerPreviewWorkspace: React.FC<ClaimDetailsWorkspaceProps> = ({ payerPreviewResult, closeWorkspace }) => {
+    const { t } = useTranslation();
+
+    const orderedTransitions = useMemo(
+        () =>
+            [...payerPreviewResult.claimTransitions].sort(
+                (a, b) => new Date(b.transitionDate).getTime() - new Date(a.transitionDate).getTime(),
+            ),
+        [payerPreviewResult.claimTransitions],
+    );
+
+    return (
+        <div className={styles.workspaceContainer}>
+            <div className={styles.tiles}>
+                <Tile className={styles.summaryTile}>
+                    <div className={styles.summaryHeaderRow}>
+                        <div>
+                            <p className={styles.memberName}>{payerPreviewResult.memberName}</p>
+                            <p className={styles.memberMeta}>
+                                {t('memberNumber', 'Member No.')} {payerPreviewResult.memberNumber} · {payerPreviewResult.schemeName}
+                            </p>
+                        </div>
+                        <Tag type={getWorkflowTagType(payerPreviewResult.workflowState)} size="md">
+                            {humanizeState(payerPreviewResult.workflowState)}
+                        </Tag>
+                    </div>
+
+                    {payerPreviewResult.workflowDisplayName && (
+                        <InlineNotification
+                            kind={payerPreviewResult.workflowState === 'SENT_BACK' ? 'warning' : 'info'}
+                            title={payerPreviewResult.workflowDisplayName}
+                            lowContrast
+                            hideCloseButton
+                            className={styles.workflowNotification}
+                        />
+                    )}
+
+                    <div className={styles.summaryGrid}>
+                        <div>
+                            <p className={styles.label}>{t('provider', 'Provider')}</p>
+                            <p className={styles.value}>{payerPreviewResult.providerName}</p>
+                        </div>
+                        <div>
+                            <p className={styles.label}>{t('claimType', 'Claim type')}</p>
+                            <p className={styles.value}>{payerPreviewResult.claimType}</p>
+                        </div>
+                        <div>
+                            <p className={styles.label}>{t('trackingNumber', 'Tracking No.')}</p>
+                            <p className={styles.value}>{payerPreviewResult.trackingNumber}</p>
+                        </div>
+                        <div>
+                            <p className={styles.label}>{t('providerClaimNo', 'Provider claim No.')}</p>
+                            <p className={styles.value}>{payerPreviewResult.providerClaimNo}</p>
+                        </div>
+                        <div>
+                            <p className={styles.label}>{t('billPeriod', 'Bill period')}</p>
+                            <p className={styles.value}>
+                                {formatDate(parseDate(payerPreviewResult.billFrom))} – {formatDate(parseDate(payerPreviewResult.billTo))}
+                            </p>
+                        </div>
+                        <div>
+                            <p className={styles.label}>{t('proposedValue', 'Proposed value')}</p>
+                            <p className={styles.value}>KES {formatMoney(payerPreviewResult.proposedValueLessCopays)}</p>
+                        </div>
+                    </div>
+                </Tile>
+                <br />
+                <br />
+                <PayerClaimNotes claimNotes={payerPreviewResult.claimNotes} />
+                <br />
+                <br />
+                <PayerClaimDoctors claimDoctors={payerPreviewResult.claimDoctors} />
+                <br />
+                <br />
+                <PayerDiagnoses diagnoses={payerPreviewResult.diagnoses} />
+                <br />
+                <br />
+                <PayerInterventions interventions={payerPreviewResult.authorization.interventions} />
+                <br />
+                <br />
+                <PayerClaimLines claimLines={payerPreviewResult.claimLines} />
+                <br />
+                <Tile>
+                    {t('transitions', 'Transitions')}
+                    <br />
+                    <br />
+                    <ul className={styles.timeline}>
+                        {orderedTransitions.map((transition) => (
+                            <li key={transition.guid} className={styles.timelineItem}>
+                                <div className={styles.timelineDot} />
+                                <div>
+                                    <p className={styles.value}>
+                                        {humanizeState(transition.workflowStateFrom)} → {humanizeState(transition.workflowStateTo)}
+                                    </p>
+                                    <p className={styles.label}>{formatDate(parseDate(transition.transitionDate), { time: true })}</p>
+                                </div>
+                            </li>
+                        ))}
+                    </ul>
+                </Tile>
+            </div>
+
+            <ButtonSet className={styles.footer}>
+                <Button kind="secondary" onClick={() => closeWorkspace()} className={styles.footerButton}>
+                    {t('close', 'Close')}
+                </Button>
+            </ButtonSet>
+        </div>
+    );
+};
+
+export default PayerPreviewWorkspace;