Refero props for microweb step support

Author: einett2039121

CHANGES.md

@@ -1,3 +1,10 @@
+## 16.1.0-beta01
+
+---
+
+- Small Microweb Step support by adding optional params
+- Override button order by an optional param
+
 ## 16.0.2
 
 ---

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@helsenorge/refero",
-  "version": "16.0.2",
+  "version": "16.1.0-beta01",
   "description": "Refero is a library that uses a fhir r4 schema and creates a interactive form using helsenorge packages.",
   "keywords": [
     "react",

package.json

@@ -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,14 @@ 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 +60,7 @@ const FormButtons = ({
                 return (
                   <PauseFormButton
                     key={buttonType}
-                    isStepView={isStepView}
+                    isStepView={isStepView || showSaveButtonAsBackButton}
                     pauseButtonText={pauseButtonText}
                     onPauseButtonClicked={onPauseButtonClicked}
                     pauseButtonDisabled={pauseButtonDisabled}

src/components/formButtons/formButtons.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,68 @@ const RenderForm = ({
       nextStep();
     }
   };
+
+  const cancelButtonClicked = (): void => {
+    // eslint-disable-next-line no-console
+    console.log('Refero props: On cancel button clicked');
+    if (referoProps.customNavigationCallBack) {
+      referoProps.customNavigationCallBack('cancel', undefined);
+    }
+  };
+
+  const backButtonClicked = (): void => {
+    // eslint-disable-next-line no-console
+    console.log('On back button clicked');
+    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}
+        />
+      )}
     </>
   );
 };

src/components/renderForm.tsx

@@ -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,
+};

src/types/formTypes/formButton.ts

@@ -83,4 +83,8 @@ export interface ReferoProps {
     },
     any
   >;
+  customNavigationCallBack?: (navDirection: string, navContent?: Record<string, string> | undefined) => void;
+  customProps?: {
+    [key: string]: any;
+  };
 }