@capillarytech/creatives-library 9.0.44 → 9.0.45

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

@@ -200,6 +200,370 @@ 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,6 +6,10 @@ import {
   mapRcsSuggestionForTestMeta,
   typeMatches,
   unwrapEntity,
+  getTrimmedText,
+  hasTrimmedText,
+  getCarouselButtonsWithTitles,
+  getCarouselButtonSlotCount,
 } from '../utils';
 
 describe('CommonTestAndPreview/utils', () => {
@@ -148,4 +152,49 @@ 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,3 +116,23 @@ 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/Templates/_templates.scss

@@ -160,7 +160,6 @@
             line-clamp: 3;
             }
           }
-        
         }
       
         &.no-image .ant-card-meta {    
@@ -168,6 +167,44 @@
             word-wrap: break-word;
           }
         }
+
+        &.viber-carousel-static {
+          height: auto;
+          min-height: 21.125rem;
+          overflow: visible;
+
+          .ant-card-body {
+            height: auto;
+            overflow: visible;
+            padding-bottom: $CAP_SPACE_12;
+
+            .ant-card-meta,
+            .ant-card-meta-detail,
+            .ant-card-meta-description {
+              height: auto;
+              max-height: none;
+              overflow: visible;
+            }
+
+            .truncate-text-viber {
+              .ant-card-meta-description {
+                display: block;
+                overflow: visible;
+                max-height: none;
+                -webkit-box-orient: unset;
+                -webkit-line-clamp: unset;
+                line-clamp: unset;
+              }
+            }
+
+            .content,
+            .cards,
+            .card {
+              overflow: visible;
+              height: auto;
+            }
+          }
+        }
     
   
         &.carousel-img-section {
@@ -1222,6 +1259,147 @@
   max-height: 11rem;
   margin-bottom: $CAP_SPACE_04;
 }
+
+/* Listing carousel preview: always grow with content so title + buttons stay visible for any image */
+.cap-custom-card.ant-card.VIBER.viber-carousel-static {
+  height: auto;
+  min-height: 21.125rem;
+  overflow: visible;
+
+  > .ant-card-body {
+    height: auto;
+    max-height: none;
+    overflow: visible;
+    padding-bottom: $CAP_SPACE_12;
+  }
+
+  .ant-card-meta,
+  .ant-card-meta-detail,
+  .ant-card-meta-description,
+  .truncate-text-viber,
+  .truncate-text-viber .ant-card-meta-description {
+    height: auto;
+    max-height: none;
+    overflow: visible;
+    display: block;
+    -webkit-line-clamp: unset;
+    line-clamp: unset;
+    -webkit-box-orient: unset;
+  }
+}
+
+.viber-carousel-static {
+  .content {
+    width: 100%;
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+    height: auto;
+
+    .message-box {
+      width: 100%;
+      height: auto;
+      border-radius: $CAP_SPACE_04;
+      background: $CAP_WHITE;
+      margin-bottom: $CAP_SPACE_08;
+      display: flex;
+      align-items: flex-start;
+
+      .message {
+        display: -webkit-box;
+        width: 100%;
+        color: $CAP_G01;
+        line-height: 1.3;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+        white-space: normal;
+        word-break: break-word;
+      }
+    }
+
+    .cards {
+      display: flex;
+      gap: $CAP_SPACE_08;
+      overflow: visible;
+      width: 100%;
+      height: auto;
+
+      .card {
+        flex: 1;
+        min-width: 0;
+        width: 100%;
+        background: $CAP_WHITE;
+        border-radius: $CAP_SPACE_04;
+        overflow: visible;
+        display: flex;
+        flex-direction: column;
+        height: auto;
+
+        .image {
+          width: 100%;
+          max-height: 11rem;
+          margin-bottom: $CAP_SPACE_04;
+          border-radius: $CAP_SPACE_04;
+          display: block;
+          flex-shrink: 0;
+        }
+
+        .image-placeholder {
+          width: 100%;
+          height: 7.143rem;
+          border-radius: $CAP_SPACE_04;
+          background: $CAP_G07;
+        }
+
+        .text {
+          display: -webkit-box;
+          color: $CAP_G01;
+          margin: $CAP_SPACE_04 0;
+          line-height: 1.3;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: normal;
+          -webkit-line-clamp: 2;
+          line-clamp: 2;
+          -webkit-box-orient: vertical;
+          flex-shrink: 0;
+          width: 100%;
+          visibility: visible;
+        }
+
+        .buttons {
+          display: flex;
+          flex-direction: column;
+          gap: $CAP_SPACE_04;
+          flex-shrink: 0;
+          width: 100%;
+          visibility: visible;
+
+          .button {
+            display: block;
+            min-height: 1.5rem;
+            border-radius: $CAP_SPACE_12;
+            background: $CAP_PURPLE01;
+            color: $CAP_WHITE;
+            text-align: center;
+            padding: 0.179rem $CAP_SPACE_08;
+            white-space: normal;
+          }
+
+          .button-secondary {
+            color: $CAP_PURPLE01;
+            background: transparent;
+            border: none;
+            box-shadow: none;
+          }
+        }
+      }
+    }
+  }
+}
 .whatsapp-doc {
   width: 100%;
   max-height: 123px;
@@ -1485,7 +1663,7 @@
   .template-action-menu {
     padding: 4px 0px;
     .template-action-menu-item {
-      padding: 12px 24px;
+      padding: $CAP_SPACE_12 $CAP_SPACE_24;
     }
   }
 }