dynamic-questionnaire-form 1.4.0 → 1.4.2

package/dist/esm/components/ComplianceQuestionarie/QuestionnaireForm.js

@@ -71,7 +71,7 @@ import NewTaskForm from "./NewTaskForm";
 // import MessageCenterModal from "../PortalPage/MessageCenterModal";
 import deleteImg from "../../images/delete.svg";
 import { QuestionTypes, transformDateWithoutTime } from "../../helpers/GenericHelpers";
-import { CheckPanelBox, CheckboxGroup, EmailField, FutureDatePicker, MultipleSelectField, PastDatePicker, PhoneNumberField, SSNField, SelectButtonFieldOptions, SelectField, TextField, FileDropZoneField, YesOrNo, Datepicker, checkspan2, MultiCheckboxGroup, SingleCheckBox, DisableTextField } from "common-fields";
+import { CheckPanelBox, CheckboxGroup, EmailField, FutureDatePicker, MultipleSelectField, PastDatePicker, PhoneNumberField, SSNField, SelectButtonFieldOptions, SelectField, TextField, FileDropZoneField, YesOrNo, Datepicker, checkspan2, MultiCheckboxGroup, SingleCheckBox, DisableTextField } from "common-field-package";
 import { NormaliseSSN, NormalizeNumber, normaliseZipcode, normalizePhone, normalizeTextarea, NormalizeTax, normalizeFax, normalizeAlphanumeric, NormalizeText, NormaliseFedTaxSSN, NormalizeDecimalNumber, NormalizeTime, NormalizeEIN, NormalizeRoutingNumber, normalizeNumericId, normalizeMonth } from "../../helpers/NormalizeHelpers";
 var QuestionnaireForm = function (props) {
     var _a, _b, _c, _d;
@@ -128,8 +128,19 @@ var QuestionnaireForm = function (props) {
             if (Object.keys(props.formValues).length === 0) {
                 return;
             }
-            var CombinedValues = __assign(__assign({}, props.formInitialvalues), props.reviewValues);
-            if (!previousFormValues && _(props.formInitialvalues).differenceWith(CombinedValues, _.isEqual).isEmpty()) {
+            // Filter out questionReview properties for comparison
+            var formValuesWithoutReview = _.omitBy(props.formValues, function (value, key) {
+                return key.startsWith('questionReview_') && value !== undefined;
+            });
+            var formInitialvaluesWithoutReview = _.omitBy(props.formInitialvalues, function (value, key) {
+                return key.startsWith('questionReview_') && value !== undefined;
+            });
+            var areFormValuesEqual = _.isEqual(formValuesWithoutReview, formInitialvaluesWithoutReview);
+            if (!previousFormValues && areFormValuesEqual) {
+                setPreviousFormValues(_.cloneDeep(props.formValues));
+                return;
+            }
+            if (!previousFormValues) {
                 setPreviousFormValues(_.cloneDeep(props.formValues));
                 return;
             }
@@ -186,6 +197,26 @@ var QuestionnaireForm = function (props) {
             setPreviousFormValues(_.cloneDeep(props.formValues));
         }
     }, [props.formValues]);
+    var onTextBlur = function (event, questionId, clientQuestionId, type) {
+        var _a;
+        var _b;
+        if (type === void 0) { type = ''; }
+        event.preventDefault();
+        if (props.formValues["question_" + clientQuestionId] !== undefined ||
+            null) {
+            var currentQuestion = currentQuestions.find(function (m) { return m.questionId == questionId; });
+            if (currentQuestion) {
+                // pass the event to parent component
+                // const oldAnswer = previousFormValues
+                //   ? previousFormValues["question_" + clientQuestionId]
+                //   : null;
+                props.saveQuestion((_a = {},
+                    _a[clientQuestionId] = type === 'checkbox' ? (_b = event.target) === null || _b === void 0 ? void 0 : _b.checked : props.formValues["question_" + clientQuestionId],
+                    _a));
+            }
+            setPreviousFormValues(_.cloneDeep(props.formValues));
+        }
+    };
     var historyModalViewHandler = function () {
         setHistoryModal(!historyModel);
     };
@@ -622,6 +653,7 @@ var QuestionnaireForm = function (props) {
     var addCustomQuestion = function (body) {
         props.addCustomQuestion(body);
     };
+    var isValidCategoryToAddQuestions = !!props.isValidCategoryToAddQuestions;
     var removeCustomQuestion = function () {
         props.removeCustomQuestion();
     };
@@ -663,6 +695,25 @@ var QuestionnaireForm = function (props) {
     var cancelRemoveProcess = function (question, value) {
         props.preparenextquestion(question, value, true);
     };
+    var isComplianceGroupedQuestion = function (question) { return question.complianceGroupId != null; };
+    var shouldShowSingleQuestionRemove = function (question) {
+        return !isComplianceGroupedQuestion(question) &&
+            question.complianceCategoryStatus &&
+            question.clientCustomQuestion === true;
+    };
+    var getGroupRemoveQuestion = function (question, serialNumber) {
+        if (!isComplianceGroupedQuestion(question)) {
+            return null;
+        }
+        var groupedQuestions = currentQuestions.filter(function (m) {
+            return m.complianceGroupId == question.complianceGroupId &&
+                (serialNumber === undefined || m.serialNumber == serialNumber);
+        });
+        return groupedQuestions.find(function (m) { return m.clientCustomQuestion === true; }) || null;
+    };
+    var shouldShowComplianceGroupRemove = function (question, serialNumber) {
+        return isComplianceGroupedQuestion(question) && !!getGroupRemoveQuestion(question, serialNumber);
+    };
     var renderQuestions = function () {
         var complianceGroupIds = [];
         var dependentQuestionGroupIds = [];
@@ -691,6 +742,11 @@ var QuestionnaireForm = function (props) {
                     dependentQuestionGroupIds === null || dependentQuestionGroupIds === void 0 ? void 0 : dependentQuestionGroupIds.push(question.denpendentQuestionGroupId);
                 }
             }
+            if (question.isCustomQuestion) {
+                return (React.createElement(Col, { key: question.questionId, sm: "12", className: "DynoLayout", md: 12 },
+                    React.createElement(Col, { md: "12", className: "formComponent-1" },
+                        React.createElement(NewTaskForm, { question: question, onAccept: onAccept, onFlagged: onFlagged, setNotesFrame: setNotesFrame, getGuidance: getGuidance, disableFields: props.disableFields, addCustomQuestion: addCustomQuestion, removeCustomQuestion: removeCustomQuestion, isValidCategoryToAddQuestions: isValidCategoryToAddQuestions }))));
+            }
             return (React.createElement(Col, { key: question.questionId, sm: "12", className: "DynoLayout", md: 12 },
                 question.isRepetitive == false ?
                     React.createElement(React.Fragment, null, !notesForm.includes(question === null || question === void 0 ? void 0 : question.clientQuestionId) ? (React.createElement(React.Fragment, null,
@@ -701,7 +757,7 @@ var QuestionnaireForm = function (props) {
                                 " \u00A0\u00A0\u00A0",
                                 React.createElement("span", { className: "content" }, question.reviewNotes)))) : (""))) : (React.createElement(Row, { className: "notes" },
                         React.createElement(Col, null, notesFrame(question))))) : '',
-                question.complianceGroupId ? (React.createElement(React.Fragment, null,
+                isComplianceGroupedQuestion(question) ? (React.createElement(React.Fragment, null,
                     question.isRepetitive &&
                         React.createElement(React.Fragment, null,
                             " ",
@@ -760,15 +816,18 @@ var QuestionnaireForm = function (props) {
                                         React.createElement("span", { className: "remove", onClick: function () { return removeAddedQuestion(question, true); } }, "Remove"))) : React.createElement(React.Fragment, null)),
                             React.createElement(React.Fragment, null)),
                         React.createElement(Col, { md: "2", className: "compliance" }, selectOptions(question))))),
-                question.isCustomQuestion && (React.createElement(Col, { md: "12", className: "formComponent-1" },
-                    React.createElement(NewTaskForm, { question: question, onAccept: onAccept, onFlagged: onFlagged, setNotesFrame: setNotesFrame, getGuidance: getGuidance, disableFields: props.disableFields, addCustomQuestion: addCustomQuestion, removeCustomQuestion: removeCustomQuestion }))),
                 React.createElement(React.Fragment, null)));
         });
     };
     var renderQuestionGroup = function (question) {
         var dependentQuestionGroupIds = [];
+        var removeGroupQuestion = getGroupRemoveQuestion(question);
         return React.createElement(React.Fragment, null,
             React.createElement("div", { className: "DynoColumns mb-3" },
+                shouldShowComplianceGroupRemove(question) && (removeGroupQuestion === null || removeGroupQuestion === void 0 ? void 0 : removeGroupQuestion.removeCustomQuestion) && React.createElement("div", { className: "overlay" },
+                    React.createElement("p", { className: "removeDesignation" }, "Remove This Task?"),
+                    React.createElement("button", { type: "button", className: "confirmMessage confirmMessageDelete", onClick: function () { return props.removeQuestion(removeGroupQuestion); } }, "Confirm"),
+                    React.createElement("span", { className: "CancelNaCustom", onClick: function () { return cancelRemoveProcess(removeGroupQuestion, false); } }, "Cancel")),
                 React.createElement(Row, { className: "field ".concat(question.reviewFlagged ? "fieldFlagRed" : "") },
                     React.createElement(Col, { md: "10", className: "formComponent" },
                         React.createElement(Row, { className: "mb-2" },
@@ -809,7 +868,11 @@ var QuestionnaireForm = function (props) {
                                         React.createElement(Col, { key: groupQuestion.questionId, sm: "12", className: groupQuestion.dependent ? "DynoLayout dependent-question" : "DynoLayout", md: layoutSet(groupQuestion === null || groupQuestion === void 0 ? void 0 : groupQuestion.layoutCoulmns) }, renderQuestionField(groupQuestion)),
                                         groupQuestion.layoutOffset && React.createElement(Col, { md: groupQuestion.layoutOffset }));
                                 }));
-                            })))),
+                            }))),
+                        shouldShowComplianceGroupRemove(question) && removeGroupQuestion && (React.createElement(Col, { sm: "12", className: "d-flex flex-row justify-content-end" },
+                            React.createElement("div", null,
+                                React.createElement("img", { src: deleteImg, alt: "X" }),
+                                React.createElement("span", { className: "remove", onClick: function () { return removeAddedQuestion(removeGroupQuestion, true); } }, "Remove"))))),
                     React.createElement(Col, { md: "2", className: "compliance" }, selectOptions(question, currentQuestions.filter(function (m) {
                         return m.complianceGroupId == question.complianceGroupId;
                     }))))));
