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

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).

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

@@ -3561,6 +3561,84 @@ describe('CommonTestAndPreview', () => {
     });
   });
 
+  describe('RCS primary card content synthetic tag fallback', () => {
+    const rcsCardFormData = (description) => ({
+      rcsTitle: '',
+      rcsDesc: description,
+      versions: {
+        base: {
+          content: {
+            RCS: {
+              rcsContent: {
+                cardContent: [{ title: '', description }],
+              },
+            },
+          },
+        },
+      },
+    });
+
+    it('should surface a {{tag}} from RCS card description as a fillable field when the extract-tags API returns nothing (no SMS fallback)', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.RCS}
+            formData={rcsCardFormData('Visit store for offer {{user_id_b64}}')}
+            extractedTags={[]}
+          />
+        </TestWrapper>
+      );
+
+      await waitFor(() => expect(lastLeftPanelContentProps).not.toBeNull());
+
+      const tags = lastLeftPanelContentProps.extractedTags;
+      expect(tags.some((tag) => tag.name === 'user_id_b64')).toBe(true);
+    });
+
+    it('should surface an RCS card tag alongside a merged fallback SMS tag when both are present', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.RCS}
+            formData={rcsCardFormData('Visit store for offer {{user_id_b64}}')}
+            extractedTags={[]}
+            smsFallbackContent={{
+              templateContent: 'Fallback {{name}}',
+              content: 'Fallback {{name}}',
+            }}
+          />
+        </TestWrapper>
+      );
+
+      await waitFor(() => expect(lastLeftPanelContentProps).not.toBeNull());
+
+      const tags = lastLeftPanelContentProps.extractedTags;
+      expect(tags.some((tag) => tag.name === 'user_id_b64')).toBe(true);
+      expect(tags.some((tag) => tag.name === 'name')).toBe(true);
+    });
+
+    it('should not duplicate a tag the extract-tags API already returned for RCS card content', async () => {
+      const apiTags = [{ name: 'user_id_b64', metaData: { userDriven: false }, children: [] }];
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.RCS}
+            formData={rcsCardFormData('Visit store for offer {{user_id_b64}}')}
+            extractedTags={apiTags}
+          />
+        </TestWrapper>
+      );
+
+      await waitFor(() => expect(lastLeftPanelContentProps).not.toBeNull());
+
+      const tags = lastLeftPanelContentProps.extractedTags;
+      expect(tags.filter((tag) => tag.name === 'user_id_b64')).toHaveLength(1);
+    });
+  });
+
   describe('handleDiscardCustomValues — preview reset', () => {
     it('should call updatePreviewRequested when handleDiscardCustomValues is invoked', async () => {
       render(

package/v2Components/CommonTestAndPreview/utils.js

@@ -27,6 +27,40 @@ export const buildSyntheticSmsMustacheTags = (body = '') => {
   }));
 };
 
+/**
+ * Raw RCS primary-card text (title + description across all cards) to scan for `{{…}}` tags.
+ * Mirrors the carousel/standalone branching in prepareTagExtractionPayload's RCS case so both
+ * the extract-tags API payload and the client-side synthetic tag fallback agree on card text.
+ */
+export const getRcsPrimaryTagExtractionText = (formDataObj) => {
+  const rcsCardContentArr =
+    formDataObj?.versions?.base?.content?.RCS?.rcsContent?.cardContent
+    ?? formDataObj?.content?.RCS?.rcsContent?.cardContent;
+  if (Array.isArray(rcsCardContentArr) && rcsCardContentArr.length > 0) {
+    const carouselTagText = rcsCardContentArr
+      .map((card) => `${card.title || ''} ${card.description || ''}`)
+      .join(' ')
+      .trim();
+    if (carouselTagText) return carouselTagText;
+  }
+  return `${formDataObj?.rcsTitle || ''} ${formDataObj?.rcsDesc || ''}`.trim();
+};
+
+/**
+ * Combine tags the extract-tags API returned with tags synthesized client-side from a raw
+ * `{{…}}` scan of `rawText`, so a tag the backend's catalog doesn't recognize (e.g. a reserved
+ * token like `user_id_b64`) still surfaces as a fillable field instead of silently disappearing.
+ * Dedupes by name so API-recognized tags (which carry richer metaData) are never overridden.
+ */
+export const mergeSyntheticMustacheTags = (apiTags = [], rawText = '') => {
+  if (!smsTemplateHasMustacheTags(rawText)) return apiTags ?? [];
+  const existingNames = new Set((apiTags ?? []).map((tag) => tag?.name));
+  const synthetic = buildSyntheticSmsMustacheTags(rawText).filter(
+    (tag) => !existingNames.has(tag.name),
+  );
+  return [...(apiTags ?? []), ...synthetic];
+};
+
 /** RCS createMessageMeta: normalize media shape (mediaUrl, thumbnailUrl, height string). */
 export const normalizeRcsTestCardMedia = (media) => {
   if (!media || typeof media !== 'object') return undefined;

package/v2Components/NavigationBar/index.js

@@ -12,8 +12,10 @@ import { loadItem } from 'services/localStorageApi';
 import { intlShape, injectIntl } from 'react-intl';
 import { withRouter } from 'react-router-dom';
 import { get } from 'lodash';
-import CapNavigation from '@capillarytech/cap-ui-library/CapNavigation';
+import CapNavigation from '@capillarytech/cap-ui-library/CapNavigationSPA';
 import { CAP_WHITE } from '@capillarytech/cap-ui-library/styled/variables';
+import { MFEModuleHeader } from '@capillarytech/cap-ui-utils';
+import { MFE_MODULE_HEADER } from './mfeModuleHeader.config';
 import injectSaga from '../../utils/injectSaga';
 import sagas from './saga';
 import messages from './messages';
@@ -30,12 +32,11 @@ import { CapLeftNavigatioOpenCss, CapLeftNavigationCss } from './style';
 import { EMBEDDED } from './constants';
 
 const CapWrapper = styled.div`
-  position: absolute;
   padding: 0;
   background-color: ${CAP_WHITE};
   width: 100%;
   display: flex;
-  margin-top: ${(props) => props.isEmbedded ? '0px' : '64px'};
+
 
   .sidebar-container {
     margin-right: 10px;
@@ -46,10 +47,8 @@ const CapWrapper = styled.div`
 `;
 
 const ComponentWrapper = styled.div`
-  max-width: 1140px;
-  margin: 0 auto;
   width: 100%;
-  padding: 24px 0;
+  padding: 0;
 `;
 
 export class NavigationBar extends React.Component {
@@ -58,6 +57,7 @@ export class NavigationBar extends React.Component {
     this.state = this.initializeSelectedProduct();
   }
 
+
   initializeSelectedProduct = () => {
     const { location, intl: { formatMessage } } = this.props;
     const { pathname } = location;
@@ -179,6 +179,7 @@ export class NavigationBar extends React.Component {
     const topbarIcons = this.getTopbarIcons(showDocumentationBot);
     const headerOverideCss = leftNavbarExpandedProp ? CapLeftNavigatioOpenCss : CapLeftNavigationCss;
     return (
+      <>
       <CapNavigation
         className="creatives-main-container"
         showContent
@@ -212,7 +213,8 @@ export class NavigationBar extends React.Component {
           </CapWrapper>
         </div>
       </CapNavigation>
-
+        <MFEModuleHeader history={this.props.history} {...MFE_MODULE_HEADER} />
+      </>
     );
   }
 }

package/v2Components/NavigationBar/mfeModuleHeader.config.js

@@ -0,0 +1,16 @@
+// Static, module-specific config for the shared MFE module-header wrapper
+// (MFEModuleHeader). Runtime values (history) are supplied in NavigationBar.
+export const MFE_MODULE_HEADER = {
+  header: {
+    name: 'app.commonUtils.capUiLibrary.navigationSPA.moduleHeader.creatives.default.name',
+    description: 'app.commonUtils.capUiLibrary.navigationSPA.moduleHeader.creatives.default.description',
+    showBorder: false,
+    showSettings: false,
+  },
+  landingRoutes: [
+    '/creatives/ui/v2/',
+    '/creatives/ui/v2',
+    '/v2/',
+    '/v2'
+  ],
+};