@capillarytech/creatives-library 8.0.295 → 8.0.297

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

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { render, screen, waitFor } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import CommonTestAndPreview from '../index';
-import { CHANNELS } from '../constants';
+import { CHANNELS, MEDIA_TYPE_CAROUSEL } from '../constants';
 
 // Mock html-to-text
 jest.mock('html-to-text', () => ({
@@ -52,12 +52,14 @@ jest.mock('../CustomValuesEditor', () => {
   };
 });
 
+let lastSendTestMessageProps = null;
 jest.mock('../SendTestMessage', () => {
   // eslint-disable-next-line global-require, import/no-extraneous-dependencies
   const ReactLib = require('react');
   return {
     __esModule: true,
-    default: function MockSendTestMessage() {
+    default: function MockSendTestMessage(props) {
+      lastSendTestMessageProps = props;
       return ReactLib.createElement('div', { 'data-testid': 'send-test-message' }, 'Send Test Message');
     },
   };
@@ -122,6 +124,8 @@ describe('CommonTestAndPreview', () => {
     getPrefilledValuesRequested: jest.fn(),
     clearPrefilledValues: jest.fn(),
     clearPreviewErrors: jest.fn(),
+    getSenderDetailsRequested: jest.fn(),
+    getWeCrmAccountsRequested: jest.fn(),
   };
 
   const defaultProps = {
@@ -171,10 +175,15 @@ describe('CommonTestAndPreview', () => {
     fetchPrefilledValuesErrors: [],
     isSendingTestMessage: false,
     currentTab: 1,
+    senderDetailsByChannel: {},
+    wecrmAccounts: [],
+    isLoadingSenderDetails: false,
+    orgUnitId: -1,
   };
 
   beforeEach(() => {
     jest.clearAllMocks();
+    lastSendTestMessageProps = null;
     // Reset all mock function implementations
     Object.values(mockActions).forEach((mockFn) => {
       if (jest.isMockFunction(mockFn)) {
@@ -183,6 +192,778 @@ describe('CommonTestAndPreview', () => {
     });
   });
 
+  describe('Delivery settings / sender ID', () => {
+    it('should call getSenderDetailsRequested when show and channel is SMS', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...defaultProps} channel={CHANNELS.SMS} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(mockActions.getSenderDetailsRequested).toHaveBeenCalledWith({
+          channel: CHANNELS.SMS,
+          orgUnitId: -1,
+        });
+      });
+    });
+
+    it('should call getSenderDetailsRequested when show and channel is EMAIL', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...defaultProps} channel={CHANNELS.EMAIL} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(mockActions.getSenderDetailsRequested).toHaveBeenCalledWith({
+          channel: CHANNELS.EMAIL,
+          orgUnitId: -1,
+        });
+      });
+    });
+
+    it('should call getSenderDetailsRequested and getWeCrmAccountsRequested when show and channel is WHATSAPP', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...defaultProps} channel={CHANNELS.WHATSAPP} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(mockActions.getSenderDetailsRequested).toHaveBeenCalledWith({
+          channel: CHANNELS.WHATSAPP,
+          orgUnitId: -1,
+        });
+        expect(mockActions.getWeCrmAccountsRequested).toHaveBeenCalledWith({
+          sourceName: CHANNELS.WHATSAPP,
+        });
+      });
+    });
+
+    it('should not call getSenderDetailsRequested when channel is INAPP', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...defaultProps} channel={CHANNELS.INAPP} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(screen.getByTestId('left-panel')).toBeTruthy();
+      });
+      expect(mockActions.getSenderDetailsRequested).not.toHaveBeenCalled();
+      expect(mockActions.getWeCrmAccountsRequested).not.toHaveBeenCalled();
+    });
+
+    it('should pass orgUnitId to getSenderDetailsRequested when provided', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...defaultProps} channel={CHANNELS.SMS} orgUnitId={100} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(mockActions.getSenderDetailsRequested).toHaveBeenCalledWith({
+          channel: CHANNELS.SMS,
+          orgUnitId: 100,
+        });
+      });
+    });
+
+    it('should not call getSenderDetailsRequested when show is false', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...defaultProps} show={false} channel={CHANNELS.SMS} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(screen.queryByTestId('left-panel')).toBeNull();
+      });
+      expect(mockActions.getSenderDetailsRequested).not.toHaveBeenCalled();
+    });
+
+    it('should pass delivery-related props to SendTestMessage for SMS channel', async () => {
+      const senderDetailsByChannel = {
+        [CHANNELS.SMS]: [{ domainId: 1, domainName: 'SMS Dom', gsmSenders: [], cdmaSenders: [] }],
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.SMS}
+            senderDetailsByChannel={senderDetailsByChannel}
+            wecrmAccounts={[]}
+          />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(screen.getByTestId('send-test-message')).toBeTruthy();
+      });
+      expect(lastSendTestMessageProps).toBeDefined();
+      expect(lastSendTestMessageProps.deliverySettings).toBeDefined();
+      expect(lastSendTestMessageProps.senderDetailsOptions).toEqual(senderDetailsByChannel[CHANNELS.SMS]);
+      expect(lastSendTestMessageProps.wecrmAccounts).toEqual([]);
+      expect(typeof lastSendTestMessageProps.onSaveDeliverySettings).toBe('function');
+      expect(lastSendTestMessageProps.isLoadingSenderDetails).toBe(false);
+    });
+
+    it('should pass formDataForSendTest (formData when provided) to SendTestMessage', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...defaultProps} channel={CHANNELS.EMAIL} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      expect(lastSendTestMessageProps.formData).toEqual(defaultProps.formData);
+    });
+
+    it('should auto-set SMS delivery settings from TRAI registered sender IDs when DLT is enabled', async () => {
+      const senderDetailsByChannel = {
+        [CHANNELS.SMS]: [
+          {
+            domainId: 1,
+            dgmId: 11,
+            gsmSenders: [{ value: 'SENDER_A' }],
+            cdmaSenders: [{ value: 'CDMA_A' }],
+          },
+          {
+            domainId: 2,
+            dgmId: 22,
+            gsmSenders: [{ value: 'SENDER_B' }, { value: 'SENDER_C' }],
+            cdmaSenders: [{ value: 'CDMA_B' }],
+          },
+        ],
+      };
+
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.SMS}
+            formData={{
+              templateConfigs: {
+                traiDltEnabled: true,
+                registeredSenderIds: ['SENDER_B'],
+              },
+            }}
+            senderDetailsByChannel={senderDetailsByChannel}
+          />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(lastSendTestMessageProps.deliverySettings).toEqual({
+          domainId: 2,
+          domainGatewayMapId: 22,
+          gsmSenderId: 'SENDER_B',
+          cdmaSenderId: 'CDMA_B',
+        });
+      });
+    });
+
+    it('should preserve existing SMS auto-set logic when TRAI DLT is not enabled', async () => {
+      const senderDetailsByChannel = {
+        [CHANNELS.SMS]: [
+          {
+            domainId: 1,
+            dgmId: 11,
+            gsmSenders: [{ value: 'SENDER_A' }, { value: 'SENDER_A_DEFAULT', default: true }],
+            cdmaSenders: [{ value: 'CDMA_A', default: true }],
+          },
+          {
+            domainId: 2,
+            dgmId: 22,
+            gsmSenders: [{ value: 'SENDER_B' }],
+            cdmaSenders: [{ value: 'CDMA_B' }],
+          },
+        ],
+      };
+
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.SMS}
+            formData={{
+              templateConfigs: {
+                traiDltEnabled: false,
+                registeredSenderIds: ['SENDER_B'],
+              },
+            }}
+            senderDetailsByChannel={senderDetailsByChannel}
+          />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(lastSendTestMessageProps.deliverySettings).toEqual({
+          domainId: 1,
+          domainGatewayMapId: 11,
+          gsmSenderId: 'SENDER_A_DEFAULT',
+          cdmaSenderId: 'CDMA_A',
+        });
+      });
+    });
+
+    it('should keep SMS delivery settings empty when DLT is enabled and no registered sender ID matches', async () => {
+      const senderDetailsByChannel = {
+        [CHANNELS.SMS]: [
+          {
+            domainId: 1,
+            dgmId: 11,
+            gsmSenders: [{ value: 'SENDER_A' }],
+            cdmaSenders: [{ value: 'CDMA_A' }],
+          },
+        ],
+      };
+
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.SMS}
+            formData={{
+              templateConfigs: {
+                traiDltEnabled: true,
+                registeredSenderIds: ['SENDER_X'],
+              },
+            }}
+            senderDetailsByChannel={senderDetailsByChannel}
+          />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+
+      expect(lastSendTestMessageProps.deliverySettings).toEqual({
+        domainId: null,
+        domainGatewayMapId: null,
+        gsmSenderId: '',
+        cdmaSenderId: '',
+      });
+    });
+
+    it('should auto-set WhatsApp delivery settings from formData accountName when matching account exists', async () => {
+      const senderDetailsByChannel = {
+        [CHANNELS.WHATSAPP]: [
+          {
+            domainId: 1,
+            sourceAccountIdentifier: 'waba-1',
+            gsmSenders: [{ value: '+1111111111' }],
+          },
+          {
+            domainId: 2,
+            sourceAccountIdentifier: 'waba-2',
+            gsmSenders: [{ value: '+2222222222' }],
+          },
+        ],
+      };
+      const wecrmAccounts = [
+        { name: 'Account One', sourceAccountIdentifier: 'waba-1' },
+        { name: 'Account Two', sourceAccountIdentifier: 'waba-2' },
+      ];
+
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.WHATSAPP}
+            formData={{ accountName: 'Account Two', templateMsg: 'WhatsApp test' }}
+            senderDetailsByChannel={senderDetailsByChannel}
+            wecrmAccounts={wecrmAccounts}
+          />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+        expect(lastSendTestMessageProps.deliverySettings).toEqual({
+          domainId: 2,
+          senderMobNum: '+2222222222',
+          sourceAccountIdentifier: 'waba-2',
+        });
+      });
+    });
+
+    it('should include delivery settings in payload when handleSendTestMessage is called for EMAIL', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...defaultProps} channel={CHANNELS.EMAIL} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+        expect(typeof lastSendTestMessageProps.handleSendTestMessage).toBe('function');
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      expect(mockActions.createMessageMetaRequested).toHaveBeenCalled();
+      const [initialPayload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      expect(initialPayload.emailDeliverySettings).toBeDefined();
+      expect(initialPayload.emailDeliverySettings.channelSettings).toBeDefined();
+      expect(initialPayload.emailDeliverySettings.channelSettings.channel).toBe(CHANNELS.EMAIL);
+    });
+
+    it('should include delivery settings in payload when handleSendTestMessage is called for SMS', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.SMS}
+            formData={{ 'sms-editor': 'Test SMS' }}
+          />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      expect(mockActions.createMessageMetaRequested).toHaveBeenCalled();
+      const [initialPayload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      expect(initialPayload.smsDeliverySettings).toBeDefined();
+      expect(initialPayload.smsDeliverySettings.channelSettings).toBeDefined();
+      expect(initialPayload.smsDeliverySettings.channelSettings.channel).toBe(CHANNELS.SMS);
+    });
+  });
+
+  describe('Carousel payload (getCarouselMappedData) - handleSendTestMessage', () => {
+    it('should map empty carouselData to empty cards when mediaType is CAROUSEL', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+        expect(typeof lastSendTestMessageProps.handleSendTestMessage).toBe('function');
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      expect(mockActions.createMessageMetaRequested).toHaveBeenCalled();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      expect(payload.whatsappMessageContent.templateConfigs.cards).toEqual([]);
+      expect(payload.whatsappMessageContent.templateConfigs.mediaType).toBe('IMAGE');
+    });
+
+    it('should map carousel with IMAGE media and bodyText to cards with media.url', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselMediaType: 'IMAGE',
+          carouselData: [
+            {
+              bodyText: 'Card body',
+              imageUrl: 'https://image.example.com/1.jpg',
+              mediaType: 'image',
+              buttons: [],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const cards = payload.whatsappMessageContent.templateConfigs.cards;
+      expect(cards).toHaveLength(1);
+      expect(cards[0].body).toBe('Card body');
+      expect(cards[0].media).toEqual({ url: 'https://image.example.com/1.jpg' });
+      expect(cards[0].mediaType).toBe('IMAGE');
+      expect(cards[0].buttons).toEqual([]);
+      expect(payload.whatsappMessageContent.templateConfigs.mediaType).toBe('IMAGE');
+    });
+
+    it('should map carousel with VIDEO media to cards with url and previewUrl', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselMediaType: 'VIDEO',
+          carouselData: [
+            {
+              bodyText: 'Video card',
+              videoUrl: 'https://video.example.com/1.mp4',
+              videoPreviewImg: 'https://preview.example.com/1.jpg',
+              mediaType: 'video',
+              buttons: [],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const cards = payload.whatsappMessageContent.templateConfigs.cards;
+      expect(cards).toHaveLength(1);
+      expect(cards[0].body).toBe('Video card');
+      expect(cards[0].media).toEqual({
+        url: 'https://video.example.com/1.mp4',
+        previewUrl: 'https://preview.example.com/1.jpg',
+      });
+      expect(cards[0].mediaType).toBe('VIDEO');
+      expect(payload.whatsappMessageContent.templateConfigs.mediaType).toBe('VIDEO');
+    });
+
+    it('should map button type PHONE_NUMBER to buttonObj with phoneNumber', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [
+            {
+              bodyText: 'Card',
+              mediaType: 'image',
+              imageUrl: 'https://img.url',
+              buttons: [
+                { type: 'PHONE_NUMBER', text: 'Call', phone_number: '+1234567890' },
+              ],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const buttons = payload.whatsappMessageContent.templateConfigs.cards[0].buttons;
+      expect(buttons).toHaveLength(1);
+      expect(buttons[0].type).toBe('PHONE_NUMBER');
+      expect(buttons[0].text).toBe('Call');
+      expect(buttons[0].index).toBe(0);
+      expect(buttons[0].phoneNumber).toBe('+1234567890');
+    });
+
+    it('should map button type URL without DYNAMIC_URL to buttonObj with url only', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [
+            {
+              bodyText: 'Card',
+              mediaType: 'image',
+              imageUrl: 'https://img.url',
+              buttons: [
+                { type: 'URL', text: 'Open', urlType: 'STATIC', url: 'https://example.com' },
+              ],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const buttons = payload.whatsappMessageContent.templateConfigs.cards[0].buttons;
+      expect(buttons[0].type).toBe('URL');
+      expect(buttons[0].url).toBe('https://example.com');
+      expect(buttons[0].dynamicUrlPayload).toBeUndefined();
+    });
+
+    it('should set dynamicUrlPayload when button type URL and urlType DYNAMIC_URL with single template', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [
+            {
+              bodyText: 'Card',
+              mediaType: 'image',
+              imageUrl: 'https://img.url',
+              buttons: [
+                { type: 'URL', text: 'Open', urlType: 'DYNAMIC_URL', url: 'https://example.com/{{id}}' },
+              ],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const buttons = payload.whatsappMessageContent.templateConfigs.cards[0].buttons;
+      expect(buttons[0].url).toBe('https://example.com/{{id}}');
+      expect(buttons[0].dynamicUrlPayload).toBe('{{id}}');
+    });
+
+    it('should set dynamicUrlPayload to empty when urlType DYNAMIC_URL but multiple or zero matches', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [
+            {
+              bodyText: 'Card',
+              mediaType: 'image',
+              imageUrl: 'https://img.url',
+              buttons: [
+                { type: 'URL', text: 'Open', urlType: 'DYNAMIC_URL', url: 'https://example.com/{{a}}{{b}}' },
+              ],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const buttons = payload.whatsappMessageContent.templateConfigs.cards[0].buttons;
+      expect(buttons[0].dynamicUrlPayload).toBe('');
+    });
+
+    it('should set dynamicUrlPayload to empty when urlType DYNAMIC_URL and url is null/undefined', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [
+            {
+              bodyText: 'Card',
+              mediaType: 'image',
+              imageUrl: 'https://img.url',
+              buttons: [
+                { type: 'URL', text: 'Open', urlType: 'DYNAMIC_URL', url: null },
+              ],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const buttons = payload.whatsappMessageContent.templateConfigs.cards[0].buttons;
+      expect(buttons[0].dynamicUrlPayload).toBe('');
+    });
+
+    it('should pass through cardVarMapped and bodyTemplate on each card', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [
+            {
+              bodyText: 'Body',
+              cardVarMapped: { foo: 'bar' },
+              bodyTemplate: 'Body {{foo}}',
+              mediaType: 'image',
+              imageUrl: 'https://img.url',
+              buttons: [],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const card = payload.whatsappMessageContent.templateConfigs.cards[0];
+      expect(card.cardVarMapped).toEqual({ foo: 'bar' });
+      expect(card.bodyTemplate).toBe('Body {{foo}}');
+    });
+
+    it('should not add media url when mediaType is neither image nor video', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [
+            {
+              bodyText: 'Card',
+              mediaType: 'DOCUMENT',
+              imageUrl: 'https://img.url',
+              videoUrl: 'https://video.url',
+              buttons: [],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const card = payload.whatsappMessageContent.templateConfigs.cards[0];
+      expect(card.media).toEqual({});
+      expect(card.mediaType).toBe('DOCUMENT');
+    });
+
+    it('should handle multiple carousel cards with mixed button types', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [
+            {
+              bodyText: 'First',
+              mediaType: 'image',
+              imageUrl: 'https://first.jpg',
+              buttons: [{ type: 'PHONE_NUMBER', text: 'Call', phone_number: '+111' }],
+            },
+            {
+              bodyText: 'Second',
+              mediaType: 'video',
+              videoUrl: 'https://second.mp4',
+              videoPreviewImg: 'https://second-prev.jpg',
+              buttons: [{ type: 'URL', text: 'Link', urlType: 'DYNAMIC_URL', url: 'https://x/{{only}}' }],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const cards = payload.whatsappMessageContent.templateConfigs.cards;
+      expect(cards).toHaveLength(2);
+      expect(cards[0].body).toBe('First');
+      expect(cards[0].media.url).toBe('https://first.jpg');
+      expect(cards[0].buttons[0].phoneNumber).toBe('+111');
+      expect(cards[1].body).toBe('Second');
+      expect(cards[1].media.url).toBe('https://second.mp4');
+      expect(cards[1].media.previewUrl).toBe('https://second-prev.jpg');
+      expect(cards[1].buttons[0].dynamicUrlPayload).toBe('{{only}}');
+    });
+
+    it('should use carouselMediaType for templateConfigs.mediaType when provided', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselMediaType: 'VIDEO',
+          carouselData: [
+            { bodyText: 'Card', mediaType: 'image', imageUrl: 'https://img.url', buttons: [] },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      expect(payload.whatsappMessageContent.templateConfigs.mediaType).toBe('VIDEO');
+    });
+
+    it('should default templateConfigs.mediaType to IMAGE when carouselMediaType is missing', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [
+            { bodyText: 'Card', mediaType: 'image', imageUrl: 'https://img.url', buttons: [] },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      expect(payload.whatsappMessageContent.templateConfigs.mediaType).toBe('IMAGE');
+    });
+  });
+
   describe('Component Rendering', () => {
     it('should render when show is true', async () => {
       render(