@capillarytech/creatives-library 9.0.15-alpha.3 → 9.0.16-beta.0

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

@@ -9,16 +9,7 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { injectIntl, IntlProvider } from 'react-intl';
 import UnifiedPreview from '../../UnifiedPreview';
-import {
-  CHANNELS,
-  DESKTOP,
-  TABLET,
-  MOBILE,
-  ANDROID,
-  IOS,
-  PREVIEW_TAB_RCS,
-  PREVIEW_TAB_SMS_FALLBACK,
-} from '../../constants';
+import { CHANNELS, DESKTOP, TABLET, MOBILE, ANDROID, IOS } from '../../constants';
 import messages from '../../messages';
 
 // Convert messages object to format expected by IntlProvider
@@ -571,195 +562,6 @@ describe('UnifiedPreview', () => {
 
       expect(screen.getByTestId('rcs-sender-id')).toHaveTextContent('RCS_SENDER');
     });
-
-    describe('RCS SMS fallback — Test & Preview tabs', () => {
-      it('without SMS fallback selected, shows only RCS preview (no RCS+SMS tab layout)', () => {
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.RCS,
-          content: { rcsTitle: 'Hello RCS' },
-          smsFallbackContent: undefined,
-        };
-
-        const { container } = render(
-          <TestWrapper>
-            <ComponentToRender {...props} />
-          </TestWrapper>
-        );
-
-        expect(container.querySelector('.unified-preview-rcs-tabs')).toBeNull();
-        expect(screen.getByTestId('rcs-preview')).toBeInTheDocument();
-        expect(screen.queryByTestId('sms-preview')).not.toBeInTheDocument();
-      });
-
-      it('with SMS fallback template body, shows RCS and Fallback SMS tabs', () => {
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.RCS,
-          content: { rcsTitle: 'Hello RCS' },
-          smsFallbackContent: {
-            content: 'SMS fallback body',
-            templateContent: 'SMS fallback body',
-          },
-        };
-
-        const { container } = render(
-          <TestWrapper>
-            <ComponentToRender {...props} />
-          </TestWrapper>
-        );
-
-        expect(container.querySelector('.unified-preview-rcs-tabs')).toBeInTheDocument();
-        expect(
-          screen.getByRole('tab', { name: messages.rcsTab.defaultMessage })
-        ).toBeInTheDocument();
-        expect(
-          screen.getByRole('tab', { name: messages.smsFallbackTab.defaultMessage })
-        ).toBeInTheDocument();
-      });
-
-      it('on SMS fallback tab, renders SMS preview with resolved fallback text when smsFallbackResolvedText is set', () => {
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.RCS,
-          content: { rcsTitle: 'Hello RCS' },
-          smsFallbackContent: {
-            content: '{{var}}',
-            templateContent: '{{var}}',
-          },
-          smsFallbackResolvedText: 'Resolved SMS for preview',
-          activePreviewTab: PREVIEW_TAB_SMS_FALLBACK,
-          onPreviewTabChange: jest.fn(),
-        };
-
-        render(
-          <TestWrapper>
-            <ComponentToRender {...props} />
-          </TestWrapper>
-        );
-
-        expect(screen.getByTestId('sms-content')).toHaveTextContent('Resolved SMS for preview');
-      });
-
-      it('on RCS tab (default), renders RCS preview when dual tabs are shown', () => {
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.RCS,
-          content: { rcsTitle: 'Only RCS pane' },
-          smsFallbackContent: { content: 'SMS', templateContent: 'SMS' },
-          activePreviewTab: PREVIEW_TAB_RCS,
-          onPreviewTabChange: jest.fn(),
-        };
-
-        render(
-          <TestWrapper>
-            <ComponentToRender {...props} />
-          </TestWrapper>
-        );
-
-        expect(screen.getByTestId('rcs-preview')).toBeInTheDocument();
-        expect(screen.getByTestId('rcs-content')).toHaveTextContent(/Only RCS pane/);
-      });
-
-      it('on SMS fallback tab, shows raw template when no varmap and no resolved text', () => {
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.RCS,
-          content: { rcsTitle: 'Hello RCS' },
-          smsFallbackContent: {
-            content: 'Hello {{name}}',
-            templateContent: 'Hello {{name}}',
-            // no rcsSmsFallbackVarMapped
-          },
-          smsFallbackResolvedText: undefined,
-          activePreviewTab: PREVIEW_TAB_SMS_FALLBACK,
-          onPreviewTabChange: jest.fn(),
-        };
-
-        render(
-          <TestWrapper>
-            <ComponentToRender {...props} />
-          </TestWrapper>
-        );
-
-        // rawFallbackTemplate is shown directly — {{tags}} remain visible
-        expect(screen.getByTestId('sms-content')).toHaveTextContent('Hello {{name}}');
-      });
-
-      it('on SMS fallback tab, treats empty resolved text as absent and shows raw template', () => {
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.RCS,
-          content: { rcsTitle: 'Hello RCS' },
-          smsFallbackContent: {
-            content: 'Raw {{var}} template',
-            templateContent: 'Raw {{var}} template',
-          },
-          smsFallbackResolvedText: '',
-          activePreviewTab: PREVIEW_TAB_SMS_FALLBACK,
-          onPreviewTabChange: jest.fn(),
-        };
-
-        render(
-          <TestWrapper>
-            <ComponentToRender {...props} />
-          </TestWrapper>
-        );
-
-        expect(screen.getByTestId('sms-content')).toHaveTextContent('Raw {{var}} template');
-      });
-
-      it('on SMS fallback tab, applies varmap slot substitution when varmap entries exist and no resolved text', () => {
-        // getFallbackResolvedContent key format: `${fullToken}_${segmentIndex}`
-        // 'Hello {{name}}' → segments ['Hello ', '{{name}}'], so {{name}} is at index 1 → key '{{name}}_1'
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.RCS,
-          content: { rcsTitle: 'Hello RCS' },
-          smsFallbackContent: {
-            content: 'Hello {{name}}',
-            templateContent: 'Hello {{name}}',
-            rcsSmsFallbackVarMapped: { '{{name}}_1': 'World' },
-          },
-          smsFallbackResolvedText: undefined,
-          activePreviewTab: PREVIEW_TAB_SMS_FALLBACK,
-          onPreviewTabChange: jest.fn(),
-        };
-
-        render(
-          <TestWrapper>
-            <ComponentToRender {...props} />
-          </TestWrapper>
-        );
-
-        expect(screen.getByTestId('sms-content')).toHaveTextContent('Hello World');
-      });
-
-      it('on SMS fallback tab, resolved text takes priority over varmap entries', () => {
-        const props = {
-          ...defaultProps,
-          channel: CHANNELS.RCS,
-          content: { rcsTitle: 'Hello RCS' },
-          smsFallbackContent: {
-            content: 'Hello {{name}}',
-            templateContent: 'Hello {{name}}',
-            rcsSmsFallbackVarMapped: { '{{name}}_1': 'World' },
-          },
-          smsFallbackResolvedText: 'Hello John',
-          activePreviewTab: PREVIEW_TAB_SMS_FALLBACK,
-          onPreviewTabChange: jest.fn(),
-        };
-
-        render(
-          <TestWrapper>
-            <ComponentToRender {...props} />
-          </TestWrapper>
-        );
-
-        // resolvedText wins over varmap substitution
-        expect(screen.getByTestId('sms-content')).toHaveTextContent('Hello John');
-      });
-    });
   });
 
   describe('Channel Routing - INAPP', () => {

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

@@ -30,28 +30,23 @@ jest.mock('@capillarytech/cap-ui-library/CapNotification', () => ({
 }));
 
 // Mock child components - must use React.createElement to avoid hoisting issues
-let lastLeftPanelContentProps = null;
 jest.mock('../LeftPanelContent', () => {
   // eslint-disable-next-line global-require, import/no-extraneous-dependencies
   const ReactLib = require('react');
   return {
     __esModule: true,
-    default: function MockLeftPanelContent(props) {
-      lastLeftPanelContentProps = props;
-      const editorEl = props.renderCustomValuesEditor ? props.renderCustomValuesEditor() : null;
-      return ReactLib.createElement('div', { 'data-testid': 'left-panel' }, 'Left Panel', editorEl);
+    default: function MockLeftPanelContent() {
+      return ReactLib.createElement('div', { 'data-testid': 'left-panel' }, 'Left Panel');
     },
   };
 });
 
-let lastCustomValuesEditorProps = null;
 jest.mock('../CustomValuesEditor', () => {
   // eslint-disable-next-line global-require, import/no-extraneous-dependencies
   const ReactLib = require('react');
   return {
     __esModule: true,
-    default: function MockCustomValuesEditor(props) {
-      lastCustomValuesEditorProps = props;
+    default: function MockCustomValuesEditor() {
       return ReactLib.createElement('div', { 'data-testid': 'custom-values-editor' }, 'Custom Values Editor');
     },
   };
@@ -196,8 +191,6 @@ describe('CommonTestAndPreview', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     lastSendTestMessageProps = null;
-    lastLeftPanelContentProps = null;
-    lastCustomValuesEditorProps = null;
     // Reset all mock function implementations
     Object.values(mockActions).forEach((mockFn) => {
       if (jest.isMockFunction(mockFn)) {
@@ -252,25 +245,6 @@ describe('CommonTestAndPreview', () => {
       });
     });
 
-    it('should call getSenderDetailsRequested for RCS and SMS when channel is RCS', async () => {
-      render(
-        <TestWrapper>
-          <CommonTestAndPreview {...defaultProps} channel={CHANNELS.RCS} />
-        </TestWrapper>
-      );
-      await waitFor(() => {
-        expect(mockActions.getSenderDetailsRequested).toHaveBeenCalledTimes(2);
-        expect(mockActions.getSenderDetailsRequested).toHaveBeenNthCalledWith(1, {
-          channel: CHANNELS.RCS,
-          orgUnitId: -1,
-        });
-        expect(mockActions.getSenderDetailsRequested).toHaveBeenNthCalledWith(2, {
-          channel: CHANNELS.SMS,
-          orgUnitId: -1,
-        });
-      });
-    });
-
     it('should not call getSenderDetailsRequested when channel is INAPP', async () => {
       render(
         <TestWrapper>
@@ -329,7 +303,7 @@ describe('CommonTestAndPreview', () => {
       });
       expect(lastSendTestMessageProps).toBeDefined();
       expect(lastSendTestMessageProps.deliverySettings).toBeDefined();
-      expect(lastSendTestMessageProps.senderDetailsByChannel).toEqual(senderDetailsByChannel);
+      expect(lastSendTestMessageProps.senderDetailsOptions).toEqual(senderDetailsByChannel[CHANNELS.SMS]);
       expect(lastSendTestMessageProps.wecrmAccounts).toEqual([]);
       expect(typeof lastSendTestMessageProps.onSaveDeliverySettings).toBe('function');
       expect(lastSendTestMessageProps.isLoadingSenderDetails).toBe(false);
@@ -3501,107 +3475,4 @@ describe('CommonTestAndPreview', () => {
       });
     });
   });
-
-  describe('SMS DLT and mustache tag discrimination (smsTemplateHasMustacheTags / buildSyntheticSmsMustacheTags)', () => {
-    it('should return no tags for SMS content that contains only DLT {#var#} tokens', async () => {
-      render(
-        <TestWrapper>
-          <CommonTestAndPreview
-            {...defaultProps}
-            channel={CHANNELS.SMS}
-            formData={{ 0: { 'sms-editor': 'Order {#orderId#} is confirmed' } }}
-            extractedTags={[]}
-          />
-        </TestWrapper>
-      );
-
-      await waitFor(() => expect(lastLeftPanelContentProps).not.toBeNull());
-
-      // smsTemplateHasMustacheTags returns false for DLT-only → extractedTags is []
-      expect(lastLeftPanelContentProps.extractedTags).toEqual([]);
-    });
-
-    it('should build synthetic tags from {{mustache}} tokens, excluding DLT {#var#} tokens', async () => {
-      render(
-        <TestWrapper>
-          <CommonTestAndPreview
-            {...defaultProps}
-            channel={CHANNELS.SMS}
-            formData={{ 0: { 'sms-editor': 'Hi {{name}}, order {#orderId#} shipped' } }}
-            extractedTags={[]}
-          />
-        </TestWrapper>
-      );
-
-      await waitFor(() => expect(lastLeftPanelContentProps).not.toBeNull());
-
-      const tags = lastLeftPanelContentProps.extractedTags;
-      // Only {{name}} should become a tag — {#orderId#} must be excluded
-      expect(tags).toHaveLength(1);
-      expect(tags[0].name).toBe('name');
-    });
-
-    it('should use API-extracted tags when present instead of building synthetic ones', async () => {
-      const apiTags = [{ name: 'firstName', metaData: { userDriven: true }, children: [] }];
-      render(
-        <TestWrapper>
-          <CommonTestAndPreview
-            {...defaultProps}
-            channel={CHANNELS.SMS}
-            formData={{ 0: { 'sms-editor': 'Hi {{firstName}}' } }}
-            extractedTags={apiTags}
-          />
-        </TestWrapper>
-      );
-
-      await waitFor(() => expect(lastLeftPanelContentProps).not.toBeNull());
-
-      // API tags take priority over buildSyntheticSmsMustacheTags
-      expect(lastLeftPanelContentProps.extractedTags).toEqual(apiTags);
-    });
-  });
-
-  describe('handleDiscardCustomValues — preview reset', () => {
-    it('should call updatePreviewRequested when handleDiscardCustomValues is invoked', async () => {
-      render(
-        <TestWrapper>
-          <CommonTestAndPreview
-            {...defaultProps}
-            channel={CHANNELS.SMS}
-            formData={{ 0: { 'sms-editor': 'Hi {{name}}' } }}
-          />
-        </TestWrapper>
-      );
-
-      await waitFor(() => expect(lastCustomValuesEditorProps).not.toBeNull());
-
-      lastCustomValuesEditorProps.handleDiscardCustomValues();
-
-      expect(mockActions.updatePreviewRequested).toHaveBeenCalledTimes(1);
-    });
-
-    it('should call updatePreviewRequested with RCS channel when handleDiscardCustomValues is invoked for RCS with fallback', async () => {
-      render(
-        <TestWrapper>
-          <CommonTestAndPreview
-            {...defaultProps}
-            channel={CHANNELS.RCS}
-            smsFallbackContent={{
-              templateContent: 'Fallback {{name}}',
-              content: 'Fallback {{name}}',
-            }}
-            formData={{}}
-          />
-        </TestWrapper>
-      );
-
-      await waitFor(() => expect(lastCustomValuesEditorProps).not.toBeNull());
-
-      lastCustomValuesEditorProps.handleDiscardCustomValues();
-
-      // updatePreviewRequested is called; syncSmsFallbackPreview (which hits Api directly) is NOT called
-      expect(mockActions.updatePreviewRequested).toHaveBeenCalledTimes(1);
-    });
-  });
 });
-

package/v2Components/CommonTestAndPreview/tests/sagas.test.js

@@ -5,7 +5,7 @@
  */
 
 import {
-  call, put, takeLatest, takeEvery, all, take, fork, cancel,
+  call, put, takeLatest, all,
 } from 'redux-saga/effects';
 import {
   searchCustomersSaga,
@@ -1333,26 +1333,9 @@ describe('CommonTestAndPreview Sagas', () => {
     it('should watch for GET_SENDER_DETAILS_REQUESTED', () => {
       const generator = watchGetSenderDetails();
       expect(generator.next().value).toEqual(
-        take('app/CommonTestAndPreview/GET_SENDER_DETAILS_REQUESTED')
-      );
-      const firstAction = {
-        payload: { channel: 'RCS', orgUnitId: 10 },
-      };
-      expect(generator.next(firstAction).value).toEqual(
-        fork(getSenderDetailsSaga, firstAction)
-      );
-      expect(generator.next({ '@@redux-saga/TASK': true }).value).toEqual(
-        take('app/CommonTestAndPreview/GET_SENDER_DETAILS_REQUESTED')
-      );
-      const secondAction = {
-        payload: { channel: 'RCS', orgUnitId: 20 },
-      };
-      expect(generator.next(secondAction).value).toEqual(
-        cancel({ '@@redux-saga/TASK': true })
-      );
-      expect(generator.next().value).toEqual(
-        fork(getSenderDetailsSaga, secondAction)
+        takeLatest('app/CommonTestAndPreview/GET_SENDER_DETAILS_REQUESTED', getSenderDetailsSaga)
       );
+      expect(generator.next().done).toBe(true);
     });
 
     it('should watch for GET_WECRM_ACCOUNTS_REQUESTED', () => {
@@ -1471,24 +1454,34 @@ describe('CommonTestAndPreview Sagas', () => {
       const action = { payload: {} };
       const generator = getWeCrmAccountsSaga(action);
       generator.next();
-      const throwResult = generator.throw(new Error('API failed'));
-      expect(throwResult.value).toEqual(
+      const err = generator.throw(new Error('API failed'));
+      expect(err.value).toEqual(
         put({ type: GET_WECRM_ACCOUNTS_FAILURE, payload: { error: 'API failed' } })
       );
       expect(generator.next().done).toBe(true);
     });
   });
 
-  it('should initialize all watcher sagas', () => {
-    const generator = commonTestAndPreviewSaga();
+  describe('commonTestAndPreviewSaga', () => {
+    it('should fork all watcher sagas', () => {
+      const generator = commonTestAndPreviewSaga();
 
-    const effect = generator.next().value;
+      expect(generator.next().value).toEqual(
+        all([
+          watchSearchCustomers(),
+          watchExtractTags(),
+          watchUpdatePreview(),
+          watchSendTestMessage(),
+          watchFetchTestCustomers(),
+          watchFetchTestGroups(),
+          watchCreateMessageMeta(),
+          watchGetPrefilledValues(),
+          watchGetSenderDetails(),
+          watchGetWeCrmAccounts(),
+        ])
+      );
 
-    // redux-saga v0.x stores the array under effect[ALL] key; v1.x uses effect.payload
-    const effectData = effect?.payload || effect?.ALL;
-    const watchers = Array.isArray(effectData) ? effectData : Object.values(effectData || {});
-    expect(Array.isArray(watchers)).toBe(true);
-    expect(watchers.length).toBeGreaterThan(0);
-    expect(generator.next().done).toBe(true);
+      expect(generator.next().done).toBe(true);
+    });
   });
 });

package/v2Components/NavigationBar/index.js

@@ -12,8 +12,10 @@ 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/CapNavigation';
+import CapNavigation from '@capillarytech/cap-ui-library/CapNavigationSPA';
 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';
@@ -30,12 +32,11 @@ 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;
@@ -46,10 +47,8 @@ const CapWrapper = styled.div`
 `;
 
 const ComponentWrapper = styled.div`
-  max-width: 1140px;
-  margin: 0 auto;
   width: 100%;
-  padding: 24px 0;
+  padding: 0;
 `;
 
 export class NavigationBar extends React.Component {
@@ -58,6 +57,7 @@ export class NavigationBar extends React.Component {
     this.state = this.initializeSelectedProduct();
   }
 
+
   initializeSelectedProduct = () => {
     const { location, intl: { formatMessage } } = this.props;
     const { pathname } = location;
@@ -179,6 +179,7 @@ export class NavigationBar extends React.Component {
     const topbarIcons = this.getTopbarIcons(showDocumentationBot);
     const headerOverideCss = leftNavbarExpandedProp ? CapLeftNavigatioOpenCss : CapLeftNavigationCss;
     return (
+      <>
       <CapNavigation
         className="creatives-main-container"
         showContent
@@ -212,7 +213,8 @@ export class NavigationBar extends React.Component {
           </CapWrapper>
         </div>
       </CapNavigation>
-
+        <MFEModuleHeader history={this.props.history} {...MFE_MODULE_HEADER} />
+      </>
     );
   }
 }

package/v2Components/NavigationBar/mfeModuleHeader.config.js

@@ -0,0 +1,16 @@
+// Static, module-specific config for the shared MFE module-header wrapper
+// (MFEModuleHeader). Runtime values (history) are supplied in NavigationBar.
+export const MFE_MODULE_HEADER = {
+  header: {
+    name: 'Creatives',
+    description: 'Store your creative templates for all your channels',
+    showBorder: false,
+    showSettings: false,
+  },
+  landingRoutes: [
+    '/creatives/ui/v2/',
+    '/creatives/ui/v2',
+    '/v2/',
+    '/v2'
+  ],
+};

package/v2Components/Pagination/_pagination.scss

@@ -2,6 +2,8 @@
   height: calc(100vh - 20rem);
   overflow-y: auto;
   overflow-x: hidden;
+  margin-right: -24px;
+  padding-right: 24px;
 }
 
 .v2-pagination-container.full-height {

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -13,7 +13,9 @@
 
 .shell-v2 {
   position: relative;
-  margin: 0 auto;
+  -webkit-transform: translate(-50%);
+  transform: translate(-50%);
+  left: 50%;
   padding: 0 10px;
   width: 450px;
 
@@ -535,21 +537,20 @@
       .unicode-disabled{
         font-size: 16px;
       }
-      position: absolute;
-      overflow: auto;
-      top: 0;
-      left: 17%;
-      white-space: pre-wrap;
-      word-break: break-word;
-      max-height: 100%;
-      line-height: 0.875rem;
-      font-size: 0.625rem;
-      font-family: 'open-sans';
-
       &.sms {
+        max-height: 100%;
+        position: absolute;
         // width: initial;
+        overflow: auto;
+        top: 0;
+        left: 17%;
+        white-space: pre-wrap;
+        word-break: break-word;
+        line-height: 14px;
         padding: 0 8px 8px 8px;
+        font-size: 10px;
         width: 100%;
+        font-family: 'open-sans';
         .rcs-image{
           width: 100%;
           height: 123px;
@@ -570,9 +571,6 @@
             margin-top: 0;
             padding: 4px 8px;
           }
-          &.rcs-desc {
-            margin-top: $CAP_SPACE_08;
-          }
           &.rcs-button-text{
             color: $FONT_COLOR_05;
             .rcs-icon{
@@ -584,12 +582,22 @@
       &:not(.sms){
         padding: 4px;
         background: #3F51B5;
+        position: absolute;
         // width: initial;
+        overflow: auto;
+        top: 0;
+        left: 17%;
+        white-space: pre-wrap;
+        word-break: break-word;
         border-radius: 4px;
+        max-height: 100%;
         color: #FFFFFF;
         width: 70%;
         min-height: 26px;
+        line-height: 14px;
         padding: 8px;
+        font-size: 10px;
+        font-family: 'open-sans';
       }
       &.message-pop-carousel {
         position: relative; 
@@ -834,13 +842,9 @@
 
   .msg-container-carousel {
     display: flex;
-    width: 100%;
     .scroll-container {
       overflow-x: auto;
-      overflow-y: hidden;
       display: flex;
-      flex-wrap: nowrap;
-      width: 100%;
       padding-top: $CAP_SPACE_06;
       padding-right: $CAP_SPACE_06;
       white-space: nowrap;
@@ -861,32 +865,6 @@
   }
 }
 
-.shell-v2.rcs-preview {
-  // Collapse the default 8px margin so the divider renders as a clean hairline, not a white gap.
-  .whatsapp-divider {
-    margin: 0;
-  }
-
-  // Override `.message-pop:not(.sms)` (blue background) for RCS carousel cards.
-  .msg-container.sms {
-    .message-pop.sms {
-      .rcs-carousel-card {
-        background: $CAP_WHITE;
-        color: $CAP_G01;
-        width: 10.4rem;
-        left: 0;
-        flex-shrink: 0;
-        padding: $CAP_SPACE_04 0 $CAP_SPACE_08;
-        border-radius: $CAP_SPACE_04; // 4px (Figma RCS carousel card corner)
-
-        .carousel-title {
-          font-weight: 700 !important;
-        }
-      }
-    }
-  }
-}
-
 .align-center {
   text-align: center;
 }
@@ -1085,6 +1063,8 @@
 }
 .video-icon {
   position: absolute;
+  right: -17px;
+  bottom: -17px;
 }
 
 .zalo-preview-container {