@capillarytech/creatives-library 8.0.114 → 8.0.116

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 } from '../../v2Containers/CreativesContainer/constants';
+import { SMS, MOBILE_PUSH, LINE, ENABLE_AI_SUGGESTIONS,AI_CONTENT_BOT_DISABLED, EMAIL, LIQUID_SUPPORTED_CHANNELS, INAPP } from '../../v2Containers/CreativesContainer/constants';
 import globalMessages from '../../v2Containers/Cap/messages';
 import { convert } from 'html-to-text';
-import { GLOBAL_CONVERT_OPTIONS, OUTBOUND } from './constants';
+import { 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,7 +135,12 @@ 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 = Boolean(LIQUID_SUPPORTED_CHANNELS.includes(props?.schema?.channel?.toUpperCase()) && hasLiquidSupportFeature());
+    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());
   }
 
   componentWillMount() {
@@ -538,6 +543,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       } else {
         errorData['template-name'] = false;
       }
+      isLiquidValid = isValid;
     }
 
     //validation for LINE
@@ -653,20 +659,21 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       let isOnlyAndroid = false, isOnlyIos = false;
       const { TAG_BRACKET_COUNT_MISMATCH_ERROR } = errorMessageForTags;
       const androidData = {};
-      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 (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];
+          }
         }
-      }
       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;
       }
@@ -701,17 +708,19 @@ 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();
@@ -730,6 +739,7 @@ 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 {
@@ -858,9 +868,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   isCurrentTabValid = false;
                 }else {
                   errorData[parseInt(index)][key] = false;
-                }
-              }
-            });
+          }
+        }
+      });
           }
         }
         if(index == 0){
@@ -873,7 +883,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;
       }
@@ -893,7 +903,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;
+          return; //returning from here will not call the liquid middleware
         }
         const iosData = {};
         for(let data in this.state.formData[1]){
@@ -909,7 +919,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;
+          return; //returning from here will not call the liquid middleware
         }
       }
       if (!androidValid || !iosValid) {
@@ -922,7 +932,9 @@ 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) {
@@ -983,7 +995,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`;
                 }
@@ -999,7 +1011,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;
                   }
@@ -1007,8 +1019,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: {
@@ -1018,7 +1030,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.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.props.channel === SMS? null: this.state.currentTab);
                 }
               );
             } else {
@@ -1034,7 +1046,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,
@@ -1046,126 +1058,174 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       },
       errorData,
     }), () => {
-      this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage);
+      this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.props.channel === SMS? null: this.state.currentTab);
+
       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) => {
-    if(templateContent){this.setState((prevState) => {
-      return {
-        formData: {
-          ...prevState?.formData,
-          base: {
-            ...prevState?.formData?.base,
-            en: {
-              ...prevState?.formData?.base?.en,
-              "template-content": preprocessHtml(templateContent)
+  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)
+              }
             }
           }
+        };
+      }, () => {
+        if (this.props.onSubmit) {
+          this.props.onSubmit(this.state.formData);
         }
-      };
-    }, () => {
-      if (this.props.onSubmit) {
-        this.props.onSubmit(this.state.formData);
+      });
+    } else {
+      // For all other channels
+      this.props.onSubmit(this.state.formData);
+    }
+  }
+  onSubmitWrapper = (args) => {
+    const {singleTab = null} = args || {};
+    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, {
+        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);
+    }
   }
-  
+
   saveForm(saveForm) {
     if (this.props.isNewVersionFlow && !saveForm) {
       this.props.getValidationData();
       return;
     }
     if ( this.state.isFormValid ) {
-      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);
-      }
+      this.onSubmitWrapper();
     } 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 }) => {
+
+      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;
@@ -1304,7 +1364,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;
         }
@@ -2278,12 +2338,11 @@ 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.props.onSubmit(this.state.formData);
+      this.onSubmitWrapper({singleTab: id});
     } else if (id === "ios" && this.state.iosValid) {
-      this.props.onSubmit(this.state.formData);
+      this.onSubmitWrapper({singleTab: id});
     } else if (id === "sms-version-modal") {
       this.state.currentEvent.call(this.props.parent, this.state.currentEventData, this.state.currentTab);
       this.setState({currentEvent: {}, currentEventData: {}});
@@ -2483,6 +2542,19 @@ 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}>
@@ -2490,7 +2562,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}
+            errorMessage={errorMessageText && !this.liquidFlow() ? errorMessageText : ''}
             label={val.label}
             autosize={val.autosize ? val.autosizeParams : false}
             onChange={(e) => this.updateFormData(e.target.value, val)}
@@ -2520,8 +2592,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         </CapColumn>
       );
     }
+  }
   };
 
+
   renderColLabelSection(section, childIndex) {
     // const schema = this.props.schema
     const fields = [];
@@ -3465,7 +3539,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}
@@ -3509,7 +3583,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}
@@ -3795,7 +3869,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
@@ -3877,7 +3951,8 @@ FormBuilder.propTypes = {
   isFullMode: PropTypes.bool,
   currentOrgDetails: PropTypes.object,
   liquidExtractionInProgress: PropTypes.bool,
-  showLiquidErrorInFooter: PropTypes.func
+  showLiquidErrorInFooter: PropTypes.func,
+  channel: PropTypes.string,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -3894,3 +3969,4 @@ 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(

package/v2Containers/Cap/sagas.js

@@ -155,7 +155,8 @@ export function* fetchSchemaForEntity(queryParams) {
 
 export function* getLiquidTags(action) {
   try {
-    let result = yield call(Api.getLiquidTags, action?.data);
+    const askAiraResponse = {askAiraResponse: {}, isError: true};
+    const result = yield call(Api.getLiquidTags, action?.data);
     if (result) {
       if (result?.errors?.length > 0) {
         const getAskAiraErrorResponse = yield call(Api.askAiraForLiquid, {
@@ -163,11 +164,16 @@ export function* getLiquidTags(action) {
           errorMessage: result?.errors?.[0]?.message,
         });
         if (getAskAiraErrorResponse?.result?.errors?.length) {
-          result = getAskAiraErrorResponse?.result;
+          askAiraResponse.askAiraResponse = getAskAiraErrorResponse?.result;
+        } else {
+          askAiraResponse.askAiraResponse = result;
         }
+      } else {
+        askAiraResponse.askAiraResponse = result;
+        askAiraResponse.isError = false;
       }
       if (action?.callback) {
-        yield call(action?.callback, result);
+        yield call(action?.callback, askAiraResponse);
       }
       yield put({ type: types.GET_LIQUID_TAGS_SUCCESS });
     } else {

package/v2Containers/Cap/tests/saga.test.js

@@ -350,6 +350,18 @@ describe('getLiquidTags saga', () => {
       .put({ type: GET_LIQUID_TAGS_FAILURE, error: true })
       .run();
   });
+  it('handles API response with errors', () => {
+    const action = { data: 'templateContent' };
+    const result = { data: [{ message: 'Error message' }] };
+
+    expectSaga(getLiquidTags, action)
+      .provide([
+        [matchers.call.fn(api.getLiquidTags, 'templateContent'), result],
+      ])
+      .call.fn(action.callback, result)
+      .put({ type: GET_LIQUID_TAGS_SUCCESS })
+      .run();
+  });
   it('handles API response with undefined', () => {
     const action = { data: 'templateContent' };
     const result = undefined;