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

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

@@ -0,0 +1,152 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import AddBillableService from './add-billable-service.component';
+import {
+  useBillableServices,
+  usePaymentModes,
+  useServiceTypes,
+  createBillableSerice,
+} from '../billable-service.resource';
+import { FetchResponse, navigate, showSnackbar } from '@openmrs/esm-framework';
+
+const mockUseBillableServices = useBillableServices as jest.MockedFunction<typeof useBillableServices>;
+const mockUsePaymentModes = usePaymentModes as jest.MockedFunction<typeof usePaymentModes>;
+const mockUseServiceTypes = useServiceTypes as jest.MockedFunction<typeof useServiceTypes>;
+const mockCreateBillableSerice = createBillableSerice as jest.MockedFunction<typeof createBillableSerice>;
+const mockNavigate = navigate as jest.MockedFunction<typeof navigate>;
+const mockShowSnackbar = showSnackbar as jest.MockedFunction<typeof showSnackbar>;
+
+jest.mock('../billable-service.resource', () => ({
+  useBillableServices: jest.fn(),
+  usePaymentModes: jest.fn(),
+  useServiceTypes: jest.fn(),
+  createBillableSerice: jest.fn(),
+}));
+
+const mockPaymentModes = [
+  { uuid: '63eff7a4-6f82-43c4-a333-dbcc58fe9f74', name: 'Cash', description: 'Cash Payment', retired: false },
+  {
+    uuid: 'beac329b-f1dc-4a33-9e7c-d95821a137a6',
+    name: 'Insurance',
+    description: 'Insurance method of payment',
+    retired: false,
+  },
+  {
+    uuid: '28989582-e8c3-46b0-96d0-c249cb06d5c6',
+    name: 'MPESA',
+    description: 'Mobile money method of payment',
+    retired: false,
+  },
+];
+
+const mockServiceTypes = [
+  { uuid: 'c9604249-db0a-4d03-b074-fc6bc2fa13e6', display: 'Lab service' },
+  { uuid: 'b75e466f-a6f5-4d5e-849a-84424d3c85cd', display: 'Pharmacy service' },
+  { uuid: 'ce914b2d-44f6-4b6c-933f-c57a3938e35b', display: 'Peer educator service' },
+  { uuid: 'c23d3224-2218-4007-8f22-e1f3d5a8e58a', display: 'Nutrition service' },
+  { uuid: '65487ff4-63b3-452a-8985-6a1f4a0cc08d', display: 'TB service' },
+  { uuid: '9db142d5-5cc4-4c05-9f83-06ed294caa67', display: 'Family planning service' },
+  { uuid: 'a487a743-62ce-4f93-a66b-c5154ee8987d', display: 'Adherence counselling  service' },
+];
+
+xdescribe('AddBillableService', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  test('should render billable services form and generate correct payload', async () => {
+    const user = userEvent.setup();
+    mockUseBillableServices.mockReturnValue({
+      billableServices: [],
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+      isValidating: false,
+    });
+    mockUsePaymentModes.mockReturnValue({ paymentModes: mockPaymentModes, error: null, isLoading: false });
+    mockUseServiceTypes.mockReturnValue({ serviceTypes: mockServiceTypes, error: false, isLoading: false });
+    render(<AddBillableService />);
+
+    const formTtile = screen.getByRole('heading', { name: /Add Billable Services/i });
+    expect(formTtile).toBeInTheDocument();
+
+    const serviceNameTextInp = screen.getByRole('textbox', { name: /Service Name/i });
+    expect(serviceNameTextInp).toBeInTheDocument();
+
+    const serviceShortNameTextInp = screen.getByRole('textbox', { name: /Short Name/i });
+    expect(serviceShortNameTextInp).toBeInTheDocument();
+
+    await user.type(serviceNameTextInp, 'Test Service Name');
+    await user.type(serviceShortNameTextInp, 'Test Short Name');
+
+    expect(serviceNameTextInp).toHaveValue('Test Service Name');
+    expect(serviceShortNameTextInp).toHaveValue('Test Short Name');
+
+    const serviceTypeComboBox = screen.getByRole('combobox', { name: /Service Type/i });
+    expect(serviceTypeComboBox).toBeInTheDocument();
+    await user.click(serviceTypeComboBox);
+    const serviceTypeOptions = screen.getByRole('option', { name: /Lab service/i });
+    expect(serviceTypeOptions).toBeInTheDocument();
+    await user.click(serviceTypeOptions);
+
+    const addPaymentMethodBtn = screen.getByRole('button', { name: /Add payment option/i });
+    expect(addPaymentMethodBtn).toBeInTheDocument();
+
+    await user.click(addPaymentMethodBtn);
+
+    const paymentMethodComboBox = screen.getByRole('combobox', { name: /Payment Mode/i });
+    expect(paymentMethodComboBox).toBeInTheDocument();
+    await user.click(paymentMethodComboBox);
+    const paymentMethodOptions = screen.getByRole('option', { name: /Cash/i });
+    expect(paymentMethodOptions).toBeInTheDocument();
+    await user.click(paymentMethodOptions);
+
+    const priceTextInp = screen.getByRole('textbox', { name: /Price/i });
+    expect(priceTextInp).toBeInTheDocument();
+    await user.type(priceTextInp, '1000');
+
+    mockCreateBillableSerice.mockReturnValue(Promise.resolve({} as FetchResponse<any>));
+    const saveBtn = screen.getByRole('button', { name: /Save/i });
+    expect(saveBtn).toBeInTheDocument();
+    await user.click(saveBtn);
+
+    expect(mockCreateBillableSerice).toHaveBeenCalledTimes(1);
+    expect(mockCreateBillableSerice).toHaveBeenCalledWith({
+      name: 'Test Service Name',
+      shortName: 'Test Short Name',
+      serviceType: undefined,
+      servicePrices: [
+        {
+          paymentMode: '63eff7a4-6f82-43c4-a333-dbcc58fe9f74',
+          price: '01000',
+          name: 'Cash',
+        },
+      ],
+      serviceStatus: 'ENABLED',
+    });
+    expect(mockNavigate).toHaveBeenCalledTimes(1);
+    expect(mockNavigate).toHaveBeenCalledWith({ to: '/openmrs/spa/billable-services' });
+  });
+
+  test("should navigate back to billable services dashboard when 'Cancel' button is clicked", async () => {
+    const user = userEvent.setup();
+    mockUseBillableServices.mockReturnValue({
+      billableServices: [],
+      isLoading: false,
+      error: null,
+      mutate: jest.fn(),
+      isValidating: false,
+    });
+    mockUsePaymentModes.mockReturnValue({ paymentModes: mockPaymentModes, error: null, isLoading: false });
+    mockUseServiceTypes.mockReturnValue({ serviceTypes: mockServiceTypes, error: false, isLoading: false });
+    render(<AddBillableService />);
+
+    const cancelBtn = screen.getByRole('button', { name: /Cancel/i });
+    expect(cancelBtn).toBeInTheDocument();
+    await user.click(cancelBtn);
+
+    expect(mockNavigate).toHaveBeenCalledTimes(1);
+    expect(mockNavigate).toHaveBeenCalledWith({ to: '/openmrs/spa/billable-services' });
+  });
+});

