@kenyaemr/esm-patient-registration-app 6.0.2 → 7.0.2-pre.65

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.24.0"},"pages":[{"component":"root","route":"patient-registration","online":true,"offline":true},{"component":"editPatient","routeRegex":"patient\\/([a-zA-Z0-9\\-]+)\\/edit","online":true,"offline":true}],"extensions":[{"component":"addPatientLink","name":"add-patient-action","slot":"top-nav-actions-slot","online":true,"offline":true},{"component":"cancelPatientEditModal","name":"cancel-patient-edit-modal","online":true,"offline":true},{"component":"patientPhotoExtension","name":"patient-photo-widget","slot":"patient-photo-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-actions-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-search-actions-slot","online":true,"offline":true},{"component":"deleteIdentifierConfirmationModal","name":"delete-identifier-confirmation-modal","online":true,"offline":true},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal","online":true,"offline":true},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal","online":true,"offline":true}],"version":"6.0.1-pre.1.0.6"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.24.0"},"pages":[{"component":"root","route":"patient-registration","online":true,"offline":true},{"component":"editPatient","routeRegex":"patient\\/([a-zA-Z0-9\\-]+)\\/edit","online":true,"offline":true}],"extensions":[{"component":"addPatientLink","name":"add-patient-action","slot":"top-nav-actions-slot","online":true,"offline":true},{"component":"cancelPatientEditModal","name":"cancel-patient-edit-modal","online":true,"offline":true},{"component":"patientPhotoExtension","name":"patient-photo-widget","slot":"patient-photo-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-actions-slot","online":true,"offline":true},{"component":"editPatientDetailsButton","name":"edit-patient-details-button","slot":"patient-search-actions-slot","online":true,"offline":true},{"component":"deleteIdentifierConfirmationModal","name":"delete-identifier-confirmation-modal","online":true,"offline":true},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal","online":true,"offline":true},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal","online":true,"offline":true}],"version":"7.0.2-pre.65"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-patient-registration-app",
-  "version": "6.0.2",
+  "version": "7.0.2-pre.65",
   "description": "Patient registration microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-patient-registration-app.js",
   "main": "src/index.ts",
@@ -18,7 +18,7 @@
     "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
     "coverage": "yarn test --coverage",
     "typescript": "tsc",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts'"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.extension.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"
@@ -53,5 +53,6 @@
   },
   "devDependencies": {
     "webpack": "^5.74.0"
-  }
-}
+  },
+  "stableVersion": "7.0.1"
+}

package/src/config-schema.ts