@@ -824,7 +887,12 @@ var QuestionnaireForm = function (props) {
         return React.createElement(Accordion, null, findGroupSearialNumbers(question.complianceGroupId).map(function (serial) {
             var _a;
             var currentSerialQuestion = currentSerialNumberQuestion(question.complianceGroupId, serial);
+            var removeGroupQuestion = getGroupRemoveQuestion(question, serial);
             return React.createElement("div", { className: "DynoColumns mb-3" },
+                shouldShowComplianceGroupRemove(question, serial) && (removeGroupQuestion === null || removeGroupQuestion === void 0 ? void 0 : removeGroupQuestion.removeCustomQuestion) && React.createElement("div", { className: "overlay" },
+                    React.createElement("p", { className: "removeDesignation" }, "Remove This Task?"),
+                    React.createElement("button", { type: "button", className: "confirmMessage confirmMessageDelete", onClick: function () { return props.removeQuestion(removeGroupQuestion); } }, "Confirm"),
+                    React.createElement("span", { className: "CancelNaCustom", onClick: function () { return cancelRemoveProcess(removeGroupQuestion, false); } }, "Cancel")),
                 React.createElement(React.Fragment, null, !notesForm.includes(currentSerialQuestion === null || currentSerialQuestion === void 0 ? void 0 : currentSerialQuestion.clientQuestionId) ? (React.createElement(React.Fragment, null,
                     " ",
                     currentSerialQuestion.reviewNotes && ((_a = currentSerialQuestion.reviewNotes) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (React.createElement(Row, { className: "notesShowReview" },
@@ -867,7 +935,11 @@ var QuestionnaireForm = function (props) {
                                                     groupQuestion.layoutPreset && React.createElement(Col, { md: groupQuestion.layoutPreset }),
                                                     React.createElement(Col, { key: groupQuestion.questionId, sm: "12", className: groupQuestion.dependent ? "DynoLayout dependent-question" : "DynoLayout", md: layoutSet(groupQuestion === null || groupQuestion === void 0 ? void 0 : groupQuestion.layoutCoulmns) }, renderQuestionField(groupQuestion)),
                                                     groupQuestion.layoutOffset && React.createElement(Col, { md: groupQuestion.layoutOffset }));
-                                            })))))))),
+                                            }))))))),
+                        shouldShowComplianceGroupRemove(question, serial) && removeGroupQuestion && (React.createElement(Col, { sm: "12", className: "d-flex flex-row justify-content-end" },
+                            React.createElement("div", null,
+                                React.createElement("img", { src: deleteImg, alt: "X" }),
+                                React.createElement("span", { className: "remove", onClick: function () { return removeAddedQuestion(removeGroupQuestion, true); } }, "Remove"))))),
                     React.createElement(Col, { md: "2", className: "compliance" }, selectOptions(currentSerialQuestion, currentQuestions.filter(function (m) { return m.complianceGroupId == question.complianceGroupId && m.serialNumber == serial; })))));
         }));
     };
