@openmrs/esm-fast-data-entry-app 1.0.1-pre.15 → 1.0.1-pre.159

package/src/config-schema.ts

@@ -60,6 +60,63 @@ export const configSchema = {
     },
     _default: ["ICRC Forms", "Distress Scales"],
   },
+  groupSessionConcepts: {
+    sessionName: {
+      _type: Type.UUID,
+      _description: "UUID of concept for Session Name",
+      _default: "e2559620-900b-4f66-ae41-0b9c4adfb654",
+    },
+    sessionDate: {
+      _type: Type.UUID,
+      _description: "UUID of concept for Session Date",
+      _default: "ceaca505-6dff-4940-8a43-8c060a0924d7",
+    },
+    practitionerName: {
+      _type: Type.UUID,
+      _description: "UUID of concept for Practitioner Name",
+      _default: "f1a2d58c-1a0e-4148-931a-aac224649fdc",
+    },
+    sessionNotes: {
+      _type: Type.UUID,
+      _description: "UUID of concept for Session Notes",
+      _default: "fa8fedc0-c066-4da3-8dc1-2ad8621fc480",
+    },
+    cohortId: {
+      _type: Type.UUID,
+      _description: "UUID of concept for cohort identifier",
+      _default: "5461f231-7e59-4be8-93a4-6d49fd13c00a",
+    },
+    cohortName: {
+      _type: Type.UUID,
+      _description: "UUID of concept for cohort name",
+      _default: "6029f289-92a6-4a68-80f1-3078d0152449",
+    },
+    sessionUuid: {
+      _type: Type.UUID,
+      _description: "UUID of concept for session identifier",
+      _default: "6a803908-8a5b-4598-adea-19358c83529a",
+    },
+  },
+  specificQuestions: {
+    _type: Type.Array,
+    _description: "List of specific questions to populate forms.",
+    _elements: {
+      forms: {
+        _type: Type.Array,
+        _description: "List of form UUIDs for which the question applies.",
+        _elements: {
+          _type: Type.UUID,
+        },
+        _default: [],
+      },
+      questionId: {
+        _type: Type.String,
+        _description: "ID of the question.",
+        _default: "",
+      },
+    },
+    _default: [],
+  },
 };
 
 export type Form = {

package/src/context/FormWorkflowContext.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useMemo, useReducer } from "react";
 import reducer from "./FormWorkflowReducer";
 import { useParams, useLocation } from "react-router-dom";
+import useGetSystemSetting from "../hooks/useGetSystemSetting";
+import { useSession } from "@openmrs/esm-framework";
 interface ParamTypes {
   formUuid?: string;
 }
