@openmrs/esm-billing-app 1.0.1-pre.100

package/src/billable-services/billable-services.scss

@@ -0,0 +1,218 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  margin: 2rem 0;
+}
+
+.emptyStateContainer,
+.loaderContainer {
+  @extend .container;
+}
+
+.serviceContainer {
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  width: 100%;
+  margin: 0 auto;
+  max-width: 95vw;
+  padding-bottom: 0;
+
+  :has(.filterEmptyState) {
+    border-bottom: none;
+  }
+}
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  align-items: center;
+}
+
+.filterContainer {
+  flex: 1;
+
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: 1rem;
+  }
+
+  :global(.cds--list-box__menu) {
+    min-width: max-content;
+  }
+
+  :global(.cds--list-box) {
+    margin-left: layout.$spacing-03;
+  }
+}
+
+.menu {
+  margin-left: layout.$spacing-03;
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-04 layout.$spacing-05;
+  background-color: $ui-02;
+}
+
+.backgroundDataFetchingIndicator {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+
+  &:global(.cds--inline-loading) {
+    max-height: 1rem;
+  }
+}
+
+.tableContainer section {
+  position: relative;
+}
+
+.tableContainer a {
+  text-decoration: none;
+}
+
+.pagination {
+  overflow: hidden;
+
+  &:global(.cds--pagination) {
+    border-top: none;
+  }
+}
+
+.hiddenRow {
+  display: none;
+}
+
+.emptyRow {
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.visitSummaryContainer {
+  width: 100%;
+  max-width: 768px;
+  margin: 1rem auto;
+}
+
+.expandedActiveVisitRow > td > div {
+  max-height: max-content !important;
+}
+
+.expandedActiveVisitRow td {
+  padding: 0 2rem;
+}
+
+.expandedActiveVisitRow th[colspan] td[colspan] > div:first-child {
+  padding: 0 1rem;
+}
+
+.action {
+  margin-bottom: layout.$spacing-03;
+}
+
+.illo {
+  margin-top: layout.$spacing-05;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  flex: 1;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 2rem;
+      padding-top: 3px;
+      border-bottom: 0.375rem solid;
+      @include brand-03(border-bottom-color);
+    }
+  }
+}
+
+.tile {
+  text-align: center;
+  border: 1px solid $ui-03;
+}
+
+.menuitem {
+  max-width: none;
+}
+
+.filterEmptyState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: layout.$spacing-05;
+  margin: layout.$spacing-09;
+  text-align: center;
+}
+
+.filterEmptyStateTile {
+  margin: auto;
+}
+
+.filterEmptyStateContent {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}
+
+.filterEmptyStateHelper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+.metricsContainer {
+  display: flex;
+  justify-content: space-between;
+  background-color: $ui-02;
+  height: layout.$spacing-10;
+  align-items: center;
+  padding: 0 layout.$spacing-05;
+}
+
+.metricsTitle {
+  @include type.type-style('heading-03');
+  color: $ui-05;
+}
+
+.actionsContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: $ui-02;
+}
+.actionBtn {
+  display: flex;
+  column-gap: 0.5rem;
+}
+
+.mainSection {
+  display: grid;
+  grid-template-columns: 16rem 1fr;
+}

package/src/billable-services/billable-services.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import BillableServices from './billable-services.component';
+
+describe('BillableService', () => {
+  test('renders an empty state when there are no billable services', () => {
+    renderBillableServices();
+
+    expect(screen.getByText(/Empty data illustration/i)).toBeInTheDocument();
+    expect(screen.getByText(/There are no services to display to display for this patient/i)).toBeInTheDocument();
+  });
+});
+
+function renderBillableServices() {
+  render(<BillableServices />);
+}

package/src/billable-services/create-edit/add-billable-service.component.tsx