@@ -881,7 +953,17 @@ var QuestionnaireForm = function (props) {
                 .map(function (groupQuestion) {
                 return React.createElement(React.Fragment, null,
                     groupQuestion.layoutPreset && React.createElement(Col, { md: groupQuestion.layoutPreset }),
-                    React.createElement(Col, { key: groupQuestion.questionId, sm: "12", className: "DynoLayout", md: layoutSet(groupQuestion === null || groupQuestion === void 0 ? void 0 : groupQuestion.layoutCoulmns) }, renderQuestionField(groupQuestion)),
+                    React.createElement(Col, { key: groupQuestion.questionId, sm: "12", className: "DynoLayout", md: layoutSet(groupQuestion === null || groupQuestion === void 0 ? void 0 : groupQuestion.layoutCoulmns) },
+                        React.createElement("div", { className: "box" },
+                            !isComplianceGroupedQuestion(groupQuestion) && groupQuestion.removeCustomQuestion && React.createElement("div", { className: "overlay" },
+                                React.createElement("p", { className: "removeDesignation" }, "Remove This Task?"),
+                                React.createElement("button", { type: "button", className: "confirmMessage confirmMessageDelete", onClick: function () { return props.removeQuestion(groupQuestion); } }, "Confirm"),
+                                React.createElement("span", { className: "CancelNaCustom", onClick: function () { return cancelRemoveProcess(groupQuestion, false); } }, "Cancel")),
+                            renderQuestionField(groupQuestion),
+                            shouldShowSingleQuestionRemove(groupQuestion) && (React.createElement(Col, { sm: "12", className: "d-flex flex-row justify-content-end" },
+                                React.createElement("div", null,
+                                    React.createElement("img", { src: deleteImg, alt: "X" }),
+                                    React.createElement("span", { className: "remove", onClick: function () { return removeAddedQuestion(groupQuestion, true); } }, "Remove")))))),
                     groupQuestion.layoutOffset && React.createElement(Col, { md: groupQuestion.layoutOffset }));
             })),
             " ");
