@capillarytech/creatives-library 8.0.309 → 8.0.310

package/constants/unified.js

@@ -43,6 +43,7 @@ export const HOSPITALITY_BASED_SCOPE = 'HOSPITALITY_BASED_SCOPE';
 export const REGISTRATION_CUSTOM_FIELD = 'Registration custom fields';
 export const GIFT_CARDS = 'GIFT_CARDS';
 export const PROMO_ENGINE = 'PROMO_ENGINE';
+export const LIQUID_SUPPORT = 'ENABLE_LIQUID_SUPPORT';
 export const ENABLE_NEW_MPUSH = 'ENABLE_NEW_MPUSH';
 export const ENABLE_NEW_EDITOR_FLOW_INAPP = 'ENABLE_NEW_EDITOR_FLOW_INAPP';
 export const SUPPORT_CK_EDITOR = 'SUPPORT_CK_EDITOR';
@@ -150,11 +151,6 @@ export const BADGES_ENROLL = 'BADGES_ENROLL';
 export const BADGES_ISSUE = 'BADGES_ISSUE';
 export const CUSTOMER_BARCODE_TAG = 'customer_barcode';
 export const COPY_OF = 'Copy of';
-export const UNSUBSCRIBE_TAG = 'unsubscribe';
-/** Whitespace-tolerant check for {{ unsubscribe }}-style tag in content. */
-export const UNSUBSCRIBE_TAG_REGEX = new RegExp(`\\{\\{\\s*${UNSUBSCRIBE_TAG}\\s*\\}\\}`);
-/** Matches {{ ... }} and captures the inner tag content (for scanning content for tags). */
-export const TAG_CONTENT_REGEX = /{{([^}]+)}}/g;
 export const ENTRY_TRIGGER_TAG_REGEX = /\bentryTrigger\.\w+(?:\.\w+)?(?:\(\w+\))?/g;
 export const SKIP_TAGS_REGEX_GROUPS = ["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]*\\)", "referral_unique_(code|url).*userid"];
 

package/initialState.js

@@ -14,7 +14,9 @@ export default {
     metaEntities: {
       tags: [],
       layouts: [],
+      tagLookupMap: {},
     },
+    liquidTags: [],
     fetchingLiquidTags: false,
     fetchingSchema: true,
     fetchingSchemaError: '',

package/package.json

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

package/services/api.js

@@ -735,21 +735,4 @@ export const getBeePopupBuilderToken = () => {
   return request(url, getAPICallObject('GET'));
 };
 
-/**
- * Look up member by identifier (email or mobile) for add test customer flow.
- * Uses standard API auth headers (no x-cap-ct) to avoid CORS preflight issues with node layer.
- * @param {string} identifierType - 'email' or 'mobile'
- * @param {string} identifierValue - email address or mobile number
- * @returns {Promise} Promise resolving to { success, response: { exists, customerDetails } }
- */
-export const getMembersLookup = (identifierType, identifierValue) => {
-  const url = `${API_ENDPOINT}/members?identifierType=${encodeURIComponent(identifierType)}&identifierValue=${encodeURIComponent(identifierValue)}`;
-  return request(url, getAPICallObject('GET'));
-};
-
-export const createTestCustomer = (payload) => {
-  const url = `${API_ENDPOINT}/testCustomers`;
-  return request(url, getAPICallObject('POST', payload));
-};
-
 export {request, getAPICallObject};

package/services/tests/api.test.js

@@ -28,8 +28,6 @@ import {
   getAssetStatus,
   getBeePopupBuilderToken,
   getCmsAccounts,
-  getMembersLookup,
-  createTestCustomer,
 } from '../api';
 import { mockData } from './mockData';
 import getSchema from '../getSchema';
@@ -1009,86 +1007,3 @@ describe('getCmsAccounts', () => {
     expect(result).toBeInstanceOf(Promise);
   });
 });
