@kenyaemr/esm-billing-app 5.4.1-pre.1710 → 5.4.1-pre.1729

package/src/claims/pre-auth/form/pre-auth-form.component.tsx

@@ -1,364 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Column,
-  TextArea,
-  Form,
-  Layer,
-  Stack,
-  TextInput,
-  Row,
-  Button,
-  ButtonSet,
-  MultiSelect,
-  Tag,
-  InlineLoading,
-} from '@carbon/react';
-import { navigate, showSnackbar } from '@openmrs/esm-framework';
-import { useSystemSetting } from '../../../hooks/getMflCode';
-import { useParams } from 'react-router-dom';
-import { useForm, Controller } from 'react-hook-form';
-import { z } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useVisit } from '../../dashboard/form/claims-form.resource';
-import styles from './pre-auth-form.scss';
-import { LineItem, MappedBill } from '../../../types';
-import { useInterventions, usePackages } from './pre-auth-form.resource';
-import { Service } from '../../../../../esm-lab-manifest-app/src/metrics/lab-manifest-metrics.component';
-
-type PreAuthFormProps = {
-  bill: MappedBill;
-  selectedLineItems: LineItem[];
-};
-
-const PreAuthFormSchema = z.object({
-  claimCode: z.string().nonempty({ message: 'Claim code is required' }),
-  guaranteeId: z.string().nonempty({ message: 'Guarantee Id is required' }),
-  preAuthJustification: z.string().nonempty({ message: 'Claim justification is required' }),
-  diagnoses: z
-    .array(
-      z.object({
-        id: z.string(),
-        text: z.string(),
-      }),
-    )
-    .nonempty({ message: 'At least one diagnosis is required' }),
-  visitType: z.string().nonempty({ message: 'Visit type is required' }),
-  facility: z.string().nonempty({ message: 'Facility is required' }),
-  packages: z.array(z.string()).nonempty({ message: 'At least one package is required' }),
-  interventions: z.array(z.string()).nonempty({ message: 'At least one intervention is required' }),
-});
-
-const PreAuthForm: React.FC<PreAuthFormProps> = ({ bill, selectedLineItems }) => {
-  const { t } = useTranslation();
-  const { mflCodeValue } = useSystemSetting('facility.mflcode');
-  const { patientUuid, billUuid } = useParams();
-  const { visits: recentVisit } = useVisit(patientUuid);
-  const { interventions } = useInterventions();
-  const { packages } = usePackages();
-
-  const [loading, setLoading] = useState(false);
-
-  const handleNavigateToBillingOptions = () =>
-    navigate({
-      to: window.getOpenmrsSpaBase() + `home/billing/patient/${patientUuid}/${billUuid}`,
-    });
-
-  const diagnoses = useMemo(() => {
-    return (
-      recentVisit?.encounters?.flatMap(
-        (encounter) =>
-          encounter.diagnoses.map((diagnosis) => ({
-            id: diagnosis.diagnosis.coded.uuid,
-            text: diagnosis.display,
-            certainty: diagnosis.certainty,
-          })) || [],
-      ) || []
-    );
-  }, [recentVisit]);
-
-  const confirmedDiagnoses = useMemo(() => {
-    return diagnoses.filter((diagnosis) => diagnosis.certainty === 'CONFIRMED');
-  }, [diagnoses]);
-
-  const {
-    control,
-    handleSubmit,
-    formState: { errors, isValid },
-    setValue,
-    reset,
-  } = useForm({
-    mode: 'all',
-    resolver: zodResolver(PreAuthFormSchema),
-    defaultValues: {
-      claimCode: '',
-      guaranteeId: '',
-      preAuthJustification: '',
-      diagnoses: [],
-      visitType: '',
-      facility: '',
-      packages: [],
-      interventions: [],
-    },
-  });
-
-  const onSubmit = async (data) => {
-    setLoading(true);
-    try {
-      showSnackbar({
-        kind: 'success',
-        title: t('requestPreAuth', 'Pre Authorization'),
-        subtitle: t('sendClaim', 'Pre authorization request sent successfully'),
-        timeoutInMs: 3000,
-        isLowContrast: true,
-      });
-      reset();
-      setTimeout(() => {
-        navigate({
-          to: window.getOpenmrsSpaBase() + `home/billing/`,
-        });
-      }, 2000);
-    } catch (err) {
-      console.error(err);
-      showSnackbar({
-        kind: 'error',
-        title: t('requestPreAuthError', 'Pre Authorization Error'),
-        subtitle: t('sendClaimError', 'Pre authorization request failed, please try later'),
-        timeoutInMs: 2500,
-        isLowContrast: true,
-      });
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    reset({
-      diagnoses: confirmedDiagnoses,
-      visitType: recentVisit?.visitType?.display || '',
-      facility: `${recentVisit?.location?.display || ''} - ${mflCodeValue || ''}`,
-      claimCode: '',
-      guaranteeId: '',
-      preAuthJustification: '',
-      packages: [],
-      interventions: [],
-    });
-  }, [confirmedDiagnoses, recentVisit, mflCodeValue, reset]);
-
-  return (
-    <Form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
-      <Stack gap={4} className={styles.grid}>
-        <span className={styles.preAuthFormTitle}>{t('formTitle', 'Fill in the form details')}</span>
-        <Column>
-          <Layer className={styles.input}>
-            <Controller
-              control={control}
-              name="preAuthJustification"
-              render={({ field }) => (
-                <TextArea
-                  {...field}
-                  labelText={t('preAuthJustification', 'Pre-Auth Justification')}
-                  rows={3}
-                  placeholder="Claim Justification"
-                  id="preAuthJustification"
-                  invalid={!!errors.preAuthJustification}
-                  invalidText={errors.preAuthJustification?.message}
-                />
-              )}
-            />
-          </Layer>
-        </Column>
-        <Row className={styles.formPreAuthRow}>
-          <Column className={styles.formPreAuthColumn}>
-            <Layer className={styles.input}>
-              <Controller
-                control={control}
-                name="visitType"
-                render={({ field }) => (
-                  <TextInput
-                    {...field}
-                    id="visittype"
-                    labelText={t('visittype', 'Visit Type')}
-                    readOnly
-                    value={field.value}
-                  />
-                )}
-              />
-            </Layer>
-          </Column>
-          <Column className={styles.formPreAuthColumn}>
-            <Layer className={styles.input}>
-              <Controller
-                control={control}
-                name="facility"
-                render={({ field }) => (
-                  <TextInput
-                    {...field}
-                    id="facility"
-                    labelText={t('facility', 'Facility')}
-                    readOnly
-                    value={field.value}
-                  />
-                )}
-              />
-            </Layer>
-          </Column>
-        </Row>
-        <Row className={styles.formPreAuthRow}>
-          <Column className={styles.formPreAuthColumn}>
-            <Layer className={styles.input}>
-              <Controller
-                control={control}
-                name="guaranteeId"
-                render={({ field }) => (
-                  <TextInput
-                    {...field}
-                    id="guaranteeId"
-                    placeholder="Guarantee Id"
-                    labelText={t('guaranteeId', 'Guarantee Id')}
-                    invalid={!!errors.guaranteeId}
-                    invalidText={errors.guaranteeId?.message}
-                  />
-                )}
-              />
-            </Layer>
-          </Column>
-          <Column className={styles.formPreAuthColumn}>
-            <Layer className={styles.input}>
-              <Controller
-                control={control}
-                name="claimCode"
-                render={({ field }) => (
-                  <TextInput
-                    {...field}
-                    id="claimcode"
-                    placeholder="Claim Code"
-                    labelText={t('claimcode', 'Claim Code')}
-                    invalid={!!errors.claimCode}
-                    invalidText={errors.claimCode?.message}
-                  />
-                )}
-              />
-            </Layer>
-          </Column>
-        </Row>
-        <Column>
-          <Layer className={styles.input}>
-            <Controller
-              control={control}
-              name="packages"
-              render={({ field }) => (
-                <>
-                  <>
-                    <div>
-                      {field.value.map((item, index) => (
-                        <Tag key={index} type="high-contrast">
-                          {item}
-                        </Tag>
-                      ))}
-                    </div>
-                  </>
-                  <MultiSelect
-                    {...field}
-                    items={packages}
-                    titleText={t('packages', 'Packages')}
-                    itemToString={(item) => (item ? item.shaPackageName : '')}
-                    label={field.value.length === 0 ? t('packagesOptions', 'Choose packages') : ''}
-                    id="packages"
-                    invalid={!!errors.packages}
-                    invalidText={errors.packages?.message}
-                    placeholder="Select Packages"
-                    onChange={({ selectedItems }) => {
-                      field.onChange(selectedItems.map((item) => item.shaPackageCode));
-                    }}
-                  />
-                </>
-              )}
-            />
-          </Layer>
-        </Column>
-        <Column>
-          <Layer className={styles.input}>
-            <Controller
-              control={control}
-              name="interventions"
-              render={({ field }) => (
-                <>
-                  <div>
-                    {field.value.map((item, index) => {
-                      const intervention = interventions.find((interv) => interv.shaInterventionCode === item);
-                      return (
-                        <Tag key={index} type="high-contrast">
-                          {intervention ? intervention.shaInterventionName : ''}
-                        </Tag>
-                      );
-                    })}
-                  </div>
-                  <MultiSelect
-                    {...field}
-                    items={interventions}
-                    titleText={t('interventions', 'Interventions')}
-                    itemToString={(item) => (item ? item.shaInterventionName : '')}
-                    label={field.value.length === 0 ? t('interventionsOption', 'Choose interventions') : ''}
-                    id="interventions"
-                    invalid={!!errors.interventions}
-                    invalidText={errors.interventions?.message}
-                    placeholder="Select Interventions"
-                    onChange={({ selectedItems }) => {
-                      field.onChange(selectedItems.map((item) => item.shaInterventionCode));
-                    }}
-                  />
-                </>
-              )}
-            />
-          </Layer>
-        </Column>
-        <Column>
-          <Layer className={styles.input}>
-            <Controller
-              control={control}
-              name="diagnoses"
-              render={({ field }) => (
-                <>
-                  <div>
-                    {field.value.map((item, index) => (
-                      <Tag key={index} type="high-contrast">
-                        {item.text}
-                      </Tag>
-                    ))}
-                  </div>
-                  <MultiSelect
-                    {...field}
-                    id="diagnoses"
-                    titleText={t('diagnoses', 'Diagnoses')}
-                    items={diagnoses}
-                    itemToString={(item) => (item ? item.text : '')}
-                    selectionFeedback="top-after-reopen"
-                    label={field.value.length === 0 ? t('chooseDiagnosis', 'Choose diagnosis') : ''}
-                    selectedItems={field.value}
-                    onChange={({ selectedItems }) => field.onChange(selectedItems)}
-                  />
-                </>
-              )}
-            />
-          </Layer>
-        </Column>
-
-        <ButtonSet className={styles.buttonSet}>
-          <Button className={styles.button} kind="secondary" onClick={handleNavigateToBillingOptions}>
-            {t('discard', 'Discard')}
-          </Button>
-          <Button className={styles.button} kind="primary" type="submit" disabled={!isValid || loading}>
-            {loading ? (
-              <InlineLoading description={t('processing', 'Processing...')} />
-            ) : (
-              t('preAuthRequest', 'Pre-Auth Request')
-            )}
-          </Button>
-        </ButtonSet>
-      </Stack>
-    </Form>
-  );
-};
-
-export default PreAuthForm;

