@capillarytech/creatives-library 8.0.353-alpha.6 → 8.0.353

package/v2Containers/CreativesContainer/index.js

@@ -1,5 +1,53 @@
 import React from 'react';
+
+// Isolated input for the email template name field.
+// Manages its own value in local state so keystrokes only re-render this
+// small component, not the entire CreativesContainer → Email → FormBuilder tree.
+class TemplateNameInputField extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { localValue: props.initialValue || '' };
+  }
+
+  componentDidUpdate(prevProps) {
+    // Sync from props only when the external value changed AND the user hasn't
+    // diverged from the previous prop value. This handles async data-load in edit
+    // mode without overwriting what the user is actively typing.
+    if (
+      prevProps.initialValue !== this.props.initialValue &&
+      this.state.localValue === (prevProps.initialValue || '')
+    ) {
+      this.setState({ localValue: this.props.initialValue || '' });
+    }
+  }
+
+  handleChange = (ev) => {
+    const { value } = ev.currentTarget;
+    this.setState({ localValue: value });
+    if (this.props.onChange) this.props.onChange(value);
+  };
+
+  handleBlur = () => {
+    if (this.props.onBlur) this.props.onBlur(this.state.localValue);
+  };
+
+  render() {
+    const { onChange: _onChange, initialValue: _initialValue, onBlur: _ob, ...rest } = this.props;
+    return (
+      <CapInput
+        {...rest}
+        value={this.state.localValue}
+        onChange={this.handleChange}
+        onBlur={this.handleBlur}
+      />
+    );
+  }
+}
 import PropTypes from 'prop-types';
+import {
+  CAP_SPACE_16, CAP_SPACE_32, CAP_SPACE_56, CAP_SPACE_64,
+} from '@capillarytech/cap-ui-library/styled/variables';
+
 import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
@@ -9,11 +57,12 @@ import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import classnames from 'classnames';
 import {
-  isEmpty, get, forEach, cloneDeep, debounce, pick,
+  isEmpty, get, forEach, cloneDeep, debounce,
 } from 'lodash';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators, compose } from 'redux';
+import styled from 'styled-components';
 import { GA } from '@capillarytech/cap-ui-utils';
 import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
 
@@ -27,7 +76,6 @@ import SlideBoxContent from './SlideBoxContent';
 import * as constants from './constants';
 import * as commonUtil from '../../utils/common';
 import { gtmPush } from '../../utils/gtmTrackers';
-import { normalizeRcsMessageContentForApi } from '../../utils/rcsPayloadUtils';
 import './index.scss';
 import * as templateActions from '../Templates/actions';
 import * as globalActions from '../Cap/actions';