-
-describe('getMembersLookup', () => {
-  beforeEach(() => {
-    global.fetch = jest.fn();
-    global.fetch.mockReturnValue(Promise.resolve({
-      status: 200,
-      json: () => Promise.resolve({ success: true, response: { exists: false, customerDetails: [] } }),
-    }));
-  });
-
-  it('should return a Promise', () => {
-    const result = getMembersLookup('email', 'user@example.com');
-    expect(result).toBeInstanceOf(Promise);
-  });
-
-  it('should be callable with identifierType and identifierValue', () => {
-    expect(typeof getMembersLookup).toBe('function');
-    const result = getMembersLookup('mobile', '9123456789');
-    expect(result).toBeInstanceOf(Promise);
-  });
-
-  it('should call fetch with correct URL encoding and GET method', () => {
-    global.fetch.mockClear();
-    getMembersLookup('email', 'user+test@example.com');
-    expect(global.fetch).toHaveBeenCalled();
-    const calls = global.fetch.mock.calls;
-    const withEncoding = calls.find(
-      (c) =>
-        c[0] &&
-        String(c[0]).includes('members') &&
-        String(c[0]).includes('identifierType=email') &&
-        String(c[0]).includes('user%2Btest%40example.com')
-    );
-    if (withEncoding) {
-      const [url, options] = withEncoding;
-      expect(url).toContain('identifierType=email');
-      expect(url).toContain('identifierValue=user%2Btest%40example.com');
-      expect(options?.method || 'GET').toBe('GET');
-    }
-    const anyMembersCall = calls.find((c) => c[0] && String(c[0]).includes('members'));
-    expect(anyMembersCall).toBeDefined();
-    expect(anyMembersCall[0]).toContain('identifierType=');
-    expect(anyMembersCall[0]).toContain('identifierValue=');
-    expect(anyMembersCall[1]?.method || 'GET').toBe('GET');
-  });
-});
-
-describe('createTestCustomer', () => {
-  beforeEach(() => {
-    global.fetch = jest.fn();
-    global.fetch.mockReturnValue(Promise.resolve({
-      status: 200,
-      json: () => Promise.resolve({ success: true }),
-    }));
-  });
-
-  it('should return a Promise', () => {
-    const payload = { customer: { email: 'test@example.com', firstName: 'Test' } };
-    const result = createTestCustomer(payload);
-    expect(result).toBeInstanceOf(Promise);
-  });
-
-  it('should accept customerId payload for existing customer', () => {
-    const payload = { customerId: 'cust-123' };
-    const result = createTestCustomer(payload);
-    expect(result).toBeInstanceOf(Promise);
-    expect(global.fetch).toHaveBeenCalled();
-    const lastCall = global.fetch.mock.calls[global.fetch.mock.calls.length - 1];
-    expect(lastCall[0]).toContain('testCustomers');
-    expect(lastCall[1].method).toBe('POST');
-    expect(lastCall[1].body).toBe(JSON.stringify(payload));
-  });
-
-  it('should call fetch with /testCustomers URL and POST method', () => {
-    const payload = { customer: { email: 'n@b.co', firstName: 'N' } };
-    createTestCustomer(payload);
-    expect(global.fetch).toHaveBeenCalled();
-    const lastCall = global.fetch.mock.calls[global.fetch.mock.calls.length - 1];
-    expect(lastCall[0]).toContain('testCustomers');
-    expect(lastCall[1].method).toBe('POST');
-    expect(lastCall[1].body).toBe(JSON.stringify(payload));
-  });
-});

package/utils/common.js

