@capillarytech/creatives-library 8.0.31 → 8.0.33

package/containers/App/constants.js

@@ -110,3 +110,4 @@ export const BADGES_ISSUE = 'BADGES_ISSUE';
 
 export const CUSTOMER_BARCODE_TAG = "customer_barcode";
 export const COPY_OF = "Copy of";
+export const ENTRY_TRIGGER_TAG_REGEX = /\bentryTrigger_\w+(_\w+)?(\(\w+\))?/g;

package/package.json

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

package/utils/tagValidations.js

@@ -8,6 +8,7 @@
 
 import lodashForEach from 'lodash/forEach';
 import lodashCloneDeep from 'lodash/cloneDeep';
+import { ENTRY_TRIGGER_TAG_REGEX } from '../containers/App/constants';
 
 const DEFAULT = 'default';
 const SUBTAGS = 'subtags';
@@ -17,7 +18,7 @@ const SUBTAGS = 'subtags';
  * @param {Object} response - The response object to check.
  * @param {Object} tagObject - The tagLookupMap.
  */
-export const checkSupport = (response = {}, tagObject = {}, eventContextTags = []) => {
+export const checkSupport = (response = {}, tagObject = {}, eventContextTags = [], isLiquidFlow = false) => {
   const supportedList = [];
   // Verifies the presence of the tag in the 'Add Labels' section.
   // Incase of journey event context the tags won't be available in the tagObject(tagLookupMap).
@@ -25,6 +26,13 @@ export const checkSupport = (response = {}, tagObject = {}, eventContextTags = [
 
   // Verify if childTag is a valid sub-tag of parentTag from the 'Add Labels' section or if it's unsupported.
   const checkSubtags = (parentTag, childName) => {
+    // For event context tags the parentTag will be the event context tag name and subtags will be the child attributes for leaderboards
+    if (checkNameInTagObjectOrEventContext(parentTag) && isLiquidFlow && eventContextTags?.length) {
+      const childNameAfterDot = childName?.split(".")?.[1];
+      if (eventContextTags?.some((tag) => tag?.subTags?.includes(childNameAfterDot))) {
+        supportedList.push(childName);
+      }
+    }
     if (!tagObject?.[parentTag]) return false;
     let updatedChildName = childName;
     if (childName?.includes(".")) {
@@ -195,6 +203,10 @@ const indexOfEnd = (targetString, string) => {
 }
 
 export const skipTags = (tag) => {
+  // If the tag contains the word "entryTrigger_", then it's an event context tag and should not be skipped.
+  if (tag?.match(ENTRY_TRIGGER_TAG_REGEX)) {
+    return false;
+  }
   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]*\\)"];
   let skipped = false;
   lodashForEach(regexGroups, (group) => {

package/utils/tests/tagValidations.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom';
-import { checkSupport, extractNames, getTagMapValue, preprocessHtml, validateIfTagClosed,validateTags} from '../tagValidations';
+import { checkSupport, extractNames, getTagMapValue, preprocessHtml, validateIfTagClosed,validateTags, skipTags } from '../tagValidations';
 import { eventContextTags } from '../../v2Containers/TagList/tests/mockdata';
 
 describe("check if curly brackets are balanced", () => {
@@ -376,6 +376,34 @@ describe("checkSupport", () => {
     const result = checkSupport(response, {});
     expect(result).toEqual([]);
   });
+
+  it("should add childName to supportedList if it is a subtag of parentTag in eventContextTags", () => {
+    const response = { data: [{ name: "leaderboard", children: [{name: "person.userId"}]}]};
+    const tagObject = {};
+    const eventContextTags = [{ tagName: "leaderboard", subTags: ["userId"]}];
+    const isLiquidFlow = true;
+    const result = checkSupport(response, tagObject, eventContextTags, isLiquidFlow);
+    expect(result).toEqual( [ 'leaderboard', 'person.userId' ]);
+  });
+
+  it("should not add childName to supportedList which does not have dot in eventContextTags", () => {
+    // This case is unlikely to happen as we are not supporting tags without dot in eventContextTags
+    const response = { data: [{ name: "entryTrigger_lifetimePoints", children: [{name: "userId"}] }]};
+    const tagObject = {};
+    const eventContextTags = [{ tagName: "entryTrigger_lifetimePoints", children: [{name: "userId"}] }];
+    const isLiquidFlow = true;
+    const result = checkSupport(response, tagObject, eventContextTags, isLiquidFlow);
+    expect(result).toEqual( [ "entryTrigger_lifetimePoints" ]);
+  });
+
+  it("should add only parent tag to supportedList if isLiquidFlow false", () => {
+    const response = { data: [{ name: "leaderboard", children: [{name: "person.userId"}]}]};
+    const tagObject = {};
+    const eventContextTags = [{ tagName: "leaderboard", subTags: ["userId"]}];
+    const isLiquidFlow = false;
+    const result = checkSupport(response, tagObject, eventContextTags, isLiquidFlow);
+    expect(result).toEqual( [ 'leaderboard' ]);
+  });
 });
 
 describe('preprocessHtml', () => {
@@ -454,4 +482,18 @@ describe("getTagMapValue", () => {
     const result = getTagMapValue(object);
     expect(result).toEqual({ name: "233" });
   });
+});
+
+describe("skipTags", () => {
+  it("should return false for event context tags", () => {
+    const tag = "entryTrigger_uniqueTagPrefix(raindrops_match)";
+    const result = skipTags(tag);
+    expect(result).toEqual(false);
+  });
+
+  it("should return true for tags matching regex patterns", () => {
+    const tag = "voucher(12345)";
+    const result = skipTags(tag);
+    expect(result).toEqual(true);
+  });
 });

package/v2Components/FormBuilder/_formBuilder.scss

@@ -50,7 +50,7 @@
 .hide{
   display: none;
 }
-.error{
+.error-form-builder {
   color : #F34F56;
 }
 

package/v2Components/FormBuilder/index.js

@@ -55,7 +55,7 @@ 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 { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX} from '../../containers/App/constants';
 import { hasLiquidSupportFeature, isEmailUnsubscribeTagMandatory } from '../../utils/common';
 import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
 import { bindActionCreators } from 'redux';
@@ -1121,7 +1121,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             const supportedLiquidTags = checkSupport(
               result,
               this.props?.metaEntities?.tagLookupMap,
-              this.props?.eventContextTags
+              this.props?.eventContextTags,
+              this.liquidFlow,
             );
             const unsupportedLiquidTags = extractedLiquidTags?.filter(
               (tag) => !supportedLiquidTags?.includes(tag) && !this.skipTags(tag)
@@ -1197,6 +1198,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   };
 
   skipTags(tag) {
+    // If the tag contains the word "entryTrigger_", then it's an event context tag and it should not be skipped.
+    if (tag?.match(ENTRY_TRIGGER_TAG_REGEX)) {
+      return false;
+    }
     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]*\\)"];
     //const regexGroups = [];
     let skipped = false;
@@ -2478,7 +2483,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           <TextArea
             id={val.id}
             placeholder={val.placeholder ? val.placeholder : ''}
-            className={`${ifError ? 'error' : ''}`}
+            className={`${ifError ? 'error-form-builder' : ''}`}
             errorMessage={errorMessageText}
             label={val.label}
             autosize={val.autosize ? val.autosizeParams : false}

package/v2Containers/TagList/index.js

@@ -105,7 +105,7 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       }
     }
     if (eventContextTags?.length) {
-      const TAG_HEADER_MSG_LABEL = this.props.intl.formatMessage(messages.tagsBasedOnEntryTriggerEvent);
+      const TAG_HEADER_MSG_LABEL = this.props.intl.formatMessage(messages.entryEvent);
       eventContextTagsObj.EventContextTags = {
         name: TAG_HEADER_MSG_LABEL,
         desc: TAG_HEADER_MSG_LABEL,

package/v2Containers/TagList/messages.js

@@ -11,8 +11,8 @@ export default defineMessages({
     id: `${scope}.header`,
     defaultMessage: 'This is TagList container !',
   },
-  tagsBasedOnEntryTriggerEvent: {
-    id: `${scope}.tagsBasedOnEntryTriggerEvent`,
-    defaultMessage: 'Tags based on entry trigger event',
+  entryEvent: {
+    id: `${scope}.entryEvent`,
+    defaultMessage: 'Entry event',
   },
 });

package/v2Containers/TagList/tests/TagList.test.js

@@ -46,7 +46,7 @@ describe("TagList test :  UNIT", () => {
   it('should render event context tags correctly from generateTags', () => {
     initializeTagList({eventContextTags});
     addLabelBtnAssertion();
-    const EVENT_CONTEXT_TAG_HEADER = getByText('Tags based on entry trigger event');
+    const EVENT_CONTEXT_TAG_HEADER = getByText('Entry event');
     expect(EVENT_CONTEXT_TAG_HEADER).toBeInTheDocument();
     fireEvent.click(EVENT_CONTEXT_TAG_HEADER);
     expect(getByText('lifetimePurchases')).toBeInTheDocument();