@capillarytech/creatives-library 9.0.36-alpha.0 → 9.0.36

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('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/v2Components/CommonTestAndPreview/tests/index.test.js

@@ -3561,84 +3561,6 @@ describe('CommonTestAndPreview', () => {
     });
   });
 
-  describe('RCS primary card content synthetic tag fallback', () => {
-    const rcsCardFormData = (description) => ({
-      rcsTitle: '',
-      rcsDesc: description,
-      versions: {
-        base: {
-          content: {
-            RCS: {
-              rcsContent: {
-                cardContent: [{ title: '', description }],
-              },
-            },
-          },
-        },
-      },
-    });
-
-    it('should surface a {{tag}} from RCS card description as a fillable field when the extract-tags API returns nothing (no SMS fallback)', async () => {
-      render(
-        <TestWrapper>
-          <CommonTestAndPreview
-            {...defaultProps}
-            channel={CHANNELS.RCS}
-            formData={rcsCardFormData('Visit store for offer {{user_id_b64}}')}
-            extractedTags={[]}
-          />
-        </TestWrapper>
-      );
-
-      await waitFor(() => expect(lastLeftPanelContentProps).not.toBeNull());
-
-      const tags = lastLeftPanelContentProps.extractedTags;
-      expect(tags.some((tag) => tag.name === 'user_id_b64')).toBe(true);
-    });
-
-    it('should surface an RCS card tag alongside a merged fallback SMS tag when both are present', async () => {
-      render(
-        <TestWrapper>
-          <CommonTestAndPreview
-            {...defaultProps}
-            channel={CHANNELS.RCS}
-            formData={rcsCardFormData('Visit store for offer {{user_id_b64}}')}
-            extractedTags={[]}
-            smsFallbackContent={{
-              templateContent: 'Fallback {{name}}',
-              content: 'Fallback {{name}}',
-            }}
-          />
-        </TestWrapper>
-      );
-
-      await waitFor(() => expect(lastLeftPanelContentProps).not.toBeNull());
-
-      const tags = lastLeftPanelContentProps.extractedTags;
-      expect(tags.some((tag) => tag.name === 'user_id_b64')).toBe(true);
-      expect(tags.some((tag) => tag.name === 'name')).toBe(true);
-    });
-
-    it('should not duplicate a tag the extract-tags API already returned for RCS card content', async () => {
-      const apiTags = [{ name: 'user_id_b64', metaData: { userDriven: false }, children: [] }];
-      render(
-        <TestWrapper>
-          <CommonTestAndPreview
-            {...defaultProps}
-            channel={CHANNELS.RCS}
-            formData={rcsCardFormData('Visit store for offer {{user_id_b64}}')}
-            extractedTags={apiTags}
-          />
-        </TestWrapper>
-      );
-
-      await waitFor(() => expect(lastLeftPanelContentProps).not.toBeNull());
-
-      const tags = lastLeftPanelContentProps.extractedTags;
-      expect(tags.filter((tag) => tag.name === 'user_id_b64')).toHaveLength(1);
-    });
-  });
-
   describe('handleDiscardCustomValues — preview reset', () => {
     it('should call updatePreviewRequested when handleDiscardCustomValues is invoked', async () => {
       render(

package/v2Components/CommonTestAndPreview/utils.js

@@ -27,40 +27,6 @@ export const buildSyntheticSmsMustacheTags = (body = '') => {
   }));
 };
 
-/**
- * Raw RCS primary-card text (title + description across all cards) to scan for `{{…}}` tags.
- * Mirrors the carousel/standalone branching in prepareTagExtractionPayload's RCS case so both
- * the extract-tags API payload and the client-side synthetic tag fallback agree on card text.
- */
-export const getRcsPrimaryTagExtractionText = (formDataObj) => {
-  const rcsCardContentArr =
-    formDataObj?.versions?.base?.content?.RCS?.rcsContent?.cardContent
-    ?? formDataObj?.content?.RCS?.rcsContent?.cardContent;
-  if (Array.isArray(rcsCardContentArr) && rcsCardContentArr.length > 0) {
-    const carouselTagText = rcsCardContentArr
-      .map((card) => `${card.title || ''} ${card.description || ''}`)
-      .join(' ')
-      .trim();
-    if (carouselTagText) return carouselTagText;
-  }
-  return `${formDataObj?.rcsTitle || ''} ${formDataObj?.rcsDesc || ''}`.trim();
-};
-
-/**
- * Combine tags the extract-tags API returned with tags synthesized client-side from a raw
- * `{{…}}` scan of `rawText`, so a tag the backend's catalog doesn't recognize (e.g. a reserved
- * token like `user_id_b64`) still surfaces as a fillable field instead of silently disappearing.
- * Dedupes by name so API-recognized tags (which carry richer metaData) are never overridden.
- */
-export const mergeSyntheticMustacheTags = (apiTags = [], rawText = '') => {
-  if (!smsTemplateHasMustacheTags(rawText)) return apiTags ?? [];
-  const existingNames = new Set((apiTags ?? []).map((tag) => tag?.name));
-  const synthetic = buildSyntheticSmsMustacheTags(rawText).filter(
-    (tag) => !existingNames.has(tag.name),
-  );
-  return [...(apiTags ?? []), ...synthetic];
-};
-
 /** RCS createMessageMeta: normalize media shape (mediaUrl, thumbnailUrl, height string). */
 export const normalizeRcsTestCardMedia = (media) => {
   if (!media || typeof media !== 'object') return undefined;

package/v2Components/NavigationBar/index.js

@@ -12,10 +12,8 @@ import { loadItem } from 'services/localStorageApi';
 import { intlShape, injectIntl } from 'react-intl';
 import { withRouter } from 'react-router-dom';
 import { get } from 'lodash';
-import CapNavigation from '@capillarytech/cap-ui-library/CapNavigationSPA';
+import CapNavigation from '@capillarytech/cap-ui-library/CapNavigation';
 import { CAP_WHITE } from '@capillarytech/cap-ui-library/styled/variables';
-import { MFEModuleHeader } from '@capillarytech/cap-ui-utils';
-import { MFE_MODULE_HEADER } from './mfeModuleHeader.config';
 import injectSaga from '../../utils/injectSaga';
 import sagas from './saga';
 import messages from './messages';
@@ -32,11 +30,12 @@ import { CapLeftNavigatioOpenCss, CapLeftNavigationCss } from './style';
 import { EMBEDDED } from './constants';
 
 const CapWrapper = styled.div`
+  position: absolute;
   padding: 0;
   background-color: ${CAP_WHITE};
   width: 100%;
   display: flex;
-
+  margin-top: ${(props) => props.isEmbedded ? '0px' : '64px'};
 
   .sidebar-container {
     margin-right: 10px;
@@ -47,8 +46,10 @@ const CapWrapper = styled.div`
 `;
 
 const ComponentWrapper = styled.div`
+  max-width: 1140px;
+  margin: 0 auto;
   width: 100%;
-  padding: 0;
+  padding: 24px 0;
 `;
 
 export class NavigationBar extends React.Component {
@@ -57,7 +58,6 @@ export class NavigationBar extends React.Component {
     this.state = this.initializeSelectedProduct();
   }
 
-
   initializeSelectedProduct = () => {
     const { location, intl: { formatMessage } } = this.props;
     const { pathname } = location;
@@ -179,7 +179,6 @@ export class NavigationBar extends React.Component {
     const topbarIcons = this.getTopbarIcons(showDocumentationBot);
     const headerOverideCss = leftNavbarExpandedProp ? CapLeftNavigatioOpenCss : CapLeftNavigationCss;
     return (
-      <>
       <CapNavigation
         className="creatives-main-container"
         showContent
@@ -213,8 +212,7 @@ export class NavigationBar extends React.Component {
           </CapWrapper>
         </div>
       </CapNavigation>
-        <MFEModuleHeader history={this.props.history} {...MFE_MODULE_HEADER} />
-      </>
+
     );
   }
 }

package/v2Components/NavigationBar/tests/index.test.js

@@ -3,7 +3,7 @@ import { injectIntl } from 'react-intl';
 import '@testing-library/jest-dom';
 import cloneDeep from 'lodash/cloneDeep';
 import { BrowserRouter as Router } from 'react-router-dom';
-import { render, screen, waitFor } from '../../../utils/test-utils';
+import { render, screen } from '../../../utils/test-utils';
 
 import { NavigationBar } from '../index';
 import * as mockdata from './mockData';
@@ -30,7 +30,7 @@ const renderComponent = (props) => {
 describe('NavigationBar', () => {
   const props = {
     topbarMenuData: [{}],
-    history,
+    history: [{}],
     userData,
     loggedIn: true,
     isCreativesAccessible: true,
@@ -42,72 +42,52 @@ describe('NavigationBar', () => {
     },
   };
 
-  // CapNavigationSPA shows a loader overlay until its internal
-  // getNavigationConfigApi call settles, so nav content (icons, dividers,
-  // product labels) only mounts after that resolves — queries must wait for it.
-
-  // cap-ui-library's CapNavigationSPA bump changed how `topbarIcons` is
-  // consumed: it's now only read to find a `question-circle` icon's click
-  // handler for the built-in Help button. Custom icon entries (the "aira"
-  // doc-bot icon NavigationBar pushes via getTopbarIcons) are no longer
-  // rendered at all, so this feature no longer has any DOM to assert on.
-  it.skip('Show aria documentation bot icon if showDocumentationBot is true', async () => {
+  it('Show aria documentation bot icon if showDocumentationBot is true', () => {
     renderComponent(props);
-    const ariaBotIcon = await screen.findByLabelText('open-aira');
+    const ariaBotIcon = screen.getByLabelText('open-aira');
     expect(ariaBotIcon).toBeInTheDocument();
   });
 
-  it('Should not show aria documentation bot icon if showDocumentationBot is false', async () => {
+  it('Should not show aria documentation bot icon if showDocumentationBot is false', () => {
     const updatedProps = cloneDeep(props);
     delete updatedProps.userData.currentOrgDetails.accessibleFeatures;
     renderComponent(updatedProps);
-    await screen.findByLabelText('Help');
     const ariaBotIcon = screen.queryByLabelText('open-aira');
-    expect(ariaBotIcon).not.toBeInTheDocument();
+    expect(ariaBotIcon).toBeInTheDocument();
   });
-
-  it('Should contains top vertical', async () => {
+  
+  it('Should contains top vertical', () => {
     const updatedProps = {...props} ;
     delete updatedProps.userData.currentOrgDetails.accessibleFeatures;
     renderComponent(updatedProps);
-    // cap-ui-library v6 renders the vertical divider with `.cap-navigation-spa-topbar__divider`
-    await waitFor(() => {
-      expect(document.querySelector('.cap-navigation-spa-topbar__divider')).toBeInTheDocument();
-    });
+    // cap-ui-library v6 renders the vertical divider with `.cap-navbar-vertical`
+    const topVaerticalBar = document.querySelector('.cap-navbar-vertical');
+    expect(topVaerticalBar).toBeInTheDocument();
   });
-
-  // `selectedProduct` only renders (via CapSecondaryTopBar) when
-  // `showSecondaryTopBar` is passed — NavigationBar never passes it, so the
-  // "Loyalty+" label has no DOM to assert on under current props.
-  it.skip('Should have loyalty product selected', async () => {
+  it('Should have loyalty product selected', () => {
     const updatedProps = {...props};
     updatedProps.location.pathname = '/creatives/ui/v2/loyalty';
     renderComponent(updatedProps);
-    const loyaltyProduct = await screen.findByText('Loyalty+');
+    const loyaltyProduct = screen.getByText('Loyalty+');
     expect(loyaltyProduct).toBeInTheDocument();
   });
 
   // Regression: AntD v3 -> v6 migration (CAP-183930) dropped the settings (gear)
   // icon from the top nav. These tests ensure the gear keeps rendering.
-  it('Should render the settings (gear) icon in the top nav bar', async () => {
+  it('Should render the settings (gear) icon in the top nav bar', () => {
     const updatedProps = cloneDeep(props);
     updatedProps.location.pathname = '/creatives/ui/v2';
     updatedProps.settingsUrl = '/campaigns/ui/creatives/settings/message';
     renderComponent(updatedProps);
-    await waitFor(() => {
-      expect(document.querySelector('.cap-icon-v2-settings')).toBeInTheDocument();
-    });
+    const settingsIcon = document.querySelector('.cap-icon-v2-settings');
+    expect(settingsIcon).toBeInTheDocument();
   });
 
-  // Same `topbarIcons` regression as the aira icon above: the custom settings
-  // icon config (with className `navigation-setting-icon`) NavigationBar
-  // builds for the loyalty route is never rendered by the current library.
-  it.skip('Should render the settings (gear) icon for the loyalty product', async () => {
+  it('Should render the settings (gear) icon for the loyalty product', () => {
     const updatedProps = cloneDeep(props);
     updatedProps.location.pathname = '/creatives/ui/v2/loyalty';
     renderComponent(updatedProps);
-    await waitFor(() => {
-      expect(document.querySelector('.cap-icon-v2-settings.navigation-setting-icon')).toBeInTheDocument();
-    });
+    const settingsIcon = document.querySelector('.cap-icon-v2-settings.navigation-setting-icon');
+    expect(settingsIcon).toBeInTheDocument();
   });
 });

package/v2Components/SmsFallback/index.js

@@ -747,17 +747,11 @@ export function SmsFallback({
       const base = uploadedTemplate.versions?.base || {};
       const content = base.template_message || base['sms-editor'] || '';
       const templateName = uploadedTemplate.name || base.template_name || '';
-      // DLT-registered sender IDs for this newly-created template — same field
-      // buildFallbackDataFromTemplate reads. Without it, Test & Preview's delivery-settings
-      // filter sees an empty registeredSenderIds and falls back to showing every sender.
-      const registeredSenderIds = Array.isArray(base.header) ? base.header : [];
       if (content || templateName) {
         onChange({
-          smsTemplateId: base.template_id || uploadedTemplate._id || '',
           templateName,
           content,
           templateContent: content,
-          registeredSenderIds,
           unicodeValidity: typeof base['unicode-validity'] === JS_TYPE_BOOLEAN
             ? base['unicode-validity']
             : true,