@@ -22,6 +22,7 @@ import {
   BADGES_ISSUE,
   ENABLE_WECHAT,
   ENABLE_WEBPUSH,
+  LIQUID_SUPPORT,
   SUPPORT_CK_EDITOR,
   ENABLE_NEW_MPUSH,
   ENABLE_NEW_EDITOR_FLOW_INAPP
@@ -91,6 +92,12 @@ export const hasPromoFeature = Auth.hasFeatureAccess.bind(
   null,
   PROMO_ENGINE,
 );
+
+export const hasLiquidSupportFeature = Auth.hasFeatureAccess.bind(
+  null,
+  LIQUID_SUPPORT,
+);
+
 export const hasSupportCKEditor = Auth.hasFeatureAccess.bind(
   null,
   SUPPORT_CK_EDITOR,
@@ -126,11 +133,7 @@ export const hasCustomerBarcodeFeatureEnabled = Auth.hasFeatureAccess.bind(
   ENABLE_CUSTOMER_BARCODE_TAG,
 );
 
-// Note: The "EMAIL_UNSUBSCRIBE_TAG_MANDATORY" feature flag determines if the Unsubscribe tag in email is optional. 
-// When this flag is enabled for an org, the Unsubscribe tag is NOT mandatory in the email flow.
-// This is as per the requirement in the tech doc:
-// https://capillarytech.atlassian.net/wiki/spaces/CAM/pages/3941662838/Remove+mandate+for+Unsubscribe+tag+in+email+flow
-export const isEmailUnsubscribeTagOptional = Auth.hasFeatureAccess.bind(
+export const isEmailUnsubscribeTagMandatory = Auth.hasFeatureAccess.bind(
   null,
   EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
 );

package/utils/commonUtils.js

@@ -16,9 +16,8 @@ import {
   IOS,
 } from "../v2Containers/CreativesContainer/constants";
 import { GLOBAL_CONVERT_OPTIONS } from "../v2Components/FormBuilder/constants";
+import { checkSupport, extractNames, skipTags as defaultSkipTags, isInsideLiquidBlock } from "./tagValidations";
 import { SMS_TRAI_VAR } from '../v2Containers/SmsTrai/Edit/constants';
-import { EMAIL_REGEX, PHONE_REGEX } from '../v2Components/CommonTestAndPreview/constants';
-
 export const apiMessageFormatHandler = (id, fallback) => (
   <FormattedMessage id={id} defaultMessage={fallback} />
 );
@@ -142,7 +141,12 @@ export const validateLiquidTemplateContent = async (
     messages,
     onError = () => {},
     onSuccess = () => {},
+    tagLookupMap,
+    eventContextTags,
+    isLiquidFlow,
+    forwardedTags = {},
     tabType,
+    skipTags = defaultSkipTags,
   } = options;
   const emptyBodyError = formatMessage(messages?.emailBodyEmptyError);
   const somethingWrongMsg = formatMessage(messages?.somethingWentWrong);
@@ -200,6 +204,81 @@ export const validateLiquidTemplateContent = async (
     });
     return false;
   }
+  // Extract and validate tags
+  const extractedLiquidTags = extractNames(result?.data || []);
+  // Get supported tags
+  const supportedLiquidTags = checkSupport(
+    result,
+    tagLookupMap,
+    eventContextTags,
+    isLiquidFlow,
+    forwardedTags
+  );
+  // Helper function to check if a tag appears only inside {% %} blocks
+  const isTagOnlyInsideLiquidBlocks = (tagName) => {
+    // Escape special regex characters in tag name, including dots
+    // Dots need to be escaped to match literally (item.name should match item.name, not item or name)
+    const escapedTagName = tagName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    
+    // First, check if tag appears in {% %} syntax itself (like "order.items" in "{% for item in order.items %}")
+    // This is a tag used in Liquid logic, not output, so it should always be skipped
+    // Match the tag name as a whole (with dots escaped), optionally surrounded by word boundaries or non-word chars
+    // For tags with dots, we match them directly; for simple tags, we use word boundaries
+    const hasDot = tagName.includes('.');
+    const liquidSyntaxPattern = hasDot
+      ? `{%[^%]*${escapedTagName}[^%]*%}`
+      : `{%[^%]*\\b${escapedTagName}\\b[^%]*%}`;
+    const liquidSyntaxRegex = new RegExp(liquidSyntaxPattern, 'g');
+    const liquidSyntaxMatches = Array.from(content.matchAll(liquidSyntaxRegex));
+    
+    // Find all occurrences of {{tagName}} in the content (output tags)
+    // Match patterns like: {{tagName}}, {{ tagName }}, {{tagName }}, {{ tagName}}
+    // Use non-word-boundary approach for tags with dots (item.name should match item.name, not item or name separately)
+    const outputTagRegex = new RegExp(`\\{\\{\\s*${escapedTagName}\\s*\\}\\}`, 'g');
+    const outputTagMatches = Array.from(content.matchAll(outputTagRegex));
+    const outputTagPositions = outputTagMatches.map((match) => match.index);
+    
+    // If tag appears in {% %} syntax, skip validation
+    if (liquidSyntaxMatches.length > 0) {
+      return true;
+    }
+    
+    // If no output tag matches found, don't skip validation
+    // The tag was extracted by the API, so it exists somewhere and should be validated
+    if (outputTagPositions.length === 0) {
+      return false;
+    }
+    
+    // Check if all output tag occurrences are inside {% %} blocks
+    // We check the position of {{ to see if it's inside a block
+    // Only skip validation if ALL occurrences are inside blocks
+    return outputTagPositions.every((tagIndex) => {
+      if (tagIndex === undefined || tagIndex === null) {
+        return false;
+      }
+      return isInsideLiquidBlock(content, tagIndex);
+    });
+  };
+  
+  // Find unsupported tags, excluding those that are only inside {% %} blocks
+  const unsupportedLiquidTags = extractedLiquidTags?.filter(
+    (tag) => !supportedLiquidTags?.includes(tag) 
+      && !skipTags(tag) 
+      && !isTagOnlyInsideLiquidBlocks(tag)
+  );
+  // Handle unsupported tags
+  if (unsupportedLiquidTags?.length > 0) {
+    const errorMsg = formatMessage(messages.unsupportedTagsValidationError, {
+      unsupportedTags: unsupportedLiquidTags.join(", "),
+    });
+    onError({
+      standardErrors: [],
+      liquidErrors: [errorMsg],
+      tabType,
+    });
+    return false;
+  }
+  // All validations passed
   onSuccess(content, tabType);
   return true;
 };
