@capillarytech/creatives-library 8.0.277 → 8.0.279

package/package.json

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

package/utils/tagValidations.js

@@ -201,6 +201,7 @@ export const validateTags = ({
     unsupportedTags: [],
     isBraceError: false,
   };
+  // Mandatory-tags check: only when we have a tags list and are in library mode
   if (tags && tags.length && !isFullMode) {
     lodashForEach(tags, ({
       definition: {
@@ -217,6 +218,9 @@ export const validateTags = ({
         }
       });
     });
+  }
+  // In library mode, always scan content for {{...}} and flag unsupported tags (even when tags list is empty)
+  if (!isFullMode && content) {
     const regex = /{{[(A-Z\w+(\s\w+)*$\(\)@!#$%^&*~.,/\\]+}}/g;
     let match = regex.exec(content);
     while (match !== null) {
@@ -224,8 +228,8 @@ export const validateTags = ({
       const tagIndex = match?.index;
       match = regex.exec(content);
       let ifSupported = false;
-      lodashForEach(tags, (tag) => {
-        if (tag.definition.value === tagValue) {
+      lodashForEach(tags || [], (tag) => {
+        if (tag?.definition?.value === tagValue) {
           ifSupported = true;
         }
       });

package/utils/tests/tagValidations.test.js

@@ -104,7 +104,7 @@ describe("validateTags", () => {
     });
 
     expect(result.valid).toEqual(true);
-    expect(result.unsupportedTags).toEqual([]);
+    expect(result.unsupportedTags).toEqual(["tag1", "tag2", "tag3"]);
     expect(result.isBraceError).toEqual(false);
   });
 

package/v2Components/FormBuilder/index.js

@@ -1247,10 +1247,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   },
                 }),
                 () => {
-                  // Callback after the state is updated
                   this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.props.channel === SMS? null: this.state.currentTab);
                 }
               );
+              // Show toast for liquid flow too so user sees error (scenario 3)
+              this.openNotificationWithIcon('error', errorString, "email-validation-error");
             } else {
               this.openNotificationWithIcon('error', errorString, "email-validation-error");
             }
@@ -1518,7 +1519,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     response.isBraceError = false;
     response.isContentEmpty = false;
     const contentForValidation = isEmail ? convert(content, GLOBAL_CONVERT_OPTIONS) : content ;
-    if(tags && tags.length && !isFullMode) {
+    // Run tag validation (missing + unsupported) for library mode OR for email channel (scenario 4: full mode email with CK)
+    if(tags && tags.length && (!isFullMode || isEmail)) {
       _.forEach(tags, (tag) => {
         _.forEach(tag.definition.supportedModules, (module) => {
           if (module.mandatory && (currentModule === module.context)) {
@@ -1581,9 +1583,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         });
 
         ifSupported = ifSupported || this.checkIfSupportedTag(tagValue, injectedTags);
-        // Only add to unsupportedTags if not inside a {% ... %} block and not in liquid flow
-        // Tags inside {% %} blocks can contain any dynamic tags and should not be validated
-        if (!ifSupported && !this.liquidFlow() && !isInsideLiquidBlock(content, tagIndex)) {
+        // Only add to unsupportedTags if not inside a {% ... %} block (scenario 3: liquid orgs also get unsupported-tag errors)
+        if (!ifSupported && !isInsideLiquidBlock(content, tagIndex)) {
           response.unsupportedTags.push(tagValue);
           response.valid = false;
         }

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -108,6 +108,24 @@ const EmailHTMLEditor = (props) => {
     standardErrors: [],
   });
 
+  // Merge tag validation errors (unsupported/missing) into apiValidationErrors so they show in ValidationErrorDisplay
+  const mergedApiValidationErrors = useMemo(() => {
+    const tagMessages = [];
+    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) {
+      return apiValidationErrors;
+    }
+    return {
+      liquidErrors: apiValidationErrors?.liquidErrors || [],
+      standardErrors: [...(apiValidationErrors?.standardErrors || []), ...tagMessages],
+    };
+  }, [apiValidationErrors, tagValidationError]);
+
   // Refs for tracking initialization and previous values
   const contentInitializedRef = useRef(false);
   const subjectInitializedRef = useRef(false);
@@ -479,6 +497,7 @@ const EmailHTMLEditor = (props) => {
         location,
         tagModule: getDefaultTags,
         eventContextTags,
+        isFullMode,
       });
 
       if (!validationResult.valid) {
@@ -688,9 +707,10 @@ const EmailHTMLEditor = (props) => {
       return;
     }
 
-    // 2. Validate Unsubscribe Tag (if mandatory)
-    // Check if unsubscribe tag is mandatory and if it exists in content
-    if (isEmailUnsubscribeTagMandatory() && moduleType === OUTBOUND) {
+    // 2. Validate Unsubscribe Tag when feature is OFF (when flag is false we require unsubscribe)
+    // When EMAIL_UNSUBSCRIBE_TAG_MANDATORY is true: do NOT validate for unsubscribe (aligned with FormBuilder).
+    // When EMAIL_UNSUBSCRIBE_TAG_MANDATORY is false: validate and require unsubscribe tag.
+    if (!isFullMode && !isEmailUnsubscribeTagMandatory() && moduleType === OUTBOUND) {
       // Check if content contains unsubscribe tag (either {{unsubscribe}} or {{unsubscribe(#...)})
       const unsubscribeRegex = /{{unsubscribe(\(#[a-zA-Z\d]{6}\))?}}/g; // eslint-disable-line no-useless-escape
       const hasUnsubscribeTag = unsubscribeRegex.test(htmlContent);
@@ -699,17 +719,19 @@ const EmailHTMLEditor = (props) => {
         // Show error notification
         const missingTagsMsg = intl.formatMessage(formBuilderMessages.missingTags);
         const errorMessage = `${missingTagsMsg} unsubscribe`;
-        CapNotification.error({
-          message: 'ERROR ! ! !',
-          description: errorMessage,
-          duration: 5,
-        });
+        setTimeout(() => {
+          CapNotification.error({
+            message: 'ERROR ! ! !',
+            description: errorMessage,
+            duration: 5,
+          });
+        }, 0);
 
         // Reset parent state so next click is detected as a change
         if (onValidationFail) {
           onValidationFail();
         }
-        // Block save - unsubscribe tag is mandatory
+        // Block save - unsubscribe tag is required when validation is enabled
         return;
       }
     }
@@ -717,7 +739,9 @@ const EmailHTMLEditor = (props) => {
     // 3. Validate Content Tags
     // For NON-liquid orgs: BLOCKING validation (matches CK/BEE behavior)
     // For liquid orgs: Non-blocking (extractTags API will validate)
-    if (tags.length > 0 || !isEmpty(injectedTags)) {
+    // In library mode, always validate when there is content (even if tags list is empty)
+    const shouldValidateTags = (tags.length > 0 || !isEmpty(injectedTags)) || (!isFullMode && !!htmlContent);
+    if (shouldValidateTags) {
       const validationResult = validateTags({
         content: htmlContent,
         tagsParam: tags,
@@ -725,12 +749,12 @@ const EmailHTMLEditor = (props) => {
         location,
         tagModule: getDefaultTags,
         eventContextTags,
+        isFullMode,
       });
 
       const hasUnsupportedTags = validationResult?.unsupportedTags?.length > 0;
-      if (!validationResult?.valid || hasUnsupportedTags) {
+      if (!validationResult?.valid || (hasUnsupportedTags && !isFullMode)) {
         setTagValidationError(validationResult);
-
         // IMPORTANT: For non-liquid orgs, block save (like CK/BEE editor)
         // For liquid orgs, continue (extractTags API will validate)
         if (!isLiquidEnabled) {
@@ -1156,7 +1180,7 @@ const EmailHTMLEditor = (props) => {
             isFullMode={isFullMode}
             onErrorAcknowledged={handleErrorAcknowledged}
             onValidationChange={handleValidationChange}
-            apiValidationErrors={apiValidationErrors}
+            apiValidationErrors={mergedApiValidationErrors}
           />
         </CapColumn>
       </CapRow>

package/v2Containers/EmailWrapper/components/__tests__/EmailHTMLEditor.test.js

@@ -386,6 +386,7 @@ const defaultProps = {
   isGetFormData: false,
   getFormdata: jest.fn(),
   templateData: null,
+  isEditEmail: true,
   EmailLayout: null,
   getLiquidTags: jest.fn((content, callback) => callback({ askAiraResponse: { data: [] }, isError: false })),
   showLiquidErrorInFooter: jest.fn(),
@@ -642,6 +643,45 @@ describe('EmailHTMLEditor', () => {
       // Should trigger fetch for new template ID
       expect(emailActions.getTemplateDetails).toHaveBeenCalled();
     });
+
+    it('does not fetch template details when isEditEmail is false even if templateData has _id (create flow)', async () => {
+      const emailActions = {
+        ...defaultProps.emailActions,
+        getTemplateDetails: jest.fn(),
+      };
+      renderWithIntl({
+        isEditEmail: false,
+        templateData: { _id: 'stale-template-id', name: 'Stale' },
+        params: {},
+        location: { query: {}, pathname: '/email/create' },
+        Email: { templateDetails: null, getTemplateDetailsInProgress: false, fetchingCmsData: false },
+        emailActions,
+      });
+
+      await waitFor(() => {
+        expect(emailActions.getTemplateDetails).not.toHaveBeenCalled();
+      }, { timeout: 500 });
+    });
+
+    it('uses templateData._id for currentTemplateId and fetches when isEditEmail is true', async () => {
+      const emailActions = {
+        ...defaultProps.emailActions,
+        getTemplateDetails: jest.fn(),
+      };
+      const templateId = 'edit-template-id';
+      renderWithIntl({
+        isEditEmail: true,
+        templateData: { _id: templateId, name: 'Edit Template' },
+        params: {},
+        location: { query: {}, pathname: '/email/create' },
+        Email: { templateDetails: null, getTemplateDetailsInProgress: false, fetchingCmsData: false },
+        emailActions,
+      });
+
+      await waitFor(() => {
+        expect(emailActions.getTemplateDetails).toHaveBeenCalledWith(templateId, 'email');
+      }, { timeout: 500 });
+    });
   });
 
   describe('Subject Handling', () => {
@@ -976,44 +1016,15 @@ describe('EmailHTMLEditor', () => {
       }, { timeout: 3000 });
     });
 
-    it('blocks save when unsubscribe tag is mandatory and missing', async () => {
-      isEmailUnsubscribeTagMandatory.mockReturnValue(true);
-      const onValidationFail = jest.fn();
-      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
-
-      // Set subject via input and content via HTMLEditor mock
-      const { rerender } = renderWithIntl({
-        onValidationFail,
-        isGetFormData: false,
-        moduleType: 'OUTBOUND',
-      });
-      const input = screen.getByTestId('subject-input');
-      fireEvent.change(input, { target: { value: 'Valid Subject' } });
-      // Trigger content change to set htmlContent
-      const changeButton = screen.getByTestId('trigger-content-change');
-      fireEvent.click(changeButton);
-      // Now trigger save
-      rerender(
-        <IntlProvider locale="en" messages={{}}>
-          <EmailHTMLEditor {...defaultProps} onValidationFail={onValidationFail} isGetFormData moduleType="OUTBOUND" />
-        </IntlProvider>
-      );
-
-      await waitFor(() => {
-        expect(CapNotification.error).toHaveBeenCalled();
-        expect(onValidationFail).toHaveBeenCalled();
-      }, { timeout: 3000 });
-    });
-
-    it('allows save when unsubscribe tag is present', () => {
-      isEmailUnsubscribeTagMandatory.mockReturnValue(true);
+    it('allows save when unsubscribe validation is on and tag is present', () => {
+      isEmailUnsubscribeTagMandatory.mockReturnValue(false);
       renderWithIntl({
         isGetFormData: true,
         subject: 'Valid Subject',
         htmlContent: '<p>Content {{unsubscribe}}</p>',
         moduleType: 'OUTBOUND',
       });
-      // Should proceed with save
+      // Should proceed with save (validation passes)
     });
 
     it('blocks save for non-liquid orgs when tag validation fails', async () => {

package/v2Containers/EmailWrapper/tests/useEmailWrapper.test.js

@@ -1025,6 +1025,32 @@ describe('useEmailWrapper', () => {
           expect(mockEmailActions.getTemplateDetails).not.toHaveBeenCalled();
         }, { timeout: 1000 });
       });
+
+      it('should NOT call getTemplateDetails when isEditEmail is false (create flow)', async () => {
+        const templateId = 'create-flow-id';
+        const createFlowProps = {
+          ...newFlowMockProps,
+          isEditEmail: false,
+          params: { id: templateId },
+          location: {
+            pathname: `/email/edit/${templateId}`,
+            query: { id: templateId },
+          },
+          Email: {
+            ...newFlowMockProps.Email,
+            templateDetails: null,
+            getTemplateDetailsInProgress: false,
+          },
+        };
+
+        renderHook((props) => useEmailWrapper(props), {
+          initialProps: createFlowProps,
+        });
+
+        await waitFor(() => {
+          expect(mockEmailActions.getTemplateDetails).not.toHaveBeenCalled();
+        }, { timeout: 1000 });
+      });
     });
   });
 

package/v2Containers/InApp/index.js

@@ -1155,6 +1155,7 @@ export const InApp = (props) => {
           location,
           tagModule: getDefaultTags,
           eventContextTags: metaEntities?.eventContextTags || [],
+          isFullMode,
         }) || {};
 
         if (validationResponse?.unsupportedTags?.length > 0) {
@@ -1182,6 +1183,7 @@ export const InApp = (props) => {
           location,
           tagModule: getDefaultTags,
           eventContextTags: metaEntities?.eventContextTags || [],
+          isFullMode,
         }) || {};
 
         if (validationResponse?.unsupportedTags?.length > 0) {

package/v2Containers/InappAdvance/index.js

@@ -878,6 +878,7 @@ export const InappAdvanced = (props) => {
           location,
           tagModule: getDefaultTags,
           eventContextTags: metaEntities?.eventContextTags || [],
+          isFullMode,
         }) || {};
 
         if (validationResponse?.unsupportedTags?.length > 0) {
@@ -905,6 +906,7 @@ export const InappAdvanced = (props) => {
           location,
           tagModule: getDefaultTags,
           eventContextTags: metaEntities?.eventContextTags || [],
+          isFullMode,
         }) || {};
 
         if (validationResponse?.unsupportedTags?.length > 0) {