@capillarytech/creatives-library 8.0.352 → 8.0.353-alpha.1

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('viber-carousel-preview-button');
+      expect(buttons[0].className).not.toContain('viber-carousel-preview-button-secondary');
+      expect(buttons[1].className).toContain('viber-carousel-preview-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/v2Containers/Templates/_templates.scss

@@ -153,6 +153,82 @@
             line-clamp: 3;
             }
           }
+          .viber-carousel-static-content {
+            width: 100%;
+            overflow: hidden;
+            .viber-carousel-static-message-box {
+              width: 100%;
+              height: 2.25rem;
+              border-radius: $CAP_SPACE_04;
+              background: $CAP_WHITE;
+              margin-bottom: $CAP_SPACE_08;
+              padding: 0 $CAP_SPACE_08;
+              display: flex;
+              align-items: center;
+            }
+            .viber-carousel-static-message {
+              display: block;
+              width: 100%;
+              color: $CAP_G01;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            .viber-carousel-static-cards {
+              display: flex;
+              gap: $CAP_SPACE_08;
+              overflow: hidden;
+            }
+            .viber-carousel-static-card {
+              flex: 1;
+              min-width: 0;
+              background: $CAP_WHITE;
+              border-radius: $CAP_SPACE_04;
+              padding: $CAP_SPACE_06;
+              overflow: hidden;
+            }
+            .viber-carousel-static-image,
+            .viber-carousel-static-image-placeholder {
+              width: 100%;
+              height: 5.357rem;
+              border-radius: $CAP_SPACE_04;
+            }
+            .viber-carousel-static-image {
+              object-fit: cover;
+            }
+            .viber-carousel-static-image-placeholder {
+              background: $CAP_G07;
+            }
+            .viber-carousel-static-text {
+              display: block;
+              color: $CAP_G01;
+              margin: $CAP_SPACE_04 0;
+              line-height: 1.3;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: normal;
+            }
+            .viber-carousel-static-buttons {
+              display: flex;
+              flex-direction: column;
+              gap: $CAP_SPACE_04;
+            }
+            .viber-carousel-static-button {
+              display: block;
+              min-height: 1rem;
+              border-radius: $CAP_SPACE_12;
+              background: $CAP_PURPLE01;
+              color: $CAP_WHITE;
+              text-align: center;
+              padding: 0.179rem $CAP_SPACE_08;
+              white-space: normal;
+            }
+            .viber-carousel-static-button-secondary {
+              color: $CAP_PURPLE01;
+              background: $CAP_WHITE;
+              border: 1px solid $CAP_PURPLE01;
+            }
+          }
         
         }
       

package/v2Containers/Templates/index.js

@@ -72,6 +72,7 @@ import * as ebillActions from '../Ebill/actions';
 import * as emailActions from '../Email/actions';
 import * as lineActions from '../Line/Container/actions';
 import * as viberActions from '../Viber/actions';
+import { VIBER_MEDIA_TYPES } from '../Viber/constants';
 import * as facebookActions from '../Facebook/actions';
 import * as whatsappActions from '../Whatsapp/actions';
 import * as rcsActions from '../Rcs/actions';
@@ -1371,6 +1372,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         const image = viberContent.image || {};
         const video = viberContent.video || {};
         const button = viberContent.button || {};
+        const messageType = viberContent.type || '';
+        const cardsRaw = viberContent.cards;
+        const cards = Array.isArray(cardsRaw) ? cardsRaw : [];
+        const isCarousel =
+          messageType === VIBER_MEDIA_TYPES.CAROUSEL || cards.length > 0;
 
         const viberPreview = {
           messageContent: text,
@@ -1388,6 +1394,19 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           };
         }
 
+        if (isCarousel) {
+          viberPreview.type = VIBER_MEDIA_TYPES.CAROUSEL;
+          viberPreview.cards = cards.map((card) => ({
+            text: card?.text || '',
+            mediaUrl: card?.mediaUrl || '',
+            buttons: (card?.buttons || []).map((btn) => ({
+              title: btn?.title || '',
+              action: btn?.action || '',
+            })),
+          }));
+          viberPreview.showCarouselEditorPreview = true;
+        }
+
         // Extract account name
         const accountName = get(template, 'definition.accountName', '');
 
@@ -1396,6 +1415,18 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           viberPreviewContent: viberPreview,
           accountName: accountName ? [accountName] : [],
           brandName: accountName ? [accountName] : [],
+          messageContent: text,
+          ...(isCarousel && {
+            type: VIBER_MEDIA_TYPES.CAROUSEL,
+            cards: viberPreview.cards,
+          }),
+          ...(!isCarousel && !isEmpty(button) && button.text && (button.url || viberContent.buttonURL) && {
+            button: {
+              text: button.text,
+              url: button.url || viberContent.buttonURL || '',
+            },
+          }),
+          buttonURL: button.url || viberContent.buttonURL || '',
         };
       }
 
