@capillarytech/creatives-library 9.0.36 → 9.0.37-alpha.1

package/styles/containers/layout/_layoutPage.scss

@@ -79,7 +79,6 @@
     flex: 1;
     height: calc(100vh - 50px);
     overflow: auto;
-    padding: 8px 16px 0;
     color: #333333;
 }
 
@@ -154,16 +153,19 @@
 }
 
 .cap-loader-box {
-  position: fixed;
+  position: absolute;
   top: 0;
+  left: 0;
   width: 100%;
-  height: 100%;
-  background: rgb(255,255,255);
-  text-align: center;
+  min-height: calc(100vh - 48px);
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   .loader-image {
     width: 80px;
-    margin-top: 20%;
+    height: auto;
   }
 }
 

package/utils/getDataLayer.js

@@ -0,0 +1,15 @@
+import { isMFEMode } from './mfeDetect';
+import appConfig from '../app-config';
+
+const getDataLayerName = () => {
+  if (isMFEMode()) {
+    return `dataLayer_${appConfig.appName.replace(/-/g, '_')}`;
+  }
+  return 'dataLayer';
+};
+
+export const getDataLayer = () => {
+  const name = getDataLayerName();
+  window[name] = window[name] || [];
+  return window[name];
+};

package/utils/gtmTrackers/gtmEvents/creativeDetails.js

@@ -1,4 +1,5 @@
 import { CREATIVES } from "../../../v2Containers/App/constants";
