@capillarytech/creatives-library 7.17.201 → 7.17.202

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.201",
+  "version": "7.17.202",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/FormBuilder/index.js

@@ -98,7 +98,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       customPopoverVisible: false,
       isDrawerVisible: false,
       translationLang: 'en',
-      showLiquidValidation: false,
       liquidErrorMessage: {
         STANDARD_ERROR_MSG: [],
         LIQUID_ERROR_MSG: [],
@@ -494,7 +493,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     const type = (this.props.location && this.props.location.query.type) ? this.props.location.query.type : 'full';
     const currentModule = (this.props.location && this.props.location.query.module) ? this.props.location.query.module : 'default';
     let errorData = _.cloneDeep(this.state.errorData);
-    const stateFormData = _.cloneDeep(this.state.formData);
     if (channel && channel.toUpperCase() === SMS) {
       for (let count = 0; count < this.state.tabCount; count += 1) {
         if (_.isEmpty(errorData[count])) {
@@ -961,7 +959,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         } else if(index === 'template-version' && data !== '') {
           errorData[index] = false;
         }
-
+        isLiquidValid = isValid; // Existing validations support for liquid enabled orgs
         // Check error for the versions
         if (!isNaN(index) || index === 'base') {
           if (errorData[index] === undefined) {
@@ -1002,7 +1000,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   // Adds a bypass for cases where content is initially empty in the creation flow.
                   if(this.liquidFlow && !this.props.isEdit){
                     errorString = "";
-                    isValid = true;
                     isLiquidValid = true;
                   }
                 }
@@ -1013,7 +1010,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             if (this.liquidFlow) {
               this.setState(
                 (prevState) => ({
-                  showLiquidValidation: true,
                   liquidErrorMessage: {
                     ...prevState.liquidErrorMessage,
                     STANDARD_ERROR_MSG: [errorString],
@@ -1036,15 +1032,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
       });
     }
+
+    const isTemplateValid = this.liquidFlow ? isLiquidValid : isValid;
     //Updating the state with the error data
     this.setState((prevState) => ({
-      isFormValid: isValid,
-      showLiquidValidation: prevState.liquidErrorMessage?.LIQUID_ERROR_MSG?.length > 0 ? true : !isLiquidValid,
+      isFormValid: isTemplateValid,
       liquidErrorMessage: {
         //Do not update the LIQUID_ERROR_MSG validation error message
         ...prevState.liquidErrorMessage,
         //update Standard error message based on the updated content
-        STANDARD_ERROR_MSG: isValid ? [] : prevState.liquidErrorMessage?.STANDARD_ERROR_MSG,
+        STANDARD_ERROR_MSG: isTemplateValid ? [] : prevState.liquidErrorMessage?.STANDARD_ERROR_MSG,
       },
       errorData,
     }), () => {
@@ -1054,8 +1051,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       }
     });
     
-    this.props.onFormValidityChange(isValid, errorData);
-    return isValid;
+    this.props.onFormValidityChange(isTemplateValid, errorData);
+    return isTemplateValid;
   }
 
   indexOfEnd(targetString, string) {
@@ -1083,9 +1080,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       */
         const handleResult = (result) => {
           const {formatMessage} = this.props.intl;
+          // Checks for errors in the result and displays them if any are found.
           if (result?.errors?.length > 0) {
             this.setState((prevState) => ({
-              showLiquidValidation: true,
               liquidErrorMessage: {
                 ...prevState.liquidErrorMessage,
                 LIQUID_ERROR_MSG: result?.errors?.map(error => error?.message) ?? [formatMessage(messages.somethingWentWrong)],
@@ -1096,8 +1093,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             this.props.stopValidation();
             return;
           }
-          else if (result?.data?.length > 0) {
-            const extractedLiquidTags = extractNames(result?.data);
+          // Extracts the supported liquid tags from the given content and do the necessary checks.
+          else {
+            const extractedLiquidTags = extractNames(result?.data || []);
             // Extracts the supported liquid tags from the given content.
             const supportedLiquidTags = checkSupport(
               result,
@@ -1111,7 +1109,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             ) {
               this.setState(
                 (prevState) => ({
-                  showLiquidValidation: true,
                   liquidErrorMessage: {
                     ...prevState.liquidErrorMessage,
                     LIQUID_ERROR_MSG: [formatMessage(messages.unsupportedTagsValidationError, {
@@ -3425,7 +3422,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 <CapColumn
                   style={val.colStyle ? val.colStyle : {border : ""}}
                   span={val.width}
-                  className={`${this.state.showLiquidValidation && this.liquidFlow && "error-boundary"}  `}
+                  className={`${(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.liquidFlow && "error-boundary"}  `}
                 >
                   <CKEditor
                     id={val.id}
@@ -3469,7 +3466,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               isModuleFilterEnabled = this.props.isFullMode;
             }
             columns.push(
-              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} className={`${this.state.showLiquidValidation && this.liquidFlow && "error-boundary"}`}>
+              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} className={`${(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.liquidFlow && "error-boundary"}`}>
                 <BeeEditor
                   uid={uuid}
                   tokenData={beeToken}