@capillarytech/creatives-library 8.0.114-alpha.1 → 8.0.114

package/v2Components/FormBuilder/index.js

@@ -49,10 +49,10 @@ import * as actions from "../../v2Containers/Cap/actions";
 import './_formBuilder.scss';
 import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
 import { checkSupport, extractNames, preprocessHtml, validateIfTagClosed } from '../../utils/tagValidations';
-import { SMS, MOBILE_PUSH, LINE, ENABLE_AI_SUGGESTIONS,AI_CONTENT_BOT_DISABLED, EMAIL, LIQUID_SUPPORTED_CHANNELS, INAPP } from '../../v2Containers/CreativesContainer/constants';
+import { SMS, MOBILE_PUSH, LINE, ENABLE_AI_SUGGESTIONS,AI_CONTENT_BOT_DISABLED, EMAIL, LIQUID_SUPPORTED_CHANNELS } from '../../v2Containers/CreativesContainer/constants';
 import globalMessages from '../../v2Containers/Cap/messages';
 import { convert } from 'html-to-text';
-import { OUTBOUND } from './constants';
+import { GLOBAL_CONVERT_OPTIONS, OUTBOUND } from './constants';
 import { GET_TRANSLATION_MAPPED } from '../../containers/TagList/constants';
 import moment from 'moment';
 import { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX} from '../../containers/App/constants';
@@ -60,7 +60,7 @@ import { REQUEST } from '../../v2Containers/Cap/constants'
 import { hasLiquidSupportFeature, isEmailUnsubscribeTagMandatory } from '../../utils/common';
 import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
 import { bindActionCreators } from 'redux';
-import { getChannelData, validateLiquidTemplateContent, validateMobilePushContent } from '../../utils/commonUtils';
+
 const TabPane = Tabs.TabPane;
 const {Column} = Table;
 const {TextArea} = CapInput;
@@ -135,12 +135,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     this.handleSetRadioValue = this.handleSetRadioValue.bind(this);
     this.formElements = [];
     // Check if the liquid flow feature is supported and the channel is in the supported list.
-    this.liquidFlow = this.isLiquidFlowSupported.bind(this);
-    this.onSubmitWrapper = this.onSubmitWrapper.bind(this);
-
-  }
-  isLiquidFlowSupported = () => {
-    return Boolean(LIQUID_SUPPORTED_CHANNELS.includes(this.props?.schema?.channel?.toUpperCase()) && hasLiquidSupportFeature());
+    this.liquidFlow = Boolean(LIQUID_SUPPORTED_CHANNELS.includes(props?.schema?.channel?.toUpperCase()) && hasLiquidSupportFeature());
   }
 
   componentWillMount() {
@@ -543,7 +538,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       } else {
         errorData['template-name'] = false;
       }
-      isLiquidValid = isValid;
     }
 
     //validation for LINE
@@ -659,21 +653,20 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       let isOnlyAndroid = false, isOnlyIos = false;
       const { TAG_BRACKET_COUNT_MISMATCH_ERROR } = errorMessageForTags;
       const androidData = {};
-      if (this.state.formData && this.state.formData[0]) {
-        for(let data in this.state.formData[0]){
-          if(!!this.state.formData[0][data] && data !== "tabKey" && data !== "base"){
-            androidData[data] = this.state.formData[0][data];
-          }
+      for(let data in this.state.formData[0]){
+        if(!!this.state.formData[0][data] && data !== "tabKey" && data !== "base"){
+          androidData[data] = this.state.formData[0][data];
         }
+      }
       if(_.isEmpty(androidData)){
         isOnlyIos = true;
       }
       const iosData = {};
-        for(let data in this.state.formData[1]){
-          if(!!this.state.formData[1][data] && data !== "tabKey" && data !== "base"){
-            iosData[data] = this.state.formData[1][data];
-          }
+      for(let data in this.state.formData[1]){
+        if(!!this.state.formData[1][data] && data !== "tabKey" && data !== "base"){
+          iosData[data] = this.state.formData[1][data];
         }
+      }
       if(_.isEmpty(iosData)){
         isOnlyAndroid = true;
       }
@@ -708,19 +701,17 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   errorData[parseInt(index)]['invalid-tags'] = tagValidationResponse.unsupportedTags;
                   errorData[parseInt(index)][`bracket-error`] = isBraceError && TAG_BRACKET_COUNT_MISMATCH_ERROR;
                   isValid = false;
-                  isCurrentTabValid = false;
                 }
               }
 
             } else {
-
-              errorData[parseInt(index)][`message-editor${selector}`] = true;
-              isValid = false;
-              isCurrentTabValid = false;
+                errorData[parseInt(index)][`message-editor${selector}`] = true;
+                isValid = false;
+                isCurrentTabValid = false;
             }
             
