@capillarytech/creatives-library 8.0.10 → 8.0.12

package/v2Components/FormBuilder/index.js

@@ -44,19 +44,22 @@ import EDMEditor from "../Edmeditor";
 import BeeEditor from '../../v2Containers/BeeEditor';
 import CustomPopOver from '../CustomPopOver';
 import messages from './messages';
-import { selectCurrentOrgDetails } from "../../v2Containers/Cap/selectors";
+import { makeSelectMetaEntities, selectCurrentOrgDetails, selectLiquidStateDetails } from "../../v2Containers/Cap/selectors";
+import * as actions from "../../v2Containers/Cap/actions";
 import './_formBuilder.scss';
 import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
-import { SMS, MOBILE_PUSH, LINE, ENABLE_AI_SUGGESTIONS,AI_CONTENT_BOT_DISABLED, EMAIL } from '../../v2Containers/CreativesContainer/constants';
-import { validateIfTagClosed } from '../../utils/tagValidations';
+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 globalMessages from '../../v2Containers/Cap/messages';
 import { convert } from 'html-to-text';
 import { OUTBOUND } from './constants';
 import { GET_TRANSLATION_MAPPED } from '../../containers/TagList/constants';
 import moment from 'moment';
 import { CUSTOMER_BARCODE_TAG , COPY_OF} from '../../containers/App/constants';
-import { isEmailUnsubscribeTagMandatory } from '../../utils/common';
+import { hasLiquidSupportFeature, isEmailUnsubscribeTagMandatory } from '../../utils/common';
 import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
+import { bindActionCreators } from 'redux';
+
 const TabPane = Tabs.TabPane;
 const {Column} = Table;
 const {TextArea} = CapInput;
@@ -95,6 +98,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       customPopoverVisible: false,
       isDrawerVisible: false,
       translationLang: 'en',
+      liquidErrorMessage: {
+        STANDARD_ERROR_MSG: [],
+        LIQUID_ERROR_MSG: [],
+      },
     };
     this.renderForm = this.renderForm.bind(this);
     this.updateFormData = this.updateFormData.bind(this);