@@ -217,8 +296,8 @@ export const _validatePlatformSpecificContent = async (
     ...commonVltcOptions // Other options like getLiquidTags, formatMessage, messages, currentTab, etc.
   } = options;
 
-  let isAndroidValid = true;
-  let isIosValid = true;
+  let isAndroidValid = false;
+  let isIosValid = false;
 
   // This aggregator is passed to validateLiquidTemplateContent.
   // It accumulates errors in the new structure and calls the parentOnError
@@ -286,8 +365,8 @@ export const _validatePlatformSpecificContent = async (
 /**
  * Validate Mobile Push content for both Android and iOS tabs
  * @param {object} formData - Form data containing Android and iOS content
- * @param {object} options - Options for validation (currentTab, onError, onSuccess, getLiquidTags, formatMessage, messages, singleTab).
- * @returns {Promise<boolean>} - Promise that resolves to true when validation succeeds, false otherwise
+ * @param {object} options - Options for validation
+ * @returns {Promise} - Promise that resolves when validation completes
  */
 export const validateMobilePushContent = async (formData, options) => {
   const {
@@ -299,46 +378,22 @@ export const validateMobilePushContent = async (formData, options) => {
   // Clear previous errors by calling the passed onError
   onError({ standardErrors: [], liquidErrors: [] });
 
-  // For extractTags API: send plain template text (title + message), not the whole form as JSON.
-  // OLD Mobile Push UI: Android = message-title, message-editor; iOS = message-title2, message-editor2.
-  // New Mobile Push UI: both tabs use { title, message, buttons/ctas } — use extractContent().
-  const rawAndroid = formData?.[0];
-  const rawIos = formData?.[1];
-  const isObject = (v) => v != null && typeof v === 'object' && !Array.isArray(v);
-  const androidTab = isObject(rawAndroid) ? rawAndroid : {};
-  const iosTab = isObject(rawIos) ? rawIos : {};
-  const isOldUiShape = 'message-title' in androidTab || 'message-editor' in androidTab;
-  let androidContentForValidation;
-  let iosContentForValidation;
-  if (isOldUiShape) {
-    androidContentForValidation = [androidTab['message-title'], androidTab['message-editor']]
-      .filter(Boolean)
-      .join(' ');
-    iosContentForValidation = [iosTab['message-title2'], iosTab['message-editor2']]
-      .filter(Boolean)
-      .join(' ');
-  } else {
-    androidContentForValidation = extractContent(androidTab);
-    iosContentForValidation = extractContent(iosTab);
-  }
+  const androidContent = JSON.stringify(formData?.[0]);
+  const iosContent = JSON.stringify(formData?.[1]);
 
   // Pass the original 'onError' from this function's arguments,
   // 'currentTab', and other relevant options to the helper.
   const overallSuccess = await _validatePlatformSpecificContent(
-    androidContentForValidation,
-    iosContentForValidation,
+    androidContent,
+    iosContent,
     MOBILE_PUSH,
     { ...restOptions, currentTab, onError }
   );
-
-  // Submit payload remains full form data (JSON string) for save.
-  const androidContentToSubmit = JSON.stringify(formData?.[0]);
-  const iosContentToSubmit = JSON.stringify(formData?.[1]);
   const getContentToSubmit = () => {
-    if (currentTab === 1 && androidContentToSubmit) return [androidContentToSubmit, ANDROID?.toLowerCase()];
-    if (currentTab === 2 && iosContentToSubmit) return [iosContentToSubmit, IOS?.toLowerCase()];
-    if (androidContentToSubmit) return [androidContentToSubmit, ANDROID?.toLowerCase()];
-    if (iosContentToSubmit) return [iosContentToSubmit, IOS?.toLowerCase()];
+    if (currentTab === 1 && androidContent) return [androidContent, ANDROID?.toLowerCase()];
+    if (currentTab === 2 && iosContent) return [iosContent, IOS?.toLowerCase()];
+    if (androidContent) return [androidContent, ANDROID?.toLowerCase()];
+    if (iosContent) return [iosContent, IOS?.toLowerCase()];
     return ["", ""];
   };
   if (overallSuccess) {
@@ -532,11 +587,3 @@ export const checkForPersonalizationTokens = (formData) => {
   }
   return false;
 };
-
-export const isValidEmail = (email) => EMAIL_REGEX.test(email);
-export const isValidMobile = (mobile) => PHONE_REGEX.test(mobile);
-
-export const formatPhoneNumber = (phone) => {
-  if (!phone) return '';
-  return String(phone).replace(/[^\d]/g, '');
-};