-
             
+
             let title = tab[`message-title${selector}`]
             if(title){
               title = title.trim();
@@ -739,7 +730,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   errorData[parseInt(index)][`message-title${selector}`] = isBraceError ? TAG_BRACKET_COUNT_MISMATCH_ERROR : true;
                   errorData[parseInt(index)][`bracket-error`] = isBraceError && TAG_BRACKET_COUNT_MISMATCH_ERROR;
                   isValid = false;
-                  isCurrentTabValid = false;
                 }
               }
             } else {
@@ -868,9 +858,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   isCurrentTabValid = false;
                 }else {
                   errorData[parseInt(index)][key] = false;
-          }
-        }
-      });
+                }
+              }
+            });
           }
         }
         if(index == 0){
@@ -883,7 +873,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         errorData['template-name'] = true;
         isValid = false;
         androidValid = false;
-        iosValid = false;
+        iosValid = false
       } else {
         errorData['template-name'] = false;
       }
@@ -903,7 +893,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           // modal.body = "Android template is not configured. Save without Android template";
           // modal.id = "ios";
           // modal.type = 'confirm';
-          return; //returning from here will not call the liquid middleware
+          return;
         }
         const iosData = {};
         for(let data in this.state.formData[1]){
@@ -919,7 +909,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           // modal.id = 'android';
           // modal.type = 'confirm';
           // this.setState({modal, showModal: true, androidValid, iosValid});
-          return; //returning from here will not call the liquid middleware
+          return;
         }
       }
       if (!androidValid || !iosValid) {
@@ -932,9 +922,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       } else if (!isOnlyIos && !isOnlyAndroid && androidValid && iosValid) {
         isValid = isValid && true;
       }
-      isLiquidValid = isValid;
     }
-  }
 
     // Form Data Validation for Email Channel
     if (this.props?.schema?.channel?.toUpperCase() === EMAIL) {
@@ -995,7 +983,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               errorData[index][currentLang]['template-content'] = true;
               isValid = false;
               isLiquidValid = false;
-              if ((showMessages && !isNaN(index)) ||  this.liquidFlow()) {
+              if ((showMessages && !isNaN(index)) ||  this.liquidFlow) {
                 if (tagValidationResponse?.missingTags?.length > 0 || tagValidationResponse?.unsupportedTags?.length > 0) {
                   errorString += `${this.props.intl.formatMessage(messages.contentNotValidLanguage)} ${currentLang}\n`;
                 }
@@ -1011,7 +999,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 if (tagValidationResponse?.isContentEmpty) {
                   errorString += this.props.intl.formatMessage(messages.emailBodyEmptyError);
                   // Adds a bypass for cases where content is initially empty in the creation flow.
-                  if(this.liquidFlow()){
+                  if(this.liquidFlow){
                     errorString = "";
                     isLiquidValid = true;
                   }
@@ -1019,8 +1007,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               }
             }
           }
-          if (errorString) {
-            if (this.liquidFlow()) {
+          if (errorString !== "") {
+            if (this.liquidFlow) {
               this.setState(
                 (prevState) => ({
                   liquidErrorMessage: {
@@ -1030,7 +1018,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 }),
                 () => {
                   // Callback after the state is updated
-                  this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.props.channel === SMS? null: this.state.currentTab);
+                  this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage);
                 }
               );
             } else {
@@ -1046,7 +1034,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       });
     }
 
-    const isTemplateValid = this.liquidFlow() ? isLiquidValid : isValid;
+    const isTemplateValid = this.liquidFlow ? isLiquidValid : isValid;
     //Updating the state with the error data
     this.setState((prevState) => ({
       isFormValid: isTemplateValid,
@@ -1058,175 +1046,126 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       },
       errorData,
     }), () => {
-      this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.props.channel === SMS? null: this.state.currentTab);
-
+      this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage);
       if (onValidationComplete) {
-
         onValidationComplete();
       }
     });
     
-
     this.props.onFormValidityChange(isTemplateValid, errorData);
     return isTemplateValid;
-}
+  }
 
   indexOfEnd(targetString, string) {
     var io = targetString.indexOf(string);
     return io == -1 ? -1 : io + string.length;
   }