@@ -0,0 +1,322 @@
+/* eslint-disable curly */
+import React, { useCallback, useRef, useState } from 'react';
+import {
+  Button,
+  ComboBox,
+  Dropdown,
+  Form,
+  FormLabel,
+  InlineLoading,
+  Layer,
+  Search,
+  TextInput,
+  Tile,
+} from '@carbon/react';
+import { navigate, showSnackbar, useDebounce, useLayoutType, useSession } from '@openmrs/esm-framework';
+import { Add, TrashCan, WarningFilled } from '@carbon/react/icons';
+import { Controller, useFieldArray, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  createBillableSerice,
+  useConceptsSearch,
+  usePaymentModes,
+  useServiceTypes,
+} from '../billable-service.resource';
+import { type ServiceConcept } from '../../types';
+import styles from './add-billable-service.scss';
+
+type PaymentMode = {
+  paymentMode: string;
+  price: string | number;
+};
+
+type PaymentModeFormValue = {
+  payment: Array<PaymentMode>;
+};
+
+const servicePriceSchema = z.object({
+  paymentMode: z.string().refine((value) => !!value, 'Payment method is required'),
+  price: z.union([
+    z.number().refine((value) => !!value, 'Price is required'),
+    z.string().refine((value) => !!value, 'Price is required'),
+  ]),
+});
+
+const paymentFormSchema = z.object({ payment: z.array(servicePriceSchema) });
+
+const DEFAULT_PAYMENT_OPTION = { paymentMode: '', price: 0 };
+
+const AddBillableService: React.FC = () => {
+  const { t } = useTranslation();
+
+  const { paymentModes, isLoading: isLoadingPaymentModes } = usePaymentModes();
+  const { serviceTypes, isLoading: isLoadingServicesTypes } = useServiceTypes();
+  const [billableServicePayload, setBillableServicePayload] = useState<any>({});
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<any>({
+    mode: 'all',
+    defaultValues: {},
+    resolver: zodResolver(paymentFormSchema),
+  });
+  const { fields, remove, append } = useFieldArray({ name: 'payment', control: control });
+
+  const handleAppendPaymentMode = useCallback(() => append(DEFAULT_PAYMENT_OPTION), [append]);
+  const handleRemovePaymentMode = useCallback((index) => remove(index), [remove]);
+
+  const isTablet = useLayoutType() === 'tablet';
+  const searchInputRef = useRef(null);
+  const handleSearchTermChange = (event: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(event.target.value);
+
+  const [selectedConcept, setSelectedConcept] = useState<ServiceConcept>(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm);
+  const { searchResults, isSearching } = useConceptsSearch(debouncedSearchTerm);
+  const handleConceptChange = useCallback((selectedConcept: any) => {
+    setSelectedConcept(selectedConcept);
+  }, []);
+
+  const handleNavigateToServiceDashboard = () =>
+    navigate({
+      to: window.getOpenmrsSpaBase() + 'billable-services',
+    });
+
+  if (isLoadingPaymentModes && isLoadingServicesTypes) {
+    return (
+      <InlineLoading
+        status="active"
+        iconDescription={t('loadingDescription', 'Loading')}
+        description={t('loading', 'Loading data...')}
+      />
+    );
+  }
+
+  const onSubmit = (data) => {
+    const payload: any = {};
+
+    let servicePrices = [];
+    data.payment.forEach((element) => {
+      element.name = paymentModes.filter((p) => p.uuid === element.paymentMode)[0].name;
+      servicePrices.push(element);
+    });
+    payload.name = billableServicePayload.serviceName;
+    payload.shortName = billableServicePayload.shortName;
+    payload.serviceType = billableServicePayload.serviceType.uuid;
+    payload.servicePrices = servicePrices;
+    payload.serviceStatus = 'ENABLED';
+    payload.concept = selectedConcept?.concept?.uuid;
+
+    createBillableSerice(payload).then(
+      (resp) => {
+        showSnackbar({
+          title: t('billableService', 'Billable service'),
+          subtitle: 'Billable service created successfully',
+          kind: 'success',
+          timeoutInMs: 3000,
+        });
+        handleNavigateToServiceDashboard();
+      },
+      (error) => {
+        showSnackbar({ title: 'Bill payment error', kind: 'error', subtitle: error?.message });
+      },
+    );
+  };
+
+  return (
+    <Form className={styles.form}>
+      <h4>{t('addBillableServices', 'Add Billable Services')}</h4>
+      <section className={styles.section}>
+        <Layer>
+          <TextInput
+            id="serviceName"
+            type="text"
+            labelText={t('serviceName', 'Service Name')}
+            size="md"
+            onChange={(e) =>
+              setBillableServicePayload({
+                ...billableServicePayload,
+                serviceName: e.target.value,
+              })
+            }
+            placeholder="Enter service name"
+          />
+        </Layer>
+      </section>
+      <section className={styles.section}>
+        <Layer>
+          <TextInput
+            id="serviceShortName"
+            type="text"
+            labelText={t('serviceShortName', 'Short Name')}
+            size="md"
+            onChange={(e) =>
+              setBillableServicePayload({
+                ...billableServicePayload,
+                shortName: e.target.value,
+              })
+            }
+            placeholder="Enter service short name"
+          />
+        </Layer>
+      </section>
+      <section>
+        <FormLabel className={styles.conceptLabel}>Associated Concept</FormLabel>
+        <Controller
+          name="search"
+          control={control}
+          render={({ field: { onChange, value, onBlur } }) => (
+            <ResponsiveWrapper isTablet={isTablet}>
+              <Search
+                ref={searchInputRef}
+                size="md"
+                id="conceptsSearch"
+                labelText={t('enterConcept', 'Associated concept')}
+                placeholder={t('searchConcepts', 'Search associated concept')}
+                className={errors?.search && styles.serviceError}
+                onChange={(e) => {
+                  onChange(e);
+                  handleSearchTermChange(e);
+                }}
+                renderIcon={errors?.search && <WarningFilled />}
+                onBlur={onBlur}
+                onClear={() => {
+                  setSearchTerm('');
+                  setSelectedConcept(null);
+                }}
+                value={(() => {
+                  if (selectedConcept) {
+                    return selectedConcept.display;
+                  }
+                  if (debouncedSearchTerm) {
+                    return value;
+                  }
+                })()}
+              />
+            </ResponsiveWrapper>
+          )}
+        />
+        {(() => {
+          if (!debouncedSearchTerm || selectedConcept) return null;
+          if (isSearching)
+            return <InlineLoading className={styles.loader} description={t('searching', 'Searching') + '...'} />;
+          if (searchResults && searchResults.length) {
+            return (
+              <ul className={styles.conceptsList}>
+                {/*TODO: use uuid instead of index as the key*/}
+                {searchResults?.map((searchResult, index) => (
+                  <li
+                    role="menuitem"
+                    className={styles.service}
+                    key={index}
+                    onClick={() => handleConceptChange(searchResult)}>
+                    {searchResult.display}
+                  </li>
+                ))}
+              </ul>
+            );
+          }
+          return (
+            <Layer>
+              <Tile className={styles.emptyResults}>
+                <span>
+                  {t('noResultsFor', 'No results for')} <strong>"{debouncedSearchTerm}"</strong>
+                </span>
+              </Tile>
+            </Layer>
+          );
+        })()}
+      </section>
+      <section className={styles.section}>
+        <Layer>
+          <ComboBox
+            id="serviceType"
+            items={serviceTypes ?? []}
+            titleText={t('serviceType', 'Service Type')}
+            itemToString={(item) => item?.display}
+            onChange={({ selectedItem }) => {
+              setBillableServicePayload({
+                ...billableServicePayload,
+                display: selectedItem?.display,
+                serviceType: selectedItem,
+              });
+            }}
+            placeholder="Select service type"
+            required
+          />
+        </Layer>
+      </section>
+
+      <section>
+        <div className={styles.container}>
+          {fields.map((field, index) => (
+            <div key={field.id} className={styles.paymentMethodContainer}>
+              <Controller
+                control={control}
+                name={`payment.${index}.paymentMode`}
+                render={({ field }) => (
+                  <Layer>
+                    <Dropdown
+                      onChange={({ selectedItem }) => field.onChange(selectedItem?.uuid)}
+                      titleText={t('paymentMode', 'Payment Mode')}
+                      label={t('selectPaymentMethod', 'Select payment method')}
+                      items={paymentModes ?? []}
+                      itemToString={(item) => (item ? item.name : '')}
+                      invalid={!!errors?.payment?.[index]?.paymentMode}
+                      invalidText={errors?.payment?.[index]?.paymentMode?.message}
+                    />
+                  </Layer>
+                )}
+              />
+              <Controller
+                control={control}
+                name={`payment.${index}.price`}
+                render={({ field }) => (
+                  <Layer>
+                    <TextInput
+                      {...field}
+                      invalid={!!errors?.payment?.[index]?.price}
+                      invalidText={errors?.payment?.[index]?.price?.message}
+                      labelText={t('sellingPrice', 'Selling Price')}
+                      placeholder={t('sellingAmount', 'Enter selling price')}
+                    />
+                  </Layer>
+                )}
+              />
+              <div className={styles.removeButtonContainer}>
+                <TrashCan onClick={handleRemovePaymentMode} className={styles.removeButton} size={20} />
+              </div>
+            </div>
+          ))}
+          <Button
+            size="md"
+            onClick={handleAppendPaymentMode}
+            className={styles.paymentButtons}
+            renderIcon={(props) => <Add size={24} {...props} />}
+            iconDescription="Add">
+            {t('addPaymentOptions', 'Add payment option')}
+          </Button>
+        </div>
+      </section>
+
+      <section>
+        <Button kind="secondary" onClick={handleNavigateToServiceDashboard}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button type="submit" onClick={handleSubmit(onSubmit)}>
+          {t('save', 'Save')}
+        </Button>
+      </section>
+    </Form>
+  );
+};
+
+function ResponsiveWrapper({ children, isTablet }: { children: React.ReactNode; isTablet: boolean }) {
+  return isTablet ? <Layer>{children} </Layer> : <>{children}</>;
+}
+
+export default AddBillableService;

package/src/billable-services/create-edit/add-billable-service.scss

@@ -0,0 +1,131 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.section {
+  margin: layout.$spacing-03;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: layout.$spacing-04;
+}
+
+.modalBody {
+  padding-bottom: layout.$spacing-05;
+}
+
+.container {
+  margin: 1rem;
+}
+
+.paymentContainer {
+  margin: layout.$layout-01;
+  padding: layout.$layout-01;
+  width: 70%;
+  border-right: 1px solid colors.$cool-gray-40;
+}
+
+.paymentButtons {
+  margin: layout.$layout-01 0;
+}
+
+.paymentMethodContainer {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(auto, 1fr));
+  align-items: flex-start;
+  column-gap: 1rem;
+  margin: 0.625rem 0;
+  width: 100%;
+}
+
+.paymentTotals {
+  margin-top: layout.$spacing-01;
+}
+
+.processPayments {
+  display: flex;
+  justify-content: flex-end;
+  margin: layout.$spacing-05;
+  column-gap: layout.$spacing-04;
+}
+
+.errorPaymentContainer {
+  margin: layout.$spacing-04;
+  min-height: layout.$spacing-09;
+}
+
+.removeButtonContainer {
+  display: flex;
+  align-self: center;
+  cursor: pointer;
+  margin-left: layout.$spacing-07;
+}
+
+.removeButton {
+  color: colors.$red-60;
+}
+
+.service {
+  padding: 1rem 0.75rem;
+}
+
+.conceptsList {
+  background-color: $ui-02;
+  max-height: 14rem;
+  overflow-y: auto;
+  border: 1px solid $ui-03;
+
+  li:hover {
+    background-color: $ui-03;
+  }
+}
+
+.emptyResults {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+  min-height: 1rem;
+  border: 1px solid $ui-03;
+}
+
+.conceptLabel {
+  @include type.type-style('label-02');
+  margin: 1rem;
+}
+
+.errorContainer {
+  margin: 1rem;
+}
+
+.serviceError {
+  :global(.cds--search-input):focus {
+    outline: 2.5px solid $danger;
+  }
+
+  :global(.cds--search-magnifier) {
+    svg {
+      fill: $danger;
+    }
+  }
+}
+
+.errorMessage {
+  @include type.type-style('label-02');
+  color: $danger;
+  margin-top: 0.5rem;
+}
+
+.spinner {
+  &:global(.cds--inline-loading) {
+    min-height: 1rem;
+  }
+}