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

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

@@ -0,0 +1,42 @@
+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} />
+      ))}
+      <ExtensionSlot name="billing-home-tiles-slot" />
+    </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,131 @@
+import React, { useCallback, useState } from 'react';
+import { Dropdown, InlineLoading, InlineNotification } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { showSnackbar } 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;
+  setBillingInfo: (state) => void;
+};
+
+const BillingCheckInForm: React.FC<BillingCheckInFormProps> = ({ patientUuid, setBillingInfo }) => {
+  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 shouldBillPatient =
+    attributes.find((item) => item.attributeType === 'caf2124f-00a9-4620-a250-efd8535afd6d')?.value ===
+    '1c30ee58-82d4-4ea4-a8c1-4bf2f9dfc8cf';
+
+  const handleCreateBill = useCallback(
+    (createBillPayload) => {
+      shouldBillPatient &&
+        createPatientBill(createBillPayload).then(
+          () => {
+            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',
+            });
+          },
+        );
+    },
+    [shouldBillPatient],
+  );
+
+  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: [],
+    };
+
+    setBillingInfo({ createBillPayload, handleCreateBill: () => handleCreateBill(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} />
+      {shouldBillPatient && (
+        <>
+          <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', setBillingInfo: 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.setBillingInfo).toHaveBeenCalled();
+    expect(testProps.setBillingInfo).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: [],
+      },
+      handleCreateBill: 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} />);
+}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { RadioButtonGroup, RadioButton } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from './billing-form.scss';
+
+type BillingFormProps = {
+  patientUuid: string;
+};
+
+const BillingForm: React.FC<BillingFormProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.billingFormContainer}>
+      <RadioButtonGroup
+        legendText={t('selectCategory', 'Select category')}
+        name="radio-button-group"
+        defaultSelected="radio-1">
+        <RadioButton labelText={t('drug', 'Drug')} value="radio-1" id="radio-1" />
+        <RadioButton labelText={t('nonDrug', 'Non drug')} value="radio-2" id="radio-2" />
+      </RadioButtonGroup>
+    </div>
+  );
+};
+
+export default BillingForm;

package/src/billing-form/billing-form.resource.ts

@@ -0,0 +1,31 @@
+import useSWR from 'swr';
+import { type OpenmrsResource, openmrsFetch } from '@openmrs/esm-framework';
+
+export const useBillableItems = () => {
+  const url = `/ws/rest/v1/cashier/billableService?v=custom:(uuid,name,shortName,serviceStatus,serviceType:(display),servicePrices:(uuid,name,price,paymentMode))`;
+  const { data, isLoading, error } = useSWR<{ data: { results: Array<OpenmrsResource> } }>(url, openmrsFetch);
+  return {
+    lineItems: data?.data?.results ?? [],
+    isLoading,
+    error,
+  };
+};
+
+export const useCashPoint = () => {
+  const url = `/ws/rest/v1/cashier/cashPoint`;
+  const { data, isLoading, error } = useSWR<{ data: { results: Array<OpenmrsResource> } }>(url, openmrsFetch);
+
+  return { isLoading, error, cashPoints: data?.data?.results ?? [] };
+};
+
+export const createPatientBill = (payload) => {
+  const postUrl = `/ws/rest/v1/cashier/bill`;
+  return openmrsFetch(postUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: payload });
+};
+
+export const usePaymentMethods = () => {
+  const url = `/ws/rest/v1/cashier/paymentMode`;
+  const { data, isLoading, error } = useSWR<{ data: { results: Array<OpenmrsResource> } }>(url, openmrsFetch);
+
+  return { isLoading, error, paymentModes: data?.data?.results ?? [] };
+};

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

@@ -0,0 +1,5 @@
+@use '@carbon/layout';
+
+.billingFormContainer {
+  padding: layout.$spacing-05;
+}