@@ -126,6 +133,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     this.transformInjectedTags = this.transformInjectedTags.bind(this);
     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 = hasLiquidSupportFeature() && LIQUID_SUPPORTED_CHANNELS.includes(props?.schema?.channel?.toUpperCase());
   }
 
   componentWillMount() {
@@ -480,10 +489,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   validateForm(tags, injectedTags, isSave, showMessages, onValidationComplete) {
     const channel = _.get(this, "props.schema.channel");
     let isValid = true;
+    let isLiquidValid = true;
     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])) {
@@ -915,10 +924,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
 
     // Form Data Validation for Email Channel
-    if (this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === "EMAIL") {
+    if (this.props?.schema?.channel?.toUpperCase() === EMAIL) {
       // Validating Email By iterating all elements of FormBuilder
       const isEmail = true;
-      _.forEach(this.state.formData, (data, index) => {
+      _.forEach(this.state.formData,(data, index) => {
         
         if (!this.state.formData["template-subject"] && type.toLowerCase() === 'embedded' && (currentModule.toLowerCase() === 'loyalty' || currentModule.toLowerCase() === 'dvs' || currentModule.toLowerCase() === 'timeline' || currentModule.toLowerCase() === 'library')) {
           errorData["template-subject"] = true;
@@ -950,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) {
@@ -963,37 +972,57 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             if (!content) {
               return false;
             }
-            const tagValidationResponse = this.validateTags(content, tags, injectedTags, isEmail);;
+            const tagValidationResponse = this.validateTags(content, tags, injectedTags, isEmail);
             if (errorData[index][currentLang] === undefined) {
               errorData[index][currentLang] = {};
             }
-            
-            if (tagValidationResponse.valid) {
+            if (tagValidationResponse?.valid) {
               errorData[index][currentLang]['template-content'] = false;
             } else {
               errorData[index][currentLang]['template-content'] = true;
               isValid = false;
-              if (showMessages && !isNaN(index)) {
-                if (tagValidationResponse.missingTags.length > 0 || tagValidationResponse.unsupportedTags.length > 0) {
+              isLiquidValid = false;
+              if ((showMessages && !isNaN(index)) ||  this.liquidFlow) {
+                if (tagValidationResponse?.missingTags?.length > 0 || tagValidationResponse?.unsupportedTags?.length > 0) {
                   errorString += `${this.props.intl.formatMessage(messages.contentNotValidLanguage)} ${currentLang}\n`;
                 }
-                if (tagValidationResponse.missingTags.length > 0) {
+                if (tagValidationResponse?.missingTags?.length > 0) {
                   errorString += `${this.props.intl.formatMessage(messages.missingTags)} ${tagValidationResponse.missingTags.toString()}\n`;
                 }
-                if (tagValidationResponse.unsupportedTags.length > 0) {
+                if (tagValidationResponse?.unsupportedTags?.length > 0) {
                   errorString += `${this.props.intl.formatMessage(messages.unsupportedTags)} ${tagValidationResponse.unsupportedTags.toString()}\n`;
                 }
-                if (tagValidationResponse.isBraceError){
+                if (tagValidationResponse?.isBraceError){
                   errorString += this.props.intl.formatMessage(globalMessages.unbalanacedCurlyBraces);
                 }
                 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 && !this.props.isEdit){
+                    errorString = "";
+                    isLiquidValid = true;
+                  }
                 }
               }
             }
           }
           if (errorString !== "") {
-            this.openNotificationWithIcon('error', errorString, "email-validation-error");
+            if (this.liquidFlow) {
+              this.setState(
+                (prevState) => ({
+                  liquidErrorMessage: {
+                    ...prevState.liquidErrorMessage,
+                    STANDARD_ERROR_MSG: [errorString],
+                  },
+                }),
+                () => {
+                  // Callback after the state is updated
+                  this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage);
+                }
+              );
+            } else {
+              this.openNotificationWithIcon('error', errorString, "email-validation-error");
+            }
           }
           _.forEach(errorData[index], (versionData, key) => {
             if (data.selectedLanguages.indexOf(key) === -1) {
@@ -1002,39 +1031,28 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           });
         }
       });
-      // for (let count = 0; count < this.state.tabCount; count += 1) {
-      //   const index = count + 1;
-      //   // const content = this.state.formData[count][`template-content${index > 1 ? index : ''}`];
-      //   // const tagValidationResponse = this.validateTags(content, tags, injectedTags);
-      //   // 
-      //   // if (tagValidationResponse.valid) {
-      //   //   errorData[count][`template-content${index > 1 ? index : ''}`] = false;
-      //   // } else {
-      //   //   errorData[count][`template-content${index > 1 ? index : ''}`] = true;
-      //   //   isValid = false;
-      //   // }
-      // }
-      // if (type.toLowerCase() === 'embedded' && (currentModule.toLowerCase() === 'loyalty' || currentModule.toLowerCase() === 'dvs' || currentModule.toLowerCase() === 'timeline')) {
-      //   if (this.state.formData['template-subject']  && this.state.formData['template-subject'].trim() === '') {
-      //     errorData['template-subject'] = true;
-      //     isValid = false;
-      //   }
-      // }
-      // if(type !== 'embedded' && (!this.state.formData['template-name'] || this.state.formData['template-name'] === '')) {
-      //   errorData['template-name'] = true;
-      //   isValid = false;
-      // } else {
-      //   errorData['template-name'] = false;
-      // }
     }
-    this.setState({isFormValid : isValid, errorData}, () => {
+
+    const isTemplateValid = this.liquidFlow ? isLiquidValid : isValid;
+    //Updating the state with the error data
+    this.setState((prevState) => ({
+      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: isTemplateValid ? [] : prevState.liquidErrorMessage?.STANDARD_ERROR_MSG,
+      },
+      errorData,
+    }), () => {
+      this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage);
       if (onValidationComplete) {
         onValidationComplete();
       }
     });
     
-    this.props.onFormValidityChange(isValid, errorData);
-    return isValid;
+    this.props.onFormValidityChange(isTemplateValid, errorData);
+    return isTemplateValid;
   }
 
   indexOfEnd(targetString, string) {
@@ -1049,8 +1067,70 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       this.props.getValidationData();
       return;
     }
-    if (this.state.isFormValid) {
-      this.props.onSubmit(this.state.formData);
+    if ( this.state.isFormValid ) {
+      if (this.liquidFlow) {
+        //Converts given HTML content to plain text string.
+        const content = convert(
+          this.state.formData?.base?.en?.["template-content"]
+        );
+      /* 
+        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.
+          if (result?.errors?.length > 0) {
+            this.setState((prevState) => ({
+              liquidErrorMessage: {
+                ...prevState.liquidErrorMessage,
+                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
+            );
+            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.props.onSubmit(this.state.formData);
+          }
+        };
+        this.props.actions.getLiquidTags(preprocessHtml(content), handleResult);
+      } else {
+        this.props.onSubmit(this.state.formData);
+      }
     } else {
       this.setState({checkValidation: true});
       this.validateForm(null, null, true);
@@ -1092,7 +1172,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     });
     
     return result;
-  }
+  };
 
   skipTags(tag) {
     const regexGroups = ["dynamic_expiry_date_after_\\d+_days.FORMAT_\\d", "unsubscribe\\(#[a-zA-Z\\d]{6}\\)","Link_to_[a-zA-z]","SURVEY.*.TOKEN","^[A-Za-z].*\\([a-zA-Z\\d]*\\)"];
@@ -1151,12 +1231,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       if (isEmailUnsubscribeTagMandatory() && isEmail && this.props?.moduleType === OUTBOUND) {
         const missingTagIndex = response?.missingTags?.indexOf("unsubscribe");
         if(missingTagIndex != -1) { //skip regex tags for mandatory tags also
-          response?.missingTags?.splice(missingTagIndex, 1);
-          if (validString) {
-            response.valid = true;
-          } else {
-            response.isContentEmpty = true;
-          }
+          response?.missingTags?.splice(missingTagIndex, 1); 
+        }
+        if (validString) {
+          response.valid = true;
+        } else {
+          response.isContentEmpty = true;
         }
       }
       while (match !== null ) {
@@ -1183,11 +1263,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
         }
         ifSupported = ifSupported || this.checkIfSupportedTag(tagValue, injectedTags);
-        if (!ifSupported) {
+        if (!ifSupported && !this.liquidFlow) {
           response.unsupportedTags.push(tagValue);
           response.valid = false;
         }
-        if (response.unsupportedTags.length == 0 && response.missingTags.length == 0 ) {
+
+        if (response?.unsupportedTags?.length == 0 && response?.missingTags?.length == 0 ) {
           response.valid = true;
         }
       }
@@ -3338,7 +3419,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               const currentLang = ((!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex] : this.props.baseLanguage) || 'en';
               const content = (!_.isEmpty(this.state.formData) && this.state.formData[`${this.state.currentTab - 1}`] && this.state.formData[`${this.state.currentTab - 1}`][currentLang] && this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] || '');
               columns.push(
-                <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
+                <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"}  `}
+                >
                   <CKEditor
                     id={val.id}
                     content={content}
@@ -3381,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}>
+              <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}
@@ -3485,7 +3570,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         fields.push(row);
       }
     });
-    if (!this.props.isEmailLoading && this.props.schema.channel.toUpperCase() === 'EMAIL' && !fields.length) {
+    if (!this.props.isEmailLoading && this.props.schema.channel.toUpperCase() === EMAIL && !fields.length) {
       return (
         <div style={{ textAlign: 'center' }}>
           <CapSpin spinning />
@@ -3666,30 +3751,32 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
 
     return (
+      <CapSpin spinning={this.liquidFlow && this.props.liquidExtractionInProgress} tip={this.props.intl.formatMessage(messages.liquidSpinText)} >
       <CapRow>
-        {
-          this.props.schema ? this.renderForm() : ''
-        }
+        {this.props.schema && this.renderForm()}
         <SlideBox
-          header={(<h3>{this.props.intl.formatMessage(messages.layoutSelection)}</h3>)}
+          header={
+            <h3>{this.props.intl.formatMessage(messages.layoutSelection)}</h3>
+          }
           width={60}
           content={cmsTemplateSelectionContent}
           show={this.props.showEdmEmailTemplates}
           handleClose={this.props.toggleEdmEmailTemplateSelection}
-          loadingText={this.props.intl.formatMessage(messages.loadingEDMTemplates)}
+          loadingText={this.props.intl.formatMessage(
+            messages.loadingEDMTemplates
+          )}
           isLoading={this.props.getCmsTemplatesInProgress}
         />
-        {
-          this.props.capDrawerContent && (
-            <CapDrawer
-              content={this.props.capDrawerContent}
-              visible={this.state.isDrawerVisible}
-              width={380}
-              onClose={() => this.props.setDrawerVisibility(false)}
-            />
-          )
-        }
+        {this.props.capDrawerContent && (
+          <CapDrawer
+            content={this.props.capDrawerContent}
+            visible={this.state.isDrawerVisible}
+            width={380}
+            onClose={() => this.props.setDrawerVisibility(false)}
+          />
+        )}
       </CapRow>
+      </CapSpin>
     );
   }
 }
@@ -3697,6 +3784,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 FormBuilder.defaultProps = {
   isNewVersionFlow: false,
   userLocale: localStorage.getItem('jlocale') || 'en',
+  showLiquidErrorInFooter: () => {},
 };
 
 FormBuilder.propTypes = {
@@ -3743,10 +3831,20 @@ FormBuilder.propTypes = {
   capDrawerContent: PropTypes.array,
   isFullMode: PropTypes.bool,
   currentOrgDetails: PropTypes.object,
+  liquidExtractionInProgress: PropTypes.bool,
+  showLiquidErrorInFooter: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({
   currentOrgDetails: selectCurrentOrgDetails(),
+  liquidExtractionInProgress: selectLiquidStateDetails(),
+  metaEntities: makeSelectMetaEntities(),
 });
 
-export default connect(mapStateToProps)(injectIntl(FormBuilder));
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps,mapDispatchToProps)(injectIntl(FormBuilder));

package/v2Components/FormBuilder/messages.js

@@ -90,4 +90,12 @@ export default defineMessages({
     id: 'creatives.componentsV2.FormBuilder.emailBodyEmptyError',
     defaultMessage: 'Email body cannot be empty',
   },
+  somethingWentWrong: {
+    id: 'creatives.componentsV2.FormBuilder.somethingWentWrong',
+    defaultMessage: 'Something went wrong while validating content, please try again later',
+  },
+  liquidSpinText:{
+    id: 'creatives.componentsV2.FormBuilder.liquidSpinText',
+    defaultMessage: 'Validating the template, it might take a few seconds',
+  },
 });

package/v2Containers/Cap/actions.js

@@ -77,3 +77,11 @@ export function clearTopbarMenuData() {
 export const getSupportVideosConfig = () => ({
   type: types.GET_SUPPORT_VIDEOS_CONFIG_REQUEST,
 });
+
+export const getLiquidTags = (data,callback) => {
+  return{
+    type: types.GET_LIQUID_TAGS_REQUEST,
+    data,
+    callback,
+  };
+};

package/v2Containers/Cap/constants.js

@@ -59,3 +59,7 @@ export const FAILURE = 'FAILURE';
 export const ENABLE_PRODUCT_SUPPORT_VIDEOS = 'ENABLE_PRODUCT_SUPPORT_VIDEOS';
 export const DEFAULT = 'default';
 export const DEFAULT_MODULE = 'creatives';
+
+export const GET_LIQUID_TAGS_FAILURE = 'cap/GET_LIQUID_TAGS_FAILURE_V2';
+export const GET_LIQUID_TAGS_REQUEST = 'cap/GET_LIQUID_TAGS_REQUEST_V2';
+export const GET_LIQUID_TAGS_SUCCESS = 'cap/GET_LIQUID_TAGS_SUCCESS_V2';

package/v2Containers/Cap/mockData.js

@@ -0,0 +1,74 @@
+export const expectedStateGetLiquidTagsRequest = {
+    fetchingLiquidTags: true,
+    fetchingSchema: true,
+    fetchingSchemaError: "",
+    liquidTags: [],
+    messages: [],
+    metaEntities: {
+      layouts: [],
+      tagLookupMap: {},
+      tags: []
+    },
+    orgID: "",
+    token: ""
+  };
+  
+  export const expectedStateGetLiquidTagsFailure = {
+    fetchingLiquidTags: false,
+    fetchingSchema: true,
+    fetchingSchemaError: "",
+    liquidTags: [],
+    messages: [],
+    metaEntities: {
+      layouts: [],
+      tagLookupMap: {},
+      tags: []
+    },
+    orgID: "",
+    token: ""
+  };
+  
+  export const expectedStateGetLiquidTagsSuccess = {
+    fetchingLiquidTags: false,
+    fetchingSchema: true,
+    fetchingSchemaError: "",
+    liquidTags: [],
+    messages: [],
+    metaEntities: {
+      layouts: [],
+      tagLookupMap: {},
+      tags: []
+    },
+    orgID: "",
+    token: ""
+  };
+  
+  export const expectedStateGetSchemaForEntitySuccessTAG = {
+    fetchingLiquidTags: false,
+    fetchingSchema: false,
+    fetchingSchemaError: false,
+    liquidTags: [],
+    messages: [],
+    metaEntities: {
+      layouts: undefined,
+      tagLookupMap: { undefined: "32" },
+      tags: { standard: { random: "32" } }
+    },
+    orgID: "",
+    token: ""
+  };
+  
+  export const expectedStateGetSchemaForEntitySuccess = {
+    fetchingLiquidTags: false,
+    fetchingSchema: false,
+    fetchingSchemaError: false,
+    liquidTags: [],
+    messages: [],
+    metaEntities: {
+      layouts: undefined,
+      tagLookupMap: undefined,
+      tags: undefined
+    },
+    orgID: "",
+    token: ""
+  };

package/v2Containers/Cap/reducer.js

@@ -6,6 +6,7 @@ import _ from 'lodash';
 import * as types from './constants';
 import initialState from '../../initialState';
 import { FAILURE } from '../App/constants';
+import { TAG } from '../Whatsapp/constants';
 
 function capReducer(state = fromJS(initialState.cap), action) {
   switch (action.type) {
@@ -85,13 +86,24 @@ function capReducer(state = fromJS(initialState.cap), action) {
       return state
         .set('fetchingSchema', false)
         .set('fetchingSchemaError', true);
+    case types.GET_LIQUID_TAGS_REQUEST:
+      return state
+        .set('fetchingLiquidTags', true)
+    case types.GET_LIQUID_TAGS_FAILURE:
+      return state
+        .set('fetchingLiquidTags', false)
+    case types.GET_LIQUID_TAGS_SUCCESS: 
+      return state
+        .set('fetchingLiquidTags', false)
     case types.GET_SCHEMA_FOR_ENTITY_SUCCESS: {
       const stateMeta = state.get('metaEntities');
+      const standardTagMap = _.keyBy(action?.data?.metaEntities?.standard, item => item?.definition?.value);
       return state
         .set('fetchingSchema', false)
         .set('metaEntities', {
           layouts: action.data && action.entityType === 'LAYOUT' ? action.data.metaEntities : stateMeta.layouts,
           tags: action.data && action.entityType === 'TAG' ? action.data.metaEntities : stateMeta.tags,
+          tagLookupMap: action?.data && action?.entityType === TAG ? standardTagMap : stateMeta?.tagLookupMap,
         })
         .set('fetchingSchemaError', false);
     }

package/v2Containers/Cap/sagas.js

@@ -149,6 +149,30 @@ export function* fetchSchemaForEntity(queryParams) {
   }
 }
 
+export function* getLiquidTags(action) {
+  try {
+    let result = yield call(Api.getLiquidTags, action?.data);
+    if (result) {
+      if (result?.errors?.length > 0) {
+        const getAskAiraErrorResponse = yield call(Api.askAiraForLiquid, {
+          templateContent: action?.data,
+          errorMessage: result?.errors?.[0]?.message,
+        });
+        if (getAskAiraErrorResponse?.result?.errors?.length) {
+          result = getAskAiraErrorResponse?.result;
+        }
+      }
+      if (action?.callback) {
+        yield call(action?.callback, result);
+      }
+      yield put({ type: types.GET_LIQUID_TAGS_SUCCESS });
+    } else {
+      yield put({ type: types.GET_LIQUID_TAGS_FAILURE });
+    }
+  } catch (error) {
+    yield put({ type: types.GET_LIQUID_TAGS_FAILURE });
+  }
+}
 const getTopbarData = (parentModule) => {
   switch (parentModule) {
     case LOYALTY:
@@ -193,7 +217,9 @@ export function* getSupportVideosConfig({ callback }) {
 export function* watchFetchSchemaForEntity() {
   yield takeLatest(types.GET_SCHEMA_FOR_ENTITY_REQUEST, fetchSchemaForEntity);
 }
-
+export function* watchLiquidEntity() {
+  yield takeLatest(types.GET_LIQUID_TAGS_REQUEST, getLiquidTags);
+}
 
 function* watchForOrgChange() {
   yield takeLatest(types.SWITCH_ORG_REQUEST, switchOrg);
@@ -226,6 +252,7 @@ export default [
   watchFetchSchemaForEntity,
   watchGetTopbarMenuData,
   watchForGetVideosConfig,
+  watchLiquidEntity,
 ];
 
 

package/v2Containers/Cap/selectors.js

@@ -67,6 +67,10 @@ const selectCurrentOrgDetails = () => createSelector(
     return currentOrgDetails ? currentOrgDetails.toJS() : null;
   }
 );
+const selectLiquidStateDetails = () => createSelector(
+  selectCapDomain,
+  (globalState) => globalState.get('fetchingLiquidTags')
+);
 
 const makeSelectFetchingSchema = () => createSelector(
   selectCapDomain,
@@ -108,4 +112,5 @@ export {
   makeSelectLoyaltyPromotionDisplay,
   makeSelectFetchingSchemaError,
   makeSelectDemoVideoAndLink,
+  selectLiquidStateDetails,
 };

package/v2Containers/Cap/tests/__snapshots__/index.test.js.snap

@@ -41,6 +41,7 @@ exports[`<Cap /> should render correct component 1`] = `
       "clearMetaEntities": [Function],
       "clearTopbarMenuData": [Function],
       "fetchSchemaForEntity": [Function],
+      "getLiquidTags": [Function],
       "getSupportVideosConfig": [Function],
       "getTopbarMenuData": [Function],
       "getUserData": [Function],