@capillarytech/creatives-library 8.0.308 → 8.0.309

package/v2Containers/InApp/index.js

@@ -33,7 +33,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';
@@ -53,7 +52,7 @@ import {
   LAYOUT_RADIO_OPTIONS,
   IOS_CAPITAL,
 } from "./constants";
-import { INAPP, SMS } from "../CreativesContainer/constants";
+import { GENERIC, INAPP, SMS } from "../CreativesContainer/constants";
 import { AI_CONTENT_BOT_DISABLED } from "../../constants/unified";
 import {
   ALL, TAG, EMBEDDED, DEFAULT, FULL, LIBRARY,
@@ -61,7 +60,8 @@ import {
 import { getCdnUrl } from "../../utils/cdnTransformation";
 import { getCtaObject, hasAnyErrors, getSingleTab } from "./utils";
 import { validateInAppContent } from "../../utils/commonUtils";
-import { hasLiquidSupportFeature, hasNewEditorFlowInAppEnabled } from "../../utils/common";
+import { validateTags } from "../../utils/tagValidations";
+import { hasNewEditorFlowInAppEnabled } from "../../utils/common";
 import formBuilderMessages from "../../v2Components/FormBuilder/messages";
 import HTMLEditor from "../../v2Components/HtmlEditor";
 import { HTML_EDITOR_VARIANTS } from "../../v2Components/HtmlEditor/constants";
@@ -1084,39 +1084,55 @@ export const InApp = (props) => {
   };
 
   // Validation middleware for tag validation (both liquid and non-liquid flow)
+  // Liquid validation (extractTags) runs only in library mode
   const validationMiddleWare = async () => {
-    // Set up callbacks for validation results
+    // Normalize validator bucket keys to component state keys (ANDROID, IOS_CAPITAL, GENERIC)
+    // so we don't merge e.g. 'android'/'ios'/'generic' with ANDROID/IOS/GENERIC and get duplicate/stale keys
+    const normalizeErrorBuckets = (errors) => {
+      const normalized = {
+        [ANDROID]: [],
+        [IOS_CAPITAL]: [],
+        [GENERIC]: [],
+      };
+      if (!errors || typeof errors !== 'object') return normalized;
+      const keyMap = {
+        ANDROID,
+        android: ANDROID,
+        [IOS_CAPITAL]: IOS_CAPITAL,
+        [IOS]: IOS_CAPITAL,
+        ios: IOS_CAPITAL,
+        GENERIC,
+        generic: GENERIC,
+      };
+      for (const [key, value] of Object.entries(errors)) {
+        const targetKey = keyMap[key];
+        if (targetKey != null && Array.isArray(value)) {
+          normalized[targetKey] = value;
+        }
+      }
+      return normalized;
+    };
     const onError = ({ standardErrors, liquidErrors }) => {
       setErrorMessage((prev) => ({
-        STANDARD_ERROR_MSG: { ...prev.STANDARD_ERROR_MSG, ...standardErrors },
-        LIQUID_ERROR_MSG: { ...prev.LIQUID_ERROR_MSG, ...liquidErrors },
+        STANDARD_ERROR_MSG: { ...prev.STANDARD_ERROR_MSG, ...normalizeErrorBuckets(standardErrors) },
+        LIQUID_ERROR_MSG: { ...prev.LIQUID_ERROR_MSG, ...normalizeErrorBuckets(liquidErrors) },
       }));
     };
     const onSuccess = () => {
-      // Proceed with submission when validation is successful
       onDoneCallback();
     };
 
-    // 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
+    // Library mode: run extractTags validation (always, so we catch liquid errors even when tags not loaded)
+    if (!isFullMode) {
       const payload = createPayload();
       validateInAppContent(payload, {
-        currentTab: panes === ANDROID ? 1 : 2, // Convert ANDROID/IOS to tab numbers
+        currentTab: panes === ANDROID ? 1 : 2,
         onError,
         onSuccess,
         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 = [
             /dynamic_expiry_date_after_\d+_days\.FORMAT_\d/,
             /unsubscribe\(#[a-zA-Z\d]{6}\)/,
@@ -1124,103 +1140,15 @@ export const InApp = (props) => {
             /SURVEY.*\.TOKEN/,
             /^[A-Za-z].*\([a-zA-Z\d]*\)/,
           ];
-
           return skipRegexes.some((regex) => regex.test(tag));
         },
         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,

package/v2Containers/InappAdvance/index.js

@@ -50,9 +50,7 @@ import injectReducer from '../../utils/injectReducer';
 import v2InAppReducer from '../InApp/reducer';
 import { v2InAppSagas } from '../InApp/sagas';
 import injectSaga from '../../utils/injectSaga';
-import { validateTags } from "../../utils/tagValidations";
 import { validateInAppContent } from "../../utils/commonUtils";
-import { hasLiquidSupportFeature } from "../../utils/common";
 import formBuilderMessages from "../../v2Components/FormBuilder/messages";
 import { getSingleTab, hasAnyErrors } from "../InApp/utils";
 import ErrorInfoNote from "../../v2Components/ErrorInfoNote";
@@ -818,30 +816,18 @@ export const InappAdvanced = (props) => {
     const payload = createPayload(latestHtmlValues);
 
     // Validate the INAPP content
-    const isLiquidFlow = hasLiquidSupportFeature();
     // Skip validation if no tags are available (e.g., in tests or when tags haven't loaded)
     const hasTags = tags && tags.length > 0;
 
-    // When liquid is enabled and isFullMode is true, skip liquid validation and proceed directly
-    if (isLiquidFlow && isFullMode) {
-      onSuccess();
-      return;
-    }
-
-    if (isLiquidFlow && hasTags) {
-      validateInAppContent(payload, {
+    if (!isFullMode || hasTags) {
+      await validateInAppContent(payload, {
         currentTab: panes === ANDROID ? 1 : 2, // Convert ANDROID/IOS to tab numbers
         onError,
         onSuccess,
         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 = [
             /dynamic_expiry_date_after_\d+_days\.FORMAT_\d/,
             /unsubscribe\(#[a-zA-Z\d]{6}\)/,
@@ -849,98 +835,12 @@ export const InappAdvanced = (props) => {
             /SURVEY.*\.TOKEN/,
             /^[A-Za-z].*\([a-zA-Z\d]*\)/,
           ];
-
           return skipRegexes.some((regex) => regex.test(tag));
         },
         singleTab: getSingleTab(accountData),
       });
-    } else if (hasTags) {
-      // For non-liquid flow, validate tags using validateTags (only if tags are available)
-      const androidContent = latestHtmlValues?.android || (androidBeeHtml?.value || (typeof androidBeeHtml === 'string' ? androidBeeHtml : ''));
-      const iosContent = latestHtmlValues?.ios || (iosBeeHtml?.value || (typeof iosBeeHtml === 'string' ? iosBeeHtml : ''));
-
-      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();
+      await onSuccess();
     }
   };
 
@@ -1045,15 +945,7 @@ export const InappAdvanced = (props) => {
             )}
             <CapButton
               onClick={async () => {
-                const isLiquidFlow = hasLiquidSupportFeature();
-                const hasTags = tags && tags?.length > 0;
-                if (isLiquidFlow || hasTags) {
-                  // Use validation middleware for tag validation
-                  await liquidMiddleWare();
-                } else {
-                  // No validation needed, proceed directly
-                  await onDoneCallback();
-                }
+                await liquidMiddleWare();
               }}
               disabled={isDisableDone()}
               className="inapp-create-btn"

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

@@ -61,6 +61,7 @@ describe('InappAdvanced Component', () => {
 
     const mockGlobalActions = {
       fetchSchemaForEntity: jest.fn(),
+      getLiquidTags: jest.fn((content, callback) => callback({ askAiraResponse: { data: [] }, isError: false })),
     };
 
     defaultProps = {
@@ -409,6 +410,7 @@ describe('InappAdvanced Component', () => {
           actions: mockActions,
           globalActions: {
             fetchSchemaForEntity: jest.fn(),
+            getLiquidTags: jest.fn((content, callback) => callback({ askAiraResponse: { data: [] }, isError: false })),
           },
           location: {
             pathname: '/inapp/create',

package/v2Containers/Line/Container/Text/index.js

@@ -137,7 +137,6 @@ export const LineText = ({
         const { valid, isBraceError } = validateTags({
             content: value,
             tagsParam: tags,
-            injectedTagsParams: injectedTags,
             location,
             tagModule: 'outbound',
             isFullMode,

package/v2Containers/MobilePush/Create/index.js

@@ -38,7 +38,8 @@ import v2MobilePushCreateReducer from './reducer';
 import { v2MobilePushWatchDuplicateTemplateSaga } from './sagas';
 import { EXTERNAL_LINK_LOWERCASE } from './constants';
 import TestAndPreviewSlidebox from '../../../v2Components/TestAndPreviewSlidebox';
-import { checkForPersonalizationTokens } from '../../../utils/commonUtils';
+import { checkForPersonalizationTokens, validateMobilePushContent } from '../../../utils/commonUtils';
+import formBuilderMessages from '../../../v2Components/FormBuilder/messages';
 
 const PrefixWrapper = styled.div`
   margin-right: 16px;
@@ -94,8 +95,56 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.props.globalActions.fetchSchemaForEntity(query);
   };
   componentWillReceiveProps = (nextProps) => {
-    if (nextProps.isGetFormData && !this.props.isFullMode) {
-      nextProps.getFormLibraryData(this.getFormData());
+    // Library mode: on Done click (transition to isGetFormData), run extractTags only when no existing validation errors (braces, personalization, etc.)
+    if (nextProps.isGetFormData && !this.props.isGetFormData && !nextProps.isFullMode) {
+      // If form already has validation errors (braces, personalization tags, etc.), do not call extractTags or return payload; always return early
+      if (!this.state.isFormValid) {
+        if (typeof nextProps.onValidationFail === 'function') {
+          nextProps.onValidationFail();
+        }
+        return;
+      }
+      const hasAllValidationCallbacks =
+        typeof nextProps.getLiquidTags === 'function' &&
+        typeof nextProps.showLiquidErrorInFooter === 'function' &&
+        typeof nextProps.onValidationFail === 'function';
+
+      if (hasAllValidationCallbacks) {
+        const formDataArr = [this.state.formData?.[0], this.state.formData?.[1]];
+        validateMobilePushContent(formDataArr, {
+          currentTab: this.state.currentTab,
+          getLiquidTags: nextProps.getLiquidTags,
+          formatMessage: this.props.intl.formatMessage,
+          messages: formBuilderMessages,
+          onError: (err) => {
+            const { standardErrors = [], liquidErrors = [] } = err;
+            // _validatePlatformSpecificContent passes { standardErrors: { ANDROID, IOS, generic }, liquidErrors: { ... } }; footer expects arrays
+            const toArray = (v) => (Array.isArray(v) ? v : (v && typeof v === 'object' ? [].concat(...Object.values(v)) : []));
+            const STANDARD_ERROR_MSG = toArray(standardErrors);
+            const LIQUID_ERROR_MSG = toArray(liquidErrors);
+            if (typeof nextProps.showLiquidErrorInFooter === 'function') {
+              nextProps.showLiquidErrorInFooter(
+                { STANDARD_ERROR_MSG, LIQUID_ERROR_MSG },
+                this.state.currentTab
+              );
+            }
+            // Only trigger onValidationFail when there are actual errors; skip when helper called onError with empty arrays (reset case)
+            if ((STANDARD_ERROR_MSG.length > 0 || LIQUID_ERROR_MSG.length > 0) && typeof nextProps.onValidationFail === 'function') {
+              nextProps.onValidationFail();
+            }
+          },
+          onSuccess: () => {
+            if (this.state.isFormValid && typeof nextProps.getFormLibraryData === 'function') {
+              nextProps.getFormLibraryData(this.getFormData());
+            }
+          },
+        });
+      } else {
+        // Fail closed: require full validation callback set; treat any missing callback as validation failure
+        if (typeof nextProps.onValidationFail === 'function') {
+          nextProps.onValidationFail();
+        }
+      }
     } else if (nextProps.isGetFormData && this.props.isGetFormData !== nextProps.isGetFormData && this.props.isFullMode && !this.props.Create.createTemplateInProgress) {
       this.startValidation();
     }
@@ -678,31 +727,21 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
   showError = () => {
     const {intl} = this.props;
-    const {errorData} = this.state;
+    const {errorData, schema} = this.state;
     const errorMessage = {key: 'validation-error', message: intl.formatMessage(messages.validationError)};
     if (!isEmpty(this.state.formData) && !this.state.isFormValid) {
       let tab = this.state.currentTab;
-      const isAndroidInvalid = Object.values(errorData[0]).includes(true);
-      const isIosInvalid = Object.values(errorData[1]).includes(true);
-      let isTagErrorExist = false;
+      const isAndroidInvalid = Object.values(errorData[0] || {}).includes(true);
+      const isIosInvalid = Object.values(errorData[1] || {}).includes(true);
+      const isIosTabVisible = get(schema, 'containers[0].panes[1].isSupported', true) !== false;
       if (isAndroidInvalid) {
         tab = 1;
         errorMessage.description = intl.formatMessage(messages.invalidAndroidMessage);
-        const invalidTags = errorData[0]['invalid-tags'];
-        if (!isEmpty(invalidTags)) {
-          isTagErrorExist = true;
-          errorMessage.description = `${intl.formatMessage(messages.invalidAndroidMessage)} ${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
-        }
-      } else if (isIosInvalid) {
+      } else if (isIosInvalid && isIosTabVisible) {
         tab = 2;
         errorMessage.description = intl.formatMessage(messages.invalidIosMessage);
-        const invalidTags = errorData[1]['invalid-tags'];
-        if (!isEmpty(invalidTags)) {
-          isTagErrorExist = true;
-          errorMessage.description = `${intl.formatMessage(messages.invalidIosMessage)} ${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
-        }
       }
-      if (tab !== this.state.currentTab || isTagErrorExist) {
+      if (tab !== this.state.currentTab) {
         CapNotification.error(errorMessage);
       }
     }
@@ -2029,6 +2068,7 @@ Create.propTypes = {
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
   eventContextTags: PropTypes.array,
+  getLiquidTags: PropTypes.func,
   showLiquidErrorInFooter: PropTypes.func,
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,

package/v2Containers/MobilePush/Edit/index.js

@@ -39,7 +39,8 @@ import { v2MobilePushEditSagas } from './sagas';
 import v2MobilePushEditReducer from './reducer';
 import * as globalActions from '../../Cap/actions';
 import { MAPP_SDK } from './constants';
-import { checkForPersonalizationTokens, isEmbeddedEditOrPreview } from '../../../utils/commonUtils';
+import { checkForPersonalizationTokens, isEmbeddedEditOrPreview, validateMobilePushContent } from '../../../utils/commonUtils';
+import formBuilderMessages from '../../../v2Components/FormBuilder/messages';
 import { EMBEDDED } from '../../Whatsapp/constants';
 import { OUTBOUND } from '../../../v2Components/FormBuilder/constants';
 import TestAndPreviewSlidebox from '../../../v2Components/TestAndPreviewSlidebox';
@@ -68,6 +69,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       schema: {},
       currentTab: 1,
       editData: {},
+      errorData: [],
       loading: false,
       isFormValid: true,
       injectedTags: {},
@@ -129,8 +131,43 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       this.hasFetchedInitialTagsRef = false;
       this.lastFetchedTagContextRef = null;
     }
-    if (nextProps.isGetFormData && !this.props.isFullMode) {
-      nextProps.getFormLibraryData(this.getFormData());
+    // Library mode: on Done click (transition to isGetFormData), run extractTags only when no existing validation errors (braces, personalization, etc.)
+    if (nextProps.isGetFormData && !this.props.isGetFormData && !nextProps.isFullMode) {
+      // If form already has validation errors (braces, personalization tags, etc.), do not call extractTags; just fail
+      if (!this.state.isFormValid) {
+        nextProps.onValidationFail?.();
+        return;
+      }
+      if (nextProps.getLiquidTags && nextProps.showLiquidErrorInFooter) {
+        const formDataArr = [this.state.formData?.[0], this.state.formData?.[1]];
+        validateMobilePushContent(formDataArr, {
+          currentTab: this.state.currentTab,
+          getLiquidTags: nextProps.getLiquidTags,
+          formatMessage: this.props.intl.formatMessage,
+          messages: formBuilderMessages,
+          onError: (err) => {
+            const { standardErrors = [], liquidErrors = [] } = err;
+            // _validatePlatformSpecificContent passes { standardErrors: { ANDROID, IOS, generic }, liquidErrors: { ... } }; footer expects arrays
+            const toArray = (v) => (Array.isArray(v) ? v : (v && typeof v === 'object' ? [].concat(...Object.values(v)) : []));
+            const STANDARD_ERROR_MSG = toArray(standardErrors);
+            const LIQUID_ERROR_MSG = toArray(liquidErrors);
+            nextProps.showLiquidErrorInFooter(
+              { STANDARD_ERROR_MSG, LIQUID_ERROR_MSG },
+              this.state.currentTab
+            );
+            // Only treat as validation failure when there are actual errors; skip when helper called onError with empty reset payload
+            const hasErrors = STANDARD_ERROR_MSG.length > 0 || LIQUID_ERROR_MSG.length > 0;
+            if (hasErrors) {
+              nextProps.onValidationFail?.();
+            }
+          },
+          onSuccess: () => {
+            nextProps.getFormLibraryData(this.getFormData());
+          },
+        });
+      } else {
+        nextProps.getFormLibraryData(this.getFormData());
+      }
     } else if (nextProps.isGetFormData && this.props.isGetFormData !== nextProps.isGetFormData && this.props.isFullMode && !this.props.Create.createTemplateInProgress) {
       this.startValidation();
     }
@@ -705,32 +742,22 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   // eslint-disable-next-line react/sort-comp
   showError = () => {
     const {intl} = this.props;
-    const {errorData} = this.state;
+    const {errorData, schema} = this.state;
     const errorMessage = {key: 'validation-error', message: intl.formatMessage(messages.validationError)};
-    let isTagErrorExist = false;
     if (!_.isEmpty(this.state.formData) && !this.state.isFormValid) {
       let tab = this.state.currentTab;
-      const isAndroidInvalid = Object.values(errorData[0]).includes(true);
-      const isIosInvalid = Object.values(errorData[1]).includes(true);
+      const isAndroidInvalid = Object.values(errorData?.[0] || {}).includes(true);
+      const isIosInvalid = Object.values(errorData?.[1] || {}).includes(true);
+      const isIosTabVisible = get(schema, 'containers[0].panes[1].isSupported', true) !== false;
       if (isAndroidInvalid) {
         tab = 1;
         errorMessage.description = intl.formatMessage(messages.invalidAndroidMessage);
-        const invalidTags = errorData[0]['invalid-tags'];
-        if (!_.isEmpty(invalidTags)) {
-          isTagErrorExist = true;
-          errorMessage.description = `${intl.formatMessage(messages.invalidAndroidMessage)} ${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
-        }
-      } else if (isIosInvalid) {
+      } else if (isIosInvalid && isIosTabVisible) {
         tab = 2;
         errorMessage.description = intl.formatMessage(messages.invalidIosMessage);
-        const invalidTags = errorData[1]['invalid-tags'];
-        if (!_.isEmpty(invalidTags)) {
-          isTagErrorExist = true;
-          errorMessage.description = `${intl.formatMessage(messages.invalidIosMessage)} ${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
-        }
       }
 
-      if (tab !== this.state.currentTab || isTagErrorExist) {
+      if (tab !== this.state.currentTab) {
         CapNotification.error(errorMessage);
       }
     }
@@ -2307,11 +2334,12 @@ Edit.propTypes = {
   getFormLibraryData: PropTypes.func,
   isGetFormData: PropTypes.bool,
   Create: PropTypes.object,
-  onValidationFail: PropTypes.bool,
+  onValidationFail: PropTypes.func,
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
   creativesMode: PropTypes.string,
   eventContextTags: PropTypes.array,
+  getLiquidTags: PropTypes.func,
   showLiquidErrorInFooter: PropTypes.func,
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,