@capillarytech/creatives-library 8.0.129 → 8.0.131

package/v2Containers/MobilePushNew/components/tests/MediaUploaders.test.js

@@ -8,6 +8,8 @@ import { initialReducer } from '../../../../initialReducer';
 import history from '../../../../utils/history';
 import MediaUploaders from '../MediaUploaders';
 import { ANDROID, IOS } from '../../constants';
+import { act } from 'react';
+import messages from '../../messages';
 
 // Mock the upload components
 jest.mock('../../../../v2Components/CapImageUpload', () => 
@@ -21,6 +23,16 @@ jest.mock('../../../../v2Components/CapImageUpload', () =>
         >
           Upload Image
         </button>
+        <button
+          type="button"
+          onClick={() => {
+            props.updateOnReUpload();
+            props.updateImageSrc('mock-image-url');
+          }}
+          data-testid="image-reupload-button"
+        >
+          Re-upload Image
+        </button>
       </div>
     );
   }
@@ -117,55 +129,63 @@ jest.mock('@capillarytech/cap-ui-library/CapIcon', () =>
   }
 );
 
-jest.mock('@capillarytech/cap-ui-library/CapCheckbox', () => 
-  function MockCapCheckbox({ checked, onChange, children, className }) {
+// Mock the CapCheckbox component
+jest.mock('@capillarytech/cap-ui-library/CapCheckbox', () => ({
+  __esModule: true,
+  default: function MockCapCheckbox({ checked, onChange, children, ...props }) {
     return (
-      <label className={className}>
+      <label>
         <input
           type="checkbox"
-          checked={checked}
-          onChange={onChange}
           data-testid="cap-checkbox"
+          checked={checked}
+          onChange={(e) => onChange && onChange(e)}
+          {...props}
         />
         <span>{children}</span>
       </label>
     );
-  }
-);
+  },
+}));
+
+// Mock the CapInput component
+jest.mock('@capillarytech/cap-ui-library/CapInput', () => ({
+  __esModule: true,
+  default: function MockCapInput({ value, onChange, id, placeholder, error }) {
+    return (
+      <div>
+        <input
+          data-testid={`cap-input-${id || 'mobile-push-external-link-input-ANDROID-0'}`}
+          type="text"
+          value={value || ''}
+          onChange={(e) => onChange && onChange({ target: { value: e.target.value } })}
+          placeholder={placeholder}
+        />
+        {error && <div data-testid="error-message">{error}</div>}
+      </div>
+    );
+  },
+}));
 
+// Mock the CapSelect.CapCustomSelect component
 jest.mock('@capillarytech/cap-ui-library/CapSelect', () => ({
-  CapCustomSelect: function MockCapCustomSelect({ options, value, onChange, placeholder, selectPlaceholder }) {
+  CapCustomSelect: function MockCapCustomSelect({ value, onChange, options }) {
     return (
       <select
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
         data-testid="cap-custom-select"
+        value={value}
+        onChange={(e) => onChange && onChange(e.target.value)}
       >
-        <option value="">{placeholder || selectPlaceholder}</option>
         {options?.map((option) => (
           <option key={option.value} value={option.value}>
-            {option.label}
+            {option.label || option.value}
           </option>
         ))}
       </select>
     );
-  }
+  },
 }));
 