package/src/claims/pre-auth/form/pre-auth-form.resource.ts

@@ -1,20 +0,0 @@
-import { useMemo } from 'react';
-import { mockInterventions, mockPackages } from './pre-auth-mock-data';
-
-export const useInterventions = () => {
-  const interventions = useMemo(() => mockInterventions, []);
-  return {
-    isLoading: false,
-    interventions: interventions,
-    error: undefined,
-  };
-};
-
-export const usePackages = () => {
-  const packages = useMemo(() => mockPackages, []);
-  return {
-    isLoading: false,
-    packages: packages,
-    error: undefined,
-  };
-};

package/src/claims/pre-auth/form/pre-auth-form.scss

@@ -1,141 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-@use '@carbon/colors';
-
-.heading {
-  @include type.type-style('heading-compact-01');
-  margin: layout.$spacing-05 0 layout.$spacing-05;
-}
-
-.warningContainer {
-  background-color: colors.$red-50;
-  padding: layout.$spacing-04;
-  margin: layout.$spacing-03 0 layout.$spacing-03;
-  display: flex;
-  justify-content: space-between;
-  .warning {
-    @include type.type-style('heading-compact-01');
-  }
-}
-
-.form {
-  width: 100%;
-  margin: layout.$spacing-09 layout.$spacing-05 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background-color: white;
-
-  :global(.omrs-breakpoint-lt-desktop) {
-    width: 50%;
-    padding: layout.$spacing-06 layout.$spacing-05;
-  }
-
-  .preAuthFormTitle {
-    @include type.type-style('heading-02');
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin: layout.$spacing-05 0 1rem;
-    row-gap: layout.$spacing-06;
-    position: relative;
-
-    &::after {
-      content: '';
-      display: block;
-      width: layout.$spacing-07;
-      border-bottom: 0.375rem solid var(--brand-03);
-      position: absolute;
-      bottom: -0.75rem;
-      left: 0;
-    }
-
-    & > span {
-      @include type.type-style('body-01');
-    }
-  }
-
-  .buttonSet {
-    padding: 0;
-    margin-top: layout.$spacing-03;
-    display: flex;
-    justify-content: flex-end;
-    gap: layout.$spacing-05;
-    margin-bottom: layout.$spacing-07;
-
-    :global(.omrs-breakpoint-lt-desktop) {
-      justify-content: center;
-    }
-  }
-
-  :global(.omrs-breakpoint-lt-desktop) {
-    width: 768px;
-  }
-}
-
-.grid {
-  margin: 0 layout.$spacing-05;
-}
-
-.input {
-  margin-top: layout.$spacing-05;
-}
-
-.button {
-  height: layout.$spacing-08;
-  display: flex;
-  align-content: flex-start;
-  align-items: baseline;
-  min-width: 20%;
-}
-
-.buttonSet {
-  padding: 0;
-  margin-top: layout.$spacing-05;
-  display: flex;
-  justify-content: flex-end;
-  gap: layout.$spacing-05;
-  margin-bottom: layout.$spacing-07;
-}
-
-.preAuthFormTitle {
-  @include type.type-style('heading-02');
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: layout.$spacing-05 0 layout.$spacing-03;
-  row-gap: layout.$spacing-06;
-  position: relative;
-
-  &::after {
-    content: '';
-    display: block;
-    width: layout.$spacing-07;
-    border-bottom: 0.375rem solid var(--brand-03);
-    position: absolute;
-    bottom: -0.75rem;
-    left: 0;
-  }
-
-  & > span {
-    @include type.type-style('body-01');
-  }
-}
-
-:global(.omrs-breakpoint-lt-desktop) {
-  .buttonSet {
-    padding: layout.$spacing-06 layout.$spacing-05;
-    justify-content: flex-end;
-    gap: layout.$spacing-05;
-  }
-}
-
-.formPreAuthRow {
-  display: flex;
-  flex-wrap: nowrap;
-  gap: layout.$spacing-05;
-}
-
-.formPreAuthColumn {
-  flex: 1 1 0%;
-}