package/src/billable-services/dashboard/dashboard.component.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import BillableServices from '../billable-services.component';
+import styles from './dashboard.scss';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+
+export default function BillableServicesDashboard() {
+  return (
+    <main className={styles.container}>
+      <ExtensionSlot name="billing-home-tiles-slot" />
+      <main className={styles.servicesTableContainer}>
+        <BillableServices />
+      </main>
+    </main>
+  );
+}

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

@@ -0,0 +1,27 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  height: calc(100vh - 3rem);
+}
+
+.servicesTableContainer {
+  margin: 2rem 1rem;
+}
+
+.illo {
+  margin-top: layout.$spacing-05;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-70;
+  margin-top: layout.$spacing-05;
+}
+
+.tile {
+  border: 1px solid colors.$gray-20;
+  padding: 1.5rem 0;
+  text-align: center;
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import BillableServicesDashboard from './dashboard.component';
+
+test('renders an empty state when there are no services', () => {
+  renderBillingDashboard();
+});
+
+function renderBillingDashboard() {
+  render(<BillableServicesDashboard />);
+}

package/src/billable-services/dashboard/service-metrics.component.tsx

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import { InlineLoading } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { ErrorState } from '@openmrs/esm-patient-common-lib';
+import { useBillableServices } from '../billable-service.resource';
+import Card from '../../metrics-cards/card.component';
+import styles from '../../metrics-cards/metrics-cards.scss';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+
+export default function ServiceMetrics() {
+  const { t } = useTranslation();
+  const { isLoading, error } = useBillableServices();
+
+  const cards = useMemo(
+    () => [
+      { title: 'Cash Revenue', count: '--' },
+      { title: 'Insurance Revenue', count: '--' },
+      { title: 'Pending Claims', count: '--' },
+    ],
+    [],
+  );
+
+  if (isLoading) {
+    return (
+      <section className={styles.container}>
+        <InlineLoading status="active" iconDescription="Loading" description="Loading service metrics..." />
+      </section>
+    );
+  }
+
+  if (error) {
+    return <ErrorState headerTitle={t('serviceMetrics', 'Service Metrics')} error={error} />;
+  }
+  return (
+    <section className={styles.container}>
+      {cards.map((card) => (
+        <Card key={card.title} title={card.title} count={card.count} />
+      ))}
+    </section>
+  );
+}

package/src/billable-services-admin-card-link.component.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import BillableServicesCardLink from './billable-services-admin-card-link.component';
+
+describe('BillableServicesCardLink', () => {
+  test('should render billable services admin link', () => {
+    renderBillableServicesCardLink();
+    const manageBillableServicesText = screen.getByText('Manage billable services');
+    expect(manageBillableServicesText).toHaveClass('heading');
+
+    const billiableText = screen.getByText('Billable Services');
+    expect(billiableText).toHaveClass('content');
+
+    const billiableServiceLink = screen.getByRole('link', { name: /Billable Services/i });
+    expect(billiableServiceLink).toHaveAttribute('href', '/spa/billable-services');
+  });
+});
+
+function renderBillableServicesCardLink() {
+  render(<BillableServicesCardLink />);
+}

package/src/billable-services-admin-card-link.component.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Layer, ClickableTile } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
+
+const BillableServicesCardLink: React.FC = () => {
+  const { t } = useTranslation();
+  const header = t('manageBillableServices', 'Manage billable services');
+
+  return (
+    <Layer>
+      <ClickableTile href={`${window.spaBase}/billable-services`} target="_blank" rel="noopener noreferrer">
+        <div>
+          <div className="heading">{header}</div>
+          <div className="content">{t('billableServices', 'Billable Services')}</div>
+        </div>
+        <div className="iconWrapper">
+          <ArrowRight size={16} />
+        </div>
+      </ClickableTile>
+    </Layer>
+  );
+};
+
+export default BillableServicesCardLink;

