diff --git a/src/@episerver/forms-react/src/components/FormBody.tsx b/src/@episerver/forms-react/src/components/FormBody.tsx index edeff82..96b7423 100644 --- a/src/@episerver/forms-react/src/components/FormBody.tsx +++ b/src/@episerver/forms-react/src/components/FormBody.tsx @@ -1,6 +1,6 @@ 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 } from "@episerver/forms-sdk"; +import { StepHelper, FormContainer, FormSubmitter, IdentityInfo, isInArray, isNull, isNullOrEmpty, FormSubmitModel, FormSubmitResult, SubmitButton, FormCache, FormConstants, ProblemDetail, StepDependCondition, FormSubmission, FormStorage } from "@episerver/forms-sdk"; import { RenderElementInStep } from "./RenderElementInStep"; import { DispatchFunctions } from "../context/dispatchFunctions"; import { FormStepNavigation } from "./FormStepNavigation"; @@ -63,6 +63,37 @@ export const FormBody = (props: FormBodyProps) => { message.current = error; } + const buildConfirmMessage = (confirmationMessage: string, data: FormSubmission[], form: FormContainer): string => { + const fieldsToIgnore = ["FormStepBlock"] + const newLine = "\n" + let message = confirmationMessage + newLine; + + data.forEach(element => { + let formElement = form.formElements.find(fe => fe.key === element.elementKey) + + if (formElement && fieldsToIgnore.indexOf(formElement.contentType) === -1){ + message += `${formElement.displayName}: ${element.value}${newLine}`; + } + }); + + return message + } + + const handleConfirm = () => { + const form = formContext?.formContainer ?? {} as FormContainer; + const confirmationMessage = form.properties.confirmationMessage; + let confimStatus = true; + + if (!isNullOrEmpty(confirmationMessage) && form.properties.showSummarizedData) { + const formStorage = new FormStorage(form); + const data = formStorage.loadFormDataFromStorage(); + const confirmationMessageWithData = buildConfirmMessage(confirmationMessage, data, form) + confimStatus = confirm(confirmationMessageWithData); + } + + return confimStatus + } + const handleSubmit = (e: any) => { e.preventDefault(); @@ -77,6 +108,10 @@ export const FormBody = (props: FormBodyProps) => { //when submitting by SubmitButton, isProgressiveSubmit default is true isProgressiveSubmit.current = true; } + + 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)); @@ -92,7 +127,13 @@ export const FormBody = (props: FormBodyProps) => { return; } - let isLastStep = currentStepIndex === form.steps.length - 1; + // Confirm if user want to submit the form + if (submitButton?.properties?.finalizeForm || isLastStep) { + if (!handleConfirm()) { + return + } + } + let model: FormSubmitModel = { formKey: form.key, locale: form.locale, diff --git a/src/@episerver/forms-sdk/src/form-submit/formSubmit.ts b/src/@episerver/forms-sdk/src/form-submit/formSubmit.ts index 88d1d06..8cd0f33 100644 --- a/src/@episerver/forms-sdk/src/form-submit/formSubmit.ts +++ b/src/@episerver/forms-sdk/src/form-submit/formSubmit.ts @@ -80,7 +80,7 @@ export class FormSubmitter { readonly _form: FormContainer readonly _baseUrl: string - constructor(form: FormContainer, baseUrl: string){ + constructor(form: FormContainer, baseUrl: string) { this._form = form; this._baseUrl = baseUrl; } @@ -92,13 +92,13 @@ export class FormSubmitter { */ combineData(dataFromStorage: FormSubmission[], submissionData: FormSubmission[]): FormSubmission[] { const mapFromArray = new Map(); - + submissionData.forEach(element => { mapFromArray.set(element.elementKey, element); }); - + const combinedData = [...submissionData, ...dataFromStorage.filter(element => !mapFromArray.has(element.elementKey))]; - + return combinedData; } @@ -107,13 +107,7 @@ export class FormSubmitter { * @param formSubmission the array of form submission to post */ doSubmit(model: FormSubmitModel): Promise { - return new Promise((resolve, reject)=>{ - let formStorage = new FormStorage(this._form); - - // Save data to storage of browser - let currentData = formStorage.loadFormDataFromStorage() - let dataCombined = this.combineData(currentData,model.submissionData) - formStorage.saveFormDataToStorage(dataCombined); + return new Promise((resolve, reject) => { // Post data to API let formData = new FormData(); formData.append("formKey", model.formKey); @@ -128,7 +122,7 @@ export class FormSubmitter { let ovalue = data.value; let key = `${FormConstants.FormFieldPrefix}${data.elementKey}`; - if(isNull(ovalue)) { + if (isNull(ovalue)) { return; } @@ -150,12 +144,19 @@ export class FormSubmitter { fileNames += files[idx].name + "|"; // charactor | cannot be used in filename and then is safe for splitting later } formData.append(key, fileNames); + data.value = fileNames } else { formData.append(key, data.value); } }); + // Save data to session storage + let formStorage = new FormStorage(this._form); + let currentData = formStorage.loadFormDataFromStorage() + let dataCombined = this.combineData(currentData, model.submissionData) + formStorage.saveFormDataToStorage(dataCombined); + //init a request and call ajax let requestInit: RequestInit = { method: "POST", @@ -168,9 +169,9 @@ export class FormSubmitter { fetch(`${this._baseUrl}${ApiConstant.apiEndpoint}`, requestInit) .then(async (response: Response) => { let json = await response.json(); - if(response.ok){ + if (response.ok) { let result = json as FormSubmitResult; - if(result.success && model.isFinalized){ + if (result.success && model.isFinalized) { //clear cache of form submission formStorage.removeFormDataInStorage(); } @@ -191,7 +192,7 @@ export class FormSubmitter { * @param formSubmission the array of form submission to post * @returns An array of validation result */ - doValidate(formSubmissions: FormSubmission[]): FormValidationResult[]{ + doValidate(formSubmissions: FormSubmission[]): FormValidationResult[] { return this._form.formElements .filter(e => formSubmissions.some(fs => equals(fs.elementKey, e.key))) .map(e => {