package/src/claims/pre-auth/form/pre-auth-mock-data.ts

@@ -1,44 +0,0 @@
-import { SHAPackage, Benefits, Intervention } from '../../../types';
-
-export const benefits: Benefits[] = [
-  {
-    shaPackageCode: 'SHA-001',
-    shaPackageName: 'Eye Care',
-    shaInterventionCode: 'SHA-001-01',
-    shaInterventionName: 'Intervention 1',
-  },
-  {
-    shaPackageCode: 'SHA-002',
-    shaPackageName: 'Malaria',
-    shaInterventionCode: 'SHA-002-01',
-    shaInterventionName: 'Intervention 2',
-  },
-];
-
-export const mockPackages: SHAPackage[] = [
-  {
-    uuid: 'SHA-PKG-001',
-    shaPackageCode: 'SHA-001',
-    shaPackageName: 'Eye Care',
-  },
-  {
-    uuid: 'SHA-PKG-002',
-    shaPackageCode: 'SHA-002',
-    shaPackageName: 'Dental Care',
-  },
-  {
-    uuid: 'SHA-PKG-003',
-    shaPackageCode: 'SHA-003',
-    shaPackageName: 'Surgical',
-  },
-  {
-    uuid: 'SHA-PKG-004',
-    shaPackageCode: 'SHA-004',
-    shaPackageName: 'Haemo-oncology',
-  },
-];
-
-export const mockInterventions: Intervention[] = benefits.map(({ shaInterventionCode, shaInterventionName }) => ({
-  shaInterventionCode,
-  shaInterventionName,
-}));