@@ -12,6 +12,7 @@ export interface FieldDefinition {
   label?: string;
   uuid: string;
   placeholder?: string;
+  dateFormat?: string;
   showHeading: boolean;
   validation?: {
     required: boolean;
@@ -19,6 +20,11 @@ export interface FieldDefinition {
   };
   answerConceptSetUuid?: string;
   customConceptAnswers?: Array<CustomConceptAnswer>;
+  showWhenExpression?: {
+    field: string;
+    value: string;
+  };
+  renderType?: string;
 }
 export interface CustomConceptAnswer {
   uuid: string;

package/src/offline.resources.ts

@@ -75,13 +75,15 @@ export async function fetchPatientIdentifierTypesWithSources(): Promise<Array<Pa
   // @ts-ignore Reason: The required props of the type are generated below.
   const identifierTypes: Array<PatientIdentifierType> = patientIdentifierTypes.filter(Boolean);
 
-  const [autoGenOptions, ...allIdentifierSources] = await Promise.all([
+  const [autoGenOptions, identifierSourcesResponse] = await Promise.all([
     fetchAutoGenerationOptions(),
-    ...identifierTypes.map((identifierType) => fetchIdentifierSources(identifierType.uuid)),
+    fetchIdentifierSources(),
   ]);
 
+  const allIdentifierSources = identifierSourcesResponse.data.results;
+
   for (let i = 0; i < identifierTypes?.length; i++) {
-    identifierTypes[i].identifierSources = allIdentifierSources[i].data.results.map((source) => {
+    identifierTypes[i].identifierSources = allIdentifierSources.map((source) => {
       const option = find(autoGenOptions.data.results, { source: { uuid: source.uuid } });
       source.autoGenerationOption = option;
       return source;
@@ -118,8 +120,8 @@ async function fetchPatientIdentifierTypes(): Promise<Array<FetchedPatientIdenti
   return [];
 }
 
-async function fetchIdentifierSources(identifierType: string) {
-  return await cacheAndFetch(`${restBaseUrl}/idgen/identifiersource?v=default&identifierType=${identifierType}`);
+async function fetchIdentifierSources() {
+  return await cacheAndFetch(`${restBaseUrl}/idgen/identifiersource?v=default`);
 }
 
 async function fetchAutoGenerationOptions(abortController?: AbortController) {

package/src/patient-registration/field/custom-field.component.tsx

@@ -4,6 +4,7 @@ import { type RegistrationConfig } from '../../config-schema';
 import { AddressField } from './address/custom-address-field.component';
 import { ObsField } from './obs/obs-field.component';
 import { PersonAttributeField } from './person-attributes/person-attribute-field.component';
+import { useField } from 'formik';
 
 export interface CustomFieldProps {
   name: string;
@@ -13,6 +14,11 @@ export function CustomField({ name }: CustomFieldProps) {
   const config = useConfig() as RegistrationConfig;
   const fieldDefinition = config.fieldDefinitions.filter((def) => def.id == name)[0];
 
+  const [{ value }] = useField(`attributes.${fieldDefinition.showWhenExpression?.field}`);
+  if (fieldDefinition.showWhenExpression && value !== fieldDefinition.showWhenExpression.value) {
+    return null;
+  }
+
   if (fieldDefinition.type === 'person attribute') {
     return <PersonAttributeField fieldDefinition={fieldDefinition} />;
   } else if (fieldDefinition.type === 'obs') {

package/src/patient-registration/field/dob/dob.component.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useField } from 'formik';
 import { generateFormatting } from '../../date-util';
 import { PatientRegistrationContext } from '../../patient-registration-context';
-import { useConfig } from '@openmrs/esm-framework';
+import { OpenmrsDatePicker, useConfig } from '@openmrs/esm-framework';
 import { type RegistrationConfig } from '../../../config-schema';
 import styles from '../field.scss';
 
@@ -46,8 +46,8 @@ export const DobField: React.FC = () => {
   );
 
   const onDateChange = useCallback(
-    (birthdate: Date[]) => {
-      setFieldValue('birthdate', birthdate[0]);
+    (birthdate: Date) => {
+      setFieldValue('birthdate', birthdate);
     },
     [setFieldValue],
   );
@@ -101,17 +101,20 @@ export const DobField: React.FC = () => {
       <Layer>
         {!dobUnknown ? (
           <div className={styles.dobField}>
-            <DatePicker dateFormat={dateFormat} datePickerType="single" onChange={onDateChange} maxDate={format(today)}>
-              <DatePickerInput
-                id="birthdate"
-                {...birthdate}
-                placeholder={placeHolder}
-                labelText={t('dateOfBirthLabelText', 'Date of Birth')}
-                invalid={!!(birthdateMeta.touched && birthdateMeta.error)}
-                invalidText={birthdateMeta.error && t(birthdateMeta.error)}
-                value={format(birthdate.value)}
-              />
-            </DatePicker>
+            <OpenmrsDatePicker
+              id="birthdate"
+              {...birthdate}
+              dateFormat={dateFormat}
+              onChange={onDateChange}
+              maxDate={today}
+              labelText={t('dateOfBirthLabelText', 'Date of Birth')}
+              invalid={!!(birthdateMeta.touched && birthdateMeta.error)}
+              invalidText={birthdateMeta.error && t(birthdateMeta.error)}
+              value={birthdate.value}
+              carbonOptions={{
+                placeholder: placeHolder,
+              }}
+            />
           </div>
         ) : (
           <div className={styles.grid}>

package/src/patient-registration/field/dob/dob.test.tsx

@@ -19,6 +19,7 @@ jest.mock('@openmrs/esm-framework', () => {
         },
       },
     })),
+    getLocale: jest.fn().mockReturnValue('en'),
   };
 });
 

package/src/patient-registration/field/field.test.tsx

@@ -10,6 +10,7 @@ import { PatientRegistrationContext } from '../patient-registration-context';
 jest.mock('@openmrs/esm-framework', () => ({
   ...jest.requireActual('@openmrs/esm-framework'),
   useConfig: jest.fn(),
+  getLocale: jest.fn().mockReturnValue('en'),
 }));
 
 const predefinedAddressTemplate = {

package/src/patient-registration/field/obs/obs-field.component.tsx

@@ -1,14 +1,16 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import classNames from 'classnames';
 import { Field } from 'formik';
 import { useTranslation } from 'react-i18next';
 import { InlineNotification, Layer, Select, SelectItem } from '@carbon/react';
-import { useConfig } from '@openmrs/esm-framework';
+import { OpenmrsDatePicker, parseDate, useConfig } from '@openmrs/esm-framework';
 import { type ConceptResponse } from '../../patient-registration.types';
 import { type FieldDefinition, type RegistrationConfig } from '../../../config-schema';
 import { Input } from '../../input/basic-input/input/input.component';
 import { useConcept, useConceptAnswers } from '../field.resource';
 import styles from './../field.scss';
+import { PatientRegistrationContext } from '../../patient-registration-context';
+import { generateFormatting } from '../../date-util';
 
 export interface ObsFieldProps {
   fieldDefinition: FieldDefinition;
@@ -51,6 +53,16 @@ export function ObsField({ fieldDefinition }: ObsFieldProps) {
           required={fieldDefinition.validation.required}
         />
       );
+    case 'Date':
+      return (
+        <DateObsField
+          concept={concept}
+          label={fieldDefinition.label}
+          required={fieldDefinition.validation.required}
+          dateFormat={fieldDefinition.dateFormat}
+          placeholder={fieldDefinition.placeholder}
+        />
+      );
     case 'Coded':
       return (
         <CodedObsField
@@ -145,6 +157,56 @@ function NumericObsField({ concept, label, required }: NumericObsFieldProps) {
   );
 }
 
+interface DateObsFieldProps {
+  concept: ConceptResponse;
+  label: string;
+  required?: boolean;
+  dateFormat?: string;
+  placeholder?: string;
+}
+
+function DateObsField({ concept, label, required, placeholder }: DateObsFieldProps) {
+  const { t } = useTranslation();
+  const fieldName = `obs.${concept.uuid}`;
+  const { setFieldValue } = useContext(PatientRegistrationContext);
+  const { format, placeHolder, dateFormat } = generateFormatting(['d', 'm', 'Y'], '/');
+
+  const onDateChange = useCallback(
+    (date: Date) => {
+      setFieldValue(fieldName, date);
+    },
+    [setFieldValue],
+  );
+
+  return (
+    <Layer>
+      <div className={styles.dobField}>
+        <Field name={fieldName}>
+          {({ field, form: { touched, errors }, meta }) => {
+            const dateValue = field.value ? parseDate(field.value) : field.value;
+            return (
+              <OpenmrsDatePicker
+                id={fieldName}
+                {...field}
+                required={required}
+                dateFormat={dateFormat}
+                onChange={onDateChange}
+                labelText={label ?? concept.display}
+                invalid={errors[fieldName] && touched[fieldName]}
+                invalidText={meta.error && t(meta.error)}
+                value={dateValue}
+                carbonOptions={{
+                  placeholder: placeholder ?? placeHolder,
+                }}
+              />
+            );
+          }}
+        </Field>
+      </div>
+    </Layer>
+  );
+}
+
 interface CodedObsFieldProps {
   concept: ConceptResponse;
   answerConceptSetUuid?: string;

package/src/patient-registration/field/obs/obs-field.test.tsx

@@ -5,6 +5,7 @@ import { useConfig } from '@openmrs/esm-framework';
 import { type FieldDefinition } from '../../../config-schema';
 import { useConcept, useConceptAnswers } from '../field.resource';
 import { ObsField } from './obs-field.component';
+import { PatientRegistrationContext } from '../../patient-registration-context';
 
 const mockUseConfig = useConfig as jest.Mock;
 
@@ -42,6 +43,14 @@ const useConceptMockImpl = (uuid: string) => {
       ],
       setMembers: [],
     };
+  } else if (uuid == 'vaccination-date-uuid') {
+    data = {
+      uuid: 'vaccination-date-uuid',
+      display: 'Vaccination Date',
+      datatype: { display: 'Date', uuid: 'date' },
+      answers: [],
+      setMembers: [],
+    };
   } else {
     throw Error(`Programming error, you probably didn't mean to do this: unknown concept uuid '${uuid}'`);
   }
@@ -79,12 +88,14 @@ const useConceptAnswersMockImpl = (uuid: string) => {
 };
 
 type FieldProps = {
-  children: ({ field, form: { touched, errors } }) => React.ReactNode;
+  children: ({ field, form: { touched, errors }, meta }) => React.ReactNode;
 };
 
 jest.mock('formik', () => ({
   ...(jest.requireActual('formik') as object),
-  Field: jest.fn(({ children }: FieldProps) => <>{children({ field: {}, form: { touched: {}, errors: {} } })}</>),
+  Field: jest.fn(({ children }: FieldProps) => (
+    <>{children({ field: {}, form: { touched: {}, errors: {} }, meta: { error: undefined } })}</>
+  )),
   useField: jest.fn(() => [{ value: null }, {}]),
 }));
 
@@ -118,6 +129,21 @@ const numberFieldDef: FieldDefinition = {
   customConceptAnswers: [],
 };
 
+const dateFieldDef: FieldDefinition = {
+  id: 'vac_date',
+  type: 'obs',
+  label: '',
+  placeholder: '',
+  showHeading: false,
+  uuid: 'vaccination-date-uuid',
+  validation: {
+    required: false,
+    matches: null,
+  },
+  answerConceptSetUuid: null,
+  customConceptAnswers: [],
+};
+
 const codedFieldDef: FieldDefinition = {
   id: 'nationality',
   type: 'obs',
@@ -163,6 +189,22 @@ describe('ObsField', () => {
     expect(screen.getByRole('spinbutton')).toBeInTheDocument();
   });
 
+  it('renders a datepicker for date concept', async () => {
+    render(
+      <PatientRegistrationContext.Provider value={{ setFieldValue: jest.fn() }}>
+        <ObsField fieldDefinition={dateFieldDef} />
+      </PatientRegistrationContext.Provider>,
+    );
+
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+
+    const datePickerInput = screen.getByPlaceholderText('dd/mm/yyyy');
+    expect(datePickerInput).toBeInTheDocument();
+
+    await userEvent.type(datePickerInput, '28/05/2024');
+    expect(datePickerInput).toHaveValue('28/05/2024');
+  });
+
   it('renders a select for a coded concept', () => {
     render(<ObsField fieldDefinition={codedFieldDef} />);
     // expect(screen.getByLabelText("Nationality")).toBeInTheDocument();

package/src/patient-registration/field/person-attributes/custom-person-attribute-field.component.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Field } from 'formik';
+import { Layer, Select, SelectItem } from '@carbon/react';
+import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
+import { useTranslation } from 'react-i18next';
+import styles from './../field.scss';
+import classNames from 'classnames';
+
+type CustomPersonAttributeFieldProps = {
+  id: string;
+  personAttributeType: PersonAttributeTypeResponse;
+  answerConceptSetUuid: string;
+  label?: string;
+  customConceptAnswers: Array<{ uuid: string; label?: string }>;
+  required: boolean;
+};
+
+const CustomPersonAttributeField: React.FC<CustomPersonAttributeFieldProps> = ({
+  personAttributeType,
+  required,
+  id,
+  label,
+  customConceptAnswers,
+}) => {
+  const { t } = useTranslation();
+  const fieldName = `attributes.${personAttributeType.uuid}`;
+
+  return (
+    <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
+      <Layer>
+        <Field name={fieldName}>
+          {({ field, form: { touched, errors }, meta }) => {
+            return (
+              <>
+                <Select
+                  id={id}
+                  name={`person-attribute-${personAttributeType.uuid}`}
+                  labelText={label ?? personAttributeType?.display}
+                  invalid={errors[fieldName] && touched[fieldName]}
+                  required={required}
+                  {...field}>
+                  <SelectItem value={''} text={t('selectAnOption', 'Select an option')} />
+                  {customConceptAnswers.map((answer) => (
+                    <SelectItem key={answer.uuid} value={answer.uuid} text={answer.uuid} />
+                  ))}
+                </Select>
+              </>
+            );
+          }}
+        </Field>
+      </Layer>
+    </div>
+  );
+};
+
+export default CustomPersonAttributeField;

package/src/patient-registration/field/person-attributes/person-attribute-field.component.tsx

@@ -6,6 +6,7 @@ import { usePersonAttributeType } from './person-attributes.resource';
 import { TextPersonAttributeField } from './text-person-attribute-field.component';
 import { useTranslation } from 'react-i18next';
 import styles from '../field.scss';
+import CustomPersonAttributeField from './custom-person-attribute-field.component';
 
 export interface PersonAttributeFieldProps {
   fieldDefinition: FieldDefinition;
@@ -22,13 +23,26 @@ export function PersonAttributeField({ fieldDefinition }: PersonAttributeFieldPr
     switch (personAttributeType.format) {
       case 'java.lang.String':
         return (
-          <TextPersonAttributeField
-            personAttributeType={personAttributeType}
-            validationRegex={fieldDefinition.validation?.matches ?? ''}
-            label={fieldDefinition.label}
-            required={fieldDefinition.validation?.required ?? false}
-            id={fieldDefinition?.id}
-          />
+          <>
+            {fieldDefinition.renderType === 'select' ? (
+              <CustomPersonAttributeField
+                personAttributeType={personAttributeType}
+                answerConceptSetUuid={fieldDefinition.answerConceptSetUuid}
+                label={fieldDefinition.label}
+                id={fieldDefinition?.id}
+                customConceptAnswers={fieldDefinition.customConceptAnswers ?? []}
+                required={fieldDefinition.validation?.required ?? false}
+              />
+            ) : (
+              <TextPersonAttributeField
+                personAttributeType={personAttributeType}
+                validationRegex={fieldDefinition.validation?.matches ?? ''}
+                label={fieldDefinition.label}
+                required={fieldDefinition.validation?.required ?? false}
+                id={fieldDefinition?.id}
+              />
+            )}
+          </>
         );
       case 'org.openmrs.Concept':
         return (

package/src/patient-registration/form-manager.ts

@@ -1,10 +1,11 @@
 import {
   type FetchResponse,
+  type Session,
+  type StyleguideConfigObject,
+  getConfig,
   openmrsFetch,
   queueSynchronizationItem,
-  type Session,
   restBaseUrl,
-  getConfig,
 } from '@openmrs/esm-framework';
 import { patientRegistration } from '../constants';
 import {
@@ -131,14 +132,15 @@ export class FormManager {
 
       await this.saveObservations(values.obs, savePatientResponse, currentLocation, currentUser, config);
 
-      const { patientPhotoUuid } = await getConfig('@openmrs/esm-styleguide');
-      if (patientPhotoUuid && capturePhotoProps?.imageData) {
+      const { patientPhotoConceptUuid } = await getConfig<StyleguideConfigObject>('@openmrs/esm-styleguide');
+
+      if (patientPhotoConceptUuid && capturePhotoProps?.imageData) {
         await savePatientPhoto(
           savePatientResponse.data.uuid,
           capturePhotoProps.imageData,
           `${restBaseUrl}/obs`,
           capturePhotoProps.dateTime || new Date().toISOString(),
-          patientPhotoUuid,
+          patientPhotoConceptUuid,
         );
       }
     }

package/src/patient-registration/patient-registration.component.tsx

@@ -195,7 +195,9 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
             <div>
               <div className={styles.stickyColumn}>
                 <h4>
-                  {inEditMode ? t('edit', 'Edit') : t('createNew', 'Create New')} {t('patient', 'Patient')}
+                  {inEditMode
+                    ? t('editPatientDetails', 'Edit patient details')
+                    : t('createNewPatient', 'Create new patient')}
                 </h4>
                 {showDummyData && <DummyDataInput setValues={props.setValues} />}
                 <p className={styles.label01}>{t('jumpTo', 'Jump to')}</p>
@@ -231,12 +233,11 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
                       className={styles.spinner}
                       description={`${t('submitting', 'Submitting')} ...`}
                       iconDescription="submitting"
-                      status="active"
                     />
                   ) : inEditMode ? (
-                    t('updatePatient', 'Update Patient')
+                    t('updatePatient', 'Update patient')
                   ) : (
-                    t('registerPatient', 'Register Patient')
+                    t('registerPatient', 'Register patient')
                   )}
                 </Button>
                 <Button className={styles.cancelButton} kind="tertiary" onClick={cancelRegistration}>

package/src/patient-registration/patient-registration.resource.ts

@@ -5,7 +5,7 @@ export const uuidIdentifier = '05a29f94-c0ed-11e2-94be-8c13b969e334';
 export const uuidTelephoneNumber = '14d4f066-15f5-102d-96e4-000c29c2a5d7';
 
 function dataURItoFile(dataURI: string) {
-  const byteString = atob(dataURI.split(',')[1]);
+  const byteString = window.atob(dataURI.split(',')[1]);
   const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
   // write the bytes of the string to a typed array
   const buffer = new Uint8Array(byteString.length);

package/src/patient-registration/patient-registration.scss

@@ -1,5 +1,5 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@use '@carbon/type';
 @import '~@openmrs/esm-styleguide/src/vars';
 
 .title {
@@ -19,23 +19,23 @@
 }
 
 .submitButton {
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
   width: 11.688rem;
   display: block;
 }
 
 .infoGrid {
   width: 100%;
-  padding-left: spacing.$spacing-07;
+  padding-left: layout.$spacing-07;
   margin-bottom: 40vh;
-  margin-top: spacing.$spacing-05;
+  margin-top: layout.$spacing-05;
   max-width: 50rem;
 }
 
 .label01 {
   @include type.type-style('label-01');
-  margin-top: spacing.$spacing-05;
-  margin-bottom: spacing.$spacing-05;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
   color: $ui-04;
 }
 
@@ -46,7 +46,7 @@
 }
 
 .space05 {
-  margin: spacing.$spacing-05 0 spacing.$spacing-05 0;
+  margin: layout.$spacing-05 0;
 }
 
 .formContainer {
@@ -56,7 +56,7 @@
 
 .stickyColumn {
   position: sticky;
-  margin-top: spacing.$spacing-05;
+  margin-top: layout.$spacing-05;
   // 3rem for the nav height and 1rem for top margin
   top: 4rem;
 }
@@ -68,7 +68,7 @@
 .linkName {
   color: $color-gray-70;
   line-height: 1.38;
-  font-size: spacing.$spacing-05;
+  font-size: layout.$spacing-05;
   font-weight: 600;
 
   &:active {
@@ -94,8 +94,11 @@
 }
 
 .spinner {
-  &:global(.cds--inline-loading) {
-    min-height: 1rem;
+  min-height: 1rem;
+  width: max-content;
+
+  :global(.cds--inline-loading__text) {
+    @include type.type-style('body-01');
   }
 }
 
@@ -109,6 +112,6 @@ html[dir='rtl'] {
 
   .infoGrid {
     padding-left: unset;
-    padding-right: spacing.$spacing-07;
+    padding-right: layout.$spacing-07;
   }
 }

package/src/patient-registration/patient-registration.test.tsx

@@ -264,7 +264,7 @@ describe('Registering a new patient', () => {
     });
 
     await fillRequiredFields();
-    await user.click(await screen.findByText('Register Patient'));
+    await user.click(await screen.findByText(/Register Patient/i));
     expect(mockedSavePatient).toHaveBeenCalledWith(
       expect.objectContaining({
         identifiers: [], //TODO when the identifer story is finished: { identifier: '', identifierType: '05a29f94-c0ed-11e2-94be-8c13b969e334', location: '' },
@@ -293,7 +293,7 @@ describe('Registering a new patient', () => {
     const givenNameInput = (await screen.findByLabelText('First Name')) as HTMLInputElement;
 
     await user.type(givenNameInput, '5');
-    await user.click(screen.getByText('Register Patient'));
+    await user.click(screen.getByText(/Register Patient/i));
 
     expect(mockedSavePatientForm).not.toHaveBeenCalled();
   });
@@ -317,7 +317,7 @@ describe('Registering a new patient', () => {
     const nationality = within(customSection).getByLabelText('Nationality');
     await user.selectOptions(nationality, 'USA');
 
-    await user.click(screen.getByText('Register Patient'));
+    await user.click(screen.getByText(/Register Patient/i));
 
     expect(mockedSavePatient).toHaveBeenCalled();
 
@@ -350,7 +350,7 @@ describe('Registering a new patient', () => {
 
     mockedSaveEncounter.mockRejectedValue({ status: 400, responseBody: { error: { message: 'an error message' } } });
 
-    const registerPatientButton = screen.getByText('Register Patient');
+    const registerPatientButton = screen.getByText(/Register Patient/i);
 
     await user.click(registerPatientButton);
 
@@ -405,7 +405,7 @@ describe('Updating an existing patient record', () => {
     expect(givenNameInput.value).toBe('John');
     expect(familyNameInput.value).toBe('Wilson');
     expect(middleNameInput.value).toBeFalsy();
-    expect(dateOfBirthInput.value).toBe('4/4/1972');
+    expect(dateOfBirthInput.value).toBe('04/04/1972');
     expect(genderInput.value).toBe('male');
 
     // do some edits
@@ -415,7 +415,7 @@ describe('Updating an existing patient record', () => {
     await user.type(givenNameInput, 'Eric');
     await user.type(middleNameInput, 'Johnson');
     await user.type(familyNameInput, 'Smith');
-    await user.click(screen.getByText('Update Patient'));
+    await user.click(screen.getByText(/Update patient/i));
 
     expect(mockedSavePatient).toHaveBeenCalledWith(
       false,