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

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -15,7 +15,7 @@ import HTMLEditor from '../../../v2Components/HtmlEditor';
 import CapTagListWithInput from '../../../v2Components/CapTagListWithInput';
 import formBuilderMessages from '../../../v2Components/FormBuilder/messages';
 import { validateLiquidTemplateContent } from '../../../utils/commonUtils';
-import { isEmailUnsubscribeTagOptional } from '../../../utils/common';
+import { hasLiquidSupportFeature, isEmailUnsubscribeTagMandatory } from '../../../utils/common';
 import history from '../../../utils/history';
 import messages from '../messages';
 import emailMessages from '../../Email/messages';
@@ -108,10 +108,13 @@ const EmailHTMLEditor = (props) => {
     standardErrors: [],
   });
 
-  // Merge tag validation errors (missing) into apiValidationErrors so they show in ValidationErrorDisplay
+  // Merge tag validation errors (unsupported/missing) into apiValidationErrors so they show in ValidationErrorDisplay
   const mergedApiValidationErrors = useMemo(() => {
     const tagMessages = [];
-    if (tagValidationError?.missingTags?.length && !isEmailUnsubscribeTagOptional()) {
+    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) {
@@ -187,6 +190,9 @@ const EmailHTMLEditor = (props) => {
     },
   }), [htmlContent, subject, currentOrgDetails]);
 
+  // Check if liquid support is enabled
+  const isLiquidEnabled = hasLiquidSupportFeature();
+
   // Detect edit mode: when isEditEmail is false (create flow), never treat as edit or fetch template details
   const hasParamsId = params?.id || location?.query?.id || location?.params?.id || location?.pathname?.includes('/edit/');
   const currentTemplateId = isEditEmail
@@ -482,25 +488,15 @@ 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({
         content,
         tagsParam: tags,
+        injectedTagsParams: injectedTags,
         location,
         tagModule: getDefaultTags,
+        eventContextTags,
         isFullMode,
       });
 
@@ -510,7 +506,7 @@ const EmailHTMLEditor = (props) => {
         setTagValidationError(null);
       }
     }
-  }, [tags, injectedTags, location, getDefaultTags, eventContextTags, showLiquidErrorInFooter]);
+  }, [tags, injectedTags, location, getDefaultTags, eventContextTags]);
 
   // Store the last validation state received from HTMLEditor
   const lastValidationStateRef = useRef(null);
