diff --git a/src/@episerver/forms-react/src/components/FormBody.tsx b/src/@episerver/forms-react/src/components/FormBody.tsx index f08fe66..d29b81b 100644 --- a/src/@episerver/forms-react/src/components/FormBody.tsx +++ b/src/@episerver/forms-react/src/components/FormBody.tsx @@ -1,6 +1,8 @@ import React, { useEffect, useRef } from "react"; import { useForms } from "../context/store"; -import { StepHelper, FormContainer, FormSubmitter, IdentityInfo, isInArray, isNull, isNullOrEmpty, FormSubmitModel, FormSubmitResult, SubmitButton, FormCache, FormConstants, ProblemDetail, StepDependCondition, buildConfirmMessage } from "@episerver/forms-sdk"; +import { StepHelper, FormContainer, FormSubmitter, IdentityInfo, isInArray, isNull, + isNullOrEmpty, FormSubmitModel, FormSubmitResult, SubmitButton, FormCache, + FormConstants, ProblemDetail, StepDependCondition, getConfirmationData } from "@episerver/forms-sdk"; import { RenderElementInStep } from "./RenderElementInStep"; import { DispatchFunctions } from "../context/dispatchFunctions"; import { FormStepNavigation } from "./FormStepNavigation"; @@ -61,15 +63,20 @@ export const FormBody = (props: FormBodyProps) => { submissionWarning.current = !isNullOrEmpty(error); message.current = error; } + const handleConfirm = () => { - const confirmationMessage = form.properties.confirmationMessage; + const form = formContext?.formContainer ?? {} as FormContainer; + const confirmationMessage = form.properties.confirmationMessage ?? ""; let confimStatus = true; - if (!isNullOrEmpty(confirmationMessage) && form.properties.showSummarizedData) { + if (form.properties.showSummarizedData) { const data = formContext?.formSubmissions ?? [] - const confirmationMessageWithData = buildConfirmMessage(confirmationMessage, data, form) - confimStatus = confirm(confirmationMessageWithData); - } + const messageData = getConfirmationData(data, form) + const showConfirmationMessage = !(isNullOrEmpty(confirmationMessage) && isNullOrEmpty(messageData)) + if (showConfirmationMessage) { + confimStatus = confirm(confirmationMessage + "\n\n" + messageData); + } + } return confimStatus } @@ -91,7 +98,6 @@ export const FormBody = (props: FormBodyProps) => { let isLastStep = currentStepIndex === form.steps.length - 1; - //filter submissions by active elements and current step let formSubmissions = (formContext?.formSubmissions ?? []) .filter(fs => !isInArray(fs.elementKey, formContext?.dependencyInactiveElements ?? []) && stepHelper.isInCurrentStep(fs.elementKey, currentStepIndex)); diff --git a/src/@episerver/forms-sdk/src/helpers/buildConfirmationMessage.ts b/src/@episerver/forms-sdk/src/helpers/buildConfirmationMessage.ts index 3dad605..b3821ae 100644 --- a/src/@episerver/forms-sdk/src/helpers/buildConfirmationMessage.ts +++ b/src/@episerver/forms-sdk/src/helpers/buildConfirmationMessage.ts @@ -5,7 +5,8 @@ import { isNullOrEmpty } from "./utils"; export const FieldsToIgnore = [ "FormStepBlock", "SubmitButtonElementBlock", - "PredefinedHiddenElementBlock" + "PredefinedHiddenElementBlock", + "ParagraphTextElementBlock" ] export function getValueAsString(element: FormSubmission) { @@ -26,15 +27,15 @@ export function getValueAsString(element: FormSubmission) { return `${value}` } -export function buildConfirmMessage(confirmationMessage: string, data: FormSubmission[], form: FormContainer, fieldsToIgnore?: string[]): string { - const newLine = "\n" - let message = confirmationMessage + newLine; +export function getConfirmationData(data: FormSubmission[], form: FormContainer, 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) { - message += `${formElement.displayName}: ${value}${newLine}`; + message += `${formElement.displayName}: ${value}${"\n"}`; } });