@openmrs/esm-billing-app 1.1.2-pre.9 → 1.2.0

package/src/discounts/admin/review-bill-discounts/bill-payments-table/bill-payments-table.component.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { formatDate, useConfig } from '@openmrs/esm-framework';
+import type { BillingConfig } from '../../../../config-schema';
+import { convertToCurrency } from '../../../../helpers';
+import type { Payment } from '../../../../types';
+import styles from './bill-payments-table.scss';
+
+interface Props {
+  payments: Array<Payment>;
+}
+
+const BillPaymentsTable: React.FC<Props> = ({ payments }) => {
+  const { t } = useTranslation();
+  const { defaultCurrency } = useConfig<BillingConfig>();
+
+  if (payments.length === 0) return null;
+
+  return (
+    <section className={styles.ledger}>
+      <h3 className={styles.ledgerHeading}>{t('payments', 'Payments')}</h3>
+      <table className={styles.ledgerTable}>
+        <thead>
+          <tr>
+            <th>{t('method', 'Method')}</th>
+            <th>{t('date', 'Date')}</th>
+            <th className={styles.right}>{t('tendered', 'Tendered')}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {payments.map((p: Payment) => (
+            <tr key={p.uuid}>
+              <td>
+                <span className={styles.paymentKind}>{p.instanceType?.name ?? '--'}</span>
+              </td>
+              <td>
+                <span className={styles.paymentDate}>
+                  {p.dateCreated ? formatDate(new Date(p.dateCreated), { mode: 'wide' }) : '--'}
+                </span>
+              </td>
+              <td className={styles.right}>{convertToCurrency(p.amountTendered ?? 0, defaultCurrency)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </section>
+  );
+};
+
+export default BillPaymentsTable;

package/src/discounts/admin/review-bill-discounts/bill-payments-table/bill-payments-table.scss

@@ -0,0 +1,63 @@
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.ledger {
+  margin-bottom: $spacing-05;
+}
+
+.ledgerHeading {
+  @include type.type-style('label-01');
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--cds-text-helper);
+  margin: 0 0 $spacing-03;
+}
+
+.ledgerTable {
+  width: 100%;
+  border-collapse: collapse;
+  @include type.type-style('body-compact-01');
+}
+
+.ledgerTable thead th {
+  text-align: left;
+  @include type.type-style('label-01');
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--cds-text-helper);
+  font-weight: 500;
+  padding: $spacing-02 0;
+  border-bottom: 1px solid $ui-03;
+}
+
+.ledgerTable tbody td {
+  padding: $spacing-03 0;
+  border-bottom: 1px dashed $ui-03;
+  color: var(--cds-text-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.ledgerTable tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.right {
+  text-align: right;
+}
+
+.paymentKind {
+  @include type.type-style('label-01');
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--cds-text-helper);
+  padding: 2px $spacing-02;
+  background: $ui-02;
+  border: 1px solid $ui-03;
+  display: inline-block;
+}
+
+.paymentDate {
+  @include type.type-style('label-01');
+  color: var(--cds-text-helper);
+}

package/src/discounts/admin/review-bill-discounts/bill-receipt-rail/bill-receipt-rail.component.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Tag } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import BillLineItemsTable from '../bill-line-items-table/bill-line-items-table.component';
+import BillPaymentsTable from '../bill-payments-table/bill-payments-table.component';
+import BillTotalsSummary from '../bill-totals-summary/bill-totals-summary.component';
+import type { BillDiscount, LineItem, PatientInvoice, Payment } from '../../../../types';
+import styles from './bill-receipt-rail.scss';
+
+interface Props {
+  bill: PatientInvoice;
+  lineItems: Array<LineItem>;
+  payments: Array<Payment>;
+  paymentsTotal: number;
+  subtotal: number;
+  currentNet: number;
+  outstanding: number;
+  approvedDiscounts: BillDiscount[];
+  pendingDiscounts: BillDiscount[];
+}
+
+const BillReceiptRail: React.FC<Props> = ({
+  bill,
+  lineItems,
+  payments,
+  paymentsTotal,
+  subtotal,
+  currentNet,
+  outstanding,
+  approvedDiscounts,
+  pendingDiscounts,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <aside className={styles.receipt}>
+      <div className={styles.patient}>
+        <div>
+          <p className={styles.patientName}>{bill.patient?.display}</p>
+          <p className={styles.patientId}>
+            {t('receiptNumber', 'Receipt #')}: {bill.receiptNumber}
+          </p>
+        </div>
+        {bill.status && (
+          <Tag type="blue" size="sm">
+            {t(String(bill.status).toLowerCase(), String(bill.status))}
+          </Tag>
+        )}
+      </div>
+
+      <dl className={styles.meta}>
+        <dt>{t('issued', 'Issued')}</dt>
+        <dd>{bill.dateCreated ? formatDate(parseDate(bill.dateCreated), { mode: 'wide' }) : '--'}</dd>
+        <dt>{t('cashier', 'Cashier')}</dt>
+        <dd>{bill.cashier?.display ?? '--'}</dd>
+      </dl>
+
+      <BillLineItemsTable lineItems={lineItems} />
+      <BillPaymentsTable payments={payments} />
+      <BillTotalsSummary
+        subtotal={subtotal}
+        currentNet={currentNet}
+        outstanding={outstanding}
+        paymentsTotal={paymentsTotal}
+        approvedDiscounts={approvedDiscounts}
+        pendingDiscounts={pendingDiscounts}
+      />
+    </aside>
+  );
+};
+
+export default React.memo(BillReceiptRail);

package/src/discounts/admin/review-bill-discounts/bill-receipt-rail/bill-receipt-rail.scss

@@ -0,0 +1,54 @@
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.receipt {
+  border-right: 1px solid $ui-03;
+  background: $ui-01;
+  padding: $spacing-06 $spacing-06 $spacing-07;
+}
+
+.patient {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: $spacing-03;
+  margin-bottom: $spacing-04;
+}
+
+.patientName {
+  @include type.type-style('heading-03');
+  margin: 0 0 $spacing-01;
+  color: var(--cds-text-primary);
+}
+
+.patientId {
+  @include type.type-style('code-01');
+  color: var(--cds-text-helper);
+  margin: 0;
+}
+
+.meta {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: $spacing-02 $spacing-05;
+  padding: $spacing-04 0;
+  border-top: 1px solid $ui-03;
+  border-bottom: 1px solid $ui-03;
+  margin: 0 0 $spacing-05;
+}
+
+.meta dt {
+  @include type.type-style('label-01');
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--cds-text-helper);
+  margin: 0;
+}
+
+.meta dd {
+  @include type.type-style('body-compact-01');
+  color: var(--cds-text-primary);
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+}

package/src/discounts/admin/review-bill-discounts/bill-totals-summary/bill-totals-summary.component.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { useConfig } from '@openmrs/esm-framework';
+import { convertToCurrency } from '../../../../helpers';
+import type { BillingConfig } from '../../../../config-schema';
+import { BillDiscountType, type BillDiscount } from '../../../../types';
+import styles from './bill-totals-summary.scss';
+
+interface Props {
+  subtotal: number;
+  currentNet: number;
+  outstanding: number;
+  paymentsTotal: number;
+  approvedDiscounts: BillDiscount[];
+  pendingDiscounts: BillDiscount[];
+}
+
+const BillTotalsSummary: React.FC<Props> = ({
+  subtotal,
+  currentNet,
+  outstanding,
+  paymentsTotal,
+  approvedDiscounts,
+  pendingDiscounts,
+}) => {
+  const { t } = useTranslation();
+  const { defaultCurrency } = useConfig<BillingConfig>();
+
+  const formatValue = (d: BillDiscount) =>
+    d.discountType === BillDiscountType.PERCENTAGE
+      ? `${d.discountValue}%`
+      : convertToCurrency(d.discountValue, defaultCurrency);
+
+  return (
+    <section className={styles.totals}>
+      <div className={classNames(styles.totalsRow, styles.totalsSubtotal)}>
+        <span>{t('subtotal', 'Subtotal')}</span>
+        <span>{convertToCurrency(subtotal, defaultCurrency)}</span>
+      </div>
+      {approvedDiscounts.map((d) => (
+        <div key={d.uuid} className={classNames(styles.totalsRow, styles.totalsRowMinus)}>
+          <span>− {t('discount', 'Discount')}</span>
+          <span>{convertToCurrency(d.discountAmount, defaultCurrency)}</span>
+        </div>
+      ))}
+
+      <hr className={styles.totalsRule} />
+
+      <div className={classNames(styles.totalsRow, styles.totalsNet)}>
+        <span>{t('currentNet', 'Current net')}</span>
+        <span className={styles.totalsNetAmount}>{convertToCurrency(currentNet, defaultCurrency)}</span>
+      </div>
+
+      {paymentsTotal > 0 && (
+        <div className={classNames(styles.totalsRow, styles.totalsRowAdd)}>
+          <span>− {t('paymentsReceived', 'Payments received')}</span>
+          <span>{convertToCurrency(paymentsTotal, defaultCurrency)}</span>
+        </div>
+      )}
+
+      <hr className={styles.totalsRuleStrong} />
+
+      <div className={classNames(styles.totalsRow, styles.totalsOutstanding)}>
+        <span>{t('outstanding', 'Outstanding')}</span>
+        <span className={styles.totalsOutstandingAmount}>{convertToCurrency(outstanding, defaultCurrency)}</span>
+      </div>
+
+      {pendingDiscounts.length > 0 && (
+        <div className={styles.preview}>
+          <p className={styles.previewLabel}>{t('ifPendingApproved', 'If pending discounts approved')}</p>
+          {pendingDiscounts.map((d) => (
+            <div key={d.uuid} className={classNames(styles.totalsRow, styles.totalsRowMinus)}>
+              <span>
+                − {t('discount', 'Discount')} ({formatValue(d)})
+              </span>
+              <span>{convertToCurrency(d.discountAmount, defaultCurrency)}</span>
+            </div>
+          ))}
+          <div className={classNames(styles.totalsRow, styles.previewProjected)}>
+            <span>{t('projectedNet', 'Projected net')}</span>
+            <span className={styles.previewProjectedAmount}>
+              {convertToCurrency(
+                currentNet - pendingDiscounts.reduce((s, d) => s + d.discountAmount, 0),
+                defaultCurrency,
+              )}
+            </span>
+          </div>
+        </div>
+      )}
+    </section>
+  );
+};
+
+export default BillTotalsSummary;

package/src/discounts/admin/review-bill-discounts/bill-totals-summary/bill-totals-summary.scss

@@ -0,0 +1,128 @@
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.totals {
+  @include type.type-style('body-compact-01');
+}
+
+.totalsRow {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: $spacing-02 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.totalsRow span:first-child {
+  color: var(--cds-text-secondary);
+}
+
+.totalsSubtotal span:first-child {
+  @include type.type-style('label-01');
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--cds-text-secondary);
+}
+
+.totalsRowMinus,
+.totalsRowMinus span:first-child {
+  color: $danger;
+}
+
+.totalsRowAdd,
+.totalsRowAdd span:first-child {
+  color: $support-02;
+}
+
+.totalsRule {
+  border: 0;
+  border-top: 1px solid $ui-03;
+  margin: $spacing-02 0 $spacing-01;
+}
+
+.totalsRuleStrong {
+  border: 0;
+  border-top: 1px solid $ui-05;
+  margin: $spacing-03 0 $spacing-02;
+}
+
+.totalsNet {
+  padding-top: $spacing-02;
+}
+
+.totalsNet span:first-child {
+  @include type.type-style('label-01');
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--cds-text-primary);
+}
+
+.totalsNetAmount {
+  @include type.type-style('heading-03');
+  color: var(--cds-text-primary);
+}
+
+.totalsOutstanding {
+  padding: $spacing-03 0 $spacing-02;
+}
+
+.totalsOutstanding span:first-child {
+  @include type.type-style('label-01');
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--cds-text-primary);
+}
+
+.totalsOutstandingAmount {
+  @include type.type-style('heading-05');
+  color: var(--cds-text-primary);
+  letter-spacing: -0.015em;
+}
+
+.preview {
+  margin-top: $spacing-03;
+  padding: $spacing-03 $spacing-04;
+  background: $warning-background;
+  border: 1px dashed $color-gray-30;
+  border-left: 2px solid $inverse-support-03;
+}
+
+.previewLabel {
+  @include type.type-style('label-01');
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--cds-text-primary);
+  margin: 0 0 $spacing-03;
+  display: flex;
+  align-items: center;
+  gap: $spacing-02;
+}
+
+.previewLabel::before {
+  content: '◇';
+  color: $inverse-support-03;
+  font-size: 12px;
+}
+
+.preview .totalsRow {
+  padding: $spacing-01 0;
+}
+
+.previewProjected {
+  margin-top: $spacing-02;
+  padding-top: $spacing-02;
+  border-top: 1px solid $color-gray-30;
+}
+
+.previewProjected span:first-child {
+  @include type.type-style('label-01');
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--cds-text-primary);
+}
+
+.previewProjectedAmount {
+  @include type.type-style('heading-02');
+  color: var(--cds-text-primary);
+}