@@ -891,64 +973,93 @@ var QuestionnaireForm = function (props) {
         if ((question === null || question === void 0 ? void 0 : question.questionType) === QuestionTypes.Text)
             return (React.createElement(React.Fragment, null,
                 React.createElement("div", { className: "d-flex dynoFields csTextField cdFormGroup" },
-                    React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, isRequired: question.isRequired, normalize: NormalizeText }))));
+                    React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, textBlur: function (event) {
+                            return onTextBlur(event, question.questionId, question.clientQuestionId);
+                        }, isRequired: question.isRequired, normalize: NormalizeText }))));
         if (question.questionType === QuestionTypes.MultiSelectionDropdown)
             return (React.createElement("div", { className: " d-flex dynoFields cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: MultipleSelectField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, HelpText: question.helpText, isRequired: question.isRequired, options: question.options.sort(function (a, b) {
+                React.createElement(Field, { disabled: props.disableFields, component: MultipleSelectField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, HelpText: question.helpText, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    }, isRequired: question.isRequired, options: question.options.sort(function (a, b) {
                         return (a === null || a === void 0 ? void 0 : a.text) > (b === null || b === void 0 ? void 0 : b.text) ? 1 : -1;
                     }) })));
         if (question.questionType === QuestionTypes.SingleSelectionBoxSelection)
             return (React.createElement("div", { className: "d-flex dynoFields cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: SelectButtonFieldOptions, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, HelpText: question.helpText, isRequired: question.isRequired, options: question.options.sort(function (a, b) { return (a === null || a === void 0 ? void 0 : a.value) - (b === null || b === void 0 ? void 0 : b.value); }) })));
+                React.createElement(Field, { disabled: props.disableFields, component: SelectButtonFieldOptions, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, HelpText: question.helpText, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    }, isRequired: question.isRequired, options: question.options.sort(function (a, b) { return (a === null || a === void 0 ? void 0 : a.value) - (b === null || b === void 0 ? void 0 : b.value); }) })));
         if ((question === null || question === void 0 ? void 0 : question.questionType) === QuestionTypes.FedTaxSSN)
             return (React.createElement("div", { className: "d-flex dynoFields csTextField cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: SSNField, name: "question_" + ((_a = question.clientQuestionId) === null || _a === void 0 ? void 0 : _a.toString()), label: question.questionText, helpText: question.helpText, isRequired: question.isRequired, normalize: NormaliseFedTaxSSN })));
+                React.createElement(Field, { disabled: props.disableFields, component: SSNField, name: "question_" + ((_a = question.clientQuestionId) === null || _a === void 0 ? void 0 : _a.toString()), label: question.questionText, helpText: question.helpText, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    }, isRequired: question.isRequired, normalize: NormaliseFedTaxSSN })));
         if (question.questionType === QuestionTypes.Checkbox ||
             question.questionType === QuestionTypes.PercentageValidationCheckbox)
             return (React.createElement("div", { className: "d-flex dynoFields" },
                 React.createElement("div", null,
-                    React.createElement(Field, { disabled: props.disableFields, name: "question_" + ((_b = question.clientQuestionId) === null || _b === void 0 ? void 0 : _b.toString()), label: question.questionText, helpText: question.helpText, component: SingleCheckBox, 
+                    React.createElement(Field, { disabled: props.disableFields, name: "question_" + ((_b = question.clientQuestionId) === null || _b === void 0 ? void 0 : _b.toString()), label: question.questionText, helpText: question.helpText, textBlur: function (event) {
+                            return onTextBlur(event, question.questionId, question.clientQuestionId);
+                        }, component: SingleCheckBox, 
                         // options={question.options.sort(
                         //   (a: any, b: any) => a?.value - b?.value
                         // )}              
                         isRequired: question.isRequired }))));
         if ((question === null || question === void 0 ? void 0 : question.questionType) === QuestionTypes.TimePicker)
             return (React.createElement("div", { className: "d-flex dynoFields csTextField cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: SSNField, name: "question_" + ((_c = question.clientQuestionId) === null || _c === void 0 ? void 0 : _c.toString()), label: question.questionText, helpText: question.helpText, 
+                React.createElement(Field, { disabled: props.disableFields, component: SSNField, name: "question_" + ((_c = question.clientQuestionId) === null || _c === void 0 ? void 0 : _c.toString()), label: question.questionText, helpText: question.helpText, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    }, 
                     // validate={[required]}
                     isRequired: question.isRequired, normalize: NormalizeTime, placeholder: "hh:mm" })));
         if (question.questionType === QuestionTypes.DecimalNumber)
             return (React.createElement("div", { className: "cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + ((_d = question.clientQuestionId) === null || _d === void 0 ? void 0 : _d.toString()), label: question === null || question === void 0 ? void 0 : question.questionText, helpText: question.helpText, isRequired: question.isRequired, normalize: NormalizeDecimalNumber })));
+                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + ((_d = question.clientQuestionId) === null || _d === void 0 ? void 0 : _d.toString()), label: question === null || question === void 0 ? void 0 : question.questionText, helpText: question.helpText, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    }, isRequired: question.isRequired, normalize: NormalizeDecimalNumber })));
         if (question.questionType === QuestionTypes.YesOrNo)
             return (React.createElement("div", { className: " d-flex dynoFields cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: YesOrNo, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, HelpText: question.helpText, isRequired: question.isRequired, options: question.options.sort(function (a, b) { return (a === null || a === void 0 ? void 0 : a.optionSequence) - (b === null || b === void 0 ? void 0 : b.optionSequence); }) })));
+                React.createElement(Field, { disabled: props.disableFields, component: YesOrNo, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, HelpText: question.helpText, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    }, isRequired: question.isRequired, options: question.options.sort(function (a, b) { return (a === null || a === void 0 ? void 0 : a.optionSequence) - (b === null || b === void 0 ? void 0 : b.optionSequence); }) })));
         if (question.questionType === QuestionTypes.MultiSelectionCheckBox)
             return (React.createElement("div", { className: " d-flex dynoFields cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: CheckboxGroup, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, HelpText: question.helpText, isRequired: question.isRequired, options: question.options.sort(function (a, b) { return (a === null || a === void 0 ? void 0 : a.value) - (b === null || b === void 0 ? void 0 : b.value); }) })));
+                React.createElement(Field, { disabled: props.disableFields, component: CheckboxGroup, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, HelpText: question.helpText, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    }, isRequired: question.isRequired, options: question.options.sort(function (a, b) { return (a === null || a === void 0 ? void 0 : a.value) - (b === null || b === void 0 ? void 0 : b.value); }) })));
         if (question.questionType === QuestionTypes.MultiCheckBox)
             return (React.createElement("div", { className: "d-flex dynoFields cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: MultiCheckboxGroup, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, HelpText: question.helpText, options: question.options.sort(function (a, b) { return (a === null || a === void 0 ? void 0 : a.optionSequence) && (b === null || b === void 0 ? void 0 : b.optionSequence) ?
+                React.createElement(Field, { disabled: props.disableFields, component: MultiCheckboxGroup, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, HelpText: question.helpText, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    }, options: question.options.sort(function (a, b) { return (a === null || a === void 0 ? void 0 : a.optionSequence) && (b === null || b === void 0 ? void 0 : b.optionSequence) ?
                         ((a === null || a === void 0 ? void 0 : a.optionSequence) - (b === null || b === void 0 ? void 0 : b.optionSequence)) :
                         ((a === null || a === void 0 ? void 0 : a.value) - (b === null || b === void 0 ? void 0 : b.value)); }), isRequired: question.isRequired, className: 'multiCheckBox' })));
         if (question.questionType === QuestionTypes.SingleSelectionCheckBox)
             return (React.createElement("div", { className: " d-flex dynoFields csCheckSpanWrap cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: checkspan2, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, HelpText: question.helpText, isRequired: question.isRequired, options: question.options.sort(function (a, b) { return (a === null || a === void 0 ? void 0 : a.value) - (b === null || b === void 0 ? void 0 : b.value); }) })));
+                React.createElement(Field, { disabled: props.disableFields, component: checkspan2, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, HelpText: question.helpText, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    }, isRequired: question.isRequired, options: question.options.sort(function (a, b) { return (a === null || a === void 0 ? void 0 : a.value) - (b === null || b === void 0 ? void 0 : b.value); }) })));
         if (question.questionType === QuestionTypes.AddressSelectionCheckBox)
             return (React.createElement("div", { className: "d-flex dynoFields csCheckSpanWrap" },
-                React.createElement(Field, { disabled: props.disableFields, component: checkspan2, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, HelpText: question.helpText, options: question.options.sort(function (a, b) { return (a === null || a === void 0 ? void 0 : a.value) - (b === null || b === void 0 ? void 0 : b.value); }), isRequired: question.isRequired })));
+                React.createElement(Field, { disabled: props.disableFields, component: checkspan2, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, HelpText: question.helpText, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    }, options: question.options.sort(function (a, b) { return (a === null || a === void 0 ? void 0 : a.value) - (b === null || b === void 0 ? void 0 : b.value); }), isRequired: question.isRequired })));
         if (question.questionType === QuestionTypes.MultiSelectionBoxSelection)
             return (React.createElement("div", { className: "d-flex dynoFields cdFormGroup" },
                 React.createElement("div", { className: "multiGroupBox ".concat(question.questionType) },
-                    React.createElement(Field, { disabled: props.disableFields, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, component: CheckPanelBox, options: question.options.sort(function (a, b) { return (a === null || a === void 0 ? void 0 : a.value) - (b === null || b === void 0 ? void 0 : b.value); }), display: true, isRequired: question.isRequired }))));
+                    React.createElement(Field, { disabled: props.disableFields, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, textBlur: function (event) {
+                            return onTextBlur(event, question.questionId, question.clientQuestionId);
+                        }, component: CheckPanelBox, options: question.options.sort(function (a, b) { return (a === null || a === void 0 ? void 0 : a.value) - (b === null || b === void 0 ? void 0 : b.value); }), display: true, isRequired: question.isRequired }))));
         if (question.questionType === QuestionTypes.Percentage
             || question.questionType === QuestionTypes.Percentage25A
-            || question.questionType === QuestionTypes.Percentage25B
-            || question.questionType === QuestionTypes.SalesPercentage
-            || question.questionType === QuestionTypes.SalesBusinessPercentage
-            || question.questionType === QuestionTypes.BusinessPercentage)
+            || question.questionType === QuestionTypes.Percentage25B ||
+            question.questionType === QuestionTypes.SalesPercentage ||
+            question.questionType === QuestionTypes.SalesBusinessPercentage ||
+            question.questionType === QuestionTypes.BusinessPercentage ||
+            question.questionType === QuestionTypes.InternationalSalesPercentage)
             return (React.createElement("div", { className: "cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + ((_e = question.clientQuestionId) === null || _e === void 0 ? void 0 : _e.toString()), label: question === null || question === void 0 ? void 0 : question.questionText, helpText: question.helpText, isRequired: question.isRequired })));
+                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + ((_e = question.clientQuestionId) === null || _e === void 0 ? void 0 : _e.toString()), label: question === null || question === void 0 ? void 0 : question.questionText, helpText: question.helpText, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    }, isRequired: question.isRequired })));
         if (question.questionType === QuestionTypes.FileUpload)
             return (React.createElement("div", { className: "d-flex dynoFields cdFormGroup" },
                 React.createElement(Field, { question: question, onAccept: onAccept, onFlagged: onFlagged, setNotesFrame: setNotesFrame, getGuidance: getGuidance, disabled: (props.disableFields || !statusChange(question)), component: FileDropZoneField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, type: "file", checkedFormats: "image/jpeg, image/png, image/gif, image/bmp, .pdf, .doc, .docx, .xls,.xlsx, .rtf, .ppt, .pptx,.tiff,.rtf,.csv", clientQuestionId: question.clientQuestionId, displayAccepedFormats: false, allowMultiple: false, aiOverride: question.answers && ((_f = question === null || question === void 0 ? void 0 : question.answers[0]) === null || _f === void 0 ? void 0 : _f.aiOverride), maxSize: 5000000, isRequired: question.isRequired, noClick: question.answers && ((_g = question.answers) === null || _g === void 0 ? void 0 : _g.length) !== 0 ? true : false, noDrag: question.answers && ((_h = question.answers) === null || _h === void 0 ? void 0 : _h.length) !== 0 ? true : false, onClickFile: props.onClickFile })));
