Merge branch 'develop' into bugfix/AFORM-3801-Form-multi-steps-workin…

…g-incorrectly

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]);
+}

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
 };

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);