From 9f292fcb867bc97d74020a2f32dcda6777e8be12 Mon Sep 17 00:00:00 2001
From: "EP\\qang2" <quocanh.nguyen@episerver.com>
Date: Fri, 26 Jan 2024 13:51:46 +0700
Subject: [PATCH] Refactor ConfirmMessage function

---
 .../forms-react/src/components/FormBody.tsx   | 21 +++++++++++--------
 .../src/helpers/buildConfirmationMessage.ts   | 11 ++++------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/@episerver/forms-react/src/components/FormBody.tsx b/src/@episerver/forms-react/src/components/FormBody.tsx
index 52c766e..aa65773 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";
@@ -27,7 +29,7 @@ export const FormBody = (props: FormBodyProps) => {
     const statusDisplay = useRef<string>("hide");
 
     const formCache = new FormCache();
-    const localFormCache = new FormCache(window.localStorage);
+    const localFormCache = new FormCache(window.sessionStorage);
     const currentStepIndex = formContext?.currentStepIndex ?? 0;
 
     //TODO: these variables should be get from api or sdk
@@ -61,18 +63,20 @@ export const FormBody = (props: FormBodyProps) => {
         submissionWarning.current = !isNullOrEmpty(error);
         message.current = error;
     }
+    
     const handleConfirm = () => {
         const form = formContext?.formContainer ?? {} as FormContainer;
-        const confirmationMessage = form.properties.confirmationMessage;
+        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)
-            if (!isNullOrEmpty(confirmationMessage)) {
-                confimStatus = confirm(confirmationMessageWithData);
+            const messageData = getConfirmationData(data, form)
+            const showConfirmationMessage = !(isNullOrEmpty(confirmationMessage) && isNullOrEmpty(messageData))
+            if (showConfirmationMessage) {
+                confimStatus = confirm(confirmationMessage + "\n\n" + messageData);
             }
-        }
+        } 
 
         return confimStatus
     }
@@ -94,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 19ea21e..b3821ae 100644
--- a/src/@episerver/forms-sdk/src/helpers/buildConfirmationMessage.ts
+++ b/src/@episerver/forms-sdk/src/helpers/buildConfirmationMessage.ts
@@ -27,20 +27,17 @@ export function getValueAsString(element: FormSubmission) {
     return `${value}`
 }
 
-export function buildConfirmMessage(confirmationMessage: string, data: FormSubmission[], form: FormContainer, fieldsToIgnore?: string[]): string {
+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) {
+        if (formElement && !isNullOrEmpty(value) && _fieldsToIgnore.indexOf(formElement.contentType) === -1) {
             message += `${formElement.displayName}: ${value}${"\n"}`;
         }
     });
 
-    if (isNullOrEmpty(message) && isNullOrEmpty(confirmationMessage)) {
-        return message
-    }
-
-    return confirmationMessage + "\n" + message
+    return message
 }
\ No newline at end of file