@@ -957,7 +1068,9 @@ var QuestionnaireForm = function (props) {
                 React.createElement(Field, { question: question, onAccept: onAccept, onFlagged: onFlagged, setNotesFrame: setNotesFrame, getGuidance: getGuidance, disabled: (props.disableFields || !statusChange(question)), component: FileDropZoneField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, type: "file", acceptedFormats: ".pdf", clientQuestionId: question.clientQuestionId, displayAccepedFormats: false, allowMultiple: false, aiOverride: question.answers && ((_j = question === null || question === void 0 ? void 0 : question.answers[0]) === null || _j === void 0 ? void 0 : _j.aiOverride), maxSize: 5000000, isRequired: question.isRequired, noClick: question.answers && ((_k = question.answers) === null || _k === void 0 ? void 0 : _k.length) !== 0 ? true : false, noDrag: question.answers && ((_l = question.answers) === null || _l === void 0 ? void 0 : _l.length) !== 0 ? true : false, onClickFile: props.onClickFile })));
         if ((question === null || question === void 0 ? void 0 : question.questionType) === QuestionTypes.TextArea)
             return (React.createElement("div", { className: " d-flex dynoFields csTextField cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, type: "textarea", normalize: NormalizeText, isRequired: question.isRequired })));
+                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    }, type: "textarea", normalize: NormalizeText, isRequired: question.isRequired })));
         if (question.questionType === QuestionTypes.DatePicker)
             return (React.createElement("div", { className: "dynoFields cdFormGroup" },
                 React.createElement(FormGroup, { row: true, className: "mb-5 w-100 form-group" },
@@ -966,16 +1079,24 @@ var QuestionnaireForm = function (props) {
                         " ",
                         question.isRequired && React.createElement("span", { className: "input-required" }, "*")),
                     React.createElement(Col, { sm: 12 },
-                        React.createElement(Field, { disabled: props.disableFields, name: "question_" + question.clientQuestionId.toString(), component: Datepicker, valuedata: null })))));
+                        React.createElement(Field, { disabled: props.disableFields, name: "question_" + question.clientQuestionId.toString(), component: Datepicker, textBlur: function (event) {
+                                return onTextBlur(event, question.questionId, question.clientQuestionId);
+                            }, valuedata: null })))));
         if (question.questionType === QuestionTypes.PhoneNumber)
             return (React.createElement("div", { className: "dynoFields cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: PhoneNumberField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, normalize: normalizePhone, isRequired: question.isRequired })));
+                React.createElement(Field, { disabled: props.disableFields, component: PhoneNumberField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    }, normalize: normalizePhone, isRequired: question.isRequired })));
         if (question.questionType === QuestionTypes.Email)
             return (React.createElement("div", { className: "dynoFields cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: EmailField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, isRequired: question.isRequired })));
+                React.createElement(Field, { disabled: props.disableFields, component: EmailField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    }, isRequired: question.isRequired })));
         if (question.questionType === QuestionTypes.SingleSelectionDropDown)
             return (React.createElement("div", { className: "dynoFields cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: SelectField, name: "question_" + question.clientQuestionId.toString(), label: question === null || question === void 0 ? void 0 : question.questionText, helpText: question.helpText, values: question.options.sort(function (a, b) { return (a === null || a === void 0 ? void 0 : a.optionSequence) - (b === null || b === void 0 ? void 0 : b.optionSequence); }), isRequired: question.isRequired })));
+                React.createElement(Field, { disabled: props.disableFields, component: SelectField, name: "question_" + question.clientQuestionId.toString(), label: question === null || question === void 0 ? void 0 : question.questionText, helpText: question.helpText, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    }, values: question.options.sort(function (a, b) { return (a === null || a === void 0 ? void 0 : a.optionSequence) - (b === null || b === void 0 ? void 0 : b.optionSequence); }), isRequired: question.isRequired })));
         if (question.questionType === QuestionTypes.PastDatePicker)
             return (React.createElement("div", { className: "dynoFields cdFormGroup" },
                 React.createElement(FormGroup, { row: true, className: "mb-5 w-100 form-group" },
@@ -984,7 +1105,9 @@ var QuestionnaireForm = function (props) {
                         " ",
                         question.isRequired && React.createElement("span", { className: "input-required" }, "*")),
                     React.createElement(Col, { sm: 12 },
-                        React.createElement(Field, { disabled: props.disableFields, name: "question_" + question.clientQuestionId.toString(), component: PastDatePicker, valuedata: null, maxDate: new Date(), showYearDropdown: true, placeholderText: "MM/DD/YYYY", autoComplete: "off" })))));
+                        React.createElement(Field, { disabled: props.disableFields, name: "question_" + question.clientQuestionId.toString(), component: PastDatePicker, valuedata: null, maxDate: new Date(), showYearDropdown: true, placeholderText: "MM/DD/YYYY", autoComplete: "off", textBlur: function (event) {
+                                return onTextBlur(event, question.questionId, question.clientQuestionId);
+                            } })))));
         if (question.questionType === QuestionTypes.FutureDatePicker)
             return (React.createElement("div", { className: "dynoFields cdFormGroup" },
                 React.createElement(FormGroup, { row: true, className: "mb-5 w-100 form-group" },
@@ -993,34 +1116,54 @@ var QuestionnaireForm = function (props) {
                         " ",
                         question.isRequired && React.createElement("span", { className: "input-required" }, "*")),
                     React.createElement(Col, { sm: 12 },
-                        React.createElement(Field, { disabled: props.disableFields, name: "question_" + question.clientQuestionId.toString(), component: FutureDatePicker, valuedata: null, minDate: new Date(), showYearDropdown: true, autoComplete: "off" })))));
+                        React.createElement(Field, { disabled: props.disableFields, name: "question_" + question.clientQuestionId.toString(), component: FutureDatePicker, valuedata: null, minDate: new Date(), textBlur: function (event) {
+                                return onTextBlur(event, question.questionId, question.clientQuestionId);
+                            }, showYearDropdown: true, autoComplete: "off" })))));
         if ((question === null || question === void 0 ? void 0 : question.questionType) === QuestionTypes.SSN)
             return (React.createElement("div", { className: "d-flex dynoFields csTextField cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: SSNField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, isRequired: question.isRequired, normalize: NormaliseSSN })));
+                React.createElement(Field, { disabled: props.disableFields, component: SSNField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, isRequired: question.isRequired, normalize: NormaliseSSN, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    } })));
         if ((question === null || question === void 0 ? void 0 : question.questionType) === QuestionTypes.EIN)
             return (React.createElement("div", { className: "d-flex dynoFields csTextField cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: SSNField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, isRequired: question.isRequired, normalize: NormalizeEIN })));
+                React.createElement(Field, { disabled: props.disableFields, component: SSNField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, isRequired: question.isRequired, normalize: NormalizeEIN, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    } })));
         if ((question === null || question === void 0 ? void 0 : question.questionType) === QuestionTypes.ROUTINGNUMBER)
             return (React.createElement("div", { className: "d-flex dynoFields csTextField cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, isRequired: question.isRequired, normalize: NormalizeRoutingNumber })));
+                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, isRequired: question.isRequired, normalize: NormalizeRoutingNumber, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    } })));
         if ((question === null || question === void 0 ? void 0 : question.questionType) === QuestionTypes.Number)
             return (React.createElement("div", { className: "d-flex dynoFields csTextField cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, normalize: NormalizeNumber, isRequired: question.isRequired })));
+                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, normalize: NormalizeNumber, isRequired: question.isRequired, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    } })));
         if ((question === null || question === void 0 ? void 0 : question.questionType) === QuestionTypes.NumericId)
             return (React.createElement("div", { className: "d-flex dynoFields csTextField cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, normalize: normalizeNumericId, isRequired: question.isRequired })));
+                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, normalize: normalizeNumericId, isRequired: question.isRequired, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    } })));
         if ((question === null || question === void 0 ? void 0 : question.questionType) === QuestionTypes.Currency)
             return (React.createElement("div", { className: "d-flex dynoFields csTextField cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, normalize: NormalizeNumber })));
+                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, normalize: NormalizeNumber, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    } })));
         if ((question === null || question === void 0 ? void 0 : question.questionType) === QuestionTypes.ZipCode)
             return (React.createElement("div", { className: "d-flex dynoFields csTextField cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, normalize: normaliseZipcode, isRequired: question.isRequired })));
+                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, normalize: normaliseZipcode, isRequired: question.isRequired, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    } })));
         if (question.questionType === QuestionTypes.TaxId)
             return (React.createElement("div", { className: "cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, isRequired: question.isRequired, normalize: NormalizeTax })));
+                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, isRequired: question.isRequired, normalize: NormalizeTax, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    } })));
         if (question.questionType === QuestionTypes.AlphaNumeric)
             return (React.createElement("div", { className: "cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, isRequired: question.isRequired, normalize: normalizeAlphanumeric })));
+                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, isRequired: question.isRequired, normalize: normalizeAlphanumeric, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    } })));
         if (question.questionType === QuestionTypes.LabelText)
             return (React.createElement("div", { className: "cdFormGroup" },
                 React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, isRequired: question.isRequired, labelText: true })));
@@ -1029,10 +1172,14 @@ var QuestionnaireForm = function (props) {
                 React.createElement(Field, { disabled: true, component: DisableTextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, isRequired: question.isRequired, labelText: true })));
         if (question.questionType === QuestionTypes.NumberOfMonths)
             return (React.createElement("div", { className: "cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: DisableTextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, isRequired: question.isRequired, normalize: normalizeMonth, labelText: true })));
+                React.createElement(Field, { disabled: props.disableFields, component: DisableTextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, isRequired: question.isRequired, normalize: normalizeMonth, labelText: true, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    } })));
         if (question.questionType === QuestionTypes.FaxId)
             return (React.createElement("div", { className: "cdFormGroup" },
-                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, isRequired: question.isRequired, normalize: normalizeFax })));
+                React.createElement(Field, { disabled: props.disableFields, component: TextField, name: "question_" + question.clientQuestionId.toString(), label: question.questionText, helpText: question.helpText, isRequired: question.isRequired, normalize: normalizeFax, textBlur: function (event) {
+                        return onTextBlur(event, question.questionId, question.clientQuestionId);
+                    } })));
         return null;
     };
     var setIsOpen = function (index) {