@capillarytech/creatives-library 8.0.292-alpha.0 → 8.0.292-alpha.10

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, EMAIL, SMS, EDIT_TEMPLATE, MOBILE_PUSH } from './constants';
+import { PREVIEW } 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 === EDIT_TEMPLATE
+  return slidBoxContent === "editTemplate"
     ? <FormattedMessage {...messages.creativesTemplatesUpdate} />
     : <FormattedMessage {...messages.creativesTemplatesSaveFullMode} />;
 }
@@ -52,13 +52,8 @@ 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;
-  // 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;
+  const isEmailChannel = currentChannel?.toUpperCase() === 'EMAIL';
+  const isEditMode = slidBoxContent === 'editTemplate';
 
   // 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
@@ -134,11 +129,8 @@ function SlideBoxFooter(props) {
   const isBEEEditorModeInCreate = !isHTMLEditorMode && !isEditMode;
   const isBEEEditorMode = isBEEEditorModeInEdit || isBEEEditorModeInCreate;
   const hasBEEEditorErrors = isEmailChannel && isBEEEditorMode && (hasStandardErrors || hasLiquidErrors) && (!htmlEditorValidationState || !htmlEditorHasErrors);
-  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 || hasMobilePushValidationErrors || isSupportCKEditor;
+  const shouldShowErrorInfoNote = hasBEEEditorErrors || isSupportCKEditor;
 
   // Check for personalization tokens in title/message when anonymous user tries to save
   const hasPersonalizationTokens = () => {

package/v2Containers/CreativesContainer/index.js

@@ -132,6 +132,7 @@ export class Creatives extends React.Component {
       },
       hasPersonalizationTokenError: false, // Track personalization token errors in form
     };
+    this.liquidFlow = Boolean(commonUtil.hasLiquidSupportFeature());
     this.creativesTemplateSteps = {
       1: 'modeSelection',
       2: 'templateSelection', // only for email in current flows wil be used for mpush, line and wechat as well.
@@ -255,23 +256,12 @@ export class Creatives extends React.Component {
   };
 
   onShowTemplates = () => {
-    this.setState({
-      slidBoxContent: 'templates',
-      showSlideBox: true,
-      isGetFormData: false,
-      liquidErrorMessage: { STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] },
-      isLiquidValidationError: false,
-    });
+    this.setState({ slidBoxContent: 'templates', showSlideBox: true, isGetFormData: false });
     this.resetStep();
   };
 
   onChannelChange = (channel) => {
-    this.setState({
-      currentChannel: channel,
-      templateData: null,
-      liquidErrorMessage: { STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] },
-      isLiquidValidationError: false,
-    });
+    this.setState({ currentChannel: channel, templateData: null });
   }
 
   onCreateNextStep = () => {
@@ -1479,12 +1469,11 @@ export class Creatives extends React.Component {
   }
 
   getFormData = (template) => {
-    // Always reset isGetFormData so the child does not re-send form data on every re-render
-    // (e.g. when user fixes validation error by typing, we must not auto-close the slidebox)
-    this.setState({ isGetFormData: false });
     if (template.validity) {
       this.setState(
-        {},
+        {
+          isGetFormData: false,
+        },
         () => {
           const templateData = this.state.templateData ? this.state.templateData : template; //select existing or create new content
           const channel = templateData.type;
@@ -1568,8 +1557,6 @@ export class Creatives extends React.Component {
       ...prevState,
       templateData: undefined,
       showSlideBox: false,
-      liquidErrorMessage: { STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] },
-      isLiquidValidationError: false,
     }), () => this.props.handleCloseCreatives(reloadTemplates));
   };
 
@@ -1772,23 +1759,16 @@ export class Creatives extends React.Component {
           showTemplateNameComponentEdit: true,
           localTemplateName: name || '', // Initialize local state with current value
         });
+      } else {
+        // e.g. InApp edit with empty name: still show header with "Edit name" link
+        this.setState({ showTemplateNameComponentEdit: false });
       }
     }
   }
 
   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,
+      isLiquidValidationError: !isEmpty(get(errorMessagesFromFormBuilder, constants.LIQUID_ERROR_MSG, [])) || !isEmpty(get(errorMessagesFromFormBuilder, constants.STANDARD_ERROR_MSG, [])),
       liquidErrorMessage: errorMessagesFromFormBuilder,
       activeFormBuilderTab: currentFormBuilderTab === 1 ? constants.ANDROID : (currentFormBuilderTab === 2 ? constants.IOS : null), // Update activeFormBuilderTab, default to 1 if undefined
     });

package/v2Containers/Email/index.js

@@ -26,7 +26,7 @@ import * as globalActions from '../Cap/actions';
 import './_email.scss';
 import {getMessageObject} from '../../utils/messageUtils';
 import EmailPreview from '../../v2Components/EmailPreview';
-import { getDecodedFileName, hasSupportCKEditor } from '../../utils/common';
+import { getDecodedFileName, hasLiquidSupportFeature, hasSupportCKEditor } from '../../utils/common';
 import Pagination from '../../v2Components/Pagination';
 import * as creativesContainerActions from '../CreativesContainer/actions';
 import withCreatives from '../../hoc/withCreatives';
@@ -170,6 +170,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         deleteLanguage: this.deleteLanguage,
       },
     };
+    this.liquidFlow =  hasLiquidSupportFeature();
   }
   componentWillMount() {
     const formData = this.initFormData(this.props, true); //_.cloneDeep(this.state.formData);
@@ -254,6 +255,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       layout: 'EMAIL',
       type: 'LAYOUT',
       version: 'v2',
+      liquidFlow:this.liquidFlow,
     };
     this.props.globalActions.fetchSchemaForEntity(query);
     window.addEventListener("message", this.handleFrameTasks);
@@ -345,6 +347,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           type: 'TAG',
           context: this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default',
           embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
+          liquidFlow:this.liquidFlow
         };
         if (this.props.getDefaultTags) {
           query.context = this.props.getDefaultTags;
@@ -2370,6 +2373,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       type: 'TAG',
       context: (data || '').toLowerCase() === 'all' ? 'default' : (data || '').toLowerCase(),
       embedded: 'full',
+      liquidFlow:this.liquidFlow
     };
     this.props.globalActions.fetchSchemaForEntity(query);
   }

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}