Merge pull request #99 from episerver/feature/AFORM-3956-ignore-hidde…

…n-element-in-confirmation-message

Ignore hidden element and element in later step in confirmation message when submit

src/@episerver/forms-react/src/components/FormBody.tsx

@@ -71,7 +71,7 @@ export const FormBody = (props: FormBodyProps) => {
 
         if (form.properties.showSummarizedData) {
             const data = formContext?.formSubmissions ?? []
-            const messageData = getConfirmationData(data, form)
+            const messageData = getConfirmationData(data, form, currentStepIndex, inactiveElements)
             const showConfirmationMessage = !(isNullOrEmpty(confirmationMessage) && isNullOrEmpty(messageData))
             if (showConfirmationMessage) {
                 confimStatus = confirm(confirmationMessage + "\n\n" + messageData);

src/@episerver/forms-react/src/components/elements/ParagraphTextElementBlock.tsx

@@ -1,4 +1,4 @@
-import { FormContainer, ParagraphText, getValueAsString } from "@episerver/forms-sdk"
+import { FormContainer, ParagraphText, getStringValue } from "@episerver/forms-sdk"
 import React, { useMemo } from "react";
 import ElementWrapper from "./shared/ElementWrapper";
 import { useElement } from "../../hooks/useElement";
@@ -42,7 +42,7 @@ export const ParagraphTextElementBlock = (props: ParagraphTextElementBlockProps)
                 const friendlyName = form.formElements.find(fe => fe.key === element.elementKey)?.displayName
 
                 if (friendlyName && placeHolders.indexOf(friendlyName) !== -1) {
-                    replacedText = replacedText.replaceAll(`${indicator}${friendlyName}${indicator}`, getValueAsString(element))
+                    replacedText = replacedText.replaceAll(`${indicator}${friendlyName}${indicator}`, getStringValue(element))
                 }
             });
         }

src/@episerver/forms-sdk/src/helpers/buildConfirmationMessage.ts

@@ -1,19 +1,25 @@
+import { FormDependConditions } from "../form-depend-conditions";
+import { ConditionProperties, FormElementBase, SatisfiedActionType } from "../models";
 import { FormContainer } from "../models/FormContainer";
 import { FormSubmission } from "../models/states/FormSubmission";
-import { isNullOrEmpty } from "./utils";
+import { equals, isNull, isNullOrEmpty } from "./utils";
 
 export const FieldsToIgnore = [
     "FormStepBlock",
     "SubmitButtonElementBlock",
     "PredefinedHiddenElementBlock",
     "ParagraphTextElementBlock"
 ]
-
-export function getValueAsString(element: FormSubmission) {
+/**
+ * Get element value as string
+ * @param element The form element submission
+ * @returns 
+ */
+export function getStringValue(element: FormSubmission) {
     let value = element.value ?? ""
     if (Array.isArray(value) && value.length > 0 &&
         value[0] !== null && typeof value[0] === "object") {
-        let fileList = value
+        const fileList = value
         let fileNames = ""
         for (let i = 0; i < fileList.length; i++) {
             const file = fileList[i].file
@@ -24,20 +30,49 @@ export function getValueAsString(element: FormSubmission) {
         }
         return fileNames
     }
-    return `${value}`
+    return value
 }
-
-export function getConfirmationData(data: FormSubmission[], form: FormContainer, fieldsToIgnore?: string[]): string {
+/**
+ * Get element with elementKey that belong to a step that has index <= currentStepIndex
+ * @param elementKey The form element key
+ * @param form The form container
+ * @param currentStepIndex The current form step index
+ * @returns
+ */
+export function getValidStepsElement(elementKey: string, form: FormContainer, currentStepIndex: number): FormElementBase | null {
+    let formElement = null
+    for (let i = 0; i <= currentStepIndex; i++) {
+        for (let element of form.steps[i].elements) {
+            if (element.key == elementKey) {
+                formElement = element
+                break
+            }
+        }
+    }
+    return formElement
+}
+/**
+ * Get confirmation summary data from the start to the current step
+ * @param data The current form data
+ * @param form The form container
+ * @param currentStepIndex The current form step index
+ * @param inactiveElements The key of element that are inactive (hidden)
+ * @param fieldsToIgnore Fields that you dont want to show up in the message
+ * @returns
+ */
+export function getConfirmationData(data: FormSubmission[], form: FormContainer, currentStepIndex: number, inactiveElements: string[], fieldsToIgnore?: string[]): string {
     let message = "";
-    let _fieldsToIgnore = fieldsToIgnore ?? FieldsToIgnore;
-
-    data.forEach(element => {
-        let formElement = form.formElements.find(fe => fe.key === element.elementKey)
-        let value = getValueAsString(element)
-        if (formElement && !isNullOrEmpty(value) && _fieldsToIgnore.indexOf(formElement.contentType) === -1) {
+    const ignoreFields = fieldsToIgnore ?? FieldsToIgnore;
+    data.forEach(elementData => {
+        const formElement = getValidStepsElement(elementData.elementKey, form, currentStepIndex)
+        const value = getStringValue(elementData)
+        if (formElement
+            && ignoreFields.indexOf(formElement.contentType) === -1
+            && inactiveElements.indexOf(formElement.key) === -1
+            && !isNullOrEmpty(value)
+        ) {
             message += `${formElement.displayName}: ${value}${"\n"}`;
         }
     });
-
     return message
 }