@kenyaemr/esm-shr-app 5.4.2-pre.2203 → 5.4.2-pre.2223

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[{"component":"shrRoot","route":"referrals"}],"extensions":[{"component":"shrAuthorizationForm","name":"shr-authorization-form"},{"name":"patient-chart-shr-summary-dashboard-link","component":"shrSummaryDashboardLink","slot":"patient-chart-dashboard-slot","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-shr-summary-dashboard-slot","path":"SHR Portal"},"featureFlag":"healthInformationExchange"},{"name":"SHR Portal","slot":"patient-chart-shr-summary-dashboard-slot","component":"patientSHRSummary","meta":{"columnSpan":4}},{"name":"referrals","slot":"referrals-slot","component":"shrRoot"},{"name":"referrals-link","slot":"homepage-dashboard-slot","component":"ReferralsDashboardLink","meta":{"name":"referrals","title":"referrals","slot":"referrals-slot"}},{"name":"referral-reasons-dialog","component":"referralReasonsDialogPopup"},{"name":"facility-referral-form","component":"facilityRefferalForm"},{"name":"referral-view-link","component":"referralLink","slot":"patient-chart-dashboard-slot","order":13,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-referral-slot","path":"referral","layoutMode":"anchored"}},{"name":"referral-view","slot":"patient-chart-referral-slot","component":"referralWidget","order":0,"online":true,"offline":false}],"version":"5.4.2-pre.2203"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"kenyaemr":"^19.0.0"},"pages":[{"component":"shrRoot","route":"referrals"}],"extensions":[{"component":"shrAuthorizationForm","name":"shr-authorization-form"},{"name":"patient-chart-shr-summary-dashboard-link","component":"shrSummaryDashboardLink","slot":"patient-chart-dashboard-slot","meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-shr-summary-dashboard-slot","path":"SHR Portal"},"featureFlag":"healthInformationExchange"},{"name":"SHR Portal","slot":"patient-chart-shr-summary-dashboard-slot","component":"patientSHRSummary","meta":{"columnSpan":4}},{"name":"referrals","slot":"referrals-slot","component":"shrRoot"},{"name":"referrals-link","slot":"homepage-dashboard-slot","component":"ReferralsDashboardLink","meta":{"name":"referrals","title":"referrals","slot":"referrals-slot"}},{"name":"referral-reasons-dialog","component":"referralReasonsDialogPopup"},{"name":"facility-referral-form","component":"facilityRefferalForm"},{"name":"referral-view-link","component":"referralLink","slot":"patient-chart-dashboard-slot","order":13,"meta":{"columns":1,"columnSpan":1,"slot":"patient-chart-referral-slot","path":"referral","layoutMode":"anchored"}},{"name":"referral-view","slot":"patient-chart-referral-slot","component":"referralWidget","order":0,"online":true,"offline":false}],"version":"5.4.2-pre.2223"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-shr-app",
-  "version": "5.4.2-pre.2203",
+  "version": "5.4.2-pre.2223",
   "description": "Patient care panels microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-shr-app.js",
   "main": "src/index.ts",
@@ -47,5 +47,8 @@
     "react-i18next": "11.x",
     "react-router-dom": "6.x"
   },
+  "devDependencies": {
+    "webpack": "^5.99.9"
+  },
   "stableVersion": "5.4.1"
 }

package/src/declarations.d.ts

@@ -1,15 +1,2 @@
 declare module '*.css';
 declare module '*.scss';
-declare module '@carbon/react';
-declare module 'react-aria' {
-  export const I18nProvider: (...args: any) => JSX.Element;
-  export { DateValue } from '@react-types/datepicker';
-  export const mergeProps: any;
-  export const useLocale: any;
-  export const useDateField: any;
-  export const useDatePicker: any;
-  export const useDateSegment: any;
-  export const useFocusRing: any;
-  export const useHover: any;
-  export const useObjectRef: any;
-}

package/src/header/referrals-header.scss

