@capillarytech/creatives-library 9.0.46 → 9.0.48

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/SmsTrai/Edit/index.js

@@ -515,11 +515,9 @@ export const SmsTraiEdit = (props) => {
               horizontalSpaceCount += 1;
             }
             if (tempMsgArray[i] !== nextElem && nextElem?.replace(HORIZONTAL_WHITESPACE_ONLY_REGEX, '') !== '') {
-              const slotStartIndex = (i - varCount - horizontalSpaceCount) + 1;
-              varMapRef.current[`${SMS_TRAI_VAR}_${slotStartIndex}`] = {
+              varMapRef.current[`${SMS_TRAI_VAR}_${(i - varCount - horizontalSpaceCount) + 1}`] = {
                 data: '',
                 count: varCount,
-                token: tempMsgArray[slotStartIndex] || tempMsgArray[i],
               };
               varCount = 1;
               horizontalSpaceCount = 0;
@@ -852,7 +850,7 @@ export const SmsTraiEdit = (props) => {
     const loopIndex = varMapKeys[varMapKeys?.indexOf(_id) + 1] || arr.length;
 
     varMapRef.current[`${SMS_TRAI_VAR}_${_id}`].data = value;
-    const slotToken = varMapRef.current[`${SMS_TRAI_VAR}_${_id}`]?.token || SMS_TRAI_VAR;
+    const slotToken = isAnyDltVarToken(tempMsgArray[_id]) ? tempMsgArray[_id] : SMS_TRAI_VAR;
     if (value === '') {
       for (let i = _id; i < loopIndex; i += 1) {
         if (i === _id || arr[i] === '') {
@@ -1027,15 +1025,13 @@ export const SmsTraiEdit = (props) => {
   const calculateLenForTextBox = () => {
     let countVarChar = 0;
     Object.keys(varMapRef.current).forEach((i) => {
-      const slot = varMapRef.current[i];
-      const slotLimit = getDltVarCharLimit(slot.token, CHARLIMIT) * slot.count;
-      if (slot.data) {
-        countVarChar += slot.data?.length;
-        if (!showMsgLengthNote && slot.data?.length > slotLimit) {
+      if (varMapRef.current[i].data) {
+        countVarChar += varMapRef.current[i].data?.length;
+        if (!showMsgLengthNote && varMapRef.current[i].data?.length > varMapRef.current[i].count * CHARLIMIT) {
           updateshowMsgLengthNote(true);
         }
       } else {
-        countVarChar += slotLimit;
+        countVarChar += varMapRef.current[i].count * CHARLIMIT;
       }
     });
     return countVarChar;

package/v2Containers/Templates/_templates.scss

@@ -160,6 +160,7 @@
             line-clamp: 3;
             }
           }
+        
         }
       
         &.no-image .ant-card-meta {    
@@ -167,44 +168,6 @@
             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 {
@@ -1259,147 +1222,6 @@
   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;