From e2bdd21b54337ed37927247cef872e9d9c588895 Mon Sep 17 00:00:00 2001
From: "EP\\qang2" <quocanh.nguyen@episerver.com>
Date: Wed, 20 Dec 2023 13:56:43 +0700
Subject: [PATCH] Add paragraph text element block Fixes: AFORM-3558

---
 .../forms-react/src/components/FormBody.tsx   |  1 +
 .../elements/ParagraphTextElementBlock.tsx    | 66 +++++++++++++++++++
 .../src/components/elements/index.ts          |  4 +-
 .../forms-sdk/src/form-submit/formSubmit.ts   |  7 +-
 4 files changed, 74 insertions(+), 4 deletions(-)
 create mode 100644 src/@episerver/forms-react/src/components/elements/ParagraphTextElementBlock.tsx

diff --git a/src/@episerver/forms-react/src/components/FormBody.tsx b/src/@episerver/forms-react/src/components/FormBody.tsx
index cb3c5ff..4a9cdc7 100644
--- a/src/@episerver/forms-react/src/components/FormBody.tsx
+++ b/src/@episerver/forms-react/src/components/FormBody.tsx
@@ -154,6 +154,7 @@ export const FormBody = (props: FormBodyProps) => {
             if (isFormFinalized.current) {
                 formCache.remove(submissionStorageKey)
                 localFormCache.remove(submissionStorageKey)
+                formCache.remove(FormConstants.FormCurrentStep + form.key)
             }
         }).catch((e: ProblemDetail) => {
             if(e.status === 401) {
diff --git a/src/@episerver/forms-react/src/components/elements/ParagraphTextElementBlock.tsx b/src/@episerver/forms-react/src/components/elements/ParagraphTextElementBlock.tsx
new file mode 100644
index 0000000..7a8a9f5
--- /dev/null
+++ b/src/@episerver/forms-react/src/components/elements/ParagraphTextElementBlock.tsx
@@ -0,0 +1,66 @@
+import { FormCache, FormContainer, FormStorage, ParagraphText, Url } from "@episerver/forms-sdk"
+import React, { useMemo } from "react";
+import ElementWrapper from "./shared/ElementWrapper";
+import { useElement } from "../../hooks/useElement";
+import { ElementCaption, ValidationMessage } from "./shared";
+import { useForms } from "../../context/store";
+
+export interface ParagraphTextElementBlockProps {
+    element: ParagraphText
+}
+
+export const ParagraphTextElementBlock = (props: ParagraphTextElementBlockProps) => {
+    const { element } = props;
+    const { elementContext, handleChange, handleBlur } = useElement(element);
+    const { isVisible, validationResults, value, validatorClasses } = elementContext;
+    const formContext = useForms();
+    const form = formContext?.formContainer as FormContainer
+    const formKey = form.key;
+
+    const formStorage = new FormStorage(form);
+    const data = formStorage.loadFormDataFromStorage();
+
+    const doReplaceText = element.properties.disablePlaceholdersReplacement ?? true
+
+    function extractTextsWithFormat(inputString: string) {
+        const regex = /::(.*?)::/g;
+        const matches = inputString.match(regex);
+        if (matches) {
+            return matches.map(match => match.slice(2, -2));
+        } else {
+            return [];
+        }
+    }
+
+    let text = element.properties.paragraphText
+    const placeHolders = extractTextsWithFormat(element.properties.paragraphText)
+
+    if (doReplaceText) {
+        data.forEach(element => {
+            const key = element.elementKey
+            const value = element.value as string
+            const friendlyName = form.formElements.find(fe => fe.key === key)?.displayName
+            if (friendlyName && placeHolders.indexOf(friendlyName) !== -1) {
+                text = text.replace("::" + friendlyName + "::", value)
+            }
+        });
+    }
+    
+    console.log(text)
+
+    return useMemo(() => (
+        <ElementWrapper className={`FormParagraphText Form__Element--NonData ${validatorClasses}`} validationResults={validationResults} isVisible={isVisible}>
+            <ElementCaption element={element} />
+            <>
+                <div id={formKey} >
+                    <div dangerouslySetInnerHTML={{
+                        __html: text
+                    }}/>
+                </div>
+                <div id={formKey + "__OriginalText"} className="Form__Original__ParagraphText">
+
+                </div>
+            </>
+        </ElementWrapper >
+    ), [isVisible, validationResults, value]);
+}
\ No newline at end of file
diff --git a/src/@episerver/forms-react/src/components/elements/index.ts b/src/@episerver/forms-react/src/components/elements/index.ts
index 472e0d7..f9a9e0e 100644
--- a/src/@episerver/forms-react/src/components/elements/index.ts
+++ b/src/@episerver/forms-react/src/components/elements/index.ts
@@ -11,6 +11,7 @@ import { ImageChoiceElementBlock } from "./ImageChoiceElementBlock";
 import { FileUploadElementBlock } from "./FileUploadElementBlock";
 import { ResetButtonElementBlock } from "./ResetButtonElementBlock";
 import { SubmitButtonElementBlock } from "./SubmitButtonElementBlock";
+import { ParagraphTextElementBlock } from "./ParagraphTextElementBlock";
 
 export const components: Record<string, any> = {
     TextboxElementBlock,
@@ -25,5 +26,6 @@ export const components: Record<string, any> = {
     ImageChoiceElementBlock,
     FileUploadElementBlock,
     ResetButtonElementBlock,
-    SubmitButtonElementBlock
+    SubmitButtonElementBlock,
+    ParagraphTextElementBlock
 };
\ No newline at end of file
diff --git a/src/@episerver/forms-sdk/src/form-submit/formSubmit.ts b/src/@episerver/forms-sdk/src/form-submit/formSubmit.ts
index f767970..c1872dc 100644
--- a/src/@episerver/forms-sdk/src/form-submit/formSubmit.ts
+++ b/src/@episerver/forms-sdk/src/form-submit/formSubmit.ts
@@ -93,10 +93,11 @@ export class FormSubmitter {
         return new Promise<FormSubmitResult>((resolve, reject)=>{
             let formStorage = new FormStorage(this._form);
 
-            //save data to storage of browser
-            formStorage.saveFormDataToStorage(model.submissionData);
+            // Save data to storage of browser
+            let currentData = formStorage.loadFormDataFromStorage()
+            formStorage.saveFormDataToStorage(currentData.concat(model.submissionData));
     
-            //post data to API
+            // Post data to API
             let formData = new FormData();
             formData.append("formKey", model.formKey);
             formData.append("locale", model.locale);