@capillarytech/creatives-library 8.0.290-alpha.3 → 8.0.290

package/v2Containers/Cap/mockData.js

@@ -2,9 +2,11 @@ export const expectedStateGetLiquidTagsRequest = {
   fetchingLiquidTags: true,
   fetchingSchema: true,
   fetchingSchemaError: "",
+  liquidTags: [],
   messages: [],
   metaEntities: {
     layouts: [],
+    tagLookupMap: {},
     tags: [],
   },
   orgID: "",
@@ -15,9 +17,11 @@ export const expectedStateGetLiquidTagsFailure = {
   fetchingLiquidTags: false,
   fetchingSchema: true,
   fetchingSchemaError: "",
+  liquidTags: [],
   messages: [],
   metaEntities: {
     layouts: [],
+    tagLookupMap: {},
     tags: [],
   },
   orgID: "",
@@ -28,9 +32,11 @@ export const expectedStateGetLiquidTagsSuccess = {
   fetchingLiquidTags: false,
   fetchingSchema: true,
   fetchingSchemaError: "",
+  liquidTags: [],
   messages: [],
   metaEntities: {
     layouts: [],
+    tagLookupMap: {},
     tags: [],
   },
   orgID: "",
@@ -41,9 +47,11 @@ export const expectedStateGetSchemaForEntitySuccessTAG = {
   fetchingLiquidTags: false,
   fetchingSchema: false,
   fetchingSchemaError: false,
+  liquidTags: [],
   messages: [],
   metaEntities: {
     layouts: undefined,
+    tagLookupMap: { undefined: { definition: {} } },
     tags: { standard: { random: "32" } },
   },
   orgID: "",
@@ -54,9 +62,11 @@ export const expectedStateGetSchemaForEntitySuccess = {
   fetchingLiquidTags: false,
   fetchingSchema: false,
   fetchingSchemaError: false,
+  liquidTags: [],
   messages: [],
   metaEntities: {
     layouts: undefined,
+    tagLookupMap: undefined,
     tags: undefined,
   },
   orgID: "",
@@ -68,9 +78,13 @@ export const expectedForwardedTags = {
   fetchingSchema: false,
   fetchingSchemaError: '',
   injectedTags: undefined,
+  liquidTags: [],
   messages: [],
   metaEntities: {
     layouts: [],
+    tagLookupMap: {
+
+    },
     tags: [],
   },
   orgID: "",

package/v2Containers/Cap/reducer.js

@@ -1,11 +1,13 @@
 /**
  * Created by vivek on 22/5/17.
  */
-import { fromJS } from 'immutable';
+import { fromJS, Map as ImmutableMap } from 'immutable';
 import _ from 'lodash';
 import * as types from './constants';
 import initialState from '../../initialState';
 import { FAILURE } from '../App/constants';
+import { TAG } from '../Whatsapp/constants';
+import { getTagMapValue, getForwardedMapValues, getLoyaltyTagsMapValue } from '../../utils/tagValidations';
 
 function capReducer(state = fromJS(initialState.cap), action) {
   switch (action.type) {
@@ -96,6 +98,39 @@ function capReducer(state = fromJS(initialState.cap), action) {
       return state
         .set('fetchingLiquidTags', false);
     case types.GET_SCHEMA_FOR_ENTITY_SUCCESS: {
+      //Process standard tags
+      const standardTagMapInitial = _.keyBy(
+        action?.data?.metaEntities?.standard,
+        item => item?.definition?.value
+      );
+      // Mapping only the `definition` object instead of the entire item, to reduce space used
+      const standardTagMap = _.mapValues(standardTagMapInitial, item => ({
+        definition: item?.definition ?? {},
+      }));
+
+      // Process custom tags
+      const customSubtags = getTagMapValue(action?.data?.metaEntities?.custom)
+      // Process extended tags
+      const extendedSubtags = getTagMapValue(action?.data?.metaEntities?.extended);
+
+      const loyaltySubTagsData = getLoyaltyTagsMapValue(action?.data?.metaEntities?.loyaltyTags);
+
+      const getExistingTagLookupMap = (state) => {
+        if (!state || !state.get) return {};
+        const tagLookupMap = state.getIn(['metaEntities', 'tagLookupMap']);
+        return state.get('metaEntities') && ImmutableMap.isMap(tagLookupMap)
+          ? tagLookupMap.toJS()
+          : {};
+      };
+
+      // Combine all maps
+      const combinedTagMap = {
+        ...standardTagMap,
+        ...customSubtags,
+        ...extendedSubtags,
+        ...loyaltySubTagsData,
+        ...getExistingTagLookupMap(state),
+      };
       const stateMeta = state.get("metaEntities");
       return state
         .set('fetchingSchema', false)
@@ -103,6 +138,7 @@ function capReducer(state = fromJS(initialState.cap), action) {
         .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 ? combinedTagMap : stateMeta?.tagLookupMap,
         })
         .set('fetchingSchemaError', false);
     }
@@ -110,6 +146,7 @@ function capReducer(state = fromJS(initialState.cap), action) {
       return state.set('metaEntities', {
         layouts: [],
         tags: [],
+        tagLookupMap: {},
       });
     // eslint-disable-next-line no-case-declarations
     case types.HIDE_TAGS:
@@ -117,8 +154,23 @@ function capReducer(state = fromJS(initialState.cap), action) {
       metaEntities.tags.standard = _.filter(state.get('metaEntities').tags.standard, (tag) => action.tagList.indexOf(tag.definition.value) === -1);
       metaEntities.tags.custom = _.filter(state.get('metaEntities').tags.custom, (tag) => action.tagList.indexOf(tag.name) === -1);
       return state.setIn(['metaEntities'], metaEntities);
-    case types.SET_INJECTED_TAGS:
-      return state.set("injectedTags", action.injectedTags);
+    case types.SET_INJECTED_TAGS: 
+
+      // Deep clone the tagLookupMap to avoid direct mutations
+      let updatedMetaEntitiesTagLookUp = _.cloneDeep(state.getIn(['metaEntities', 'tagLookupMap']));
+      const formattedInjectedTags = getForwardedMapValues(action?.injectedTags);
+      // Merge the injectedTags with the existing tagLookupMap
+      updatedMetaEntitiesTagLookUp = {
+        ...formattedInjectedTags || {},
+        ...updatedMetaEntitiesTagLookUp || {},
+      };
+      return state.set("injectedTags", action.injectedTags).setIn(
+        ["metaEntities"],
+        fromJS({
+          ...state.get("metaEntities"),
+          tagLookupMap: updatedMetaEntitiesTagLookUp
+        })
+      );
     case types.GET_TOPBAR_MENU_DATA_REQUEST:
       return state.set('topbarMenuData', fromJS({ status: 'request' }));
     case types.GET_TOPBAR_MENU_DATA_SUCCESS:

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

@@ -21,6 +21,7 @@ import {
   expectedStateGetSchemaForEntitySuccessTAG,
   expectedStateGetSchemaForEntitySuccess,
 } from '../mockData';
+import { TAG } from '../../Whatsapp/constants';
 import { loadItem } from '../../../services/localStorageApi';
 
 
@@ -117,3 +118,104 @@ describe('should handle GET_SUPPORT_VIDEOS_CONFIG', () => {
     expect(reducer(mockedInitialState, action).toJS())?.fetchingSchema?.toEqual(true);
   });
 });
+
+describe('GET_SCHEMA_FOR_ENTITY_SUCCESS handler', () => {
+  it.concurrent('should handle existing tagLookupMap correctly when metaEntities and tagLookupMap exist', () => {
+    const initialStateTest = fromJS({
+      token: loadItem('token') || '',
+      orgID: loadItem('orgID') || '',
+      messages: [],
+      metaEntities: {
+        tags: [{ id: 1, name: 'tag1' }],
+        layouts: ['layout1', 'layout2'],
+        tagLookupMap: {
+          existingTag: { definition: { value: 'existing' } },
+          anotherTag: { definition: { value: 'another' } },
+        },
+        standard: [],
+      },
+      liquidTags: [],
+      fetchingLiquidTags: false,
+      fetchingSchema: false,
+      fetchingSchemaError: '',
+    });
+
+    let action = {
+      type: GET_SCHEMA_FOR_ENTITY_SUCCESS,
+      entityType: TAG,
+      data: {
+        metaEntities: {
+          standard: [],
+          custom: [],
+          extended: [],
+        },
+      },
+    };
+
+    let newState = reducer(initialStateTest, action);
+    let metaEntities = newState.get('metaEntities');
+
+    expect(metaEntities).toEqual(expect.objectContaining({
+      tagLookupMap: expect.objectContaining({
+        existingTag: expect.objectContaining({
+          definition: expect.objectContaining({
+            value: 'existing',
+          }),
+        }),
+      }),
+    }));
+
+    action = {
+      type: GET_SCHEMA_FOR_ENTITY_SUCCESS,
+      entityType: 'LAYOUT',
+      data: {
+        metaEntities: {
+          layouts: ['layout1', 'layout2'],
+          standard: [],
+        },
+      },
+    };
+    newState = reducer(initialStateTest, action);
+    metaEntities = newState.get('metaEntities');
+    expect(metaEntities).toEqual(expect.objectContaining({
+      layouts: expect.objectContaining({
+        layouts: expect.arrayContaining(['layout1', 'layout2']),
+      }),
+    }));
+  });
+
+  it.concurrent('should handle non-existent tagLookupMap by returning empty object', () => {
+    const initialStateTest = fromJS({
+      token: loadItem('token') || '',
+      orgID: loadItem('orgID') || '',
+      messages: [],
+      metaEntities: {
+        tagLookupMap: {},
+      },
+      liquidTags: [],
+      fetchingLiquidTags: false,
+      fetchingSchema: false,
+      fetchingSchemaError: '',
+    });
+
+    const action = {
+      type: GET_SCHEMA_FOR_ENTITY_SUCCESS,
+      entityType: TAG,
+      data: {
+        metaEntities: {
+          standard: [],
+          custom: [],
+          extended: [],
+        },
+      },
+    };
+
+    const newState = reducer(initialStateTest, action);
+    const metaEntities = newState.get('metaEntities');
+
+    // Updated assertions to handle plain object
+    expect(metaEntities).toBeDefined();
+    expect(metaEntities.tagLookupMap).toBeDefined();
+    expect(metaEntities.tagLookupMap).toEqual({});
+  });
+});

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -53,7 +53,6 @@ function SlideBoxFooter(props) {
   // Only apply validation state checks for EMAIL channel in HTML Editor mode (not BEE/DragDrop)
   // For other channels, BEE editor, or when htmlEditorValidationState is not provided, don't disable based on validation
   const isEmailChannel = currentChannel?.toUpperCase() === 'EMAIL';
-  const isSmsChannel = currentChannel?.toUpperCase() === 'SMS';
   const isEditMode = slidBoxContent === 'editTemplate';
 
   // Use selectedEmailCreateMode for accurate mode detection in create mode (emailCreateMode is mapped for backwards compatibility)
@@ -130,9 +129,8 @@ function SlideBoxFooter(props) {
   const isBEEEditorModeInCreate = !isHTMLEditorMode && !isEditMode;
   const isBEEEditorMode = isBEEEditorModeInEdit || isBEEEditorModeInCreate;
   const hasBEEEditorErrors = isEmailChannel && isBEEEditorMode && (hasStandardErrors || hasLiquidErrors) && (!htmlEditorValidationState || !htmlEditorHasErrors);
-  const hasSmsValidationErrors = isSmsChannel && hasStandardErrors;
 
-  const shouldShowErrorInfoNote = hasBEEEditorErrors || hasSmsValidationErrors || isSupportCKEditor;
+  const shouldShowErrorInfoNote = hasBEEEditorErrors || isSupportCKEditor;
 
   // Check for personalization tokens in title/message when anonymous user tries to save
   const hasPersonalizationTokens = () => {

package/v2Containers/CreativesContainer/index.js

@@ -132,6 +132,7 @@ export class Creatives extends React.Component {
       },
       hasPersonalizationTokenError: false, // Track personalization token errors in form
     };
+    this.liquidFlow = Boolean(commonUtil.hasLiquidSupportFeature());
     this.creativesTemplateSteps = {
       1: 'modeSelection',
       2: 'templateSelection', // only for email in current flows wil be used for mpush, line and wechat as well.
@@ -255,23 +256,12 @@ export class Creatives extends React.Component {
   };
 
   onShowTemplates = () => {
-    this.setState({
-      slidBoxContent: 'templates',
-      showSlideBox: true,
-      isGetFormData: false,
-      liquidErrorMessage: { STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] },
-      isLiquidValidationError: false,
-    });
+    this.setState({ slidBoxContent: 'templates', showSlideBox: true, isGetFormData: false });
     this.resetStep();
   };
 
   onChannelChange = (channel) => {
-    this.setState({
-      currentChannel: channel,
-      templateData: null,
-      liquidErrorMessage: { STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] },
-      isLiquidValidationError: false,
-    });
+    this.setState({ currentChannel: channel, templateData: null });
   }
 
   onCreateNextStep = () => {
@@ -1479,12 +1469,11 @@ export class Creatives extends React.Component {
   }
 
   getFormData = (template) => {
-    // Always reset isGetFormData so the child does not re-send form data on every re-render
-    // (e.g. when user fixes validation error by typing, we must not auto-close the slidebox)
-    this.setState({ isGetFormData: false });
     if (template.validity) {
       this.setState(
-        {},
+        {
+          isGetFormData: false,
+        },
         () => {
           const templateData = this.state.templateData ? this.state.templateData : template; //select existing or create new content
           const channel = templateData.type;
@@ -1568,8 +1557,6 @@ export class Creatives extends React.Component {
       ...prevState,
       templateData: undefined,
       showSlideBox: false,
-      liquidErrorMessage: { STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] },
-      isLiquidValidationError: false,
     }), () => this.props.handleCloseCreatives(reloadTemplates));
   };
 

package/v2Containers/Email/index.js

@@ -26,7 +26,7 @@ import * as globalActions from '../Cap/actions';
 import './_email.scss';
 import {getMessageObject} from '../../utils/messageUtils';
 import EmailPreview from '../../v2Components/EmailPreview';
-import { getDecodedFileName, hasSupportCKEditor } from '../../utils/common';
+import { getDecodedFileName, hasLiquidSupportFeature, hasSupportCKEditor } from '../../utils/common';
 import Pagination from '../../v2Components/Pagination';
 import * as creativesContainerActions from '../CreativesContainer/actions';
 import withCreatives from '../../hoc/withCreatives';
@@ -170,6 +170,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         deleteLanguage: this.deleteLanguage,
       },
     };
+    this.liquidFlow =  hasLiquidSupportFeature();
   }
   componentWillMount() {
     const formData = this.initFormData(this.props, true); //_.cloneDeep(this.state.formData);
@@ -254,6 +255,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       layout: 'EMAIL',
       type: 'LAYOUT',
       version: 'v2',
+      liquidFlow:this.liquidFlow,
     };
     this.props.globalActions.fetchSchemaForEntity(query);
     window.addEventListener("message", this.handleFrameTasks);
@@ -345,6 +347,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           type: 'TAG',
           context: this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default',
           embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
+          liquidFlow:this.liquidFlow
         };
         if (this.props.getDefaultTags) {
           query.context = this.props.getDefaultTags;
@@ -2370,6 +2373,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       type: 'TAG',
       context: (data || '').toLowerCase() === 'all' ? 'default' : (data || '').toLowerCase(),
       embedded: 'full',
+      liquidFlow:this.liquidFlow
     };
     this.props.globalActions.fetchSchemaForEntity(query);
   }

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -15,7 +15,7 @@ import HTMLEditor from '../../../v2Components/HtmlEditor';
 import CapTagListWithInput from '../../../v2Components/CapTagListWithInput';
 import formBuilderMessages from '../../../v2Components/FormBuilder/messages';
 import { validateLiquidTemplateContent } from '../../../utils/commonUtils';
-import { isEmailUnsubscribeTagOptional } from '../../../utils/common';
+import { hasLiquidSupportFeature, isEmailUnsubscribeTagMandatory } from '../../../utils/common';
 import history from '../../../utils/history';
 import messages from '../messages';
 import emailMessages from '../../Email/messages';
@@ -108,10 +108,13 @@ const EmailHTMLEditor = (props) => {
     standardErrors: [],
   });
 
-  // Merge tag validation errors (missing) into apiValidationErrors so they show in ValidationErrorDisplay
+  // Merge tag validation errors (unsupported/missing) into apiValidationErrors so they show in ValidationErrorDisplay
   const mergedApiValidationErrors = useMemo(() => {
     const tagMessages = [];
-    if (tagValidationError?.missingTags?.length && !isEmailUnsubscribeTagOptional()) {
+    if (tagValidationError?.unsupportedTags?.length) {
+      tagMessages.push(`Unsupported tags are: ${tagValidationError.unsupportedTags.join(', ')}`);
+    }
+    if (tagValidationError?.missingTags?.length && !isEmailUnsubscribeTagMandatory()) {
       tagMessages.push(`Missing tags are: ${tagValidationError.missingTags.join(', ')}`);
     }
     if (tagMessages.length === 0) {
@@ -187,6 +190,9 @@ const EmailHTMLEditor = (props) => {
     },
   }), [htmlContent, subject, currentOrgDetails]);
 
+  // Check if liquid support is enabled
+  const isLiquidEnabled = hasLiquidSupportFeature();
+
   // Detect edit mode: when isEditEmail is false (create flow), never treat as edit or fetch template details
   const hasParamsId = params?.id || location?.query?.id || location?.params?.id || location?.pathname?.includes('/edit/');
   const currentTemplateId = isEditEmail
@@ -487,8 +493,10 @@ const EmailHTMLEditor = (props) => {
       const validationResult = validateTags({
         content,
         tagsParam: tags,
+        injectedTagsParams: injectedTags,
         location,
         tagModule: getDefaultTags,
+        eventContextTags,
         isFullMode,
       });
 
@@ -642,7 +650,7 @@ const EmailHTMLEditor = (props) => {
     // IMPORTANT: Clear API validation errors FIRST before checking for validation errors
     // This ensures that old API errors don't block the save when user fixes content and clicks Update again
     // We'll re-validate with fresh API call anyway
-    if (getLiquidTags) {
+    if (isLiquidEnabled && getLiquidTags) {
       setApiValidationErrors({
         liquidErrors: [],
         standardErrors: [],
@@ -704,7 +712,7 @@ const EmailHTMLEditor = (props) => {
     // When EMAIL_UNSUBSCRIBE_TAG_MANDATORY is false: validate and require unsubscribe tag.
     // Run for both library and full mode so liquid-enabled orgs also get the error (notification + ValidationErrorDisplay).
     const isModuleTypeOutbound = (moduleType || '').toUpperCase() === OUTBOUND;
-    if (!isEmailUnsubscribeTagOptional() && isModuleTypeOutbound) {
+    if (!isEmailUnsubscribeTagMandatory() && isModuleTypeOutbound) {
       const unsubscribeRegex = /{{unsubscribe(\(#[a-zA-Z\d]{6}\))?}}/g; // eslint-disable-line no-useless-escape
       const hasUnsubscribeTag = unsubscribeRegex.test(htmlContent);
 
@@ -736,17 +744,52 @@ const EmailHTMLEditor = (props) => {
       const validationResult = validateTags({
         content: htmlContent,
         tagsParam: tags,
+        injectedTagsParams: injectedTags,
         location,
         tagModule: getDefaultTags,
+        eventContextTags,
         isFullMode,
       });
 
-      if (!validationResult?.valid) {
+      const hasUnsupportedTags = validationResult?.unsupportedTags?.length > 0;
+      if (!validationResult?.valid || (hasUnsupportedTags && !isFullMode)) {
         setTagValidationError(validationResult);
-        // For liquid orgs, show warning and continue (extractTags API will validate)
+        // IMPORTANT: For non-liquid orgs, block save (like CK/BEE editor)
+        // For liquid orgs, continue (extractTags API will validate)
+        if (!isLiquidEnabled) {
+          // Show notification popup like CK/BEE editor
+          const baseLanguage = get(currentOrgDetails, 'basic_details.base_language', 'en');
+
+          const contentNotValidMsg = intl.formatMessage(formBuilderMessages.contentNotValidLanguage);
+          let errorMessage = `${contentNotValidMsg} ${baseLanguage}`;
+
+          if (hasUnsupportedTags) {
+            const unsupportedTagsMsg = intl.formatMessage(formBuilderMessages.unsupportedTags);
+            errorMessage += `\n${unsupportedTagsMsg} ${validationResult?.unsupportedTags?.join(', ')}`;
+          }
+          if (validationResult?.missingTags?.length > 0) {
+            const missingTagsMsg = intl.formatMessage(formBuilderMessages.missingTags);
+            errorMessage += `\n${missingTagsMsg} ${validationResult?.missingTags?.join(', ')}`;
+          }
+
+          const type = 'error';
+          CapNotification[type]({
+            message: `${type.toUpperCase()} ! ! ! `,
+            description: errorMessage,
+            duration: 5,
+          });
+
+          // Reset parent state so next click is detected as a change
+          if (onValidationFail) {
+            onValidationFail();
+          }
+          // Block save for non-liquid orgs
+          return;
+        }
+        // For liquid orgs, just show warning and continue
       }
       // Clear tag errors if valid
-      if (tagValidationError && validationResult?.valid) {
+      if (tagValidationError && validationResult?.valid && !hasUnsupportedTags) {
         setTagValidationError(null);
       }
     }
@@ -913,8 +956,8 @@ const EmailHTMLEditor = (props) => {
       }
     };
 
-    // Validate first using extractTags API
-    if (getLiquidTags) {
+    // If liquid enabled, validate first using extractTags API
+    if (isLiquidEnabled && getLiquidTags) {
       // Note: API validation errors are already cleared at the start of handleSave
       // This ensures fresh validation on every save attempt
 
@@ -955,6 +998,10 @@ const EmailHTMLEditor = (props) => {
         messages: formBuilderMessages,
         onError,
         onSuccess,
+        tagLookupMap: metaEntities?.tagLookupMap,
+        eventContextTags,
+        isLiquidFlow: true,
+        forwardedTags: forwardedTags || {},
       });
     } else {
       performSave();
@@ -966,6 +1013,7 @@ const EmailHTMLEditor = (props) => {
     injectedTags,
     location,
     getDefaultTags,
+    eventContextTags,
     formatMessage,
     subjectError,
     isFullMode,
@@ -977,8 +1025,11 @@ const EmailHTMLEditor = (props) => {
     emailActions,
     getFormdata,
     isGetFormData,
+    isLiquidEnabled,
     getLiquidTags,
     showLiquidErrorInFooter,
+    metaEntities,
+    forwardedTags,
     globalActions,
     intl,
     extractedTemplateName,
@@ -1124,6 +1175,7 @@ const EmailHTMLEditor = (props) => {
             userLocale={intl.locale || 'en'}
             moduleFilterEnabled={location?.query?.type !== EMBEDDED}
             onTagContextChange={handleOnTagsContextChange}
+            isLiquidEnabled={isLiquidEnabled}
             isFullMode={isFullMode}
             onErrorAcknowledged={handleErrorAcknowledged}
             onValidationChange={handleValidationChange}