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

package/constants/unified.js

@@ -149,6 +149,9 @@ 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*\\}\\}`);
 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/package.json

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

package/utils/tagValidations.js

@@ -8,13 +8,11 @@
 
 import lodashForEach from 'lodash/forEach';
 import lodashCloneDeep from 'lodash/cloneDeep';
-import { ENTRY_TRIGGER_TAG_REGEX, SKIP_TAGS_REGEX_GROUPS } from '../constants/unified';
+import { ENTRY_TRIGGER_TAG_REGEX, SKIP_TAGS_REGEX_GROUPS, UNSUBSCRIBE_TAG, UNSUBSCRIBE_TAG_REGEX } from '../constants/unified';
 
 const DEFAULT = 'default';
 const SUBTAGS = 'subtags';
 
-/** Whitespace-tolerant check for {{ unsubscribe }}-style tag in content. */
-const UNSUBSCRIBE_TAG_REGEX = /\{\{\s*unsubscribe\s*\}\}/;
 export const hasUnsubscribeTag = (content) =>
   typeof content === 'string' && UNSUBSCRIBE_TAG_REGEX.test(content);
 
@@ -57,7 +55,7 @@ export const validateTagsCore = ({
           value,
         },
       }) => {
-        if (value === 'unsubscribe') {
+        if (value === UNSUBSCRIBE_TAG) {
           lodashForEach(supportedModules, (module) => {
             if (module.mandatory && (currentModule === module.context)) {
               if (!hasUnsubscribeTag(contentForUnsubscribeScan)) {
@@ -76,8 +74,8 @@ export const validateTagsCore = ({
     while (match !== null) {
       const tagValue = match[1].trim();
       const ifSkipped = skipTagsFn(tagValue);
-      if (ifSkipped && tagValue.indexOf('unsubscribe') !== -1) {
-        const missingTagIndex = response.missingTags.indexOf('unsubscribe');
+      if (ifSkipped && tagValue.indexOf(UNSUBSCRIBE_TAG) !== -1) {
+        const missingTagIndex = response.missingTags.indexOf(UNSUBSCRIBE_TAG);
         if (missingTagIndex !== -1) {
           response.missingTags.splice(missingTagIndex, 1);
         }

package/utils/tests/tagValidations.test.js

@@ -1,5 +1,7 @@
 import '@testing-library/jest-dom';
 import {
+  hasUnsubscribeTag,
+  validateTagsCore,
   getTagMapValue,
   getLoyaltyTagsMapValue,
   getForwardedMapValues,
@@ -7,9 +9,161 @@ import {
   validateIfTagClosed,
   validateTags,
   skipTags,
+  checkIfSupportedTag,
+  transformInjectedTags,
 } from '../tagValidations';
 import { containsBase64Images } from '../content';
 
+describe('hasUnsubscribeTag', () => {
+  it('should return false when content is not a string', () => {
+    expect(hasUnsubscribeTag(null)).toBe(false);
+    expect(hasUnsubscribeTag(undefined)).toBe(false);
+    expect(hasUnsubscribeTag(123)).toBe(false);
+    expect(hasUnsubscribeTag({})).toBe(false);
+  });
+
+  it('should return false when content has no unsubscribe tag', () => {
+    expect(hasUnsubscribeTag('Hello world')).toBe(false);
+    expect(hasUnsubscribeTag('{{ name }}')).toBe(false);
+  });
+
+  it('should return true when content has {{ unsubscribe }}', () => {
+    expect(hasUnsubscribeTag('Click {{ unsubscribe }} here')).toBe(true);
+    expect(hasUnsubscribeTag('{{ unsubscribe }}')).toBe(true);
+  });
+});
+
+describe('validateTagsCore', () => {
+  it('should include isContentEmpty: false when includeIsContentEmpty is true', () => {
+    const result = validateTagsCore({
+      contentForBraceCheck: '{{a}}',
+      contentForUnsubscribeScan: '{{a}}',
+      tags: null,
+      currentModule: 'default',
+      isFullMode: true,
+      includeIsContentEmpty: true,
+    });
+    expect(result.isContentEmpty).toBe(false);
+    expect(result.valid).toBe(true);
+  });
+
+  it('should use initialMissingTags when provided', () => {
+    const result = validateTagsCore({
+      contentForBraceCheck: '{{a}}',
+      contentForUnsubscribeScan: '{{a}}',
+      tags: [{ definition: { supportedModules: [], value: 'x' } }],
+      currentModule: 'default',
+      isFullMode: false,
+      initialMissingTags: ['requiredTag'],
+    });
+    expect(result.missingTags).toEqual(['requiredTag']);
+    expect(result.valid).toBe(false);
+  });
+
+  it('should use custom skipTagsFn when provided', () => {
+    const customSkip = jest.fn(() => true);
+    const result = validateTagsCore({
+      contentForBraceCheck: '{{ unsubscribe }}',
+      contentForUnsubscribeScan: '{{ unsubscribe }}',
+      tags: [
+        {
+          definition: {
+            supportedModules: [{ context: 'DEFAULT', mandatory: true }],
+            value: 'unsubscribe',
+          },
+        },
+      ],
+      currentModule: 'DEFAULT',
+      isFullMode: false,
+      skipTagsFn: customSkip,
+    });
+    expect(customSkip).toHaveBeenCalled();
+    expect(result.valid).toBe(true);
+  });
+});
+
+describe('checkIfSupportedTag', () => {
+  it('should return false for empty or no injected tags', () => {
+    expect(checkIfSupportedTag('someTag', {})).toBe(false);
+    expect(checkIfSupportedTag('someTag', undefined)).toBe(false);
+  });
+
+  it('should return true when tag matches a top-level key', () => {
+    const injectedTags = { name: { name: 'Name' }, unsubscribe: { name: 'Unsubscribe' } };
+    expect(checkIfSupportedTag('name', injectedTags)).toBe(true);
+    expect(checkIfSupportedTag('unsubscribe', injectedTags)).toBe(true);
+  });
+
+  it('should return false when tag does not match any key', () => {
+    const injectedTags = { name: { name: 'Name' } };
+    expect(checkIfSupportedTag('other', injectedTags)).toBe(false);
+  });
+
+  it('should return true when tag matches a nested subtag', () => {
+    const injectedTags = {
+      customer: {
+        name: 'Customer',
+        subtags: {
+          first_name: { name: 'First Name' },
+          last_name: { name: 'Last Name' },
+        },
+      },
+    };
+    expect(checkIfSupportedTag('first_name', injectedTags)).toBe(true);
+    expect(checkIfSupportedTag('last_name', injectedTags)).toBe(true);
+  });
+
+  it('should return false when tag is in neither top-level nor subtags', () => {
+    const injectedTags = {
+      customer: {
+        name: 'Customer',
+        subtags: { first_name: { name: 'First Name' } },
+      },
+    };
+    expect(checkIfSupportedTag('unknown', injectedTags)).toBe(false);
+  });
+});
+
+describe('transformInjectedTags', () => {
+  it('should add tag-header and normalize subtags when key contains "subtags"', () => {
+    const tags = [
+      {
+        name: 'Customer',
+        subtags: {
+          first_name: { name: 'First Name' },
+        },
+      },
+    ];
+    const result = transformInjectedTags(tags);
+    expect(result).toBe(tags);
+    expect(tags[0]['tag-header']).toBe(true);
+    expect(tags[0].subtags).toEqual({ first_name: { name: 'First Name' } });
+  });
+
+  it('should recursively transform nested subtags', () => {
+    const tags = [
+      {
+        name: 'Parent',
+        subtags: {
+          child: {
+            name: 'Child',
+            subtags: { grandchild: { name: 'Grandchild' } },
+          },
+        },
+      },
+    ];
+    transformInjectedTags(tags);
+    expect(tags[0].subtags.child.subtags).toEqual({ grandchild: { name: 'Grandchild' } });
+  });
+
+  it('should return tags unchanged when no subtag keys exist', () => {
+    const tags = [{ name: 'Simple', desc: 'No subtags' }];
+    const result = transformInjectedTags(tags);
+    expect(result).toBe(tags);
+    expect(tags[0]).toEqual({ name: 'Simple', desc: 'No subtags' });
+  });
+});
+
 describe("check if curly brackets are balanced", () => {
     it("test for balanced curly brackets", () => {
         let value = "hello {{optout"
@@ -18,6 +172,9 @@ describe("check if curly brackets are balanced", () => {
         value += "}}"
         let result = validateIfTagClosed(value);
         expect(result).toEqual(true);
+        // no braces or empty string: match returns null, l1/l2/l3 undefined -> true
+        expect(validateIfTagClosed("")).toEqual(true);
+        expect(validateIfTagClosed("plain text no braces")).toEqual(true);
         //valid cases
         expect(validateIfTagClosed("{{{Hello}}}")).toEqual(true);
         expect(validateIfTagClosed("{{{Hello}}")).toEqual(true);
@@ -1048,6 +1205,10 @@ describe('getForwardedMapValues', () => {
     expect(getForwardedMapValues(input)).toEqual(expected);
   });
 
+  test('should return empty object when called with no argument (default param)', () => {
+    expect(getForwardedMapValues()).toEqual({});
+  });
+
   test('should correctly process objects with subtags', () => {
     const input = {
       customer: {

package/v2Components/FormBuilder/index.js

@@ -1328,51 +1328,59 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
   onSubmitWrapper = (args) => {
     const {singleTab = null} = args || {};
-    if (this.isLiquidFlowSupportedByChannel()) {
+    // Liquid validation (extractTags + Aira) only in library mode
+    const runLiquidValidation = this.isLiquidFlowSupportedByChannel() && !this.props.isFullMode;
+    if (runLiquidValidation) {
       // For MPUSH, we need to validate both Android and iOS content separately
       if (this.props.channel === MOBILE_PUSH || this.props?.schema?.channel?.toUpperCase() === MOBILE_PUSH) {
         this.validateFormBuilderMPush(this.state.formData, singleTab);
         return;
       }
-      
-      // For other channels (EMAIL, SMS, INAPP)
-      const content = getChannelData(this.props.schema.channel || this.props.channel, this.state.formData, this.props.baseLanguage);
-
-      // Set up callbacks for error and success handling
-      const onError = ({ standardErrors, liquidErrors }) => {
-        this.setState(
-          (prevState) => ({
-            liquidErrorMessage: {
-              ...prevState.liquidErrorMessage,
-              STANDARD_ERROR_MSG: standardErrors,
-              LIQUID_ERROR_MSG: liquidErrors,
-            },
-          }),
-          () => {
-            this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage);
-            this.props.stopValidation();
-          }
-        );
-      };
-      
-      const onSuccess = (contentToSubmit) => {
-        const channel = this.props.channel || this.props?.schema?.channel?.toUpperCase();
-        if(channel === EMAIL) {
-          const content = this.state.formData?.base?.[this.props.baseLanguage]?.["template-content"] || "";
-          this.handleLiquidTemplateSubmit(content);
-        } else {
-          this.handleLiquidTemplateSubmit(contentToSubmit);
+
+      // For other channels (EMAIL, SMS, INAPP): only call extractTags if there are no brace/empty errors already.
+      // Run sync validation first; if it fails, block and show errors without calling the API.
+      this.validateForm(null, null, true, false, () => {
+        if (!this.state.isFormValid) {
+          this.props.stopValidation();
+          return;
         }
-      };
-      
-      // Call the common validation function
-      validateLiquidTemplateContent(content, {
-        getLiquidTags: this.props.actions.getLiquidTags,
-        formatMessage: this.props.intl.formatMessage,
-        messages,
-        onError,
-        onSuccess,
-        skipTags: this.skipTags.bind(this)
+        const content = getChannelData(this.props.schema.channel || this.props.channel, this.state.formData, this.props.baseLanguage);
+
+        const onError = ({ standardErrors, liquidErrors }) => {
+          this.setState(
+            (prevState) => ({
+              liquidErrorMessage: {
+                ...prevState.liquidErrorMessage,
+                STANDARD_ERROR_MSG: standardErrors,
+                LIQUID_ERROR_MSG: liquidErrors,
+              },
+            }),
+            () => {
+              this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage);
+              this.props.stopValidation();
+              this.props.onFormValidityChange(false, this.state.errorData);
+            }
+          );
+        };
+
+        const onSuccess = (contentToSubmit) => {
+          const channel = this.props.channel || this.props?.schema?.channel?.toUpperCase();
+          if(channel === EMAIL) {
+            const content = this.state.formData?.base?.[this.props.baseLanguage]?.["template-content"] || "";
+            this.handleLiquidTemplateSubmit(content);
+          } else {
+            this.handleLiquidTemplateSubmit(contentToSubmit);
+          }
+        };
+
+        validateLiquidTemplateContent(content, {
+          getLiquidTags: this.props.actions.getLiquidTags,
+          formatMessage: this.props.intl.formatMessage,
+          messages,
+          onError,
+          onSuccess,
+          skipTags: this.skipTags.bind(this)
+        });
       });
     } else {
       this.props.onSubmit(this.state.formData);
@@ -1399,7 +1407,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     
     // Set up callbacks for error and success handling
     const onLiquidError = ({ standardErrors, liquidErrors }) => {
-
       this.setState(
         (prevState) => ({
           liquidErrorMessage: {
@@ -1411,6 +1418,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         () => {
           this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.state.currentTab);
           this.props.stopValidation();
+          // Block save: tell parent form is invalid so Done/submit is blocked
+          this.props.onFormValidityChange(false, this.state.errorData);
         }
       );
     };

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -566,6 +566,7 @@ export function SlideBoxContent(props) {
           handleTestAndPreview={handleTestAndPreview}
           handleCloseTestAndPreview={handleCloseTestAndPreview}
           isTestAndPreviewMode={isTestAndPreviewMode}
+          onValidationFail={onValidationFail}
         />
       )}
       {isEditFTP && (
@@ -632,6 +633,7 @@ export function SlideBoxContent(props) {
         getLiquidTags={getLiquidTags}
         getDefaultTags={type}
         isFullMode={isFullMode}
+        onValidationFail={onValidationFail}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
         onPreviewContentClicked={onPreviewContentClicked}
@@ -780,6 +782,7 @@ export function SlideBoxContent(props) {
           <MobliPushEdit
             getFormLibraryData={getFormData}
             setIsLoadingContent={setIsLoadingContent}
+            getLiquidTags={getLiquidTags}
             location={{
               pathname: `/mobilepush/edit/`,
               query,
@@ -852,6 +855,7 @@ export function SlideBoxContent(props) {
             mobilePushCreateMode={mobilePushCreateMode}
             isGetFormData={isGetFormData}
             getFormData={getFormData}
+            getLiquidTags={getLiquidTags}
             templateData={templateData}
             type={type}
             step={templateStep}
@@ -880,7 +884,7 @@ export function SlideBoxContent(props) {
           />
         ) : (
           <MobilePushNew
-            key="creatives-mobilepush-wrapper"
+            key="creatives-mobilepush-create-new"
             date={new Date().getMilliseconds()}
             setIsLoadingContent={setIsLoadingContent}
             onMobilepushModeChange={onMobilepushModeChange}

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -6,7 +6,7 @@ import CapError from '@capillarytech/cap-ui-library/CapError';
 import PropTypes from 'prop-types';
 import messages from './messages';
 import ErrorInfoNote from '../../v2Components/ErrorInfoNote';
-import { PREVIEW } from './constants';
+import { PREVIEW, EMAIL, SMS, EDIT_TEMPLATE, MOBILE_PUSH } from './constants';
 import { EMAIL_CREATE_MODES } from '../EmailWrapper/constants';
 import { hasSupportCKEditor } from '../../utils/common';
 import { getMessageForDevice, getTitleForDevice } from '../../utils/commonUtils';
@@ -15,7 +15,7 @@ function getFullModeSaveBtn(slidBoxContent, isCreatingTemplate) {
   if (isCreatingTemplate) {
     return <FormattedMessage {...messages.creativesTemplatesDone} />;
   }
-  return slidBoxContent === "editTemplate"
+  return slidBoxContent === EDIT_TEMPLATE
     ? <FormattedMessage {...messages.creativesTemplatesUpdate} />
     : <FormattedMessage {...messages.creativesTemplatesSaveFullMode} />;
 }
@@ -52,9 +52,13 @@ function SlideBoxFooter(props) {
   // Calculate if buttons should be disabled
   // 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';
+  const isEmailChannel = currentChannel?.toUpperCase() === EMAIL;
+  const isSmsChannel = currentChannel?.toUpperCase() === SMS;
+  // Use templateData.type in library/edit so footer shows when editing a mobile push template (currentChannel may not be set to template channel)
+  const isMobilePushChannel =
+    currentChannel?.toUpperCase() === MOBILE_PUSH ||
+    (templateData?.type && templateData.type.toUpperCase() === MOBILE_PUSH);
+  const isEditMode = slidBoxContent === EDIT_TEMPLATE;
 
   // Use selectedEmailCreateMode for accurate mode detection in create mode (emailCreateMode is mapped for backwards compatibility)
   // In edit mode: htmlEditorValidationState is initialized as {} but only updated by HTML Editor
@@ -130,9 +134,11 @@ function SlideBoxFooter(props) {
   const isBEEEditorModeInCreate = !isHTMLEditorMode && !isEditMode;
   const isBEEEditorMode = isBEEEditorModeInEdit || isBEEEditorModeInCreate;
   const hasBEEEditorErrors = isEmailChannel && isBEEEditorMode && (hasStandardErrors || hasLiquidErrors) && (!htmlEditorValidationState || !htmlEditorHasErrors);
-  const hasSmsValidationErrors = isSmsChannel && hasStandardErrors;
+  const hasSmsValidationErrors = isSmsChannel && (hasStandardErrors || hasLiquidErrors);
+  // Mobile Push OLD: footer only for extractTags/Aira liquid errors, not standard tag errors
+  const hasMobilePushValidationErrors = isMobilePushChannel && hasLiquidErrors;
 
-  const shouldShowErrorInfoNote = hasBEEEditorErrors || hasSmsValidationErrors || isSupportCKEditor;
+  const shouldShowErrorInfoNote = hasBEEEditorErrors || hasSmsValidationErrors || hasMobilePushValidationErrors || isSupportCKEditor;
 
   // Check for personalization tokens in title/message when anonymous user tries to save
   const hasPersonalizationTokens = () => {

package/v2Containers/CreativesContainer/index.js

@@ -1777,8 +1777,18 @@ export class Creatives extends React.Component {
   }
 
   showLiquidErrorInFooter = (errorMessagesFromFormBuilder, currentFormBuilderTab) => {
+    const liquidMsgs = get(errorMessagesFromFormBuilder, constants.LIQUID_ERROR_MSG, []);
+    const standardMsgs = get(errorMessagesFromFormBuilder, constants.STANDARD_ERROR_MSG, []);
+    const hasLiquid = Array.isArray(liquidMsgs) ? liquidMsgs.length > 0 : !isEmpty(liquidMsgs);
+    const hasStandard = Array.isArray(standardMsgs) ? standardMsgs.length > 0 : !isEmpty(standardMsgs);
+    const isLiquidValidationError = hasLiquid || hasStandard;
+    // Don't overwrite existing liquid error with empty only for Mobile Push OLD (FormBuilder/clear calls empty there); SMS/others clear on input change
+    const isMobilePush = this.state.currentChannel?.toUpperCase() === constants.MOBILE_PUSH;
+    if (!hasLiquid && !hasStandard && this.state.isLiquidValidationError && isMobilePush) {
+      return;
+    }
     this.setState({
-      isLiquidValidationError: !isEmpty(get(errorMessagesFromFormBuilder, constants.LIQUID_ERROR_MSG, [])) || !isEmpty(get(errorMessagesFromFormBuilder, constants.STANDARD_ERROR_MSG, [])),
+      isLiquidValidationError,
       liquidErrorMessage: errorMessagesFromFormBuilder,
       activeFormBuilderTab: currentFormBuilderTab === 1 ? constants.ANDROID : (currentFormBuilderTab === 2 ? constants.IOS : null), // Update activeFormBuilderTab, default to 1 if undefined
     });

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -482,6 +482,18 @@ const EmailHTMLEditor = (props) => {
   const handleContentChange = useCallback((content) => {
     setHtmlContent(content);
 
+    // Clear previous liquid/API validation errors so Done button can be enabled after user fixes content
+    setApiValidationErrors({
+      liquidErrors: [],
+      standardErrors: [],
+    });
+    if (showLiquidErrorInFooter) {
+      showLiquidErrorInFooter({
+        STANDARD_ERROR_MSG: [],
+        LIQUID_ERROR_MSG: [],
+      });
+    }
+
     // Validate tags
     if (tags.length > 0 || !isEmpty(injectedTags)) {
       const validationResult = validateTags({
@@ -498,7 +510,7 @@ const EmailHTMLEditor = (props) => {
         setTagValidationError(null);
       }
     }
-  }, [tags, injectedTags, location, getDefaultTags, eventContextTags]);
+  }, [tags, injectedTags, location, getDefaultTags, eventContextTags, showLiquidErrorInFooter]);
 
   // Store the last validation state received from HTMLEditor
   const lastValidationStateRef = useRef(null);
@@ -913,13 +925,9 @@ const EmailHTMLEditor = (props) => {
       }
     };
 
-    // Validate first using extractTags API
-    if (getLiquidTags) {
-      // Note: API validation errors are already cleared at the start of handleSave
-      // This ensures fresh validation on every save attempt
-
+    // Liquid validation (extractTags) only in library mode
+    if (getLiquidTags && !isFullMode) {
       const onError = ({ standardErrors, liquidErrors }) => {
-        // Store API validation errors in state so they can be displayed in UI
         setApiValidationErrors({
           liquidErrors: liquidErrors || [],
           standardErrors: standardErrors || [],
@@ -931,15 +939,12 @@ const EmailHTMLEditor = (props) => {
             LIQUID_ERROR_MSG: liquidErrors || [],
           });
         }
-        // Don't reset ref here - liquid validation is async and resetting causes infinite loop
-        // The parent's isGetFormData will be reset by onValidationFail, and the next click will be detected
         if (onValidationFail) {
           onValidationFail();
         }
       };
 
       const onSuccess = () => {
-        // Clear API validation errors on success
         setApiValidationErrors({
           liquidErrors: [],
           standardErrors: [],