@@ -30,6 +32,8 @@ export const initialWorkflowState = {
   activeEncounterUuid: null, // pseudo field from state[activeFormUuid].encounterUuid
   patientUuids: [], // pseudo field from state[activeFormUuid].patientUuids
   encounters: {}, // pseudo field from state[activeFormUuid].encounters
+  singleSessionVisitTypeUuid: null,
+  userUuid: null, // UUID of the user to which this workflow state belongs to
 };
 
 const FormWorkflowContext = React.createContext({
@@ -38,6 +42,7 @@ const FormWorkflowContext = React.createContext({
 });
 
 const FormWorkflowProvider = ({ children }) => {
+  const { user } = useSession();
   const { formUuid } = useParams() as ParamTypes;
   const activeFormUuid = formUuid.split("&")[0];
   const { search } = useLocation();
@@ -46,6 +51,11 @@ const FormWorkflowProvider = ({ children }) => {
     ...initialWorkflowState,
     ...initialActions,
   });
+  const systemSetting = useGetSystemSetting(
+    "@openmrs/esm-fast-data-entry-app.groupSessionVisitTypeUuid"
+  );
+  const singleSessionVisitTypeUuid =
+    systemSetting?.result?.data?.results?.[0]?.value;
 
   const actions = useMemo(
     () => ({
@@ -54,6 +64,7 @@ const FormWorkflowProvider = ({ children }) => {
           type: "INITIALIZE_WORKFLOW_STATE",
           activeFormUuid,
           newPatientUuid,
+          userUuid: user.uuid,
         }),
       addPatient: (patientUuid) =>
         dispatch({ type: "ADD_PATIENT", patientUuid }),
@@ -72,7 +83,7 @@ const FormWorkflowProvider = ({ children }) => {
       destroySession: () => dispatch({ type: "DESTROY_SESSION" }),
       closeSession: () => dispatch({ type: "CLOSE_SESSION" }),
     }),
-    []
+    [user]
   );
 
   // if formUuid isn't a part of state yet, grab it from the url params
@@ -103,6 +114,7 @@ const FormWorkflowProvider = ({ children }) => {
         encounters:
           state.forms?.[state.activeFormUuid]?.encounters ??
           initialWorkflowState.encounters,
+        singleSessionVisitTypeUuid,
       }}
     >
       {children}

package/src/context/FormWorkflowReducer.ts

@@ -1,10 +1,13 @@
 import { navigate } from "@openmrs/esm-framework";
 import { initialWorkflowState } from "./FormWorkflowContext";
 
-export const fdeWorkflowStorageVersion = "1.0.13";
+export const fdeWorkflowStorageVersion = "1.1.0";
 export const fdeWorkflowStorageName = "openmrs:fastDataEntryWorkflowState";
 const persistData = (data) => {
-  localStorage.setItem(fdeWorkflowStorageName, JSON.stringify(data));
+  localStorage.setItem(
+    fdeWorkflowStorageName + ":" + data.userUuid,
+    JSON.stringify(data)
+  );
 };
 
 const initialFormState = {
@@ -18,7 +21,9 @@ const initialFormState = {
 const reducer = (state, action) => {
   switch (action.type) {
     case "INITIALIZE_WORKFLOW_STATE": {
-      const savedData = localStorage.getItem(fdeWorkflowStorageName);
+      const savedData = localStorage.getItem(
+        fdeWorkflowStorageName + ":" + action.userUuid
+      );
       const savedDataObject = savedData ? JSON.parse(savedData) : {};
       let newState: { [key: string]: unknown } = {};
       const newPatient = action.newPatientUuid
@@ -69,6 +74,7 @@ const reducer = (state, action) => {
             [action.activeFormUuid]: initialFormState,
           },
           activeFormUuid: action.activeFormUuid,
+          userUuid: action.userUuid,
         };
       }
       persistData(newState);
@@ -259,6 +265,8 @@ const reducer = (state, action) => {
         activeFormUuid: null,
       };
       persistData(newState);
+      //eslint-disable-next-line
+      navigate({ to: "${openmrsSpaBase}/forms" });
       return newState;
     }
     case "CLOSE_SESSION": {
@@ -267,6 +275,8 @@ const reducer = (state, action) => {
         activeFormUuid: null,
       };
       persistData(newState);
+      //eslint-disable-next-line
+      navigate({ to: "${openmrsSpaBase}/forms" });
       return newState;
     }
     default:

package/src/context/GroupFormWorkflowContext.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useMemo, useReducer } from "react";
 import reducer from "./GroupFormWorkflowReducer";
 import { useParams } from "react-router-dom";
-import { Type } from "@openmrs/esm-framework";
+import { type Type, useSession } from "@openmrs/esm-framework";
+import useGetSystemSetting from "../hooks/useGetSystemSetting";
 interface ParamTypes {
   formUuid?: string;
 }
@@ -25,9 +26,14 @@ const initialActions = {
   openPatientSearch: () => undefined,
   saveEncounter: (encounterUuid: string | number) => undefined,
   editEncounter: (patientUuid: string | number) => undefined,
-  submitForNext: () => undefined,
+  validateForNext: () => undefined,
+  validateForComplete: () => undefined,
+  updateVisitUuid: (visitUuid: string) => undefined,
+  submitForNext: (nextPatientUuid: string = null) => undefined,
   submitForReview: () => undefined,
   submitForComplete: () => undefined,
+  addPatientUuid: (patientUuid: string) => undefined,
+  removePatientUuid: (patientUuid: string) => undefined,
   goToReview: () => undefined,
   destroySession: () => undefined,
   closeSession: () => undefined,
@@ -42,17 +48,23 @@ export const initialWorkflowState = {
   //     aciveFormUuid
   workflowState: null, // pseudo field from state[activeFormUuid].workflowState
   activePatientUuid: null, // pseudo field from state[activeFormUuid].activePatientUuid
-  activeEncounterUuid: null, // pseudo field from state[activeFormUuid].encounterUuid
+  activeEncounterUuid: null, // pseudo field from state[activeFormUuid].activeEncounterUuid
+  activeSessionUuid: null, // pseudo field from state[activeFormUuid].activeSessionUuid
+  activeVisitUuid: null, // pseudo field from state[activeFormUuid].activeVisitUuid
   patientUuids: [], // pseudo field from state[activeFormUuid].patientUuids
   encounters: {}, // pseudo field from state[activeFormUuid].encounters
+  visits: {}, // pseudo field from state[activeFormUuid].visits
   activeGroupUuid: null, // pseudo field from state[activeFormUuid].groupUuid
-  activeGroupName: null, // pseudo field from state[activeFormUuid].groupname
+  activeGroupName: null, // pseudo field from state[activeFormUuid].groupName
+  activeGroupMembers: [], // pseudo field from state[activeFormUuid].groupMembers
   activeSessionMeta: {
     sessionName: null,
     practitionerName: null,
     sessionDate: null,
     sessionNotes: null,
   },
+  groupVisitTypeUuid: null,
+  userUuid: null, // UUID of the user to which this workflow state belongs to
 };
 
 const GroupFormWorkflowContext = React.createContext({
@@ -61,8 +73,13 @@ const GroupFormWorkflowContext = React.createContext({
 });
 
 const GroupFormWorkflowProvider = ({ children }) => {
+  const { user } = useSession();
   const { formUuid } = useParams() as ParamTypes;
   const activeFormUuid = formUuid.split("&")[0];
+  const systemSetting = useGetSystemSetting(
+    "@openmrs/esm-fast-data-entry-app.groupSessionVisitTypeUuid"
+  );
+  const groupVisitTypeUuid = systemSetting?.result?.data?.results?.[0]?.value;
   const [state, dispatch] = useReducer(reducer, {
     ...initialWorkflowState,
     ...initialActions,
@@ -74,17 +91,27 @@ const GroupFormWorkflowProvider = ({ children }) => {
         dispatch({
           type: "INITIALIZE_WORKFLOW_STATE",
           activeFormUuid,
+          userUuid: user.uuid,
         }),
       setGroup: (group) => dispatch({ type: "SET_GROUP", group }),
       unsetGroup: () => dispatch({ type: "UNSET_GROUP" }),
       setSessionMeta: (meta) => dispatch({ type: "SET_SESSION_META", meta }),
+      addPatientUuid: (patientUuid) =>
+        dispatch({ type: "ADD_PATIENT_UUID", patientUuid }),
+      removePatientUuid: (patientUuid) =>
+        dispatch({ type: "REMOVE_PATIENT_UUID", patientUuid }),
       openPatientSearch: () => dispatch({ type: "OPEN_PATIENT_SEARCH" }),
       saveEncounter: (encounterUuid) =>
         dispatch({
           type: "SAVE_ENCOUNTER",
           encounterUuid,
         }),
-      submitForNext: () => dispatch({ type: "SUBMIT_FOR_NEXT" }),
+      validateForNext: () => dispatch({ type: "VALIDATE_FOR_NEXT" }),
+      validateForComplete: () => dispatch({ type: "VALIDATE_FOR_COMPLETE" }),
+      updateVisitUuid: (visitUuid) =>
+        dispatch({ type: "UPDATE_VISIT_UUID", visitUuid }),
+      submitForNext: (nextPatientUuid) =>
+        dispatch({ type: "SUBMIT_FOR_NEXT", nextPatientUuid }),
       submitForComplete: () => dispatch({ type: "SUBMIT_FOR_COMPLETE" }),
       editEncounter: (patientUuid) =>
         dispatch({ type: "EDIT_ENCOUNTER", patientUuid }),
@@ -92,7 +119,7 @@ const GroupFormWorkflowProvider = ({ children }) => {
       destroySession: () => dispatch({ type: "DESTROY_SESSION" }),
       closeSession: () => dispatch({ type: "CLOSE_SESSION" }),
     }),
-    []
+    [user]
   );
 
   // if formUuid isn't a part of state yet, grab it from the url params
@@ -106,17 +133,24 @@ const GroupFormWorkflowProvider = ({ children }) => {
   return (
     <GroupFormWorkflowContext.Provider
       value={{
+        groupVisitTypeUuid,
         ...state,
         ...actions,
         workflowState:
           state.forms?.[state.activeFormUuid]?.workflowState ??
           initialWorkflowState.workflowState,
+        activeSessionUuid:
+          state.forms?.[state.activeFormUuid]?.activeSessionUuid ??
+          initialWorkflowState.activeSessionUuid,
         activePatientUuid:
           state.forms?.[state.activeFormUuid]?.activePatientUuid ??
           initialWorkflowState.activePatientUuid,
         activeEncounterUuid:
           state.forms?.[state.activeFormUuid]?.activeEncounterUuid ??
           initialWorkflowState.activeEncounterUuid,
+        activeVisitUuid:
+          state.forms?.[state.activeFormUuid]?.activeVisitUuid ??
+          initialWorkflowState.activeVisitUuid,
         patientUuids:
           state.forms?.[state.activeFormUuid]?.patientUuids ??
           initialWorkflowState.patientUuids,
@@ -129,6 +163,9 @@ const GroupFormWorkflowProvider = ({ children }) => {
         activeGroupName:
           state.forms?.[state.activeFormUuid]?.groupName ??
           initialWorkflowState.activeGroupName,
+        activeGroupMembers:
+          state.forms?.[state.activeFormUuid]?.groupMembers ??
+          initialWorkflowState.activeGroupMembers,
         activeSessionMeta:
           state.forms?.[state.activeFormUuid]?.sessionMeta ??
           initialWorkflowState.activeSessionMeta,

package/src/context/GroupFormWorkflowReducer.ts

@@ -1,27 +1,37 @@
 import { navigate } from "@openmrs/esm-framework";
 import { initialWorkflowState } from "./FormWorkflowContext";
+import { v4 as uuid } from "uuid";
 
 export const fdeGroupWorkflowStorageVersion = "1.0.5";
 export const fdeGroupWorkflowStorageName =
   "openmrs:fastDataEntryGroupWorkflowState";
 const persistData = (data) => {
-  localStorage.setItem(fdeGroupWorkflowStorageName, JSON.stringify(data));
+  localStorage.setItem(
+    fdeGroupWorkflowStorageName + ":" + data.userUuid,
+    JSON.stringify(data)
+  );
 };
 
 const initialFormState = {
   workflowState: "NEW_GROUP_SESSION",
   groupUuid: null,
   groupName: null,
+  groupMembers: [],
   activePatientUuid: null,
   activeEncounterUuid: null,
+  activeVisitUuid: null,
+  activeSessionUuid: null,
   patientUuids: [],
   encounters: {},
+  visits: {},
 };
 
 const reducer = (state, action) => {
   switch (action.type) {
     case "INITIALIZE_WORKFLOW_STATE": {
-      const savedData = localStorage.getItem(fdeGroupWorkflowStorageName);
+      const savedData = localStorage.getItem(
+        fdeGroupWorkflowStorageName + ":" + action.userUuid
+      );
       const savedDataObject = savedData ? JSON.parse(savedData) : {};
       let newState: { [key: string]: unknown } = {};
       if (
@@ -37,6 +47,7 @@ const reducer = (state, action) => {
           thisSavedForm?.patientUuids?.[0] ||
           // something probably went wrong...
           null;
+        const activeSessionUuid = thisSavedForm?.activeSessionUuid || uuid();
         newState = {
           ...savedDataObject,
           // set current form to this one
@@ -50,6 +61,9 @@ const reducer = (state, action) => {
               activePatientUuid: activePatientUuid,
               activeEncounterUuid:
                 thisSavedForm?.encounters?.[activePatientUuid] || null,
+              activeVisitUuid:
+                thisSavedForm?.visits?.[activePatientUuid] || null,
+              activeSessionUuid: activeSessionUuid,
             },
           },
         };
@@ -62,6 +76,7 @@ const reducer = (state, action) => {
             [action.activeFormUuid]: initialFormState,
           },
           activeFormUuid: action.activeFormUuid,
+          userUuid: action.userUuid,
         };
       }
       persistData(newState);
@@ -84,8 +99,14 @@ const reducer = (state, action) => {
               action.group.cohortMembers?.map(
                 (member) => member?.patient?.uuid
               ) ?? [],
+            groupMembers:
+              action.group.cohortMembers?.map(
+                (member) => member?.patient?.uuid
+              ) ?? [],
             activePatientUuid: null,
             activeEncounterUuid: null,
+            activeVisitUuid: null,
+            activeSessionUuid: null,
           },
         },
       };
@@ -102,8 +123,11 @@ const reducer = (state, action) => {
             groupUuid: null,
             groupName: null,
             patientUuids: [],
+            groupMembers: [],
             activePatientUuid: null,
             activeEncounterUuid: null,
+            activeVisitUuid: null,
+            activeSessionUuid: null,
           },
         },
       };
@@ -125,6 +149,11 @@ const reducer = (state, action) => {
               state.forms[state.activeFormUuid].encounters[
                 state.forms[state.activeFormUuid].patientUuids?.[0]
               ] || null,
+            activeVisitUuid:
+              state.forms[state.activeFormUuid].visits[
+                state.forms[state.activeFormUuid].patientUuids?.[0]
+              ] || null,
+            activeSessionUuid: uuid(),
             workflowState: "EDIT_FORM",
           },
         },
@@ -132,7 +161,47 @@ const reducer = (state, action) => {
       persistData(newState);
       return newState;
     }
+    case "ADD_PATIENT_UUID": {
+      if (
+        state.forms[state.activeFormUuid].patientUuids.includes(
+          action.patientUuid
+        )
+      ) {
+        return state;
+      }
 
+      const newState = {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            patientUuids: [
+              ...state.forms[state.activeFormUuid].patientUuids,
+              action.patientUuid,
+            ],
+          },
+        },
+      };
+      persistData(newState);
+      return newState;
+    }
+    case "REMOVE_PATIENT_UUID": {
+      const newState = {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            patientUuids: state.forms[
+              state.activeFormUuid
+            ].patientUuids?.filter((uuid) => action.patientUuid !== uuid),
+          },
+        },
+      };
+      persistData(newState);
+      return newState;
+    }
     case "SAVE_ENCOUNTER": {
       const thisForm = state.forms[state.activeFormUuid];
       if (thisForm.workflowState === "SUBMIT_FOR_COMPLETE") {
@@ -147,13 +216,14 @@ const reducer = (state, action) => {
         navigate({ to: "${openmrsSpaBase}/forms" });
         return newState;
       } else if (thisForm.workflowState === "SUBMIT_FOR_NEXT") {
-        const nextPatientUuid =
-          thisForm.patientUuids[
-            Math.min(
-              thisForm.patientUuids.indexOf(thisForm.activePatientUuid) + 1,
-              thisForm.patientUuids.length - 1
-            )
-          ];
+        const nextPatientUuid = state.nextPatientUuid
+          ? state.nextPatientUuid
+          : thisForm.patientUuids[
+              Math.min(
+                thisForm.patientUuids.indexOf(thisForm.activePatientUuid) + 1,
+                thisForm.patientUuids.length - 1
+              )
+            ];
         const newState = {
           ...state,
           forms: {
@@ -166,6 +236,8 @@ const reducer = (state, action) => {
               },
               activePatientUuid: nextPatientUuid,
               activeEncounterUuid: thisForm.encounters[nextPatientUuid] || null,
+              activeVisitUuid: thisForm.visits[nextPatientUuid] || null,
+              activeSessionUuid: thisForm.activeSessionUuid,
               workflowState: "EDIT_FORM",
             },
           },
@@ -183,7 +255,10 @@ const reducer = (state, action) => {
             ...state.forms[state.activeFormUuid],
             activeEncounterUuid:
               state.forms[state.activeFormUuid].encounters[action.patientUuid],
+            activeVisitUuid:
+              state.forms[state.activeFormUuid].visits[action.patientUuid],
             activePatientUuid: action.patientUuid,
+            activeSessionUuid: action.activeSessionUuid,
             workflowState: "EDIT_FORM",
           },
         },
@@ -191,6 +266,46 @@ const reducer = (state, action) => {
       persistData(newState);
       return newState;
     }
+    case "VALIDATE_FOR_NEXT":
+      // this state should not be persisted
+      window.dispatchEvent(
+        new CustomEvent("ampath-form-action", {
+          detail: {
+            formUuid: state.activeFormUuid,
+            patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
+            action: "validateForm",
+          },
+        })
+      );
+      return {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            workflowState: "VALIDATE_FOR_NEXT",
+          },
+        },
+      };
+    case "UPDATE_VISIT_UUID":
+      // this state should not be persisted
+      // we don't pers
+      return {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            visits: {
+              ...state.forms[state.activeFormUuid].visits,
+              [state.forms[state.activeFormUuid].activePatientUuid]:
+                action.visitUuid,
+            },
+            activeVisitUuid: action.visitUuid,
+          },
+        },
+      };
+
     case "SUBMIT_FOR_NEXT":
       // this state should not be persisted
       window.dispatchEvent(
@@ -211,6 +326,7 @@ const reducer = (state, action) => {
             workflowState: "SUBMIT_FOR_NEXT",
           },
         },
+        nextPatientUuid: action.nextPatientUuid,
       };
     case "SUBMIT_FOR_REVIEW":
       // this state should not be persisted
@@ -233,6 +349,28 @@ const reducer = (state, action) => {
           },
         },
       };
