(fix) O3-2654: Process visit attributes separately from the visit payload

__mocks__/visits.mock.ts

@@ -441,3 +441,154 @@ export const mockEncounters2 = [
     resourceVersion: '2.2',
   },
 ];
+
+export const mockVisitWithAttributes = {
+  ...mockVisits.data.results[0],
+  attributes: [
+    {
+      attributeType: {
+        uuid: 'aac48226-d143-4274-80e0-264db4e368ee',
+        display: 'Insurance Policy Number',
+        links: [
+          {
+            rel: 'self',
+            uri: 'http://dev3.openmrs.org/openmrs/ws/rest/v1/visitattributetype/aac48226-d143-4274-80e0-264db4e368ee',
+            resourceAlias: 'visitattributetype',
+          },
+        ],
+      },
+      display: 'Insurance Policy Number: 832832',
+      uuid: 'd6d7d26a-5975-4f03-8abb-db073c948897',
+      value: '832832',
+    },
+    {
+      attributeType: {
+        uuid: '57ea0cbb-064f-4d09-8cf4-e8228700491c',
+        display: 'Punctuality',
+        links: [
+          {
+            rel: 'self',
+            uri: 'http://dev3.openmrs.org/openmrs/ws/rest/v1/visitattributetype/57ea0cbb-064f-4d09-8cf4-e8228700491c',
+            resourceAlias: 'visitattributetype',
+          },
+        ],
+      },
+      display: 'Punctuality: Concept #1092',
+      uuid: 'c98e66d7-7db5-47ae-b46f-91a0f3b6dda1',
+      value: {
+        uuid: '66cdc0a1-aa19-4676-af51-80f66d78d9eb',
+        display: 'On time',
+        name: {
+          display: 'On time',
+          uuid: '03f6dd3e-d270-3ea6-a833-f867e49a40bb',
+          name: 'On time',
+          locale: 'en',
+          localePreferred: true,
+          conceptNameType: 'FULLY_SPECIFIED',
+          links: [
+            {
+              rel: 'self',
+              uri: 'http://dev3.openmrs.org/openmrs/ws/rest/v1/concept/66cdc0a1-aa19-4676-af51-80f66d78d9eb/name/03f6dd3e-d270-3ea6-a833-f867e49a40bb',
+              resourceAlias: 'name',
+            },
+            {
+              rel: 'full',
+              uri: 'http://dev3.openmrs.org/openmrs/ws/rest/v1/concept/66cdc0a1-aa19-4676-af51-80f66d78d9eb/name/03f6dd3e-d270-3ea6-a833-f867e49a40bb?v=full',
+              resourceAlias: 'name',
+            },
+          ],
+          resourceVersion: '1.9',
+        },
+        datatype: {
+          uuid: '8d4a4c94-c2cc-11de-8d13-0010c6dffd0f',
+          display: 'N/A',
+          links: [
+            {
+              rel: 'self',
+              uri: 'http://dev3.openmrs.org/openmrs/ws/rest/v1/conceptdatatype/8d4a4c94-c2cc-11de-8d13-0010c6dffd0f',
+              resourceAlias: 'conceptdatatype',
+            },
+          ],
+        },
+        conceptClass: {
+          uuid: '8d492774-c2cc-11de-8d13-0010c6dffd0f',
+          display: 'Misc',
+          links: [
+            {
+              rel: 'self',
+              uri: 'http://dev3.openmrs.org/openmrs/ws/rest/v1/conceptclass/8d492774-c2cc-11de-8d13-0010c6dffd0f',
+              resourceAlias: 'conceptclass',
+            },
+          ],
+        },
+        set: false,
+        version: null,
+        retired: false,
+        names: [
+          {
+            uuid: 'dc2adaff-ae4d-30d2-9ce8-0b6ae2518f11',
+            display: 'À temps',
+            links: [
+              {
+                rel: 'self',
+                uri: 'http://dev3.openmrs.org/openmrs/ws/rest/v1/concept/66cdc0a1-aa19-4676-af51-80f66d78d9eb/name/dc2adaff-ae4d-30d2-9ce8-0b6ae2518f11',
+                resourceAlias: 'name',
+              },
+            ],
+          },
+          {
+            uuid: '03f6dd3e-d270-3ea6-a833-f867e49a40bb',
+            display: 'On time',
+            links: [
+              {
+                rel: 'self',
+                uri: 'http://dev3.openmrs.org/openmrs/ws/rest/v1/concept/66cdc0a1-aa19-4676-af51-80f66d78d9eb/name/03f6dd3e-d270-3ea6-a833-f867e49a40bb',
+                resourceAlias: 'name',
+              },
+            ],
+          },
+          {
+            uuid: '9c3ecda9-dd54-331e-aebf-d7426e358752',
+            display: 'À temps',
+            links: [
+              {
+                rel: 'self',
+                uri: 'http://dev3.openmrs.org/openmrs/ws/rest/v1/concept/66cdc0a1-aa19-4676-af51-80f66d78d9eb/name/9c3ecda9-dd54-331e-aebf-d7426e358752',
+                resourceAlias: 'name',
+              },
+            ],
+          },
+          {
+            uuid: '0ab86d36-0a8f-38f9-963e-8138251fc619',
+            display: 'On time',
+            links: [
+              {
+                rel: 'self',
+                uri: 'http://dev3.openmrs.org/openmrs/ws/rest/v1/concept/66cdc0a1-aa19-4676-af51-80f66d78d9eb/name/0ab86d36-0a8f-38f9-963e-8138251fc619',
+                resourceAlias: 'name',
+              },
+            ],
+          },
+        ],
+        descriptions: [],
+        mappings: [],
+        answers: [],
+        setMembers: [],
+        attributes: [],
+        links: [
+          {
+            rel: 'self',
+            uri: 'http://dev3.openmrs.org/openmrs/ws/rest/v1/concept/66cdc0a1-aa19-4676-af51-80f66d78d9eb',
+            resourceAlias: 'concept',
+          },
+          {
+            rel: 'full',
+            uri: 'http://dev3.openmrs.org/openmrs/ws/rest/v1/concept/66cdc0a1-aa19-4676-af51-80f66d78d9eb?v=full',
+            resourceAlias: 'concept',
+          },
+        ],
+        resourceVersion: '2.0',
+      },
+    },
+  ]
+}

