@capillarytech/creatives-library 9.0.35 → 9.0.36

package/v2Containers/Rcs/utils.js

@@ -6,7 +6,6 @@ import {
   RCS_NUMERIC_VAR_NAME_REGEX,
   REGEX_SPECIAL_CHARS_ESCAPE_PATTERN,
   RCS_STRIP_MUSTACHE_DELIMITERS_REGEX,
-  RCS_MUSTACHE_WRAPPED_REGEX,
 } from './constants';
 import './index.scss';
 // import { formatMessage } from '../../../utils/intl';
@@ -197,6 +196,50 @@ export function coalesceCardVarMappedToTemplate(
   templateVarTokens.forEach((token, slotIndexZeroBased) => {
     const semanticVarName = getVarNameFromToken(token);
     if (!semanticVarName) return;
+
+    if (RCS_NUMERIC_VAR_NAME_REGEX.test(semanticVarName)) {
+      // Carousel numeric placeholder ({{3}}, {{4}}, …): the slot key IS the token digit itself —
+      // numbers are allocated globally across the whole carousel (getNextCarouselVarToken), not
+      // re-numbered per card, so the position-based `slotIndexZeroBased + 1` key below would target
+      // the wrong slot for every card after the first (e.g. card 2's first token is digit "3", not "1").
+      const numericSlotKey = semanticVarName;
+      const trimmedSlotValue = String(lookupSourceMap[numericSlotKey] ?? '').trim();
+      coalescedMap[numericSlotKey] = trimmedSlotValue;
+      // The slot's value may itself be a mustache-wrapped tag reference (e.g. "3" -> "{{last_name}}")
+      // — mirror it onto the bare semantic key too so VarSegment editors keyed by tag name also
+      // prepopulate (same rule as syncCardVarMappedSemanticsFromSlots).
+      const mustacheInnerMatch = trimmedSlotValue.match(/^\{\{([^}]+)\}\}$/);
+      const innerSemanticName = mustacheInnerMatch?.[1]?.trim();
+      if (innerSemanticName && innerSemanticName !== numericSlotKey) {
+        const existingInnerValue = String(coalescedMap[innerSemanticName] ?? '').trim();
+        if (!existingInnerValue) {
+          coalescedMap[innerSemanticName] = trimmedSlotValue;
+        }
+      }
+      return;
+    }
+
+    // A numeric slot may already self-reference this exact tag (e.g. "4" -> "{{last_name}}") when
+    // the template's own numeric placeholder has since been resolved to this tag in the text (see
+    // mapRcsCardContentForConsumerWithResolvedTags). That numeric key is the source of truth — don't
+    // fall through to the position-based legacy lookup below, which targets an unrelated (or
+    // nonexistent) slot and would clobber the real value with an empty string.
+    const mustacheSelfReference = `{{${semanticVarName}}}`;
+    const existingNumericKeyForSemantic = Object.keys(lookupSourceMap).find((key) => (
+      RCS_NUMERIC_VAR_NAME_REGEX.test(key) && lookupSourceMap[key] === mustacheSelfReference
+    ));
+    if (existingNumericKeyForSemantic) {
+      const trimmedSlotValue = String(lookupSourceMap[existingNumericKeyForSemantic] ?? '').trim();
+      coalescedMap[existingNumericKeyForSemantic] = trimmedSlotValue;
+      if (!seenSemanticVarNames.has(semanticVarName)) {
+        seenSemanticVarNames.add(semanticVarName);
+        coalescedMap[semanticVarName] = trimmedSlotValue;
+      }
+      return;
+    }
+
+    // Legacy: template embeds the semantic token directly ({{user_name}}); older payloads stored
+    // the resolved value under a position-based numeric key ("1", "2", …) by order of appearance.
     const numericSlotKey = String(slotIndexZeroBased + 1);
     const isRepeatOfSemanticName = seenSemanticVarNames.has(semanticVarName);
     const skipSharedSemanticLookup =
@@ -207,12 +250,6 @@ export function coalesceCardVarMappedToTemplate(
         valueFromSource = lookupSourceMap[semanticVarName];
       }
     }
-    if (valueFromSource === undefined || valueFromSource === null) {
-      valueFromSource = lookupSourceMap[String(slotIndexZeroBased + 1)];
-    }
-    if (valueFromSource === undefined || valueFromSource === null) {
-      valueFromSource = lookupSourceMap[slotIndexZeroBased + 1];
-    }
     const trimmedSlotValue = valueFromSource == null ? '' : String(valueFromSource).trim();
     coalescedMap[numericSlotKey] = trimmedSlotValue;
     if (!seenSemanticVarNames.has(semanticVarName)) {
@@ -291,11 +328,6 @@ export function isRcsTextOnlyCardMediaType(mediaType) {
  *
  * @param {boolean} [preserveLiteralValueTokens=false] When true, a slot value that is NOT itself a
  * `{{...}}`-wrapped tag (e.g. a literal preview string like "SAVE20" typed for a voucher/offer tag)
- * is left as the raw token instead of being baked into the returned string. Personalization-style
- * values (themselves another mustache tag, e.g. `{{loyalty_points}}`) still resolve either way — those
- * are internal-alias renames, not literal content. Pass true for payloads that get persisted/replayed
- * (see `mapRcsCardContentForConsumerWithResolvedTags`) so a voucher's saved token survives for the
- * editor to re-render an editable slot from, and for the backend to resolve per-recipient at send time.
  *
  * @param {number} [cardSlotOffset=0] Starting global slot index for this card's title. Carousel cards
  * beyond index 0 must pass the running total of every prior card's var count — numeric `{{N}}` tokens
@@ -309,8 +341,6 @@ export function resolveRcsCardPreviewStrings(
   cardVarMapped,
   isLibraryMode = false,
   textOnlyCard = false,
-  preserveLiteralValueTokens = false,
-  cardSlotOffset = 0,
 ) {
   const splitTemplateVarStringRcs = (str) => splitTemplateVarString(str, rcsVarRegex);
   const getVarNameFromToken = (token = '') =>
@@ -339,7 +369,12 @@ export function resolveRcsCardPreviewStrings(
           );
           if (slotValue == null || String(slotValue).trim() === '') return elem;
           const trimmedSlotValue = String(slotValue).trim();
-          if (preserveLiteralValueTokens && !RCS_MUSTACHE_WRAPPED_REGEX.test(trimmedSlotValue)) {
+          const isPlainNumericSlot = RCS_NUMERIC_VAR_NAME_REGEX.test(key);
+          if (
+            preserveLiteralValueTokens
+            && !isPlainNumericSlot
+            && !RCS_MUSTACHE_WRAPPED_REGEX.test(trimmedSlotValue)
+          ) {
             return elem;
           }
           return String(slotValue);
@@ -354,8 +389,8 @@ export function resolveRcsCardPreviewStrings(
     ? 0
     : (effectiveTitle.match(rcsVarRegex) || []).length;
   return {
-    rcsTitle: textOnlyCard ? '' : resolveTemplateWithMap(effectiveTitle, cardSlotOffset),
-    rcsDesc: resolveTemplateWithMap(String(description || ''), cardSlotOffset + titleVarCount),
+    rcsTitle: textOnlyCard ? '' : resolveTemplateWithMap(effectiveTitle, 0),
+    rcsDesc: resolveTemplateWithMap(String(description || ''), titleVarCount),
   };
 }
 
@@ -376,7 +411,6 @@ export function mapRcsCardContentForConsumerWithResolvedTags(
       : {};
   const list = Array.isArray(cardContentArray) ? cardContentArray : [];
   const isLibraryMode = isFullMode !== true;
-  let carouselSlotOffset = 0;
   return list.map((card) => {
     if (!card || typeof card !== 'object') return card;
     const nested =
@@ -387,22 +421,15 @@ export function mapRcsCardContentForConsumerWithResolvedTags(
     const nestedClean = pickRcsCardVarMappedEntries(nested);
     const merged = { ...rootClean, ...nestedClean };
     const textOnly = isRcsTextOnlyCardMediaType(card.mediaType);
-    const cardTitle = card.title ?? '';
-    const cardDescription = card.description ?? '';
     const { rcsTitle, rcsDesc } = resolveRcsCardPreviewStrings(
-      cardTitle,
-      cardDescription,
+      card.title ?? '',
+      card.description ?? '',
       merged,
       isLibraryMode,
       textOnly,
-      true,
-      carouselSlotOffset,
     );
-    const effectiveTitleForCount = textOnly ? '' : String(cardTitle);
-    const titleVarCount = (effectiveTitleForCount.match(rcsVarRegex) || []).length;
-    const descVarCount = (String(cardDescription).match(rcsVarRegex) || []).length;
-    carouselSlotOffset += titleVarCount + descVarCount;
     const { cardVarMapped: _drop, ...cardRest } = card;
+
     return {
       ...cardRest,
       title: rcsTitle,

package/v2Containers/SmsTrai/Edit/index.js

@@ -169,11 +169,12 @@ export const SmsTraiEdit = (props) => {
     return traiDltEnabled || hasTraiDltFeature() || isRcsEditFlow;
   }, [isRcsSmsFallback, traiDltEnabled, isRcsEditFlow]);
 
-
-  const [rcsFallbackVarSegmentModeActive, setRcsFallbackVarSegmentModeActive] = useState(false);
-  const useRcsFallbackVarSegmentForCurrentText = isRcsSmsFallback && rcsFallbackVarSegmentModeActive;
-
-
+  /**
+   * RCS SMS fallback: always show character count vs TRAI max (`SMS_TRAI_CONTENT_MAX_LENGTH`).
+   * Do not use `totalCharacters` ({smsCount} SMS via length/160) here: resolved template + variable
+   * values can exceed one GSM segment while DLT still shows a single registered template — length/160
+   * is only a rough segment hint and reads as “wrong SMS count” in campaigns.
+   */
   const renderDescriptionCharacterCount = (className = "rcs-character-count") => (
     <CapLabel type="label1" className={className}>
       {formatMessage(messages.charactersCountLabel, {
@@ -195,24 +196,18 @@ export const SmsTraiEdit = (props) => {
   };
 
   const renderRcsFallbackMessage = (str = '') => {
-    if (!useRcsFallbackVarSegmentForCurrentText) {
+    if (!useRcsFallbackVarSegment) {
       return (
         <CapRow className="rcs-create-template-message-input">
           <div className="rcs_text_area_wrapper">
-            <div className="var-segment-message-editor__var-slot">
-              <TextArea
-                id="rcs_fallback_message_textarea"
-                autosize={{ minRows: 1, maxRows: 3 }}
-                value={fallbackText}
-                onChange={(e) => setFallbackText(e.target.value)}
-                onBlur={() => {
-                  const hasVarToken = (fallbackText.match(COMBINED_SMS_TEMPLATE_VAR_REGEX) || []).length > 0;
-                  if (hasVarToken) setRcsFallbackVarSegmentModeActive(true);
-                }}
-                placeholder={formatMessage(rcsMessages.fallbackMsgPlaceholder)}
-                data-testid="rcs_fallback_plain_text_area"
-              />
-            </div>
+            <TextArea
+              id="rcs_fallback_message_textarea"
+              autosize={{ minRows: 4, maxRows: 12 }}
+              value={fallbackText}
+              onChange={(e) => setFallbackText(e.target.value)}
+              placeholder={formatMessage(rcsMessages.fallbackMsgPlaceholder)}
+              data-testid="rcs_fallback_plain_text_area"
+            />
             {renderDescriptionCharacterCount()}
           </div>
         </CapRow>
@@ -367,9 +362,7 @@ export const SmsTraiEdit = (props) => {
     const templateBase = get(activeTemplateSourceForInit, 'versions.base', {});
     const unicodeValidity = get(templateBase, 'unicode-validity', true);
     const templateMsg = get(activeTemplateSourceForInit, 'versions.base.sms-editor', '') || '';
-    const templateMsgHasVarToken = (templateMsg.match(COMBINED_SMS_TEMPLATE_VAR_REGEX) || []).length > 0;
-    setRcsFallbackVarSegmentModeActive(templateMsgHasVarToken);
-    if (!templateMsgHasVarToken) {
+    if (!useRcsFallbackVarSegment) {
       setFallbackText(templateMsg);
       setFallbackVarMappedData({});
       setUpdatedSmsEditor(String(templateMsg).split(''));
@@ -436,7 +429,7 @@ export const SmsTraiEdit = (props) => {
 
   useEffect(() => {
     if (!isRcsSmsFallback) return;
-    if (!useRcsFallbackVarSegmentForCurrentText) {
+    if (!useRcsFallbackVarSegment) {
       const plainFallbackSmsText = fallbackText || '';
       setUpdatedSmsEditor(plainFallbackSmsText.split(''));
       setTotalMessageLength(plainFallbackSmsText.length);
@@ -448,17 +441,15 @@ export const SmsTraiEdit = (props) => {
     );
     setUpdatedSmsEditor(resolvedFallbackDisplay.split(''));
     setTotalMessageLength(resolvedFallbackDisplay.length);
-  }, [isRcsSmsFallback, useRcsFallbackVarSegmentForCurrentText, fallbackText, fallbackVarMappedData]);
+  }, [isRcsSmsFallback, useRcsFallbackVarSegment, fallbackText, fallbackVarMappedData]);
 
   useEffect(() => {
     if (!isRcsSmsFallback) return;
-    // Skip until hydration populates fallbackVarMappedData, or this wipes the parent's rcsSmsFallbackVarMapped before init restores it.
-    if (loading) return;
     if (typeof onRcsFallbackEditorStateChange !== 'function') return;
     onRcsFallbackEditorStateChange({
       rcsSmsFallbackVarMapped: fallbackVarMappedData || {},
     });
-  }, [isRcsSmsFallback, loading, fallbackVarMappedData, onRcsFallbackEditorStateChange]);
+  }, [isRcsSmsFallback, fallbackVarMappedData, onRcsFallbackEditorStateChange]);
 
   useEffect(() => {
     if (!isRcsSmsFallback) return;
@@ -541,7 +532,7 @@ export const SmsTraiEdit = (props) => {
       // TRAI/DLT VarSegment: `validateIfTagClosed` only understands paired `{{…}}` and breaks on
       // legitimate `{#…#}` / mixed TRAI shapes (extra `{`/`}` counts). Do not tie Done to it;
       // slot completeness is enforced by `areAllRcsSmsFallbackVarSlotsFilled` on the RCS screen.
-      if (useRcsFallbackVarSegmentForCurrentText) {
+      if (useRcsFallbackVarSegment) {
         tagValidationResponseRef.current = {};
         updateIsTagValidationError(false);
         return;
@@ -582,7 +573,7 @@ export const SmsTraiEdit = (props) => {
     tags,
     isRcsSmsFallback,
     isFullMode,
-    useRcsFallbackVarSegmentForCurrentText,
+    useRcsFallbackVarSegment,
     fallbackText,
     fallbackVarMappedData,
     getDefaultTags,
@@ -721,8 +712,7 @@ export const SmsTraiEdit = (props) => {
           ...baseWithoutDerivedFields,
           'sms-editor': fallbackText || '',
           'unicode-validity': isUnicodeAllowed,
-          // Gate on useRcsFallbackVarSegmentForCurrentText (not the static DLT flag), or non-DLT var-token flows lose slot values on save.
-          ...(useRcsFallbackVarSegmentForCurrentText && {
+          ...(useRcsFallbackVarSegment && {
             'rcs-sms-fallback-var-mapped': fallbackVarMappedData || {},
           }),
         };
@@ -788,9 +778,8 @@ export const SmsTraiEdit = (props) => {
 
   const onTagSelect = (data) => {
     if (isRcsSmsFallback) {
-      if (!useRcsFallbackVarSegmentForCurrentText) {
+      if (!useRcsFallbackVarSegment) {
         setFallbackText((prev) => `${prev || ''}{{${data}}}`);
-        setRcsFallbackVarSegmentModeActive(true);
         return;
       }
       if (!fallbackFocusedId) return;
@@ -960,7 +949,7 @@ export const SmsTraiEdit = (props) => {
 
   const calculateTotalMessageLength = () => {
     if (isRcsSmsFallback) {
-      if (useRcsFallbackVarSegmentForCurrentText) {
+      if (useRcsFallbackVarSegment) {
         const resolved = getFallbackResolvedContent(fallbackText || '', fallbackVarMappedData || {});
         setTotalMessageLength(resolved.length);
       } else {

package/v2Containers/Templates/_templates.scss

@@ -1,7 +1,6 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
 .ant-tabs-content{
-   margin-top: $CAP_SPACE_08;
   // .creatives-templates-list.full-mode{
     .v2-pagination-container, .v2-pagination-container-half {
       .ant-tabs-tabpane-active{
@@ -1428,6 +1427,7 @@
   justify-content: space-between;
   align-items: center;
   gap: $CAP_SPACE_08;
+  margin-right: $CAP_SPACE_32;
 }
 
 .template-listing-more-btn {

package/v2Containers/Templates/index.js

@@ -4603,7 +4603,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         <CapButton
           className={`create-new-${channelLowerCase} margin-l-8 margin-b-12`}
           type={"primary"}
-          isAddBtn
           disabled={this.isCreateDisabled()}
           onClick={this.createTemplate}
         >

package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap

@@ -239,7 +239,6 @@ exports[`Test Templates container Should render sms illustration when no templat
                     <CapButton
                       className="create-new-sms margin-l-8 margin-b-12"
                       disabled={false}
-                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >
@@ -814,7 +813,6 @@ exports[`Test Templates container Should render temlates when whatsapp templates
                     <CapButton
                       className="create-new-whatsapp margin-l-8 margin-b-12"
                       disabled={false}
-                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >
@@ -1225,7 +1223,6 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
                     <CapButton
                       className="create-new-whatsapp margin-l-8 margin-b-12"
                       disabled={false}
-                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >
@@ -1699,7 +1696,6 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
                     <CapButton
                       className="create-new-whatsapp margin-l-8 margin-b-12"
                       disabled={false}
-                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >
@@ -2173,7 +2169,6 @@ exports[`Test Templates container Test max templates warning 1`] = `
                     <CapButton
                       className="create-new-whatsapp margin-l-8 margin-b-12"
                       disabled={false}
-                      isAddBtn={true}
                       onClick={[Function]}
                       type="primary"
                     >

package/v2Containers/TemplatesV2/TemplatesV2.style.js

@@ -10,9 +10,10 @@ export default css`
 
   .component-wrapper {
     ${(props) => props.isFullMode ? `
+      max-width: 71.25rem;
       margin: 0 auto;
       width: 100%;
-      padding: 0;
+      padding: 0.714rem 0;
       /* Only main channel tabs content, not HTML Editor validation panel tabs */
       > .cap-tab-v2 > .ant-tabs-content-holder > .ant-tabs-content,
       > .cap-tab-v2 > .ant-tabs-content {
@@ -96,12 +97,6 @@ export default css`
 `;
 
 export const CapTabStyle = css`
-  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24};` : ``
-  }
-  .ant-tabs-nav-list {
-    gap: 2rem;
-  }
-  .ant-tabs-tab + .ant-tabs-tab {
-    margin: 0 !important;
+  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24}` : ``
   }
 `;

package/v2Containers/TemplatesV2/index.js

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators, compose } from 'redux';
-import { CapTab, CapCustomCard, CapButton, CapIcon, CapSpin, CapTooltip } from '@capillarytech/cap-ui-library';
+import { CapTab, CapCustomCard, CapButton, CapHeader, CapIcon, CapSpin, CapTooltip } from '@capillarytech/cap-ui-library';
 import { find, get, pick } from 'lodash';
 import Helmet from 'react-helmet';
 
@@ -47,9 +47,6 @@ import {
   NORMALIZED_CHANNEL_ALIASES,
   SMS,
 } from "../CreativesContainer/constants";
-import { MFEEventBus } from '@capillarytech/cap-ui-utils';
-import { isMFEMode } from '../../utils/mfeDetect';
-import appConfig from '../../app-config';
 
 const { CapCustomCardList } = CapCustomCard;
 
@@ -57,7 +54,6 @@ const StyledCapTab = withStyles(CapTab, CapTabStyle);
 export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
-    this.lcpReported = false;
     let defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
     if (defaultChannel === LOYALTY) {
       defaultChannel = 'sms';
@@ -226,23 +222,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     }
   }
 
-  componentDidUpdate(prevProps) {
-    if (
-      isMFEMode() &&
-      !this.lcpReported &&
-      !this.props.Templates.getAllTemplatesInProgress &&
-      prevProps.Templates.getAllTemplatesInProgress
-    ) {
-      this.lcpReported = true;
-      MFEEventBus.emit('mfe:segment', {
-        action: 'stop',
-        appId: appConfig.appName,
-        type: 'lcp',
-        timestamp: performance.now(),
-      });
-    }
-  }
-
   componentWillReceiveProps(nextProps) {
     if (this.props.channel !== nextProps.channel) {
       const panes = this.setChannelContent(nextProps.channel, this.state.panes);
@@ -443,6 +422,14 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
             />
           )}
           <section className="component-wrapper">
+            {isFullMode && (
+              <CapHeader
+                title={<FormattedMessage {...messages.creatives} />}
+                {...(!useLocalTemplates && {
+                  description: <FormattedMessage {...messages.creativesDesc} />,
+                })}
+              />
+            )}
             {hideChannelTabsForLocalSms ? (
               <section className="templates-v2-local-sms-pane">{activeLocalPane?.content}</section>
             ) : (

package/AppRoot.js

@@ -1,124 +0,0 @@
-import React, { useMemo, useEffect, useRef } from 'react';
-import { StyleSheetManager } from 'styled-components';
-import { Provider } from 'react-redux';
-import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
-import { createBrowserHistory } from 'history';
-import ConfigProvider from 'antd/lib/config-provider';
-import { getCapThemeConfig, loadCapUI } from '@capillarytech/cap-ui-library/utils';
-
-import LanguageProvider from 'v2Containers/LanguageProvider';
-import App from './containers/App';
-import './styles/main.scss';
-import { initialReducer } from './initialReducer';
-import { translationMessages } from './i18n';
-import initialState from './initialState';
-import pathConfig from './config/path';
-import { isMFEMode } from './utils/mfeDetect';
-import { emitFirstPaintReadyIfNotDataLanding } from './utils/mfeFirstPaintReady';
-import rebaseHistory from './utils/mfeHistory';
-import { MFEEventBus } from '@capillarytech/cap-ui-utils';
-import appConfig from './app-config';
-
-// Module-scope SDK init — MUST run before configureStore.
-loadCapUI();
-
-const AppRoot = ({ basename: _basename = '/creatives/ui', history: hostHistory }) => {
-  const { store, history } = useMemo(() => {
-    const hist = hostHistory
-      ? rebaseHistory(hostHistory, pathConfig.publicPath)
-      : createBrowserHistory({ basename: pathConfig.publicPath });
-    const st = configureStore(initialState, initialReducer, hist);
-    return { store: st, history: hist };
-  }, [hostHistory]);
-
-  // MFE style isolation: route THIS remote's styled-components output (including any
-  // createGlobalStyle) into a tagged <div data-mfe-app> in <head>, instead of the shared
-  // default styled-components <style>. On unmount the container is removed, so all of this
-  // remote's styled-components CSS goes with it — no global-style leak into other remotes.
-  // Standalone (non-MFE) is untouched: styles inject into <head> as usual.
-  const styleTarget = useMemo(() => {
-    if (!isMFEMode() || typeof document === 'undefined') return null;
-    const el = document.createElement('div');
-    el.setAttribute('data-mfe-app', 'creatives/ui');
-    document.head.appendChild(el);
-    return el;
-  }, []);
-
-  useEffect(() => () => {
-    if (styleTarget) styleTarget.remove();
-  }, [styleTarget]);
-
-  const fcpReported = useRef(false);
-  useEffect(() => {
-    if (isMFEMode() && !fcpReported.current) {
-      fcpReported.current = true;
-      requestAnimationFrame(() => {
-        MFEEventBus.emit('mfe:segment', {
-          action: 'stop',
-          appId: appConfig.appName,
-          type: 'fcp',
-          timestamp: performance.now(),
-        });
-      });
-    }
-  }, []);
-
-  // Non-landing routes (anything outside the TemplatesV2 listing pages) never emit
-  // the data-settled 'lcp'; emit it at first paint so the host drops the skeleton
-  // overlay immediately instead of waiting out the grace timer.
-  useEffect(() => {
-    emitFirstPaintReadyIfNotDataLanding();
-  }, []);
-
-  useEffect(() => {
-    if (!isMFEMode()) {
-      const { startStandalone } = require('locize');
-      startStandalone();
-    }
-  }, []);
-
-  useEffect(() => {
-    if (isMFEMode()) {
-      MFEEventBus.emit('gtm:init', {
-        appId: appConfig.appName,
-        containerId: appConfig.gtm.trackingId,
-      });
-    }
-  }, []);
-
-  // In MFE mode the HOST's index.html is served, not creatives' — so BeePlugin.js
-  // (declared in creatives/index.html) is never loaded. Inject it here so BeeEditor works.
-  useEffect(() => {
-    if (isMFEMode() && !window.BeePlugin && !document.querySelector('script[src*="BeePlugin.js"]')) {
-      const script = document.createElement('script');
-      script.src = 'https://app-rsrc.getbee.io/plugin/BeePlugin.js';
-      script.type = 'text/javascript';
-      document.head.appendChild(script);
-    }
-  }, []);
-
-  useEffect(() => {
-    const unsub = MFEEventBus.on('creatives:navigate', ({ path }) => {
-      if (path) history.push(path);
-    });
-    return unsub;
-  }, [history]);
-
-  const tree = (
-    <Provider store={store}>
-      <LanguageProvider messages={translationMessages}>
-        <ConfigProvider theme={getCapThemeConfig()}>
-          <App history={history} />
-        </ConfigProvider>
-      </LanguageProvider>
-    </Provider>
-  );
-
-  return styleTarget ? (
-    <StyleSheetManager target={styleTarget}>{tree}</StyleSheetManager>
-  ) : (
-    tree
-  );
-};
-
-export default AppRoot;

package/app-config.js

@@ -1,61 +0,0 @@
-module.exports = {
-  appName: 'cap-creatives-ui',
-  intouchBaseUrl: 'nightly.intouch.capillarytech.com',
-  prefix: '/creatives/ui',
-  isHostedOnPlatform: false,
-  appType: 'native',
-  bugsnag: {
-    useBugsnag: false,
-    apiKey: '',
-    retainSourceMaps: false,
-  },
-  useSourceMaps: true,
-  i18n: {
-    useI18n: true,
-    customI18n: false,
-    localI18n: false,
-    appNames: ['cap_creatives_ui'],
-    locales: [],
-    defaultLocale: null,
-  },
-  gtm: {
-    useGTM: true,
-    trackingId: 'GTM-MC4TRPX',
-    projectId: 'GTM-MC4TRPX',
-  },
-  useNavigationComponent: true,
-  useTestSetup: true,
-  newrelic: {
-    enabled: true,
-    licenseKey: '082da40fff',
-    environments: {
-      nightly: {
-        appId: '718411553',
-      },
-      staging: {
-        appId: '718413027',
-      },
-      ushc: {
-        appId: '718413124',
-      },
-      apac: {
-        appId: '718413134',
-      },
-      'north-america': {
-        appId: '718413144',
-      },
-      apac2: {
-        appId: '718413155',
-      },
-      tata: {
-        appId: '718413165',
-      },
-      sea: {
-        appId: '718413175',
-      },
-      eu: {
-        appId: '718413185',
-      },
-    },
-  },
-};