@capillarytech/creatives-library 9.0.34 → 9.0.35-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.34",
+  "version": "9.0.35-alpha.1",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

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,
@@ -3184,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
@@ -3210,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;
     }
@@ -3227,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/SmsFallback/index.js

@@ -747,11 +747,17 @@ export function SmsFallback({
       const base = uploadedTemplate.versions?.base || {};
       const content = base.template_message || base['sms-editor'] || '';
       const templateName = uploadedTemplate.name || base.template_name || '';
+      // DLT-registered sender IDs for this newly-created template — same field
+      // buildFallbackDataFromTemplate reads. Without it, Test & Preview's delivery-settings
+      // filter sees an empty registeredSenderIds and falls back to showing every sender.
+      const registeredSenderIds = Array.isArray(base.header) ? base.header : [];
       if (content || templateName) {
         onChange({
+          smsTemplateId: base.template_id || uploadedTemplate._id || '',
           templateName,
           content,
           templateContent: content,
+          registeredSenderIds,
           unicodeValidity: typeof base['unicode-validity'] === JS_TYPE_BOOLEAN
             ? base['unicode-validity']
             : true,

package/v2Containers/CreativesContainer/index.js

@@ -91,6 +91,7 @@ import {EXTERNAL_URL, SITE_URL, WEBPUSH_MEDIA_TYPES} from '../WebPush/constants'
 import { IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
 import { RCS_STATUSES, contentType as RCS_CONTENT_TYPE, EMBEDDED } from '../Rcs/constants';
 import { pickRcsCardVarMappedEntries } from '../Rcs/rcsLibraryHydrationUtils';
+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';
@@ -1444,18 +1445,26 @@ export class Creatives extends React.Component {
           const firstCardFromSubmit = Array.isArray(cardContentFromSubmit)
             ? cardContentFromSubmit[0]
             : null;
-          const cardContent = cardContentFromSubmit;
+          const cardVarMappedFromFirstRcsCard =
+            firstCardFromSubmit?.cardVarMapped != null
+            && typeof firstCardFromSubmit.cardVarMapped === 'object'
+              ? pickRcsCardVarMappedEntries(firstCardFromSubmit.cardVarMapped)
+              : null;
+          // Campaigns/consumers should see the literal tag (e.g. `{{first_name}}`) in title/description,
+          // not the internal numeric slot placeholder (`{{1}}`) — that slot scheme is only meaningful
+          // to this editor's own reopen/hydration (see getFormData, which persists raw cardContentFromSubmit
+          // separately for that round-trip and is unaffected by this).
+          const cardContent = mapRcsCardContentForConsumerWithResolvedTags(
+            cardContentFromSubmit,
+            cardVarMappedFromFirstRcsCard,
+            isFullModeForRcsConsumerPayload,
+          );
           const rcsContent = {
             contentType,
             cardType,
             cardSettings,
             cardContent,
           };
-          const cardVarMappedFromFirstRcsCard =
-            firstCardFromSubmit?.cardVarMapped != null
-            && typeof firstCardFromSubmit.cardVarMapped === 'object'
-              ? pickRcsCardVarMappedEntries(firstCardFromSubmit.cardVarMapped)
-              : null;
           const includeRootRcsCardVarMappedOnConsumerPayload =
             cardVarMappedFromFirstRcsCard
             && Object.keys(cardVarMappedFromFirstRcsCard).length > 0

package/v2Containers/CreativesContainer/tests/index.test.js

@@ -267,6 +267,59 @@ describe('Test SlideBoxContent container', () => {
     expect(instance.state.templateData.rcsCardVarMapped).toEqual(cardVarMapped);
   });
 
+  it('RCS getCreativesData sends the literal tag (not the numeric slot) in title/description to consumers', async () => {
+    renderedComponent = shallowWithIntl(
+      <Creatives
+        loyaltyMetaData={loyaltyMetaData}
+        Templates={rcsTemplates}
+        channel="RCS"
+        slidBoxContent="editTemplate"
+        templateData={rcsEditTemplateData}
+        handleCloseCreatives={handleCloseCreatives}
+        getCreativesData={getCreativesData}
+        isFullMode={false}
+        templateActions={{
+          getCdnTransformationConfig,
+        }}
+      />,
+    );
+    renderedComponent.instance().onEditTemplate();
+
+    const mockValue = {
+      validity: true,
+      value: {
+        name: 'rcs_creative_name',
+        type: 'RCS',
+        versions: {
+          base: {
+            content: {
+              RCS: {
+                rcsContent: {
+                  contentType: 'RICHCARD',
+                  cardType: 'STANDALONE',
+                  cardSettings: {},
+                  cardContent: [{
+                    title: 'Hi {{1}}',
+                    description: 'Visit {{2}}',
+                    cardVarMapped: { 1: '{{first_name}}', 2: '{{loyalty_points}}' },
+                  }],
+                },
+                smsFallBackContent: {},
+              },
+            },
+          },
+        },
+      },
+    };
+
+    renderedComponent.instance().getFormData(mockValue);
+    await tick();
+
+    const sentCardContent = getCreativesData.mock.calls[0][0].rcsContent.cardContent[0];
+    expect(sentCardContent.title).toBe('Hi {{first_name}}');
+    expect(sentCardContent.description).toBe('Visit {{loyalty_points}}');
+  });
+
   it('Text getCreatives data for rcs, data from creatives done to campaigns', async () => {
     renderFunction('SMS', 'editTemplate', smsTemplates, smsEditTemplateData );
     renderedComponent.instance().onEditTemplate();

package/v2Containers/Rcs/carouselUtils.js

@@ -19,6 +19,9 @@ import { sanitizeCardVarMappedValue } from './utils';
 
 const getVarNameFromToken = (token = '') => token.replace(/^\{\{|\}\}$/g, '');
 
+export const getCarouselVarMapKey = (cardIndex, varName) =>
+  (cardIndex === 0 ? varName : `c${cardIndex}::${varName}`);
+
 export const getCarouselImageAssetIndex = (cardIndex) =>
   RCS_CAROUSEL_ASSET_INDEX_BASE + (cardIndex * 3);
 export const getCarouselVideoAssetIndex = (cardIndex) =>
@@ -142,26 +145,22 @@ export const getCarouselDescriptionCharacterCount = (carouselData, cardIndex) =>
   return descriptionText ? descriptionText.length : 0;
 };
 
-/** Preview (TestAndPreviewSlidebox / listing preview): resolve each card's title/desc through `resolveTemplateWithMap`. */
-export const buildCarouselCardsForPreview = (cards = [], { isFullMode, rcsVarRegex, resolveTemplateWithMap }) => {
-  // Track cumulative variable slot index across all cards so resolveTemplateWithMap
-  // uses the correct globalSlot → slotKey for each token (e.g. card 1's {{3}} needs
-  // slotOffset=2 so slotKey becomes "3", not "1").
-  let slotOffset = 0;
-  return (cards || []).map((card = {}) => {
+/**
+ * Preview (TestAndPreviewSlidebox / listing preview): resolve each card's title/desc through
+ * `resolveCarouselTemplateWithMap(str, cardIndex)` — a per-card-scoped resolver (see
+ * `getCarouselVarMapKey`). Each card's variables are independent, so no cross-card slot offset is
+ * needed (unlike the old flat/global-slot scheme this replaced).
+ */
+export const buildCarouselCardsForPreview = (cards = [], { isFullMode, resolveCarouselTemplateWithMap }) =>
+  (cards || []).map((card = {}, cardIndex) => {
     const rawTitle = card.title || '';
     const rawDesc = card.description || '';
-    const titleVarCount = (rawTitle.match(rcsVarRegex) || []).length;
-    const descVarCount = (rawDesc.match(rcsVarRegex) || []).length;
     const resolvedTitle = !isFullMode
-      ? resolveTemplateWithMap(rawTitle, slotOffset)
+      ? resolveCarouselTemplateWithMap(rawTitle, cardIndex)
       : rawTitle;
     const resolvedDesc = !isFullMode
-      ? resolveTemplateWithMap(rawDesc, slotOffset + titleVarCount)
+      ? resolveCarouselTemplateWithMap(rawDesc, cardIndex)
       : rawDesc;
-    if (!isFullMode) {
-      slotOffset += titleVarCount + descVarCount;
-    }
     const videoThumb = card.thumbnailSrc || card.videoAsset?.videoThumbnail || '';
     const videoSrc = card.videoAsset?.videoSrc || '';
     return {
@@ -174,7 +173,6 @@ export const buildCarouselCardsForPreview = (cards = [], { isFullMode, rcsVarReg
       suggestions: card.suggestions || [],
     };
   });
-};
 
 /** Payload (create/edit RCS template): build `cardContent` for the carousel case. */
 export const buildCarouselCardContentForPayload = (carouselData, {
@@ -182,7 +180,7 @@ export const buildCarouselCardContentForPayload = (carouselData, {
   cardVarMapped,
   selectedCarouselHeight,
   rcsVarRegex,
-}) => (carouselData || []).map((card = {}) => {
+}) => (carouselData || []).map((card = {}, cardIndex) => {
   const cardMediaType = card.mediaType;
   const isCardVideo = cardMediaType === RCS_MEDIA_TYPES.VIDEO;
   const isCardImage = cardMediaType === RCS_MEDIA_TYPES.IMAGE;
@@ -201,7 +199,8 @@ export const buildCarouselCardContentForPayload = (carouselData, {
     cardVarTokens.forEach((token) => {
       const varName = getVarNameFromToken(token);
       if (!varName) return;
-      cardVarMappedForCard[varName] = sanitizeCardVarMappedValue(cardVarMapped?.[varName] ?? '');
+      const scopedValue = cardVarMapped?.[getCarouselVarMapKey(cardIndex, varName)] ?? '';
+      cardVarMappedForCard[varName] = sanitizeCardVarMappedValue(scopedValue);
     });
   }
   return {

package/v2Containers/Rcs/components/CarouselCard.js

@@ -159,7 +159,7 @@ const CarouselCard = ({
       />
       <CapRow className="rcs_text_area_wrapper">
         {(isEditFlow || !isFullMode) ? (
-          renderEditMessage(card.title || '')
+          renderEditMessage(card.title || '', cardIndex)
         ) : (
           <CapInput
             value={card.title || ''}
@@ -211,7 +211,7 @@ const CarouselCard = ({
       />
       <CapRow className="rcs_text_area_wrapper">
         {(isEditFlow || !isFullMode) ? (
-          renderEditMessage(card.description || '')
+          renderEditMessage(card.description || '', cardIndex)
         ) : (
           <TextArea
             autosize={{ minRows: 3, maxRows: 5 }}

package/v2Containers/Rcs/constants.js

@@ -79,7 +79,7 @@ export const RCS_NUMERIC_VAR_TOKEN_REGEX = /\{\{(\d+)\}\}/g;
 /** `cardVarMapped` slot keys that are numeric only (legacy ordering). */
 export const RCS_NUMERIC_VAR_NAME_REGEX = /^\d+$/;
 /** Semantic Liquid-style keys on RCS `cardVarMapped` (same class as `{{…}}` inner names in the editor). */
-export const RCS_CARD_VAR_MAPPED_SEMANTIC_KEY_REGEX = /^[\w.]+$/;
+export const RCS_CARD_VAR_MAPPED_SEMANTIC_KEY_REGEX = /^[\w.()]+$/;
 /** Escape all special RegExp characters in an arbitrary string before using it in `new RegExp(...)`. */
 export const REGEX_SPECIAL_CHARS_ESCAPE_PATTERN = /[-/\\^$*+?.()|[\]{}]/g;
 /** Entire string is wrapped in `{{…}}` mustache delimiters (allows any content including `}`). */