package/src/billing-form/visit-attributes/visit-attributes-form.component.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { TextInput, InlineLoading, ComboBox, RadioButtonGroup, RadioButton } from '@carbon/react';
+import { usePaymentMethods } from '../billing-form.resource';
+import styles from './visit-attributes-form.scss';
+
+type VisitAttributesFormProps = {
+  setAttributes: (state) => void;
+  setPaymentMethod?: (value: any) => void;
+};
+
+type VisitAttributesFormValue = {
+  paymentDetails: string;
+  paymentMethods: string;
+  insuranceScheme: string;
+  policyNumber: string;
+  patientCategory: string;
+};
+
+const visitAttributesFormSchema = z.object({
+  paymentDetails: z.string(),
+  paymentMethods: z.string(),
+  insuranceSchema: z.string(),
+  policyNumber: z.string(),
+  patientCategory: z.string(),
+});
+
+const VisitAttributesForm: React.FC<VisitAttributesFormProps> = ({ setAttributes, setPaymentMethod }) => {
+  const { t } = useTranslation();
+  const { control, getValues, watch } = useForm<VisitAttributesFormValue>({
+    mode: 'all',
+    defaultValues: {},
+    resolver: zodResolver(visitAttributesFormSchema),
+  });
+  const [paymentDetails, paymentMethods, insuranceSchema, policyNumber, patientCategory] = watch([
+    'paymentDetails',
+    'paymentMethods',
+    'insuranceScheme',
+    'policyNumber',
+    'patientCategory',
+  ]);
+
+  const { paymentModes, isLoading: isLoadingPaymentModes } = usePaymentMethods();
+  React.useEffect(() => {
+    setAttributes(createVisitAttributesPayload());
+  }, [paymentDetails, paymentMethods, insuranceSchema, policyNumber, patientCategory]);
+
+  const createVisitAttributesPayload = () => {
+    const { patientCategory, paymentMethods, policyNumber, paymentDetails } = getValues();
+    setPaymentMethod(paymentMethods);
+    const formPayload = [
+      { uuid: 'caf2124f-00a9-4620-a250-efd8535afd6d', value: paymentDetails },
+      { uuid: 'c39b684c-250f-4781-a157-d6ad7353bc90', value: paymentMethods },
+      { uuid: '0f4f3306-f01b-43c6-af5b-fdb60015cb02', value: policyNumber },
+      { uuid: '2d0fa959-6780-41f1-85b1-402045935068', value: insuranceSchema },
+      { uuid: '3b9dfac8-9e4d-11ee-8c90-0242ac120002', value: patientCategory },
+      { uuid: '919b51c9-8e2e-468f-8354-181bf3e55786', value: true },
+    ];
+    const visitAttributesPayload = formPayload.filter(
+      (item) => item.value !== undefined && item.value !== null && item.value !== '',
+    );
+    return Object.entries(visitAttributesPayload).map(([key, value]) => ({
+      attributeType: value.uuid,
+      value: value.value,
+    }));
+  };
+
+  if (isLoadingPaymentModes) {
+    return (
+      <InlineLoading
+        status="active"
+        iconDescription={t('loadingDescription', 'Loading')}
+        description={t('loading', 'Loading data...')}
+      />
+    );
+  }
+
+  return (
+    <section>
+      <div className={styles.sectionTitle}>{t('paymentDetails', 'Payment Details')}</div>
+      <Controller
+        name="paymentDetails"
+        control={control}
+        render={({ field }) => (
+          <RadioButtonGroup
+            onChange={(selected) => field.onChange(selected)}
+            orientation="vertical"
+            legendText={t('paymentDetails', 'Payment Details')}
+            name="payment-details-group">
+            <RadioButton labelText="Paying" value="1c30ee58-82d4-4ea4-a8c1-4bf2f9dfc8cf" id="radio-1" />
+            <RadioButton labelText="Non paying" value="a28d7929-050a-4249-a61a-551e9b8cc102" id="radio-2" />
+          </RadioButtonGroup>
+        )}
+      />
+
+      {paymentDetails === '1c30ee58-82d4-4ea4-a8c1-4bf2f9dfc8cf' && (
+        <Controller
+          control={control}
+          name="paymentMethods"
+          render={({ field }) => (
+            <ComboBox
+              className={styles.sectionField}
+              onChange={({ selectedItem }) => field.onChange(selectedItem?.uuid)}
+              id="paymentMethods"
+              items={paymentModes}
+              itemToString={(item) => (item ? item.name : '')}
+              titleText={t('paymentMethods', 'Payment methods')}
+              placeholder={t('selectPaymentMethod', 'Select payment method')}
+            />
+          )}
+        />
+      )}
+
+      {paymentMethods === 'beac329b-f1dc-4a33-9e7c-d95821a137a6' &&
+        paymentDetails === '1c30ee58-82d4-4ea4-a8c1-4bf2f9dfc8cf' && (
+          <>
+            <Controller
+              control={control}
+              name="insuranceScheme"
+              render={({ field }) => (
+                <TextInput
+                  className={styles.sectionField}
+                  onChange={(e) => field.onChange(e.target.value)}
+                  id="insurance-scheme"
+                  type="text"
+                  labelText={t('insuranceScheme', 'Insurance scheme')}
+                />
+              )}
+            />
+            <Controller
+              control={control}
+              name="policyNumber"
+              render={({ field }) => (
+                <TextInput
+                  className={styles.sectionField}
+                  onChange={(e) => field.onChange(e.target.value)}
+                  {...field}
+                  id="policy-number"
+                  type="text"
+                  labelText={t('policyNumber', 'Policy number')}
+                />
+              )}
+            />
+          </>
+        )}
+
+      {paymentDetails === 'a28d7929-050a-4249-a61a-551e9b8cc102' && (
+        <Controller
+          control={control}
+          name="patientCategory"
+          render={({ field }) => (
+            <ComboBox
+              className={styles.sectionField}
+              onChange={({ selectedItem }) => field.onChange(selectedItem?.uuid)}
+              id="patientCategory"
+              items={[
+                { text: 'Child under 5', uuid: '2d61b762-6e32-4e2e-811f-ac72cbd3600a' },
+                { text: 'Student', uuid: '159465AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' },
+              ]}
+              itemToString={(item) => (item ? item.text : '')}
+              titleText={t('patientCategory', 'Patient category')}
+            />
+          )}
+        />
+      )}
+    </section>
+  );
+};
+
+export default VisitAttributesForm;