e2e/specs/visit.spec.ts

@@ -16,7 +16,7 @@ test('Start and end a visit', async ({ page }) => {
     await chartPage.goTo(patient.uuid);
   });
 
-  await test.step('And I click on the `Start a visit` button ', async () => {
+  await test.step('And I click on the `Start visit` button ', async () => {
     await chartPage.page.getByRole('button', { name: /start a visit/i }).click();
   });
 
@@ -33,7 +33,7 @@ test('Start and end a visit', async ({ page }) => {
     await expect(chartPage.page.getByLabel(/Offline Visit/i)).toBeVisible();
     await expect(chartPage.page.getByLabel(/Group Session/i)).toBeVisible();
     await expect(chartPage.page.getByRole('button', { name: /discard/i })).toBeVisible();
-    await expect(chartPage.page.locator('form').getByRole('button', { name: /start a visit/i })).toBeVisible();
+    await expect(chartPage.page.locator('form').getByRole('button', { name: /start visit/i })).toBeVisible();
   });
 
   await test.step('When I select the visit type: `OPD Visit`', async () => {
@@ -43,7 +43,7 @@ test('Start and end a visit', async ({ page }) => {
   await test.step('And I click on the `Start Visit` button', async () => {
     await chartPage.page
       .locator('form')
-      .getByRole('button', { name: /start a visit/i })
+      .getByRole('button', { name: /start visit/i })
       .click();
   });
 

packages/esm-patient-chart-app/src/root.scss

@@ -1,14 +1,14 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '@openmrs/esm-styleguide/src/vars';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .patientChartWrapper {
   display: flex;
   position: relative;
 }
 
 .patientChartWrapper {
-  &>nav {
+  & > nav {
     padding-bottom: 3rem;
     scrollbar-width: none;
   }
@@ -56,11 +56,11 @@
 }
 
 .text01 {
-  color: $ui-05;
+  color: colors.$gray-100;
 }
 
 .text02 {
-  color: $text-02;
+  color: colors.$gray-70;
 }
 
 .label01 {

packages/esm-patient-chart-app/src/visit/hooks/useVisitAttributeType.tsx

@@ -1,5 +1,5 @@
+import { useMemo } from 'react';
 import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
-import { useEffect, useMemo } from 'react';
 import useSWRImmutable from 'swr/immutable';
 
 interface VisitAttributeType {
@@ -34,25 +34,46 @@ interface Concept {
 const visitAttributeTypeCustomRepresentation =
   'custom:(uuid,display,name,description,datatypeClassname,datatypeConfig)';
 
+export function useVisitAttributeTypes() {
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<{ results: VisitAttributeType[] }>, Error>(
+    `/ws/rest/v1/visitattributetype?v=${visitAttributeTypeCustomRepresentation}`,
+    openmrsFetch,
+  );
+
+  if (error) {
+    console.error('Failed to fetch visit attribute types: ', error);
+  }
+
+  const results = useMemo(
+    () => ({
+      isLoading,
+      error,
+      visitAttributeTypes: data?.data?.results ?? [],
+    }),
+    [data, error, isLoading],
+  );
+
+  return results;
+}
+
 export function useVisitAttributeType(uuid) {
   const { data, error, isLoading } = useSWRImmutable<FetchResponse<VisitAttributeType>, Error>(
     `${restBaseUrl}/visitattributetype/${uuid}?v=${visitAttributeTypeCustomRepresentation}`,
     openmrsFetch,
   );
 
-  useEffect(() => {
-    if (error) {
-      console.error(error);
-    }
-  }, [error]);
+  if (error) {
+    console.error(`Failed to fetch visit attribute type ${uuid}: `, error);
+  }
 
-  const results = useMemo(() => {
-    return {
+  const results = useMemo(
+    () => ({
       isLoading,
       error: error,
       data: data?.data,
-    };
-  }, [data, error, isLoading]);
+    }),
+    [data, error, isLoading],
+  );
 
   return results;
 }
@@ -63,20 +84,19 @@ export function useConceptAnswersForVisitAttributeType(conceptUuid) {
     openmrsFetch,
   );
 
-  useEffect(() => {
-    if (error) {
-      console.error(error);
-    }
-  }, [error]);
+  if (error) {
+    console.error(`Failed to fetch concept answers for visit attribute type ${conceptUuid}: `, error);
+  }
 
-  const results = useMemo(() => {
-    return {
+  const results = useMemo(
+    () => ({
       isLoading,
       error: error,
       data: data?.data,
       answers: data?.data?.answers,
-    };
-  }, [data, error, isLoading]);
+    }),
+    [data, error, isLoading],
+  );
 
   return results;
 }

packages/esm-patient-chart-app/src/visit/visit-form/visit-attribute-type.component.tsx

@@ -177,7 +177,9 @@ const AttributeTypeField: React.FC<AttributeTypeFieldProps> = ({
         return (
           <TextInput
             {...fieldProps}
+            id={uuid}
             labelText={labelText}
+            placeholder={labelText}
             invalid={!!errors.visitAttributes?.[uuid]}
             invalidText={errors.visitAttributes?.[uuid]?.message}
           />