@@ -654,7 +650,7 @@ const EmailHTMLEditor = (props) => {
     // IMPORTANT: Clear API validation errors FIRST before checking for validation errors
     // This ensures that old API errors don't block the save when user fixes content and clicks Update again
     // We'll re-validate with fresh API call anyway
-    if (getLiquidTags) {
+    if (isLiquidEnabled && getLiquidTags) {
       setApiValidationErrors({
         liquidErrors: [],
         standardErrors: [],
@@ -716,7 +712,7 @@ const EmailHTMLEditor = (props) => {
     // When EMAIL_UNSUBSCRIBE_TAG_MANDATORY is false: validate and require unsubscribe tag.
     // Run for both library and full mode so liquid-enabled orgs also get the error (notification + ValidationErrorDisplay).
     const isModuleTypeOutbound = (moduleType || '').toUpperCase() === OUTBOUND;
-    if (!isEmailUnsubscribeTagOptional() && isModuleTypeOutbound) {
+    if (!isEmailUnsubscribeTagMandatory() && isModuleTypeOutbound) {
       const unsubscribeRegex = /{{unsubscribe(\(#[a-zA-Z\d]{6}\))?}}/g; // eslint-disable-line no-useless-escape
       const hasUnsubscribeTag = unsubscribeRegex.test(htmlContent);
 
@@ -748,17 +744,52 @@ const EmailHTMLEditor = (props) => {
       const validationResult = validateTags({
         content: htmlContent,
         tagsParam: tags,
+        injectedTagsParams: injectedTags,
         location,
         tagModule: getDefaultTags,
+        eventContextTags,
         isFullMode,
       });
 
-      if (!validationResult?.valid) {
+      const hasUnsupportedTags = validationResult?.unsupportedTags?.length > 0;
+      if (!validationResult?.valid || (hasUnsupportedTags && !isFullMode)) {
         setTagValidationError(validationResult);
-        // For liquid orgs, show warning and continue (extractTags API will validate)
+        // IMPORTANT: For non-liquid orgs, block save (like CK/BEE editor)
+        // For liquid orgs, continue (extractTags API will validate)
+        if (!isLiquidEnabled) {
+          // Show notification popup like CK/BEE editor
+          const baseLanguage = get(currentOrgDetails, 'basic_details.base_language', 'en');
+
+          const contentNotValidMsg = intl.formatMessage(formBuilderMessages.contentNotValidLanguage);
+          let errorMessage = `${contentNotValidMsg} ${baseLanguage}`;
+
+          if (hasUnsupportedTags) {
+            const unsupportedTagsMsg = intl.formatMessage(formBuilderMessages.unsupportedTags);
+            errorMessage += `\n${unsupportedTagsMsg} ${validationResult?.unsupportedTags?.join(', ')}`;
+          }
+          if (validationResult?.missingTags?.length > 0) {
+            const missingTagsMsg = intl.formatMessage(formBuilderMessages.missingTags);
+            errorMessage += `\n${missingTagsMsg} ${validationResult?.missingTags?.join(', ')}`;
+          }
+
+          const type = 'error';
+          CapNotification[type]({
+            message: `${type.toUpperCase()} ! ! ! `,
+            description: errorMessage,
+            duration: 5,
+          });
+
+          // Reset parent state so next click is detected as a change
+          if (onValidationFail) {
+            onValidationFail();
+          }
+          // Block save for non-liquid orgs
+          return;
+        }
+        // For liquid orgs, just show warning and continue
       }
       // Clear tag errors if valid
-      if (tagValidationError && validationResult?.valid) {
+      if (tagValidationError && validationResult?.valid && !hasUnsupportedTags) {
         setTagValidationError(null);
       }
     }
@@ -925,9 +956,13 @@ const EmailHTMLEditor = (props) => {
       }
     };
 
-    // Liquid validation (extractTags) only in library mode
-    if (getLiquidTags && !isFullMode) {
+    // If liquid enabled, validate first using extractTags API
+    if (isLiquidEnabled && getLiquidTags) {
+      // Note: API validation errors are already cleared at the start of handleSave
+      // This ensures fresh validation on every save attempt
+
       const onError = ({ standardErrors, liquidErrors }) => {
+        // Store API validation errors in state so they can be displayed in UI
         setApiValidationErrors({
           liquidErrors: liquidErrors || [],
           standardErrors: standardErrors || [],
@@ -939,12 +974,15 @@ 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: [],
@@ -960,6 +998,10 @@ const EmailHTMLEditor = (props) => {
         messages: formBuilderMessages,
         onError,
         onSuccess,
+        tagLookupMap: metaEntities?.tagLookupMap,
+        eventContextTags,
+        isLiquidFlow: true,
+        forwardedTags: forwardedTags || {},
       });
     } else {
       performSave();
@@ -971,6 +1013,7 @@ const EmailHTMLEditor = (props) => {
     injectedTags,
     location,
     getDefaultTags,
+    eventContextTags,
     formatMessage,
     subjectError,
     isFullMode,
@@ -982,8 +1025,11 @@ const EmailHTMLEditor = (props) => {
     emailActions,
     getFormdata,
     isGetFormData,
+    isLiquidEnabled,
     getLiquidTags,
     showLiquidErrorInFooter,
+    metaEntities,
+    forwardedTags,
     globalActions,
     intl,
     extractedTemplateName,
@@ -1129,6 +1175,7 @@ const EmailHTMLEditor = (props) => {
             userLocale={intl.locale || 'en'}
             moduleFilterEnabled={location?.query?.type !== EMBEDDED}
             onTagContextChange={handleOnTagsContextChange}
+            isLiquidEnabled={isLiquidEnabled}
             isFullMode={isFullMode}
             onErrorAcknowledged={handleErrorAcknowledged}
             onValidationChange={handleValidationChange}

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 { isEmailUnsubscribeTagOptional } from '../../../../utils/common';
+import { isEmailUnsubscribeTagMandatory } from '../../../../utils/common';
 
 // Mock dependencies
 jest.mock('../../../../utils/commonUtils', () => ({
@@ -24,8 +24,11 @@ jest.mock('../../../../utils/tagValidations', () => ({
   validateTags: jest.fn(),
 }));
 
+// Create mutable mock for hasLiquidSupportFeature
+const mockHasLiquidSupportFeature = jest.fn(() => true);
 jest.mock('../../../../utils/common', () => ({
-  isEmailUnsubscribeTagOptional: jest.fn(() => false),
+  hasLiquidSupportFeature: (...args) => mockHasLiquidSupportFeature(...args),
+  isEmailUnsubscribeTagMandatory: jest.fn(() => false),
 }));
 
 jest.mock('../../../../utils/history', () => ({
@@ -417,7 +420,7 @@ describe('EmailHTMLEditor', () => {
     jest.clearAllMocks();
     validateLiquidTemplateContent.mockResolvedValue(true);
     validateTags.mockReturnValue({ valid: true });
-    isEmailUnsubscribeTagOptional.mockReturnValue(false);
+    isEmailUnsubscribeTagMandatory.mockReturnValue(false);
     // Reset mock functions
     mockGetAllIssues.mockReturnValue([]);
     mockGetValidationState.mockReturnValue({
@@ -425,6 +428,88 @@ 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)', () => {
@@ -1021,7 +1106,7 @@ describe('EmailHTMLEditor', () => {
     });
 
     it('allows save when unsubscribe validation is on and tag is present', () => {
-      isEmailUnsubscribeTagOptional.mockReturnValue(false);
+      isEmailUnsubscribeTagMandatory.mockReturnValue(false);
       renderWithIntl({
         isGetFormData: true,
         subject: 'Valid Subject',
@@ -1031,44 +1116,49 @@ describe('EmailHTMLEditor', () => {
       // Should proceed with save (validation passes)
     });
 
-    it('blocks save when liquid API validation fails for Email', async () => {
-      // Liquid validation runs in library mode (!isFullMode). Simulate API validation failure via mock onError.
-      validateLiquidTemplateContent.mockImplementation((content, options) => {
-        options.onError({ standardErrors: [], liquidErrors: ['Validation failed'] });
-        return Promise.resolve(false);
+    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'],
       });
       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,
-        isFullMode: false,
         metaEntities: {
           tags: {
             standard: [{ name: 'customer.name' }],
           },
         },
-        getLiquidTags: jest.fn((content, cb) => cb({ askAiraResponse: { data: [] }, isError: false })),
+        getLiquidTags: null, // No liquid tags for non-liquid org
       });
       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
             {...defaultProps}
             onValidationFail={onValidationFail}
             isGetFormData
-            isFullMode={false}
             metaEntities={{
               tags: {
                 standard: [{ name: 'customer.name' }],
               },
             }}
-            getLiquidTags={jest.fn((content, cb) => cb({ askAiraResponse: { data: [] }, isError: false }))} />
+            getLiquidTags={null} />
         </IntlProvider>
       );
+
       await waitFor(() => {
+        expect(CapNotification.error).toHaveBeenCalled();
         expect(onValidationFail).toHaveBeenCalled();
       }, { timeout: 3000 });
     });
@@ -1085,15 +1175,16 @@ describe('EmailHTMLEditor', () => {
       // Ensure no HTML/Label/Liquid errors from HtmlEditor
       mockGetAllIssues.mockReturnValue([]);
 
-      // Liquid validation runs only in library mode
+      // Set subject and content via component interactions
       const { rerender } = renderWithIntl({
         isGetFormData: false,
-        isFullMode: false,
+        isFullMode: true,
         metaEntities: {
           tags: {
             standard: [{ name: 'customer.name' }],
           },
         },
+        isLiquidEnabled: true,
         getLiquidTags,
       });
       const input = screen.getByTestId('subject-input');
@@ -1115,7 +1206,7 @@ describe('EmailHTMLEditor', () => {
             <EmailHTMLEditor
               {...defaultProps}
               isGetFormData
-              isFullMode={false}
+              isFullMode
               metaEntities={{
                 tags: {
                   standard: [{ name: 'customer.name' }],
@@ -1139,10 +1230,11 @@ describe('EmailHTMLEditor', () => {
       // Ensure no HTML/Label/Liquid errors from HtmlEditor
       mockGetAllIssues.mockReturnValue([]);
 
-      // Liquid validation runs only in library mode
+      // Set subject and content via component interactions
       const { rerender } = renderWithIntl({
         isGetFormData: false,
-        isFullMode: false,
+        isFullMode: true,
+        isLiquidEnabled: true,
         getLiquidTags,
       });
       const input = screen.getByTestId('subject-input');
@@ -1161,7 +1253,7 @@ describe('EmailHTMLEditor', () => {
       await act(async () => {
         rerender(
           <IntlProvider locale="en" messages={{}}>
-            <EmailHTMLEditor {...defaultProps} isGetFormData isFullMode={false} getLiquidTags={getLiquidTags} />
+            <EmailHTMLEditor {...defaultProps} isGetFormData isFullMode getLiquidTags={getLiquidTags} />
           </IntlProvider>
         );
       });
@@ -1188,10 +1280,11 @@ describe('EmailHTMLEditor', () => {
       // Ensure no HTML/Label/Liquid errors from HtmlEditor
       mockGetAllIssues.mockReturnValue([]);
 
-      // Liquid validation runs only in library mode
+      // Set subject and content via component interactions
       const { rerender } = renderWithIntl({
         isGetFormData: false,
-        isFullMode: false,
+        isFullMode: true,
+        isLiquidEnabled: true,
         getLiquidTags,
         showLiquidErrorInFooter,
         onValidationFail,
@@ -1212,7 +1305,7 @@ describe('EmailHTMLEditor', () => {
       await act(async () => {
         rerender(
           <IntlProvider locale="en" messages={{}}>
-            <EmailHTMLEditor {...defaultProps} isGetFormData isFullMode={false} getLiquidTags={getLiquidTags} showLiquidErrorInFooter={showLiquidErrorInFooter} onValidationFail={onValidationFail} />
+            <EmailHTMLEditor {...defaultProps} isGetFormData isFullMode getLiquidTags={getLiquidTags} showLiquidErrorInFooter={showLiquidErrorInFooter} onValidationFail={onValidationFail} />
           </IntlProvider>
         );
       });
@@ -1232,20 +1325,27 @@ describe('EmailHTMLEditor', () => {
         return Promise.resolve(true);
       });
 
-      const getFormdata = jest.fn();
+      const emailActions = {
+        ...defaultProps.emailActions,
+        transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
+        createTemplate: jest.fn((obj, callback) => {
+          callback({ templateId: { _id: '123', versions: {} } });
+        }),
+      };
       const getLiquidTags = jest.fn((content, callback) => {
         callback({ askAiraResponse: { data: [] }, isError: false });
       });
       // Ensure no HTML/Label/Liquid errors from HtmlEditor
       mockGetAllIssues.mockReturnValue([]);
 
-      // Liquid validation runs only in library mode; then performSave calls getFormdata
+      // Set subject and content via component interactions
       const { rerender } = renderWithIntl({
         isGetFormData: false,
-        isFullMode: false,
+        isFullMode: true,
+        isLiquidEnabled: true,
         getLiquidTags,
-        getFormdata,
-        location: { query: { module: 'library' } },
+        emailActions,
+        templateName: 'New Template',
       });
       const input = screen.getByTestId('subject-input');
       await act(async () => {
@@ -1263,7 +1363,7 @@ describe('EmailHTMLEditor', () => {
       await act(async () => {
         rerender(
           <IntlProvider locale="en" messages={{}}>
-            <EmailHTMLEditor {...defaultProps} isGetFormData isFullMode={false} getLiquidTags={getLiquidTags} getFormdata={getFormdata} location={{ query: { module: 'library' } }} />
+            <EmailHTMLEditor {...defaultProps} isGetFormData isFullMode getLiquidTags={getLiquidTags} emailActions={emailActions} templateName="New Template" />
           </IntlProvider>
         );
       });
@@ -1273,11 +1373,12 @@ describe('EmailHTMLEditor', () => {
       }, { timeout: 5000 });
 
       await waitFor(() => {
-        expect(getFormdata).toHaveBeenCalled();
+        expect(emailActions.createTemplate).toHaveBeenCalled();
       }, { timeout: 5000 });
     });
 
     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)),
@@ -1311,6 +1412,7 @@ 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)),
@@ -1380,6 +1482,7 @@ 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)),
@@ -1414,6 +1517,7 @@ 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)),
@@ -1450,6 +1554,7 @@ 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)),
@@ -1485,6 +1590,7 @@ 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
@@ -1512,6 +1618,7 @@ 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
@@ -1651,6 +1758,7 @@ 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, replace } from 'lodash';
+import _, { find, cloneDeep, findIndex, isEmpty, isEqual, filter, flattenDeep, replace } from 'lodash';
 import * as actions from './actions';
 import { makeSelectFTP, makeSelectMetaEntities } from './selectors';
 import { makeSelectLoyaltyPromotionDisplay, setInjectedTags } from '../Cap/selectors';
@@ -33,6 +33,7 @@ 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';
 
@@ -234,16 +235,63 @@ 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 } = this.state;
+    const { messageContent, tagsTree = []} = 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}>
@@ -261,6 +309,7 @@ export class FTP extends React.Component {
               label={formatMessage(messages.messageHeader)}
               onChange={this.updateMessageBody}
               value={messageContent}
+              errorMessage={errorMessageText}
             />
           </div>
         </CapColumn>