@capillarytech/creatives-library 8.0.318 → 8.0.320

package/v2Containers/CreativesContainer/index.js

@@ -1,9 +1,5 @@
 import React from 'react';
 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';
@@ -13,12 +9,11 @@ import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import classnames from 'classnames';
 import {
-  isEmpty, get, forEach, cloneDeep, debounce,
+  isEmpty, get, forEach, cloneDeep, debounce, pick,
 } 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';
 
@@ -47,6 +42,8 @@ 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 { RCS_SMS_FALLBACK_VAR_MAPPED_PROP } from '../../v2Components/CommonTestAndPreview/constants';
 import { CREATIVE } from '../Facebook/constants';
 import { LOYALTY } from '../App/constants';
 import {
@@ -61,6 +58,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,
@@ -69,51 +71,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,
@@ -160,7 +135,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();
@@ -763,14 +744,41 @@ export class Creatives extends React.Component {
             creativeName = "",
             channel = constants.RCS,
             accountId = "",
+            rcsCardVarMapped,
           } = templateData || {};
-          const cardContent = (rcsContent.cardContent && rcsContent.cardContent[0]) || {};
+          const { isFullMode: isFullModeForRcsPayload } = this.props;
+          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 = { ...rootRecord, ...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;
 
           creativesTemplateData = {
             type: channel,
             edit: true,
             name: creativeName,
+            ...(includeRootRcsCardVarMapped ? { rcsCardVarMapped: mergedCardVarMapped } : {}),
             versions: {
               base: {
                 content: {
@@ -781,6 +789,7 @@ export class Creatives extends React.Component {
                       cardContent: [
                         {
                           ...cardContent,
+                          ...(mergedCardVarMapped ? { cardVarMapped: mergedCardVarMapped } : {}),
                           Status,
                         },
                       ],
@@ -931,7 +940,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:
@@ -1225,7 +1237,7 @@ export class Creatives extends React.Component {
           };
         }
         break;
-      case constants.FACEBOOK: {
+      case constants.FACEBOOK:
         if (template.value) {
           const FacebookAd = template?.value?.versions?.base?.content?.FacebookAd;
           const { type } = FacebookAd[0];
@@ -1269,36 +1281,109 @@ export class Creatives extends React.Component {
             selectedMarketingObjective: template.value.selectedMarketingObjective,
           };
         }
-      }
         break;
-      case constants.RCS: {
+      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'
+              ? firstCardFromSubmit.cardVarMapped
+              : null;
+          const includeRootRcsCardVarMappedOnConsumerPayload =
+            cardVarMappedFromFirstRcsCard
+            && Object.keys(cardVarMappedFromFirstRcsCard).length > 0
+            && isFullModeForRcsConsumerPayload === true;
           templateData = {
             channel,
             creativeName: name,
             rcsContent,
             accountId: 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() }
+                : {}),
+            };
+          }
         }
-      }
         break;
-      case constants.ZALO: {
+      case constants.ZALO:
         if (template.value) {
           templateData = {
             ...template.value,
@@ -1307,7 +1392,6 @@ export class Creatives extends React.Component {
             delete templateData.type;
           }
         }
-      }
         break;
       case constants.WEBPUSH: {
         if (template.value) {
@@ -1414,7 +1498,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';
@@ -1502,24 +1589,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 || '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,
           });
-        },
-      );
-    }
+        });
+      },
+    );
   }
 
-  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;
@@ -1545,6 +1718,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} /> });
         }
@@ -1555,6 +1729,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();
     }
   };
 
@@ -1587,7 +1762,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,
@@ -1798,21 +1975,12 @@ 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, 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)
@@ -1935,6 +2103,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,
@@ -1986,14 +2159,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
@@ -2022,7 +2188,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={
@@ -2047,12 +2216,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}
@@ -2128,7 +2298,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
@@ -2218,6 +2389,25 @@ Creatives.propTypes = {
     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(),

package/v2Containers/CreativesContainer/index.scss

@@ -2,6 +2,43 @@
 
 $classPrefix: add-creatives-section;
 
+/* Local SMS template picker: fill slidebox height; global .v2-pagination-container uses 100vh-20rem and leaves a dead zone inside slideboxes */
+.#{$classPrefix}.creatives-slidebox--local-sms-templates {
+  .cap-slide-box-v2-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    max-height: 100vh;
+  }
+
+  .slidebox-content-container {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .slidebox-content-container > div {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  /* TemplatesV2 root: fill slidebox so the template grid can flex instead of using 100vh-based pagination height */
+  .slidebox-content-container .creatives-templates-container--local-sms.library-mode {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: auto;
+    max-height: 100%;
+  }
+}
+
 .#{$classPrefix} {
     &.creatives-library-mode{
         .sms-create-container,  .sms-email-container{
@@ -80,5 +117,18 @@ $classPrefix: add-creatives-section;
 }
 
 .template-footer-width {
-    width: 100%;;
+    width: 100%;
+}
+
+.slidebox-footer-actions {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 0.75rem;
+    min-width: 0;
+
+    .ant-btn,
+    button {
+        flex-shrink: 0;
+    }
 }