-jest.mock('@capillarytech/cap-ui-library/CapInput', () => 
-  function MockCapInput({ value, onChange, placeholder, id }) {
-    return (
-      <input
-        id={id}
-        value={value}
-        onChange={onChange}
-        placeholder={placeholder}
-        data-testid="cap-input"
-      />
-    );
-  }
-);
-
 jest.mock('@capillarytech/cap-ui-library/CapRow', () => 
   function MockCapRow({ children, className, style }) {
     return <div className={className} style={style}>{children}</div>;
@@ -220,74 +240,115 @@ jest.mock('../../utils', () => ({
 
 // Mock the messages
 jest.mock('../../messages', () => ({
-  imageErrorMessage: {
-    id: 'image.error.message',
-    defaultMessage: 'Image upload failed',
-  },
-  videoErrorMessage: {
-    id: 'video.error.message',
-    defaultMessage: 'Video upload failed',
-  },
-  gifErrorMessage: {
-    id: 'gif.error.message',
-    defaultMessage: 'GIF upload failed',
-  },
-  buttonsAndLinks: {
-    id: 'buttons.and.links',
-    defaultMessage: 'Buttons and Links',
-  },
-  optionalText: {
-    id: 'optional.text',
-    defaultMessage: 'Optional',
-  },
-  actionOnClickBody: {
-    id: 'action.on.click.body',
-    defaultMessage: 'Add action on click',
-  },
-  actionDescription: {
-    id: 'action.description',
-    defaultMessage: 'Action Description',
-  },
-  linkType: {
-    id: 'link.type',
-    defaultMessage: 'Link Type',
-  },
-  selectDeepLink: {
-    id: 'select.deep.link',
-    defaultMessage: 'Select Deep Link',
-  },
-  deepLink: {
-    id: 'deep.link',
-    defaultMessage: 'Deep Link',
-  },
-  externalLink: {
-    id: 'external.link',
-    defaultMessage: 'External Link',
-  },
-  enterExternalLink: {
-    id: 'enter.external.link',
-    defaultMessage: 'Enter External Link',
-  },
-  card: {
-    id: 'card',
-    defaultMessage: 'Card',
-  },
-  mediaImage: {
-    id: 'media.image',
-    defaultMessage: 'Image',
-  },
-  mediaVideo: {
-    id: 'media.video',
-    defaultMessage: 'Video',
-  },
-  carouselMediaType: {
-    id: 'carousel.media.type',
-    defaultMessage: 'Carousel Media Type',
+  __esModule: true,
+  default: {
+    imageErrorMessage: {
+      id: 'creatives.containersV2.MobilePushNew.imageErrorMessage',
+      defaultMessage: 'Please upload the image with allowed file extension, size, dimension and aspect ratio',
+    },
+    videoErrorMessage: {
+      id: 'creatives.containersV2.MobilePushNew.videoErrorMessage',
+      defaultMessage: 'Please upload the video with allowed file extension, size, dimension and aspect ratio',
+    },
+    gifErrorMessage: {
+      id: 'creatives.containersV2.MobilePushNew.gifErrorMessage',
+      defaultMessage: 'Please upload the gif with allowed file extension, size, dimension and aspect ratio',
+    },
+    buttonsAndLinks: {
+      id: 'creatives.containersV2.MobilePushNew.buttonsAndLinks',
+      defaultMessage: 'Buttons and links',
+    },
+    optionalText: {
+      id: 'creatives.containersV2.MobilePushNew.optionalText',
+      defaultMessage: '(Optional)',
+    },
+    actionOnClick: {
+      id: 'creatives.containersV2.MobilePushNew.actionOnClick',
+      defaultMessage: 'Action on click of notification body',
+    },
+    actionDescription: {
+      id: 'creatives.containersV2.MobilePushNew.actionDescription',
+      defaultMessage: 'Define where the users will redirect when they click on the body of the push notification',
+    },
+    linkType: {
+      id: 'app.containers.MobilePushNew.linkType',
+      defaultMessage: 'Link Type',
+    },
+    selectDeepLink: {
+      id: 'creatives.containersV2.MobilePushNew.selectDeepLink',
+      defaultMessage: 'Select deep link',
+    },
+    deepLink: {
+      id: 'app.containers.MobilePushNew.deepLink',
+      defaultMessage: 'Deep Link',
+    },
+    externalLink: {
+      id: 'app.containers.MobilePushNew.externalLink',
+      defaultMessage: 'External Link',
+    },
+    enterExternalLink: {
+      id: 'creatives.containersV2.MobilePushNew.enterExternalLink',
+      defaultMessage: 'Enter external link',
+    },
+    deepLinkKeys: {
+      id: 'creatives.containersV2.MobilePushNew.deepLinkKeys',
+      defaultMessage: 'Deep Link Keys',
+    },
+    deepLinkKeysPlaceholder: {
+      id: 'creatives.containersV2.MobilePushNew.deepLinkKeysPlaceholder',
+      defaultMessage: 'Please input {key}',
+    },
+    deepLinkKeysRequired: {
+      id: 'creatives.containersV2.MobilePushNew.deepLinkKeysRequired',
+      defaultMessage: 'Value cannot be empty.',
+    },
+    invalidUrl: {
+      id: 'creatives.containersV2.MobilePushNew.invalidUrl',
+      defaultMessage: 'Please enter a valid URL',
+    },
+    carouselMediaType: {
+      id: 'creatives.containersV2.MobilePushNew.carouselMediaType',
+      defaultMessage: 'Carousel media Type',
+    },
+    mediaImage: {
+      id: 'creatives.containersV2.MobilePushNew.mediaImage',
+      defaultMessage: 'Image',
+    },
+    mediaVideo: {
+      id: 'creatives.containersV2.MobilePushNew.mediaVideo',
+      defaultMessage: 'Video',
+    },
+    card: {
+      id: 'creatives.containersV2.MobilePushNew.card',
+      defaultMessage: 'Card',
+    },
+    addCard: {
+      id: 'creatives.containersV2.MobilePushNew.addCard',
+      defaultMessage: 'Add Card',
+    },
+    actionOnClickBody: {
+      id: 'creatives.containersV2.MobilePushNew.actionOnClickBody',
+      defaultMessage: 'Action on click of notification body',
+    },
   },
 }));
 
 const mockStore = configureStore({}, initialReducer, history);
 
+// Helper function for formatMessage
+const mockFormatMessage = (message, values = {}) => {
+  if (typeof message === 'object' && message.defaultMessage) {
+    let result = message.defaultMessage;
+    if (values && typeof values === 'object') {
+      Object.keys(values).forEach(key => {
+        result = result.replace(`{${key}}`, values[key]);
+      });
+    }
+    return result;
+  }
+  return message;
+};
+
 const defaultProps = {
   mediaType: 'IMAGE',
   activeTab: ANDROID,
@@ -325,7 +386,7 @@ const renderComponent = (props = {}) => {
   const mergedProps = { ...defaultProps, ...props };
   return render(
     <Provider store={mockStore}>
-      <IntlProvider locale="en" messages={{}}>
+      <IntlProvider messages={messages} locale="en">
         <MediaUploaders {...mergedProps} />
       </IntlProvider>
     </Provider>
@@ -418,25 +479,41 @@ describe('MediaUploaders', () => {
   });
 
   describe('CAROUSEL Media Type', () => {
-    it('should render carousel component for CAROUSEL media type', () => {
-      renderComponent({ 
+    it('should render carousel component for CAROUSEL media type', async () => {
+      const mockOnCarouselDataChange = jest.fn();
+
+      const { container } = renderComponent({
         mediaType: 'CAROUSEL',
         carouselData: [
           {
             mediaType: 'image',
-            imageUrl: '',
+            imageUrl: 'test.jpg',
             buttons: [{
-              actionOnClick: false,
-              linkType: 'DEEP_LINK',
+              actionOnClick: true,
+              linkType: 'EXTERNAL_LINK',
               deepLinkValue: '',
-              externalLinkValue: '',
+              deepLinkKeys: [],
+              externalLinkValue: 'https://example.com',
             }],
           }
-        ]
+        ],
+        onCarouselDataChange: mockOnCarouselDataChange,
+        carouselActiveTabIndex: 0,
+        activeTab: 'ANDROID',
+        formatMessage: (message) => message.defaultMessage,
       });
-      // The carousel component should render carousel-specific UI elements
-      expect(screen.getByTestId('cap-image-upload')).toBeInTheDocument();
-      expect(screen.getByText('Buttons and Links')).toBeInTheDocument();
+
+      // Check if the carousel component is rendered
+      const carouselMediaType = screen.getByText('Carousel media Type');
+      expect(carouselMediaType).toBeInTheDocument();
+
+      // Check if the carousel card is rendered
+      const carouselCard = screen.getByText('Card 1');
+      expect(carouselCard).toBeInTheDocument();
+
+      // Check if the buttons and links section is rendered
+      const buttonsAndLinks = screen.getByText('Buttons and links');
+      expect(buttonsAndLinks).toBeInTheDocument();
     });
 
     it('should initialize carousel data when empty', () => {
@@ -475,7 +552,7 @@ describe('MediaUploaders', () => {
       const onCarouselDataChange = jest.fn();
       rerender(
         <Provider store={mockStore}>
-          <IntlProvider locale="en" messages={{}}>
+          <IntlProvider messages={messages} locale="en">
             <MediaUploaders
               {...defaultProps}
               mediaType="IMAGE"
@@ -487,6 +564,60 @@ describe('MediaUploaders', () => {
 
       expect(onCarouselDataChange).toHaveBeenCalledWith(ANDROID, []);
     });
+
+    it('should handle external link change in carousel actions', () => {
+      const mockOnCarouselDataChange = jest.fn();
+
+      const { container } = renderComponent({
+        mediaType: 'CAROUSEL',
+        carouselData: [
+          {
+            mediaType: 'image',
+            imageUrl: 'test.jpg',
+            buttons: [{
+              actionOnClick: true,
+              linkType: 'EXTERNAL_LINK',
+              deepLinkValue: '',
+              deepLinkKeys: [],
+              externalLinkValue: 'https://example.com',
+            }],
+          }
+        ],
+        onCarouselDataChange: mockOnCarouselDataChange,
+        carouselActiveTabIndex: 0,
+        activeTab: 'ANDROID',
+        formatMessage: (message) => message.defaultMessage,
+      });
+
+      // First check if the checkbox is checked
+      const actionOnClickCheckbox = screen.getByTestId('cap-checkbox');
+      expect(actionOnClickCheckbox).toBeChecked();
+
+      // First select the external link type
+      const linkTypeSelect = screen.getAllByTestId('cap-custom-select')[0];
+      fireEvent.change(linkTypeSelect, { target: { value: 'EXTERNAL_LINK' } });
+
+      // Wait for the external link input to be rendered
+      const externalLinkInput = screen.getByTestId('cap-input-mobile-push-external-link-input-ANDROID-0');
+      expect(externalLinkInput).toBeInTheDocument();
+      expect(externalLinkInput.value).toBe('https://example.com');
+
+      // Change external link value
+      fireEvent.change(externalLinkInput, { target: { value: 'https://newexample.com' } });
+
+      expect(mockOnCarouselDataChange).toHaveBeenCalledWith(
+        'ANDROID',
+        expect.arrayContaining([
+          expect.objectContaining({
+            buttons: expect.arrayContaining([
+              expect.objectContaining({
+                externalLinkValue: 'https://newexample.com',
+              }),
+            ]),
+          }),
+        ])
+      );
+    });
   });
 
   describe('Platform switching', () => {
@@ -501,7 +632,7 @@ describe('MediaUploaders', () => {
 
       rerender(
         <Provider store={mockStore}>
-          <IntlProvider locale="en" messages={{}}>
+          <IntlProvider messages={messages} locale="en">
             <MediaUploaders
               {...defaultProps}
               mediaType="CAROUSEL"
@@ -527,7 +658,7 @@ describe('MediaUploaders', () => {
 
       rerender(
         <Provider store={mockStore}>
-          <IntlProvider locale="en" messages={{}}>
+          <IntlProvider messages={messages} locale="en">
             <MediaUploaders
               {...defaultProps}
               mediaType="VIDEO"
@@ -549,7 +680,7 @@ describe('MediaUploaders', () => {
 
       rerender(
         <Provider store={mockStore}>
-          <IntlProvider locale="en" messages={{}}>
+          <IntlProvider messages={messages} locale="en">
             <MediaUploaders
               {...defaultProps}
               mediaType="IMAGE"
@@ -1197,7 +1328,7 @@ describe('MediaUploaders', () => {
       // Simulate video media type selection
       rerender(
         <Provider store={mockStore}>
-          <IntlProvider locale="en" messages={{}}>
+          <IntlProvider messages={messages} locale="en">
             <MediaUploaders
               {...defaultProps}
               mediaType="CAROUSEL"
@@ -1698,29 +1829,6 @@ describe('MediaUploaders', () => {
       expect(screen.getAllByTestId('cap-custom-select')).toHaveLength(2); // Link type and deep link selects
     });
 
-    it('should render external link input when EXTERNAL_LINK is selected', () => {
-      renderComponent({
-        mediaType: 'CAROUSEL',
-        carouselData: [
-          {
-            mediaType: 'image',
-            imageUrl: 'test.jpg',
-            buttons: [{
-              actionOnClick: true,
-              linkType: 'EXTERNAL_LINK', // This triggers external link input
-              deepLinkValue: '',
-              externalLinkValue: 'https://example.com',
-            }],
-          }
-        ],
-        carouselActiveTabIndex: 0,
-      });
-
-      // Should render external link input
-      expect(screen.getByTestId('cap-input')).toBeInTheDocument();
-      expect(screen.getByTestId('cap-custom-select')).toBeInTheDocument(); // Link type select
-    });
-
     it('should show carousel link errors when present', () => {
       renderComponent({
         mediaType: 'CAROUSEL',
@@ -2069,7 +2177,7 @@ describe('MediaUploaders', () => {
         carouselActiveTabIndex: 0,
         linkProps: {
           deepLink: [
-            { value: 'test-deep-link', label: 'Test Deep Link' }
+            { value: 'test-deep-link', keys: ['key1', 'key2'] }
           ]
         }
       });
@@ -2081,34 +2189,992 @@ describe('MediaUploaders', () => {
       // Should call onCarouselDataChange
       expect(onCarouselDataChange).toHaveBeenCalled();
     });
+  });
+
+  // Carousel deep link keys handling - covering lines 609, 612, 614, 625-662
+  it('should handle carousel deep link keys with array from selection', () => {
+    const mockDeepLink = [
+      { value: 'test-deep-link', keys: ['key1', 'key2'] }
+    ];
+    const mockCarouselData = [{
+      mediaType: 'image',
+      imageUrl: 'test-image.jpg',
+      buttons: [{
+        actionOnClick: true,
+        linkType: 'DEEP_LINK',
+        deepLinkValue: 'test-deep-link',
+        deepLinkKeys: ['key1', 'key2'],
+        externalLinkValue: '',
+      }]
+    }];
+    const mockCarouselLinkErrors = {};
+    const mockUpdateCarouselLinkError = jest.fn();
+
+    const { getByText, getByDisplayValue } = render(
+      <MediaUploaders
+        mediaType="CAROUSEL"
+        activeTab="ANDROID"
+        imageSrc={{ androidImageSrc: '', iosImageSrc: '' }}
+        uploadMpushAsset={jest.fn()}
+        isFullMode={false}
+        setUpdateMpushImageSrc={jest.fn()}
+        updateOnMpushImageReUpload={jest.fn()}
+        imageData={{}}
+        videoAssetList={{}}
+        gifAssetList={{}}
+        setUpdateMpushVideoSrc={jest.fn()}
+        videoDataForVideo={{}}
+        videoDataForGif={{}}
+        videoSrc={''}
+        formatMessage={jest.fn((message) => message.defaultMessage)}
+        linkProps={{ deepLink: mockDeepLink }}
+        clearImageDataByMediaType={jest.fn()}
+        carouselData={mockCarouselData}
+        onCarouselDataChange={jest.fn()}
+        mobilePushActions={{ clearAsset: jest.fn() }}
+        carouselActiveTabIndex={0}
+        setCarouselActiveTabIndex={jest.fn()}
+        carouselLinkErrors={mockCarouselLinkErrors}
+        updateCarouselLinkError={mockUpdateCarouselLinkError}
+      />
+    );
+
+    // Check that deep link keys are displayed correctly
+    expect(getByText('key1, key2')).toBeInTheDocument();
+    expect(getByDisplayValue('key1, key2')).toBeInTheDocument();
+  });
+
+  it('should handle carousel deep link keys with single key from selection', () => {
+    const mockDeepLink = [
+      { value: 'test-deep-link', keys: 'single-key' }
+    ];
+    const mockCarouselData = [{
+      mediaType: 'image',
+      imageUrl: 'test-image.jpg',
+      buttons: [{
+        actionOnClick: true,
+        linkType: 'DEEP_LINK',
+        deepLinkValue: 'test-deep-link',
+        deepLinkKeys: ['single-key'],
+        externalLinkValue: '',
+      }]
+    }];
+    const mockCarouselLinkErrors = {};
+    const mockUpdateCarouselLinkError = jest.fn();
+
+    const { getByText, getByDisplayValue } = render(
+      <MediaUploaders
+        mediaType="CAROUSEL"
+        activeTab="ANDROID"
+        imageSrc={{ androidImageSrc: '', iosImageSrc: '' }}
+        uploadMpushAsset={jest.fn()}
+        isFullMode={false}
+        setUpdateMpushImageSrc={jest.fn()}
+        updateOnMpushImageReUpload={jest.fn()}
+        imageData={{}}
+        videoAssetList={{}}
+        gifAssetList={{}}
+        setUpdateMpushVideoSrc={jest.fn()}
+        videoDataForVideo={{}}
+        videoDataForGif={{}}
+        videoSrc={''}
+        formatMessage={mockFormatMessage}
+        linkProps={{ deepLink: mockDeepLink }}
+        clearImageDataByMediaType={jest.fn()}
+        carouselData={mockCarouselData}
+        onCarouselDataChange={jest.fn()}
+        mobilePushActions={{ clearAsset: jest.fn() }}
+        carouselActiveTabIndex={0}
+        setCarouselActiveTabIndex={jest.fn()}
+        carouselLinkErrors={mockCarouselLinkErrors}
+        updateCarouselLinkError={mockUpdateCarouselLinkError}
+      />
+    );
+
+    // Check that single key is displayed correctly
+    expect(getByText('single-key')).toBeInTheDocument();
+    expect(getByDisplayValue('single-key')).toBeInTheDocument();
+  });
+
+  it('should handle carousel deep link keys with no keys from selection but existing keys', () => {
+    const mockDeepLink = [
+      { value: 'test-deep-link', keys: ['key1', 'key2'] } // Need keys to trigger the section
+    ];
+    const mockCarouselData = [{
+      mediaType: 'image',
+      imageUrl: 'test-image.jpg',
+      buttons: [{
+        actionOnClick: true,
+        linkType: 'DEEP_LINK',
+        deepLinkValue: 'test-deep-link',
+        deepLinkKeys: ['existing-key1', 'existing-key2'],
+        externalLinkValue: '',
+      }]
+    }];
+    const mockCarouselLinkErrors = {};
+    const mockUpdateCarouselLinkError = jest.fn();
+
+    const { getByText, getByDisplayValue } = render(
+      <MediaUploaders
+        mediaType="CAROUSEL"
+        activeTab="ANDROID"
+        imageSrc={{ androidImageSrc: '', iosImageSrc: '' }}
+        uploadMpushAsset={jest.fn()}
+        isFullMode={false}
+        setUpdateMpushImageSrc={jest.fn()}
+        updateOnMpushImageReUpload={jest.fn()}
+        imageData={{}}
+        videoAssetList={{}}
+        gifAssetList={{}}
+        setUpdateMpushVideoSrc={jest.fn()}
+        videoDataForVideo={{}}
+        videoDataForGif={{}}
+        videoSrc={''}
+        formatMessage={mockFormatMessage}
+        linkProps={{ deepLink: mockDeepLink }}
+        clearImageDataByMediaType={jest.fn()}
+        carouselData={mockCarouselData}
+        onCarouselDataChange={jest.fn()}
+        mobilePushActions={{ clearAsset: jest.fn() }}
+        carouselActiveTabIndex={0}
+        setCarouselActiveTabIndex={jest.fn()}
+        carouselLinkErrors={mockCarouselLinkErrors}
+        updateCarouselLinkError={mockUpdateCarouselLinkError}
+      />
+    );
+
+    // Check that existing keys are displayed correctly (should show keys from selection first)
+    expect(getByText('key1, key2')).toBeInTheDocument();
+    expect(getByDisplayValue('existing-key1, existing-key2')).toBeInTheDocument();
+  });
+
+  it('should handle carousel deep link keys with no keys at all', () => {
+    const mockDeepLink = [
+      { value: 'test-deep-link', keys: [] } // No keys from selection
+    ];
+    const mockCarouselData = [{
+      mediaType: 'image',
+      imageUrl: 'test-image.jpg',
+      buttons: [{
+        actionOnClick: true,
+        linkType: 'DEEP_LINK',
+        deepLinkValue: 'test-deep-link',
+        deepLinkKeys: [],
+        externalLinkValue: '',
+      }]
+    }];
+    const mockCarouselLinkErrors = {};
+    const mockUpdateCarouselLinkError = jest.fn();
+
+    const { container } = render(
+      <MediaUploaders
+        mediaType="CAROUSEL"
+        activeTab="ANDROID"
+        imageSrc={{ androidImageSrc: '', iosImageSrc: '' }}
+        uploadMpushAsset={jest.fn()}
+        isFullMode={false}
+        setUpdateMpushImageSrc={jest.fn()}
+        updateOnMpushImageReUpload={jest.fn()}
+        imageData={{}}
+        videoAssetList={{}}
+        gifAssetList={{}}
+        setUpdateMpushVideoSrc={jest.fn()}
+        videoDataForVideo={{}}
+        videoDataForGif={{}}
+        videoSrc={''}
+        formatMessage={mockFormatMessage}
+        linkProps={{ deepLink: mockDeepLink }}
+        clearImageDataByMediaType={jest.fn()}
+        carouselData={mockCarouselData}
+        onCarouselDataChange={jest.fn()}
+        mobilePushActions={{ clearAsset: jest.fn() }}
+        carouselActiveTabIndex={0}
+        setCarouselActiveTabIndex={jest.fn()}
+        carouselLinkErrors={mockCarouselLinkErrors}
+        updateCarouselLinkError={mockUpdateCarouselLinkError}
+      />
+    );
+
+    // When no keys from selection, the deep link keys section should not render at all
+    expect(container.textContent).not.toContain('Deep Link Keys');
+  });
+
+  it('should handle carousel deep link keys with string value instead of array', () => {
+    const mockDeepLink = [
+      { value: 'test-deep-link', keys: 'single-key' }
+    ];
+    const mockCarouselData = [{
+      mediaType: 'image',
+      imageUrl: 'test-image.jpg',
+      buttons: [{
+        actionOnClick: true,
+        linkType: 'DEEP_LINK',
+        deepLinkValue: 'test-deep-link',
+        deepLinkKeys: 'string-key-value',
+        externalLinkValue: '',
+      }]
+    }];
+    const mockCarouselLinkErrors = {};
+    const mockUpdateCarouselLinkError = jest.fn();
+
+    const { getByDisplayValue } = render(
+      <MediaUploaders
+        mediaType="CAROUSEL"
+        activeTab="ANDROID"
+        imageSrc={{ androidImageSrc: '', iosImageSrc: '' }}
+        uploadMpushAsset={jest.fn()}
+        isFullMode={false}
+        setUpdateMpushImageSrc={jest.fn()}
+        updateOnMpushImageReUpload={jest.fn()}
+        imageData={{}}
+        videoAssetList={{}}
+        gifAssetList={{}}
+        setUpdateMpushVideoSrc={jest.fn()}
+        videoDataForVideo={{}}
+        videoDataForGif={{}}
+        videoSrc={''}
+        formatMessage={jest.fn((message) => message.defaultMessage)}
+        linkProps={{ deepLink: mockDeepLink }}
+        clearImageDataByMediaType={jest.fn()}
+        carouselData={mockCarouselData}
+        onCarouselDataChange={jest.fn()}
+        mobilePushActions={{ clearAsset: jest.fn() }}
+        carouselActiveTabIndex={0}
+        setCarouselActiveTabIndex={jest.fn()}
+        carouselLinkErrors={mockCarouselLinkErrors}
+        updateCarouselLinkError={mockUpdateCarouselLinkError}
+      />
+    );
+
+    // Check that string value is displayed correctly
+    expect(getByDisplayValue('string-key-value')).toBeInTheDocument();
+  });
+
+  it('should handle carousel deep link keys with undefined deepLinkKeys', () => {
+    const mockDeepLink = [
+      { value: 'test-deep-link', keys: ['key1', 'key2'] }
+    ];
+    const mockCarouselData = [{
+      mediaType: 'image',
+      imageUrl: 'test-image.jpg',
+      buttons: [{
+        actionOnClick: true,
+        linkType: 'DEEP_LINK',
+        deepLinkValue: 'test-deep-link',
+        deepLinkKeys: undefined,
+        externalLinkValue: '',
+      }]
+    }];
+    const mockCarouselLinkErrors = {};
+    const mockUpdateCarouselLinkError = jest.fn();
+
+    const { getAllByDisplayValue } = render(
+      <MediaUploaders
+        mediaType="CAROUSEL"
+        activeTab="ANDROID"
+        imageSrc={{ androidImageSrc: '', iosImageSrc: '' }}
+        uploadMpushAsset={jest.fn()}
+        isFullMode={false}
+        setUpdateMpushImageSrc={jest.fn()}
+        updateOnMpushImageReUpload={jest.fn()}
+        imageData={{}}
+        videoAssetList={{}}
+        gifAssetList={{}}
+        setUpdateMpushVideoSrc={jest.fn()}
+        videoDataForVideo={{}}
+        videoDataForGif={{}}
+        videoSrc={''}
+        formatMessage={mockFormatMessage}
+        linkProps={{ deepLink: mockDeepLink }}
+        clearImageDataByMediaType={jest.fn()}
+        carouselData={mockCarouselData}
+        onCarouselDataChange={jest.fn()}
+        mobilePushActions={{ clearAsset: jest.fn() }}
+        carouselActiveTabIndex={0}
+        setCarouselActiveTabIndex={jest.fn()}
+        carouselLinkErrors={mockCarouselLinkErrors}
+        updateCarouselLinkError={mockUpdateCarouselLinkError}
+      />
+    );
+
+    // Check that empty string is displayed when deepLinkKeys is undefined
+    const emptyInputs = getAllByDisplayValue('');
+    expect(emptyInputs.length).toBeGreaterThan(0);
+  });
+
+  it('should handle carousel deep link keys placeholder with fallback', () => {
+    const mockDeepLink = [
+      { value: 'test-deep-link', keys: ['key1', 'key2'] } // Need keys to trigger the section
+    ];
+    const mockCarouselData = [{
+      mediaType: 'image',
+      imageUrl: 'test-image.jpg',
+      buttons: [{
+        actionOnClick: true,
+        linkType: 'DEEP_LINK',
+        deepLinkValue: 'test-deep-link',
+        deepLinkKeys: [],
+        externalLinkValue: '',
+      }]
+    }];
+    const mockCarouselLinkErrors = {};
+    const mockUpdateCarouselLinkError = jest.fn();
+
+    render(
+      <MediaUploaders
+        mediaType="CAROUSEL"
+        activeTab="ANDROID"
+        imageSrc={{ androidImageSrc: '', iosImageSrc: '' }}
+        uploadMpushAsset={jest.fn()}
+        isFullMode={false}
+        setUpdateMpushImageSrc={jest.fn()}
+        updateOnMpushImageReUpload={jest.fn()}
+        imageData={{}}
+        videoAssetList={{}}
+        gifAssetList={{}}
+        setUpdateMpushVideoSrc={jest.fn()}
+        videoDataForVideo={{}}
+        videoDataForGif={{}}
+        videoSrc={''}
+        formatMessage={mockFormatMessage}
+        linkProps={{ deepLink: mockDeepLink }}
+        clearImageDataByMediaType={jest.fn()}
+        carouselData={mockCarouselData}
+        onCarouselDataChange={jest.fn()}
+        mobilePushActions={{ clearAsset: jest.fn() }}
+        carouselActiveTabIndex={0}
+        setCarouselActiveTabIndex={jest.fn()}
+        carouselLinkErrors={mockCarouselLinkErrors}
+        updateCarouselLinkError={mockUpdateCarouselLinkError}
+      />
+    );
+
+    // Verify that formatMessage was called with the fallback placeholder
+    // Note: Since mockFormatMessage is not a jest.fn(), we can't verify it was called
+    // The test passes if the component renders without errors
+  });
+
+  describe('Platform-specific video data handling', () => {
+    it('should handle platform-specific video data for Android', () => {
+      const mockVideoData = {
+        uploadedAssetData0: {
+          metaInfo: {
+            secure_file_path: 'android-video.mp4',
+            duration: 30,
+          },
+        },
+      };
+
+      renderComponent({
+        mediaType: 'VIDEO',
+        activeTab: ANDROID,
+        videoDataForVideo: mockVideoData,
+      });
+
+      expect(screen.getByTestId('cap-video-upload')).toBeInTheDocument();
+    });
+
+    it('should handle platform-specific video data for iOS', () => {
+      const mockVideoData = {
+        uploadedAssetData1: {
+          metaInfo: {
+            secure_file_path: 'ios-video.mp4',
+            duration: 30,
+          },
+        },
+      };
+
+      renderComponent({
+        mediaType: 'VIDEO',
+        activeTab: IOS,
+        videoDataForVideo: mockVideoData,
+      });
+
+      expect(screen.getByTestId('cap-video-upload')).toBeInTheDocument();
+    });
+
+    it('should handle empty platform-specific video data', () => {
+      renderComponent({
+        mediaType: 'VIDEO',
+        activeTab: ANDROID,
+        videoDataForVideo: {},
+      });
+
+      expect(screen.getByTestId('cap-video-upload')).toBeInTheDocument();
+    });
+
+    it('should handle missing uploadedAssetData in video data', () => {
+      const mockVideoData = {
+        uploadedAssetData0: null,
+      };
+
+      renderComponent({
+        mediaType: 'VIDEO',
+        activeTab: ANDROID,
+        videoDataForVideo: mockVideoData,
+      });
+
+      expect(screen.getByTestId('cap-video-upload')).toBeInTheDocument();
+    });
+  });
+
+  describe('Platform-specific GIF data handling', () => {
+    it('should handle platform-specific GIF data for Android', () => {
+      const mockGifData = {
+        uploadedAssetData0: {
+          metaInfo: {
+            secure_file_path: 'android-gif.gif',
+            duration: 5,
+          },
+        },
+      };
+
+      renderComponent({
+        mediaType: 'GIF',
+        activeTab: ANDROID,
+        videoDataForGif: mockGifData,
+      });
+
+      expect(screen.getByTestId('cap-video-upload')).toBeInTheDocument();
+    });
+
+    it('should handle platform-specific GIF data for iOS', () => {
+      const mockGifData = {
+        uploadedAssetData1: {
+          metaInfo: {
+            secure_file_path: 'ios-gif.gif',
+            duration: 5,
+          },
+        },
+      };
+
+      renderComponent({
+        mediaType: 'GIF',
+        activeTab: IOS,
+        videoDataForGif: mockGifData,
+      });
+
+      expect(screen.getByTestId('cap-video-upload')).toBeInTheDocument();
+    });
+
+    it('should handle empty platform-specific GIF data', () => {
+      renderComponent({
+        mediaType: 'GIF',
+        activeTab: ANDROID,
+        videoDataForGif: {},
+      });
+
+      expect(screen.getByTestId('cap-video-upload')).toBeInTheDocument();
+    });
+
+    it('should handle missing uploadedAssetData in GIF data', () => {
+      const mockGifData = {
+        uploadedAssetData0: null,
+      };
+
+      renderComponent({
+        mediaType: 'GIF',
+        activeTab: ANDROID,
+        videoDataForGif: mockGifData,
+      });
+
+      expect(screen.getByTestId('cap-video-upload')).toBeInTheDocument();
+    });
+  });
+
+  describe('Carousel re-upload behavior', () => {
+    it('should handle carousel image re-upload', () => {
+      const mockMobilePushActions = {
+        clearAsset: jest.fn(),
+      };
+      const mockOnCarouselDataChange = jest.fn();
+      const mockUpdateOnMpushImageReUpload = jest.fn();
 
-    it('should handle external link change in carousel actions', () => {
-      const onCarouselDataChange = jest.fn();
-      
       renderComponent({
         mediaType: 'CAROUSEL',
         carouselData: [
           {
             mediaType: 'image',
-            imageUrl: 'test.jpg',
+            imageUrl: 'old-image.jpg',
             buttons: [{
-              actionOnClick: true,
-              linkType: 'EXTERNAL_LINK',
+              actionOnClick: false,
+              linkType: 'DEEP_LINK',
               deepLinkValue: '',
               externalLinkValue: '',
             }],
           }
         ],
-        onCarouselDataChange,
-        carouselActiveTabIndex: 0,
+        mobilePushActions: mockMobilePushActions,
+        onCarouselDataChange: mockOnCarouselDataChange,
+        updateOnMpushImageReUpload: mockUpdateOnMpushImageReUpload,
+        activeTab: ANDROID,
       });
 
-      // Find external link input and change it
-      const externalLinkInput = screen.getByTestId('cap-input');
-      fireEvent.change(externalLinkInput, { target: { value: 'https://example.com' } });
+      // Find re-upload button and click it
+      const reuploadButton = screen.getByTestId('image-reupload-button');
+      fireEvent.click(reuploadButton);
 
-      // Should call onCarouselDataChange
-      expect(onCarouselDataChange).toHaveBeenCalled();
+      // Should clear asset and update carousel data
+      expect(mockMobilePushActions.clearAsset).toHaveBeenCalledWith(0);
+      expect(mockUpdateOnMpushImageReUpload).toHaveBeenCalled();
+      expect(mockOnCarouselDataChange).toHaveBeenCalled();
+    });
+
+    it('should handle carousel image re-upload with delay', async () => {
+      jest.useFakeTimers({ shouldClearNativeTimers: true });
+      const mockMobilePushActions = {
+        clearAsset: jest.fn(),
+      };
+      const mockOnCarouselDataChange = jest.fn();
+      const mockUpdateOnMpushImageReUpload = jest.fn();
+
+      renderComponent({
+        mediaType: 'CAROUSEL',
+        carouselData: [
+          {
+            mediaType: 'image',
+            imageUrl: 'old-image.jpg',
+            buttons: [{
+              actionOnClick: false,
+              linkType: 'DEEP_LINK',
+              deepLinkValue: '',
+              externalLinkValue: '',
+            }],
+          }
+        ],
+        mobilePushActions: mockMobilePushActions,
+        onCarouselDataChange: mockOnCarouselDataChange,
+        updateOnMpushImageReUpload: mockUpdateOnMpushImageReUpload,
+        activeTab: ANDROID,
+      });
+
+      // Find re-upload button and click it
+      const reuploadButton = screen.getByTestId('image-reupload-button');
+      fireEvent.click(reuploadButton);
+
+      // Fast-forward timer to trigger re-upload mode reset
+      jest.advanceTimersByTime(3000);
+
+      // Should clear asset and update carousel data
+      expect(mockMobilePushActions.clearAsset).toHaveBeenCalledWith(0);
+      expect(mockUpdateOnMpushImageReUpload).toHaveBeenCalled();
+      expect(mockOnCarouselDataChange).toHaveBeenCalled();
+
+      jest.useRealTimers();
+    });
+  });
+
+  describe('Carousel deep link keys handling', () => {
+    it('should handle carousel deep link keys change', async () => {
+      const mockOnCarouselDataChange = jest.fn();
+
+      const { container } = renderComponent({
+        mediaType: 'CAROUSEL',
+        carouselData: [
+          {
+            mediaType: 'image',
+            imageUrl: 'test.jpg',
+            buttons: [{
+              actionOnClick: true,
+              linkType: 'DEEP_LINK',
+              deepLinkValue: 'test-deep-link',
+              deepLinkKeys: ['key1', 'key2'],
+              externalLinkValue: '',
+            }],
+          }
+        ],
+        onCarouselDataChange: mockOnCarouselDataChange,
+        linkProps: {
+          deepLink: [
+            { value: 'test-deep-link', keys: ['key1', 'key2'] }
+          ]
+        },
+        carouselActiveTabIndex: 0,
+        activeTab: 'ANDROID',
+        formatMessage: (message) => message.defaultMessage,
+      });
+
+      // First select the deep link type
+      const linkTypeSelect = screen.getAllByTestId('cap-custom-select')[0];
+      await act(async () => {
+        fireEvent.change(linkTypeSelect, { target: { value: 'DEEP_LINK' } });
+      });
+
+      // Then select the deep link value
+      const deepLinkSelect = screen.getAllByTestId('cap-custom-select')[1];
+      await act(async () => {
+        fireEvent.change(deepLinkSelect, { target: { value: 'test-deep-link' } });
+      });
+
+      // Wait for the deep link keys input to be rendered
+      const deepLinkKeysInput = await screen.findByTestId('cap-input-mobile-push-carousel-deep-link-keys-input-ANDROID-0');
+      expect(deepLinkKeysInput).toBeInTheDocument();
+      expect(deepLinkKeysInput.value).toBe('key1, key2');
+
+      // Change deep link keys
+      await act(async () => {
+        fireEvent.change(deepLinkKeysInput, { target: { value: 'key3, key4' } });
+      });
+
+      expect(mockOnCarouselDataChange).toHaveBeenCalledWith(
+        'ANDROID',
+        expect.arrayContaining([
+          expect.objectContaining({
+            buttons: expect.arrayContaining([
+              expect.objectContaining({
+                deepLinkKeys: ['key3', 'key4'],
+              }),
+            ]),
+          }),
+        ])
+      );
+    });
+
+    it('should handle empty carousel deep link keys', async () => {
+      const mockOnCarouselDataChange = jest.fn();
+
+      const { container } = renderComponent({
+        mediaType: 'CAROUSEL',
+        carouselData: [
+          {
+            mediaType: 'image',
+            imageUrl: 'test.jpg',
+            buttons: [{
+              actionOnClick: true,
+              linkType: 'DEEP_LINK',
+              deepLinkValue: 'test-deep-link',
+              deepLinkKeys: ['key1', 'key2'],
+              externalLinkValue: '',
+            }],
+          }
+        ],
+        onCarouselDataChange: mockOnCarouselDataChange,
+        linkProps: {
+          deepLink: [
+            { value: 'test-deep-link', keys: ['key1', 'key2'] }
+          ]
+        },
+        carouselActiveTabIndex: 0,
+        activeTab: 'ANDROID',
+        formatMessage: (message) => message.defaultMessage,
+      });
+
+      // First select the deep link type
+      const linkTypeSelect = screen.getAllByTestId('cap-custom-select')[0];
+      await act(async () => {
+        fireEvent.change(linkTypeSelect, { target: { value: 'DEEP_LINK' } });
+      });
+
+      // Then select the deep link value
+      const deepLinkSelect = screen.getAllByTestId('cap-custom-select')[1];
+      await act(async () => {
+        fireEvent.change(deepLinkSelect, { target: { value: 'test-deep-link' } });
+      });
+
+      // Wait for the deep link keys input to be rendered
+      const deepLinkKeysInput = await screen.findByTestId('cap-input-mobile-push-carousel-deep-link-keys-input-ANDROID-0');
+      expect(deepLinkKeysInput).toBeInTheDocument();
+      expect(deepLinkKeysInput.value).toBe('key1, key2');
+
+      // Change deep link keys to empty
+      await act(async () => {
+        fireEvent.change(deepLinkKeysInput, { target: { value: '' } });
+      });
+
+      expect(mockOnCarouselDataChange).toHaveBeenCalledWith(
+        'ANDROID',
+        expect.arrayContaining([
+          expect.objectContaining({
+            buttons: expect.arrayContaining([
+              expect.objectContaining({
+                deepLinkKeys: [],
+              }),
+            ]),
+          }),
+        ])
+      );
+    });
+  });
+
+  describe('Carousel image upload handling', () => {
+    it('should update carousel image URL when new image is uploaded', () => {
+      const mockOnCarouselDataChange = jest.fn();
+      const imageData = {
+        uploadedAssetData0: {
+          metaInfo: {
+            secure_file_path: 'new-image.jpg',
+          },
+        },
+      };
+
+      renderComponent({
+        mediaType: 'CAROUSEL',
+        carouselData: [
+          {
+            mediaType: 'image',
+            imageUrl: 'old-image.jpg',
+            buttons: [{
+              actionOnClick: false,
+              linkType: 'DEEP_LINK',
+              deepLinkValue: '',
+              externalLinkValue: '',
+            }],
+          }
+        ],
+        onCarouselDataChange: mockOnCarouselDataChange,
+        imageData,
+        activeTab: ANDROID,
+        carouselActiveTabIndex: 0,
+      });
+
+      // Should update carousel data with new image URL
+      expect(mockOnCarouselDataChange).toHaveBeenCalledWith(
+        ANDROID,
+        expect.arrayContaining([
+          expect.objectContaining({
+            imageUrl: 'new-image.jpg',
+          }),
+        ])
+      );
+    });
+
+    it('should not update carousel image URL if uploadedAssetData is empty', () => {
+      const mockOnCarouselDataChange = jest.fn();
+      const imageData = {
+        uploadedAssetData0: {},
+      };
+
+      renderComponent({
+        mediaType: 'CAROUSEL',
+        carouselData: [
+          {
+            mediaType: 'image',
+            imageUrl: 'old-image.jpg',
+            buttons: [{
+              actionOnClick: false,
+              linkType: 'DEEP_LINK',
+              deepLinkValue: '',
+              externalLinkValue: '',
+            }],
+          }
+        ],
+        onCarouselDataChange: mockOnCarouselDataChange,
+        imageData,
+        activeTab: ANDROID,
+        carouselActiveTabIndex: 0,
+      });
+
+      // Should not update carousel data
+      expect(mockOnCarouselDataChange).not.toHaveBeenCalled();
+    });
+
+    it('should not update carousel image URL if new URL is empty', () => {
+      const mockOnCarouselDataChange = jest.fn();
+      const imageData = {
+        uploadedAssetData0: {
+          metaInfo: {
+            secure_file_path: '',
+          },
+        },
+      };
+
+      renderComponent({
+        mediaType: 'CAROUSEL',
+        carouselData: [
+          {
+            mediaType: 'image',
+            imageUrl: 'old-image.jpg',
+            buttons: [{
+              actionOnClick: false,
+              linkType: 'DEEP_LINK',
+              deepLinkValue: '',
+              externalLinkValue: '',
+            }],
+          }
+        ],
+        onCarouselDataChange: mockOnCarouselDataChange,
+        imageData,
+        activeTab: ANDROID,
+        carouselActiveTabIndex: 0,
+      });
+
+      // Should not update carousel data
+      expect(mockOnCarouselDataChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Carousel tab index handling', () => {
+    it('should update active tab index when deleting last card', () => {
+      const mockSetCarouselActiveTabIndex = jest.fn();
+      const mockOnCarouselDataChange = jest.fn();
+
+      renderComponent({
+        mediaType: 'CAROUSEL',
+        carouselData: [
+          {
+            mediaType: 'image',
+            imageUrl: 'image1.jpg',
+            buttons: [{
+              actionOnClick: false,
+              linkType: 'DEEP_LINK',
+              deepLinkValue: '',
+              externalLinkValue: '',
+            }],
+          },
+          {
+            mediaType: 'image',
+            imageUrl: 'image2.jpg',
+            buttons: [{
+              actionOnClick: false,
+              linkType: 'DEEP_LINK',
+              deepLinkValue: '',
+              externalLinkValue: '',
+            }],
+          }
+        ],
+        onCarouselDataChange: mockOnCarouselDataChange,
+        carouselActiveTabIndex: 1,
+        setCarouselActiveTabIndex: mockSetCarouselActiveTabIndex,
+      });
+
+      // Find delete button for the last card and click it
+      const deleteButtons = screen.getAllByTestId('cap-button');
+      fireEvent.click(deleteButtons[1]);
+
+      // Should update active tab index to previous card
+      expect(mockSetCarouselActiveTabIndex).toHaveBeenCalledWith(0);
+    });
+  });
+
+  describe('Deep link keys handling', () => {
+    it('should handle deep link keys when no keys are available', async () => {
+      const mockOnCarouselDataChange = jest.fn();
+
+      const { container } = renderComponent({
+        mediaType: 'CAROUSEL',
+        carouselData: [
+          {
+            mediaType: 'image',
+            imageUrl: 'test.jpg',
+            buttons: [{
+              actionOnClick: true,
+              linkType: 'DEEP_LINK',
+              deepLinkValue: 'test-deep-link',
+              deepLinkKeys: [],
+              externalLinkValue: '',
+            }],
+          }
+        ],
+        onCarouselDataChange: mockOnCarouselDataChange,
+        linkProps: {
+          deepLink: [
+            { value: 'test-deep-link', keys: ['key1'] }
+          ]
+        },
+        carouselActiveTabIndex: 0,
+        activeTab: 'ANDROID',
+        formatMessage: (message) => message.defaultMessage,
+      });
+
+      // First select the deep link type
+      const linkTypeSelect = screen.getAllByTestId('cap-custom-select')[0];
+      await act(async () => {
+        fireEvent.change(linkTypeSelect, { target: { value: 'DEEP_LINK' } });
+      });
+
+      // Then select the deep link value
+      const deepLinkSelect = screen.getAllByTestId('cap-custom-select')[1];
+      await act(async () => {
+        fireEvent.change(deepLinkSelect, { target: { value: 'test-deep-link' } });
+      });
+
+      // Wait for the deep link keys input to be rendered
+      const deepLinkKeysInput = await screen.findByTestId('cap-input-mobile-push-carousel-deep-link-keys-input-ANDROID-0');
+      expect(deepLinkKeysInput).toBeInTheDocument();
+      expect(deepLinkKeysInput.value).toBe('');
+
+      // Change deep link keys
+      await act(async () => {
+        fireEvent.change(deepLinkKeysInput, { target: { value: '' } });
+      });
+
+      expect(mockOnCarouselDataChange).toHaveBeenCalledWith(
+        'ANDROID',
+        expect.arrayContaining([
+          expect.objectContaining({
+            buttons: expect.arrayContaining([
+              expect.objectContaining({
+                deepLinkKeys: [],
+              }),
+            ]),
+          }),
+        ])
+      );
+    });
+
+    it('should handle empty carousel deep link keys', async () => {
+      const mockOnCarouselDataChange = jest.fn();
+
+      const { container } = renderComponent({
+        mediaType: 'CAROUSEL',
+        carouselData: [
+          {
+            mediaType: 'image',
+            imageUrl: 'test.jpg',
+            buttons: [{
+              actionOnClick: true,
+              linkType: 'DEEP_LINK',
+              deepLinkValue: 'test-deep-link',
+              deepLinkKeys: [],
+              externalLinkValue: '',
+            }],
+          }
+        ],
+        onCarouselDataChange: mockOnCarouselDataChange,
+        linkProps: {
+          deepLink: [
+            { value: 'test-deep-link', keys: ['key1'] }
+          ]
+        },
+        carouselActiveTabIndex: 0,
+        activeTab: 'ANDROID',
+        formatMessage: (message) => message.defaultMessage,
+      });
+
+      // First select the deep link type
+      const linkTypeSelect = screen.getAllByTestId('cap-custom-select')[0];
+      await act(async () => {
+        fireEvent.change(linkTypeSelect, { target: { value: 'DEEP_LINK' } });
+      });
+
+      // Then select the deep link value
+      const deepLinkSelect = screen.getAllByTestId('cap-custom-select')[1];
+      await act(async () => {
+        fireEvent.change(deepLinkSelect, { target: { value: 'test-deep-link' } });
+      });
+
+      // Wait for the deep link keys input to be rendered
+      const deepLinkKeysInput = await screen.findByTestId('cap-input-mobile-push-carousel-deep-link-keys-input-ANDROID-0');
+      expect(deepLinkKeysInput).toBeInTheDocument();
+      expect(deepLinkKeysInput.value).toBe('');
+
+      // Change deep link keys to empty
+      await act(async () => {
+        fireEvent.change(deepLinkKeysInput, { target: { value: '' } });
+      });
+
+      expect(mockOnCarouselDataChange).toHaveBeenCalledWith(
+        'ANDROID',
+        expect.arrayContaining([
+          expect.objectContaining({
+            buttons: expect.arrayContaining([
+              expect.objectContaining({
+                deepLinkKeys: [],
+              }),
+            ]),
+          }),
+        ])
+      );
     });
   });
 });