@openmrs/esm-billing-app 1.0.1-pre.98 → 1.0.2-pre.58

package/src/billable-services/payyment-modes/payment-modes-config.component.tsx

@@ -0,0 +1,280 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Button,
+  DataTable,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Modal,
+  TextInput,
+  OverflowMenu,
+  OverflowMenuItem,
+} from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { useForm, Controller } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { showSnackbar, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+import styles from './payment-modes-config.scss';
+
+// Validation schema
+const paymentModeSchema = z.object({
+  name: z.string().min(1, 'Payment Mode Name is required'),
+  description: z.string().optional(),
+});
+
+type PaymentModeFormValues = z.infer<typeof paymentModeSchema>;
+
+const PaymentModesConfig: React.FC = () => {
+  const { t } = useTranslation();
+  const [paymentModes, setPaymentModes] = useState([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [selectedPaymentMode, setSelectedPaymentMode] = useState(null);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<PaymentModeFormValues>({
+    resolver: zodResolver(paymentModeSchema),
+    defaultValues: {
+      name: '',
+      description: '',
+    },
+  });
+
+  const fetchPaymentModes = useCallback(async () => {
+    try {
+      const response = await openmrsFetch(`${restBaseUrl}/billing/paymentMode?v=full`);
+      setPaymentModes(response.data.results || []);
+    } catch (err) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        subtitle: t('errorFetchingPaymentModes', 'An error occurred while fetching payment modes.'),
+        kind: 'error',
+        isLowContrast: false,
+      });
+    }
+  }, [t]);
+
+  useEffect(() => {
+    fetchPaymentModes();
+  }, [fetchPaymentModes]);
+
+  const onSubmit = async (data: PaymentModeFormValues) => {
+    // Check for duplicate payment mode name
+    const isDuplicate = paymentModes.some((mode) => mode.name.toLowerCase() === data.name.toLowerCase());
+
+    if (isDuplicate) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        subtitle: t(
+          'duplicatePaymentModeError',
+          'A payment mode with the same name already exists. Please create another payment mode',
+        ),
+        kind: 'error',
+        isLowContrast: false,
+      });
+      return;
+    }
+
+    try {
+      const response = await openmrsFetch(`${restBaseUrl}/billing/paymentMode`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name: data.name,
+          description: data.description,
+        }),
+      });
+
+      if (response.ok) {
+        showSnackbar({
+          title: t('success', 'Success'),
+          subtitle: t('paymentModeSaved', 'Payment mode was successfully saved.'),
+          kind: 'success',
+        });
+
+        setIsModalOpen(false);
+        reset({ name: '', description: '' });
+        fetchPaymentModes();
+      } else {
+        const errorData = response.data || {};
+        showSnackbar({
+          title: t('error', 'Error'),
+          subtitle:
+            errorData.message || t('errorSavingPaymentMode', 'An error occurred while saving the payment mode.'),
+          kind: 'error',
+          isLowContrast: false,
+        });
+      }
+    } catch (err) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        subtitle: t('errorSavingPaymentMode', 'An error occurred while saving the payment mode.'),
+        kind: 'error',
+        isLowContrast: false,
+      });
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!selectedPaymentMode) return;
+
+    try {
+      await openmrsFetch(`${restBaseUrl}/billing/paymentMode/${selectedPaymentMode.uuid}`, {
+        method: 'DELETE',
+      });
+
+      showSnackbar({
+        title: t('success', 'Success'),
+        subtitle: t('paymentModeDeleted', 'Payment mode was successfully deleted.'),
+        kind: 'success',
+      });
+
+      setIsDeleteModalOpen(false);
+      setSelectedPaymentMode(null);
+      fetchPaymentModes();
+    } catch (err) {
+      showSnackbar({
+        title: t('error', 'Error'),
+        subtitle: t('errorDeletingPaymentMode', 'An error occurred while deleting the payment mode.'),
+        kind: 'error',
+        isLowContrast: false,
+      });
+    }
+  };
+
+  const rowData = paymentModes.map((mode) => ({
+    id: mode.uuid,
+    name: mode.name,
+    description: mode.description || '--',
+  }));
+
+  const headerData = [
+    { key: 'name', header: t('name', 'Name') },
+    { key: 'description', header: t('description', 'Description') },
+    { key: 'actions', header: t('actions', 'Actions') },
+  ];
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <CardHeader title={t('paymentModeHistory', 'Payment Mode History')}>
+          <Button renderIcon={Add} onClick={() => setIsModalOpen(true)} kind="ghost">
+            {t('addPaymentMode', 'Add New Payment Mode')}
+          </Button>
+        </CardHeader>
+        <div className={styles.historyContainer}>
+          <DataTable rows={rowData} headers={headerData} isSortable size="lg">
+            {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+              <TableContainer>
+                <Table className={styles.table} {...getTableProps()}>
+                  <TableHead>
+                    <TableRow>
+                      {headers.map((header) => (
+                        <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                          {header.header}
+                        </TableHeader>
+                      ))}
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {rows.map((row) => (
+                      <TableRow key={row.id} {...getRowProps({ row })}>
+                        {row.cells.map((cell) =>
+                          cell.info.header !== 'actions' ? (
+                            <TableCell key={cell.id}>{cell.value}</TableCell>
+                          ) : (
+                            <TableCell key={cell.id}>
+                              <OverflowMenu>
+                                <OverflowMenuItem
+                                  itemText={t('delete', 'Delete')}
+                                  onClick={() => {
+                                    const selected = paymentModes.find((p) => p.uuid === row.id);
+                                    setSelectedPaymentMode(selected);
+                                    setIsDeleteModalOpen(true);
+                                  }}
+                                />
+                              </OverflowMenu>
+                            </TableCell>
+                          ),
+                        )}
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            )}
+          </DataTable>
+        </div>
+      </div>
+
+      {/* Modal for Adding New Payment Mode */}
+      <Modal
+        open={isModalOpen}
+        modalHeading={t('addPaymentMode', 'Add Payment Mode')}
+        onRequestClose={() => setIsModalOpen(false)}
+        onRequestSubmit={handleSubmit(onSubmit)}
+        primaryButtonText={t('save', 'Save')}
+        secondaryButtonText={t('cancel', 'Cancel')}
+        isPrimaryButtonDisabled={isSubmitting}>
+        <form>
+          <Controller
+            name="name"
+            control={control}
+            render={({ field }) => (
+              <TextInput
+                id="payment-mode-name"
+                labelText={t('paymentModeName', 'Payment Mode Name')}
+                placeholder={t('paymentModeNamePlaceholder', 'e.g., Cash, Credit Card')}
+                invalid={!!errors.name}
+                invalidText={errors.name?.message}
+                {...field}
+              />
+            )}
+          />
+          <Controller
+            name="description"
+            control={control}
+            render={({ field }) => (
+              <TextInput
+                id="payment-mode-description"
+                labelText={t('description', 'Description')}
+                placeholder={t('descriptionPlaceholder', 'e.g., Used for all cash transactions')}
+                invalid={!!errors.description}
+                invalidText={errors.description?.message}
+                {...field}
+              />
+            )}
+          />
+        </form>
+      </Modal>
+
+      {/* Modal for Deleting Payment Mode */}
+      <Modal
+        open={isDeleteModalOpen}
+        modalHeading={t('deletePaymentMode', 'Delete Payment Mode')}
+        onRequestClose={() => setIsDeleteModalOpen(false)}
+        onRequestSubmit={handleDelete}
+        primaryButtonText={t('delete', 'Delete')}
+        secondaryButtonText={t('cancel', 'Cancel')}
+        primaryButtonDanger
+        danger>
+        <p>{t('confirmDeleteMessage', 'Are you sure you want to delete this payment mode? Proceed cautiously.')}</p>
+      </Modal>
+    </div>
+  );
+};
+
+export default PaymentModesConfig;

