@capillarytech/creatives-library 9.0.28 → 9.0.29-alpha.1

package/v2Containers/CreativesContainer/index.js

@@ -44,10 +44,6 @@ class TemplateNameInputField extends React.Component {
   }
 }
 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';
@@ -56,13 +52,15 @@ import CapInput from '@capillarytech/cap-ui-library/CapInput';
 import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import classnames from 'classnames';
-import {
-  isEmpty, get, forEach, cloneDeep, debounce,
-} from 'lodash';
+import isEmpty from 'lodash/isEmpty';
+import get from 'lodash/get';
+import forEach from 'lodash/forEach';
+import cloneDeep from 'lodash/cloneDeep';
+import debounce from 'lodash/debounce';
+import pick from 'lodash/pick';
 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';
 
@@ -76,6 +74,7 @@ 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';
@@ -90,7 +89,10 @@ import {
 } from '../Line/Container/constants';
 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 { RCS_STATUSES, contentType as RCS_CONTENT_TYPE, EMBEDDED } 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 {
@@ -131,6 +133,11 @@ 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,
@@ -139,51 +146,24 @@ 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 initialSlidBoxContent = this.getSlideBoxContent({ mode: props.creativesMode, templateData: props.templateData, isFullMode: props.isFullMode });
+    const useLocalTemplates = get(
+      props,
+      'localTemplatesConfig.useLocalTemplates',
+      get(props, 'useLocalTemplates', false),
+    );
+    const initialSlidBoxContent = this.getSlideBoxContent({
+      mode: props.creativesMode,
+      templateData: props.templateData,
+      isFullMode: props.isFullMode,
+      useLocalTemplates,
+    });
 
     this.state = {
       isLoadingContent: true,
@@ -230,7 +210,13 @@ export class Creatives extends React.Component {
   }
 
   componentWillUnmount() {
-    if (get(this.props, 'location.query.type', '') === "embedded") {
+    const isEmbedded = get(this.props, 'location.query.type', '') === EMBEDDED;
+    const useLocalTemplates = get(
+      this.props,
+      'localTemplatesConfig.useLocalTemplates',
+      get(this.props, 'useLocalTemplates', false),
+    );
+    if (isEmbedded && !useLocalTemplates) {
       this.props.templateActions.resetTemplateStoreData();
     }
     this.props.globalActions.clearMetaEntities();
@@ -840,15 +826,69 @@ export class Creatives extends React.Component {
             smsFallBackContent = {},
             creativeName = "",
             channel = constants.RCS,
+            rcsCardVarMapped,
             accountId = "",
           } = templateData || {};
-          const cardContent = (rcsContent.cardContent && rcsContent.cardContent[0]) || {};
+          const { isFullMode: isFullModeForRcsPayload } = this.props;
+          const isCarouselRcs = (rcsContent?.cardType || '').toString().toUpperCase() === RCS_CONTENT_TYPE.carousel;
+          const firstCardIn = (rcsContent.cardContent && rcsContent.cardContent[0]) || {};
+          const {
+            cardDisplayTitle: _omitDispTitleIn,
+            cardDisplayDescription: _omitDispDescIn,
+            ...cardContent
+          } = firstCardIn;
           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: {
@@ -856,12 +896,7 @@ export class Creatives extends React.Component {
                     rcsContent: {
                       ...rcsContent,
                       ...(accountId && !isFullMode && { accountId }),
-                      cardContent: [
-                        {
-                          ...cardContent,
-                          Status,
-                        },
-                      ],
+                      cardContent: builtCardContent,
                     },
                     smsFallBackContent,
                   },
@@ -1009,7 +1044,10 @@ export class Creatives extends React.Component {
     return newExpandableDetails;
   }
 
-  getCreativesData = async (channel, template, templateRecords) => { //from creatives to consumers
+  getCreativesData = async (channelParam, template, templateRecords) => { //from creatives to consumers
+    const channel = String(
+      channelParam || template?.type || get(template, 'value.type') || '',
+    ).toUpperCase();
     let templateData = { channel };
     switch (channel) {
       case constants.SMS:
@@ -1356,28 +1394,104 @@ export class Creatives extends React.Component {
         break;
       case constants.RCS:
         if (template.value) {
-          const { name = "", versions = {} } = {
-          } = template.value || {};
-          const smsFallBackContent = get(versions, 'base.content.RCS.smsFallBackContent', {});
+          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 {
-            cardContent = [],
+            cardContent: cardContentFromSubmit = [],
             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:
@@ -1495,7 +1609,10 @@ export class Creatives extends React.Component {
     return templateData;
   };
 
-  getSlideBoxContent({ mode, templateData, isFullMode }) {
+  getSlideBoxContent({ mode, templateData, isFullMode, useLocalTemplates }) {
+    if (useLocalTemplates && mode === 'create' && isEmpty(templateData)) {
+      return 'templates';
+    }
     let creativesMode = isFullMode ? 'createTemplate' : 'templates';// for library mode templates page is initial mode and for full mode createTemplates
     if (mode === 'create' && isFullMode) {
       creativesMode = 'createTemplate';
@@ -1583,24 +1700,110 @@ 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(
-        {},
-        () => {
-          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);
+    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 || constants.DEFAULT_SMS_TEMPLATE_NAME,
+              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,
           });
-        },
-      );
-    }
+        });
+      },
+    );
   }
 
-  processCentralCommsMetaId = (channel, creativesData) => {
+  processCentralCommsMetaId = (channel, creativesData, options = {}) => {
+    const { closeSlideBoxAfterSubmit = false } = options;
+    const maybeCloseLibrarySlideBox = () => {
+      if (
+        closeSlideBoxAfterSubmit
+        && this.props.isFullMode === false
+        && typeof this.handleCloseSlideBox === 'function'
+      ) {
+        this.handleCloseSlideBox();
+      }
+    };
     // Create the payload for the centralcommnsmetaId API call
     const { isLoyaltyModule = false, loyaltyMetaData = {} } = this.props;
     const { actionName, setMetaData = () => { } } = loyaltyMetaData;
@@ -1626,6 +1829,7 @@ 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} /> });
         }
@@ -1636,6 +1840,7 @@ export class Creatives extends React.Component {
     } else {
       // If not a loyalty module or different action, should work as usual
       this.props.getCreativesData(creativesData);
+      maybeCloseLibrarySlideBox();
     }
   };
 
@@ -1668,7 +1873,9 @@ export class Creatives extends React.Component {
     }
     this.setState((prevState) => ({
       ...prevState,
-      templateData: undefined,
+      // 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 } : {}),
       showSlideBox: false,
       liquidErrorMessage: { STANDARD_ERROR_MSG: [], LIQUID_ERROR_MSG: [] },
       isLiquidValidationError: false,
@@ -1871,21 +2078,17 @@ 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,
-      liquidErrorMessage: errorMessagesFromFormBuilder,
-      activeFormBuilderTab: currentFormBuilderTab === 1 ? constants.ANDROID : (currentFormBuilderTab === 2 ? constants.IOS : null), // Update activeFormBuilderTab, default to 1 if undefined
-    });
+    const next = computeLiquidFooterUpdateFromFormBuilder(
+      errorMessagesFromFormBuilder,
+      this.state.liquidErrorMessage,
+      currentFormBuilderTab,
+      {
+      previousIsLiquidValidationError: this.state.isLiquidValidationError,
+      currentChannelUpper: this.state.currentChannel?.toUpperCase(),
+      },
+    );
+    if (next == null) return;
+    this.setState(next);
   }
 
   // Callback to update HTML Editor validation state (called from EmailWrapper)
@@ -2008,6 +2211,11 @@ 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,
@@ -2026,7 +2234,6 @@ export class Creatives extends React.Component {
       smsRegister,
       enableNewChannels,
       eventContextTags,
-      waitEventContextTags = {},
       isLoyaltyModule,
       loyaltyMetaData = {},
     } = this.props;
@@ -2060,14 +2267,7 @@ 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;
 
-    // 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;
+    const slideBoxWrapperMargin = getSlideBoxWrapperMarginFromLiquidErrors(liquidErrorMessage);
     /* 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
@@ -2096,7 +2296,10 @@ 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' : ''}`)}
+        className={classnames(
+          `${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'} ${mapTemplateCreate ? 'map-template-create' : ''}`,
+          useLocalTemplates && slidBoxContent === 'templates' && 'creatives-slidebox--local-sms-templates',
+        )}
       >
         <CapSlideBox
           header={
@@ -2121,12 +2324,13 @@ 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.onSelectTemplate}
+              onSelectTemplate={this.props.onSelectTemplate != null ? this.props.onSelectTemplate : this.onSelectTemplate}
               onCreateComplete={getCreativesData}
               onPreviewTemplate={this.onPreviewTemplate}
               slidBoxContent={slidBoxContent}
@@ -2194,7 +2398,6 @@ 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}
@@ -2203,7 +2406,8 @@ 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
@@ -2288,13 +2492,31 @@ 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(),