+  continueSaveForm = (id) => {
 
-  handleLiquidTemplateSubmit = (templateContent) => {
-    const channel = this.props.channel || this.props?.schema?.channel?.toUpperCase();
-    
-    if (templateContent && channel === EMAIL) {
-      this.setState((prevState) => {
-        return {
-          formData: {
-            ...prevState?.formData,
-            base: {
-              ...prevState?.formData?.base,
-              [this.props.baseLanguage]: {
-                ...prevState?.formData?.base?.[this.props.baseLanguage],
-                "template-content": preprocessHtml(templateContent)
-              }
+  };
+  handleLiquidTemplateSubmit =(templateContent) => {
+    if(templateContent){this.setState((prevState) => {
+      return {
+        formData: {
+          ...prevState?.formData,
+          base: {
+            ...prevState?.formData?.base,
+            en: {
+              ...prevState?.formData?.base?.en,
+              "template-content": preprocessHtml(templateContent)
             }
           }
-        };
-      }, () => {
-        if (this.props.onSubmit) {
-          this.props.onSubmit(this.state.formData);
         }
-      });
-    } else {
-      // For all other channels
-      this.props.onSubmit(this.state.formData);
-    }
-  }
-  onSubmitWrapper = (props) => {
-    const {singleTab = null} = props || {};
-    if (this.liquidFlow()) {
-      // For MPUSH, we need to validate both Android and iOS content separately
-      if (this.props.channel === MOBILE_PUSH || this.props?.schema?.channel?.toUpperCase() === MOBILE_PUSH) {
-        this.validateFormBuilderMPush(this.state.formData, singleTab);
-        return;
-      }
-      
-      // For other channels (EMAIL, SMS, INAPP)
-      const content = getChannelData(this.props.schema.channel || this.props.channel, this.state.formData,this.props.baseLanguage);
-
-      // Set up callbacks for error and success handling
-      const onError = ({ standardErrors, liquidErrors }) => {
-        this.setState(
-          (prevState) => ({
-            liquidErrorMessage: {
-              ...prevState.liquidErrorMessage,
-              STANDARD_ERROR_MSG: standardErrors,
-              LIQUID_ERROR_MSG: liquidErrors,
-            },
-          }),
-          () => {
-            this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage);
-            this.props.stopValidation();
-          }
-        );
       };
-      
-      const onSuccess = (contentToSubmit) => {
-        this.handleLiquidTemplateSubmit(contentToSubmit);
-      };
-      
-      // Call the common validation function
-      validateLiquidTemplateContent(content, this.props.schema.channel || this.props.channel, {
-        getLiquidTags: this.props.actions.getLiquidTags,
-        formatMessage: this.props.intl.formatMessage,
-        messages,
-        onError,
-        onSuccess,
-        tagLookupMap: this.props?.metaEntities?.tagLookupMap,
-        eventContextTags: this.props?.eventContextTags,
-        isLiquidFlow: this.liquidFlow(),
-        forwardedTags: this.props?.isLoyaltyModule ? this.props?.forwardedTags : {},
-        skipTags: this.skipTags.bind(this)
-      });
-    } else {
-      this.props.onSubmit(this.state.formData);
-    }
+    }, () => {
+      if (this.props.onSubmit) {
+        this.props.onSubmit(this.state.formData);
+      }
+    });}
   }
-
+  
   saveForm(saveForm) {
     if (this.props.isNewVersionFlow && !saveForm) {
       this.props.getValidationData();
       return;
     }
     if ( this.state.isFormValid ) {
-      this.onSubmitWrapper();
-
+      if (this.liquidFlow) {
+        const templateContent = this.state.formData?.base?.en?.["template-content"] || "";
+        //Converts given HTML content to plain text string.
+        const content = convert(
+          templateContent, GLOBAL_CONVERT_OPTIONS
+        );
+      /* 
+        The `handleResult` function is used as a callback for `getLiquidTags` to handle the results post-processing. 
+        It checks for errors and unsupported tags in the fetched liquid tags, displays any necessary validation messages,
+        and proceeds with form submission if all checks pass.
+      */
+        const handleResult = (result) => {
+          const {formatMessage} = this.props.intl;
+          // Checks for errors in the result and displays them if any are found.
+          const validString = /\S/.test(content);
+          // If the content is empty or there are errors in the result, display the necessary validation messages.
+          if (result?.errors?.length > 0 || !validString) {
+            this.setState((prevState) => ({
+              liquidErrorMessage: {
+                ...prevState.liquidErrorMessage,
+                STANDARD_ERROR_MSG: !validString ? [...(prevState.liquidErrorMessage?.STANDARD_ERROR_MSG || []), formatMessage(messages.emailBodyEmptyError)] : prevState.liquidErrorMessage?.STANDARD_ERROR_MSG,
+                LIQUID_ERROR_MSG: result?.errors?.map(error => error?.message) ?? [formatMessage(messages.somethingWentWrong)],
+              }
+            }), () => {
+              this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage);
+            });
+            this.props.stopValidation();
+            return;
+          }
+          // 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,
+              this.props?.metaEntities?.tagLookupMap,
+              this.props?.eventContextTags,
+              this.liquidFlow,
+              this.props?.isLoyaltyModule ? this.props?.forwardedTags : {}
+            );
+            const unsupportedLiquidTags = extractedLiquidTags?.filter(
+              (tag) => !supportedLiquidTags?.includes(tag) && !this.skipTags(tag)
+            );
+            if (
+              unsupportedLiquidTags?.length > 0
+            ) {
+              this.setState(
+                (prevState) => ({
+                  liquidErrorMessage: {
+                    ...prevState.liquidErrorMessage,
+                    LIQUID_ERROR_MSG: [formatMessage(messages.unsupportedTagsValidationError, {
+                      unsupportedTags: unsupportedLiquidTags.join(", ")})],
+                  },
+                }),
+                () => {
+                  this.props.showLiquidErrorInFooter(
+                    this.state.liquidErrorMessage
+                  );
+                }
+              );
+              this.props.stopValidation();
+              return;
+            }
+            this.handleLiquidTemplateSubmit(templateContent);
+          }
+        };
+        this.props.actions.getLiquidTags(preprocessHtml(content), handleResult);
+      } else {
+        this.props.onSubmit(this.state.formData);
+      }
     } else {
       this.setState({checkValidation: true});
       this.validateForm(null, null, true);
     }
   }
 
-
-  // New function to handle MPUSH content validation for both Android and iOS
-  validateFormBuilderMPush = (formData,singleTab) => {
-    const currentTab = this.state.currentTab;
-    
-    // Set up callbacks for error and success handling
-    const onLiquidError = ({ standardErrors, liquidErrors }) => {
-      console.log("onLiquidError.....", standardErrors, liquidErrors);
-      this.setState(
-        (prevState) => ({
-          liquidErrorMessage: {
-            ...prevState.liquidErrorMessage,
-            STANDARD_ERROR_MSG: standardErrors,
-            LIQUID_ERROR_MSG: liquidErrors,
-          },
-        }),
-        () => {
-          this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.state.currentTab);
-          this.props.stopValidation();
-        }
-      );
-    };
-    
-    const onSuccess = (contentToSubmit) => {
-      // Clear any previous errors
-      this.setState(
-        (prevState) => ({
-          liquidErrorMessage: {
-            ...prevState.liquidErrorMessage,
-            STANDARD_ERROR_MSG: [],
-            LIQUID_ERROR_MSG: [],
-          },
-        }),
-        () => {
-          // Format depends on the tabType
-          this.handleLiquidTemplateSubmit(contentToSubmit);
-        }
-      );
-    };
-
-    // Call the utility function with our callbacks
-    validateMobilePushContent(formData, {
-      currentTab,
-      onError: onLiquidError,
-      onSuccess,
-      getLiquidTags: this.props.actions.getLiquidTags,
-      formatMessage: this.props.intl.formatMessage,
-      messages: messages,
-      tagLookupMap: this.props?.metaEntities?.tagLookupMap,
-      eventContextTags: this.props?.eventContextTags,
-      isLiquidFlow: this.liquidFlow(), // Use the method instead of props
-      forwardedTags: this.props?.isLoyaltyModule ? this.props?.forwardedTags : {},
-      skipTags: this.skipTags.bind(this),
-      extractNames,
-      checkSupport,
-      singleTab: singleTab?.toUpperCase(),
-    });
-  }
-
   transformInjectedTags(tags) {
     _.forEach(tags, (tag) => {
       const temp = tag;
@@ -1365,7 +1304,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         });
 
         ifSupported = ifSupported || this.checkIfSupportedTag(tagValue, injectedTags);
-        if (!ifSupported && !this.liquidFlow()) {
+        if (!ifSupported && !this.liquidFlow) {
           response.unsupportedTags.push(tagValue);
           response.valid = false;
         }
@@ -2339,11 +2278,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   };
   handleOk = (ev) => {
     const id = ev.target.id;
+
     this.setState({showModal: false});
     if (id === "android" && this.state.androidValid) {
-      this.onSubmitWrapper({singleTab: id});
+      this.props.onSubmit(this.state.formData);
     } else if (id === "ios" && this.state.iosValid) {
-      this.onSubmitWrapper({singleTab: id});
+      this.props.onSubmit(this.state.formData);
     } else if (id === "sms-version-modal") {
       this.state.currentEvent.call(this.props.parent, this.state.currentEventData, this.state.currentTab);
       this.setState({currentEvent: {}, currentEventData: {}});
@@ -2543,19 +2483,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       default:
         break;
     }
-    const prevErrorMessage = this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.[0];
-    if (prevErrorMessage !== errorMessageText && errorMessageText && this.liquidFlow()) {
-      this.setState((prevState) => ({
-        liquidErrorMessage: {
-        ...prevState.liquidErrorMessage,
-        STANDARD_ERROR_MSG: [errorMessageText],
-        }
-      }), () => {
-
-        this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.props.channel === SMS? null: this.state.currentTab);
-      });
-    }
-    else{
     if (styling === 'semantic') {
       columns.push(
         <CapColumn key="input" span={val.width} offset={offset}>
@@ -2563,7 +2490,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             id={val.id}
             placeholder={val.placeholder ? val.placeholder : ''}
             className={`${ifError ? 'error-form-builder' : ''}`}
-            errorMessage={errorMessageText && !this.liquidFlow() ? errorMessageText : ''}
+            errorMessage={errorMessageText}
             label={val.label}
             autosize={val.autosize ? val.autosizeParams : false}
             onChange={(e) => this.updateFormData(e.target.value, val)}
@@ -2593,10 +2520,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         </CapColumn>
       );
     }
-  }
   };
 
