@palladium-ethiopia/esm-billing-app 5.4.2-pre.30

package/src/billing-form/billing-form.component.tsx

@@ -0,0 +1,237 @@
+import React, { useState } from 'react';
+import { mutate } from 'swr';
+import { type DefaultWorkspaceProps, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import {
+  Button,
+  ButtonSet,
+  Column,
+  Dropdown,
+  Form,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { TrashCan } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { Controller, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+import { Autosuggest } from '../autosuggest/autosuggest.component';
+import useBillableServices from '../hooks/useBillableServices';
+import { billingFormSchema, processBillItems } from '../billing.resource';
+import { type BillingService } from '../types';
+import { type BillingConfig } from '../config-schema';
+
+import styles from './billing-form.scss';
+import { useParams } from 'react-router-dom';
+
+type BillingFormProps = DefaultWorkspaceProps & {
+  patientUuid: string;
+};
+
+type FormType = z.infer<typeof billingFormSchema>;
+
+const BillingForm: React.FC<BillingFormProps> = ({ closeWorkspace, patientUuid: patientUuidProp }) => {
+  const { t } = useTranslation();
+  const { patientUuid: patientUuidParam = '' } = useParams();
+  const patientUuid = patientUuidProp || patientUuidParam;
+  const { billableServices, error, isLoading } = useBillableServices();
+  const [searchTermValue, setSearchTermValue] = useState('');
+  const { cashPointUuid, cashierUuid } = useConfig<BillingConfig>();
+
+  const form = useForm<FormType>({
+    resolver: zodResolver(billingFormSchema),
+    defaultValues: {
+      cashPoint: cashPointUuid,
+      cashier: cashierUuid,
+      patient: patientUuid,
+      status: 'PENDING',
+      lineItems: [],
+      payments: [],
+    },
+  });
+
+  const onSubmit = async (values: FormType) => {
+    try {
+      await processBillItems(values);
+      mutate((key) => typeof key === 'string' && key.startsWith(`/ws/rest/v1/cashier/bill`), undefined, {
+        revalidate: true,
+      });
+      showSnackbar({
+        title: t('billItems', 'Save Bill'),
+        subtitle: 'Bill processing has been successful',
+        kind: 'success',
+        timeoutInMs: 3000,
+      });
+      closeWorkspace();
+    } catch (e) {
+      showSnackbar({ title: 'Bill processing error', kind: 'error', subtitle: e });
+    }
+  };
+
+  const handleSearch = async (searchText: string) => {
+    setSearchTermValue(searchText);
+    return billableServices.filter(
+      (service) =>
+        service?.name.toLocaleLowerCase().includes(searchText.toLocaleLowerCase()) &&
+        lineItemsToWatch.findIndex((item) => item.billableService === service?.uuid) === -1,
+    );
+  };
+
+  const lineItemsToWatch = form.watch('lineItems');
+
+  const handleSuggestionSelected = (field: string, value: string) => {
+    if (value) {
+      form.setValue('lineItems', [
+        ...lineItemsToWatch,
+        {
+          billableService: value,
+          lineItemOrder: 0,
+          quantity: 1,
+          price: 0,
+          paymentStatus: 'PENDING',
+          priceName: 'Default',
+        },
+      ]);
+    }
+    setSearchTermValue('');
+  };
+
+  const handleError = (errors: any) => {
+    console.error('errors', errors);
+    showSnackbar({ title: t('error', 'Error'), kind: 'error', subtitle: JSON.stringify(errors) });
+  };
+
+  return (
+    <Form onSubmit={form.handleSubmit(onSubmit, handleError)}>
+      <Stack gap={4} className={styles.grid}>
+        <Column>
+          <Autosuggest
+            value={searchTermValue}
+            onClear={() => setSearchTermValue('')}
+            getDisplayValue={(item: BillingService) => item.name}
+            getFieldValue={(item: BillingService) => item.uuid}
+            getSearchResults={handleSearch}
+            onSuggestionSelected={handleSuggestionSelected}
+            labelText={t('search', 'Search')}
+            placeholder={t('searchPlaceHolder', 'Find your billables here...')}
+          />
+        </Column>
+        <Column className={styles.billingItem}>
+          <Table aria-label="sample table">
+            <TableHead>
+              <TableRow>
+                <TableHeader>{t('item', 'Item')}</TableHeader>
+                <TableHeader>{t('quantity', 'Quantity')}</TableHeader>
+                <TableHeader>{t('paymentMethod', 'Payment Method')}</TableHeader>
+                <TableHeader>{t('price', 'Price')}</TableHeader>
+                <TableHeader>{t('total', 'Total')}</TableHeader>
+                <TableHeader></TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {lineItemsToWatch.map(({ billableService, quantity, price }, index) => {
+                const service = billableServices.find((serv) => serv.uuid === billableService);
+                return (
+                  <TableRow key={billableService}>
+                    <TableCell>{service?.name}</TableCell>
+                    <TableCell>
+                      <Controller
+                        control={form.control}
+                        name={`lineItems.${index}.quantity` as any}
+                        render={({ field }) => (
+                          <input
+                            ref={field.ref}
+                            value={field.value}
+                            onChange={({ target: { value } }) => {
+                              field.onChange(value);
+                            }}
+                            type="number"
+                            className="form-control"
+                            id={billableService}
+                            min={1}
+                          />
+                        )}
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <Controller
+                        control={form.control}
+                        name={`lineItems.${index}.priceUuid`}
+                        render={({ field }) => (
+                          <Dropdown
+                            hideLabel
+                            ref={field.ref}
+                            invalid={form.formState.errors[field.name]?.message}
+                            invalidText={form.formState.errors[field.name]?.message}
+                            id="priceUuid"
+                            onChange={(e) => {
+                              field.onChange(e.selectedItem);
+                              const price = service?.servicePrices.find((p) => p.uuid === e.selectedItem)?.price;
+                              form.setValue(`lineItems.${index}.price`, price ?? 0);
+                            }}
+                            selectedItem={field.value}
+                            label={t('choosePrice', 'Choose price')}
+                            titleText={t('choosePrice', 'Choose price')}
+                            items={service?.servicePrices.map((r) => r.uuid) ?? []}
+                            itemToString={(item) => service?.servicePrices.find((r) => r.uuid === item)?.name ?? ''}
+                          />
+                        )}
+                      />
+                    </TableCell>
+                    <TableCell id={service?.name + 'Price'}>{price}</TableCell>
+                    <TableCell id={service?.name + 'Total'}>{price * quantity}</TableCell>
+                    <TableCell id={service?.name + 'Delete'}>
+                      <Button
+                        renderIcon={TrashCan}
+                        iconDescription={t('delete', 'Delete')}
+                        kind="danger"
+                        hasIconOnly
+                        onClick={() => {
+                          form.setValue(
+                            'lineItems',
+                            lineItemsToWatch.filter((item) => item.billableService !== billableService),
+                          );
+                        }}
+                      />
+                    </TableCell>
+                  </TableRow>
+                );
+              })}
+              <TableRow>
+                <TableCell></TableCell>
+                <TableCell></TableCell>
+                <TableCell></TableCell>
+
+                <TableCell style={{ fontWeight: 'bold' }}>{t('grandTotal', 'Grand Total')}:</TableCell>
+                <TableCell id="GrandTotalSum">
+                  {lineItemsToWatch.reduce((prev, curr) => {
+                    const total = curr.quantity * curr.price;
+                    return prev + total;
+                  }, 0)}
+                </TableCell>
+                <TableCell></TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </Column>
+      </Stack>
+
+      <ButtonSet className={styles.buttonSet}>
+        <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
+          {t('discard', 'Discard')}
+        </Button>
+        <Button className={styles.button} kind="primary" type="submit" disabled={form.formState.isSubmitting}>
+          {t('saveAndClose', 'Save & Close')}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default BillingForm;

package/src/billing-form/billing-form.scss

@@ -0,0 +1,67 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@use '@carbon/colors';
+
+.heading {
+  @include type.type-style('heading-compact-01');
+  margin: spacing.$spacing-05 0 spacing.$spacing-05;
+}
+
+.grid {
+  margin: spacing.$spacing-05 spacing.$spacing-05;
+  padding: spacing.$spacing-05 0rem 0rem orem;
+}
+
+.buttonSet {
+  width: 100%;
+  padding-top: spacing.$spacing-05;
+  background-color: colors.$white-0;
+  justify-content: space-between;
+  bottom: 0;
+  position: absolute;
+  & > button {
+    max-width: 50% !important;
+    width: 50%;
+  }
+}
+
+.billingItem {
+  margin-top: spacing.$spacing-10;
+  overflow-x: auto;
+}
+
+.formTitle {
+  @include type.type-style('heading-02');
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: spacing.$spacing-05;
+  row-gap: 1.5rem;
+  position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 2rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+    position: absolute;
+    bottom: -0.75rem;
+    left: 0;
+  }
+
+  & > span {
+    @include type.type-style('body-01');
+  }
+}
+
+.sectionHeader {
+  @include type.type-style('heading-02');
+}
+.button {
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}

package/src/billing-form/check-in-form.utils.tsx

@@ -0,0 +1,13 @@
+import { z } from 'zod';
+
+export const visitAttributesFormSchema = z.object({
+  isPatientExempted: z.string(),
+  paymentMethods: z.string().optional(),
+  insuranceScheme: z.string().optional(),
+  policyNumber: z.string().optional(),
+  exemptionCategory: z.string().optional(),
+  packages: z.array(z.string()).nonempty('Require atleast 1 package'),
+  interventions: z.array(z.string()).nonempty('Require atleast 1 intervention'),
+});
+
+export type VisitAttributesFormValue = z.infer<typeof visitAttributesFormSchema>;

package/src/billing-form/helper.ts

@@ -0,0 +1,2 @@
+export const hasPatientBeenExempted = (attributes: Array<any>, isPatientExempted: string): boolean =>
+  attributes.find(({ attributeType }) => attributeType === isPatientExempted)?.value === true;

package/src/billing-form/hie.resource.tsx

@@ -0,0 +1,71 @@
+import { openmrsFetch, restBaseUrl, useConfig, usePatient } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { BillingConfig } from '../config-schema';
+
+export interface EligibilityResponse {
+  requestIdType: number;
+  requestIdNumber: string;
+  memberCrNumber: string;
+  fullName: string;
+  memberType: string;
+  coverageStartDate: Date;
+  coverageEndDate: Date;
+  status: number;
+  message: string;
+  reason: string;
+  possibleSolution: null;
+  coverageType: string;
+  primaryContributor: null;
+  employerDetails: EmployerDetails;
+  dependants: Array<unknown>;
+  active: boolean;
+}
+
+export interface EmployerDetails {
+  employerName: string;
+  jobGroup: string;
+  scheme: Scheme;
+}
+
+export interface Scheme {
+  schemeCode: string;
+  schemeName: string;
+  schemeCategoryCode: string;
+  schemeCategoryName: string;
+  memberPolicyStartDate: string;
+  memberPolicyEndDate: string;
+  joinDate: string;
+  leaveDate: string;
+}
+
+type HIEEligibilityResponse = {
+  insurer: string;
+  inforce: boolean;
+  start: string;
+  eligibility_response: EligibilityResponse;
+};
+
+export const useSHAEligibility = (patientUuid: string, shaIdentificationNumber?: fhir.Identifier[]) => {
+  const { patient } = usePatient(patientUuid);
+  const { nationalIdUUID } = useConfig<BillingConfig>();
+  const nationalId = patient?.identifier
+    ?.filter((identifier) => identifier)
+    .filter((identifier) => identifier?.type?.coding?.some((coding) => coding?.code === nationalIdUUID))
+    ?.at(0)?.value;
+
+  const url =
+    shaIdentificationNumber?.length > 0
+      ? `${restBaseUrl}/insuranceclaims/CoverageEligibilityRequest?patientUuid=${patientUuid}&nationalId=${nationalId}`
+      : undefined; // this is to avoid making the request if the patient does not have a SHA Id.
+  const { data, error, isLoading, mutate } = useSWR<{ data: Array<HIEEligibilityResponse> }>(url, openmrsFetch, {
+    errorRetryCount: 0,
+  });
+  return {
+    data: data?.data?.[0]?.eligibility_response
+      ? { ...(JSON.parse(data.data[0].eligibility_response as unknown as string) as EligibilityResponse) }
+      : undefined,
+    isLoading,
+    error,
+    mutate,
+  };
+};

package/src/billing-form/social-health-authority/patient-banner-sha-status.extension.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { InlineLoading, InlineNotification, Tag } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { useConfig, usePatient } from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import { isWithinInterval } from 'date-fns';
+import { useSHAEligibility } from '../hie.resource';
+import { BillingConfig } from '../../config-schema';
+import styles from './patient-banner-sha-status.scss';
+
+interface PatientBannerShaStatusProps {
+  patientUuid: string;
+  renderedFrom: string;
+}
+
+const PatientBannerShaStatus: React.FC<PatientBannerShaStatusProps> = ({ patientUuid, renderedFrom }) => {
+  const { t } = useTranslation();
+  const { shaIdentificationNumberUUID } = useConfig<BillingConfig>();
+  const { patient, isLoading: isLoadingPatient } = usePatient(patientUuid);
+
+  const shaIdentificationNumber = patient?.identifier?.filter((identifier) =>
+    identifier?.type?.coding?.some((coding) => coding?.code === shaIdentificationNumberUUID),
+  );
+
+  const { data, isLoading: isLoadingHIEEligibility, error } = useSHAEligibility(patientUuid, shaIdentificationNumber);
+  const isRegisteredOnSHA = data?.status === 1;
+  const isActive = isRegisteredOnSHA
+    ? isWithinInterval(new Date(), {
+        start: new Date(data?.coverageStartDate),
+        end: new Date(data?.coverageEndDate),
+      })
+    : false;
+  const civilServantScheme = data?.coverageType === 'CIVIL_SERVANT' && data?.status === 1;
+  const hasCrNumber = !!data?.memberCrNumber && data.memberCrNumber.length > 0;
+
+  const isPatientChart = renderedFrom === 'patient-chart';
+
+  if (!isPatientChart) {
+    return null;
+  }
+
+  if (isLoadingHIEEligibility || isLoadingPatient) {
+    return <InlineLoading status="active" description={t('loading', 'Loading ...')} />;
+  }
+
+  if (error) {
+    return (
+      <InlineNotification
+        aria-label="closes notification"
+        kind="error"
+        lowContrast
+        statusIconDescription="notification"
+        title={t('error', 'Error')}
+        subtitle={t('errorRetrievingHIESubscription', 'Error retrieving HIE subscription')}
+      />
+    );
+  }
+
+  const renderStatusTag = (isActiveStatus: boolean, schemeName: string) => (
+    <Tag className={classNames(styles.tag, isActiveStatus ? styles.activeTag : styles.inactiveTag)}>
+      <span className={styles.schemeName}>{schemeName}</span>
+      <span>{isActiveStatus ? t('active', 'Active') : t('inactive', 'Inactive')}</span>
+    </Tag>
+  );
+
+  const renderCivilServantTag = (isEligible: boolean, schemeName: string) => (
+    <Tag className={classNames(styles.tag, isEligible ? styles.activeTag : styles.inactiveTag)}>
+      <span className={styles.schemeName}>{schemeName}</span>
+      <span>{isEligible ? t('eligible', 'Eligible') : t('notEligible', 'Not Eligible')}</span>
+    </Tag>
+  );
+
+  return (
+    <div>
+      <span className={styles.separator}>&middot;</span>
+
+      {renderStatusTag(isActive || hasCrNumber, t('phc', 'PHC'))}
+
+      <span className={styles.separator}>&middot;</span>
+
+      {renderStatusTag(isActive, t('shif', 'SHIF'))}
+
+      <span className={styles.separator}>&middot;</span>
+
+      {renderStatusTag(isActive, t('eccif', 'ECCIF'))}
+
+      <span className={styles.separator}>&middot;</span>
+      {renderCivilServantTag(civilServantScheme, t('civilServantScheme', 'CIVIL SERVANT SCHEME'))}
+    </div>
+  );
+};
+
+export default PatientBannerShaStatus;

package/src/billing-form/social-health-authority/patient-banner-sha-status.scss

@@ -0,0 +1,62 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.shaStatusContainer {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-02;
+}
+
+.navDivider {
+  background-color: var(--brand-03);
+  width: 0.05rem;
+  height: 1.5rem;
+}
+
+.tag {
+  margin: layout.$spacing-02 0;
+  white-space: nowrap;
+  min-width: fit-content;
+}
+
+.statusTag {
+  @extend .tag;
+  @include type.type-style('label-01');
+  color: colors.$green-80;
+  background-color: colors.$green-20;
+}
+
+.activeTag {
+  @extend .tag;
+  @include type.type-style('label-01');
+  color: colors.$green-80;
+  background-color: colors.$green-20;
+}
+
+.inactiveTag {
+  @extend .tag;
+  @include type.type-style('label-01');
+  color: colors.$red-80;
+  background-color: colors.$red-20;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.statusBackgroundColor {
+  background-color: colors.$green-20;
+}
+
+.separator {
+  margin: 0 layout.$spacing-02;
+}
+
+.schemeName {
+  @include type.type-style('label-01');
+  color: colors.$gray-100;
+  font-weight: 600;
+  margin-right: layout.$spacing-02;
+}

package/src/billing-form/social-health-authority/sha-number-validity.component.tsx

@@ -0,0 +1,125 @@
+import { ActionableNotification, Form, InlineLoading, InlineNotification, Tooltip } from '@carbon/react';
+import { CheckboxCheckedFilled, Information } from '@carbon/react/icons';
+import { formatDate, navigate, useConfig, usePatient } from '@openmrs/esm-framework';
+import { isWithinInterval } from 'date-fns';
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { BillingConfig } from '../../config-schema';
+import { useSHAEligibility } from '../hie.resource';
+import styles from './sha-number-validity.scss';
+
+type SHANumberValidityProps = {
+  paymentMethod: any;
+  patientUuid: string;
+};
+
+const SHANumberValidity: React.FC<SHANumberValidityProps> = ({ paymentMethod, patientUuid }) => {
+  const { t } = useTranslation();
+  const { shaIdentificationNumberUUID } = useConfig<BillingConfig>();
+  const { patient, isLoading: isLoadingPatientUuid } = usePatient(patientUuid);
+  const { watch } = useFormContext();
+  const isSHA = watch('insuranceScheme')?.includes('SHA');
+  const shaIdentificationNumber = patient?.identifier
+    ?.filter((identifier) => identifier)
+    .filter((identifier) => identifier.type.coding.some((coding) => coding.code === shaIdentificationNumberUUID));
+
+  const { data, isLoading: isLoadingHIEEligibility, error } = useSHAEligibility(patientUuid, shaIdentificationNumber);
+
+  const isRegisteredOnSHA = data?.status === 1;
+  const hasCrNumber = !!data?.memberCrNumber && data.memberCrNumber.length > 0;
+
+  const isActive = isRegisteredOnSHA
+    ? isWithinInterval(new Date(), {
+        start: new Date(data?.coverageStartDate),
+        end: new Date(data?.coverageEndDate),
+      })
+    : false;
+
+  if (!isSHA) {
+    return null;
+  }
+
+  if (shaIdentificationNumber?.length === 0) {
+    return (
+      <ActionableNotification
+        title={t('patientMissingSHAId', 'Patient missing SHA identification number')}
+        subtitle={t(
+          'patientMissingSHANumber',
+          'Patient is missing SHA number, SHA validation cannot be done, Advise patient to visit registration desk',
+        )}
+        closeOnEscape
+        inline={false}
+        actionButtonLabel={t('updateRegistration', 'Update registration')}
+        className={styles.missingSHANumber}
+        onActionButtonClick={() => {
+          navigate({ to: `\${openmrsSpaBase}/patient/${patientUuid}/edit` });
+        }}
+      />
+    );
+  }
+
+  if (isLoadingHIEEligibility || isLoadingPatientUuid) {
+    return <InlineLoading status="active" description={t('loading', 'Loading ...')} />;
+  }
+
+  if (error) {
+    return (
+      <InlineNotification
+        aria-label="closes notification"
+        kind="error"
+        lowContrast={true}
+        statusIconDescription="notification"
+        title={t('error', 'Error')}
+        subtitle={t('errorRetrievingHIESubscription', 'Error retrieving HIE subscription')}
+      />
+    );
+  }
+
+  if (!hasCrNumber) {
+    return (
+      <InlineNotification
+        title={t('hieVerificationFailure', 'HIE verification failure')}
+        subtitle={`${data?.message ?? ''}.${data?.possibleSolution ?? ''}`}
+        className={styles.missingSHANumber}
+      />
+    );
+  }
+
+  const renderInsurerCard = (insurerValue: string, cardClass: string) => (
+    <Form className={styles.formContainer}>
+      <div className={cardClass}>
+        <div className={isActive ? styles.hieCardItemActive : styles.hieCardItemInActive}>
+          <span className={styles.hieInsurerTitle}>{t('insurer', 'Insurer:')}</span>{' '}
+          <span className={styles.hieInsurerValue}>{insurerValue}</span>
+          {isActive && (
+            <Tooltip
+              className={styles.tooltip}
+              align="bottom"
+              label={`Active from ${formatDate(new Date(data?.coverageStartDate))}`}>
+              <button className="sb-tooltip-trigger" type="button">
+                <Information />
+              </button>
+            </Tooltip>
+          )}
+        </div>
+        <div className={isActive ? styles.hieCardItemActive : styles.hieCardItemInActive}>
+          <CheckboxCheckedFilled />
+          <span className={isActive ? styles.activeSubscription : styles.inActiveSubscription}>
+            {isActive ? t('active', 'Active') : t('inactive', 'Inactive')}
+          </span>
+        </div>
+      </div>
+    </Form>
+  );
+
+  if (hasCrNumber) {
+    if (isRegisteredOnSHA) {
+      return renderInsurerCard('PHC | SHIF | ECCIF', styles.hieCard);
+    } else {
+      return renderInsurerCard('PHC', styles.hieCardPHC);
+    }
+  }
+};
+
+export default SHANumberValidity;