package/src/claims/pre-auth/hook/pre-auth.mock.ts

@@ -1,40 +0,0 @@
-export interface Package {
-  uuid: string;
-  packageCode: string;
-  packageName: string;
-  packageAccessPoint: 'OP' | 'IP' | 'Both';
-}
-
-export interface SHAintervention {
-  interventionCode: string;
-  interventionName?: string;
-}
-
-export const packages = [
-  {
-    packageCode: 'SHA-001',
-    packageName: 'Eye Care',
-    packageAccessPoint: 'OPD',
-  },
-  {
-    packageCode: 'SHA-002',
-    packageName: 'Dental Care',
-    packageAccessPoint: 'IPD',
-  },
-  {
-    packageCode: 'SHA-003',
-    packageName: 'Surgical',
-    packageAccessPoint: 'OPD',
-  },
-  {
-    packageCode: 'SHA-004',
-    packageName: 'Haemo-oncology',
-    packageAccessPoint: 'OP',
-  },
-] as Array<Package>;
-
-export const interventions: SHAintervention[] = [
-  { interventionCode: 'SHA-001-01', interventionName: 'Intervention 1' },
-  { interventionCode: 'SHA-001-02', interventionName: 'Intervention 2' },
-  { interventionCode: 'SHA-001-03', interventionName: 'Intervention 3' },
-];