-
   renderColLabelSection(section, childIndex) {
     // const schema = this.props.schema
     const fields = [];
@@ -3540,7 +3465,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 <CapColumn
                   style={val.colStyle ? val.colStyle : {border : ""}}
                   span={val.width}
-                  className={`${(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && 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}
@@ -3584,7 +3509,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.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && 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}
@@ -3870,7 +3795,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
 
     return (
-      <CapSpin spinning={Boolean((this.liquidFlow() && this.props.liquidExtractionInProgress) || this.props.metaDataStatus === REQUEST)} tip={this.props.intl.formatMessage(messages.liquidSpinText)} >
+      <CapSpin spinning={Boolean((this.liquidFlow && this.props.liquidExtractionInProgress) || this.props.metaDataStatus === REQUEST)} tip={this.props.intl.formatMessage(messages.liquidSpinText)} >
       <CapRow>
         {this.props.schema && this.renderForm()}
         <SlideBox
@@ -3952,8 +3877,7 @@ FormBuilder.propTypes = {
   isFullMode: PropTypes.bool,
   currentOrgDetails: PropTypes.object,
   liquidExtractionInProgress: PropTypes.bool,
-  showLiquidErrorInFooter: PropTypes.func,
-  channel: PropTypes.string,
+  showLiquidErrorInFooter: PropTypes.func
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -3970,4 +3894,3 @@ function mapDispatchToProps(dispatch) {
 }
 
 export default connect(mapStateToProps,mapDispatchToProps)(injectIntl(FormBuilder));
-

package/v2Components/FormBuilder/messages.js

@@ -94,7 +94,7 @@ export default defineMessages({
     id: 'creatives.componentsV2.FormBuilder.somethingWentWrong',
     defaultMessage: 'Something went wrong while validating content, please try again later',
   },
-  liquidSpinText: {
+  liquidSpinText:{
     id: 'creatives.componentsV2.FormBuilder.liquidSpinText',
     defaultMessage: 'Validating the template, it might take a few seconds',
   },

package/v2Containers/Cap/reducer.js

@@ -90,13 +90,13 @@ function capReducer(state = fromJS(initialState.cap), action) {
         .set('fetchingSchemaError', true);
     case types.GET_LIQUID_TAGS_REQUEST:
       return state
-        .set('fetchingLiquidTags', true);
+        .set('fetchingLiquidTags', true)
     case types.GET_LIQUID_TAGS_FAILURE:
       return state
-        .set('fetchingLiquidTags', false);
-    case types.GET_LIQUID_TAGS_SUCCESS:
+        .set('fetchingLiquidTags', false)
+    case types.GET_LIQUID_TAGS_SUCCESS: 
       return state
-        .set('fetchingLiquidTags', false);
+        .set('fetchingLiquidTags', false)
     case types.GET_SCHEMA_FOR_ENTITY_SUCCESS: {
       //Process standard tags
       const standardTagMapInitial = _.keyBy(