@kenyaemr/esm-billing-app 5.4.2-pre.2259 → 5.4.2-pre.2265

package/src/invoice/print-bill-receipt/receipt-print-preview.modal.tsx

@@ -1,42 +0,0 @@
-import { Button, InlineLoading, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
-import { ErrorState } from '@openmrs/esm-framework';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { MappedBill } from '../../types';
-import { usePaidBillReceiptFileObjectUrl } from './print-bill-receipt.resource';
-import styles from './print-bill-receipt.scss';
-
-type ReceiptPrintPreviewModalProps = {
-  onClose: () => void;
-  bill: MappedBill;
-};
-
-const ReceiptPrintPreviewModal: React.FC<ReceiptPrintPreviewModalProps> = ({ onClose, bill }) => {
-  const { t } = useTranslation();
-  const { mutate, isLoading, url, error } = usePaidBillReceiptFileObjectUrl(bill.id);
-  return (
-    <>
-      <ModalHeader closeModal={onClose} className={styles.title}>
-        {t('printReceipt', 'Print Receipt')}
-      </ModalHeader>
-      <ModalBody>
-        {isLoading && (
-          <InlineLoading
-            status="active"
-            iconDescription="Loading"
-            description={t('loadingReceipt', 'Loading Receipt')}
-          />
-        )}
-        {error && <ErrorState error={error} headerTitle={t('previewError', 'Preview Error')} />}
-        {url && !isLoading && <iframe src={String(url)} title="Receipt Preview" className={styles.previewFrame} />}
-      </ModalBody>
-      <ModalFooter>
-        <Button kind="secondary" onClick={onClose} type="button" className={styles.btn}>
-          {t('close', 'Close')}
-        </Button>
-      </ModalFooter>
-    </>
-  );
-};
-
-export default ReceiptPrintPreviewModal;

package/src/invoice/printable-invoice/print-invoice.test.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { screen, render } from '@testing-library/react';
-import PrintableInvoice from './printable-invoice.component';
-import { mockBills } from '../../../../../__mocks__/bills.mock';
-import { mockPatient } from '../../../../../__mocks__/patient.mock';
-import { extractString } from '../../helpers';
-
-describe('PrintableInvoice', () => {
-  test('should render PrintableInvoice', () => {
-    render(
-      <PrintableInvoice
-        bill={{ ...mockBills, dateCreated: '2021-01-18T09:42:40+00:00', tenderedAmount: 650 }}
-        patient={mockPatient}
-        isPrinting={false}
-        facilityInfo={{ display: 'facility test' }}
-      />,
-    );
-    expect(screen.getByText('Invoice')).toBeInTheDocument();
-    expect(screen.getByText('Billed to')).toBeInTheDocument();
-    const lineItems = mockBills.lineItems;
-    lineItems.forEach((item, index) => {
-      expect(screen.getByText(`${index + 1} - ${extractString(item.billableService)}`)).toBeInTheDocument();
-    });
-    expect(screen.getAllByText('facility test')).toHaveLength(2);
-    expect(screen.getByText('Total')).toBeInTheDocument();
-    expect(
-      screen.getByText(
-        /The invoice has been electronically generated and is a valid document. It was created by {{userName}} on {{date}} at {{time}}/,
-      ),
-    ).toBeInTheDocument();
-    expect(screen.getByText('Invoice #')).toBeInTheDocument();
-    expect(screen.getByText('Invoice date')).toBeInTheDocument();
-    expect(screen.getByText('Status')).toBeInTheDocument();
-    expect(screen.getByText(/Pending/i)).toBeInTheDocument();
-  });
-});

package/src/invoice/printable-invoice/print-receipt.component.tsx

@@ -1,28 +0,0 @@
-import { ConfigurableLink } from '@openmrs/esm-framework';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import styles from './print-receipt.scss';
-import { Button } from '@carbon/react';
-import { Printer } from '@carbon/react/icons';
-
-interface PrintReceiptProps {
-  billId: number;
-}
-const PrintReceipt: React.FC<PrintReceiptProps> = ({ billId }) => {
-  const { t } = useTranslation();
-  return (
-    <Button
-      kind="secondary"
-      className={styles.button}
-      size="md"
-      renderIcon={(props) => <Printer size={24} {...props} />}>
-      <ConfigurableLink
-        className={styles.configurableLink}
-        to={`\${openmrsBase}/ws/rest/v1/cashier/receipt?billId=${billId}`}>
-        {t('printReceipt', 'Print receipt')}
-      </ConfigurableLink>{' '}
-    </Button>
-  );
-};
-
-export default PrintReceipt;

package/src/invoice/printable-invoice/print-receipt.scss

@@ -1,10 +0,0 @@
-@use '@carbon/colors';
-@use '@carbon/layout';
-@use '@carbon/type';
-
-.configurableLink {
-  color: colors.$white;
-  margin: 0;
-  padding: 0;
-  text-decoration: none;
-}

package/src/invoice/printable-invoice/printable-footer.component.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import styles from './printable-footer.scss';
-import { useTranslation } from 'react-i18next';
-import dayjs from 'dayjs';
-import { useSession } from '@openmrs/esm-framework';
-
-type PrintableFooterProps = {
-  facilityInfo: Record<string, any>;
-};
-
-const PrintableFooter: React.FC<PrintableFooterProps> = ({ facilityInfo }) => {
-  const { t } = useTranslation();
-  const session = useSession();
-
-  return (
-    <div className={styles.container}>
-      <p className={styles.itemFooter}>{facilityInfo?.display}</p>
-      <p className={styles.footDescription}>
-        {t(
-          'generatedMessage',
-          'The invoice has been electronically generated and is a valid document. It was created by {{userName}} on {{date}} at {{time}}',
-          {
-            userName: `${session?.user?.display}`,
-            date: dayjs().format('DD-MM-YYYY'),
-            time: dayjs().format('hh:mm A'),
-          },
-        )}
-      </p>
-    </div>
-  );
-};
-
-export default PrintableFooter;

package/src/invoice/printable-invoice/printable-footer.scss

@@ -1,24 +0,0 @@
-@use '@carbon/colors';
-@use '@carbon/layout';
-@use '@carbon/type';
-
-.container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  bottom: 0;
-  padding: layout.$spacing-01;
-  justify-content: center;
-}
-
-.itemFooter {
-  padding: layout.$spacing-01 layout.$spacing-05;
-  @include type.type-style('body-compact-02');
-  color: colors.$cool-gray-90;
-}
-
-.footDescription {
-  @include type.type-style('legal-01');
-  padding: layout.$spacing-01 layout.$spacing-05;
-  color: colors.$cool-gray-70;
-}

