@capillarytech/creatives-library 6.8.4 → 6.8.6

package/app.js

@@ -76,6 +76,7 @@ Bugsnag.start({
   // eslint-disable-next-line no-undef
   apiKey: BUGSNAG_API_KEY,
   releaseStage: window.location.hostname,
+  enabledReleaseStages: ['production', 'staging'],
   plugins: [new BugsnagPluginReact()],
   onError: bugSnagErrorCallback,
 });

package/config/app.js

@@ -14,7 +14,7 @@ const config = {
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
-    api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
+    api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',
     arya_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1',

package/package.json

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

package/utils/tagValidations.js

@@ -0,0 +1,137 @@
+/*
+ * This file is to maintain the tag validations
+ * across the forms used in creatives, very
+ * similar to the FormBuilder component.
+ * The motive is to chizzling out the dependency from
+ * FormBuilder component into meaningful blocks
+*/
+
+import lodashForEach from 'lodash/forEach';
+import lodashCloneDeep from 'lodash/cloneDeep';
+
+const DEFAULT = 'default';
+const SUBTAGS = 'subtags';
+
+export const validateTags = ({
+  content,
+  tagsParam,
+  injectedTagsParams,
+  location,
+  tagModule,
+}) => {
+  const tags = tagsParam;
+  const injectedTags = transformInjectedTags(injectedTagsParams);
+  let currentModule = location.query.module ? location.query.module : DEFAULT;
+  if (tagModule) {
+    currentModule = tagModule;
+  }
+  const response = {
+    valid: true,
+    missingTags: [],
+    unsupportedTags: [],
+  };
+  if(tags && tags.length) {
+    lodashForEach(tags, ({
+      definition: {
+        supportedModules,
+        value,
+      },
+    }) => {
+      lodashForEach(supportedModules, (module) => {
+        if (module.mandatory && (currentModule === module.context)) {
+          if (content.indexOf(`{{${value}}}`) === -1) {
+            response.valid = false;
+            response.missingTags.push(value);
+          }
+        }
+      });
+    });
+    const regex = /{{[(A-Z\w+(\s\w+)*$\(\)@!#$%^&*~.,/\\]+}}/g;
+    let match = regex.exec(content);
+    while (match !== null) {
+      const tagValue = match[0].substring(indexOfEnd(match[0], '{{'), match[0].indexOf('}}'));
+      match = regex.exec(content);
+      let ifSupported = false;
+      lodashForEach(tags, (tag) => {
+        if (tag.definition.value === tagValue) {
+          ifSupported = true;
+        }
+      });
+      const ifSkipped = skipTags(tagValue);
+      if (ifSkipped) {
+        ifSupported = true;
+        let isUnsubscribeSkipped = tagValue.indexOf("unsubscribe") != -1 ;
+        if (isUnsubscribeSkipped) {
+          const missingTagIndex = response.missingTags.indexOf("unsubscribe");
+          if(missingTagIndex != -1) { //skip regex tags for mandatory tags also
+            response.missingTags.splice(missingTagIndex, 1);
+          }
+        }
+      }
+      ifSupported = ifSupported || checkIfSupportedTag(tagValue, injectedTags);
+      if (!ifSupported) {
+        response.unsupportedTags.push(tagValue);
+        response.valid = false;
+      }
+      if (response.unsupportedTags.length == 0 && response.missingTags.length == 0 ) {
+        response.valid = true;
+      }
+    }
+  }
+  return response;
+}
+
+const checkIfSupportedTag = (checkingTag, injectedTags) => {
+  let result = false;
+  lodashForEach(injectedTags, (tag, key) => {
+    if (tag.subtags && checkIfSupportedTag(checkingTag, tag.subtags)) {
+      result = true;
+    } else if (checkingTag === key) {
+      result = true;
+    }
+  });
+  
+  return result;
+}
+
+const indexOfEnd = (targetString, string) => {
+  let io = targetString.indexOf(string);
+  return io == -1 ? -1 : io + string.length;
+}
+
+const 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].*\\([\\d]*\\)"];
+  let skipped = false;
+  lodashForEach(regexGroups, (group) => {
+    const groupRegex = new RegExp(group, "g");
+    let match = groupRegex.exec(tag);
+    if (match !== null ) {
+      skipped = true;
+      return true;
+    }
+    return true;
+  });
+  return skipped;
+}
+
+const transformInjectedTags = (tags) => {
+  lodashForEach(tags, (tag) => {
+    const temp = tag;
+    let subKey = '';
+    Object.keys(tag).map( (k) => {
+      if (k.indexOf(SUBTAGS) !== -1) {
+        subKey = k;
+      }
+      return true;
+    });
+    if (subKey !== '') {
+      temp['tag-header'] = true;
+      if (subKey !== SUBTAGS) {
+        temp.subtags =lodashCloneDeep(temp[subKey]);
+        delete temp[subKey];
+      }
+      temp.subtags = transformInjectedTags(temp.subtags);
+    }
+  });
+  return tags;
+}

package/v2Containers/Line/Container/ImageMap/index.js

@@ -166,6 +166,9 @@ export const LineImageMap = ({
         const validWidth = width === LINE_ASSET_WIDTH;
         const isCustom = assetType === CUSTOM_ASSET_TYPE;
         const validHeight = isCustom ? ( LINE_CUSTOM_ASSET_HEIGHT_MIN <= height && height <= LINE_CUSTOM_ASSET_HEIGHT_MAX) : height === LINE_ASSET_HEIGHT;
+        if (isCustom) {
+            data.fileParams.assetType = CUSTOM_ASSET_TYPE;
+        }
         if (incorrectFile || !validWidth || !validHeight) {
             updateImageErrorMessage(formatMessage(messages.lineImageMapIncorrectSize));
         } else {
@@ -177,7 +180,7 @@ export const LineImageMap = ({
             });
             actions.uploadAsset(
                 data.file,
-                isCustom ? `${data.type}?assetType=${CUSTOM_ASSET_TYPE}` : data.type,
+                data.type,
                 data.fileParams,
             );
         }

package/v2Containers/Line/Container/Text/index.js

@@ -15,6 +15,8 @@ import messages from './messages';
 import style from './style';
 import withStyles from '../../../../hoc/withStyles';
 
+import { validateTags } from '../../../../utils/tagValidations';
+
 const { TextArea } = CapInput;
 const {CapCustomCardList} = CapCustomCard;
 
@@ -71,7 +73,7 @@ export const LineText = ({
     useEffect(() => {
         if (messageContent && (isFullMode ? messageTitle : true)) {
             updateMessageState({
-                isError: (messageContent.length > charLimit) || (!messageContent || !(isFullMode ? messageTitle : true) || (errorMessageTextarea && errorMessageTitle)),
+                isError: (messageContent.length > charLimit) || (!messageContent || !(isFullMode ? messageTitle : true) || (errorMessageTextarea || errorMessageTitle)),
                 messageContent,
                 messageTitle,
                 index,
@@ -116,10 +118,19 @@ export const LineText = ({
 
     const updateTextContentError = (value) => {
         let errorMessage = false;
+        const { valid } = validateTags({
+            content: value,
+            tagsParam: tags,
+            injectedTagsParams: injectedTags,
+            location,
+            tagModule: 'outbound',
+        }) || {};
         if (value === '') {
             errorMessage = formatMessage(messages.emptyTitleErrorMessage);
         } else if (value.length > charLimit) {
             errorMessage = formatMessage(messages.limitExceededContentErrorMessage);
+        } else if (!valid && !isFullMode) {
+            errorMessage = formatMessage(messages.invalidTagError);
         }
         updateErrorMessageTextArea(errorMessage);
     }
@@ -128,7 +139,7 @@ export const LineText = ({
         updateTextMessageContent(value);
         updateTextContentError(value);
         updateMessageState({
-            isError: (value.length > charLimit) || (!value || !(isFullMode ? messageTitle : true) || (!value && errorMessageTitle)),
+            isError: (value.length > charLimit) || (!value || !(isFullMode ? messageTitle : true) || (!value || errorMessageTitle)),
             messageContent: value,
             messageTitle,
             index,
@@ -149,7 +160,7 @@ export const LineText = ({
         updateTextMessageTitle(value);
         updateTextTitleError(value);
         updateMessageState({
-            isError: (messageContent.length > charLimit) || (!messageContent || !(isFullMode ? value : true) || (!value && errorMessageTextarea)),
+            isError: (messageContent.length > charLimit) || (!messageContent || !(isFullMode ? value : true) || (!value || errorMessageTextarea)),
             messageContent,
             messageTitle: value,
             index,
@@ -158,7 +169,11 @@ export const LineText = ({
         });
     }
 
-    const onTagSelect = (data) => updateTextMessageContent(`${messageContent}{{${data}}}`);
+    const onTagSelect = (data) => {
+        const messageData = `${messageContent}{{${data}}}`;
+        updateTextMessageContent(messageData);
+        updateTextContentError(messageData);
+    }
 
     const setNewContent = () => updateCreateNew(true);
 

package/v2Containers/Line/Container/Text/messages.js

@@ -71,4 +71,8 @@ export default defineMessages({
     id: `${scope}.searchText`,
     defaultMessage: 'Search Text',
   },
+  "invalidTagError": {
+    id: `${scope}.invalidTagError`,
+    defaultMessage: 'Please check the message content for unsupported/missing tags',
+  },
 });