@@ -2341,10 +2372,52 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 image = {},
                 button = {},
                 video = {},
+                type = '',
+                cards = [],
               } = {},
             } = {},
           } = template.versions.base;
+          const isViberCarousel = type === VIBER_MEDIA_TYPES.CAROUSEL;
           templateData.content = text;
+          if (isViberCarousel) {
+            const previewCards = Array.isArray(cards) ? cards.slice(0, 1) : [];
+            templateData.className = 'viber-carousel-static';
+            templateData.content = (
+              <CapRow className="viber-carousel-static-content">
+                <CapRow className="viber-carousel-static-message-box">
+                  <CapLabel type="label1" className="viber-carousel-static-message">
+                    {text}
+                  </CapLabel>
+                </CapRow>
+                <CapRow className="viber-carousel-static-cards">
+                  {previewCards.map((card, cardIdx) => (
+                    <CapRow className="viber-carousel-static-card" key={`viber-static-card-${cardIdx}`}>
+                      {card?.mediaUrl ? (
+                        <CapImage src={card.mediaUrl} className="viber-carousel-static-image" />
+                      ) : (
+                        <CapRow className="viber-carousel-static-image-placeholder" />
+                      )}
+                      <CapLabel type="label1" className="viber-carousel-static-text">
+                        {card?.text}
+                      </CapLabel>
+                      <CapRow className="viber-carousel-static-buttons">
+                        {(Array.isArray(card?.buttons) && card.buttons.length ? card.buttons : [{}, {}]).slice(0, 2).map((carouselButton, btnIdx) => (
+                          <CapLabel
+                            key={`viber-static-btn-${cardIdx}-${btnIdx}`}
+                            type="label1"
+                            className={`viber-carousel-static-button ${btnIdx === 1 ? 'viber-carousel-static-button-secondary' : ''}`}
+                          >
+                            {(carouselButton?.title || '').trim()}
+                          </CapLabel>
+                        ))}
+                      </CapRow>
+                    </CapRow>
+                  ))}
+                </CapRow>
+              </CapRow>
+            );
+            break;
+          }
           if (!isEmpty(image)) {
             const { url = '' } = image;
             templateData.url = url;

package/v2Containers/Viber/constants.js

@@ -47,7 +47,22 @@ export const VIBER_MEDIA_TYPES = {
   TEXT: 'TEXT',
   IMAGE: 'IMAGE',
   VIDEO: 'VIDEO',
+  CAROUSEL: 'CAROUSEL',
 };
+export const VIBER_CAROUSEL_MIN_CARDS = 2;
+export const VIBER_CAROUSEL_MAX_CARDS = 5;
+export const VIBER_CAROUSEL_MAX_BUTTONS = 2;
+export const VIBER_CAROUSEL_CARD_TITLE_MIN_LENGTH = 2;
+export const VIBER_CAROUSEL_CARD_TITLE_MAX_LENGTH = 38;
+export const VIBER_CAROUSEL_FIRST_BUTTON_TITLE_MAX_LENGTH = 10;
+export const VIBER_CAROUSEL_SECOND_BUTTON_TITLE_MAX_LENGTH = 12;
+export const VIBER_CAROUSEL_BUTTON_URL_MAX_LENGTH = 1000;
+/** Recommended / validated carousel image height in pixels (passed to image upload). */
+export const VIBER_CAROUSEL_IMG_HEIGHT = 600;
+/** Recommended / validated carousel image width in pixels (passed to image upload). */
+export const VIBER_CAROUSEL_IMG_WIDTH = 696;
+/** Maximum carousel image file size (bytes). 10_000_000 ≈ 10 MB (decimal). */
+export const VIBER_CAROUSEL_IMG_SIZE = 10000000;
 export const ALLOWED_IMAGE_EXTENSIONS_REGEX_VIBER = /\.(jpe?g|png)$/i;
 export const ALLOWED_EXTENSIONS_VIDEO_REGEX_VIBER = /\.(mp4|3gp|m4v|mov)$/i;
 export const NONE = 'NONE';
@@ -69,6 +84,10 @@ export const mediaRadioOptions = [
     value: VIBER_MEDIA_TYPES.VIDEO,
     label: <FormattedMessage {...messages.mediaVideo} />,
   },
+  {
+    value: VIBER_MEDIA_TYPES.CAROUSEL,
+    label: <FormattedMessage {...messages.mediaCarousel} />,
+  },
 ];
 
 export const buttonRadioOptions = [