@kenyaemr/esm-patient-registration-app 8.1.2-pre.220 → 8.1.2-pre.236

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":"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}],"modals":[{"name":"cancel-patient-edit-modal","component":"cancelPatientEditModal"},{"name":"delete-identifier-confirmation-modal","component":"deleteIdentifierConfirmationModal"},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal"},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal"},{"component":"hieConfirmationModal","name":"hie-confirmation-modal"}],"version":"8.1.2-pre.220"}
+{"$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":"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}],"modals":[{"name":"cancel-patient-edit-modal","component":"cancelPatientEditModal"},{"name":"delete-identifier-confirmation-modal","component":"deleteIdentifierConfirmationModal"},{"component":"emptyClientRegistryModal","name":"empty-client-registry-modal"},{"component":"confirmClientRegistryModal","name":"confirm-client-registry-modal"},{"component":"hieConfirmationModal","name":"hie-confirmation-modal"}],"version":"8.1.2-pre.236"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-patient-registration-app",
-  "version": "8.1.2-pre.220",
+  "version": "8.1.2-pre.236",
   "description": "Patient registration microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-patient-registration-app.js",
   "main": "src/index.ts",
@@ -9,16 +9,16 @@
   "homepage": "https://github.com/openmrs/openmrs-esm-patient-management#readme",
   "scripts": {
     "start": "openmrs develop",
-    "serve": "webpack serve --mode=development",
     "debug": "npm run serve",
-    "build": "webpack --mode production",
-    "analyze": "webpack --mode=production --env.analyze=true",
-    "lint": "cross-env eslint src --ext ts,tsx",
+    "build": "rspack --mode=production",
+    "analyze": "rspack --mode=production --env analyze=true",
+    "lint": "eslint src --ext ts,tsx",
+    "serve": "rspack serve --mode=development",
     "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests --color",
     "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/**/*.extension.tsx' 'src/**/*modal.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' 'src/patient-registration/validation/patient-registration-validation.ts' --config ../../tools/i18next-parser.config.js"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.resource.tsx' 'src/**/*.extension.tsx' 'src/**/*modal.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"
@@ -51,8 +51,5 @@
     "react-router-dom": "6.x",
     "swr": "2.x"
   },
-  "devDependencies": {
-    "webpack": "^5.74.0"
-  },
   "stableVersion": "8.0.2"
 }

package/rspack.config.js

@@ -0,0 +1 @@
+module.exports = require('openmrs/default-rspack-config');

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

@@ -13,6 +13,9 @@ import {
   usePatient,
   usePatientPhoto,
   useFeatureFlag,
+  launchWorkspace,
+  closeWorkspace,
+  navigate,
 } from '@openmrs/esm-framework';
 import { getValidationSchema } from './validation/patient-registration-validation';
 import { type CapturePhotoProps, type FormValues } from './patient-registration.types';
@@ -65,6 +68,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
   const [enableClientRegistry, setEnableClientRegistry] = useState(
     inEditMode ? initialFormValues.identifiers['nationalUniquePatientIdentifier']?.identifierValue : false,
   );