+
+    case "VALIDATE_FOR_COMPLETE":
+      // this state should not be persisted
+      window.dispatchEvent(
+        new CustomEvent("ampath-form-action", {
+          detail: {
+            formUuid: state.activeFormUuid,
+            patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
+            action: "validateForm",
+          },
+        })
+      );
+      return {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            workflowState: "VALIDATE_FOR_COMPLETE",
+          },
+        },
+      };
     case "SUBMIT_FOR_COMPLETE":
       // this state should not be persisted
       window.dispatchEvent(
@@ -262,7 +400,9 @@ const reducer = (state, action) => {
           [state.activeFormUuid]: {
             ...state.forms[state.activeFormUuid],
             activeEncounterUuid: null,
+            activVisitUuid: null,
             activePatientUuid: null,
+            activeSessionUuid: null,
             workflowState: "REVIEW",
           },
         },
@@ -278,7 +418,9 @@ const reducer = (state, action) => {
         activeFormUuid: null,
       };
       persistData(newState);
-      return newState;
+      //eslint-disable-next-line
+      navigate({ to: "${openmrsSpaBase}/forms" });
+      return { ...newState, formDestroyed: true };
     }
     case "CLOSE_SESSION": {
       const newState = {
@@ -286,6 +428,8 @@ const reducer = (state, action) => {
         activeFormUuid: null,
       };
       persistData(newState);
+      //eslint-disable-next-line
+      navigate({ to: "${openmrsSpaBase}/forms" });
       return newState;
     }
     default:

package/src/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module "@carbon/react";
+declare module "*.css";
+declare module "*.scss";
+declare type SideNavProps = object;

package/src/empty-state/styles.scss

@@ -1,36 +1,36 @@
-@import "~@openmrs/esm-styleguide/src/vars";
-@import "~carbon-components/src/globals/scss/vars";
-@import "~carbon-components/src/globals/scss/mixins";
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .action {
-  margin-bottom: $spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .content {
-  @include carbon--type-style("productive-heading-01");
-  color: $text-02;
-  margin-top: $spacing-05;
-  margin-bottom: $spacing-03;
+  @include type.type-style("heading-compact-01");
+  color: colors.$gray-70;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
 }
 
 .desktopHeading {
   h4 {
-    @include carbon--type-style('productive-heading-02');
-    color: $text-02;
+    @include type.type-style('heading-compact-02');
+    color: colors.$gray-70;
   }
 }
 
 .tabletHeading {
   h4 {
-    @include carbon--type-style('productive-heading-03');
-    color: $text-02;
+    @include type.type-style('heading-03');
+    color: colors.$gray-70;
   }
 }
 
 .desktopHeading, .tabletHeading {
   text-align: left;
   text-transform: capitalize;
-  margin-bottom: $spacing-05;
+  margin-bottom: layout.$spacing-05;
 
   h4:after {
     content: "";
@@ -51,5 +51,5 @@
 
 .tile {
   text-align: center;
-  border: 1px solid $ui-03;
+  border: 1px solid colors.$gray-20;
 }