package/src/claims/pre-auth/pre-auth-dashboard.component.tsx

@@ -1,79 +0,0 @@
-import React, { useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { usePatient, ErrorState, ExtensionSlot, navigate } from '@openmrs/esm-framework';
-import { InlineLoading, Button } from '@carbon/react';
-import { useBill } from '../../billing.resource';
-import { CardHeader } from '@openmrs/esm-patient-common-lib';
-import { PreviousOutline } from '@carbon/react/icons';
-import { spaBasePath } from '../../constants';
-import { LineItem } from '../../types';
-import styles from './pre-auth-dashboard.scss';
-import PreAuthTable from './table/pre-auth-table.component';
-import PreAuthForm from './form/pre-auth-form.component';
-
-const PreAuthRequestDashboard: React.FC = () => {
-  const { billUuid, patientUuid } = useParams();
-  const { t } = useTranslation();
-  const { patient, isLoading: isLoadingPatient } = usePatient(patientUuid);
-  const { bill, isLoading: isLoadingBill, error } = useBill(billUuid);
-  const preAuthTitle = t('makePreauthRequest', 'Make Pre-auth Request');
-
-  const [selectedLineItems, setSelectedLineItems] = useState<LineItem[]>([]);
-
-  const handleSelectItem = (selectedItems: LineItem[]) => {
-    setSelectedLineItems(selectedItems);
-  };
-
-  if (isLoadingPatient && isLoadingBill) {
-    return (
-      <div className={styles.preAuthContainer}>
-        <InlineLoading
-          className={styles.loader}
-          status="active"
-          iconDescription="Loading"
-          description="Loading patient header..."
-        />
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className={styles.preAuthContainer}>
-        <ErrorState headerTitle={t('preAuthRequestError', 'Pre-authorization request error page')} error={error} />
-      </div>
-    );
-  }
-
-  return (
-    <div className={styles.preAuthContainer}>
-      {patient && (
-        <ExtensionSlot
-          name="patient-header-slot"
-          state={{ patientUuid: patient.id, patient }}
-          className={styles.preAuthContainer}
-        />
-      )}
-      <CardHeader title={preAuthTitle}>
-        <Button
-          kind="secondary"
-          size="sm"
-          className={styles.backButton}
-          onClick={() => navigate({ to: `${spaBasePath}/billing/patient/${patientUuid}/${billUuid}` })}
-          renderIcon={PreviousOutline}
-          iconDescription="back">
-          {t('backButton', 'Back')}
-        </Button>{' '}
-      </CardHeader>
-      <div className={styles.preAuthMainContainer}>
-        <div className={styles.content}>
-          <PreAuthTable bill={bill} isLoadingBill={isLoadingBill} onSelectItem={handleSelectItem} />
-          <PreAuthForm bill={bill} selectedLineItems={selectedLineItems} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PreAuthRequestDashboard;