package/src/invoice/printable-invoice/printable-footer.test.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { screen, render } from '@testing-library/react';
-import PrintableFooter from './printable-footer.component';
-
-jest.mock('../../billing.resource', () => ({
-  useDefaultFacility: jest.fn(),
-}));
-
-describe('PrintableFooter', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  test('should render PrintableFooter component', () => {
-    render(<PrintableFooter facilityInfo={{ display: 'MTRH', uuid: 'mtrh-uuid' }} />);
-    const footer = screen.getByText('MTRH');
-    expect(footer).toBeInTheDocument();
-  });
-});

package/src/invoice/printable-invoice/printable-invoice-header.component.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { PatientDetails } from '../../types';
-import styles from './printable-invoice-header.scss';
-import { useConfig } from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
-import startCase from 'lodash-es/startCase';
-
-interface PrintableInvoiceHeaderProps {
-  patientDetails: PatientDetails;
-  facilityInfo: Record<string, any>;
-}
-
-const PrintableInvoiceHeader: React.FC<PrintableInvoiceHeaderProps> = ({ patientDetails, facilityInfo }) => {
-  const { t } = useTranslation();
-  const { logo } = useConfig({ externalModuleName: '@kenyaemr/esm-login-app' });
-
-  return (
-    <div className={styles.container}>
-      <div className={styles.printableHeader}>
-        <p className={styles.heading}>{t('invoice', 'Invoice')}</p>
-        {logo?.src ? (
-          <img className={styles.img} height={60} width={250} src={logo.src} alt={logo.alt} />
-        ) : logo?.name ? (
-          logo.name
-        ) : (
-          // OpenMRS Logo
-          <svg
-            className={styles.img}
-            role="img"
-            width={110}
-            height={40}
-            viewBox="0 0 380 119"
-            xmlns="http://www.w3.org/2000/svg">
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M40.29 40.328a27.755 27.755 0 0 1 19.688-8.154c7.669 0 14.613 3.102 19.647 8.116l.02-18.54A42.835 42.835 0 0 0 59.978 17c-7.089 0-13.813 1.93-19.709 4.968l.021 18.36ZM79.645 79.671a27.744 27.744 0 0 1-19.684 8.154c-7.67 0-14.614-3.101-19.651-8.116l-.02 18.54A42.857 42.857 0 0 0 59.96 103a42.833 42.833 0 0 0 19.672-4.751l.013-18.578ZM40.328 79.696c-5.038-5.037-8.154-11.995-8.154-19.685 0-7.669 3.102-14.612 8.116-19.65l-18.54-.02A42.85 42.85 0 0 0 17 60.012a42.819 42.819 0 0 0 4.752 19.672l18.576.013ZM79.634 40.289a27.753 27.753 0 0 1 8.154 19.688 27.744 27.744 0 0 1-8.117 19.646l18.542.02a42.842 42.842 0 0 0 4.749-19.666c0-7.09-1.714-13.779-4.751-19.675l-18.577-.013ZM156.184 60.002c0-8.748-6.118-15.776-15.025-15.776-8.909 0-15.025 7.028-15.025 15.776 0 8.749 6.116 15.78 15.025 15.78 8.907 0 15.025-7.031 15.025-15.78Zm-34.881 0c0-11.482 8.318-19.958 19.856-19.958 11.536 0 19.855 8.477 19.855 19.959 0 11.484-8.319 19.964-19.855 19.964-11.538 0-19.856-8.48-19.856-19.965ZM179.514 75.54c5.507 0 9.05-4.14 9.05-9.482 0-5.341-3.543-9.483-9.05-9.483-5.505 0-9.046 4.142-9.046 9.483 0 5.342 3.541 9.482 9.046 9.482ZM166.22 53.306h4.248v3.704h.11c2.344-2.725 5.449-4.36 9.154-4.36 8.014 0 13.408 5.67 13.408 13.408 0 7.63-5.613 13.406-12.752 13.406-4.58 0-8.231-2.29-9.81-5.178h-.11V90.87h-4.248V53.306ZM217.773 63.768c-.163-4.305-3-7.193-7.686-7.193-4.685 0-7.79 2.888-8.335 7.193h16.021Zm3.653 10.412c-3.001 3.868-6.596 5.284-11.339 5.284-8.01 0-12.914-5.993-12.914-13.406 0-7.901 5.559-13.407 13.08-13.407 7.196 0 12.096 4.906 12.096 13.354v1.362h-20.597c.325 4.413 3.704 8.173 8.335 8.173 3.65 0 6.105-1.307 8.12-3.868l3.219 2.508ZM227.854 59.356c0-2.346-.216-4.36-.216-6.05h4.031c0 1.363.11 2.777.11 4.195h.11c1.144-2.505 4.306-4.85 8.5-4.85 6.705 0 9.699 4.252 9.699 10.41v15.748h-4.248v-15.31c0-4.253-1.856-6.924-5.833-6.924-5.503 0-7.903 3.979-7.903 9.811V78.81h-4.25V59.356ZM259.211 41.008h6.708L278.8 70.791h.107l12.982-29.782h6.549v37.99h-4.506V47.124h-.106L280.192 79h-2.738l-13.629-31.875h-.107V79h-4.507V41.01ZM312.392 57.752h4.023c4.992 0 11.487 0 11.487-6.282 0-5.47-4.776-6.276-9.177-6.276h-6.333v12.558Zm-4.506-16.744h9.711c7.352 0 15.132 1.072 15.132 10.462 0 5.527-3.594 9.125-9.495 10.037L334.018 79h-5.525l-10.304-17.063h-5.797V79h-4.506V41.01ZM358.123 47.712c-1.506-2.413-4.187-3.486-6.926-3.486-3.973 0-8.1 1.88-8.1 6.385 0 3.49 1.931 5.047 7.994 6.98 5.903 1.878 11.377 3.809 11.377 11.267 0 7.567-6.495 11.11-13.36 11.11-4.402 0-9.125-1.45-11.7-5.262l3.862-3.165c1.61 2.794 4.83 4.24 8.105 4.24 3.862 0 8.263-2.253 8.263-6.601 0-4.669-3.165-5.474-9.928-7.728-5.366-1.771-9.442-4.134-9.442-10.463 0-7.298 6.277-10.945 12.929-10.945 4.241 0 7.836 1.178 10.625 4.45l-3.699 3.218Z"
-            />
-          </svg>
-        )}
-      </div>
-
-      <div className={styles.printableBody}>
-        <div className={styles.billDetails}>
-          <p className={styles.itemHeading}>{t('billedTo', 'Billed to')}</p>
-          <p className={styles.itemLabel}>{startCase(patientDetails?.name)}</p>
-          <p className={styles.itemLabel}>{patientDetails?.county}</p>
-          <p className={styles.itemLabel}>
-            {patientDetails?.subCounty}
-            {patientDetails?.city ? `, ${patientDetails?.city}` : null}
-          </p>
-        </div>
-
-        <div className={styles.facilityDetails}>
-          <p className={styles.facilityName}>{facilityInfo?.display}</p>
-          <p className={styles.itemLabel}>Kenya</p>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PrintableInvoiceHeader;

package/src/invoice/printable-invoice/printable-invoice-header.scss

@@ -1,61 +0,0 @@
-@use '@carbon/colors';
-@use '@carbon/layout';
-@use '@carbon/type';
-
-.container {
-  padding: 0 1rem 2rem;
-  border-bottom: 1px solid #ebedf2;
-  margin-bottom: 2rem;
-}
-
-.printableBody {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.printableHeader {
-  display: flex;
-  flex-direction: row;
-}
-
-.img {
-  display: flex;
-  margin-left: auto;
-}
-
-.billDetails {
-  display: flex;
-  width: 50%;
-  flex-direction: column;
-}
-
-.facilityDetails {
-  display: flex;
-  flex-flow: column wrap;
-  text-align: right;
-}
-
-.heading {
-  font-size: 40px;
-  text-transform: uppercase;
-  margin-bottom: layout.$spacing-05;
-}
-
-.facilityName {
-  @include type.type-style('heading-compact-02');
-  font-weight: bold;
-  color: colors.$green-70;
-}
-
-.itemHeading {
-  @include type.type-style('body-compact-02');
-  margin-bottom: 0.25rem;
-  font-weight: bold;
-  color: colors.$cool-gray-90;
-}
-
-.itemLabel {
-  @include type.type-style('body-compact-02');
-  color: colors.$cool-gray-90;
-}

package/src/invoice/printable-invoice/printable-invoice-header.test.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { screen, render } from '@testing-library/react';
-import PrintableInvoiceHeader from './printable-invoice-header.component';
-import { useConfig } from '@openmrs/esm-framework';
-
-const mockUseConfig = useConfig as jest.MockedFunction<typeof useConfig>;
-
-jest.mock('../../billing.resource', () => ({
-  useDefaultFacility: jest.fn(),
-}));
-
-jest.mock('@openmrs/esm-framework', () => ({
-  useConfig: jest.fn(),
-}));
-const testProps = {
-  patientDetails: {
-    name: 'John Doe',
-    county: 'Nairobi',
-    subCounty: 'Westlands',
-    city: 'Nairobi',
-    age: '45',
-    gender: 'Male',
-  },
-};
-
-describe('PrintableInvoiceHeader', () => {
-  test('should render PrintableInvoiceHeader component', () => {
-    mockUseConfig.mockReturnValue({ logo: { src: 'logo.png', alt: 'logo' } });
-
-    render(<PrintableInvoiceHeader facilityInfo={{ display: 'MTRH', uuid: 'mtrh-uuid' }} {...testProps} />);
-    const header = screen.getByText('Invoice');
-    expect(header).toBeInTheDocument();
-
-    expect(screen.getByText('John Doe')).toBeInTheDocument();
-    expect(screen.getByText('Nairobi')).toBeInTheDocument();
-    expect(screen.getByText('Westlands, Nairobi')).toBeInTheDocument();
-    expect(screen.getByText('MTRH')).toBeInTheDocument();
-    expect(screen.getByText('Kenya')).toBeInTheDocument();
-  });
-
-  test('should display the logo when logo is provided', () => {
-    mockUseConfig.mockReturnValue({ logo: { src: 'logo.png', alt: 'logo' } });
-
-    render(<PrintableInvoiceHeader facilityInfo={{ display: 'MTRH', uuid: 'mtrh-uuid' }} {...testProps} />);
-    const logo = screen.getByAltText('logo');
-    expect(logo).toBeInTheDocument();
-  });
-
-  test('should display the default logo when logo is not provided', () => {
-    mockUseConfig.mockReturnValue({ logo: {} });
-
-    render(<PrintableInvoiceHeader facilityInfo={{ display: 'MTRH', uuid: 'mtrh-uuid' }} {...testProps} />);
-    const logo = screen.getByRole('img');
-    expect(logo).toBeInTheDocument();
-  });
-});

package/src/invoice/printable-invoice/printable-invoice.component.tsx

@@ -1,134 +0,0 @@
-import React, { useMemo } from 'react';
-import {
-  DataTable,
-  Table,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableHeader,
-  TableCell,
-} from '@carbon/react';
-import { age, formatDatetime, parseDate } from '@openmrs/esm-framework';
-import { convertToCurrency, extractString, getGender } from '../../helpers';
-import { MappedBill } from '../../types';
-import { useTranslation } from 'react-i18next';
-import PrintableFooter from './printable-footer.component';
-import PrintableInvoiceHeader from './printable-invoice-header.component';
-import styles from './printable-invoice.scss';
-
-type PrintableInvoiceProps = {
-  bill: MappedBill;
-  patient: fhir.Patient;
-  isPrinting: boolean;
-  facilityInfo: Record<string, any>;
-};
-
-const PrintableInvoice = React.forwardRef<HTMLDivElement, PrintableInvoiceProps>(
-  ({ bill, patient, facilityInfo }, ref) => {
-    const { t } = useTranslation();
-    const headerData = [
-      { header: 'Inventory item', key: 'billItem' },
-      { header: 'Quantity', key: 'quantity' },
-      { header: 'Unit price', key: 'price' },
-      { header: 'Total', key: 'total' },
-    ];
-
-    const rowData =
-      bill?.lineItems?.map((item, index) => {
-        return {
-          id: `${item.uuid}`,
-          billItem: `${index + 1} - ${
-            item.item === '' ? extractString(item?.billableService) : extractString(item.item)
-          }`,
-          quantity: item.quantity,
-          price: item.price,
-          total: item.price * item.quantity,
-        };
-      }) ?? [];
-
-    const invoiceTotal = {
-      'Total Amount': convertToCurrency(bill?.totalAmount),
-      'Amount Tendered': convertToCurrency(bill?.tenderedAmount),
-      'Discount Amount': convertToCurrency(0),
-      'Amount due': convertToCurrency(bill?.totalAmount - bill?.tenderedAmount),
-    };
-
-    const patientDetails = useMemo(() => {
-      return {
-        name: `${patient?.name?.[0]?.given?.join(' ')} ${patient?.name?.[0].family}`,
-        age: age(patient?.birthDate),
-        gender: getGender(patient?.gender, t),
-        city: patient?.address?.[0].city,
-        county: patient?.address?.[0].district,
-        subCounty: patient?.address?.[0].state,
-      };
-    }, [patient, t]);
-
-    const invoiceDetails = {
-      'Invoice #': bill.receiptNumber,
-      'Invoice date': formatDatetime(parseDate(bill.dateCreated), { mode: 'standard', noToday: true }),
-      Status: bill.status,
-    };
-
-    return (
-      <div ref={ref} className={styles.container}>
-        <PrintableInvoiceHeader patientDetails={patientDetails} facilityInfo={facilityInfo} />
-        <div className={styles.printableInvoiceContainer}>
-          <div className={styles.detailsContainer}>
-            {Object.entries(invoiceDetails).map(([key, val]) => (
-              <div key={key} className={styles.item}>
-                <p className={styles.itemHeading}>{key}</p>
-                <span className={styles.itemValue}>{val}</span>
-              </div>
-            ))}
-          </div>
-
-          <div className={styles.itemsContainer}>
-            <div className={styles.tableContainer}>
-              <DataTable size="sm" isSortable rows={rowData} headers={headerData} useZebraStyles>
-                {({ rows, headers, getRowProps, getTableProps }) => (
-                  <TableContainer>
-                    <Table {...getTableProps()} aria-label="Invoice line items">
-                      <TableHead>
-                        <TableRow>
-                          {headers.map((header) => (
-                            <TableHeader key={header.key}>{header.header}</TableHeader>
-                          ))}
-                        </TableRow>
-                      </TableHead>
-                      <TableBody>
-                        {rows.map((row) => (
-                          <TableRow
-                            key={row.id}
-                            {...getRowProps({
-                              row,
-                            })}>
-                            {row.cells.map((cell) => (
-                              <TableCell key={cell.id}>{cell.value}</TableCell>
-                            ))}
-                          </TableRow>
-                        ))}
-                      </TableBody>
-                    </Table>
-                  </TableContainer>
-                )}
-              </DataTable>
-            </div>
-
-            <div className={styles.totalContainer}>
-              {Object.entries(invoiceTotal).map(([key, val]) => (
-                <p key={key} className={styles.itemTotal}>
-                  <span className={styles.itemHeading}>{key}</span>: <span className={styles.itemLabel}>{val}</span>
-                </p>
-              ))}
-            </div>
-          </div>
-        </div>
-        <PrintableFooter facilityInfo={facilityInfo} />
-      </div>
-    );
-  },
-);
-
-export default PrintableInvoice;

package/src/invoice/printable-invoice/printable-invoice.scss

@@ -1,60 +0,0 @@
-@use '@carbon/colors';
-@use '@carbon/layout';
-@use '@carbon/type';
-
-.printableInvoiceContainer {
-  display: flex;
-  flex-direction: row;
-}
-
-.container {
-  margin-top: layout.$spacing-05;
-}
-
-.itemsContainer {
-  display: flex;
-  flex-direction: column;
-  width: 80%;
-  padding: layout.$spacing-05;
-  margin: layout.$spacing-05;
-}
-
-.detailsContainer {
-  margin: layout.$spacing-05 0;
-  width: 20%;
-}
-
-.tableContainer {
-  margin-bottom: layout.$spacing-05;
-}
-
-.totalContainer {
-  display: flex;
-  flex-direction: column;
-}
-
-.item {
-  margin: layout.$spacing-04;
-}
-
-.itemHeading {
-  @include type.type-style('label-02');
-  font-style: bold;
-  color: colors.$cool-gray-90;
-  margin-bottom: layout.$spacing-01;
-}
-
-.itemValue {
-  @include type.type-style('legal-01');
-  color: colors.$cool-gray-90;
-}
-
-.itemTotal {
-  border-bottom: solid 0.00125rem colors.$cool-gray-10;
-  padding: layout.$spacing-02;
-}
-
-.itemLabel {
-  float: right;
-  @include type.type-style('label-01');
-}