@@ -43,9 +91,6 @@ import {
 import {EXTERNAL_URL, SITE_URL, WEBPUSH_MEDIA_TYPES} from '../WebPush/constants';
 import { IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
 import { RCS_STATUSES } from '../Rcs/constants';
-import { mapRcsCardContentForConsumerWithResolvedTags } from '../Rcs/utils';
-import { pickRcsCardVarMappedEntries } from '../Rcs/rcsLibraryHydrationUtils';
-import { RCS_SMS_FALLBACK_VAR_MAPPED_PROP } from '../../v2Components/CommonTestAndPreview/constants';
 import { CREATIVE } from '../Facebook/constants';
 import { LOYALTY } from '../App/constants';
 import {
@@ -60,11 +105,6 @@ import { capSagaForFetchSchemaForEntity, capSagaLiquidEntity } from '../Cap/saga
 import { v2TemplateSagaWatchGetDefaultBeeTemplates } from '../Templates/sagas';
 import { DYNAMIC_URL } from '../../v2Components/CapWhatsappCTA/constants';
 import ErrorInfoNote from '../../v2Components/ErrorInfoNote';
-import SlideBoxWrapper from './CreativesSlideBoxWrapper';
-import {
-  computeLiquidFooterUpdateFromFormBuilder,
-  getSlideBoxWrapperMarginFromLiquidErrors,
-} from './embeddedSlideboxUtils';
 
 import {
   transformChannelPayload,
@@ -73,24 +113,51 @@ 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';
 
+const SlideBoxWrapper = styled.div`
+  .cap-slide-box-v2-container{
+    .slidebox-header, .slidebox-content-container{
+      margin-bottom: ${({ slideBoxWrapperMargin }) => `${slideBoxWrapperMargin}`};
+      padding: 0 rem;
+      &.has-footer{
+        overflow-x: hidden;
+      }
+    }
+    .slidebox-footer{
+      /* Only apply margin-bottom to footer when ErrorInfoNote is shown in footer (BEE editor) */
+      /* For HTML Editor, errors are shown in ValidationErrorDisplay (inside content area), so no footer margin needed */
+      margin-bottom: ${({ shouldApplyFooterMargin }) => (shouldApplyFooterMargin ? `${CAP_SPACE_16}` : '0')};
+      padding: 0 rem;
+      &.has-footer{
+        overflow-x: hidden;
+      }
+    }
+  }
+`;
 export class Creatives extends React.Component {
   constructor(props) {
     super(props);
 
-    const useLocalTemplates = get(
-      props,
-      'localTemplatesConfig.useLocalTemplates',
-      get(props, 'useLocalTemplates', false),
-    );
-    const initialSlidBoxContent = this.getSlideBoxContent({
-      mode: props.creativesMode,
-      templateData: props.templateData,
-      isFullMode: props.isFullMode,
-      useLocalTemplates,
-    });
+    const initialSlidBoxContent = this.getSlideBoxContent({ mode: props.creativesMode, templateData: props.templateData, isFullMode: props.isFullMode });
 
     this.state = {
       isLoadingContent: true,
@@ -137,13 +204,7 @@ export class Creatives extends React.Component {
   }
 
   componentWillUnmount() {
-    const isEmbedded = get(this.props, 'location.query.type', '') === "embedded";
-    const useLocalTemplates = get(
-      this.props,
-      'localTemplatesConfig.useLocalTemplates',
-      get(this.props, 'useLocalTemplates', false),
-    );
-    if (isEmbedded && !useLocalTemplates) {
+    if (get(this.props, 'location.query.type', '') === "embedded") {
       this.props.templateActions.resetTemplateStoreData();
     }
     this.props.globalActions.clearMetaEntities();
@@ -751,69 +812,15 @@ export class Creatives extends React.Component {
             smsFallBackContent = {},
             creativeName = "",
             channel = constants.RCS,
-            rcsCardVarMapped,
             accountId = "",
           } = templateData || {};
-          const { isFullMode: isFullModeForRcsPayload } = this.props;
-          const isCarouselRcs = (rcsContent?.cardType || '').toString().toLowerCase() === 'carousel';
-          const firstCardIn = (rcsContent.cardContent && rcsContent.cardContent[0]) || {};
-          const {
-            cardDisplayTitle: _omitDispTitleIn,
-            cardDisplayDescription: _omitDispDescIn,
-            ...cardContent
-          } = firstCardIn;
+          const cardContent = (rcsContent.cardContent && rcsContent.cardContent[0]) || {};
           const Status = RCS_STATUSES.approved || '';
-          const mergedCardVarMapped = (() => {
-            const nestedCardVarMapped = cardContent?.cardVarMapped;
-            const rootMirrorCardVarMapped = rcsCardVarMapped;
-            const nestedRecord =
-              nestedCardVarMapped != null && typeof nestedCardVarMapped === 'object'
-                ? nestedCardVarMapped
-                : {};
-            const rootRecord =
-              rootMirrorCardVarMapped != null && typeof rootMirrorCardVarMapped === 'object'
-                ? rootMirrorCardVarMapped
-                : {};
-            const mergedFromRootAndNested = {
-              ...pickRcsCardVarMappedEntries(rootRecord),
-              ...pickRcsCardVarMappedEntries(nestedRecord),
-            };
-            return Object.keys(mergedFromRootAndNested).length > 0
-              ? mergedFromRootAndNested
-              : null;
-          })();
-          // Campaigns (embedded): do not duplicate `cardVarMapped` as root `rcsCardVarMapped` on send —
-          // slot map stays on `versions…cardContent[0].cardVarMapped` only. Library full mode keeps root mirror.
-          // Use `=== true` so omitted/undefined `isFullMode` does not behave like library (avoids duplicate on approval payload).
-          const includeRootRcsCardVarMapped =
-            mergedCardVarMapped && isFullModeForRcsPayload === true;
-
-          const builtCardContent = isCarouselRcs
-            ? (rcsContent.cardContent || []).map((card, idx) => {
-                const {
-                  cardDisplayTitle: _dt,
-                  cardDisplayDescription: _dd,
-                  ...restCard
-                } = card || {};
-                return {
-                  ...restCard,
-                  ...(idx === 0 && mergedCardVarMapped ? { cardVarMapped: mergedCardVarMapped } : {}),
-                  Status,
-                };
-              })
-            : [
-                {
-                  ...cardContent,
-                  ...(mergedCardVarMapped ? { cardVarMapped: mergedCardVarMapped } : {}),
-                  Status,
-                },
-              ];
 
           creativesTemplateData = {
             type: channel,
             edit: true,
             name: creativeName,
-            ...(includeRootRcsCardVarMapped ? { rcsCardVarMapped: mergedCardVarMapped } : {}),
             versions: {
               base: {
                 content: {
@@ -821,7 +828,12 @@ export class Creatives extends React.Component {
                     rcsContent: {
                       ...rcsContent,
                       ...(accountId && !isFullMode && { accountId }),
-                      cardContent: builtCardContent,
+                      cardContent: [
+                        {
+                          ...cardContent,
+                          Status,
+                        },
+                      ],
                     },
                     smsFallBackContent,
                   },
@@ -969,10 +981,7 @@ export class Creatives extends React.Component {
     return newExpandableDetails;
   }
 
-  getCreativesData = async (channelParam, template, templateRecords) => { //from creatives to consumers
-    const channel = String(
-      channelParam || template?.type || get(template, 'value.type') || '',
-    ).toUpperCase();
+  getCreativesData = async (channel, template, templateRecords) => { //from creatives to consumers
     let templateData = { channel };
     switch (channel) {
       case constants.SMS:
@@ -1319,104 +1328,28 @@ export class Creatives extends React.Component {
         break;
       case constants.RCS:
         if (template.value) {
-          const { isFullMode: isFullModeForRcsConsumerPayload } = this.props;
-          const { name = "", versions = {} } = template.value || {};
-          const fromSubmit = get(versions, 'base.content.RCS.smsFallBackContent', {});
-          const fromRecords = {
-            ...(templateRecords?.smsFallBackContent || {}),
-            ...(get(templateRecords, 'versions.base.content.RCS.smsFallBackContent') || {}),
-          };
-          const hasMeaningfulRcsSmsFallback = (smsFallbackPayload) => {
-            if (
-              !smsFallbackPayload
-              || typeof smsFallbackPayload !== 'object'
-              || Object.keys(smsFallbackPayload).length === 0
-            ) {
-              return false;
-            }
-            const fallbackBodyText = String(
-              smsFallbackPayload.smsContent
-              ?? smsFallbackPayload.smsTemplateContent
-              ?? smsFallbackPayload.message
-              ?? smsFallbackPayload.content
-              ?? '',
-            ).trim();
-            const fallbackTemplateName = String(
-              smsFallbackPayload.smsTemplateName ?? smsFallbackPayload.templateName ?? '',
-            ).trim();
-            const rcsSmsFallbackVarMapped =
-              smsFallbackPayload?.[RCS_SMS_FALLBACK_VAR_MAPPED_PROP];
-            const hasVarMappedEntries =
-              rcsSmsFallbackVarMapped != null
-              && typeof rcsSmsFallbackVarMapped === 'object'
-              && Object.keys(rcsSmsFallbackVarMapped).length > 0;
-            return (
-              fallbackBodyText !== ''
-              || fallbackTemplateName !== ''
-              || hasVarMappedEntries
-            );
-          };
-          // If submit has only empty strings, do not let it wipe fallback mirrored on templateRecords (library round-trip).
-          const smsFallBackContent = hasMeaningfulRcsSmsFallback(fromSubmit)
-            ? { ...fromRecords, ...fromSubmit }
-            : { ...fromSubmit, ...fromRecords };
+          const { name = "", versions = {} } = {
+          } = template.value || {};
+          const smsFallBackContent = get(versions, 'base.content.RCS.smsFallBackContent', {});
           const {
-            cardContent: cardContentFromSubmit = [],
+            cardContent = [],
             contentType = "",
             cardType = "",
             cardSettings = {},
             accountId = "",
           } = get(versions, 'base.content.RCS.rcsContent', {});
-          const rootRcsCardVarMappedFromSubmit = get(template, 'value.rcsCardVarMapped');
-          const firstCardFromSubmit = Array.isArray(cardContentFromSubmit)
-            ? cardContentFromSubmit[0]
-            : null;
-          const cardContent = mapRcsCardContentForConsumerWithResolvedTags(
-            cardContentFromSubmit,
-            rootRcsCardVarMappedFromSubmit,
-            isFullModeForRcsConsumerPayload,
-          );
           const rcsContent = {
             contentType,
             cardType,
             cardSettings,
             cardContent,
           };
-          const cardVarMappedFromFirstRcsCard =
-            firstCardFromSubmit?.cardVarMapped != null
-            && typeof firstCardFromSubmit.cardVarMapped === 'object'
-              ? pickRcsCardVarMappedEntries(firstCardFromSubmit.cardVarMapped)
-              : null;
-          const includeRootRcsCardVarMappedOnConsumerPayload =
-            cardVarMappedFromFirstRcsCard
-            && Object.keys(cardVarMappedFromFirstRcsCard).length > 0
-            && isFullModeForRcsConsumerPayload === true;
           templateData = {
             channel,
             creativeName: name,
             rcsContent,
             accountId,
-            ...(includeRootRcsCardVarMappedOnConsumerPayload
-              ? { rcsCardVarMapped: cardVarMappedFromFirstRcsCard }
-              : {}),
           };
-          // Library / campaign consumers round-trip templateData via getTemplateData; include SMS fallback
-          // so reopening the editor restores fallback text and tag mappings.
-          // cap-campaigns-v2 API expects `smsFallBackContent.message` (see normalizeRcsMessageContentForApi).
-          if (hasMeaningfulRcsSmsFallback(smsFallBackContent)) {
-            const smsText =
-              smsFallBackContent.message
-              ?? smsFallBackContent.smsContent
-              ?? smsFallBackContent.smsTemplateContent
-              ?? '';
-            templateData.smsFallBackContent = {
-              ...smsFallBackContent,
-              ...(String(smsText).trim() !== ''
-                ? { message: String(smsText).trim() }
-                : {}),
-            };
-          }
-          normalizeRcsMessageContentForApi(templateData);
         }
         break;
       case constants.ZALO:
@@ -1534,10 +1467,7 @@ export class Creatives extends React.Component {
     return templateData;
   };
 
-  getSlideBoxContent({ mode, templateData, isFullMode, useLocalTemplates }) {
-    if (useLocalTemplates && mode === 'create' && isEmpty(templateData)) {
-      return 'templates';
-    }
+  getSlideBoxContent({ mode, templateData, isFullMode }) {
     let creativesMode = isFullMode ? 'createTemplate' : 'templates';// for library mode templates page is initial mode and for full mode createTemplates
     if (mode === 'create' && isFullMode) {
       creativesMode = 'createTemplate';
@@ -1625,110 +1555,24 @@ 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(
-      (prevState) => {
-        const next = { isGetFormData: false };
-        if (!template.validity) {
-          return next;
-        }
-        const baseTd = prevState.templateData || template;
-        const channel = (
-          baseTd?.type
-          || template?.type
-          || get(template, 'value.type')
-          || ''
-        ).toUpperCase();
-        // Library mode: persist last submitted creatives shape so reopening still hydrates the editor
-        // (parent may not merge getCreativesData back into templateData).
-        if (this.props.isFullMode === false && template.value) {
-          if (channel === constants.RCS) {
-            const smsFallBackFromPayload = get(
-              template.value,
-              'versions.base.content.RCS.smsFallBackContent',
-            );
-            const rcsCardVarMappedFromPayload = get(
-              template.value,
-              'versions.base.content.RCS.rcsContent.cardContent[0].cardVarMapped',
-            );
-            next.templateData = {
-              ...baseTd,
-              type: constants.RCS,
-              name: template?.value?.name,
-              versions: template?.value?.versions,
-              ...(smsFallBackFromPayload != null
-                && typeof smsFallBackFromPayload === 'object'
-                && Object.keys(smsFallBackFromPayload).length > 0
-                ? { smsFallBackContent: smsFallBackFromPayload }
-                : {}),
-              ...(rcsCardVarMappedFromPayload != null
-                && typeof rcsCardVarMappedFromPayload === 'object'
-                ? { rcsCardVarMapped: rcsCardVarMappedFromPayload }
-                : {}),
-            };
-            if (template._id) {
-              next.templateData._id = template._id;
-            }
-          } else if (channel === constants.SMS) {
-            const submittedSmsTemplateValue = template?.value;
-            const smsVersions =
-              submittedSmsTemplateValue?.history != null
-                ? submittedSmsTemplateValue
-                : {
-                  base: submittedSmsTemplateValue?.base,
-                  history: submittedSmsTemplateValue?.base
-                    ? [submittedSmsTemplateValue.base]
-                    : [],
-                };
-            next.templateData = {
-              ...baseTd,
-              type: constants.SMS,
-              name: baseTd?.name || 'Campaign message SMS content',
-              versions: smsVersions,
-            };
-            if (template?._id) {
-              next.templateData._id = template._id;
-            }
-          }
-        }
-        return next;
-      },
-      () => {
-        if (!template.validity) {
-          return;
-        }
-        const templateData = this.state.templateData ? this.state.templateData : template; //select existing or create new content
-        const channelForConsumer = String(
-          templateData.type
-          || template.type
-          || get(template, 'value.type')
-          || '',
-        ).toUpperCase();
-        const creativesData = this.getCreativesData(
-          channelForConsumer,
-          template,
-          this.state.templateData || template,
-        );// convers data to consumer understandable format
-        creativesData.then((data) => {
-          this.logGTMEvent(channelForConsumer, data);
-          this.processCentralCommsMetaId(channelForConsumer, data, {
-            closeSlideBoxAfterSubmit: template.closeSlideBoxAfterSubmit,
+    this.setState({ isGetFormData: false });
+    if (template.validity) {
+      this.setState(
+        {},
+        () => {
+          const templateData = this.state.templateData ? this.state.templateData : template; //select existing or create new content
+          const channel = templateData.type;
+          const creativesData = this.getCreativesData(channel, template, templateData);// convers data to consumer understandable format
+          creativesData.then((data) => {
+            this.logGTMEvent(channel, data);
+            this.processCentralCommsMetaId(channel, data);
           });
-        });
-      },
-    );
+        },
+      );
+    }
   }
 
-  processCentralCommsMetaId = (channel, creativesData, options = {}) => {
-    const { closeSlideBoxAfterSubmit = false } = options;
-    const maybeCloseLibrarySlideBox = () => {
-      if (
-        closeSlideBoxAfterSubmit
-        && this.props.isFullMode === false
-        && typeof this.handleCloseSlideBox === 'function'
-      ) {
-        this.handleCloseSlideBox();
-      }
-    };
+  processCentralCommsMetaId = (channel, creativesData) => {
     // Create the payload for the centralcommnsmetaId API call
     const { isLoyaltyModule = false, loyaltyMetaData = {} } = this.props;
     const { actionName, setMetaData = () => { } } = loyaltyMetaData;
@@ -1754,7 +1598,6 @@ export class Creatives extends React.Component {
         if (result?.status?.code === 200) {
           setMetaData(result);
           this.props.getCreativesData(creativesData);
-          maybeCloseLibrarySlideBox();
         } else {
           CapNotification.error({ message: <FormattedMessage {...messages.somethingWentWrong} /> });
         }
@@ -1765,7 +1608,6 @@ export class Creatives extends React.Component {
     } else {
       // If not a loyalty module or different action, should work as usual
       this.props.getCreativesData(creativesData);
-      maybeCloseLibrarySlideBox();
     }
   };
 
@@ -1798,9 +1640,7 @@ export class Creatives extends React.Component {
     }
     this.setState((prevState) => ({
       ...prevState,
-      // Library mode (isFullMode === false): retain last template so reopening still has RCS payload.
-      // Undefined isFullMode defaults to full-mode close behavior (clear templateData).
-      ...(this.props.isFullMode !== false ? { templateData: undefined } : {}),
+      templateData: undefined,
       showSlideBox: false,
       liquidErrorMessage: { STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] },
       isLiquidValidationError: false,
@@ -1957,30 +1797,22 @@ export class Creatives extends React.Component {
       } />
   )
 
-  templateNameComponentInput = ({ formData, onFormDataChange, name }) => {
-    // Use local state for immediate UI feedback, fallback to prop value
-    const displayValue = this.state.localTemplateName !== '' ? this.state.localTemplateName : name;
-
-    return (
-      <CapInput
-        value={displayValue}
-        suffix={<span />}
-        onBlur={() => {
-          this.setState({
-            isEditName: false,
-            localTemplateName: '', // Clear local state on blur
-          }, () => {
-            this.showTemplateName({ formData, onFormDataChange });
-          });
-        }}
-        onChange={(ev) => {
-          const { value } = ev.currentTarget;
-          // Use optimized update for better performance
-          this.updateTemplateNameImmediately(value, formData, onFormDataChange);
-        }}
-      />
-    );
-  }
+  templateNameComponentInput = ({ formData, onFormDataChange, name }) => (
+    <TemplateNameInputField
+      initialValue={name}
+      suffix={<span />}
+      onBlur={(committedValue) => {
+        this.performTemplateNameUpdate(committedValue, formData, onFormDataChange);
+        this.setState({ isEditName: false });
+      }}
+      onChange={(value) => {
+        const isEmptyTemplateName = !value.trim();
+        if (this.state.isTemplateNameEmpty !== isEmptyTemplateName) {
+          this.setState({ isTemplateNameEmpty: isEmptyTemplateName });
+        }
+      }}
+    />
+  )
 
   showTemplateName = ({ formData, onFormDataChange }) => { //gets called from email/index after template data is fetched
     const {
@@ -2011,17 +1843,21 @@ export class Creatives extends React.Component {
   }
 
   showLiquidErrorInFooter = (errorMessagesFromFormBuilder, currentFormBuilderTab) => {
-    const next = computeLiquidFooterUpdateFromFormBuilder(
-      errorMessagesFromFormBuilder,
-      this.state.liquidErrorMessage,
-      currentFormBuilderTab,
-      {
-      previousIsLiquidValidationError: this.state.isLiquidValidationError,
-      currentChannelUpper: this.state.currentChannel?.toUpperCase(),
-      },
-    );
-    if (next == null) return;
-    this.setState(next);
+    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,
+      liquidErrorMessage: errorMessagesFromFormBuilder,
+      activeFormBuilderTab: currentFormBuilderTab === 1 ? constants.ANDROID : (currentFormBuilderTab === 2 ? constants.IOS : null), // Update activeFormBuilderTab, default to 1 if undefined
+    });
   }
 
   // Callback to update HTML Editor validation state (called from EmailWrapper)
@@ -2144,11 +1980,6 @@ export class Creatives extends React.Component {
       inAppEditorType,
       htmlEditorValidationState,
     } = this.state;
-    const useLocalTemplates = get(
-      this.props,
-      'localTemplatesConfig.useLocalTemplates',
-      get(this.props, 'useLocalTemplates', false),
-    );
     const {
       isFullMode,
       creativesMode,
@@ -2167,6 +1998,7 @@ export class Creatives extends React.Component {
       smsRegister,
       enableNewChannels,
       eventContextTags,
+      waitEventContextTags = {},
       isLoyaltyModule,
       loyaltyMetaData = {},
     } = this.props;
@@ -2200,7 +2032,14 @@ export class Creatives extends React.Component {
     // IMPORTANT: Never show ErrorInfoNote in footer when in HTML Editor mode, even if liquidErrorMessage exists
     const shouldShowErrorInfoNoteInFooter = isHTMLEditorMode ? false : hasBEEEditorErrors;
 
-    const slideBoxWrapperMargin = getSlideBoxWrapperMarginFromLiquidErrors(liquidErrorMessage);
+    // Calculate margin for header/content (always apply if there are errors, regardless of editor type)
+    const slideBoxWrapperMargin = (get(liquidErrorMessage, 'STANDARD_ERROR_MSG.length', 0) > 0 && get(liquidErrorMessage, 'LIQUID_ERROR_MSG.length', 0) > 0)
+      ? CAP_SPACE_64
+      : get(liquidErrorMessage, 'LIQUID_ERROR_MSG.length', 0) > 0
+        ? CAP_SPACE_56
+        : get(liquidErrorMessage, 'STANDARD_ERROR_MSG.length', 0) > 0
+          ? CAP_SPACE_32
+          : 0;
     /* TODO: Instead of passing down same props separately to each component down, write common function to these props and pass it accordingly */
 
     // Compute anonymous user type and channel restrictions
@@ -2229,10 +2068,7 @@ export class Creatives extends React.Component {
       <SlideBoxWrapper
         slideBoxWrapperMargin={slideBoxWrapperMargin}
         shouldApplyFooterMargin={shouldShowErrorInfoNoteInFooter}
-        className={classnames(
-          `${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'} ${mapTemplateCreate ? 'map-template-create' : ''}`,
-          useLocalTemplates && slidBoxContent === 'templates' && 'creatives-slidebox--local-sms-templates',
-        )}
+        className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'} ${mapTemplateCreate ? 'map-template-create' : ''}`)}
       >
         <CapSlideBox
           header={
@@ -2257,13 +2093,12 @@ export class Creatives extends React.Component {
                 smsRegister={smsRegister}
                 handleClose={this.handleCloseSlideBox}
                 moduleType={this.props.messageDetails?.type}
-                useLocalTemplates={useLocalTemplates}
               />
             )}
           content={(
             <SlideBoxContent
               key="creatives-container-slidebox-content"
-              onSelectTemplate={this.props.onSelectTemplate != null ? this.props.onSelectTemplate : this.onSelectTemplate}
+              onSelectTemplate={this.onSelectTemplate}
               onCreateComplete={getCreativesData}
               onPreviewTemplate={this.onPreviewTemplate}
               slidBoxContent={slidBoxContent}
@@ -2331,6 +2166,7 @@ export class Creatives extends React.Component {
               creativesMode={creativesMode} // An existing prop that we're using here. Required to ensure correct account details in Edit or Preview in case of Embedded mode.
               hostName={this.props?.hostName || ''}
               eventContextTags={eventContextTags}
+              waitEventContextTags={waitEventContextTags}
               isLoyaltyModule={isLoyaltyModule}
               loyaltyMetaData={loyaltyMetaData}
               showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
@@ -2339,8 +2175,7 @@ export class Creatives extends React.Component {
               isTestAndPreviewMode={(() => this.state.isTestAndPreviewMode)()}
               onHtmlEditorValidationStateChange={this.updateHtmlEditorValidationState}
               onPersonalizationTokensChange={this.handlePersonalizationTokensChange}
-              localTemplatesConfig={pick(this.props.localTemplatesConfig || this.props, constants.LOCAL_TEMPLATE_CONFIG_KEYS)}
-                          />
+            />
           )}
           footer={this.shouldShowFooter() ? (
             <SlideBoxFooter
@@ -2425,31 +2260,13 @@ Creatives.propTypes = {
   orgUnitId: PropTypes.number,
   hostName: PropTypes.string,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   loyaltyTagFetchingDependencies: PropTypes.object,
   customerType: PropTypes.string,
   intl: PropTypes.shape({
     formatMessage: PropTypes.func,
   }),
   stopValidation: PropTypes.func,
-  // Local template list (e.g. for SMS fallback): when set, TemplatesV2 uses these instead of Redux.
-  // All optional. Pass either localTemplatesConfig (object) or individual props below.
-  localTemplatesConfig: PropTypes.shape({
-    useLocalTemplates: PropTypes.bool,
-    localTemplates: PropTypes.arrayOf(PropTypes.object),
-    localTemplatesLoading: PropTypes.bool,
-    localTemplatesFilterContent: PropTypes.node,
-    localTemplatesSentinelContent: PropTypes.node,
-    localTemplatesScrollContainerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-    localTemplatesUseSkeleton: PropTypes.bool,
-  }),
-  useLocalTemplates: PropTypes.bool,
-  localTemplates: PropTypes.arrayOf(PropTypes.object),
-  localTemplatesLoading: PropTypes.bool,
-  localTemplatesFilterContent: PropTypes.node,
-  localTemplatesSentinelContent: PropTypes.node,
-  localTemplatesScrollContainerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  localTemplatesUseSkeleton: PropTypes.bool,
-  onSelectTemplate: PropTypes.func,
 };
 const mapStatesToProps = () => createStructuredSelector({
   isLoading: isLoadingSelector(),