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

package/v2Containers/InApp/index.js

@@ -31,6 +31,7 @@ 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';
@@ -57,6 +58,7 @@ 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";
@@ -175,6 +177,10 @@ export const InApp = (props) => {
   // Transformation to payload structure happens in prepareTestMessagePayload
   // Reference: Based on getPreviewSection() function (lines 490-530) which prepares content for TemplatePreview
   const getTemplateContent = useCallback(() => {
+    // For HTML template, use HTML editor content so preview stays in sync with typing
+    const androidMsg = isHTMLTemplate ? (htmlContentAndroid ?? '') : templateMessageAndroid;
+    const iosMsg = isHTMLTemplate ? (htmlContentIos ?? '') : templateMessageIos;
+
     // Prepare Android content
     const androidMediaPreview = {};
     if (templateMediaType === INAPP_MEDIA_TYPES.IMAGE) {
@@ -184,7 +190,7 @@ export const InApp = (props) => {
     const androidContent = {
       mediaPreview: androidMediaPreview,
       templateTitle: titleAndroid,
-      templateMsg: templateMessageAndroid,
+      templateMsg: androidMsg,
       ...(isBtnTypeCtaAndroid && {
         ctaData: ctaDataAndroid,
       }),
@@ -202,7 +208,7 @@ export const InApp = (props) => {
     const iosContent = {
       mediaPreview: iosMediaPreview,
       templateTitle: titleIos,
-      templateMsg: templateMessageIos,
+      templateMsg: iosMsg,
       ...(isBtnTypeCTaIos && {
         ctaData: ctaDataIos,
       }),
@@ -233,6 +239,9 @@ export const InApp = (props) => {
     templateLayoutType,
     deepLinkValueAndroid,
     deepLinkValueIos,
+    isHTMLTemplate,
+    htmlContentAndroid,
+    htmlContentIos,
   ]);
 
   // Handle Test and Preview button click
@@ -353,10 +362,10 @@ export const InApp = (props) => {
       setTempName(name);
       setTemplateDate(createdAt);
       setTemplateLayoutType(editContent?.ANDROID?.bodyType);
-      // Call showTemplateName callback when in edit mode + full mode to show template name header
-      if (showTemplateName && name) {
+      // Call showTemplateName when in edit mode so the header with "Edit name" shows (same as Email)
+      if (showTemplateName) {
         showTemplateName({
-          formData: { 'template-name': name },
+          formData: { 'template-name': name || '' },
           onFormDataChange: (updatedFormData) => {
             const newName = updatedFormData?.['template-name'] || '';
             setTempName(newName);
@@ -1001,12 +1010,11 @@ export const InApp = (props) => {
 
   // Handle HTML content changes from HTMLEditor
   const handleHtmlContentChange = useCallback((deviceContent, changedDevice) => {
-    // The onChange callback from useInAppContent passes the full deviceContent object
-    // But we only want to update the state for the device that actually changed
-    // Use the second parameter (changedDevice) if provided, otherwise update both
+    // When "keep content same" is on, useInAppContent passes full deviceContent with both
+    // android and ios set to the same value. We must update both states so preview shows
+    // the synced content for each device. Otherwise only update the device that changed.
 
     // Clear validation errors when content changes (similar to Bee Editor)
-    // This ensures Done button re-enables after user fixes errors
     if (changedDevice) {
       setErrorMessage((prev) => ({
         STANDARD_ERROR_MSG: {
@@ -1022,30 +1030,41 @@ export const InApp = (props) => {
       }));
     }
 
-    if (changedDevice) {
-      // Only update the device that actually changed
-      if (changedDevice.toUpperCase() === ANDROID && deviceContent?.android !== undefined) {
+    const hasAndroid = deviceContent?.android !== undefined;
+    const hasIos = deviceContent?.ios !== undefined;
+    const isSyncUpdate = hasAndroid && hasIos;
+
+    if (isSyncUpdate) {
+      // Sync mode: update both so preview shows same content for Android and iOS
+      if (hasAndroid) {
+        setHtmlContentAndroid(deviceContent.android || '');
+      }
+      if (hasIos) {
+        setHtmlContentIos(deviceContent.ios || '');
+      }
+    } else if (changedDevice) {
+      // Only one device changed
+      if (changedDevice.toUpperCase() === ANDROID && hasAndroid) {
         setHtmlContentAndroid(deviceContent.android || '');
-      } else if (changedDevice.toUpperCase() === IOS_CAPITAL && deviceContent?.ios !== undefined) {
+      } else if (changedDevice.toUpperCase() === IOS_CAPITAL && hasIos) {
         setHtmlContentIos(deviceContent.ios || '');
       }
     } else {
-      // Fallback: update both if changedDevice not provided (for backward compatibility)
-      // Only update if value actually changed to avoid unnecessary re-renders
-      if (deviceContent?.android !== undefined) {
+      // Fallback: update both if changedDevice not provided
+      if (hasAndroid) {
         setHtmlContentAndroid((prev) => {
           const newValue = deviceContent.android || '';
           return prev !== newValue ? newValue : prev;
         });
       }
-      if (deviceContent?.ios !== undefined) {
+      if (hasIos) {
         setHtmlContentIos((prev) => {
           const newValue = deviceContent.ios || '';
           return prev !== newValue ? newValue : prev;
         });
       }
     }
-  }, [ANDROID, IOS, setErrorMessage]);
+  }, [ANDROID, IOS_CAPITAL, setErrorMessage]);
 
   // Handle HTML save from HTMLEditor
   const handleHtmlSave = useCallback((deviceContent) => {
@@ -1077,8 +1096,8 @@ 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
     const onError = ({ standardErrors, liquidErrors }) => {
       setErrorMessage((prev) => ({
         STANDARD_ERROR_MSG: { ...prev.STANDARD_ERROR_MSG, ...standardErrors },
@@ -1086,20 +1105,30 @@ export const InApp = (props) => {
       }));
     };
     const onSuccess = () => {
+      // Proceed with submission when validation is successful
       onDoneCallback();
     };
 
-    // Library mode: run extractTags validation (always, so we catch liquid errors even when tags not loaded)
-    if (!isFullMode) {
+    // 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
       const payload = createPayload();
       validateInAppContent(payload, {
-        currentTab: panes === ANDROID ? 1 : 2,
+        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}\)/,
@@ -1107,15 +1136,103 @@ 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,16 +21,18 @@ 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, setSpin) => {
+  getTemplateDetails: jest.fn((id, callback) => {
     // Simulate successful template details fetch to prevent loading state
     // The callback is setSpin function, call it with false to stop spinner
-    if (setSpin && typeof setSpin === 'function') {
-      setTimeout(() => setSpin(false), 0);
+    if (callback && typeof callback === 'function') {
+      // Use setTimeout to ensure it's called after render
+      setTimeout(() => {
+        callback(false);
+      }, 0);
     }
   }),
   editTemplate: jest.fn(),
@@ -39,9 +41,6 @@ const mockActions = {
 };
 const mockGlobalActions = {
   fetchSchemaForEntity: jest.fn(),
-  getLiquidTags: jest.fn((content, callback) =>
-    callback({ askAiraResponse: { data: [], errors: [] }, isError: false }),
-  ),
 };
 
 jest.mock('../../../v2Containers/TagList/index.js', () => ({
@@ -67,17 +66,7 @@ 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,7 +50,9 @@ 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";
@@ -115,6 +117,9 @@ export const InappAdvanced = (props) => {
     },
   });
 
+  // Template id for edit: use params (route), templateData (library), or fetched templateDetails
+  const templateId = params?.id || get(templateData, '_id') || get(editData, 'templateDetails._id');
+
   //fetching bee popup builder token
   useEffect(() => {
     actions.getBeePopupBuilderToken();
@@ -141,7 +146,9 @@ export const InappAdvanced = (props) => {
     } = isFullMode ? editData?.templateDetails || {} : templateData || {};
     editContent = get(versions, `base.content`, {});
 
-    if (editContent && !isEmpty(editContent)) {
+    // Set edit flow when we have loaded content OR when we have a template id (edit page)
+    const hasTemplateId = params?.id || get(templateData, '_id') || get(editData, 'templateDetails._id');
+    if ((editContent && !isEmpty(editContent)) || (hasTemplateId && (editData?.templateDetails || templateData))) {
       setEditFlow(true);
       if (setTemplateName && name) {
         setTemplateName(name);
@@ -664,7 +671,7 @@ export const InappAdvanced = (props) => {
     actions.editTemplate(
       {
         ...payload,
-        _id: params?.id,
+        _id: templateId,
       },
       (resp, errorMsg) => {
         actionCallback({ resp, errorMessage: errorMsg });
@@ -815,16 +822,24 @@ export const InappAdvanced = (props) => {
     const latestHtmlValues = await saveAllBeeInstances();
     const payload = createPayload(latestHtmlValues);
 
-    // Liquid validation (extractTags) only in library mode
-    if (!isFullMode) {
+    // 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;
+    if (isLiquidFlow && hasTags) {
       validateInAppContent(payload, {
-        currentTab: panes === ANDROID ? 1 : 2,
+        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}\)/,
@@ -832,18 +847,105 @@ 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();
     }
   };
 
   const onDoneCallback = async () => {
     if (isFullMode) {
-      if (isEditFlow) {
+      // Edit when we have template id (from route/templateData/fetched details) or isEditFlow set from content
+      if (templateId || isEditFlow) {
         await onEditInApp();
         return;
       }
@@ -854,7 +956,7 @@ export const InappAdvanced = (props) => {
     const latestHtmlValues = await saveAllBeeInstances();
     getFormData({
       value: createPayload(latestHtmlValues),
-      _id: params && params?.id,
+      _id: templateId,
       validity: true,
       type: INAPP,
     });
@@ -942,7 +1044,15 @@ export const InappAdvanced = (props) => {
             )}
             <CapButton
               onClick={async () => {
-                await liquidMiddleWare();
+                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();
+                }
               }}
               disabled={isDisableDone()}
               className="inapp-create-btn"

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

@@ -61,7 +61,6 @@ describe('InappAdvanced Component', () => {
 
     const mockGlobalActions = {
       fetchSchemaForEntity: jest.fn(),
-      getLiquidTags: jest.fn((content, callback) => callback({ askAiraResponse: { data: [] }, isError: false })),
     };
 
     defaultProps = {
@@ -72,7 +71,7 @@ describe('InappAdvanced Component', () => {
       globalActions: mockGlobalActions,
       isFullMode: true,
       onCreateComplete: jest.fn(),
-      params: { id: 'test-id' },
+      params: {}, // No id so create mode (edit flow not triggered)
       templateData: {},
       editData: {},
       accountData: {
@@ -299,6 +298,7 @@ describe('InappAdvanced Component', () => {
       renderComponent({
         ...defaultProps,
         isFullMode: false,
+        params: { id: 'test-id' },
         getFormData: mockGetFormData,
       });
 
@@ -410,7 +410,6 @@ 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,6 +137,7 @@ export const LineText = ({
         const { valid, isBraceError } = validateTags({
             content: value,
             tagsParam: tags,
+            injectedTagsParams: injectedTags,
             location,
             tagModule: 'outbound',
             isFullMode,

package/v2Containers/MobilePush/Create/index.js

@@ -38,8 +38,7 @@ import v2MobilePushCreateReducer from './reducer';
 import { v2MobilePushWatchDuplicateTemplateSaga } from './sagas';
 import { EXTERNAL_LINK_LOWERCASE } from './constants';
 import TestAndPreviewSlidebox from '../../../v2Components/TestAndPreviewSlidebox';
-import { checkForPersonalizationTokens, validateMobilePushContent } from '../../../utils/commonUtils';
-import formBuilderMessages from '../../../v2Components/FormBuilder/messages';
+import { checkForPersonalizationTokens } from '../../../utils/commonUtils';
 
 const PrefixWrapper = styled.div`
   margin-right: 16px;
@@ -95,39 +94,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.props.globalActions.fetchSchemaForEntity(query);
   };
   componentWillReceiveProps = (nextProps) => {
-    // 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) {
-        nextProps.onValidationFail();
-        return;
-      }
-      if (nextProps.getLiquidTags && nextProps.showLiquidErrorInFooter && nextProps.onValidationFail) {
-        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
-            );
-            nextProps.onValidationFail();
-          },
-          onSuccess: () => {
-            nextProps.getFormLibraryData(this.getFormData());
-          },
-        });
-      } else {
-        nextProps.getFormLibraryData(this.getFormData());
-      }
+    if (nextProps.isGetFormData && !this.props.isFullMode) {
+      nextProps.getFormLibraryData(this.getFormData());
     } else if (nextProps.isGetFormData && this.props.isGetFormData !== nextProps.isGetFormData && this.props.isFullMode && !this.props.Create.createTemplateInProgress) {
       this.startValidation();
     }
@@ -710,21 +678,31 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   }
   showError = () => {
     const {intl} = this.props;
-    const {errorData, schema} = this.state;
+    const {errorData} = 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);
-      const isIosTabVisible = get(schema, 'containers[0].panes[1].isSupported', true) !== false;
+      const isAndroidInvalid = Object.values(errorData[0]).includes(true);
+      const isIosInvalid = Object.values(errorData[1]).includes(true);
+      let isTagErrorExist = false;
       if (isAndroidInvalid) {
         tab = 1;
         errorMessage.description = intl.formatMessage(messages.invalidAndroidMessage);
-      } else if (isIosInvalid && isIosTabVisible) {
+        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) {
         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) {
+      if (tab !== this.state.currentTab || isTagErrorExist) {
         CapNotification.error(errorMessage);
       }
     }
@@ -2051,7 +2029,6 @@ Create.propTypes = {
   onPreviewContentClicked: PropTypes.func,
   onTestContentClicked: PropTypes.func,
   eventContextTags: PropTypes.array,
-  getLiquidTags: PropTypes.func,
   showLiquidErrorInFooter: PropTypes.func,
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,