package/src/billing-dashboard/billing-dashboard.component.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import BillingHeader from '../billing-header/billing-header.component';
+import MetricsCards from '../metrics-cards/metrics-cards.component';
+import BillsTable from '../bills-table/bills-table.component';
+import styles from './billing-dashboard.scss';
+
+export function BillingDashboard() {
+  const { t } = useTranslation();
+
+  return (
+    <main className={styles.container}>
+      <BillingHeader title={t('home', 'Home')} />
+      <MetricsCards />
+      <section className={styles.billsTableContainer}>
+        <BillsTable />
+      </section>
+    </main>
+  );
+}

package/src/billing-dashboard/billing-dashboard.scss

@@ -0,0 +1,27 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  height: calc(100vh - 3rem);
+}
+
+.billsTableContainer {
+  margin: 2rem 1rem;
+}
+
+.illo {
+  margin-top: layout.$spacing-05;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-70;
+  margin-top: layout.$spacing-05;
+}
+
+.tile {
+  border: 1px solid colors.$gray-20;
+  padding: 1.5rem 0;
+  text-align: center;
+}

package/src/billing-dashboard/billing-dashboard.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { BillingDashboard } from './billing-dashboard.component';
+
+test('renders an empty state when there are no billing records', () => {
+  renderBillingDashboard();
+
+  expect(screen.getByTitle(/billing module illustration/i)).toBeInTheDocument();
+});
+
+function renderBillingDashboard() {
+  render(<BillingDashboard />);
+}

