@capillarytech/creatives-library 9.0.50-alpha.1 → 9.0.50

package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/ViberPreviewContent.test.js

@@ -200,370 +200,6 @@ describe('ViberPreviewContent', () => {
 
       expect(screen.getByText('Click Here')).toBeTruthy();
     });
-
-    it('should not render button when buttonText has only whitespace', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            messageContent: 'Message',
-            buttonText: '   ',
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelector('.viber-button-base')).toBeFalsy();
-    });
-  });
-
-  describe('Carousel Content', () => {
-    it('should render no content when carousel is selected but cards are empty', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: '',
-                mediaUrl: '',
-                buttons: [
-                  { title: '', action: '' },
-                ],
-              },
-              {
-                text: '   ',
-                mediaUrl: '   ',
-                buttons: [
-                  { title: '   ', action: 'https://example.com/2' },
-                ],
-              },
-            ],
-          },
-        },
-      };
-
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(screen.getByText('No content available')).toBeTruthy();
-    });
-
-    it('should render carousel cards when type is CAROUSEL', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: 'Card 1 text',
-                mediaUrl: 'https://image.url/card1.jpg',
-                buttons: [
-                  { title: 'Button 1', action: 'https://example.com/1' },
-                ],
-              },
-              {
-                text: 'Card 2 text',
-                mediaUrl: 'https://image.url/card2.jpg',
-                buttons: [
-                  { title: 'Button 2', action: 'https://example.com/2' },
-                ],
-              },
-            ],
-          },
-        },
-      };
-
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(screen.getByText('Card 1 text')).toBeTruthy();
-      expect(screen.getByText('Card 2 text')).toBeTruthy();
-      expect(screen.getByText('Button 1')).toBeTruthy();
-      expect(screen.getByText('Button 2')).toBeTruthy();
-    });
-
-    it('should not render empty carousel button placeholder', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: 'Card 1 text',
-                mediaUrl: 'https://image.url/card1.jpg',
-                buttons: [
-                  { title: '', action: 'https://example.com/1' },
-                  { title: '   ', action: 'https://example.com/2' },
-                ],
-              },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelector('.viber-carousel-preview .button')).toBeNull();
-    });
-
-    it('should show carousel shell when showCarouselEditorPreview is true even if cards are empty', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            showCarouselEditorPreview: true,
-            cards: [
-              { text: '', mediaUrl: '', buttons: [{ title: '', action: '' }] },
-              { text: '', mediaUrl: '', buttons: [{ title: '', action: '' }] },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(screen.queryByText('No content available')).toBeNull();
-      expect(container.querySelector('.viber-carousel-preview .scroll')).toBeTruthy();
-      expect(container.querySelector('.viber-carousel-message-box-placeholder')).toBeTruthy();
-    });
-
-    it('should render carousel message text in message box when type is CAROUSEL', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            messageContent: 'Carousel intro copy',
-            cards: [
-              {
-                text: 'Card text',
-                mediaUrl: 'https://image.url/c.jpg',
-                buttons: [{ title: 'Go', action: 'https://example.com' }],
-              },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelector('.viber-carousel-message-box-text')).toHaveTextContent('Carousel intro copy');
-      expect(screen.queryByText('Carousel intro copy')).toBeTruthy();
-    });
-
-    it('should hide account icon when carousel is shown', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: 'Carousel card line',
-                mediaUrl: '',
-                buttons: [{ title: 'Open link', action: 'https://x.com' }],
-              },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelector('.viber-account-icon')).toBeNull();
-    });
-
-    it('should use image placeholder when carousel card mediaUrl is whitespace only', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: 'Only text',
-                mediaUrl: '   ',
-                buttons: [{ title: 'Btn', action: 'https://example.com' }],
-              },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelector('.viber-carousel-preview .image-placeholder')).toBeTruthy();
-      expect(container.querySelector('.viber-carousel-preview .image')).toBeNull();
-    });
-
-    it('should render at most two carousel buttons per card', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: 'Card',
-                mediaUrl: 'https://image.url/c.jpg',
-                buttons: [
-                  { title: 'One', action: 'https://a.com' },
-                  { title: 'Two', action: 'https://b.com' },
-                  { title: 'Three', action: 'https://c.com' },
-                ],
-              },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelectorAll('.viber-carousel-preview .button')).toHaveLength(2);
-      expect(screen.getByText('One')).toBeTruthy();
-      expect(screen.getByText('Two')).toBeTruthy();
-      expect(screen.queryByText('Three')).toBeNull();
-    });
-
-    it('should apply secondary class to second carousel button', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: 'Card',
-                mediaUrl: 'https://image.url/c.jpg',
-                buttons: [
-                  { title: 'Primary', action: 'https://a.com' },
-                  { title: 'Secondary', action: 'https://b.com' },
-                ],
-              },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      const buttons = container.querySelectorAll('.viber-carousel-preview .button');
-      expect(buttons[0].className).toContain('button');
-      expect(buttons[0].className).not.toContain('button-secondary');
-      expect(buttons[1].className).toContain('button-secondary');
-    });
-
-    it('should show carousel when only a button title is present on a card', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: '',
-                mediaUrl: '',
-                buttons: [{ title: 'Tap me', action: 'https://example.com' }],
-              },
-            ],
-          },
-        },
-      };
-
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(screen.getByText('Tap me')).toBeTruthy();
-      expect(screen.queryByText('No content available')).toBeNull();
-    });
-
-    it('should show one placeholder card when editor preview and cards array is empty', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            showCarouselEditorPreview: true,
-            cards: [],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelectorAll('.viber-carousel-preview .card')).toHaveLength(1);
-    });
-
-    it('should show no content when CAROUSEL has empty cards and no editor preview flag', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [],
-          },
-        },
-      };
-
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(screen.getByText('No content available')).toBeTruthy();
-    });
   });
 
   describe('Account and Brand Name', () => {

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

@@ -6,10 +6,6 @@ import {
   mapRcsSuggestionForTestMeta,
   typeMatches,
   unwrapEntity,
-  getTrimmedText,
-  hasTrimmedText,
-  getCarouselButtonsWithTitles,
-  getCarouselButtonSlotCount,
 } from '../utils';
 
 describe('CommonTestAndPreview/utils', () => {
@@ -152,49 +148,4 @@ describe('CommonTestAndPreview/utils', () => {
       expect(unwrapEntity(response)).toBe(response);
     });
   });
-
-  describe('getTrimmedText / hasTrimmedText', () => {
-    it('trims string values', () => {
-      expect(getTrimmedText('  hello  ')).toBe('hello');
-    });
-
-    it('treats null/undefined as empty', () => {
-      expect(getTrimmedText(null)).toBe('');
-      expect(getTrimmedText(undefined)).toBe('');
-      expect(hasTrimmedText('   ')).toBe(false);
-      expect(hasTrimmedText('ok')).toBe(true);
-    });
-  });
-
-  describe('getCarouselButtonsWithTitles', () => {
-    it('returns up to 2 buttons with non-empty titles', () => {
-      expect(getCarouselButtonsWithTitles({
-        buttons: [
-          { title: ' A ' },
-          { title: '' },
-          { title: 'B' },
-          { title: 'C' },
-        ],
-      })).toEqual([{ title: ' A ' }, { title: 'B' }]);
-    });
-
-    it('returns empty array when card has no titled buttons', () => {
-      expect(getCarouselButtonsWithTitles({})).toEqual([]);
-      expect(getCarouselButtonsWithTitles(undefined)).toEqual([]);
-    });
-  });
-
-  describe('getCarouselButtonSlotCount', () => {
-    it('returns the max titled-button count across cards, capped at 2', () => {
-      expect(getCarouselButtonSlotCount([
-        { buttons: [{ title: 'A' }] },
-        { buttons: [{ title: 'A' }, { title: 'B' }, { title: 'C' }] },
-      ])).toBe(2);
-    });
-
-    it('returns 0 when no cards have titled buttons', () => {
-      expect(getCarouselButtonSlotCount([])).toBe(0);
-      expect(getCarouselButtonSlotCount([{ buttons: [{ title: '  ' }] }])).toBe(0);
-    });
-  });
 });