package/src/billable-services/payyment-modes/payment-modes-config.scss

@@ -0,0 +1,23 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.container {
+  padding: layout.$spacing-05;
+}
+
+.card {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: layout.$spacing-05;
+}
+
+.historyContainer {
+  margin-top: layout.$spacing-05;
+}
+
+.table {
+  width: 100%;
+  table-layout: auto;
+}

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

@@ -1,20 +1,33 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import { omrsDateFormat } from '../constants';
 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 MetricsCards from '../metrics-cards/metrics-cards.component';
+import SelectedDateContext from '../hooks/selectedDateContext';
 import styles from './billing-dashboard.scss';
 
 export function BillingDashboard() {
   const { t } = useTranslation();
+  const [selectedDate, setSelectedDate] = useState<string>(dayjs().startOf('day').format(omrsDateFormat));
+
+  const params = useParams();
+
+  useEffect(() => {
+    if (params.date) {
+      setSelectedDate(dayjs(params.date).startOf('day').format(omrsDateFormat));
+    }
+  }, [params.date]);
 
   return (
-    <main className={styles.container}>
+    <SelectedDateContext.Provider value={{ selectedDate, setSelectedDate }}>
       <BillingHeader title={t('home', 'Home')} />
       <MetricsCards />
       <section className={styles.billsTableContainer}>
         <BillsTable />
       </section>
-    </main>
+    </SelectedDateContext.Provider>
   );
 }

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

