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

package/src/refunds/admin/review-bill-refunds/refund-card/refund-card.component.tsx

@@ -0,0 +1,170 @@
+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 { RefundStatus, type BillRefund, type LineItem } from '../../../../types';
+import styles from './refund-card.scss';
+
+const statusTagType: Record<string, 'gray' | 'green' | 'red' | 'purple'> = {
+  REQUESTED: 'gray',
+  APPROVED: 'green',
+  REJECTED: 'red',
+  COMPLETED: 'purple',
+};
+
+interface Props {
+  refund: BillRefund;
+  lineItems: Array<LineItem>;
+  processingRefundId: string | null;
+  disabled: boolean;
+  rejectingId: string | null;
+  voidingId: string | null;
+  onApprove: (r: BillRefund) => void;
+  onStartReject: (uuid: string) => void;
+  onCancelReject: () => void;
+  onConfirmReject: (r: BillRefund) => void;
+  onStartVoid: (uuid: string) => void;
+  onCancelVoid: () => void;
+  onConfirmVoid: (r: BillRefund) => void;
+}
+
+const RefundCard: React.FC<Props> = ({
+  refund: r,
+  lineItems,
+  processingRefundId,
+  disabled,
+  rejectingId,
+  voidingId,
+  onApprove,
+  onStartReject,
+  onCancelReject,
+  onConfirmReject,
+  onStartVoid,
+  onCancelVoid,
+  onConfirmVoid,
+}) => {
+  const { t } = useTranslation();
+  const { defaultCurrency } = useConfig<BillingConfig>();
+
+  const isRejecting = rejectingId === r.uuid;
+  const isVoiding = voidingId === r.uuid;
+  const showDefaultActions = !isRejecting && !isVoiding;
+
+  const cardClass = classNames(styles.card, {
+    [styles.cardRequested]: r.status === RefundStatus.REQUESTED,
+    [styles.cardApproved]: r.status === RefundStatus.APPROVED,
+    [styles.cardRejected]: r.status === RefundStatus.REJECTED,
+    [styles.cardCompleted]: r.status === RefundStatus.COMPLETED,
+  });
+
+  const scopeName = r.lineItemUuid
+    ? lineItems.find((l) => l.uuid === r.lineItemUuid)?.item ||
+      lineItems.find((l) => l.uuid === r.lineItemUuid)?.billableService ||
+      '--'
+    : t('wholeBill', 'Whole bill');
+
+  return (
+    <article className={cardClass}>
+      <header className={styles.cardTop}>
+        <div className={styles.cardScope}>
+          <span className={styles.cardScopeName}>{scopeName}</span>
+        </div>
+        {r.status !== RefundStatus.REQUESTED && (
+          <Tag type={statusTagType[r.status]} size="sm">
+            {t(r.status.toLowerCase(), r.status)}
+          </Tag>
+        )}
+      </header>
+
+      <div className={styles.cardFigure}>
+        <span
+          className={classNames(styles.cardAmount, {
+            [styles.cardAmountVoided]: r.status === RefundStatus.REJECTED,
+          })}>
+          <span className={styles.cardAmountMinus}>−</span>
+          {convertToCurrency(r.refundAmount, defaultCurrency)}
+        </span>
+      </div>
+
+      <div>
+        {t('reasonForRefund', 'Reason for refund')}: <p className={styles.cardJustification}>{r.reason}</p>
+      </div>
+
+      {r.status === RefundStatus.APPROVED && (
+        <p className={styles.awaitingLabel}>{t('awaitingCashierProcessing', 'Awaiting cashier processing')}</p>
+      )}
+
+      <footer className={styles.cardFooter}>
+        <div className={styles.cardByline}>
+          {t('requestedBy', 'Requested by')} <strong>{r.initiator?.display}</strong>
+          <span className={styles.cardBylineSep}>·</span>
+          {formatDate(parseDate(r.dateCreated), { mode: 'wide' })}
+        </div>
+        <div className={styles.cardActions}>
+          {showDefaultActions && r.status === RefundStatus.REQUESTED && (
+            <>
+              <Button
+                kind="danger--tertiary"
+                size="sm"
+                disabled={disabled || !!processingRefundId}
+                onClick={() => onStartReject(r.uuid)}>
+                {t('reject', 'Reject')}
+              </Button>
+              <Button kind="primary" size="sm" disabled={disabled || !!processingRefundId} onClick={() => onApprove(r)}>
+                {t('approve', 'Approve')}
+              </Button>
+            </>
+          )}
+          {showDefaultActions && (
+            <Button
+              kind="danger"
+              size="sm"
+              disabled={disabled || !!processingRefundId}
+              onClick={() => onStartVoid(r.uuid)}>
+              {t('delete', 'Delete')}
+            </Button>
+          )}
+          {isRejecting && (
+            <div className={styles.confirmRow}>
+              <span className={styles.confirmCopy}>{t('rejectConfirmRefund', 'Reject this refund?')}</span>
+              <div className={styles.confirmButtons}>
+                <Button kind="ghost" size="sm" onClick={onCancelReject}>
+                  {getCoreTranslation('cancel')}
+                </Button>
+                <Button
+                  kind="danger"
+                  size="sm"
+                  disabled={disabled || !!processingRefundId}
+                  onClick={() => onConfirmReject(r)}>
+                  {t('confirmReject', 'Confirm reject')}
+                </Button>
+              </div>
+            </div>
+          )}
+          {isVoiding && (
+            <div className={styles.confirmRow}>
+              <span className={styles.confirmCopy}>{t('deleteConfirmRefund', 'Delete this refund?')}</span>
+              <div className={styles.confirmButtons}>
+                <Button kind="ghost" size="sm" onClick={onCancelVoid}>
+                  {getCoreTranslation('cancel')}
+                </Button>
+                <Button
+                  kind="danger"
+                  size="sm"
+                  disabled={disabled || !!processingRefundId}
+                  onClick={() => onConfirmVoid(r)}>
+                  {t('confirmDelete', 'Confirm delete')}
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </footer>
+    </article>
+  );
+};
+
+export default RefundCard;

package/src/refunds/admin/review-bill-refunds/refund-card/refund-card.scss

@@ -0,0 +1,155 @@
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.card {
+  position: relative;
+  border: 1px solid $ui-03;
+  background: $ui-02;
+  padding: $spacing-05 $spacing-05 $spacing-04 $spacing-06;
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background: $color-gray-30;
+}
+
+.cardRequested::before {
+  background: $inverse-support-03;
+}
+
+.cardApproved::before {
+  background: $support-02;
+}
+
+.cardRejected::before {
+  background: $danger;
+}
+
+.cardCompleted::before {
+  background: $support-02;
+}
+
+.cardTop {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: $spacing-04;
+  margin-bottom: $spacing-03;
+}
+
+.cardScope {
+  display: flex;
+  align-items: center;
+  gap: $spacing-03;
+  flex-wrap: wrap;
+}
+
+.cardScopeName {
+  @include type.type-style('heading-02');
+  color: var(--cds-text-primary);
+}
+
+.cardFigure {
+  display: flex;
+  align-items: baseline;
+  gap: $spacing-03;
+  margin-bottom: $spacing-04;
+  font-variant-numeric: tabular-nums;
+}
+
+.cardAmount {
+  @include type.type-style('heading-05');
+  letter-spacing: -0.015em;
+  color: var(--cds-text-primary);
+  line-height: 1;
+}
+
+.cardAmountMinus {
+  color: $danger;
+  margin-right: 2px;
+}
+
+.cardAmountVoided {
+  color: var(--cds-text-helper);
+}
+
+.cardJustification {
+  @include type.type-style('body-01');
+  font-style: italic;
+  color: var(--cds-text-secondary);
+  padding: $spacing-01 0 $spacing-01 $spacing-03;
+  margin: 0 0 $spacing-04;
+}
+
+.awaitingLabel {
+  @include type.type-style('label-01');
+  color: var(--cds-text-helper);
+  font-style: italic;
+  margin-bottom: $spacing-04;
+}
+
+.cardFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-04;
+  padding-top: $spacing-03;
+  border-top: 1px solid $ui-03;
+  flex-wrap: wrap;
+}
+
+.cardByline {
+  @include type.type-style('label-01');
+  color: var(--cds-text-helper);
+  display: flex;
+  gap: $spacing-02;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.cardByline strong {
+  font-weight: 500;
+  color: var(--cds-text-secondary);
+}
+
+.cardBylineSep {
+  color: $color-gray-30;
+}
+
+.cardActions {
+  display: flex;
+  gap: $spacing-02;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.cardActions :global(.cds--btn) {
+  min-width: 7rem;
+  justify-content: center;
+}
+
+.confirmRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $spacing-03 $spacing-04;
+  width: 100%;
+}
+
+.confirmCopy {
+  @include type.type-style('body-compact-01');
+  color: var(--cds-text-secondary);
+}
+
+.confirmButtons {
+  display: flex;
+  gap: $spacing-02;
+  align-items: center;
+  margin-left: auto;
+}

package/src/refunds/admin/review-bill-refunds/refund-review-stack/refund-review-stack.component.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import RefundCard from '../refund-card/refund-card.component';
+import type { BillRefund, LineItem } from '../../../../types';
+import styles from './refund-review-stack.scss';
+
+interface Props {
+  requestedRefunds: BillRefund[];
+  decidedRefunds: BillRefund[];
+  lineItems: Array<LineItem>;
+  processingRefundId: string | null;
+  disabled: boolean;
+  rejectingId: string | null;
+  voidingId: string | null;
+  onApprove: (r: BillRefund) => void;
+  onStartReject: (uuid: string) => void;
+  onCancelReject: () => void;
+  onConfirmReject: (r: BillRefund) => void;
+  onStartVoid: (uuid: string) => void;
+  onCancelVoid: () => void;
+  onConfirmVoid: (r: BillRefund) => void;
+}
+
+const RefundReviewStack: React.FC<Props> = ({
+  requestedRefunds,
+  decidedRefunds,
+  lineItems,
+  processingRefundId,
+  disabled,
+  rejectingId,
+  voidingId,
+  onApprove,
+  onStartReject,
+  onCancelReject,
+  onConfirmReject,
+  onStartVoid,
+  onCancelVoid,
+  onConfirmVoid,
+}) => {
+  const { t } = useTranslation();
+
+  const renderCard = (r: BillRefund) => (
+    <RefundCard
+      key={r.uuid}
+      refund={r}
+      lineItems={lineItems}
+      processingRefundId={processingRefundId}
+      disabled={disabled}
+      rejectingId={rejectingId}
+      voidingId={voidingId}
+      onApprove={onApprove}
+      onStartReject={onStartReject}
+      onCancelReject={onCancelReject}
+      onConfirmReject={onConfirmReject}
+      onStartVoid={onStartVoid}
+      onCancelVoid={onCancelVoid}
+      onConfirmVoid={onConfirmVoid}
+    />
+  );
+
+  return (
+    <section className={styles.review}>
+      {requestedRefunds.length > 0 && (
+        <div>
+          <div className={styles.groupHeader}>
+            <h3 className={styles.groupTitle}>{t('requestedRefunds', 'Requested refunds')}</h3>
+            <span className={styles.groupCount}>{requestedRefunds.length}</span>
+          </div>
+          <div className={styles.stack}>{requestedRefunds.map(renderCard)}</div>
+        </div>
+      )}
+
+      {decidedRefunds.length > 0 && (
+        <div>
+          <div className={styles.groupHeader}>
+            <h3 className={styles.groupTitle}>{t('decidedRefunds', 'Decided refunds')}</h3>
+            <span className={styles.groupCount}>{decidedRefunds.length}</span>
+          </div>
+          <div className={styles.stack}>{decidedRefunds.map(renderCard)}</div>
+        </div>
+      )}
+    </section>
+  );
+};
+
+export default React.memo(RefundReviewStack);

package/src/refunds/admin/review-bill-refunds/refund-review-stack/refund-review-stack.scss

@@ -0,0 +1,40 @@
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.review {
+    padding: $spacing-06 $spacing-07 $spacing-07;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-06;
+    background: $ui-02;
+}
+
+.groupHeader {
+    display: flex;
+    align-items: baseline;
+    gap: $spacing-03;
+    margin-bottom: $spacing-04;
+}
+
+.groupTitle {
+    @include type.type-style('label-01');
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--cds-text-helper);
+    margin: 0;
+}
+
+.groupCount {
+    @include type.type-style('code-01');
+    color: var(--cds-text-helper);
+    padding: 2px $spacing-02;
+    background: $ui-01;
+    border: 1px solid $ui-03;
+}
+
+.stack {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-04;
+}

package/src/refunds/admin/review-bill-refunds/review-bill-refunds.modal.scss

@@ -0,0 +1,14 @@
+@use '@carbon/styles/scss/spacing' as *;
+
+.layout {
+  display: grid;
+  grid-template-columns: 380px 1fr;
+  gap: 0;
+  min-height: 480px;
+}
+
+@media (max-width: 900px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+}