+import { getDataLayer } from '../../getDataLayer';
 
 const creativeDetails = ({
   name,
@@ -23,7 +24,7 @@ const creativeDetails = ({
     videoAdded,
     stickersAdded
   };
-  window.dataLayer.push({
+  getDataLayer().push({
     creativeDetails: parsedObj,
     event: 'creativeDetails',
   });

package/utils/mfeDetect.js

@@ -0,0 +1 @@
+export const isMFEMode = () => Boolean(window.MFE_HOST);

package/utils/mfeFirstPaintReady.js

@@ -0,0 +1,29 @@
+import { MFEEventBus } from '@capillarytech/cap-ui-utils';
+import appConfig from '../app-config';
+import { isMFEMode } from './mfeDetect';
+
+// Routes whose containers emit the data-settled 'lcp' themselves —
+// the first-paint emit must NOT fire for these.
+// TemplatesV2 renders at relative '/v2' and '/v2/loyalty' (routes.js); in MFE mode
+// the shared history is rebased on publicPath, so the real browser pathname carries
+// the '/creatives/ui' prefix. Match the prefixed paths — this util reads
+// window.location.pathname, not the rebased router location. (v1 standalone is
+// non-MFE and irrelevant here.)
+const DATA_LANDING_MATCHERS = ['/creatives/ui/v2', '/creatives/ui/v2/loyalty'];
+
+export const isDataLandingPath = (pathname) => {
+  const p = (pathname || '').replace(/\/+$/, '') || '/';
+  return DATA_LANDING_MATCHERS.some((m) => (m instanceof RegExp ? m.test(p) : m === p));
+};
+
+export const emitFirstPaintReadyIfNotDataLanding = () => {
+  if (!isMFEMode() || isDataLandingPath(window.location.pathname)) return;
+  requestAnimationFrame(() => {
+    MFEEventBus.emit('mfe:segment', {
+      action: 'stop',
+      appId: appConfig.appName,
+      type: 'lcp',
+      timestamp: performance.now(),
+    });
+  });
+};

package/utils/mfeHistory.js

@@ -0,0 +1,62 @@
+/**
+ * Re-base the host's shared root history for this MFE remote.
+ *
+ * The MFE host owns ONE root history instance and hands it to every remote, so host + all
+ * remotes stay perfectly in sync: a push on the shared instance notifies every mounted
+ * router directly (no popstate hack, no drift on fast remote switching).
+ *
+ * This remote's routes / <Link>s / history.push calls are written RELATIVE to its serving
+ * prefix. This adapter presents a basename'd VIEW of the shared history — stripping the
+ * prefix when the router reads the location, and prepending it when the router navigates —
+ * while delegating all actual navigation to the shared instance. Net effect: relative
+ * routing keeps working unchanged, and navigation still flows through the single shared
+ * history. Standalone (no host history) is unaffected; the remote keeps creating its own.
+ */
+const addBase = (base, to) => {
+  if (typeof to === 'string') {
+    if (!to.startsWith('/')) return to; // already relative to current location
+    return to === '/' ? base : `${base}${to}`;
+  }
+  if (to && typeof to === 'object') {
+    return { ...to, pathname: addBase(base, to.pathname || '/') };
+  }
+  return to;
+};
+
+const stripBase = (base, pathname) => {
+  if (!pathname) return pathname;
+  if (pathname === base) return '/';
+  if (pathname.startsWith(`${base}/`)) return pathname.slice(base.length);
+  return pathname;
+};
+
+export default function rebaseHistory(history, rawBase) {
+  const base = String(rawBase || '').replace(/\/+$/, ''); // normalise: no trailing slash
+  if (!base) return history;
+  const view = loc => ({ ...loc, pathname: stripBase(base, loc.pathname) });
+  return {
+    get length() {
+      return history.length;
+    },
+    get action() {
+      return history.action;
+    },
+    get location() {
+      return view(history.location);
+    },
+    push: (to, state) => history.push(addBase(base, to), state),
+    replace: (to, state) => history.replace(addBase(base, to), state),
+    go: n => history.go(n),
+    goBack: () => history.goBack(),
+    goForward: () => history.goForward(),
+    block: (...args) => history.block(...args),
+    listen: listener =>
+      history.listen((loc, action) => listener(view(loc), action)),
+    createHref: to =>
+      history.createHref(
+        typeof to === 'string'
+          ? addBase(base, to)
+          : { ...to, pathname: addBase(base, (to && to.pathname) || '/') },
+      ),
+  };
+}

package/utils/rcsPayloadUtils.js

@@ -59,9 +59,12 @@ export const normalizeRcsMessageContentForApi = messageContentItem => {
     rcsCardPayloadOnly.cardContent.forEach(card => {
       if (Array.isArray(card?.suggestions)) {
         card.suggestions.forEach(suggestion => {
-          // isSaved is UI-only editor state: campaigns' send-for-approval API rejects it, and it
-          // isn't part of the persisted payload shape.
+          // isSaved and urlType are UI-only editor state: campaigns' send-for-approval API
+          // rejects them, and they aren't part of the persisted payload shape. The dynamic tag
+          // (if any) already lives inline in `url` (e.g. "https://x.com{{first_name}}") — no
+          // separate dynamicUrlPayload field is sent for RCS.
           delete suggestion?.isSaved;
+          delete suggestion?.urlType;
         });
       }
     });

package/utils/tests/rcsPayloadUtils.test.js

@@ -209,7 +209,7 @@ describe('normalizeRcsMessageContentForApi', () => {
     expect(item.rcsContent.cardContent).toEqual([{ title: 'Card' }]);
   });
 
-  it('strips isSaved from each suggestion in cardContent', () => {
+  it('strips isSaved and urlType from each suggestion in cardContent', () => {
     const item = {
       rcsContent: {
         cardContent: [
@@ -217,7 +217,9 @@ describe('normalizeRcsMessageContentForApi', () => {
             title: 'Card 1',
             suggestions: [
               { type: 'QUICK_REPLY', text: 'Yes', isSaved: true },
-              { type: 'CTA', text: 'Go', url: 'https://example.com', isSaved: false },
+              {
+                type: 'CTA', text: 'Go', url: 'https://example.com', urlType: 'STATIC', isSaved: false,
+              },
             ],
           },
         ],
@@ -230,6 +232,56 @@ describe('normalizeRcsMessageContentForApi', () => {
     ]);
   });
 
+  it('keeps type "CTA" and the inline tag in url, but drops urlType, for a dynamic-URL suggestion', () => {
+    const item = {
+      rcsContent: {
+        cardContent: [
+          {
+            title: 'Card 1',
+            suggestions: [
+              {
+                type: 'CTA',
+                text: 'Visit here',
+                url: 'https://example.com/{{first_name}}',
+                urlType: 'DYNAMIC',
+                isSaved: true,
+              },
+            ],
+          },
+        ],
+      },
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.rcsContent.cardContent[0].suggestions).toEqual([
+      {
+        type: 'CTA',
+        text: 'Visit here',
+        url: 'https://example.com/{{first_name}}',
+      },
+    ]);
+  });
+
+  it('leaves phone number and quick reply suggestions untouched by the urlType stripping', () => {
+    const item = {
+      rcsContent: {
+        cardContent: [
+          {
+            title: 'Card 1',
+            suggestions: [
+              {
+                type: 'PHONE_NUMBER', text: 'Call', phoneNumber: '918987678', isSaved: true,
+              },
+            ],
+          },
+        ],
+      },
+    };
+    normalizeRcsMessageContentForApi(item);
+    expect(item.rcsContent.cardContent[0].suggestions).toEqual([
+      { type: 'PHONE_NUMBER', text: 'Call', phoneNumber: '918987678' },
+    ]);
+  });
+
   it('handles cardContent with no suggestions gracefully', () => {
     const item = {
       rcsContent: {

package/v2Components/CapActionButton/constants.js

@@ -43,6 +43,7 @@ export const RCS_CTA_URL_TYPE = {
 export const BTN_MAX_LENGTH = 20;
 export const PHONE_NUMBER_MAX_LENGTH = 15;
 export const URL_MAX_LENGTH = 2000;
+export const DYNAMIC_URL_SUFFIX = '{{1}}';
 
 export const CTA_TYPE_RADIO_OPTIONS = [
   { label: <FormattedMessage {...messages.ctaPhoneNo} />, value: RCS_BUTTON_TYPES.PHONE_NUMBER },

package/v2Components/CapActionButton/index.js

@@ -17,7 +17,8 @@ import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
 import { CAP_SPACE_04 } from '@capillarytech/cap-ui-library/styled/variables';
-import globalMessages from '../../v2Containers/Cap/messages';import CapTagListWithInput from '../CapTagListWithInput';
+import globalMessages from '../../v2Containers/Cap/messages';
+import TagList from '../../v2Containers/TagList';
 
 import { isUrl, isValidText } from '../../v2Containers/Line/Container/Wrapper/utils';
 import messages from './messages';
@@ -30,6 +31,7 @@ import {
   RCS_CTA_URL_TYPE,
   CTA_TYPE_RADIO_OPTIONS,
   CTA_URL_TYPE_SELECT_OPTIONS,
+  DYNAMIC_URL_SUFFIX,
 } from './constants';
 import './index.scss';
 import { INITIAL_SUGGESTIONS, RCS_BUTTON_TYPES, HOST_ICS} from '../../v2Containers/Rcs/constants';
@@ -56,6 +58,7 @@ export const CapActionButton = (props) => {
     minSavedSuggestions = 0,
     hideDeleteSuggestionIndexes = [],
   } = props;
+  const { formatMessage } = intl;
   const isHostIcs = host === HOST_ICS;
   const [urlError, setUrlError] = useState(false);
   const [buttonError, setButtonError] = useState(false);
@@ -122,7 +125,8 @@ export const CapActionButton = (props) => {
       return formatMessage(messages.ctaWebsiteUrlErrorMessage);
     }
     if (urlSubtype === RCS_CTA_URL_TYPE.DYNAMIC) {
-      return false;
+      const baseUrl = trimmedUrl.replace(invalidVarRegex, '');
+      return isUrl(baseUrl) ? false : formatMessage(messages.ctaWebsiteUrlErrorMessage);
     }
     if (!isUrl(trimmedUrl)) {
       return formatMessage(messages.ctaWebsiteUrlErrorMessage);
@@ -134,9 +138,12 @@ export const CapActionButton = (props) => {
   };
 
   const onUrlChange = ({ target }) => {
-    const { value, id } = target;
+    const { id } = target;
     const row = suggestions[id] || {};
     const subtype = row.urlType || RCS_CTA_URL_TYPE.STATIC;
+    const value = subtype === RCS_CTA_URL_TYPE.DYNAMIC
+      ? target.value.replace(invalidVarRegex, '')
+      : target.value;
     setUrlError(validateCtaUrlValue(value, subtype));
     updateHandler(HANDLERS.URL, value, id);
   };
@@ -149,6 +156,14 @@ export const CapActionButton = (props) => {
     updateButtonChange(cloned, index);
   };
 
+  const onTagSelect = (data, index, url) => {
+    updateHandler(HANDLERS.URL, (url || '').replace(DYNAMIC_URL_SUFFIX, `{{${data}}}`), index);
+  };
+
+  const revertTagSelect = (index, url) => {
+    updateHandler(HANDLERS.URL, (url || '').replace(invalidVarRegex, DYNAMIC_URL_SUFFIX), index);
+  };
+
   const onPhoneNoChange = (value, index) => {
     updateHandler(HANDLERS.PHONE_NUMBER, value, index);
   };
@@ -161,12 +176,25 @@ export const CapActionButton = (props) => {
       return true;
     } if (type === RCS_BUTTON_TYPES.CTA) {
       const subtype = urlType || RCS_CTA_URL_TYPE.STATIC;
-      return !!validateCtaUrlValue(url, subtype);
+      if (validateCtaUrlValue(url, subtype)) {
+        return true;
+      }
+      // A dynamic URL still holding the unresolved {{1}} placeholder has no real
+      // personalization tag assigned yet — block save until one is picked via "Add URL label".
+      return subtype === RCS_CTA_URL_TYPE.DYNAMIC && (url || '').includes(DYNAMIC_URL_SUFFIX);
     }
     return false;
   };
 
   const saveCta = (index) => {
+    const cta = suggestions[index];
+    if (
+      cta?.type === RCS_BUTTON_TYPES.CTA
+      && cta?.urlType === RCS_CTA_URL_TYPE.DYNAMIC
+      && !(cta?.url || '').includes(DYNAMIC_URL_SUFFIX)
+    ) {
+      cta.url = `${cta.url || ''}${DYNAMIC_URL_SUFFIX}`;
+    }
     updateHandler(HANDLERS.IS_SAVED, true, index);
   };
 
@@ -180,8 +208,6 @@ export const CapActionButton = (props) => {
     updateButtonChange(newSuggestion, suggestions?.length);
   };
 
-  const { formatMessage } = intl;
-
   const hideDeleteForSuggestionIndex = (idx) =>
     Array.isArray(hideDeleteSuggestionIndexes) && hideDeleteSuggestionIndexes.includes(idx);
 
@@ -204,6 +230,7 @@ export const CapActionButton = (props) => {
       const urlSubtype = type === RCS_BUTTON_TYPES.CTA
         ? (cta.urlType || RCS_CTA_URL_TYPE.STATIC)
         : RCS_CTA_URL_TYPE.STATIC;
+      const isDynamicUrlSubtype = urlSubtype === RCS_CTA_URL_TYPE.DYNAMIC;
       const phoneNumber = type !== RCS_BUTTON_TYPES.PHONE_NUMBER ? null : cta.phoneNumber;
       if (isFullMode && !isEditFlow && !isSaved) {
         renderArray.push(
@@ -315,13 +342,32 @@ export const CapActionButton = (props) => {
                   </CapColumn>
                   <CapColumn span={18} className="rcs-cta-url-value-col">
                     <CapHeading type="h4" className="cta-label">
-                      {formatMessage(messages.ctaUrlField)}
+                      {formatMessage(messages.ctaWebsiteUrl)}
+                      {isDynamicUrlSubtype && (
+                        <CapTooltipWithInfo
+                          infoIconProps={{
+                            style: { marginLeft: CAP_SPACE_04 },
+                          }}
+                          autoAdjustOverflow
+                          placement="right"
+                          title={formatMessage(messages.ctaDynamicUrlTooltip, { one: DYNAMIC_URL_SUFFIX })}
+                        />
+                      )}
                     </CapHeading>
                     <CapInput
                       id={index}
+                      addonAfter={
+                        isDynamicUrlSubtype
+                        && !(url || '').includes(DYNAMIC_URL_SUFFIX)
+                        && DYNAMIC_URL_SUFFIX
+                      }
                       className="rcs-cta-url"
                       onChange={onUrlChange}
-                      placeholder={formatMessage(messages.ctaEnterUrlPlaceholder)}
+                      placeholder={
+                        isDynamicUrlSubtype
+                          ? formatMessage(messages.ctaDynamicPlaceholder)
+                          : formatMessage(messages.ctaEnterUrlPlaceholder)
+                      }
                       value={url || ''}
                       size="large"
                       maxLength={URL_MAX_LENGTH}
@@ -403,7 +449,7 @@ export const CapActionButton = (props) => {
               span={1}
               className={`${ctaIsPhone ? 'whatsapp-saved-cta-phone-icon' : ''}`}
             >
-              <CapIcon size="s" type={ctaIsPhone ? 'call' : (ctaIsReply ? 'small-link' : 'launch')} />
+              <CapIcon size="s" type={ctaIsPhone ? 'call' : (ctaIsReply ? 'small-link' : 'open-in-new')} />
             </CapColumn>
             <CapColumn span={6}>
               <CapLabel
@@ -430,6 +476,28 @@ export const CapActionButton = (props) => {
                     </CapTooltip>
                   </>
                 )}
+                {isDynamicUrlSubtype && (url || '').includes(DYNAMIC_URL_SUFFIX) && (
+                  <TagList
+                    className="rcs-cta-taglist"
+                    label={formatMessage(messages.ctaTagListLabel)}
+                    onTagSelect={(data) => onTagSelect(data, index, url)}
+                    location={location}
+                    tags={tags}
+                    injectedTags={injectedTags}
+                    selectedOfferDetails={selectedOfferDetails}
+                    onContextChange={onContextChange}
+                  />
+                )}
+                {isDynamicUrlSubtype && !(url || '').includes(DYNAMIC_URL_SUFFIX) && (
+                  <CapTooltip title={formatMessage(messages.ctaTagListRevert)} placement="top">
+                    <CapIcon
+                      size="s"
+                      type="return"
+                      className="rcs-cta-tag-revert"
+                      onClick={() => revertTagSelect(index, url)}
+                    />
+                  </CapTooltip>
+                )}
                 {(isFullMode && !isEditFlow) && (
                   <div className="rcs-saved-cta-action-icons">
                     <CapIcon

package/v2Components/CapActionButton/index.scss

@@ -84,6 +84,19 @@
     .rcs-saved-cta-delete-icon {
         cursor: pointer;
     }
+
+    // Dynamic-URL tag controls: keep them from stretching the flex row's
+    // height/width — same treatment as the edit/delete icons above.
+    .rcs-cta-tag-revert {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        cursor: pointer;
+    }
+
+    .rcs-cta-taglist {
+        flex-shrink: 0;
+    }
 }
 
 // Button text / URL: count via CapInput `suffix` (antd affix, right-aligned inside field).

package/v2Components/CapActionButton/messages.js

@@ -199,4 +199,17 @@ export default defineMessages({
     id: `${prefix}.addLabels`,
     defaultMessage: 'Add Labels',
   },
+  ctaDynamicUrlTooltip: {
+    id: `${prefix}.ctaDynamicUrlTooltip`,
+    defaultMessage:
+      'Only one variable can be added to a URL. No need to add {one} to the end of the URL',
+  },
+  ctaTagListLabel: {
+    id: `${prefix}.ctaTagListLabel`,
+    defaultMessage: 'Add URL label',
+  },
+  ctaTagListRevert: {
+    id: `${prefix}.ctaTagListRevert`,
+    defaultMessage: 'Reset website URL label to default value',
+  },
 });

package/v2Components/CapActionButton/tests/index.test.js

@@ -4,7 +4,9 @@ import '@testing-library/jest-dom';
 import { render, screen, fireEvent } from '../../../utils/test-utils';
 import { waitFor } from '@testing-library/react';
 import { CapActionButton } from '../index';
-import { BTN_MAX_LENGTH, PHONE_NUMBER_MAX_LENGTH, URL_MAX_LENGTH } from '../constants';
+import {
+  BTN_MAX_LENGTH, PHONE_NUMBER_MAX_LENGTH, URL_MAX_LENGTH, RCS_CTA_URL_TYPE, DYNAMIC_URL_SUFFIX,
+} from '../constants';
 import { RCS_BUTTON_TYPES, HOST_ICS } from '../../../v2Containers/Rcs/constants';
 
 const updateHandler = jest.fn();
@@ -27,6 +29,7 @@ const initializeComponent = (
     text: d.displayText ?? d.text ?? '',
     phoneNumber: d.phoneNumber ?? '',
     url: d.url ?? '',
+    urlType: d.urlType,
     postback: d.postback ?? '',
     isSaved: d.isSaved ?? false,
   }));
@@ -551,6 +554,34 @@ describe('CapActionButton', () => {
     expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
   });
 
+  it('should disable save for a dynamic-URL CTA still holding the unresolved {{1}} placeholder', () => {
+    const initial = {
+      index: 0,
+      type: RCS_BUTTON_TYPES.CTA,
+      text: 'Visit here',
+      url: `https://example.com${DYNAMIC_URL_SUFFIX}`,
+      urlType: RCS_CTA_URL_TYPE.DYNAMIC,
+      postback: 'Visit here',
+      isSaved: false,
+    };
+    initializeComponent([initial]);
+    expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
+  });
+
+  it('should enable save for a dynamic-URL CTA once the placeholder has been replaced with a real tag', () => {
+    const initial = {
+      index: 0,
+      type: RCS_BUTTON_TYPES.CTA,
+      text: 'Visit here',
+      url: 'https://example.com{{first_name}}',
+      urlType: RCS_CTA_URL_TYPE.DYNAMIC,
+      postback: 'Visit here',
+      isSaved: false,
+    };
+    initializeComponent([initial]);
+    expect(screen.getByRole('button', { name: /save/i })).not.toBeDisabled();
+  });
+
   it('should render edit and delete icons in edit mode (renderedContent)', () => {
     const button = {
       index: 1,

package/v2Components/CommonTestAndPreview/index.js

@@ -37,6 +37,8 @@ import {
   buildSyntheticSmsMustacheTags,
   normalizeRcsTestCardMedia,
   mapRcsSuggestionForTestMeta,
+  getRcsPrimaryTagExtractionText,
+  mergeSyntheticMustacheTags,
 } from './utils';
 import AddTestCustomerButton from './AddTestCustomer';
 import ExistingCustomerModal from './ExistingCustomerModal';
@@ -574,7 +576,7 @@ const CommonTestAndPreview = (props) => {
     }
     const hasFallbackSmsBody = !!(smsFallbackContent?.templateContent || smsFallbackContent?.content);
     if (channel === CHANNELS.RCS && hasFallbackSmsBody) {
-      const rcsPrimaryTags = extractedTags ?? [];
+      const rcsPrimaryTags = mergeSyntheticMustacheTags(extractedTags, getRcsPrimaryTagExtractionText(formData));
       const fallbackSmsTextForTags = smsFallbackTextForTagExtraction ?? '';
       const fallbackSmsTagRows = smsTemplateHasMustacheTags(fallbackSmsTextForTags)
         ? (smsFallbackExtractedTags?.length > 0
@@ -585,11 +587,15 @@ const CommonTestAndPreview = (props) => {
       if (mergedRcsAndFallbackTags.length > 0) return mergedRcsAndFallbackTags;
       return buildSyntheticSmsMustacheTags(fallbackSmsTextForTags);
     }
+    if (channel === CHANNELS.RCS) {
+      return mergeSyntheticMustacheTags(extractedTags, getRcsPrimaryTagExtractionText(formData));
+    }
     return extractedTags ?? [];
   }, [
     channel,
     extractedTags,
     getCurrentContent,
+    formData,
     smsFallbackContent,
     smsFallbackExtractedTags,
     smsFallbackTextForTagExtraction,
@@ -665,10 +671,17 @@ const CommonTestAndPreview = (props) => {
     let resolvedText = text;
 
     // Replace each tag with its custom value
-    Object.keys(tagValues).forEach((tagPath) => {
+    Object.keys(tagValues || {}).forEach((tagPath) => {
       const tagName = tagPath.split('.').pop(); // Get the actual tag name from the path
-      const tagRegex = new RegExp(`{{${tagName}}}`, 'g');
-      resolvedText = resolvedText.replace(tagRegex, tagValues[tagPath] || `{{${tagName}}}`);
+      // Escape regex metacharacters in tagName (arbitrary JSON key) so it can't break the pattern.
+      const escapedTagName = tagName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      const tagRegex = new RegExp(`{{${escapedTagName}}}`, 'g');
+      const rawValue = tagValues[tagPath];
+      // Preserve legitimate falsy values (0, false); only an unset/blank slot keeps the placeholder.
+      const hasValue = rawValue !== null && rawValue !== undefined && rawValue !== '';
+      const replacement = hasValue ? String(rawValue) : `{{${tagName}}}`;
+      // Replacer function (not a string) so `$&`/`$1`-style sequences in the value are inserted literally.
+      resolvedText = resolvedText.replace(tagRegex, () => replacement);
     });
 
     return resolvedText;
@@ -1056,7 +1069,7 @@ const CommonTestAndPreview = (props) => {
   const buildRcsTestMessagePayload = (
     creativeFormData,
     _unusedEditorContentString,
-    _customValuesObj,
+    customValuesObj,
     deliverySettingsOverride,
     basePayload,
     _rcsTestMetaExtras = {},
@@ -1071,7 +1084,9 @@ const CommonTestAndPreview = (props) => {
     } else if (rcsContentFromForm?.cardContent) {
       rcsCardPayloadList = [rcsContentFromForm.cardContent];
     }
-    // Raw title/description with template tags; SMS fallback uses tagged template fields (pickFirst…).
+    // Title/description/suggestion text carry {{tag}} placeholders; resolve them against the
+    // user's test values here, same as every other channel (see resolveTagsInText usage below
+    // for SMS/EMAIL/WHATSAPP) — otherwise the test send goes out with literal tags unresolved.
     const cardContentForTestMetaApi = rcsCardPayloadList.map((singleRcsCardPayload) => {
       const normalizedCardMediaForTestApi = singleRcsCardPayload?.media
         ? normalizeRcsTestCardMedia(singleRcsCardPayload.media)
@@ -1079,11 +1094,25 @@ const CommonTestAndPreview = (props) => {
       const suggestionsFromCard = Array.isArray(singleRcsCardPayload?.suggestions)
         ? singleRcsCardPayload.suggestions
         : [];
-      const suggestionsFormattedForTestMeta = suggestionsFromCard.map((suggestionItem, index) =>
-        mapRcsSuggestionForTestMeta(suggestionItem, index));
+      const suggestionsFormattedForTestMeta = suggestionsFromCard.map((suggestionItem, index) => mapRcsSuggestionForTestMeta(
+        {
+          ...suggestionItem,
+          text: resolveTagsInText(
+            suggestionItem?.text != null ? String(suggestionItem.text) : '',
+            customValuesObj,
+          ),
+        },
+        index,
+      ));
       return {
-        title: singleRcsCardPayload?.title ?? '',
-        description: singleRcsCardPayload?.description ?? '',
+        title: resolveTagsInText(
+          singleRcsCardPayload?.title != null ? String(singleRcsCardPayload.title) : '',
+          customValuesObj,
+        ),
+        description: resolveTagsInText(
+          singleRcsCardPayload?.description != null ? String(singleRcsCardPayload.description) : '',
+          customValuesObj,
+        ),
         mediaType: singleRcsCardPayload?.mediaType ?? MEDIA_TYPE_TEXT,
         ...(normalizedCardMediaForTestApi && { media: normalizedCardMediaForTestApi }),
         ...(suggestionsFormattedForTestMeta.length > 0 && {
@@ -3161,7 +3190,8 @@ const CommonTestAndPreview = (props) => {
    * Apply tag extraction when content comes from RCS + SMS fallback (no API call).
    */
   const applyRcsSmsFallbackTagExtraction = () => {
-    const rcsPrimaryCategorized = categorizeTags(extractedTags ?? []);
+    const rcsPrimaryTagTree = mergeSyntheticMustacheTags(extractedTags, getRcsPrimaryTagExtractionText(formData));
+    const rcsPrimaryCategorized = categorizeTags(rcsPrimaryTagTree);
     const fallbackSmsResolvedForTags = smsFallbackTextForTagExtraction ?? '';
     let fallbackSmsTagTree = smsFallbackExtractedTags?.length > 0
       ? smsFallbackExtractedTags
@@ -3187,8 +3217,7 @@ const CommonTestAndPreview = (props) => {
    */
   useEffect(() => {
     if (!show) return;
-    const hasFallbackSmsTemplate = !!(smsFallbackContent?.templateContent || smsFallbackContent?.content);
-    if (channel === CHANNELS.RCS && hasFallbackSmsTemplate) {
+    if (channel === CHANNELS.RCS) {
       applyRcsSmsFallbackTagExtraction();
       return;
     }
@@ -3204,8 +3233,8 @@ const CommonTestAndPreview = (props) => {
     setOptionalTags(optional);
     setTagsExtracted(hasPersonalizationTags);
     setCustomValues((prev) => mergeCustomValuesWithTagKeys(prev, { required, optional }, { required: [], optional: [] }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- applyRcsSmsFallbackTagExtraction closes over latest extractedTags/smsFallbackExtractedTags
-  }, [show, extractedTags, channel, smsFallbackContent, smsFallbackExtractedTags, getCurrentContent, smsFallbackTextForTagExtraction]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- applyRcsSmsFallbackTagExtraction closes over latest extractedTags/smsFallbackExtractedTags/formData
+  }, [show, extractedTags, channel, formData, smsFallbackContent, smsFallbackExtractedTags, getCurrentContent, smsFallbackTextForTagExtraction]);
 
   /**
    * Get content to run tag extraction on (channel-specific).