@@ -1,7 +1,7 @@
 @use '@carbon/layout';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .header {
   @include type.type-style('body-compact-02');

package/src/referrals/dependents/dependents.component.tsx

@@ -61,14 +61,14 @@ const DependentsComponent: React.FC<DependentProps> = ({ patient, patientUuid })
     phoneNumber: dependent.phoneNumber,
     gender: capitalize(dependent.gender),
     actions: (
-      <Button size="xs" kind="ghost" onClick={() => handleRegisterDependent(dependent)}>
+      <Button size="sm" kind="ghost" onClick={() => handleRegisterDependent(dependent)}>
         {t('registerDependent', 'Register Dependent')}
       </Button>
     ),
   }));
 
   if (isLoading) {
-    return <DataTableSkeleton size="xs" aria-label={t('dependents')} headers={headers} showHeader showToolbar />;
+    return <DataTableSkeleton aria-label={t('dependents')} headers={headers} showHeader showToolbar />;
   }
 
   if (error) {

package/src/referrals/patient-chart/referral-chart-view.component.scss

@@ -2,7 +2,7 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .widgetContainer {
   background-color: colors.$white-0;

package/src/referrals/referral-reasons/referral-reasons.component.scss

@@ -1,7 +1,7 @@
 @use '@carbon/layout';
 @use '@carbon/type';
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .modalBody {
   display: flex;

package/src/referrals/referral-tabs/referrals-tabs.component.tsx

@@ -44,7 +44,7 @@ const ReferralTabs: React.FC<ReferralTabsProps> = () => {
   return (
     <div className={styles.referralsList} data-testid="referralsList-list">
       <div className={styles.tabsContainer}>
-        <Tabs selectedIndex={activeTabIndex} onChange={handleTabChange} className={styles.tabs}>
+        <Tabs selectedIndex={activeTabIndex} onChange={handleTabChange}>
           <TabList aria-label="Referrals tabs" contained>
             <Tab className={styles.tab}>{t('fromCommunity', 'From Community')}</Tab>
             <Tab className={styles.tab}>{t('fromFacility', 'From Facility')}</Tab>

package/src/referrals/referral-tabs/referrals-tabs.scss

@@ -1,7 +1,7 @@
 @use '@carbon/layout';
 @use '@carbon/type';
 @use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .container {
   margin: 2rem 0;

package/src/referrals/referrals-actions.component.tsx

@@ -50,12 +50,12 @@ const CommunityReferralActions: React.FC<ReferralReasonData> = ({ status, referr
 
   return (
     <>
-      <Button kind="primary" size="md" style={{ 'margin-right': '10px' }} onClick={() => refearralReasonsHandleClick()}>
-        View reasons
+      <Button kind="primary" size="md" onClick={() => refearralReasonsHandleClick()}>
+        {t('viewReasons', 'View reasons')}
       </Button>
       {status === 'completed' ? null : (
         <Button kind="primary" size="md" onClick={() => handleProcessReferral()}>
-          Serve client
+          {t('serveClient', 'Serve client')}
         </Button>
       )}
     </>

package/src/shr-summary/shr-authorization-form.workspace.tsx

@@ -68,7 +68,7 @@ const SHRAuthorizationForm: React.FC<SHRAuthorizationFormProps> = ({
               <RadioButtonGroup
                 legendText={t('authMethod', 'Authorization Method')}
                 {...field}
-                invalid={form.formState.errors[field.name]?.message}
+                invalid={!!form.formState.errors[field.name]?.message}
                 className={styles.radioGroupInput}
                 invalidText={form.formState.errors[field.name]?.message}>
                 {AUTH_TYPES.map(({ label, value }, index) => (
@@ -85,7 +85,8 @@ const SHRAuthorizationForm: React.FC<SHRAuthorizationFormProps> = ({
               name="receiver"
               render={({ field }) => (
                 <TextInput
-                  invalid={form.formState.errors[field.name]?.message}
+                  id={field.name}
+                  invalid={!!form.formState.errors[field.name]?.message}
                   invalidText={form.formState.errors[field.name]?.message}
                   {...field}
                   placeholder={t('patientPhoneNUmber', 'Patient Phone number')}
@@ -103,7 +104,8 @@ const SHRAuthorizationForm: React.FC<SHRAuthorizationFormProps> = ({
               render={({ field }) => (
                 <Row className={styles.otpInputRow}>
                   <TextInput
-                    invalid={form.formState.errors[field.name]?.message}
+                    id={field.name}
+                    invalid={!!form.formState.errors[field.name]?.message}
                     invalidText={form.formState.errors[field.name]?.message}
                     {...field}
                     placeholder={
@@ -133,7 +135,7 @@ const SHRAuthorizationForm: React.FC<SHRAuthorizationFormProps> = ({
         )}
       </Stack>
       <ButtonSet className={styles.buttonSet}>
-        <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
+        <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
           {t('discard', 'Discard')}
         </Button>
         <Button className={styles.button} kind="primary" type="submit" disabled={form.formState.isSubmitting}>

package/src/shr-summary/shr-forms.scss

@@ -2,7 +2,7 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/layout';
 @use '@carbon/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .heading {
   @include type.type-style('heading-compact-01');

package/src/shr-summary/shr-summary.scss

@@ -1,7 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .headerContainer {
   display: flex;

package/src/shr-summary/tables/shr-summary-table.component.tsx

@@ -1,12 +1,11 @@
 import { Button, DataTableSkeleton, Layer, Tile } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons';
-import { useLayoutType } from '@openmrs/esm-framework';
+import { launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
 import {
   CardHeader,
   EmptyDataIllustration,
   ErrorState,
   getPatientUuidFromStore,
-  launchPatientWorkspace,
 } from '@openmrs/esm-patient-common-lib';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -34,7 +33,7 @@ const PatientSHRSummaryTable: React.FC<PatientSHRSummaryTableProps> = () => {
   }
 
   const handleInitiateAuthorization = () => {
-    launchPatientWorkspace('shr-authorization-form', {
+    launchWorkspace('shr-authorization-form', {
       workspaceTitle: 'SHR Pull Authorization Form',
       patientUuid,
       onVerified: () => {

package/src/shr-summary/tables/shr-tables.scss

@@ -1,7 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .widgetContainer {
   background-color: colors.$white-0;

package/src/shrpatient-summary/root.scss

@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .patientChartWrapper {
   display: flex;

package/src/shrpatient-summary/shr-summary.scss

@@ -1,7 +1,7 @@
 @use '@carbon/styles/scss/type';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .bodyContainer {
   margin: spacing.$spacing-03;
@@ -158,7 +158,7 @@
 }
 
 .summaryContainer {
-  background-color: $ui-background;
+  background-color: colors.$white;
   display: grid;
   grid-template-columns: max-content auto;
   padding: 1rem 0rem;

package/src/shrpatient-summary/shrpatient-summary.component.tsx

@@ -42,7 +42,7 @@ const SharedHealthRecordsSummary: React.FC<SHRSummaryProps> = ({ patientUuid })
 
   // If still loading
   if (isLoading) {
-    return <StructuredListSkeleton role="progressbar" />;
+    return <StructuredListSkeleton />;
   }
 
   // If there is an error
@@ -216,7 +216,7 @@ const SharedHealthRecordsSummary: React.FC<SHRSummaryProps> = ({ patientUuid })
           <hr />
 
           <div className={styles.summaryContainer}>
-            <Tabs className={`${styles.verticalTabs} ${layout === 'tablet' ? styles.tabletTabs : styles.desktopTabs}`}>
+            <Tabs>
               <TabList aria-label="Shared Medical Record tabs" className={styles.tablist}>
                 <Tab
                   className={`${styles.tab} ${styles.bodyLong01}`}

package/src/shrpatient-summary/visit-detail-overview.scss

@@ -1,6 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 @import './root.scss';
 
 .visitType {
@@ -26,7 +26,7 @@
 }
 
 .container {
-  background-color: $ui-background;
+  background-color: colors.$white;
   border: 1px solid $grey-2;
   padding: 1rem;
   margin: 1rem 0rem 1rem;

package/src/workspace/referral-patient-info.scss

@@ -1,7 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .patientInfo {
   display: flex;

package/src/workspace/referral.workspace.scss

@@ -1,7 +1,7 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
 @use '@carbon/layout';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '~@openmrs/esm-styleguide/src/vars' as *;
 
 .heading {
   @include type.type-style('heading-compact-01');

package/src/workspace/referrals.workspace.component.tsx

@@ -187,7 +187,7 @@ const FacilityReferralForm: React.FC<FacilityReferralProp> = ({ closeWorkspace }
         )}
         <span className={styles.sectionHeader}>Clinical Notes</span>
         <Column>
-          <TextArea rows={4} id="text-area-1" className={styles.reasonTextbox} />
+          <TextArea labelText={t('reason', 'Reason')} rows={4} id="text-area-1" className={styles.reasonTextbox} />
         </Column>
       </Stack>
 

package/translations/en.json

@@ -40,6 +40,7 @@
   "pullReferrals": "Pull Referrals",
   "pullSHRRecords": "Pull SHR Records",
   "reaction": "Reaction",
+  "reason": "Reason",
   "reasonCode": "Reason Code",
   "refer": "Refer Patient",
   "referError": "Facility Referal Error",
@@ -65,5 +66,6 @@
   "shrSummary": "SHR Summary",
   "status": "Status",
   "value": "Value",
+  "viewReasons": "View reasons",
   "vitals": "Vitals"
 }