package/v2Components/CommonTestAndPreview/utils.js

@@ -116,23 +116,3 @@ export const unwrapEntity = (response) => {
   if (response.entity === null) return null;
   return response;
 };
-
-/** Trim string-like values; null/undefined become ''. */
-export const getTrimmedText = (value = '') => (value ?? '').trim();
-
-/** True when trimmed text is non-empty. */
-export const hasTrimmedText = (value = '') => Boolean(getTrimmedText(value));
-
-/** First up to 2 carousel buttons that have a non-empty title. */
-export const getCarouselButtonsWithTitles = (card) => (
-  (card?.buttons ?? []).filter((button) => hasTrimmedText(button?.title)).slice(0, 2)
-);
-
-/**
- * Max button slots to reserve across carousel cards (0–2), so cards align
- * even when some cards have fewer titled buttons.
- */
-export const getCarouselButtonSlotCount = (cards = []) => {
-  const buttonCounts = cards.map((card) => getCarouselButtonsWithTitles(card).length);
-  return Math.min(2, Math.max(0, ...buttonCounts, 0));
-};

package/v2Containers/CreativesContainer/index.js

@@ -1450,15 +1450,10 @@ export class Creatives extends React.Component {
             && 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,
-          );
+          // Campaigns/consumers get the same numeric-slot contract as the editor's own round-trip
+          // (see createPayload): title/description keep {{1}}, {{2}}, … and every slot's value —
+          // tag reference or literal — lives only in cardVarMapped for the backend to resolve.
+          const cardContent = mapRcsCardContentForConsumerWithResolvedTags(cardContentFromSubmit);
           const rcsContent = {
             contentType,
             cardType,

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

@@ -267,7 +267,7 @@ 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 () => {
+  it('RCS getCreativesData sends the numeric slot (not the literal tag) in title/description to consumers, with the tag only in cardVarMapped', async () => {
     renderedComponent = shallowWithIntl(
       <Creatives
         loyaltyMetaData={loyaltyMetaData}
@@ -316,8 +316,9 @@ describe('Test SlideBoxContent container', () => {
     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}}');
+    expect(sentCardContent.title).toBe('Hi {{1}}');
+    expect(sentCardContent.description).toBe('Visit {{2}}');
+    expect(sentCardContent.cardVarMapped).toEqual({ 1: '{{first_name}}', 2: '{{loyalty_points}}' });
   });
 
   it('Text getCreatives data for rcs, data from creatives done to campaigns', async () => {

package/v2Containers/Rcs/carouselUtils.js

@@ -11,6 +11,7 @@ import {
   TEMPLATE_TITLE_MAX_LENGTH,
   RCS_RICH_CARD_MAX_LENGTH,
   RCS_NUMERIC_VAR_TOKEN_REGEX,
+  RCS_NUMERIC_VAR_NAME_REGEX,
   RCS_CAROUSEL_ASSET_INDEX_BASE,
   RCS_CAROUSEL_FIRST_CARD_DEFAULT_SUGGESTIONS,
   MEDIUM,
@@ -190,22 +191,51 @@ export const buildCarouselCardContentForPayload = (carouselData, {
   const thumbnailUrl = isCardVideo
     ? (card.thumbnailSrc || card.videoAsset?.videoThumbnail || '')
     : '';
-  const cardVarTokens = [
-    ...((card.title || '').match(rcsVarRegex) ?? []),
-    ...((card.description || '').match(rcsVarRegex) ?? []),
-  ];
+  let cardTitle = card.title || '';
+  let cardDescription = card.description || '';
   const cardVarMappedForCard = {};
-  if (isSlotMappingMode && cardVarTokens.length > 0) {
-    cardVarTokens.forEach((token) => {
-      const varName = getVarNameFromToken(token);
-      if (!varName) return;
-      const scopedValue = cardVarMapped?.[getCarouselVarMapKey(cardIndex, varName)] ?? '';
-      cardVarMappedForCard[varName] = sanitizeCardVarMappedValue(scopedValue);
-    });
+  if (isSlotMappingMode) {
+    const titleTokens = cardTitle.match(rcsVarRegex) ?? [];
+    const descTokens = cardDescription.match(rcsVarRegex) ?? [];
+    if (titleTokens.length > 0 || descTokens.length > 0) {
+      // The persisted API contract requires every {{...}} in title/description to be a plain
+      // numeric slot ({{1}}, {{2}}, …) — the actual tag/value belongs only in cardVarMapped. A
+      // slot can still hold a non-numeric/legacy token here (hand-typed, or picked before this
+      // card had a numeric slot for it) since the carousel tag-picker never rewrites card text.
+      // Rename only those to the next free number for this card, leaving already-numeric slots
+      // (and the card's normal case) untouched.
+      const usedNumbers = new Set(
+        [...titleTokens, ...descTokens]
+          .map(getVarNameFromToken)
+          .filter((name) => RCS_NUMERIC_VAR_NAME_REGEX.test(name))
+          .map((name) => parseInt(name, 10)),
+      );
+      let nextFreeNumber = 1;
+      const claimNextFreeNumber = () => {
+        while (usedNumbers.has(nextFreeNumber)) nextFreeNumber++;
+        usedNumbers.add(nextFreeNumber);
+        return String(nextFreeNumber);
+      };
+      const renameFieldVarTokens = (fieldTokens, str) => {
+        let ordinal = 0;
+        return str.replace(rcsVarRegex, (matchedToken) => {
+          const varName = getVarNameFromToken(fieldTokens[ordinal]);
+          ordinal += 1;
+          if (!varName) return matchedToken;
+          const isNumericSlot = RCS_NUMERIC_VAR_NAME_REGEX.test(varName);
+          const outputVarName = isNumericSlot ? varName : claimNextFreeNumber();
+          const scopedValue = cardVarMapped?.[getCarouselVarMapKey(cardIndex, varName)] ?? '';
+          cardVarMappedForCard[outputVarName] = sanitizeCardVarMappedValue(scopedValue);
+          return `{{${outputVarName}}}`;
+        });
+      };
+      cardTitle = renameFieldVarTokens(titleTokens, cardTitle);
+      cardDescription = renameFieldVarTokens(descTokens, cardDescription);
+    }
   }
   return {
-    title: card.title || '',
-    description: card.description || '',
+    title: cardTitle,
+    description: cardDescription,
     mediaType: cardMediaType,
     ...((isCardImage || isCardVideo) && {
       media: {

package/v2Containers/Rcs/index.js

@@ -1571,17 +1571,21 @@ export const Rcs = (props) => {
     if (tagAreaField === RCS_TAG_AREA_FIELD_TITLE || tagAreaField === RCS_TAG_AREA_FIELD_DESC) {
       // Legacy slot that already holds a named tag (e.g. {{first_name}}) is replaced by
       // field-local position, since a name-based replace would also overwrite other slots
-      // sharing that same tag name.
+      // sharing that same tag name. The persisted API contract requires title/description to
+      // only ever contain {{1}}, {{2}}, … — the actual tag lives in cardVarMapped (written
+      // above) — so normalize the slot text to its numeric token instead of re-embedding the
+      // tag name, self-healing any legacy/hand-typed token the moment it's touched here.
       const fieldOffsetForSlot = tagAreaField === RCS_TAG_AREA_FIELD_TITLE
         ? 0
         : (templateTitle?.match(rcsVarRegex) ?? []).length;
       const localSlotOrdinal = (globalVarSlotIndexZeroBased !== null && globalVarSlotIndexZeroBased !== undefined)
         ? globalVarSlotIndexZeroBased - fieldOffsetForSlot
         : null;
+      const replacementToken = cardVarMappedNumericSlotKey || selectedTagNameFromPicker;
 
       if (tagAreaField === RCS_TAG_AREA_FIELD_TITLE) {
         setTemplateTitle((previousTitle) => {
-          const titleAfterReplacingTag = replaceTagAtFieldSlotOrdinal(previousTitle || '', localSlotOrdinal, selectedTagNameFromPicker);
+          const titleAfterReplacingTag = replaceTagAtFieldSlotOrdinal(previousTitle || '', localSlotOrdinal, replacementToken);
           if (titleAfterReplacingTag === previousTitle) return previousTitle;
           setTemplateTitleError(computeTemplateTitleError(titleAfterReplacingTag));
           // Remount segment editor: tag insert replaces {{n}} with e.g. {{tag.FORMAT_1}} — slot ids change; avoids stale UI vs manual typing in full-mode TextArea
@@ -1590,7 +1594,7 @@ export const Rcs = (props) => {
         });
       } else {
         setTemplateDesc((previousDescription) => {
-          const descriptionAfterReplacingTag = replaceTagAtFieldSlotOrdinal(previousDescription || '', localSlotOrdinal, selectedTagNameFromPicker);
+          const descriptionAfterReplacingTag = replaceTagAtFieldSlotOrdinal(previousDescription || '', localSlotOrdinal, replacementToken);
           if (descriptionAfterReplacingTag === previousDescription) {
             return previousDescription;
           }
@@ -2776,10 +2780,9 @@ const onTitleAddVar = () => {
                         : RCS_VIDEO_THUMBNAIL_DIMENSIONS[selectedDimension]?.heightType || MEDIUM,
                     }}),
                     ...(isSlotMappingMode && (() => {
-                      const templateVarTokens = [
-                        ...(templateTitle?.match(rcsVarRegex) ?? []),
-                        ...(templateDesc?.match(rcsVarRegex) ?? []),
-                      ];
+                      const titleVarTokens = templateTitle?.match(rcsVarRegex) ?? [];
+                      const descVarTokens = templateDesc?.match(rcsVarRegex) ?? [];
+                      const templateVarTokens = [...titleVarTokens, ...descVarTokens];
                       const cardVarMappedForRcsCardOnly = pickRcsCardVarMappedEntries(
                         cardVarMapped,
                       );
@@ -2800,7 +2803,28 @@ const onTitleAddVar = () => {
                         const sanitizedSlotValue = sanitizeCardVarMappedValue(resolvedRawValue);
                         persistedSlotVarMap[String(slotIndexZeroBased + 1)] = sanitizedSlotValue;
                       });
-                      return { cardVarMapped: persistedSlotVarMap };
+                      // The API contract requires title/description to only ever contain {{1}}, {{2}}, …
+                      // in this exact slot order — never a semantic/legacy name — regardless of whether
+                      // the user ever touched TagList for that slot (e.g. content hydrated/pasted with a
+                      // named token). persistedSlotVarMap above already keys values by this same slot
+                      // position, so rewrite the text to match instead of persisting it verbatim.
+                      let titleOrdinal = 0;
+                      const renumberedTitle = (templateTitle || '').replace(rcsVarRegex, () => {
+                        const slotIndexZeroBased = titleOrdinal;
+                        titleOrdinal += 1;
+                        return `{{${slotIndexZeroBased + 1}}}`;
+                      });
+                      let descOrdinal = 0;
+                      const renumberedDesc = (templateDesc || '').replace(rcsVarRegex, () => {
+                        const slotIndexZeroBased = titleVarTokens.length + descOrdinal;
+                        descOrdinal += 1;
+                        return `{{${slotIndexZeroBased + 1}}}`;
+                      });
+                      return {
+                        title: renumberedTitle,
+                        description: renumberedDesc,
+                        cardVarMapped: persistedSlotVarMap,
+                      };
                     })()),
                     ...(suggestions.length > 0 && { suggestions }),
                   }