package/src/discounts/admin/review-bill-discounts/discount-card/discount-card.component.tsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Button, Tag } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { formatDate, getCoreTranslation, parseDate, useConfig } from '@openmrs/esm-framework';
+import type { BillingConfig } from '../../../../config-schema';
+import { convertToCurrency } from '../../../../helpers';
+import { BillDiscountStatus, BillDiscountType, type BillDiscount, type LineItem } from '../../../../types';
+import styles from './discount-card.scss';
+
+interface Props {
+  discount: BillDiscount;
+  lineItems: Array<LineItem>;
+  busy: string | null;
+  rejectingId: string | null;
+  deletingId: string | null;
+  canDecide: boolean;
+  onApprove: (d: BillDiscount) => void;
+  onStartReject: (uuid: string) => void;
+  onCancelReject: () => void;
+  onConfirmReject: (d: BillDiscount) => void;
+  onStartDelete: (uuid: string) => void;
+  onCancelDelete: () => void;
+  onConfirmDelete: (d: BillDiscount) => void;
+}
+
+const statusKind: Record<BillDiscountStatus, 'gray' | 'green' | 'red'> = {
+  PENDING: 'gray',
+  APPROVED: 'green',
+  REJECTED: 'red',
+};
+
+const DiscountCard: React.FC<Props> = ({
+  discount: d,
+  lineItems,
+  busy,
+  rejectingId,
+  deletingId,
+  canDecide,
+  onApprove,
+  onStartReject,
+  onCancelReject,
+  onConfirmReject,
+  onStartDelete,
+  onCancelDelete,
+  onConfirmDelete,
+}) => {
+  const { t } = useTranslation();
+  const { defaultCurrency } = useConfig<BillingConfig>();
+
+  const isRejecting = rejectingId === d.uuid;
+  const isDeleting = deletingId === d.uuid;
+  const showDefaultActions = !isRejecting && !isDeleting;
+  const cardClass = classNames(styles.card, {
+    [styles.cardPending]: d.status === BillDiscountStatus.PENDING,
+    [styles.cardApproved]: d.status === BillDiscountStatus.APPROVED,
+    [styles.cardRejected]: d.status === BillDiscountStatus.REJECTED,
+  });
+
+  const formatValue =
+    d.discountType === BillDiscountType.PERCENTAGE
+      ? `${d.discountValue}%`
+      : convertToCurrency(d.discountValue, defaultCurrency);
+
+  const scopeName = d.lineItemUuid
+    ? lineItems.find((l: LineItem) => l.uuid === d.lineItemUuid)?.item ||
+      lineItems.find((l: LineItem) => l.uuid === d.lineItemUuid)?.billableService ||
+      '--'
+    : t('wholeBill', 'Whole bill');
+
+  return (
+    <article className={cardClass}>
+      <header className={styles.cardTop}>
+        <div className={styles.cardScope}>
+          <span className={styles.cardScopeName}>{scopeName}</span>
+          <span className={styles.cardScopeKind}>
+            {d.discountType === BillDiscountType.PERCENTAGE
+              ? t('percentage', 'Percentage')
+              : t('fixedAmount', 'Fixed amount')}
+          </span>
+        </div>
+        {d.status !== BillDiscountStatus.PENDING && (
+          <Tag type={statusKind[d.status]} size="sm">
+            {t(d.status.toLowerCase(), d.status)}
+          </Tag>
+        )}
+      </header>
+
+      <div className={styles.cardFigure}>
+        <span
+          className={classNames(styles.cardAmount, {
+            [styles.cardAmountVoided]: d.status === BillDiscountStatus.REJECTED,
+          })}>
+          <span className={styles.cardAmountMinus}>−</span>
+          {convertToCurrency(d.discountAmount, defaultCurrency)}
+        </span>
+        {d.discountType === BillDiscountType.PERCENTAGE && <span className={styles.cardValue}>{formatValue}</span>}
+      </div>
+
+      <div>
+        {t('reasonForDiscount', 'Reason for discount')}: <p className={styles.cardJustification}>{d.justification}</p>
+      </div>
+
+      <footer className={styles.cardFooter}>
+        <div className={styles.cardByline}>
+          {t('requestedBy', 'Requested by')} <strong>{d.initiator?.display}</strong>
+          <span className={styles.cardBylineSep}>·</span>
+          {formatDate(parseDate(d.dateCreated), { mode: 'wide' })}
+        </div>
+        <div className={styles.cardActions}>
+          {showDefaultActions && d.status === BillDiscountStatus.PENDING && (
+            <>
+              <Button
+                kind="danger--tertiary"
+                size="sm"
+                disabled={!!busy || !canDecide}
+                onClick={() => onStartReject(d.uuid)}>
+                {t('reject', 'Reject')}
+              </Button>
+              <Button kind="primary" size="sm" disabled={!!busy || !canDecide} onClick={() => onApprove(d)}>
+                {t('approve', 'Approve')}
+              </Button>
+            </>
+          )}
+          {showDefaultActions && (
+            <Button kind="danger" size="sm" disabled={!!busy} onClick={() => onStartDelete(d.uuid)}>
+              {t('delete', 'Delete')}
+            </Button>
+          )}
+          {isRejecting && (
+            <>
+              <span className={styles.confirmCopy}>{t('rejectConfirm', 'Reject this discount?')}</span>
+              <Button kind="ghost" size="sm" onClick={onCancelReject}>
+                {getCoreTranslation('cancel')}
+              </Button>
+              <Button kind="danger" size="sm" disabled={!!busy} onClick={() => onConfirmReject(d)}>
+                {t('confirmReject', 'Confirm reject')}
+              </Button>
+            </>
+          )}
+          {isDeleting && (
+            <>
+              <span className={styles.confirmCopy}>{t('deleteConfirm', 'Delete this discount?')}</span>
+              <Button kind="ghost" size="sm" onClick={onCancelDelete}>
+                {getCoreTranslation('cancel')}
+              </Button>
+              <Button kind="danger" size="sm" disabled={!!busy} onClick={() => onConfirmDelete(d)}>
+                {t('confirmDelete', 'Confirm delete')}
+              </Button>
+            </>
+          )}
+        </div>
+      </footer>
+    </article>
+  );
+};
+
+export default DiscountCard;