@capillarytech/creatives-library 8.0.304 → 8.0.305-alpha.0

package/v2Components/HtmlEditor/__tests__/HTMLEditor.apiErrors.test.js

@@ -229,7 +229,6 @@ const defaultProps = {
   channel: 'EMAIL',
   userLocale: 'en',
   moduleFilterEnabled: true,
-  isLiquidEnabled: false,
   isFullMode: true,
   onErrorAcknowledged: jest.fn(),
   onValidationChange: jest.fn(),

package/v2Components/HtmlEditor/__tests__/HTMLEditor.test.js

@@ -3201,7 +3201,6 @@ describe('HTMLEditor', () => {
             onTagSelect={onTagSelect}
             onContextChange={onContextChange}
             globalActions={globalActions}
-            isLiquidEnabled={true}
             isFullMode={false}
             onErrorAcknowledged={onErrorAcknowledged}
             onValidationChange={onValidationChange}
@@ -3261,20 +3260,6 @@ describe('HTMLEditor', () => {
       expect(screen.getByTestId('device-toggle')).toBeInTheDocument();
     });
 
-    it('should handle isLiquidEnabled prop', () => {
-      render(
-        <TestWrapper>
-          <HTMLEditor isLiquidEnabled={true} />
-        </TestWrapper>
-      );
-
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      expect(screen.getByTestId('editor-toolbar')).toBeInTheDocument();
-    });
-
     it('should handle isFullMode prop', () => {
       render(
         <TestWrapper>

package/v2Components/HtmlEditor/components/CodeEditorPane/index.js

@@ -69,7 +69,7 @@ const CodeEditorPaneComponent = ({
 }) => {
   const context = useEditorContext();
   const {
-    content, validation, variant, isLiquidEnabled,
+    content, validation, variant,
   } = context || {};
   const { content: contentValue, updateContent } = content || {};
   const editorRef = useRef(null);
@@ -298,7 +298,6 @@ const CodeEditorPaneComponent = ({
         <ValidationErrorDisplay
           validation={validation}
           onErrorClick={onErrorClick}
-          isLiquidEnabled={isLiquidEnabled}
           className="code-editor-pane__validation"
         />
       </div>

package/v2Containers/BeePopupEditor/index.js

@@ -40,6 +40,11 @@ function BeePopupEditor(props) {
   const savedCallback = useRef();
   const beeInstanceRef = useRef(null);
   const isInitializedRef = useRef(false);
+  const beeJsonRef = useRef(beeJson);
+
+  useEffect(() => {
+    beeJsonRef.current = beeJson;
+  }, [beeJson]);
 
   const [visibleTaglist, setVisibleTaglist] = useState(false);
   const [selectedTag, setSelectedTag] = useState({});
@@ -111,8 +116,10 @@ function BeePopupEditor(props) {
     window.BeePlugin.create(tokenData, beeConfig, (instance) => {
       beePluginInstance = instance;
       beeInstanceRef.current = instance;
-      // Check if beeJson is already an object (happens when layout type changes)
-      const parseJson = typeof beeJson === 'string' ? JSON.parse(beeJson) : beeJson;
+      // Use ref to get the latest beeJson — the closure captures the value at effect time,
+      // but beeJsonRef.current is always up-to-date (e.g. when template data loads async)
+      const latestBeeJson = beeJsonRef.current;
+      const parseJson = typeof latestBeeJson === 'string' ? JSON.parse(latestBeeJson) : latestBeeJson;
       beePluginInstance.start(parseJson);
       saveBeeInstance(beePluginInstance, device);
       isInitializedRef.current = true;

package/v2Containers/Cap/mockData.js

@@ -2,11 +2,9 @@ export const expectedStateGetLiquidTagsRequest = {
   fetchingLiquidTags: true,
   fetchingSchema: true,
   fetchingSchemaError: "",
-  liquidTags: [],
   messages: [],
   metaEntities: {
     layouts: [],
-    tagLookupMap: {},
     tags: [],
   },
   orgID: "",
@@ -17,11 +15,9 @@ export const expectedStateGetLiquidTagsFailure = {
   fetchingLiquidTags: false,
   fetchingSchema: true,
   fetchingSchemaError: "",
-  liquidTags: [],
   messages: [],
   metaEntities: {
     layouts: [],
-    tagLookupMap: {},
     tags: [],
   },
   orgID: "",
@@ -32,11 +28,9 @@ export const expectedStateGetLiquidTagsSuccess = {
   fetchingLiquidTags: false,
   fetchingSchema: true,
   fetchingSchemaError: "",
-  liquidTags: [],
   messages: [],
   metaEntities: {
     layouts: [],
-    tagLookupMap: {},
     tags: [],
   },
   orgID: "",
@@ -47,11 +41,9 @@ export const expectedStateGetSchemaForEntitySuccessTAG = {
   fetchingLiquidTags: false,
   fetchingSchema: false,
   fetchingSchemaError: false,
-  liquidTags: [],
   messages: [],
   metaEntities: {
     layouts: undefined,
-    tagLookupMap: { undefined: { definition: {} } },
     tags: { standard: { random: "32" } },
   },
   orgID: "",
@@ -62,11 +54,9 @@ export const expectedStateGetSchemaForEntitySuccess = {
   fetchingLiquidTags: false,
   fetchingSchema: false,
   fetchingSchemaError: false,
-  liquidTags: [],
   messages: [],
   metaEntities: {
     layouts: undefined,
-    tagLookupMap: undefined,
     tags: undefined,
   },
   orgID: "",
@@ -78,13 +68,9 @@ export const expectedForwardedTags = {
   fetchingSchema: false,
   fetchingSchemaError: '',
   injectedTags: undefined,
-  liquidTags: [],
   messages: [],
   metaEntities: {
     layouts: [],
-    tagLookupMap: {
-
-    },
     tags: [],
   },
   orgID: "",

package/v2Containers/Cap/reducer.js

@@ -1,13 +1,11 @@
 /**
  * Created by vivek on 22/5/17.
  */
-import { fromJS, Map as ImmutableMap } from 'immutable';
+import { fromJS } from 'immutable';
 import _ from 'lodash';
 import * as types from './constants';
 import initialState from '../../initialState';
 import { FAILURE } from '../App/constants';
-import { TAG } from '../Whatsapp/constants';
-import { getTagMapValue, getForwardedMapValues, getLoyaltyTagsMapValue } from '../../utils/tagValidations';
 
 function capReducer(state = fromJS(initialState.cap), action) {
   switch (action.type) {
@@ -98,39 +96,6 @@ function capReducer(state = fromJS(initialState.cap), action) {
       return state
         .set('fetchingLiquidTags', false);
     case types.GET_SCHEMA_FOR_ENTITY_SUCCESS: {
-      //Process standard tags
-      const standardTagMapInitial = _.keyBy(
-        action?.data?.metaEntities?.standard,
-        item => item?.definition?.value
-      );
-      // Mapping only the `definition` object instead of the entire item, to reduce space used
-      const standardTagMap = _.mapValues(standardTagMapInitial, item => ({
-        definition: item?.definition ?? {},
-      }));
-
-      // Process custom tags
-      const customSubtags = getTagMapValue(action?.data?.metaEntities?.custom)
-      // Process extended tags
-      const extendedSubtags = getTagMapValue(action?.data?.metaEntities?.extended);
-
-      const loyaltySubTagsData = getLoyaltyTagsMapValue(action?.data?.metaEntities?.loyaltyTags);
-
-      const getExistingTagLookupMap = (state) => {
-        if (!state || !state.get) return {};
-        const tagLookupMap = state.getIn(['metaEntities', 'tagLookupMap']);
-        return state.get('metaEntities') && ImmutableMap.isMap(tagLookupMap)
-          ? tagLookupMap.toJS()
-          : {};
-      };
-
-      // Combine all maps
-      const combinedTagMap = {
-        ...standardTagMap,
-        ...customSubtags,
-        ...extendedSubtags,
-        ...loyaltySubTagsData,
-        ...getExistingTagLookupMap(state),
-      };
       const stateMeta = state.get("metaEntities");
       return state
         .set('fetchingSchema', false)
@@ -138,7 +103,6 @@ function capReducer(state = fromJS(initialState.cap), action) {
         .set('metaEntities', {
           layouts: action.data && action.entityType === 'LAYOUT' ? action.data.metaEntities : stateMeta?.layouts,
           tags: action.data && action.entityType === 'TAG' ? action.data.metaEntities : stateMeta?.tags,
-          tagLookupMap: action?.data && action?.entityType === TAG ? combinedTagMap : stateMeta?.tagLookupMap,
         })
         .set('fetchingSchemaError', false);
     }
@@ -146,7 +110,6 @@ function capReducer(state = fromJS(initialState.cap), action) {
       return state.set('metaEntities', {
         layouts: [],
         tags: [],
-        tagLookupMap: {},
       });
     // eslint-disable-next-line no-case-declarations
     case types.HIDE_TAGS:
@@ -154,23 +117,8 @@ function capReducer(state = fromJS(initialState.cap), action) {
       metaEntities.tags.standard = _.filter(state.get('metaEntities').tags.standard, (tag) => action.tagList.indexOf(tag.definition.value) === -1);
       metaEntities.tags.custom = _.filter(state.get('metaEntities').tags.custom, (tag) => action.tagList.indexOf(tag.name) === -1);
       return state.setIn(['metaEntities'], metaEntities);
-    case types.SET_INJECTED_TAGS: 
-
-      // Deep clone the tagLookupMap to avoid direct mutations
-      let updatedMetaEntitiesTagLookUp = _.cloneDeep(state.getIn(['metaEntities', 'tagLookupMap']));
-      const formattedInjectedTags = getForwardedMapValues(action?.injectedTags);
-      // Merge the injectedTags with the existing tagLookupMap
-      updatedMetaEntitiesTagLookUp = {
-        ...formattedInjectedTags || {},
-        ...updatedMetaEntitiesTagLookUp || {},
-      };
-      return state.set("injectedTags", action.injectedTags).setIn(
-        ["metaEntities"],
-        fromJS({
-          ...state.get("metaEntities"),
-          tagLookupMap: updatedMetaEntitiesTagLookUp
-        })
-      );
+    case types.SET_INJECTED_TAGS:
+      return state.set("injectedTags", action.injectedTags);
     case types.GET_TOPBAR_MENU_DATA_REQUEST:
       return state.set('topbarMenuData', fromJS({ status: 'request' }));
     case types.GET_TOPBAR_MENU_DATA_SUCCESS:

package/v2Containers/Cap/tests/reducer.test.js

@@ -21,7 +21,6 @@ import {
   expectedStateGetSchemaForEntitySuccessTAG,
   expectedStateGetSchemaForEntitySuccess,
 } from '../mockData';
-import { TAG } from '../../Whatsapp/constants';
 import { loadItem } from '../../../services/localStorageApi';
 
 
@@ -118,104 +117,3 @@ describe('should handle GET_SUPPORT_VIDEOS_CONFIG', () => {
     expect(reducer(mockedInitialState, action).toJS())?.fetchingSchema?.toEqual(true);
   });
 });
-
-describe('GET_SCHEMA_FOR_ENTITY_SUCCESS handler', () => {
-  it.concurrent('should handle existing tagLookupMap correctly when metaEntities and tagLookupMap exist', () => {
-    const initialStateTest = fromJS({
-      token: loadItem('token') || '',
-      orgID: loadItem('orgID') || '',
-      messages: [],
-      metaEntities: {
-        tags: [{ id: 1, name: 'tag1' }],
-        layouts: ['layout1', 'layout2'],
-        tagLookupMap: {
-          existingTag: { definition: { value: 'existing' } },
-          anotherTag: { definition: { value: 'another' } },
-        },
-        standard: [],
-      },
-      liquidTags: [],
-      fetchingLiquidTags: false,
-      fetchingSchema: false,
-      fetchingSchemaError: '',
-    });
-
-    let action = {
-      type: GET_SCHEMA_FOR_ENTITY_SUCCESS,
-      entityType: TAG,
-      data: {
-        metaEntities: {
-          standard: [],
-          custom: [],
-          extended: [],
-        },
-      },
-    };
-
-    let newState = reducer(initialStateTest, action);
-    let metaEntities = newState.get('metaEntities');
-
-    expect(metaEntities).toEqual(expect.objectContaining({
-      tagLookupMap: expect.objectContaining({
-        existingTag: expect.objectContaining({
-          definition: expect.objectContaining({
-            value: 'existing',
-          }),
-        }),
-      }),
-    }));
-
-    action = {
-      type: GET_SCHEMA_FOR_ENTITY_SUCCESS,
-      entityType: 'LAYOUT',
-      data: {
-        metaEntities: {
-          layouts: ['layout1', 'layout2'],
-          standard: [],
-        },
-      },
-    };
-    newState = reducer(initialStateTest, action);
-    metaEntities = newState.get('metaEntities');
-    expect(metaEntities).toEqual(expect.objectContaining({
-      layouts: expect.objectContaining({
-        layouts: expect.arrayContaining(['layout1', 'layout2']),
-      }),
-    }));
-  });
-
-  it.concurrent('should handle non-existent tagLookupMap by returning empty object', () => {
-    const initialStateTest = fromJS({
-      token: loadItem('token') || '',
-      orgID: loadItem('orgID') || '',
-      messages: [],
-      metaEntities: {
-        tagLookupMap: {},
-      },
-      liquidTags: [],
-      fetchingLiquidTags: false,
-      fetchingSchema: false,
-      fetchingSchemaError: '',
-    });
-
-    const action = {
-      type: GET_SCHEMA_FOR_ENTITY_SUCCESS,
-      entityType: TAG,
-      data: {
-        metaEntities: {
-          standard: [],
-          custom: [],
-          extended: [],
-        },
-      },
-    };
-
-    const newState = reducer(initialStateTest, action);
-    const metaEntities = newState.get('metaEntities');
-
-    // Updated assertions to handle plain object
-    expect(metaEntities).toBeDefined();
-    expect(metaEntities.tagLookupMap).toBeDefined();
-    expect(metaEntities.tagLookupMap).toEqual({});
-  });
-});

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -566,6 +566,7 @@ export function SlideBoxContent(props) {
           handleTestAndPreview={handleTestAndPreview}
           handleCloseTestAndPreview={handleCloseTestAndPreview}
           isTestAndPreviewMode={isTestAndPreviewMode}
+          onValidationFail={onValidationFail}
         />
       )}
       {isEditFTP && (
@@ -632,6 +633,7 @@ export function SlideBoxContent(props) {
         getLiquidTags={getLiquidTags}
         getDefaultTags={type}
         isFullMode={isFullMode}
+        onValidationFail={onValidationFail}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
         onPreviewContentClicked={onPreviewContentClicked}
@@ -780,6 +782,7 @@ export function SlideBoxContent(props) {
           <MobliPushEdit
             getFormLibraryData={getFormData}
             setIsLoadingContent={setIsLoadingContent}
+            getLiquidTags={getLiquidTags}
             location={{
               pathname: `/mobilepush/edit/`,
               query,
@@ -852,6 +855,7 @@ export function SlideBoxContent(props) {
             mobilePushCreateMode={mobilePushCreateMode}
             isGetFormData={isGetFormData}
             getFormData={getFormData}
+            getLiquidTags={getLiquidTags}
             templateData={templateData}
             type={type}
             step={templateStep}
@@ -880,7 +884,7 @@ export function SlideBoxContent(props) {
           />
         ) : (
           <MobilePushNew
-            key="creatives-mobilepush-wrapper"
+            key="creatives-mobilepush-create-new"
             date={new Date().getMilliseconds()}
             setIsLoadingContent={setIsLoadingContent}
             onMobilepushModeChange={onMobilepushModeChange}
@@ -1078,8 +1082,38 @@ export function SlideBoxContent(props) {
       )}
 
       {isCreateInApp && (
-        <InAppWrapper
-          key="creatives-inapp-wrapper"
+  (isFullMode && !commonUtil.hasNewEditorFlowInAppEnabled()) ||
+  (!isFullMode && isLoyaltyModule) ||
+  (!isFullMode && !isLoyaltyModule && !commonUtil.hasNewEditorFlowInAppEnabled()) ? (
+    <InApp
+      key="creatives-inapp-create"
+      location={{ pathname: '/inapp/create', query, search: '' }}
+      setIsLoadingContent={setIsLoadingContent}
+      isGetFormData={isGetFormData}
+      getFormData={getFormData}
+      getDefaultTags={type}
+      isFullMode={isFullMode}
+      templateData={templateData}
+      cap={cap}
+      showTemplateName={showTemplateName}
+      showLiquidErrorInFooter={showLiquidErrorInFooter}
+      onValidationFail={onValidationFail}
+      forwardedTags={forwardedTags}
+      selectedOfferDetails={selectedOfferDetails}
+      onPreviewContentClicked={onPreviewContentClicked}
+      onTestContentClicked={onTestContentClicked}
+      eventContextTags={eventContextTags}
+      onCreateComplete={onCreateComplete}
+      handleClose={handleClose}
+      moduleType={moduleType}
+      showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
+      handleTestAndPreview={handleTestAndPreview}
+      handleCloseTestAndPreview={handleCloseTestAndPreview}
+      isTestAndPreviewMode={isTestAndPreviewMode}
+    />
+  ) : (
+    <InAppWrapper
+      key="creatives-inapp-wrapper"
           date={new Date().getMilliseconds()}
           setIsLoadingContent={setIsLoadingContent}
           onInAppEditorTypeChange={onInAppEditorTypeChange}
@@ -1114,10 +1148,12 @@ export function SlideBoxContent(props) {
         handleCloseTestAndPreview={handleCloseTestAndPreview}
         isTestAndPreviewMode={isTestAndPreviewMode}
       />
+      )
       )}
-
+  
       {isEditInApp && (<InApp
         isFullMode={isFullMode}
+        isLoyaltyModule={isLoyaltyModule}
         templateData={templateData}
         getFormData={getFormData}
         getDefaultTags={type}

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 } from './constants';
+import { PREVIEW, EMAIL, SMS, EDIT_TEMPLATE, MOBILE_PUSH } 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 === "editTemplate"
+  return slidBoxContent === EDIT_TEMPLATE
     ? <FormattedMessage {...messages.creativesTemplatesUpdate} />
     : <FormattedMessage {...messages.creativesTemplatesSaveFullMode} />;
 }
@@ -52,8 +52,13 @@ 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 isEditMode = slidBoxContent === 'editTemplate';
+  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;
 
   // 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
@@ -129,8 +134,11 @@ 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 || isSupportCKEditor;
+  const shouldShowErrorInfoNote = hasBEEEditorErrors || hasSmsValidationErrors || hasMobilePushValidationErrors || isSupportCKEditor;
 
   // Check for personalization tokens in title/message when anonymous user tries to save
   const hasPersonalizationTokens = () => {

package/v2Containers/CreativesContainer/constants.js

@@ -52,6 +52,12 @@ export const GENERIC = "GENERIC";
 export const LIQUID_ERROR_MSG = "LIQUID_ERROR_MSG";
 export const STANDARD_ERROR_MSG = "STANDARD_ERROR_MSG";
 export const COMMON_CHANNELS = ['sms', 'email', 'wechat', 'mobilepush', 'webpush', 'line', 'viber', 'facebook', 'call_task', 'ftp', 'assets'];
+
+/** Normalized channel forms (e.g. from camelCase) that do not match pane keys; maps to canonical pane key for hide/disable. */
+export const NORMALIZED_CHANNEL_ALIASES = {
+  we_chat: WECHAT.toLowerCase(),
+  m_push: MOBILE_PUSH.toLowerCase(),
+};
 export const MIXED = "MIXED";
 export const VISITOR = "VISITOR";
 export const ALLOWED_CHANNELS_FOR_ANONYMOUS = ['mobilepush', 'webpush'];

package/v2Containers/CreativesContainer/index.js

@@ -69,6 +69,23 @@ import {
 import { MANUAL_CAROUSEL } from '../MobilePushNew/constants';
 import { BIG_HTML } from '../InApp/constants';
 
+/**
+ * Returns true if value is "deep empty": no errors present.
+ * - null/undefined: empty
+ * - string: empty if length === 0
+ * - array: empty if length === 0
+ * - plain object (e.g. { android: [], ios: [], generic: [] }): empty only if every value is deep-empty
+ */
+function isDeepEmpty(value) {
+  if (value == null) return true;
+  if (typeof value === 'string') return value.length === 0;
+  if (Array.isArray(value)) return value.length === 0;
+  if (typeof value === 'object') {
+    return Object.values(value).every(isDeepEmpty);
+  }
+  return false;
+}
+
 const classPrefix = 'add-creatives-section';
 const CREATIVES_CONTAINER = 'creativesContainer';
 
@@ -132,7 +149,6 @@ 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.
@@ -256,12 +272,23 @@ export class Creatives extends React.Component {
   };
 
   onShowTemplates = () => {
-    this.setState({ slidBoxContent: 'templates', showSlideBox: true, isGetFormData: false });
+    this.setState({
+      slidBoxContent: 'templates',
+      showSlideBox: true,
+      isGetFormData: false,
+      liquidErrorMessage: { STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] },
+      isLiquidValidationError: false,
+    });
     this.resetStep();
   };
 
   onChannelChange = (channel) => {
-    this.setState({ currentChannel: channel, templateData: null });
+    this.setState({
+      currentChannel: channel,
+      templateData: null,
+      liquidErrorMessage: { STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] },
+      isLiquidValidationError: false,
+    });
   }
 
   onCreateNextStep = () => {
@@ -1469,11 +1496,12 @@ 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;
@@ -1557,6 +1585,8 @@ export class Creatives extends React.Component {
       ...prevState,
       templateData: undefined,
       showSlideBox: false,
+      liquidErrorMessage: { STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] },
+      isLiquidValidationError: false,
     }), () => this.props.handleCloseCreatives(reloadTemplates));
   };
 
@@ -1764,8 +1794,18 @@ export class Creatives extends React.Component {
   }
 
   showLiquidErrorInFooter = (errorMessagesFromFormBuilder, currentFormBuilderTab) => {
+    const liquidMsgs = get(errorMessagesFromFormBuilder, constants.LIQUID_ERROR_MSG, []);
+    const standardMsgs = get(errorMessagesFromFormBuilder, constants.STANDARD_ERROR_MSG, []);
+    const hasLiquid = !isDeepEmpty(liquidMsgs);
+    const hasStandard = !isDeepEmpty(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: !isEmpty(get(errorMessagesFromFormBuilder, constants.LIQUID_ERROR_MSG, [])) || !isEmpty(get(errorMessagesFromFormBuilder, constants.STANDARD_ERROR_MSG, [])),
+      isLiquidValidationError,
       liquidErrorMessage: errorMessagesFromFormBuilder,
       activeFormBuilderTab: currentFormBuilderTab === 1 ? constants.ANDROID : (currentFormBuilderTab === 2 ? constants.IOS : null), // Update activeFormBuilderTab, default to 1 if undefined
     });