@capillarytech/creatives-library 9.0.15-alpha.1 → 9.0.15-alpha.3

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

@@ -102,7 +102,7 @@ exports[`RCS utils getRCSContent renders RCS content with image and CTA suggesti
     style={Object {}}
   >
     <i
-      className="cap-icon-v2 cap-icon-v2-launch xs"
+      className="cap-icon-v2 cap-icon-v2-open-in-new xs"
       onClick={[Function]}
       style={
         Object {
@@ -113,40 +113,12 @@ exports[`RCS utils getRCSContent renders RCS content with image and CTA suggesti
       <svg
         fill="currentColor"
         height="1em"
-        viewBox="0 0 24 24"
+        viewBox="0 0 16 16"
         width="1em"
       >
-        <defs>
-          <path
-            d="M19 19H5V5h5a1 1 0 0 0 0-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-6a1 1 0 0 0-2 0v6zM14 4a1 1 0 0 0 1 1h2.59l-6.297 6.297a.997.997 0 0 0 1.41 1.41L19 6.41V9a1 1 0 0 0 2 0V4a1 1 0 0 0-1-1h-5a1 1 0 0 0-1 1z"
-            id="launch_svg__a"
-          />
-        </defs>
-        <g
-          fill="none"
-          fillRule="evenodd"
-        >
-          <mask
-            fill="currentColor"
-            id="launch_svg__b"
-          >
-            <use
-              xlinkHref="#launch_svg__a"
-            />
-          </mask>
-          <use
-            fill="currentColor"
-            xlinkHref="#launch_svg__a"
-          />
-          <g
-            fill="currentColor"
-            mask="url(#launch_svg__b)"
-          >
-            <path
-              d="M0 0h24v24H0z"
-            />
-          </g>
-        </g>
+        <path
+          d="M12 12H4V4h2a1 1 0 1 0 0-2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8c1.1 0 2-.9 2-2v-2a1 1 0 0 0-2 0v2zM8.142 2.976c0 .54.437.977.977.977h1.552L7.285 7.338a.973.973 0 1 0 1.377 1.377l3.385-3.386v1.552a.976.976 0 1 0 1.953 0V3a1 1 0 0 0-1-1H9.119a.976.976 0 0 0-.977.976z"
+        />
       </svg>
     </i>
     Shop
@@ -256,7 +228,7 @@ exports[`RCS utils getRCSContent renders RCS content with multiple suggestion ty
     style={Object {}}
   >
     <i
-      className="cap-icon-v2 cap-icon-v2-launch xs"
+      className="cap-icon-v2 cap-icon-v2-open-in-new xs"
       onClick={[Function]}
       style={
         Object {
@@ -267,40 +239,12 @@ exports[`RCS utils getRCSContent renders RCS content with multiple suggestion ty
       <svg
         fill="currentColor"
         height="1em"
-        viewBox="0 0 24 24"
+        viewBox="0 0 16 16"
         width="1em"
       >
-        <defs>
-          <path
-            d="M19 19H5V5h5a1 1 0 0 0 0-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-6a1 1 0 0 0-2 0v6zM14 4a1 1 0 0 0 1 1h2.59l-6.297 6.297a.997.997 0 0 0 1.41 1.41L19 6.41V9a1 1 0 0 0 2 0V4a1 1 0 0 0-1-1h-5a1 1 0 0 0-1 1z"
-            id="launch_svg__a"
-          />
-        </defs>
-        <g
-          fill="none"
-          fillRule="evenodd"
-        >
-          <mask
-            fill="currentColor"
-            id="launch_svg__b"
-          >
-            <use
-              xlinkHref="#launch_svg__a"
-            />
-          </mask>
-          <use
-            fill="currentColor"
-            xlinkHref="#launch_svg__a"
-          />
-          <g
-            fill="currentColor"
-            mask="url(#launch_svg__b)"
-          >
-            <path
-              d="M0 0h24v24H0z"
-            />
-          </g>
-        </g>
+        <path
+          d="M12 12H4V4h2a1 1 0 1 0 0-2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8c1.1 0 2-.9 2-2v-2a1 1 0 0 0-2 0v2zM8.142 2.976c0 .54.437.977.977.977h1.552L7.285 7.338a.973.973 0 1 0 1.377 1.377l3.385-3.386v1.552a.976.976 0 1 0 1.953 0V3a1 1 0 0 0-1-1H9.119a.976.976 0 0 0-.977.976z"
+        />
       </svg>
     </i>
     URL Action

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

@@ -207,13 +207,13 @@ describe('Creatives rcs test/>', () => {
     expect(options[2].value).toBe('CAROUSEL');
     expect(options[2].disabled).toBeFalsy();
 
-    // Disabled state in edit mode
-    renderHelper({ 
+    // Edit mode: radio group is replaced by a plain readonly value, not shown disabled
+    renderHelper({
       params,
       rcsData: { templateDetails: mockData.rcsRichCardTemplate }
     });
-    const editModeRadioGroup = renderedComponent.find('CapRadioGroup#select-rcs-template-type').at(0);
-    expect(editModeRadioGroup.props().disabled).toBe(true);
+    expect(renderedComponent.find('CapRadioGroup#select-rcs-template-type')).toHaveLength(0);
+    expect(renderedComponent.find('CapHeading.rcs-creative-name-value').length).toBeGreaterThan(0);
     expect(renderedComponent).toMatchSnapshot();
   });
 

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

@@ -116,7 +116,7 @@ describe('RCS utils', () => {
       expectGetRCSContentSnapshot({});
     });
 
-    it('renders RCS carousel listing preview when cardType is carousel', () => {
+    it('renders RCS carousel listing preview when cardType is carousel — first card only, no peek', () => {
       const template = JSON.parse(JSON.stringify(mockData.editData1.templateDetails));
       const rcsContent = template.versions.base.content.RCS.rcsContent;
       rcsContent.cardType = 'CAROUSEL';
@@ -148,9 +148,10 @@ describe('RCS utils', () => {
       ];
 
       render(getRCSContent(template));
-      // "Peek" shows max 3
-      expect(document.querySelectorAll('.whatsapp-carousel-container').length).toBe(3);
-      expect(document.querySelectorAll('.scroll-container').length).toBeGreaterThan(0);
+      // Listing preview only ever shows the first card — no peek/scroll of the rest (Figma).
+      expect(document.querySelectorAll('.whatsapp-carousel-container').length).toBe(1);
+      expect(document.querySelector('.whatsapp-carousel-body').textContent).toContain('Desc1');
+      expect(document.querySelector('.whatsapp-carousel-body').textContent).not.toContain('Desc2');
     });
 
     const carouselTemplate = (cardContent) => ({
@@ -214,7 +215,7 @@ describe('RCS utils', () => {
       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', () => {
+    it('carousel: media box renders no image when card has no image/video URL', () => {
       const template = carouselTemplate([
         {
           title: 'Text only',
@@ -229,11 +230,12 @@ describe('RCS utils', () => {
         },
       ]);
       render(getRCSContent(template));
-      const withoutMedia = document.querySelectorAll('.whatsapp-message-without-media');
-      expect(withoutMedia.length).toBeGreaterThan(0);
+      const mediaBoxes = document.querySelectorAll('.rcs-carousel-listing-media-box');
+      expect(mediaBoxes.length).toBeGreaterThan(0);
+      expect(mediaBoxes[0].querySelector('.whatsapp-image:not(.rcs-video-preview-placeholder)')).toBeFalsy();
     });
 
-    it('carousel: body includes description with newline when description is set', () => {
+    it('carousel: body shows description only — no card title', () => {
       const template = carouselTemplate([
         {
           title: 'Head',
@@ -250,30 +252,26 @@ describe('RCS utils', () => {
       ]);
       render(getRCSContent(template));
       const bodies = document.querySelectorAll('.whatsapp-carousel-body');
-      expect(bodies[0].textContent).toContain('Head');
+      expect(bodies[0].textContent).not.toContain('Head');
       expect(bodies[0].textContent).toContain('Tail line');
     });
 
-    it('carousel: body handles missing title and empty description', () => {
+    it('carousel: body handles missing title and empty description (first card only)', () => {
       const template = carouselTemplate([
         {
+          title: 'Only title',
           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');
+      // Title is never rendered in the listing preview, so a title-only card is blank.
+      const body = document.querySelector('.whatsapp-carousel-body');
+      expect(body.textContent.trim()).toBe('');
     });
 
-    it('carousel: renders per-card suggestions via renderRcsSuggestionsPreview', () => {
+    it('carousel: does not render buttons/suggestions in the listing preview', () => {
       const template = carouselTemplate([
         {
           title: 'C1',
@@ -289,8 +287,7 @@ describe('RCS utils', () => {
         },
       ]);
       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);
+      expect(document.querySelectorAll('.rcs-cta-preview').length).toBe(0);
     });
 
     it('carousel: does not render suggestion block when suggestions missing or not an array', () => {

package/v2Containers/Rcs/utils.js

@@ -450,7 +450,7 @@ export const getRCSContent = (template) => {
       } else if (suggestion.type === RCS_BUTTON_TYPES.CTA) {
         renderArray.push(
           <CapLabel type="label21" className="rcs-cta-preview">
-            <CapIcon type="launch" size="xs" />
+            <CapIcon type="open-in-new" size="xs" />
             {suggestion.text}
           </CapLabel>,
         );
@@ -493,58 +493,45 @@ export const getRCSContent = (template) => {
   const isTextOnlyCard = isRcsTextOnlyCardMediaType(mediaType);
   const mediaPreview = media?.thumbnailUrl ? media.thumbnailUrl : media.mediaUrl;
 
+  // Listing preview shows only the FIRST card — no peek of other cards, no buttons (Figma).
   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
+    const c = cards[0];
+    const m = c?.media || {};
+    const isVideo = (c?.mediaType || 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 className="scroll-container">
-        {cardsToShow.map((c, idx) => {
-          const m = c?.media || {};
-          const isVideo = (c?.mediaType || 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">
-                    {(url || isVideo) ? (c?.title || '') : ''}
-                    {c?.description ? `\n${c?.description}` : ''}
-                  </CapLabel>
-                </span>
-                {Array.isArray(c?.suggestions) && c.suggestions.length > 0 && (
-                  <>
-                    {renderRcsSuggestionsPreview(c.suggestions)}
-                  </>
-                )}
+      <div className="whatsapp-carousel-container" role="group">
+        <div className="whatsapp-carousel-card">
+          {/* Text and media render as two separate rounded cards, not one merged
+              box (Figma listing reference) — description only, no card title. */}
+          <div className="rcs-carousel-listing-text-box">
+            <CapLabel type="label9" className="whatsapp-carousel-body">
+              {c?.description || ''}
+            </CapLabel>
+          </div>
+          <div className="rcs-carousel-listing-media-box">
+            {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>
-            </div>
-          );
-        })}
+            )}
+          </div>
+        </div>
       </div>
     );
   };

package/v2Containers/Templates/_templates.scss

@@ -279,36 +279,61 @@
                   margin: $CAP_SPACE_12 0;
                 }
               }
-              .scroll-container {
-                overflow-x: auto;
-                overflow-y: hidden;
-                display: flex;
-                flex-wrap: nowrap;
+              // Listing preview shows only the first card — no scroll/peek (Figma).
+              .whatsapp-carousel-container {
+                padding: $CAP_SPACE_04;
                 width: 100%;
-                padding-top: $CAP_SPACE_06;
-                padding-right: $CAP_SPACE_06;
-                white-space: nowrap;
-                scrollbar-width: none; // Hide scrollbar in Firefox
-                &::-webkit-scrollbar {
-                  display: none; // Hide scrollbar in Chrome/Safari/Opera
+                box-sizing: border-box;
+                white-space: pre-wrap;
+                word-break: break-word;
+                overflow: auto;
+                text-align: left;
+                .whatsapp-carousel-card {
+                  display: flex;
+                  flex-direction: column;
+                  gap: $CAP_SPACE_04;
                 }
-                .whatsapp-carousel-container {
-                  padding: $CAP_SPACE_04 0 $CAP_SPACE_08;
-                  border-radius: $CAP_SPACE_06;
+                // Text and media are two separate rounded cards, not one merged
+                // box (Figma listing reference) — text first, then media below it.
+                // Borderless + shadow-only elevation, matching the established
+                // convention for preview carousel cards (see .mobile-push-carousel-card
+                // in v2Components/TemplatePreview/_templatePreview.scss) — a visible
+                // border read as "boxed in" against the $CAP_G09 card background.
+                .rcs-carousel-listing-text-box {
                   background-color: $CAP_WHITE;
-                  width: 80%;
-                  flex-shrink: 0;
-                  margin-right: $CAP_SPACE_04;
-                  white-space: pre-wrap;
-                  word-break: break-word;
-                  overflow: auto;
-                  text-align: left;
-                  .whatsapp-carousel-card {
-                    margin: $CAP_SPACE_02 $CAP_SPACE_06 $CAP_SPACE_01 $CAP_SPACE_08;
-                    .whatsapp-carousel-body {
-                      margin-bottom: $CAP_SPACE_08;
-                      white-space: pre-wrap;
-                    }
+                  border-radius: $CAP_SPACE_04;
+                  padding: $CAP_SPACE_12;
+                  box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.08);
+                  .whatsapp-carousel-body {
+                    white-space: pre-wrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                  }
+                }
+                .rcs-carousel-listing-media-box {
+                  background-color: $CAP_WHITE;
+                  border-radius: $CAP_SPACE_08;
+                  padding: $CAP_SPACE_04;
+                  box-sizing: border-box;
+                  box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.08);
+                  .whatsapp-image,
+                  .rcs-video-preview-placeholder {
+                    display: block;
+                    width: 100%;
+                    // Neutralize the global .whatsapp-image { max-height: 123px;
+                    // margin-bottom: 4px; } rule (_templates.scss line ~1202) — that
+                    // margin was leaving a background sliver inside this rounded box,
+                    // making the radius clip look uneven between top and bottom.
+                    height: 11rem;
+                    max-height: none;
+                    margin: 0;
+                    object-fit: cover;
+                    overflow: hidden;
+                    border-radius: $CAP_SPACE_04;
                   }
                 }
               }

package/v2Containers/Templates/index.js

@@ -2572,9 +2572,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           const name = get(template, "name", "");
           const statusDisplay=getRcsStatusType(status);
           templateData.title = (
-            <CapRow type='flex' align="middle" justify="start" gap={12}>
-              {isCardArchiveEligible && this.renderCardSelectionCheckbox({ templateId: template._id, selectedIds: selectedIdsArrayForCard, isDisabled: isAnyArchiveInProgress })}
-              <CapLabel className="whatsapp-rcs-template-name">{name}</CapLabel>
+            <CapColumn>
+              <CapRow type='flex' align="middle" justify="start" gap={12}>
+                {isCardArchiveEligible && this.renderCardSelectionCheckbox({ templateId: template._id, selectedIds: selectedIdsArrayForCard, isDisabled: isAnyArchiveInProgress })}
+                <CapLabel className="whatsapp-rcs-template-name">{name}</CapLabel>
+              </CapRow>
               {this.state.hostName !== HOST_INFOBIP && <CapColumn type="flex" align="middle" className="rcs-status-container zalo-status-color">
                 <CapStatus
                   type={statusDisplay}
@@ -2583,7 +2585,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                   />
                 </CapColumn>
               }
-            </CapRow>
+            </CapColumn>
           );
         
           templateData.content = getRCSContent(template);