package/src/billing-form/billing-checkin-form.component.tsx

@@ -0,0 +1,127 @@
+import React, { useCallback, useState } from 'react';
+import { Dropdown, InlineLoading, InlineNotification } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { useCashPoint, useBillableItems, createPatientBill } from './billing-form.resource';
+import VisitAttributesForm from './visit-attributes/visit-attributes-form.component';
+import styles from './billing-checkin-form.scss';
+
+const DEFAULT_PRICE = 500.00001;
+const PENDING_PAYMENT_STATUS = 'PENDING';
+
+type BillingCheckInFormProps = {
+  patientUuid: string;
+  setExtraVisitInfo: (state) => void;
+};
+
+const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, setExtraVisitInfo }) => {
+  const { t } = useTranslation();
+  const { cashPoints, isLoading: isLoadingCashPoints, error: cashError } = useCashPoint();
+  const { lineItems, isLoading: isLoadingLineItems, error: lineError } = useBillableItems();
+  const [attributes, setAttributes] = useState([]);
+  const [paymentMethod, setPaymentMethod] = useState<any>();
+  let lineList = [];
+
+  const handleCreateExtraVisitInfo = useCallback((createBillPayload) => {
+    createPatientBill(createBillPayload).then(
+      (res) => {
+        showSnackbar({ title: 'Patient Bill', subtitle: 'Patient has been billed successfully', kind: 'success' });
+      },
+      (error) => {
+        showSnackbar({
+          title: 'Patient Bill Error',
+          subtitle: 'An error has occurred while creating patient bill',
+          kind: 'error',
+        });
+      },
+    );
+  }, []);
+
+  const handleBillingService = ({ selectedItem }) => {
+    const cashPointUuid = cashPoints?.[0]?.uuid ?? '';
+    const itemUuid = selectedItem?.uuid ?? '';
+
+    // should default to first price if check returns empty. todo - update backend to return default price
+    const priceForPaymentMode =
+      selectedItem.servicePrices.find((p) => p.paymentMode?.uuid === paymentMethod) || selectedItem?.servicePrices[0];
+
+    const createBillPayload = {
+      lineItems: [
+        {
+          billableService: itemUuid,
+          quantity: 1,
+          price: priceForPaymentMode ? priceForPaymentMode.price : '0.000',
+          priceName: 'Default',
+          priceUuid: priceForPaymentMode ? priceForPaymentMode.uuid : '',
+          lineItemOrder: 0,
+          paymentStatus: PENDING_PAYMENT_STATUS,
+        },
+      ],
+      cashPoint: cashPointUuid,
+      patient: patientUuid,
+      status: PENDING_PAYMENT_STATUS,
+      payments: [],
+    };
+
+    setExtraVisitInfo({
+      createBillPayload,
+      handleCreateExtraVisitInfo: () => handleCreateExtraVisitInfo(createBillPayload),
+      attributes,
+    });
+  };
+
+  if (isLoadingLineItems || isLoadingCashPoints) {
+    return (
+      <InlineLoading
+        status="active"
+        iconDescription={t('loading', 'Loading')}
+        description={t('loadingBillingServices', 'Loading billing services...')}
+      />
+    );
+  }
+
+  if (paymentMethod) {
+    lineList = [];
+    lineList = lineItems.filter((e) =>
+      e.servicePrices.some((p) => p.paymentMode && p.paymentMode.uuid === paymentMethod),
+    );
+  }
+
+  const setServicePrice = (prices) => {
+    const matchingPrice = prices.find((p) => p.paymentMode?.uuid === paymentMethod);
+    return matchingPrice ? `(${matchingPrice.name}:${matchingPrice.price})` : '';
+  };
+
+  if (cashError || lineError) {
+    return (
+      <InlineNotification
+        kind="error"
+        lowContrast
+        title={t('billErrorService', 'Bill service error')}
+        subtitle={t('errorLoadingBillServices', 'Error loading bill services')}
+      />
+    );
+  }
+
+  return (
+    <section className={styles.sectionContainer}>
+      <VisitAttributesForm setAttributes={setAttributes} setPaymentMethod={setPaymentMethod} />
+      {
+        <>
+          <div className={styles.sectionTitle}>{t('billing', 'Billing')}</div>
+          <div className={styles.sectionField}></div>
+          <Dropdown
+            label={t('selectBillableService', 'Select a billable service...')}
+            onChange={handleBillingService}
+            id="billable-items"
+            items={lineList}
+            itemToString={(item) => (item ? `${item.name} ${setServicePrice(item.servicePrices)}` : '')}
+            titleText={t('billableService', 'Billable service')}
+          />
+        </>
+      }
+    </section>
+  );
+};
+
+export default React.memo(BillingCheckInForm);

