Microweb step wrapper customizations

helsenorge · Dec 10, 2024 · 80029b0 · 80029b0
1 parent b971069
commit 80029b0
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 28 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,3 +1,11 @@
+## 16.1.0-beta06
+
+---
+
+- Added custom refero props for Microweb step and callback
+- Added formbutton section which is show spesific for Microweb step
+- Dom Purify is moved from dev deps to peer deps
+
 ## 16.0.6
 
 ---

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@helsenorge/refero",
-  "version": "16.0.6",
+  "version": "16.1.0-beta06",
   "description": "Refero is a library that uses a fhir r4 schema and creates a interactive form using helsenorge packages.",
   "keywords": [
     "react",
@@ -64,7 +64,8 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-redux": "^9.0.0",
-    "redux": "^5.0.0"
+    "redux": "^5.0.0",
+    "dompurify": "^3.1.6"
   },
   "devDependencies": {
     "@helsenorge/autosuggest": "^33.0.0",
@@ -128,7 +129,6 @@
     "@helsenorge/core-utils": "^33.0.0",
     "classnames": "^2.3.2",
     "date-fns": "^3.6.0",
-    "dompurify": "^3.1.6",
     "fhirpath": "3.15.1",
     "marked": "^14.0.0",
     "react-collapse": "^5.1.1",

diff --git a/src/components/formButtons/formButtons.tsx b/src/components/formButtons/formButtons.tsx
@@ -2,7 +2,7 @@ import { FormEvent, KeyboardEvent, MouseEvent } from 'react';
 
 import { QuestionnaireResponse } from 'fhir/r4';
 
-import { ButtonType, buttonOrderNormalView, buttonOrderStepView } from '../../types/formTypes/formButton';
+import { ButtonOrder, ButtonType, buttonOrderNormalView, buttonOrderStepView } from '../../types/formTypes/formButton';
 
 import { CancelFormButton } from './CancelFormButton';
 import { PauseFormButton } from './PauseFormButton';
@@ -23,6 +23,8 @@ interface FormButtonsInterface {
   isStepView?: boolean;
   isAuthorized?: boolean;
   loginButton?: JSX.Element;
+  overrideButtonOrder?: ButtonOrder;
+  showSaveButtonAsBackButton?: boolean;
 }
 
 const FormButtons = ({
@@ -37,8 +39,13 @@ const FormButtons = ({
   onPauseButtonClicked,
   isAuthorized,
   loginButton,
+  overrideButtonOrder,
+  showSaveButtonAsBackButton,
 }: FormButtonsInterface): JSX.Element | null => {
-  const buttonOrder = isStepView ? buttonOrderStepView : buttonOrderNormalView;
+  let buttonOrder = isStepView ? buttonOrderStepView : buttonOrderNormalView;
+  if (overrideButtonOrder) {
+    buttonOrder = overrideButtonOrder;
+  }
 
   return (
     <div className={`${styles.formButtonsWrapper} page_refero__buttons`}>
@@ -52,7 +59,7 @@ const FormButtons = ({
                 return (
                   <PauseFormButton
                     key={buttonType}
-                    isStepView={isStepView}
+                    isStepView={isStepView || showSaveButtonAsBackButton}
                     pauseButtonText={pauseButtonText}
                     onPauseButtonClicked={onPauseButtonClicked}
                     pauseButtonDisabled={pauseButtonDisabled}

diff --git a/src/components/renderForm.tsx b/src/components/renderForm.tsx
@@ -10,6 +10,7 @@ import Loader from '@helsenorge/designsystem-react/components/Loader';
 import FormButtons from './formButtons/formButtons';
 import { ValidationSummary } from './validation/validation-summary';
 import { Resources } from '@/util/resources';
+import { buttonOrderMicrowebStep } from '@/types/formTypes/formButton';
 
 interface RenderFormProps {
   isAuthorized: boolean;
@@ -66,32 +67,64 @@ const RenderForm = ({
       nextStep();
     }
   };
+
+  const cancelButtonClicked = (): void => {
+    if (referoProps.customNavigationCallBack) {
+      referoProps.customNavigationCallBack('cancel', undefined);
+    }
+  };
+
+  const backButtonClicked = (): void => {
+    if (referoProps.customNavigationCallBack) {
+      referoProps.customNavigationCallBack('back', undefined);
+    }
+  };
+
   return (
     <>
       <form onSubmit={methods.handleSubmit(onSubmitReactHookForm, onErrorReactHookForm)}>
         {displayValidationSummaryOnTop && <ValidationSummary resources={resources} />}
         {children}
         {!displayValidationSummaryOnTop && <ValidationSummary resources={resources} />}
       </form>
-      <FormButtons
-        isStepView={isStepView}
-        submitButtonText={displayNextButton && resources.nextStep ? resources.nextStep : resources.formSend}
-        cancelButtonText={resources.formCancel}
-        pauseButtonText={displayPreviousButton && isStepView ? resources.previousStep || 'Lagre' : resources.formSave}
-        submitButtonDisabled={referoProps.submitButtonDisabled}
-        pauseButtonDisabled={referoProps.saveButtonDisabled}
-        onSubmitButtonClicked={
-          displayNextButton
-            ? methods.handleSubmit(handleNextStep, onErrorReactHookForm)
-            : methods.handleSubmit(onSubmitReactHookForm, onErrorReactHookForm)
-        }
-        onCancelButtonClicked={(): void => {
-          referoProps.onCancel && referoProps.onCancel();
-        }}
-        onPauseButtonClicked={isStepView ? displayPauseButtonInStepView : displayPauseButtonInNormalView}
-        isAuthorized={isAuthorized}
-        loginButton={referoProps.loginButton}
-      />
+
+      {referoProps.customProps?.isMicroweb && (
+        <FormButtons
+          isStepView={false}
+          submitButtonText={'Neste'}
+          cancelButtonText={'Avbryt'}
+          pauseButtonText={'Tilbake'}
+          onSubmitButtonClicked={methods.handleSubmit(onSubmitReactHookForm, onErrorReactHookForm)} // hmm. how to callback here? forwardButtonClicked
+          onCancelButtonClicked={cancelButtonClicked}
+          onPauseButtonClicked={backButtonClicked}
+          isAuthorized={isAuthorized}
+          loginButton={referoProps.loginButton}
+          overrideButtonOrder={buttonOrderMicrowebStep}
+          showSaveButtonAsBackButton={true}
+        />
+      )}
+
+      {referoProps.customProps?.isMicroweb === undefined && (
+        <FormButtons
+          isStepView={isStepView}
+          submitButtonText={displayNextButton && resources.nextStep ? resources.nextStep : resources.formSend}
+          cancelButtonText={resources.formCancel}
+          pauseButtonText={displayPreviousButton && isStepView ? resources.previousStep || 'Lagre' : resources.formSave}
+          submitButtonDisabled={referoProps.submitButtonDisabled}
+          pauseButtonDisabled={referoProps.saveButtonDisabled}
+          onSubmitButtonClicked={
+            displayNextButton
+              ? methods.handleSubmit(handleNextStep, onErrorReactHookForm)
+              : methods.handleSubmit(onSubmitReactHookForm, onErrorReactHookForm)
+          }
+          onCancelButtonClicked={(): void => {
+            referoProps.onCancel && referoProps.onCancel();
+          }}
+          onPauseButtonClicked={isStepView ? displayPauseButtonInStepView : displayPauseButtonInNormalView}
+          isAuthorized={isAuthorized}
+          loginButton={referoProps.loginButton}
+        />
+      )}
     </>
   );
 };

diff --git a/src/types/formTypes/formButton.ts b/src/types/formTypes/formButton.ts
@@ -20,3 +20,9 @@ export const buttonOrderNormalView: ButtonOrder = {
   2: ButtonType.pauseButton,
   3: ButtonType.cancelButton,
 };
+
+export const buttonOrderMicrowebStep: ButtonOrder = {
+  1: ButtonType.pauseButton,
+  2: ButtonType.submitButton,
+  3: ButtonType.cancelButton,
+};
diff --git a/src/types/referoProps.ts b/src/types/referoProps.ts
@@ -83,4 +83,8 @@ export interface ReferoProps {
     },
     any
   >;
+  customNavigationCallBack?: (navDirection: string, navContent?: Record<string, string> | undefined) => void;
+  customProps?: {
+    [key: string]: any;
+  };
 }