@capillarytech/creatives-library 8.0.329 → 8.0.330-alpha.1

package/v2Containers/Rcs/tests/utils.test.js

@@ -7,6 +7,7 @@ import {
   getTemplateStatusType,
   normalizeCardVarMapped,
   coalesceCardVarMappedToTemplate,
+  getRcsSemanticVarNamesSpanningTitleAndDesc,
   resolveCardVarMappedSlotValue,
   isRcsTextOnlyCardMediaType,
   mapRcsCardContentForConsumerWithResolvedTags,
@@ -40,38 +41,26 @@ describe('RCS utils - renderRcsSuggestionsPreview', () => {
     },
   };
 
-  it('renders divider and QUICK_REPLY suggestion with small-link icon', () => {
+  const renderWithSuggestion = (buttonType, text) => {
     const template = JSON.parse(JSON.stringify(templateBase));
     template.versions.base.content[RCS].rcsContent.cardContent[0].suggestions = [
-      { type: RCS_BUTTON_TYPES.QUICK_REPLY, text: 'Reply' },
+      { type: buttonType, text },
     ];
     render(getRCSContent(template));
-    expect(document.querySelectorAll('.whatsapp-divider').length).toBeGreaterThan(0);
-    const labels = document.querySelectorAll('.rcs-cta-preview');
-    expect(labels.length).toBe(1);
-    expect(labels[0].textContent).toContain('Reply');
-  });
-
-  it('renders CTA suggestion with launch icon', () => {
-    const template = JSON.parse(JSON.stringify(templateBase));
-    template.versions.base.content[RCS].rcsContent.cardContent[0].suggestions = [
-      { type: RCS_BUTTON_TYPES.CTA, text: 'Visit' },
-    ];
-    render(getRCSContent(template));
-    const labels = document.querySelectorAll('.rcs-cta-preview');
-    expect(labels.length).toBe(1);
-    expect(labels[0].textContent).toContain('Visit');
-  });
+  };
 
-  it('renders PHONE_NUMBER suggestion with call icon', () => {
-    const template = JSON.parse(JSON.stringify(templateBase));
-    template.versions.base.content[RCS].rcsContent.cardContent[0].suggestions = [
-      { type: RCS_BUTTON_TYPES.PHONE_NUMBER, text: 'Call' },
-    ];
-    render(getRCSContent(template));
+  it.each([
+    [RCS_BUTTON_TYPES.QUICK_REPLY, 'Reply', true],
+    [RCS_BUTTON_TYPES.CTA, 'Visit', false],
+    [RCS_BUTTON_TYPES.PHONE_NUMBER, 'Call', false],
+  ])('renders %s suggestion with expected label', (buttonType, text, expectDivider) => {
+    renderWithSuggestion(buttonType, text);
+    if (expectDivider) {
+      expect(document.querySelectorAll('.whatsapp-divider').length).toBeGreaterThan(0);
+    }
     const labels = document.querySelectorAll('.rcs-cta-preview');
     expect(labels.length).toBe(1);
-    expect(labels[0].textContent).toContain('Call');
+    expect(labels[0].textContent).toContain(text);
   });
 
   it('renders only divider for unknown suggestion type', () => {
@@ -96,16 +85,17 @@ describe('RCS utils - renderRcsSuggestionsPreview', () => {
 
 describe('RCS utils', () => {
   describe('getRCSContent', () => {
+    /** Single place for snapshot serialization — keeps test bodies focused on template setup. */
+    const expectGetRCSContentSnapshot = (template) => {
+      expect(renderer.create(getRCSContent(template)).toJSON()).toMatchSnapshot();
+    };
+
     it('renders RCS content with image and CTA suggestion', () => {
-      const template = mockData.editData1.templateDetails;
-      const tree = renderer.create(getRCSContent(template)).toJSON();
-      expect(tree).toMatchSnapshot();
+      expectGetRCSContentSnapshot(mockData.editData1.templateDetails);
     });
 
     it('renders RCS content with no media', () => {
-      const template = mockData.editData3.templateDetails;
-      const tree = renderer.create(getRCSContent(template)).toJSON();
-      expect(tree).toMatchSnapshot();
+      expectGetRCSContentSnapshot(mockData.editData3.templateDetails);
     });
 
     it('renders RCS content with multiple suggestion types', () => {
@@ -115,19 +105,212 @@ describe('RCS utils', () => {
         { type: RCS_BUTTON_TYPES.CTA, text: 'URL Action' },
         { type: RCS_BUTTON_TYPES.PHONE_NUMBER, text: 'Call Now' },
       ];
-      const tree = renderer.create(getRCSContent(template)).toJSON();
-      expect(tree).toMatchSnapshot();
+      expectGetRCSContentSnapshot(template);
     });
 
     it('renders RCS content with missing cardContent', () => {
-      const template = { versions: { base: { content: { RCS: { rcsContent: {} } } } } };
-      const tree = renderer.create(getRCSContent(template)).toJSON();
-      expect(tree).toMatchSnapshot();
+      expectGetRCSContentSnapshot({ versions: { base: { content: { RCS: { rcsContent: {} } } } } });
     });
 
     it('renders RCS content with empty template', () => {
-      const tree = renderer.create(getRCSContent({})).toJSON();
-      expect(tree).toMatchSnapshot();
+      expectGetRCSContentSnapshot({});
+    });
+
+    it('renders RCS carousel listing preview when cardType is carousel', () => {
+      const template = JSON.parse(JSON.stringify(mockData.editData1.templateDetails));
+      const rcsContent = template.versions.base.content.RCS.rcsContent;
+      rcsContent.cardType = 'CAROUSEL';
+      rcsContent.cardContent = [
+        {
+          title: 'Card1',
+          description: 'Desc1',
+          media: { mediaUrl: 'https://example.com/1.png' },
+          suggestions: [],
+        },
+        {
+          title: 'Card2',
+          description: 'Desc2',
+          media: { mediaUrl: 'https://example.com/2.png' },
+          suggestions: [],
+        },
+        {
+          title: 'Card3',
+          description: 'Desc3',
+          media: { mediaUrl: 'https://example.com/3.png' },
+          suggestions: [],
+        },
+        {
+          title: 'Card4',
+          description: 'Desc4',
+          media: { mediaUrl: 'https://example.com/4.png' },
+          suggestions: [],
+        },
+      ];
+
+      render(getRCSContent(template));
+      // "Peek" shows max 3
+      expect(document.querySelectorAll('.whatsapp-carousel-container').length).toBe(3);
+      expect(document.querySelectorAll('.scroll-container').length).toBeGreaterThan(0);
+    });
+
+    const carouselTemplate = (cardContent) => ({
+      versions: {
+        base: {
+          content: {
+            [RCS]: {
+              rcsContent: {
+                cardType: 'carousel',
+                cardContent,
+              },
+            },
+          },
+        },
+      },
+    });
+
+    const carouselSecondCardFiller = {
+      title: 'B',
+      description: 'D',
+      media: { mediaUrl: 'https://example.com/b.png' },
+      suggestions: [],
+    };
+
+    it('carousel: video card with thumbnailUrl uses thumbnail (not placeholder)', () => {
+      const template = carouselTemplate([
+        {
+          title: 'Vid',
+          description: 'With thumb',
+          media: {
+            mediaType: 'VIDEO',
+            mediaUrl: 'https://example.com/video.mp4',
+            thumbnailUrl: 'https://example.com/poster.jpg',
+          },
+          suggestions: [],
+        },
+        carouselSecondCardFiller,
+      ]);
+      render(getRCSContent(template));
+      expect(document.querySelector('.rcs-video-preview-placeholder')).toBeFalsy();
+      const firstImg = document.querySelector('.whatsapp-carousel-card .whatsapp-image');
+      expect(firstImg).toBeTruthy();
+      expect(firstImg.getAttribute('src')).toBe('https://example.com/poster.jpg');
+    });
+
+    it('carousel: shows video preview placeholder when VIDEO has mediaUrl but no thumbnail (no img src to mp4)', () => {
+      const template = carouselTemplate([
+        {
+          title: 'Clip',
+          description: 'No thumb',
+          media: {
+            mediaType: 'VIDEO',
+            mediaUrl: 'https://example.com/video.mp4',
+          },
+          suggestions: [],
+        },
+        carouselSecondCardFiller,
+      ]);
+      render(getRCSContent(template));
+      expect(document.querySelector('.rcs-video-preview-placeholder')).toBeTruthy();
+      expect(document.querySelector('.rcs-video-preview-label')?.textContent).toContain('Video preview');
+    });
+
+    it('carousel: uses whatsapp-message-without-media when card has no image/video URL', () => {
+      const template = carouselTemplate([
+        {
+          title: 'Text only',
+          description: 'No media',
+          media: {},
+          suggestions: [],
+        },
+        {
+          title: 'Second',
+          description: '',
+          suggestions: [],
+        },
+      ]);
+      render(getRCSContent(template));
+      const withoutMedia = document.querySelectorAll('.whatsapp-message-without-media');
+      expect(withoutMedia.length).toBeGreaterThan(0);
+    });
+
+    it('carousel: body includes description with newline when description is set', () => {
+      const template = carouselTemplate([
+        {
+          title: 'Head',
+          description: 'Tail line',
+          media: { mediaUrl: 'https://example.com/x.png' },
+          suggestions: [],
+        },
+        {
+          title: 'Y',
+          description: 'Z',
+          media: { mediaUrl: 'https://example.com/y.png' },
+          suggestions: [],
+        },
+      ]);
+      render(getRCSContent(template));
+      const bodies = document.querySelectorAll('.whatsapp-carousel-body');
+      expect(bodies[0].textContent).toContain('Head');
+      expect(bodies[0].textContent).toContain('Tail line');
+    });
+
+    it('carousel: body handles missing title and empty description', () => {
+      const template = carouselTemplate([
+        {
+          description: '',
+          media: { mediaUrl: 'https://example.com/x.png' },
+          suggestions: [],
+        },
+        {
+          title: 'Only title',
+          media: { mediaUrl: 'https://example.com/y.png' },
+          suggestions: [],
+        },
+      ]);
+      render(getRCSContent(template));
+      const bodies = document.querySelectorAll('.whatsapp-carousel-body');
+      expect(bodies[0].textContent.trim()).toBe('');
+      expect(bodies[1].textContent).toContain('Only title');
+    });
+
+    it('carousel: renders per-card suggestions via renderRcsSuggestionsPreview', () => {
+      const template = carouselTemplate([
+        {
+          title: 'C1',
+          description: 'D1',
+          media: { mediaUrl: 'https://example.com/1.png' },
+          suggestions: [{ type: RCS_BUTTON_TYPES.CTA, text: 'Go' }],
+        },
+        {
+          title: 'C2',
+          description: 'D2',
+          media: { mediaUrl: 'https://example.com/2.png' },
+          suggestions: [],
+        },
+      ]);
+      render(getRCSContent(template));
+      expect(document.querySelectorAll('.rcs-cta-preview').length).toBeGreaterThanOrEqual(1);
+      expect(Array.from(document.querySelectorAll('.rcs-cta-preview')).some((el) => el.textContent.includes('Go'))).toBe(true);
+    });
+
+    it('carousel: does not render suggestion block when suggestions missing or not an array', () => {
+      const template = carouselTemplate([
+        {
+          title: 'A',
+          description: 'B',
+          media: { mediaUrl: 'https://example.com/a.png' },
+        },
+        {
+          title: 'C',
+          description: 'D',
+          media: { mediaUrl: 'https://example.com/c.png' },
+          suggestions: null,
+        },
+      ]);
+      render(getRCSContent(template));
+      const firstCard = document.querySelectorAll('.whatsapp-carousel-card')[0];
+      const dividersInFirst = firstCard.querySelectorAll('.whatsapp-divider');
+      expect(dividersInFirst.length).toBe(0);
     });
   });
 
@@ -215,7 +398,39 @@ describe('RCS utils', () => {
     });
   });
 
+  describe('getRcsSemanticVarNamesSpanningTitleAndDesc', () => {
+    it('returns names that appear in both title and description', () => {
+      const set = getRcsSemanticVarNamesSpanningTitleAndDesc(
+        'Hello {{adv}}',
+        'Body {{adv}} x {{other}}',
+        rcsVarRegex,
+      );
+      expect(Array.from(set).sort()).toEqual(['adv']);
+    });
+
+    it('is empty when the same name is only repeated in the title', () => {
+      const set = getRcsSemanticVarNamesSpanningTitleAndDesc(
+        '{{user_name}} and {{user_name}}',
+        'Hi',
+        rcsVarRegex,
+      );
+      expect(set.size).toBe(0);
+    });
+  });
+
   describe('coalesceCardVarMappedToTemplate', () => {
+    it('does not copy a shared semantic value into the second slot when the tag spans title and description', () => {
+      const out = coalesceCardVarMappedToTemplate(
+        { adv: 'shared' },
+        'T {{adv}}',
+        'D {{adv}}',
+        rcsVarRegex,
+      );
+      expect(out[1]).toBe('shared');
+      expect(out[2]).toBe('');
+      expect(out.adv).toBe('shared');
+    });
+
     it('maps slot 1 to first token name from title', () => {
       expect(
         coalesceCardVarMappedToTemplate(
@@ -332,6 +547,24 @@ describe('RCS utils', () => {
         ),
       ).toBe('{{loyalty_points}}');
     });
+
+    it('omitSemanticFallback: duplicate title+desc tag does not read shared semantic for either slot', () => {
+      expect(
+        resolveCardVarMappedSlotValue({ adv: '{{adv}}', 1: '', 2: '' }, 'adv', 0, false, true),
+      ).toBe('');
+      expect(
+        resolveCardVarMappedSlotValue({ adv: '{{adv}}', 1: 'A', 2: 'B' }, 'adv', 0, false, true),
+      ).toBe('A');
+      expect(
+        resolveCardVarMappedSlotValue({ adv: '{{adv}}', 1: 'A', 2: 'B' }, 'adv', 1, false, true),
+      ).toBe('B');
+    });
+
+    it('omitSemanticFallback: cleared semantic does not force empty when numeric slot has a value', () => {
+      expect(
+        resolveCardVarMappedSlotValue({ adv: '', 1: 'first', 2: 'second' }, 'adv', 1, false, true),
+      ).toBe('second');
+    });
   });
 
   describe('mapRcsCardContentForConsumerWithResolvedTags', () => {
@@ -374,6 +607,11 @@ describe('RCS utils', () => {
       expect(out[0].title).toBe('Hi {{customer_name}}');
       expect(out[0].description).toBe('Pts {{loyalty_points}}');
     });
+
+    it('passes through null or non-object items in the card array unchanged', () => {
+      const out = mapRcsCardContentForConsumerWithResolvedTags([null, 'string', 42], {}, false);
+      expect(out).toEqual([null, 'string', 42]);
+    });
   });
 
   describe('isRcsTextOnlyCardMediaType', () => {

package/v2Containers/Rcs/utils.js

@@ -22,6 +22,7 @@ import {
   COMBINED_SMS_TEMPLATE_VAR_REGEX,
   isAnyTemplateVarToken,
 } from '../../utils/templateVarUtils';
+import { pickRcsCardVarMappedEntries } from './rcsLibraryHydrationUtils';
 
 export const getRcsStatusType = (status) => {
   switch (status) {
@@ -49,6 +50,13 @@ export const getTemplateStatusType = (templateStatus) => {
   }
 };
 
+/** Localized label for a carousel video thumbnail size (width × height in px). */
+export const formatRcsCarouselVideoThumbnailLabel = (formatMessage, dimensionEntry) => {
+  if (!dimensionEntry) return '';
+  const { width, height } = dimensionEntry;
+  return formatMessage(messages.rcsCarouselVideoThumbnailLabel, { width, height });
+};
+
 /**
  * Global RegExp matching `{{numericVarName}}` in RCS template strings.
  * `numericVarName` is escaped for regex metacharacters.
@@ -130,6 +138,27 @@ export function normalizeCardVarMapped(rawCardVarMapped, orderedTagNames) {
   return normalizedMap;
 }
 
+/**
+ * Semantic names that appear in both title and description (e.g. `{{adv}}` in header and body).
+ * Those slots must not share one semantic `cardVarMapped` key — otherwise VarSegment inputs mirror.
+ */
+export function getRcsSemanticVarNamesSpanningTitleAndDesc(
+  templateTitle,
+  templateDesc,
+  rcsVarRegex,
+) {
+  const getVarNameFromToken = (token = '') => token.replace(RCS_STRIP_MUSTACHE_DELIMITERS_REGEX, '');
+  const titleTokens = templateTitle?.match(rcsVarRegex) ?? [];
+  const descTokens = templateDesc?.match(rcsVarRegex) ?? [];
+  const titleNames = new Set(titleTokens.map(getVarNameFromToken).filter(Boolean));
+  const descNames = new Set(descTokens.map(getVarNameFromToken).filter(Boolean));
+  const spanning = new Set();
+  titleNames.forEach((n) => {
+    if (descNames.has(n)) spanning.add(n);
+  });
+  return spanning;
+}
+
 /**
  * Rebuild `cardVarMapped` so keys match the current title/description tokens (title tokens first,
  * then description), in order. Values are taken from the matching key, else from legacy slot
@@ -140,9 +169,13 @@ export function coalesceCardVarMappedToTemplate(
   templateTitle,
   templateDesc,
   rcsVarRegex,
+  rcsVarRegexParam,
 ) {
   const getVarNameFromToken = (token = '') => token.replace(RCS_STRIP_MUSTACHE_DELIMITERS_REGEX, '');
   const templateVarTokens = [
+    ...(templateTitle?.match(rcsVarRegexParam) ?? []),
+    rcsVarRegexParam,
+    ...(templateDesc?.match(rcsVarRegexParam) ?? []),
     ...(templateTitle?.match(rcsVarRegex) ?? []),
     ...(templateDesc?.match(rcsVarRegex) ?? []),
   ];
@@ -151,15 +184,25 @@ export function coalesceCardVarMappedToTemplate(
   if (!templateVarTokens.length) {
     return { ...lookupSourceMap };
   }
+  const semanticNamesSpanningTitleAndDesc = getRcsSemanticVarNamesSpanningTitleAndDesc(
+    templateTitle,
+    templateDesc,
+    rcsVarRegex,
+  );
   const coalescedMap = { ...lookupSourceMap };
   const seenSemanticVarNames = new Set();
   templateVarTokens.forEach((token, slotIndexZeroBased) => {
     const semanticVarName = getVarNameFromToken(token);
     if (!semanticVarName) return;
     const numericSlotKey = String(slotIndexZeroBased + 1);
+    const isRepeatOfSemanticName = seenSemanticVarNames.has(semanticVarName);
+    const skipSharedSemanticLookup =
+      isRepeatOfSemanticName && semanticNamesSpanningTitleAndDesc.has(semanticVarName);
     let valueFromSource = lookupSourceMap[numericSlotKey];
     if (valueFromSource === undefined || valueFromSource === null) {
-      valueFromSource = lookupSourceMap[semanticVarName];
+      if (!skipSharedSemanticLookup) {
+        valueFromSource = lookupSourceMap[semanticVarName];
+      }
     }
     if (valueFromSource === undefined || valueFromSource === null) {
       valueFromSource = lookupSourceMap[String(slotIndexZeroBased + 1)];
@@ -189,12 +232,17 @@ export function coalesceCardVarMappedToTemplate(
  * When a numeric slot is present but only whitespace / empty (common after hydration), do not
  * treat it as authoritative — fall through to the semantic key so preview and payload match the
  * tag the user selected (e.g. `1: ''` but `promotion_points: '{{newTag}}'`).
+ *
+ * @param {boolean} [omitSemanticFallback=false] When true, do not read `varName` on the map (and do
+ * not apply the early `semanticEmpty` short-circuit). Use when the same semantic name appears in
+ * both title and description so each global slot stays independent.
  */
 export function resolveCardVarMappedSlotValue(
   cardVarMapped,
   varName,
   globalSlotIndexZeroBased,
   isLibraryMode = false,
+  omitSemanticFallback = false,
 ) {
   const varMap = cardVarMapped ?? {};
   const slotKey = String(globalSlotIndexZeroBased + 1);
@@ -205,11 +253,12 @@ export function resolveCardVarMappedSlotValue(
     Object.prototype.hasOwnProperty.call(varMap, slotKey)
     && String(varMap[slotKey] ?? '').trim() !== '';
 
-  if (semanticEmpty && !(isLibraryMode && slotNonEmpty)) {
+  if (semanticEmpty && !(isLibraryMode && slotNonEmpty) && !omitSemanticFallback) {
     return '';
   }
   let numericSlotValue = '';
   if (Object.prototype.hasOwnProperty.call(varMap, slotKey)) {
+/** Text-only RCS card: editor shows a single "Text message" field (description); title row is hidden. */
     numericSlotValue = String(varMap[slotKey] ?? '');
   } else if (Object.prototype.hasOwnProperty.call(varMap, globalSlotIndexZeroBased + 1)) {
     numericSlotValue = String(varMap[globalSlotIndexZeroBased + 1] ?? '');
@@ -217,7 +266,7 @@ export function resolveCardVarMappedSlotValue(
   if (numericSlotValue.trim() !== '') {
     return numericSlotValue;
   }
-  if (Object.prototype.hasOwnProperty.call(varMap, varName)) {
+  if (!omitSemanticFallback && Object.prototype.hasOwnProperty.call(varMap, varName)) {
     return String(varMap[varName] ?? '');
   }
   return '';
@@ -247,6 +296,9 @@ export function resolveRcsCardPreviewStrings(
   const splitTemplateVarStringRcs = (str) => splitTemplateVarString(str, rcsVarRegex);
   const getVarNameFromToken = (token = '') =>
     token.replace(RCS_STRIP_MUSTACHE_DELIMITERS_REGEX, '');
+  const semanticNamesSpanningTitleAndDesc = textOnlyCard
+    ? new Set()
+    : getRcsSemanticVarNamesSpanningTitleAndDesc(title, description, rcsVarRegex);
 
   const resolveTemplateWithMap = (str = '', slotOffset = 0) => {
     if (!str) return '';
@@ -258,11 +310,13 @@ export function resolveRcsCardPreviewStrings(
           const key = getVarNameFromToken(elem);
           const globalSlot = slotOffset + varOrdinal;
           varOrdinal += 1;
+          const omitSemantic = semanticNamesSpanningTitleAndDesc.has(key);
           const v = resolveCardVarMappedSlotValue(
             cardVarMapped,
             key,
             globalSlot,
             isLibraryMode,
+            omitSemantic,
           );
           if (v == null || String(v).trim() === '') return elem;
           return String(v);
@@ -285,7 +339,8 @@ export function resolveRcsCardPreviewStrings(
 /**
  * Campaign consumer payload: replace each card's `title` / `description` with VarSegment-resolved
  * tag strings (same rules as {@link resolveRcsCardPreviewStrings}). Root `rcsCardVarMapped` merges
- * with per-card `cardVarMapped`; `cardVarMapped` on each card is left unchanged for round-trip.
+ * with per-card `cardVarMapped` for resolution; emitted `cardVarMapped` omits SMS-fallback slot keys
+ * (root/nested merged with {@link pickRcsCardVarMappedEntries} per side).
  */
 export function mapRcsCardContentForConsumerWithResolvedTags(
   cardContentArray,
@@ -304,7 +359,9 @@ export function mapRcsCardContentForConsumerWithResolvedTags(
       card.cardVarMapped != null && typeof card.cardVarMapped === 'object'
         ? card.cardVarMapped
         : {};
-    const merged = { ...rootRecord, ...nested };
+    const rootClean = pickRcsCardVarMappedEntries(rootRecord);
+    const nestedClean = pickRcsCardVarMappedEntries(nested);
+    const merged = { ...rootClean, ...nestedClean };
     const textOnly = isRcsTextOnlyCardMediaType(card.mediaType);
     const { rcsTitle, rcsDesc } = resolveRcsCardPreviewStrings(
       card.title ?? '',
@@ -313,10 +370,12 @@ export function mapRcsCardContentForConsumerWithResolvedTags(
       isLibraryMode,
       textOnly,
     );
+    const { cardVarMapped: _drop, ...cardRest } = card;
     return {
-      ...card,
+      ...cardRest,
       title: rcsTitle,
       description: rcsDesc,
+      ...(Object.keys(nestedClean).length > 0 ? { cardVarMapped: nestedClean } : {}),
     };
   });
 }
@@ -416,6 +475,7 @@ export const getRCSContent = (template) => {
         content: {
           [RCS]: {
             rcsContent: {
+              cardType = '',
               cardContent = [{}],
               cardSettings = {},
             } = {},
@@ -431,8 +491,72 @@ export const getRCSContent = (template) => {
     mediaType,
     suggestions = [],
   } = cardContent[0];
+  const isCarousel =
+    (cardType || '').toString().toLowerCase() === 'carousel' ||
+    (cardContent || []).length > 1;
   const isTextOnlyCard = isRcsTextOnlyCardMediaType(mediaType);
   const mediaPreview = media?.thumbnailUrl ? media.thumbnailUrl : media.mediaUrl;
+
+  const renderCarouselListingPreview = () => {
+    const cards = Array.isArray(cardContent) ? cardContent : [];
+    if (!cards.length) return null;
+    const cardsToShow = cards.slice(0, 3); // enough to show a "peek" of next card
+    return (
+      <div className="scroll-container">
+        {cardsToShow.map((c, idx) => {
+          const m = c?.media || {};
+          const isVideo = (m?.mediaType || '').toString().toUpperCase() === RCS_MEDIA_TYPES.VIDEO;
+          const thumbUrl = m?.thumbnailUrl;
+          const mediaUrl = m?.mediaUrl;
+          // Avoid rendering an <img src="...mp4"> when a video doesn't have a thumbnail.
+          const url = thumbUrl ? thumbUrl : (isVideo ? '' : mediaUrl);
+          return (
+            <div
+              key={`rcs-carousel-listing-${idx}-${url || ''}`}
+              className="whatsapp-carousel-container"
+              role="group"
+            >
+              <div className="whatsapp-carousel-card">
+                {url && (
+                  <CapImage
+                    src={url}
+                    className="whatsapp-image"
+                  />
+                )}
+                {!url && isVideo && (
+                  <div
+                    className="whatsapp-image video-preview rcs-video-preview-placeholder"
+                  >
+                    <CapLabel type="label9" className="rcs-video-preview-label">
+                      Video preview
+                    </CapLabel>
+                  </div>
+                )}
+                <span
+                  className={`${url ? 'whatsapp-message-with-media' : 'whatsapp-message-without-media'}`}
+                >
+                  <CapLabel type="label9" className="whatsapp-carousel-body">
+                    {c?.title || ''}
+                    {c?.description ? `\n${c?.description}` : ''}
+                  </CapLabel>
+                </span>
+                {Array.isArray(c?.suggestions) && c.suggestions.length > 0 && (
+                  <>
+                    {renderRcsSuggestionsPreview(c.suggestions)}
+                  </>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  if (isCarousel) {
+    return renderCarouselListingPreview();
+  }
+
   return (
     <div className="cap-rcs-creatives">
       {mediaPreview && (
@@ -457,4 +581,3 @@ export const getRCSContent = (template) => {
     </div>
   );
 };
-

package/v2Containers/Sms/Edit/index.js

@@ -1091,6 +1091,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 onPreviewContentClicked={this.props.onPreviewContentClicked}
                 onTestContentClicked={this.props.onTestContentClicked}
                 eventContextTags={this.props?.eventContextTags}
+                waitEventContextTags={this.props?.waitEventContextTags}
                 messageDetails={this.props?.messageDetails}
               />
             </CapColumn>
@@ -1131,6 +1132,7 @@ Edit.propTypes = {
   injectedTags: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
   eventContextTags: PropTypes.array,
+  waitEventContextTags: PropTypes.object,
   messageDetails: PropTypes.object,
   showTestAndPreviewSlidebox: PropTypes.bool,
   handleTestAndPreview: PropTypes.func,