package/src/billing-form/billing-checkin-form.scss

@@ -0,0 +1,13 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.sectionContainer {
+  margin: 0 layout.$spacing-03;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin: 0 0 layout.$spacing-03 0;
+}

package/src/billing-form/billing-checkin-form.test.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { screen, render } from '@testing-library/react';
+import { useBillableItems, useCashPoint, createPatientBill, usePaymentMethods } from './billing-form.resource';
+import BillingCheckInForm from './billing-checkin-form.component';
+
+const mockCashPoints = [
+  {
+    uuid: '54065383-b4d4-42d2-af4d-d250a1fd2590',
+    name: 'Cashier 2',
+    description: '',
+    retired: false,
+  },
+];
+
+const mockBillableItems = [
+  {
+    uuid: 'b37dddd6-4490-4bf7-b694-43bf19d04059',
+    conceptUuid: '1926AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    conceptName: 'Consultation billable item',
+    hasExpiration: false,
+    preferredVendorUuid: '359006e7-2669-4204-aee8-27462514b10a',
+    preferredVendorName: 'Consolt',
+    categoryUuid: '6469ff7e-f8c7-42d6-bff3-ac9605ec99df',
+    categoryName: 'Non Drug',
+    commonName: 'Consultation',
+    acronym: 'CONSULT',
+  },
+  {
+    uuid: 'b47dddd6-4490-4bf7-b694-43bf19d04059',
+    conceptUuid: '1926AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    conceptName: 'Lab Testing billable item',
+    hasExpiration: false,
+    preferredVendorUuid: '359006e7-2669-4204-aee8-27462514b10a',
+    preferredVendorName: 'Consolt',
+    categoryUuid: '6469ff7e-f8c7-42d6-bff3-ac9605ec99df',
+    categoryName: 'Non Drug',
+    commonName: 'Lab Testing',
+    acronym: 'CONSULT',
+  },
+];
+
+const mockUseCashPoint = useCashPoint as jest.MockedFunction<typeof useCashPoint>;
+const mockUseBillableItems = useBillableItems as jest.MockedFunction<typeof useBillableItems>;
+const mockCreatePatientBill = createPatientBill as jest.MockedFunction<typeof createPatientBill>;
+const mockusePaymentMethods = usePaymentMethods as jest.MockedFunction<typeof usePaymentMethods>;
+
+jest.mock('./billing-form.resource', () => ({
+  useBillableItems: jest.fn(),
+  useCashPoint: jest.fn(),
+  createPatientBill: jest.fn(),
+}));
+
+const testProps = { patientUuid: 'some-patient-uuid', setExtraVisitInfo: jest.fn() };
+
+xdescribe('BillingCheckInForm', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  test('should show the loading spinner while retrieving data', () => {
+    mockUseBillableItems.mockReturnValueOnce({ lineItems: [], isLoading: true, error: null });
+    mockUseCashPoint.mockReturnValueOnce({ cashPoints: [], isLoading: true, error: null });
+    renderBillingCheckinForm();
+
+    expect(screen.getByText(/Loading billing services.../)).toBeInTheDocument();
+  });
+
+  test('should show error state when an error occurs while fetching data', () => {
+    const error = new Error('Internal server error');
+    mockUseBillableItems.mockReturnValueOnce({ lineItems: [], isLoading: false, error });
+    mockUseCashPoint.mockReturnValueOnce({ cashPoints: [], isLoading: false, error });
+    renderBillingCheckinForm();
+
+    expect(screen.getByText('Bill service error')).toBeInTheDocument();
+    expect(screen.getByText('Error loading bill services')).toBeInTheDocument();
+  });
+
+  test('should render the form correctly and generate the required payload', async () => {
+    const user = userEvent.setup();
+    mockUseCashPoint.mockReturnValue({ cashPoints: [], isLoading: false, error: null });
+    mockUseBillableItems.mockReturnValue({ lineItems: mockBillableItems, isLoading: false, error: null });
+    renderBillingCheckinForm();
+
+    const paymentTypeSelect = screen.getByRole('group', { name: 'Payment Details' });
+    expect(paymentTypeSelect).toBeInTheDocument();
+
+    const paymentTypeRadio = screen.getByRole('radio', { name: 'Paying' });
+    expect(paymentTypeRadio).toBeInTheDocument();
+    await user.click(paymentTypeRadio);
+
+    const billiableSelect = screen.getByRole('combobox', { name: 'Billable service' });
+    expect(billiableSelect).toBeInTheDocument();
+    await user.click(screen.getByRole('combobox', { name: 'Billable service' }));
+
+    await user.click(screen.getByText('Lab Testing'));
+
+    expect(testProps.setExtraVisitInfo).toHaveBeenCalled();
+    expect(testProps.setExtraVisitInfo).toHaveBeenCalledWith({
+      createBillPayload: {
+        lineItems: [
+          {
+            item: 'b47dddd6-4490-4bf7-b694-43bf19d04059',
+            quantity: 1,
+            price: 500.00001,
+            priceName: 'Default',
+            priceUuid: '',
+            lineItemOrder: 0,
+            paymentStatus: 'PENDING',
+          },
+        ],
+        cashPoint: '',
+        patient: 'some-patient-uuid',
+        status: 'PENDING',
+        payments: [],
+      },
+      handleCreateExtraVisitInfo: expect.anything(),
+      attributes: [
+        {
+          attributeType: 'caf2124f-00a9-4620-a250-efd8535afd6d',
+          value: '1c30ee58-82d4-4ea4-a8c1-4bf2f9dfc8cf',
+        },
+        {
+          attributeType: '919b51c9-8e2e-468f-8354-181bf3e55786',
+          value: true,
+        },
+      ],
+    });
+  });
+});
+
+function renderBillingCheckinForm() {
+  return render(<BillingCheckInForm {...testProps} />);
+}