@@ -3,11 +3,11 @@
 @use '@carbon/type';
 
 .container {
-  height: calc(100vh - 3rem);
+  height: calc(100vh - layout.$spacing-09);
 }
 
 .billsTableContainer {
-  margin: 2rem 1rem;
+  margin: layout.$spacing-07 layout.$spacing-05;
 }
 
 .illo {
@@ -22,6 +22,6 @@
 
 .tile {
   border: 1px solid colors.$gray-20;
-  padding: 1.5rem 0;
+  padding: layout.$spacing-06 0;
   text-align: center;
 }

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

@@ -1,31 +1,32 @@
 import React, { useState, useEffect, useMemo } from 'react';
+import fuzzy from 'fuzzy';
+import isEmpty from 'lodash-es/isEmpty';
 import {
-  ButtonSet,
   Button,
+  ButtonSet,
   Form,
   InlineLoading,
-  RadioButtonGroup,
   RadioButton,
+  RadioButtonGroup,
   Search,
   Stack,
   Table,
-  TableHead,
   TableBody,
+  TableCell,
+  TableHead,
   TableHeader,
   TableRow,
-  TableCell,
 } from '@carbon/react';
-import styles from './billing-form.scss';
-import { useTranslation } from 'react-i18next';
-import { restBaseUrl, showSnackbar, showToast, useConfig, useDebounce, useLayoutType } from '@openmrs/esm-framework';
-import { useFetchSearchResults, processBillItems } from '../billing.resource';
+import { TrashCan } from '@carbon/react/icons';
 import { mutate } from 'swr';
-import { convertToCurrency } from '../helpers';
+import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { TrashCan } from '@carbon/react/icons';
-import fuzzy from 'fuzzy';
-import { type BillabeItem } from '../types';
+import { showSnackbar, showToast, useConfig, useDebounce, useLayoutType } from '@openmrs/esm-framework';
 import { apiBasePath } from '../constants';
+import { convertToCurrency } from '../helpers';
+import { type BillabeItem } from '../types';
+import { useFetchSearchResults, processBillItems } from '../billing.resource';
+import styles from './billing-form.scss';
 
 type BillingFormProps = {
   patientUuid: string;
@@ -34,22 +35,24 @@ type BillingFormProps = {
 
 const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }) => {
   const { t } = useTranslation();
-  const { defaultCurrency } = useConfig();
+  const { defaultCurrency, postBilledItems } = useConfig();
   const isTablet = useLayoutType() === 'tablet';
 
   const [grandTotal, setGrandTotal] = useState(0);
   const [searchOptions, setSearchOptions] = useState([]);
   const [billItems, setBillItems] = useState([]);
-  const [searchVal, setSearchVal] = useState('');
   const [category, setCategory] = useState('');
   const [saveDisabled, setSaveDisabled] = useState<boolean>(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [addedItems, setAddedItems] = useState([]);
   const [searchTerm, setSearchTerm] = useState('');
   const debouncedSearchTerm = useDebounce(searchTerm);
+  const [disableSearch, setDisableSearch] = useState<boolean>(true);
 
   const toggleSearch = (choiceSelected) => {
-    (document.getElementById('searchField') as HTMLInputElement).disabled = false;
+    if (!isEmpty(choiceSelected)) {
+      setDisableSearch(false);
+    }
     setCategory(choiceSelected === 'Stock Item' ? 'Stock Item' : 'Service');
   };
 
@@ -82,7 +85,6 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
 
     const anyInvalidQuantity = updatedItems.some((item) => item.Qnty <= 0);
 
-    setBillItems(updatedItems);
     setSaveDisabled(!isValid || anyInvalidQuantity);
 
     const updatedGrandTotal = updatedItems.reduce((acc, item) => acc + item.Total, 0);
@@ -120,7 +122,6 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
     }
 
     setBillItems(updatedItems);
-    setSearchOptions([]);
     calculateTotalAfterAddBillItem(updatedItems);
     (document.getElementById('searchField') as HTMLInputElement).value = '';
   };
@@ -169,7 +170,7 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
           .sort((r1, r2) => r1.score - r2.score)
           .map((result) => result.original)
       : searchOptions;
-  }, [debouncedSearchTerm, data, billItems]);
+  }, [debouncedSearchTerm, isLoading, error, data, billItems, searchOptions]);
 
   useEffect(() => {
     setSearchOptions(filterItems);
@@ -178,8 +179,8 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
   const postBillItems = () => {
     setIsSubmitting(true);
     const bill = {
-      cashPoint: '54065383-b4d4-42d2-af4d-d250a1fd2590',
-      cashier: 'f9badd80-ab76-11e2-9e96-0800200c9a66',
+      cashPoint: postBilledItems.cashPoint,
+      cashier: postBilledItems.cashier,
       lineItems: [],
       payments: [],
       patient: patientUuid,
@@ -187,11 +188,11 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
     };
 
     billItems.forEach((item) => {
-      let lineItem: any = {
+      const lineItem: any = {
         quantity: parseInt(item.Qnty),
         price: item.Price,
         priceName: 'Default',
-        priceUuid: '7b9171ac-d3c1-49b4-beff-c9902aee5245',
+        priceUuid: postBilledItems.priceUuid,
         lineItemOrder: 0,
         paymentStatus: 'PENDING',
       };
@@ -226,6 +227,10 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
     );
   };
 
+  const handleClearSearchTerm = () => {
+    setSearchOptions([]);
+  };
+
   return (
     <Form className={styles.form}>
       <div className={styles.grid}>
@@ -244,12 +249,13 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
           <Search
             size="lg"
             id="searchField"
-            disabled
+            disabled={disableSearch}
             closeButtonLabelText={t('clearSearchInput', 'Clear search input')}
             className={styles.mt2}
             placeholder={t('searchItems', 'Search items and services')}
             labelText={t('searchItems', 'Search items and services')}
             onKeyUp={handleSearchTermChange}
+            onClear={handleClearSearchTerm}
           />
         </Stack>
         <Stack>
@@ -261,7 +267,7 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
                     id={row.uuid}
                     onClick={(e) => addItemToBill(e, row.uuid, row.Item, row.category, row.Price)}
                     style={{ background: 'inherit', color: 'black' }}>
-                    {row.Item} Qnty.{row.Qnty} Ksh.{row.Price}
+                    {row.Item} Qnty.{row.Qnty} {defaultCurrency}.{row.Price}
                   </Button>
                 </li>
               ))}
@@ -330,7 +336,7 @@ const BillingForm: React.FC<BillingFormProps> = ({ patientUuid, closeWorkspace }
             className={styles.button}
             kind="primary"
             onClick={postBillItems}
-            disabled={isSubmitting && saveDisabled}
+            disabled={isSubmitting || saveDisabled}
             type="submit">
             {isSubmitting ? (
               <InlineLoading description={t('saving', 'Saving') + '...'} />

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

@@ -1,9 +1,8 @@
 @use '@carbon/layout';
-@use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .tablet {
-  padding: 1.5rem spacing.$spacing-05;
+  padding: layout.$spacing-06 layout.$spacing-05;
   background-color: $ui-02;
 }
 
@@ -12,14 +11,14 @@
 }
 
 .button {
-  height: 4rem;
+  height: layout.$spacing-10;
   display: flex;
   align-content: flex-start;
   align-items: baseline;
   min-width: 50%;
 
   :global(.cds--inline-loading) {
-    min-height: 1rem !important;
+    min-height: layout.$spacing-05 !important;
   }
 
   :global(.cds--inline-loading__text) {
@@ -28,7 +27,7 @@
 }
 
 .mt2 {
-  margin-top: spacing.$spacing-07;
+  margin-top: layout.$spacing-07;
 }
 
 .searchContent {
@@ -73,16 +72,16 @@
 }
 
 .grid {
-  margin: spacing.$spacing-05;
+  margin: layout.$spacing-05;
 }
 
 .row {
-  margin: spacing.$spacing-03 0rem 0rem;
+  margin: layout.$spacing-03 0rem 0rem;
   display: flex;
   flex-flow: row wrap;
-  gap: spacing.$spacing-05;
+  gap: layout.$spacing-05;
 }
 
 .spacer {
-  margin-top: spacing.$spacing-05;
+  margin-top: layout.$spacing-05;
 }

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

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { useCallback, useEffect, useMemo } 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 { ComboBox, InlineLoading, RadioButton, RadioButtonGroup, TextInput } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
 import { usePaymentMethods } from '../billing-form.resource';
 import styles from './visit-attributes-form.scss';
-import { useConfig } from '@openmrs/esm-framework';
 
 type VisitAttributesFormProps = {
   setAttributes: (state) => void;
@@ -31,12 +31,13 @@ const visitAttributesFormSchema = z.object({
 
 const VisitAttributesForm: React.FC<VisitAttributesFormProps> = ({ setAttributes, setPaymentMethod }) => {
   const { t } = useTranslation();
+  const { patientCatergory, catergoryConcepts, nonPayingPatientCategories } = useConfig();
   const { control, getValues, watch } = useForm<VisitAttributesFormValue>({
     mode: 'all',
     defaultValues: {},
     resolver: zodResolver(visitAttributesFormSchema),
   });
-  const { patientCatergory, catergoryConcepts } = useConfig();
+
   const [paymentDetails, paymentMethods, insuranceSchema, policyNumber, patientCategory] = watch([
     'paymentDetails',
     'paymentMethods',
@@ -46,13 +47,17 @@ const VisitAttributesForm: React.FC<VisitAttributesFormProps> = ({ setAttributes
   ]);
 
   const { paymentModes, isLoading: isLoadingPaymentModes } = usePaymentMethods();
-  React.useEffect(() => {
-    setAttributes(createVisitAttributesPayload());
-  }, [paymentDetails, paymentMethods, insuranceSchema, policyNumber, patientCategory]);
+  const patientCategoryOptions = useMemo(() => {
+    return Object.entries(nonPayingPatientCategories ?? {}).map(([key, uuid]) => ({
+      text: key,
+      uuid,
+    }));
+  }, [nonPayingPatientCategories]);
 
-  const createVisitAttributesPayload = () => {
+  const createVisitAttributesPayload = useCallback(() => {
     const { paymentDetails, paymentMethods, insuranceScheme, policyNumber, patientCategory } = getValues();
-    setPaymentMethod(paymentMethods);
+    setPaymentMethod?.(paymentMethods);
+
     const formPayload = [
       { uuid: patientCatergory.paymentDetails, value: paymentDetails },
       { uuid: patientCatergory.paymentMethods, value: paymentMethods },
@@ -60,6 +65,7 @@ const VisitAttributesForm: React.FC<VisitAttributesFormProps> = ({ setAttributes
       { uuid: patientCatergory.policyNumber, value: policyNumber },
       { uuid: patientCatergory.patientCategory, value: patientCategory },
     ];
+
     const visitAttributesPayload = formPayload.filter(
       (item) => item.value !== undefined && item.value !== null && item.value !== '',
     );
@@ -67,7 +73,27 @@ const VisitAttributesForm: React.FC<VisitAttributesFormProps> = ({ setAttributes
       attributeType: value.uuid,
       value: value.value,
     }));
-  };
+  }, [
+    getValues,
+    patientCatergory.insuranceScheme,
+    patientCatergory.patientCategory,
+    patientCatergory.paymentDetails,
+    patientCatergory.paymentMethods,
+    patientCatergory.policyNumber,
+    setPaymentMethod,
+  ]);
+
+  useEffect(() => {
+    setAttributes(createVisitAttributesPayload());
+  }, [
+    paymentDetails,
+    paymentMethods,
+    insuranceSchema,
+    policyNumber,
+    patientCategory,
+    setAttributes,
+    createVisitAttributesPayload,
+  ]);
 
   if (isLoadingPaymentModes) {
     return (
@@ -156,12 +182,10 @@ const VisitAttributesForm: React.FC<VisitAttributesFormProps> = ({ setAttributes
               className={styles.sectionField}
               onChange={({ selectedItem }) => field.onChange(selectedItem?.uuid)}
               id="patientCategory"
-              items={[
-                { text: 'Child under 5', uuid: catergoryConcepts.childUnder5 },
-                { text: 'Student', uuid: catergoryConcepts.student },
-              ]}
+              items={patientCategoryOptions}
               itemToString={(item) => (item ? item.text : '')}
               titleText={t('patientCategory', 'Patient category')}
+              placeholder={t('selectPatientCategory', 'Select patient category')}
             />
           )}
         />