+  const [formSavedSuccessfully, setFormSavedSuccessfully] = useState(false);
 
   useEffect(() => {
     if (initialMPIFormValues) {
@@ -107,6 +111,43 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
         abortController,
       );
 
+      helpers.resetForm({ values });
+
+      setFormSavedSuccessfully((prev) => {
+        setTimeout(() => {
+          const patientUuid = values.patientUuid;
+          const patientChartUrl = config.links?.submitButton
+            ? interpolateUrl(config.links.submitButton, { patientUuid })
+            : `\${openmrsSpaBase}/patient/${patientUuid}/chart`;
+
+          if (inEditMode) {
+            navigate({ to: patientChartUrl });
+          } else {
+            launchWorkspace('start-visit-workspace-form', {
+              patientUuid: patientUuid,
+              workspaceTitle: t('checkInPatientWorkspaceTitle', 'Check in patient'),
+              closeWorkspace: () => {
+                closeWorkspace('start-visit-workspace-form', {
+                  onWorkspaceClose: () => {
+                    navigate({ to: patientChartUrl });
+                  },
+                  ignoreChanges: true,
+                });
+              },
+              closeWorkspaceWithSavedChanges: () => {
+                closeWorkspace('start-visit-workspace-form', {
+                  onWorkspaceClose: () => {
+                    navigate({ to: patientChartUrl });
+                  },
+                  ignoreChanges: true,
+                });
+              },
+            });
+          }
+        }, 100);
+        return true;
+      });
+
       showSnackbar({
         subtitle: inEditMode
           ? t('updatePatientSuccessSnackbarSubtitle', "The patient's information has been successfully updated")
@@ -120,17 +161,49 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
         kind: 'success',
         isLowContrast: true,
       });
-
-      const afterUrl = new URLSearchParams(search).get('afterUrl');
-      const redirectUrl = interpolateUrl(afterUrl || config.links.submitButton, { patientUuid: values.patientUuid });
-
-      setTarget(redirectUrl);
     } catch (error) {
       const fieldErrors = Object.entries(error.responseBody?.error?.fieldErrors || {}) as Array<
         [string, Array<{ code: string; message: string }>]
       >;
 
       if (savePatientTransactionManager.current.patientSaved) {
+        helpers.resetForm({ values });
+        setFormSavedSuccessfully((prev) => {
+          setTimeout(() => {
+            const patientUuid = values.patientUuid;
+            const patientChartUrl = config.links?.submitButton
+              ? interpolateUrl(config.links.submitButton, { patientUuid })
+              : `\${openmrsSpaBase}/patient/${patientUuid}/chart`;
+
+            if (inEditMode) {
+              navigate({ to: patientChartUrl });
+            } else {
+              launchWorkspace('start-visit-workspace-form', {
+                patientUuid: patientUuid,
+                workspaceTitle: t('checkInPatientWorkspaceTitle', 'Check in patient'),
+                closeWorkspace: () => {
+                  closeWorkspace('start-visit-workspace-form', {
+                    onWorkspaceClose: () => {
+                      navigate({ to: patientChartUrl });
+                    },
+                    ignoreChanges: true,
+                  });
+                },
+                closeWorkspaceWithSavedChanges: () => {
+                  closeWorkspace('start-visit-workspace-form', {
+                    onWorkspaceClose: () => {
+                      navigate({ to: patientChartUrl });
+                    },
+                    ignoreChanges: true,
+                  });
+                },
+              });
+            }
+          }, 100);
+
+          return true;
+        });
+
         fieldErrors.forEach(([field, error]) => {
           const errorMessage = error.map((e) => e.message).join(', ');
           showSnackbar({
@@ -140,10 +213,6 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
             timeoutInMs: 8000,
           });
         });
-        const afterUrl = new URLSearchParams(search).get('afterUrl');
-        const redirectUrl = interpolateUrl(afterUrl || config.links.submitButton, { patientUuid: values.patientUuid });
-
-        setTarget(redirectUrl);
       }
 
       if (error.responseBody?.error?.globalErrors) {
@@ -182,6 +251,7 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
       </ul>
     );
   };
+
   const enableRegistryButton = healthInformationExchangeFlag ? false : !enableClientRegistry;
 
   const displayErrors = (errors) => {
@@ -201,92 +271,94 @@ export const PatientRegistration: React.FC<PatientRegistrationProps> = ({ savePa
       initialValues={initialFormValues}
       validationSchema={validationSchema}
       onSubmit={onFormSubmit}>
-      {(props) => (
-        <Form className={styles.form}>
-          <BeforeSavePrompt when={Object.keys(props.touched).length > 0} redirect={target} />
-          <div className={styles.formContainer}>
-            <div>
-              <div className={styles.stickyColumn}>
-                <h4>
-                  {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>
-                {sections.map((section) => (
-                  <div className={classNames(styles.space05, styles.touchTarget)} key={section.name}>
-                    <Link className={styles.linkName} onClick={() => scrollIntoView(section.id)}>
-                      <XAxis size={16} /> {t(`${section.id}Section`, section.name)}
-                    </Link>
-                  </div>
-                ))}
-                {!healthInformationExchangeFlag && (
+      {(props) => {
+        const touchedKeys = Object.keys(props.touched);
+        const whenCondition = touchedKeys.length > 0 && !formSavedSuccessfully;
+
+        return (
+          <Form className={styles.form}>
+            <BeforeSavePrompt when={whenCondition} redirect={target} />
+            <div className={styles.formContainer}>
+              <div>
+                <div className={styles.stickyColumn}>
+                  <h4>
+                    {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>
+                  {sections.map((section) => (
+                    <div className={classNames(styles.space05, styles.touchTarget)} key={section.name}>
+                      <Link className={styles.linkName} onClick={() => scrollIntoView(section.id)}>
+                        <XAxis size={16} /> {t(`${section.id}Section`, section.name)}
+                      </Link>
+                    </div>
+                  ))}
+                  {!healthInformationExchangeFlag && (
+                    <Button
+                      renderIcon={ShareKnowledge}
+                      disabled={!currentSession || !identifierTypes}
+                      onClick={() => {
+                        setEnableClientRegistry(true);
+                        props.isValid
+                          ? handleSavePatientToClientRegistry(props.values, props.setValues, inEditMode)
+                          : props.validateForm().then((errors) => displayErrors(errors));
+                      }}
+                      className={styles.submitButton}>
+                      {t('postToRegistry', 'Post to registry')}
+                    </Button>
+                  )}
                   <Button
-                    renderIcon={ShareKnowledge}
-                    disabled={!currentSession || !identifierTypes}
-                    onClick={() => {
-                      setEnableClientRegistry(true);
-                      props.isValid
-                        ? handleSavePatientToClientRegistry(props.values, props.setValues, inEditMode)
-                        : props.validateForm().then((errors) => displayErrors(errors));
-                    }}
-                    className={styles.submitButton}>
-                    {t('postToRegistry', 'Post to registry')}
+                    className={styles.submitButton}
+                    type="submit"
+                    onClick={() => props.validateForm().then((errors) => displayErrors(errors))}
+                    disabled={!currentSession || !identifierTypes || props.isSubmitting || enableRegistryButton}>
+                    {props.isSubmitting ? (
+                      <InlineLoading
+                        className={styles.spinner}
+                        description={`${t('submitting', 'Submitting')} ...`}
+                        iconDescription="submitting"
+                      />
+                    ) : inEditMode ? (
+                      t('updatePatient', 'Update patient')
+                    ) : (
+                      t('registerPatient', 'Register patient')
+                    )}
                   </Button>
-                )}
-                <Button
-                  className={styles.submitButton}
-                  type="submit"
-                  onClick={() => props.validateForm().then((errors) => displayErrors(errors))}
-                  // Current session and identifiers are required for patient registration.
-                  // If currentSession or identifierTypes are not available, then the
-                  // user should be blocked to register the patient.
-                  disabled={!currentSession || !identifierTypes || props.isSubmitting || enableRegistryButton}>
-                  {props.isSubmitting ? (
-                    <InlineLoading
-                      className={styles.spinner}
-                      description={`${t('submitting', 'Submitting')} ...`}
-                      iconDescription="submitting"
+                  <Button className={styles.cancelButton} kind="tertiary" onClick={cancelRegistration}>
+                    {t('cancel', 'Cancel')}
+                  </Button>
+                </div>
+              </div>
+              <div className={styles.infoGrid}>
+                <PatientRegistrationContext.Provider
+                  value={{
+                    identifierTypes: identifierTypes,
+                    validationSchema,
+                    values: props.values,
+                    inEditMode,
+                    setFieldValue: props.setFieldValue,
+                    setFieldTouched: props.setFieldTouched,
+                    setCapturePhotoProps,
+                    currentPhoto: photo?.imageSrc,
+                    isOffline,
+                    initialFormValues: props.initialValues,
+                    setInitialFormValues,
+                  }}>
+                  {sections.map((section, index) => (
+                    <SectionWrapper
+                      key={`registration-section-${section.id}`}
+                      sectionDefinition={section}
+                      index={index}
                     />
-                  ) : inEditMode ? (
-                    t('updatePatient', 'Update patient')
-                  ) : (
-                    t('registerPatient', 'Register patient')
-                  )}
-                </Button>
-                <Button className={styles.cancelButton} kind="tertiary" onClick={cancelRegistration}>
-                  {t('cancel', 'Cancel')}
-                </Button>
+                  ))}
+                </PatientRegistrationContext.Provider>
               </div>
             </div>
-            <div className={styles.infoGrid}>
-              <PatientRegistrationContext.Provider
-                value={{
-                  identifierTypes: identifierTypes,
-                  validationSchema,
-                  values: props.values,
-                  inEditMode,
-                  setFieldValue: props.setFieldValue,
-                  setFieldTouched: props.setFieldTouched,
-                  setCapturePhotoProps,
-                  currentPhoto: photo?.imageSrc,
-                  isOffline,
-                  initialFormValues: props.initialValues,
-                  setInitialFormValues,
-                }}>
-                {sections.map((section, index) => (
-                  <SectionWrapper
-                    key={`registration-section-${section.id}`}
-                    sectionDefinition={section}
-                    index={index}
-                  />
-                ))}
-              </PatientRegistrationContext.Provider>
-            </div>
-          </div>
-        </Form>
-      )}
+          </Form>
+        );
+      }}
     </Formik>
   );
 };

package/src/root.component.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import useSWRImmutable from 'swr/immutable';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { BrowserRouter, Route, Routes, useLocation } from 'react-router-dom';
 import { Grid, Row } from '@carbon/react';
-import { ExtensionSlot, useConnectivity, useSession } from '@openmrs/esm-framework';
+import { ExtensionSlot, useConnectivity, useSession, WorkspaceContainer } from '@openmrs/esm-framework';
 import {
   ResourcesContext,
   fetchAddressTemplate,
@@ -13,6 +13,7 @@ import {
 import { FormManager } from './patient-registration/form-manager';
 import { PatientRegistration } from './patient-registration/patient-registration.component';
 import styles from './root.scss';
+import { WorkspaceWrapper } from './util';
 
 export default function Root() {
   const isOnline = useConnectivity();
@@ -55,6 +56,7 @@ export default function Root() {
                 element={<PatientRegistration savePatientForm={savePatientForm} isOffline={!isOnline} />}
               />
             </Routes>
+            <WorkspaceWrapper />
           </BrowserRouter>
         </ResourcesContext.Provider>
       </Grid>

package/src/util/index.tsx

@@ -0,0 +1,12 @@
+import React, { useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { WorkspaceContainer } from '@openmrs/esm-framework';
+
+export const WorkspaceWrapper = () => {
+  const location = useLocation();
+  const contextKey = useMemo(() => {
+    const path = location.pathname.replace(/^\/|\/$/g, '');
+    return path || 'patient-registration';
+  }, [location.pathname]);
+  return <WorkspaceContainer key={contextKey} contextKey={contextKey} overlay />;
+};

package/translations/am.json

@@ -6,11 +6,11 @@
   "autoGeneratedPlaceholderText": "በራስ-ሰር የመነጨ",
   "birthCertificate": "የትውልድ የምስክር ወረቀት",
   "birthdayNotInTheFuture": "የልደት ቀን ወደፊት ሊሆን አይችልም",
-  "birthdayNotOver140YearsAgo": "የልደት ቀን ከ140 ዓመታት በፊት ሊሆን አይችልም",
   "birthdayRequired": "የልደት ቀን ያስፈልጋል",
   "birthFieldLabelText": "የትውልድ",
   "cancel": "ይቅር",
   "causeOfDeathInputLabel": "የሞት መንስኤ",
+  "checkInPatientWorkspaceTitle": "Check in patient",
   "clientRegistryEmpty": "ታካሚ ፍጠር እና አስገባ",
   "clientRegistryEmptys": "ታካሚ ፍጠር",
   "clientRegistryError": "የደንበኛ መዝገብን በሚያገኙበት ጊዜ ስህተት ተከስቷል",
@@ -33,17 +33,11 @@
   "dateOfBirth": "የትውልድ ቀን",
   "dateOfBirthLabelText": "የትውልድ ቀን",
   "deathCauseRequired": "የሞት መንስኤ ያስፈልጋል",
-  "deathDateInFuture": "የሞት ቀን ወደፊት ሊሆን አይችልም",
   "deathDateInputLabel": "የሞት ቀን",
-  "deathDateRequired": "የሞት ቀን ያስፈልጋል",
   "deathdayInvalidDate": "የሞት ቀን እና ሰዓት ከልደት ቀን በፊት ሊሆን አይችልም",
   "deathdayIsRequired": "ታካሚው እንደሞተ ምልክት ከተደረገበት የሞት ቀን ያስፈልጋል",
   "deathdayNotInTheFuture": "የሞት ቀን ወደፊት ሊሆን አይችልም",
   "deathSection": "የሞት መረጃ",
-  "deathTimeFormatInvalid": "የሰዓት ቅርጸት ትክክል አይደለም",
-  "deathTimeFormatRequired": "የሰዓት ቅርጸት ያስፈልጋል",
-  "deathTimeInvalid": "ሰዓት ከቅርጸት 'hh:mm' ጋር አይዛመድም",
-  "deathTimeRequired": "የሞት ሰዓት ያስፈልጋል",
   "deleteIdentifierModalHeading": "መለያ አስወግድ?",
   "deleteIdentifierModalText": " እሴቱ ነው ",
   "deleteIdentifierTooltip": "ሰርዝ",
@@ -100,7 +94,6 @@
   "no": "አይ",
   "nonCodedCauseOfDeath": "ያልተመዘገበ የሞት መንስኤ",
   "nonCodedCauseOfDeathRequired": "የሞት መንስኤ ያስፈልጋል",
-  "nonsensicalYears": "የተገመቱ ዓመታት ከ140 በላይ ሊሆኑ አይችሉም",
   "numberInNameDubious": "በስም ውስጥ ያለው ቁጥር አጠራጣሪ ነው",
   "nupi": "NUPI",
   "obsFieldUnknownDatatype": "ለኦቢኤስ መስክ '{{fieldDefinitionId}}' ጽንሰ-ሀሳብ ያልታወቀ የውሂብ አይነት '{{datatypeName}}' አለው",

package/translations/en.json

@@ -6,11 +6,11 @@
   "autoGeneratedPlaceholderText": "Auto-generated",
   "birthCertificate": "Birth Certificate",
   "birthdayNotInTheFuture": "Birthday cannot be in future",
-  "birthdayNotOver140YearsAgo": "Birthday cannot be more than 140 years ago",
   "birthdayRequired": "Birthday is required",
   "birthFieldLabelText": "Birth",
   "cancel": "Cancel",
   "causeOfDeathInputLabel": "Cause of death",
+  "checkInPatientWorkspaceTitle": "Check in patient",
   "clientRegistryEmpty": "Create & Post Patient",
   "clientRegistryEmptys": "Create Patient",
   "clientRegistryError": "Error occurred while reaching the client registry",
@@ -33,17 +33,11 @@
   "dateOfBirth": "Date of birth",
   "dateOfBirthLabelText": "Date of birth",
   "deathCauseRequired": "Cause of death is required",
-  "deathDateInFuture": "Death date cannot be in future",
   "deathDateInputLabel": "Date of death",
-  "deathDateRequired": "Death date is required",
   "deathdayInvalidDate": "Death date and time cannot be before the birthday",
   "deathdayIsRequired": "Death date is required when the patient is marked as deceased.",
   "deathdayNotInTheFuture": "",
   "deathSection": "Death Info",
-  "deathTimeFormatInvalid": "Time format is invalid",
-  "deathTimeFormatRequired": "Time format is required",
-  "deathTimeInvalid": "Time doesn't match the format 'hh:mm'",
-  "deathTimeRequired": "Death time is required",
   "deleteIdentifierModalHeading": "Remove identifier?",
   "deleteIdentifierModalText": " has a value of ",
   "deleteIdentifierTooltip": "Delete",
@@ -100,7 +94,6 @@
   "no": "No",
   "nonCodedCauseOfDeath": "Non-coded cause of death",
   "nonCodedCauseOfDeathRequired": "Cause of death is required",
-  "nonsensicalYears": "Estimated years cannot be more than 140",
   "numberInNameDubious": "Number in name is dubious",
   "nupi": "NUPI",
   "obsFieldUnknownDatatype": "Concept for obs field '{{fieldDefinitionId}}' has unknown datatype '{{datatypeName}}'",