@capillarytech/creatives-library 8.0.284 → 8.0.285-alpha.1

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

@@ -13,7 +13,7 @@ import { IntlProvider } from 'react-intl';
 import EmailHTMLEditor from '../EmailHTMLEditor';
 import { validateLiquidTemplateContent } from '../../../../utils/commonUtils';
 import { validateTags } from '../../../../utils/tagValidations';
-import { isEmailUnsubscribeTagMandatory } from '../../../../utils/common';
+import { isEmailUnsubscribeTagOptional } from '../../../../utils/common';
 
 // Mock dependencies
 jest.mock('../../../../utils/commonUtils', () => ({
@@ -24,11 +24,8 @@ jest.mock('../../../../utils/tagValidations', () => ({
   validateTags: jest.fn(),
 }));
 
-// Create mutable mock for hasLiquidSupportFeature
-const mockHasLiquidSupportFeature = jest.fn(() => true);
 jest.mock('../../../../utils/common', () => ({
-  hasLiquidSupportFeature: (...args) => mockHasLiquidSupportFeature(...args),
-  isEmailUnsubscribeTagMandatory: jest.fn(() => false),
+  isEmailUnsubscribeTagOptional: jest.fn(() => false),
 }));
 
 jest.mock('../../../../utils/history', () => ({
@@ -420,7 +417,7 @@ describe('EmailHTMLEditor', () => {
     jest.clearAllMocks();
     validateLiquidTemplateContent.mockResolvedValue(true);
     validateTags.mockReturnValue({ valid: true });
-    isEmailUnsubscribeTagMandatory.mockReturnValue(false);
+    isEmailUnsubscribeTagOptional.mockReturnValue(false);
     // Reset mock functions
     mockGetAllIssues.mockReturnValue([]);
     mockGetValidationState.mockReturnValue({
@@ -428,88 +425,6 @@ describe('EmailHTMLEditor', () => {
       hasErrors: false,
       issueCounts: { errors: 0, warnings: 0, total: 0 },
     });
-    // Reset hasLiquidSupportFeature mock to return true by default
-    mockHasLiquidSupportFeature.mockReturnValue(true);
-    capturedApiValidationErrorsRef.current = null;
-  });
-
-  describe('mergedApiValidationErrors (lines 124-125)', () => {
-    beforeEach(() => {
-      global.__captureApiValidationErrorsRef = capturedApiValidationErrorsRef;
-    });
-
-    afterEach(() => {
-      delete global.__captureApiValidationErrorsRef;
-    });
-
-    it('merges tag unsupported errors into standardErrors when tagValidationError has unsupportedTags', async () => {
-      validateTags.mockReturnValue({
-        valid: false,
-        unsupportedTags: ['tagA', 'tagB'],
-      });
-      renderWithIntl({
-        metaEntities: { tags: { standard: [{ name: 'customer.name' }] } },
-        tags: [{ name: 'customer.name' }],
-        supportedTags: [],
-      });
-      const changeButton = screen.getByTestId('trigger-content-change');
-      await act(async () => {
-        fireEvent.click(changeButton);
-      });
-      await waitFor(() => {
-        expect(capturedApiValidationErrorsRef.current).not.toBeNull();
-        expect(capturedApiValidationErrorsRef.current.liquidErrors).toEqual([]);
-        expect(capturedApiValidationErrorsRef.current.standardErrors).toContain(
-          'Unsupported tags are: tagA, tagB',
-        );
-      });
-    });
-
-    it('merges tag missing errors into standardErrors when tagValidationError has missingTags and unsubscribe not mandatory', async () => {
-      isEmailUnsubscribeTagMandatory.mockReturnValue(false);
-      validateTags.mockReturnValue({
-        valid: false,
-        missingTags: ['unsubscribe'],
-      });
-      renderWithIntl({
-        metaEntities: { tags: { standard: [{ name: 'customer.name' }] } },
-        tags: [{ name: 'customer.name' }],
-        supportedTags: [],
-      });
-      const changeButton = screen.getByTestId('trigger-content-change');
-      await act(async () => {
-        fireEvent.click(changeButton);
-      });
-      await waitFor(() => {
-        expect(capturedApiValidationErrorsRef.current).not.toBeNull();
-        expect(capturedApiValidationErrorsRef.current.standardErrors).toContain(
-          'Missing tags are: unsubscribe',
-        );
-      });
-    });
-
-    it('uses apiValidationErrors.liquidErrors and concatenates apiValidationErrors.standardErrors with tag messages (merge shape)', async () => {
-      // When tag messages exist, mergedApiValidationErrors returns liquidErrors from apiValidationErrors
-      // and standardErrors = [...(apiValidationErrors?.standardErrors || []), ...tagMessages] (lines 124-125)
-      validateTags.mockReturnValue({
-        valid: false,
-        unsupportedTags: ['customTag'],
-      });
-      renderWithIntl({
-        metaEntities: { tags: { standard: [{ name: 'customer.name' }] } },
-        tags: [{ name: 'customer.name' }],
-      });
-      const changeButton = screen.getByTestId('trigger-content-change');
-      await act(async () => {
-        fireEvent.click(changeButton);
-      });
-      await waitFor(() => {
-        expect(capturedApiValidationErrorsRef.current).not.toBeNull();
-        const { liquidErrors, standardErrors } = capturedApiValidationErrorsRef.current;
-        expect(liquidErrors).toEqual([]);
-        expect(standardErrors).toContain('Unsupported tags are: customTag');
-      });
-    });
   });
 
   describe('Default Parameter Values (lines 60-63)', () => {
@@ -1106,7 +1021,7 @@ describe('EmailHTMLEditor', () => {
     });
 
     it('allows save when unsubscribe validation is on and tag is present', () => {
-      isEmailUnsubscribeTagMandatory.mockReturnValue(false);
+      isEmailUnsubscribeTagOptional.mockReturnValue(false);
       renderWithIntl({
         isGetFormData: true,
         subject: 'Valid Subject',
@@ -1116,17 +1031,14 @@ describe('EmailHTMLEditor', () => {
       // Should proceed with save (validation passes)
     });
 
-    it('blocks save for non-liquid orgs when tag validation fails', async () => {
-      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
-      validateTags.mockReturnValue({
-        valid: false,
-        unsupportedTags: ['tag1'],
-        missingTags: ['tag2'],
+    it('blocks save when liquid API validation fails for Email', async () => {
+      // Liquid is always enabled for Email; blocking validation is the liquid API path.
+      // validateLiquidTemplateContent is mocked, so simulate API validation failure by having the mock call onError.
+      validateLiquidTemplateContent.mockImplementation((content, options) => {
+        options.onError({ standardErrors: [], liquidErrors: ['Validation failed'] });
+        return Promise.resolve(false);
       });
       const onValidationFail = jest.fn();
-      const CapNotification = require('@capillarytech/cap-ui-library/CapNotification');
-
-      // Set subject and content via component interactions
       const { rerender } = renderWithIntl({
         onValidationFail,
         isGetFormData: false,
@@ -1135,13 +1047,12 @@ describe('EmailHTMLEditor', () => {
             standard: [{ name: 'customer.name' }],
           },
         },
-        getLiquidTags: null, // No liquid tags for non-liquid org
+        getLiquidTags: jest.fn((content, cb) => cb({ askAiraResponse: { data: [] }, isError: false })),
       });
       const input = screen.getByTestId('subject-input');
       fireEvent.change(input, { target: { value: 'Valid Subject' } });
       const changeButton = screen.getByTestId('trigger-content-change');
       fireEvent.click(changeButton);
-      // Now trigger save
       rerender(
         <IntlProvider locale="en" messages={{}}>
           <EmailHTMLEditor
@@ -1153,12 +1064,10 @@ describe('EmailHTMLEditor', () => {
                 standard: [{ name: 'customer.name' }],
               },
             }}
-            getLiquidTags={null} />
+            getLiquidTags={jest.fn((content, cb) => cb({ askAiraResponse: { data: [] }, isError: false }))} />
         </IntlProvider>
       );
-
       await waitFor(() => {
-        expect(CapNotification.error).toHaveBeenCalled();
         expect(onValidationFail).toHaveBeenCalled();
       }, { timeout: 3000 });
     });
@@ -1184,7 +1093,6 @@ describe('EmailHTMLEditor', () => {
             standard: [{ name: 'customer.name' }],
           },
         },
-        isLiquidEnabled: true,
         getLiquidTags,
       });
       const input = screen.getByTestId('subject-input');
@@ -1234,7 +1142,6 @@ describe('EmailHTMLEditor', () => {
       const { rerender } = renderWithIntl({
         isGetFormData: false,
         isFullMode: true,
-        isLiquidEnabled: true,
         getLiquidTags,
       });
       const input = screen.getByTestId('subject-input');
@@ -1284,7 +1191,6 @@ describe('EmailHTMLEditor', () => {
       const { rerender } = renderWithIntl({
         isGetFormData: false,
         isFullMode: true,
-        isLiquidEnabled: true,
         getLiquidTags,
         showLiquidErrorInFooter,
         onValidationFail,
@@ -1342,7 +1248,6 @@ describe('EmailHTMLEditor', () => {
       const { rerender } = renderWithIntl({
         isGetFormData: false,
         isFullMode: true,
-        isLiquidEnabled: true,
         getLiquidTags,
         emailActions,
         templateName: 'New Template',
@@ -1378,7 +1283,6 @@ describe('EmailHTMLEditor', () => {
     });
 
     it('saves in full mode with create template', async () => {
-      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
       const emailActions = {
         ...defaultProps.emailActions,
         transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
@@ -1412,7 +1316,6 @@ describe('EmailHTMLEditor', () => {
     });
 
     it('saves in full mode with edit template', async () => {
-      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
       const emailActions = {
         ...defaultProps.emailActions,
         transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
@@ -1482,7 +1385,6 @@ describe('EmailHTMLEditor', () => {
     });
 
     it('handles create template error response', async () => {
-      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
       const emailActions = {
         ...defaultProps.emailActions,
         transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
@@ -1517,7 +1419,6 @@ describe('EmailHTMLEditor', () => {
     });
 
     it('handles create template success with getFormdata', async () => {
-      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
       const emailActions = {
         ...defaultProps.emailActions,
         transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
@@ -1554,7 +1455,6 @@ describe('EmailHTMLEditor', () => {
     });
 
     it('handles create template success without getFormdata', async () => {
-      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
       const emailActions = {
         ...defaultProps.emailActions,
         transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
@@ -1590,7 +1490,6 @@ describe('EmailHTMLEditor', () => {
     });
 
     it('saves in library mode with getFormdata', async () => {
-      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
       const getFormdata = jest.fn();
 
       // Set subject and content via component interactions
@@ -1618,7 +1517,6 @@ describe('EmailHTMLEditor', () => {
     });
 
     it('saves in library mode without library module', async () => {
-      mockHasLiquidSupportFeature.mockReturnValue(false); // Non-liquid org
       const getFormdata = jest.fn();
 
       // Set subject and content via component interactions
@@ -1758,7 +1656,6 @@ describe('EmailHTMLEditor', () => {
       renderWithIntl({
         getLiquidTags: null,
         globalActions,
-        isLiquidEnabled: true,
         isGetFormData: true,
         subject: 'Valid Subject',
         htmlContent: '<p>Content</p>',

package/v2Containers/FTP/index.js

@@ -22,7 +22,7 @@ import {
   CapTooltip,
 } from '@capillarytech/cap-ui-library';
 import { FONT_SIZE_L } from '@capillarytech/cap-ui-library/styled/variables';
-import _, { find, cloneDeep, findIndex, isEmpty, isEqual, filter, flattenDeep, replace } from 'lodash';
+import _, { find, cloneDeep, findIndex, isEmpty, isEqual, filter, replace } from 'lodash';
 import * as actions from './actions';
 import { makeSelectFTP, makeSelectMetaEntities } from './selectors';
 import { makeSelectLoyaltyPromotionDisplay, setInjectedTags } from '../Cap/selectors';
@@ -33,7 +33,6 @@ import * as globalActions from '../Cap/actions';
 import { TagList } from '../TagList';
 import { NO_COMMUNICATION, CREATE, EDIT, PREVIEW } from '../App/constants';
 import { getTreeStructuredTags } from '../../utils/common';
-import { transformInjectedTags, checkIfSupportedTag, skipTags } from '../../utils/tagValidations';
 import injectSaga from '../../utils/injectSaga';
 import injectReducer from '../../utils/injectReducer';
 
@@ -235,63 +234,16 @@ export class FTP extends React.Component {
     }));
   };
 
-  getFlatTags = (tags) => {
-    const flatTags = [];
-    tags.forEach((tag) => {
-      if ((tag.children || []).length) {
-        const innerTags = this.getFlatTags(tag.children);
-        flatTags.push(innerTags);
-      } else {
-        flatTags.push(tag.value);
-      }
-    });
-
-    return flattenDeep(flatTags);
-  };
-
-  validateTags(content, tagsParam, injectedTagsParams) {
-    const tags = tagsParam;
-    const injectedTags = transformInjectedTags(injectedTagsParams);
-    const response = {};
-    response.valid = true;
-    response.unsupportedTags = [];
-    const flatTags = this.getFlatTags(tags);
-    if (flatTags && flatTags.length) {
-      const regex = /{{[(A-Z\w+(\s\w+)*$\(\)@!#$%^&*~.,/\\]+}}/g;
-      const matchedTags = [...content.matchAll(regex)];
-      matchedTags.forEach((tag) => {
-        let ifSupported = !!flatTags.find((t) => t === tag[0]);
-        const tagValue = tag[0].substring(this.indexOfEnd(tag[0], '{{'), tag[0].indexOf('}}'));
-        ifSupported = ifSupported || checkIfSupportedTag(tagValue, injectedTags) || skipTags(tagValue);
-        if (!ifSupported) {
-          response.unsupportedTags.push(tagValue);
-          response.valid = false;
-        }
-        if (response.unsupportedTags.length === 0) {
-          response.valid = true;
-        }
-      });
-    }
-    return response;
-  }
-
   indexOfEnd(targetString, string) {
     const io = targetString.indexOf(string);
     return io == -1 ? -1 : io + string.length;
   }
 
   getMessageContent = () => {
-    const { messageContent, tagsTree = []} = this.state;
+    const { messageContent } = this.state;
     const { formatMessage } = this.props.intl;
     const { metaEntities, selectedOfferDetails, injectedTags } = this.props;
     const tagsRaw = metaEntities && metaEntities.tags ? metaEntities.tags.standard : [];
-    const validateTagResponse = !this.props?.isFullMode ? this.validateTags(messageContent, tagsTree, injectedTags) : { valid: true, unsupportedTags: [] };
-    let unsupportedTags = null;
-    let errorMessageText = '';
-    if (!validateTagResponse.valid) {
-      unsupportedTags = validateTagResponse.unsupportedTags.join(', ').toString();
-      errorMessageText = formatMessage(messages.unsupportedTagsValidationError, {unsupportedTags});
-    }
     return (
       <CapRow>
         <CapColumn span={11}>
@@ -309,7 +261,6 @@ export class FTP extends React.Component {
               label={formatMessage(messages.messageHeader)}
               onChange={this.updateMessageBody}
               value={messageContent}
-              errorMessage={errorMessageText}
             />
           </div>
         </CapColumn>

package/v2Containers/FTP/messages.js

@@ -21,10 +21,6 @@ export default defineMessages({
     id: 'creatives.containersV2.FTP.addColumn',
     defaultMessage: 'Add column',
   },
-  unsupportedTagsValidationError: {
-    id: 'creatives.containersV2.FTP.unsupportedTagsValidationError',
-    defaultMessage: 'Unsupported tags: {unsupportedTags}. Please remove them from this message.',
-  },
   selectTag: {
     id: 'creatives.containersV2.FTP.selectTag',
     defaultMessage: 'Select tag',

package/v2Containers/InApp/index.js

@@ -31,7 +31,6 @@ import creativesMessages from '../CreativesContainer/messages';
 import withCreatives from "../../hoc/withCreatives";
 import UnifiedPreview from "../../v2Components/CommonTestAndPreview/UnifiedPreview";
 import TestAndPreviewSlidebox from '../../v2Components/TestAndPreviewSlidebox';
-import { validateTags } from "../../utils/tagValidations";
 import injectReducer from '../../utils/injectReducer';
 import v2InAppReducer from './reducer';
 import { v2InAppSagas } from './sagas';
@@ -58,7 +57,6 @@ import {
 import { getCdnUrl } from "../../utils/cdnTransformation";
 import { getCtaObject, hasAnyErrors, getSingleTab } from "./utils";
 import { validateInAppContent } from "../../utils/commonUtils";
-import { hasLiquidSupportFeature } from "../../utils/common";
 import formBuilderMessages from "../../v2Components/FormBuilder/messages";
 import HTMLEditor from "../../v2Components/HtmlEditor";
 import { HTML_EDITOR_VARIANTS } from "../../v2Components/HtmlEditor/constants";
@@ -1095,9 +1093,7 @@ export const InApp = (props) => {
     // Skip validation if no tags are available (e.g., in tests or when tags haven't loaded)
     const hasTags = tags && tags.length > 0;
 
-    // For liquid flow, use validateInAppContent
-    if (isLiquidFlow && hasTags) {
-      // Validate the INAPP content
+    if (hasTags) {
       const payload = createPayload();
       validateInAppContent(payload, {
         currentTab: panes === ANDROID ? 1 : 2, // Convert ANDROID/IOS to tab numbers
@@ -1106,10 +1102,6 @@ export const InApp = (props) => {
         getLiquidTags: (content, callback) => globalActions.getLiquidTags(content, callback),
         formatMessage,
         messages: formBuilderMessages,
-        tagLookupMap: metaEntities?.tagLookupMap || {},
-        eventContextTags: metaEntities?.eventContextTags || [],
-        isLiquidFlow,
-        forwardedTags: {},
         skipTags: (tag) => {
           // Skip certain tags if needed
           const skipRegexes = [
@@ -1124,98 +1116,11 @@ export const InApp = (props) => {
         },
         singleTab: getSingleTab(accountData),
       });
-    } else if (hasTags) {
-      // For non-liquid flow, validate tags using validateTags (only if tags are available)
-      const androidContent = htmlContentAndroid || '';
-      const iosContent = htmlContentIos || '';
-
-      const androidSupported = get(accountData, 'selectedWeChatAccount.configs.android') === DEVICE_SUPPORTED || get(editContent, 'ANDROID.deviceType') === ANDROID;
-      const iosSupported = get(accountData, 'selectedWeChatAccount.configs.ios') === DEVICE_SUPPORTED || get(editContent, 'IOS.deviceType') === IOS_CAPITAL;
-
-      let hasErrors = false;
-      const newErrors = {
-        STANDARD_ERROR_MSG: {
-          ANDROID: [],
-          IOS: [],
-          GENERIC: [],
-        },
-        LIQUID_ERROR_MSG: {
-          ANDROID: [],
-          IOS: [],
-          GENERIC: [],
-        },
-      };
-
-      // Validate Android content
-      if (androidSupported && androidContent && androidContent?.trim() !== '') {
-        const validationResponse = validateTags({
-          content: androidContent,
-          tagsParam: tags,
-          injectedTagsParams: injectedTags || {},
-          location,
-          tagModule: getDefaultTags,
-          eventContextTags: metaEntities?.eventContextTags || [],
-          isFullMode,
-        }) || {};
-
-        if (validationResponse?.unsupportedTags?.length > 0) {
-          hasErrors = true;
-          newErrors.LIQUID_ERROR_MSG.ANDROID.push(
-            formatMessage(globalMessages.unsupportedTagsValidationError, {
-              unsupportedTags: validationResponse.unsupportedTags.join(", "),
-            })
-          );
-        }
-        if (validationResponse?.isBraceError) {
-          hasErrors = true;
-          newErrors.LIQUID_ERROR_MSG.ANDROID.push(
-            formatMessage(globalMessages.unbalanacedCurlyBraces)
-          );
-        }
-      }
-
-      // Validate iOS content
-      if (iosSupported && iosContent && iosContent?.trim() !== '') {
-        const validationResponse = validateTags({
-          content: iosContent,
-          tagsParam: tags,
-          injectedTagsParams: injectedTags || {},
-          location,
-          tagModule: getDefaultTags,
-          eventContextTags: metaEntities?.eventContextTags || [],
-          isFullMode,
-        }) || {};
-
-        if (validationResponse?.unsupportedTags?.length > 0) {
-          hasErrors = true;
-          newErrors.LIQUID_ERROR_MSG.IOS.push(
-            formatMessage(globalMessages.unsupportedTagsValidationError, {
-              unsupportedTags: validationResponse.unsupportedTags.join(", "),
-            })
-          );
-        }
-        if (validationResponse?.isBraceError) {
-          hasErrors = true;
-          newErrors.LIQUID_ERROR_MSG.IOS.push(
-            formatMessage(globalMessages.unbalanacedCurlyBraces)
-          );
-        }
-      }
-
-      if (hasErrors) {
-        setErrorMessage(newErrors);
-      } else {
-        // No errors, proceed with submission
-        onSuccess();
-      }
     } else {
-      // No tags available, skip validation and proceed directly
       onSuccess();
     }
   };
 
-  const isLiquidFlow = hasLiquidSupportFeature();
-
   // Check template data to determine editor type (for render decision)
   const templateDetails = isFullMode ? editData?.templateDetails : templateData;
   const versions = templateDetails?.versions || {};

package/v2Containers/InApp/tests/index.test.js

@@ -21,18 +21,16 @@ import { getCtaObject } from '../utils';
 jest.mock('redux-auth-wrapper/history4/redirect', () => ({
   connectedRouterRedirect: jest.fn((config) => (Component) => Component),
 }));
+import * as commonUtils from '../../../utils/commonUtils';
 
 const mockActions = {
   getTemplateInfoById: jest.fn(),
   resetEditTemplate: jest.fn(),
-  getTemplateDetails: jest.fn((id, callback) => {
+  getTemplateDetails: jest.fn((id, setSpin) => {
     // Simulate successful template details fetch to prevent loading state
     // The callback is setSpin function, call it with false to stop spinner
-    if (callback && typeof callback === 'function') {
-      // Use setTimeout to ensure it's called after render
-      setTimeout(() => {
-        callback(false);
-      }, 0);
+    if (setSpin && typeof setSpin === 'function') {
+      setTimeout(() => setSpin(false), 0);
     }
   }),
   editTemplate: jest.fn(),
@@ -41,6 +39,9 @@ const mockActions = {
 };
 const mockGlobalActions = {
   fetchSchemaForEntity: jest.fn(),
+  getLiquidTags: jest.fn((content, callback) =>
+    callback({ askAiraResponse: { data: [], errors: [] }, isError: false }),
+  ),
 };
 
 jest.mock('../../../v2Containers/TagList/index.js', () => ({
@@ -66,7 +67,17 @@ const renderComponent = (props) =>
   );
 
 describe('Test activity inApp container', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
   it('test case for inApp template update flow', async () => {
+    jest
+      .spyOn(commonUtils, 'validateInAppContent')
+      .mockImplementation((payload, options) => {
+        options.onSuccess();
+        return Promise.resolve(true);
+      });
     renderComponent({
       actions: mockActions,
       globalActions: mockGlobalActions,