@capillarytech/creatives-library 8.0.128 → 8.0.129

package/v2Containers/MobilePushNew/components/MediaUploaders.js

@@ -0,0 +1,834 @@
+import React, {
+  useCallback,
+  useState,
+  useEffect,
+  useRef,
+} from "react";
+import PropTypes from "prop-types";
+import { FormattedMessage } from "react-intl";
+import CapButton from "@capillarytech/cap-ui-library/CapButton";
+import CapCard from "@capillarytech/cap-ui-library/CapCard";
+import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
+import CapDivider from "@capillarytech/cap-ui-library/CapDivider";
+import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
+import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
+import CapRadioGroup from "@capillarytech/cap-ui-library/CapRadioGroup";
+import CapRow from "@capillarytech/cap-ui-library/CapRow";
+import CapTab from "@capillarytech/cap-ui-library/CapTab";
+import CapCheckbox from "@capillarytech/cap-ui-library/CapCheckbox";
+import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
+import CapSelect from "@capillarytech/cap-ui-library/CapSelect";
+import CapInput from "@capillarytech/cap-ui-library/CapInput";
+import CapError from "@capillarytech/cap-ui-library/CapError";
+import CapImageUpload from "../../../v2Components/CapImageUpload";
+import CapVideoUpload from "../../../v2Components/CapVideoUpload";
+import {
+  ALLOWED_IMAGE_EXTENSIONS_REGEX,
+  MPUSH_IMG_SIZE,
+  MPUSH_IMG_MAX_WIDTH,
+  MPUSH_IMG_MAX_HEIGHT,
+  ALLOWED_EXTENSIONS_VIDEO_REGEX,
+  MPUSH_VIDEO_SIZE,
+  ALLOWED_GIF_REGEX,
+  MPUSH_GIF_SIZE,
+  MOBILE_PUSH_CHANNEL,
+  ANDROID,
+  GIF,
+  IMAGE,
+  VIDEO,
+  LINK_TYPE_OPTIONS,
+  DEEP_LINK,
+  EXTERNAL_LINK,
+} from "../constants";
+import messages from "../messages";
+import { validateExternalLink, validateDeepLink } from "../utils";
+
+// Initial carousel data structure
+const CAROUSEL_INITIAL_DATA = {
+  mediaType: 'image',
+  imageUrl: '',
+  videoSrc: '',
+  buttons: [{
+    actionOnClick: false,
+    linkType: DEEP_LINK,
+    deepLinkValue: '',
+    deepLinkKeys: [],
+    externalLinkValue: '',
+  }],
+};
+
+// Maximum number of carousel cards allowed
+const MAX_CAROUSEL_ALLOWED = 10;
+
+const MediaUploaders = ({
+  mediaType,
+  activeTab,
+  imageSrc,
+  uploadMpushAsset,
+  isFullMode,
+  setUpdateMpushImageSrc,
+  updateOnMpushImageReUpload,
+  imageData,
+  videoAssetList,
+  gifAssetList,
+  setUpdateMpushVideoSrc,
+  videoDataForVideo,
+  videoDataForGif,
+  videoSrc, // Add videoSrc prop for content state fallback
+  formatMessage,
+  linkProps,
+  clearImageDataByMediaType,
+  carouselData = [], // Carousel data from content state
+  onCarouselDataChange, // Callback to update carousel data in parent
+  mobilePushActions, // Mobile push actions for clearing assets
+  carouselActiveTabIndex,
+  setCarouselActiveTabIndex,
+  carouselLinkErrors = {}, // Carousel link errors from parent
+  updateCarouselLinkError, // Function to update carousel link errors in parent
+}) => {
+  // Carousel state management - separate for Android and iOS
+  const [carouselMediaType, setCarouselMediaType] = useState('image');
+
+  // Track re-upload mode to prevent automatic restoration during re-upload
+  const [isReUploading, setIsReUploading] = useState(false);
+
+  // Track previous media type to handle transitions
+  const previousMediaTypeRef = useRef(mediaType);
+
+  // Extract link props
+  const { deepLink } = linkProps || {};
+
+  // Get current carousel data based on active tab
+  const getCurrentCarouselData = useCallback(() => carouselData || [], [carouselData]);
+
+  // Set current carousel data based on active tab
+  const setCurrentCarouselData = useCallback((newData) => {
+    if (onCarouselDataChange) {
+      onCarouselDataChange(activeTab, newData);
+    }
+  }, [activeTab, onCarouselDataChange]);
+
+  // Clear previous media data when switching media types
+  useEffect(() => {
+    // Clear carousel data when switching to non-carousel media types
+    if (mediaType !== 'CAROUSEL') {
+      setCurrentCarouselData([]);
+      setCarouselActiveTabIndex(0);
+    }
+
+    // Clear image data when switching away from IMAGE media type
+    if (mediaType !== 'IMAGE') {
+      clearImageDataByMediaType('IMAGE');
+    }
+
+    // Clear image data when switching FROM CAROUSEL TO IMAGE
+    // This prevents carousel images from appearing in IMAGE media type
+    if (previousMediaTypeRef.current === 'CAROUSEL' && mediaType === 'IMAGE') {
+      clearImageDataByMediaType('IMAGE');
+    }
+
+    // Reset re-upload mode when switching media types
+    setIsReUploading(false);
+
+    // Update the previous media type ref
+    previousMediaTypeRef.current = mediaType;
+  }, [mediaType, clearImageDataByMediaType, setCurrentCarouselData]);
+
+  // Handle platform tab changes for carousel data
+  useEffect(() => {
+    // Reset active tab index when switching platforms
+    setCarouselActiveTabIndex(0);
+  }, [activeTab]);
+
+  // Initialize carousel data if empty
+  useEffect(() => {
+    if (mediaType === 'CAROUSEL' && (!carouselData || carouselData.length === 0)) {
+      setCurrentCarouselData([CAROUSEL_INITIAL_DATA]);
+    }
+  }, [mediaType, carouselData, activeTab, setCurrentCarouselData]);
+
+  // Listen for upload success and update carousel data
+  useEffect(() => {
+    // Skip automatic updates during re-upload mode
+    if (isReUploading) {
+      return;
+    }
+
+    if (mediaType === 'CAROUSEL' && imageData) {
+      const platformIndex = activeTab === ANDROID ? 0 : 1;
+      const uploadedAssetData = imageData[`uploadedAssetData${platformIndex}`];
+
+      // Only update if there's new upload data and it's different from current carousel data
+      if (uploadedAssetData && uploadedAssetData.metaInfo && uploadedAssetData.metaInfo.secure_file_path) {
+        const currentData = getCurrentCarouselData();
+        if (currentData.length > carouselActiveTabIndex) {
+          const currentCard = currentData[carouselActiveTabIndex];
+          const newImageUrl = uploadedAssetData.metaInfo.secure_file_path;
+
+          // Only update if the image URL is different from the current one and not empty
+          if (currentCard.imageUrl !== newImageUrl && newImageUrl !== '') {
+            const updatedData = [...currentData];
+            updatedData[carouselActiveTabIndex] = {
+              ...updatedData[carouselActiveTabIndex],
+              imageUrl: newImageUrl,
+            };
+            setCurrentCarouselData(updatedData);
+          }
+        }
+      }
+    }
+  }, [imageData, mediaType, activeTab, carouselActiveTabIndex, getCurrentCarouselData, setCurrentCarouselData, isReUploading]);
+
+  const renderImageComponent = useCallback(() => {
+    let imageSource = '';
+
+    // Use platform-specific image source
+    const platformKey = activeTab === ANDROID ? "androidImageSrc" : "iosImageSrc";
+    imageSource = imageSrc[platformKey] || '';
+
+    return (
+      <CapImageUpload
+        style={{ paddingTop: "20px" }}
+        allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
+        imgSize={MPUSH_IMG_SIZE}
+        imgWidth={MPUSH_IMG_MAX_WIDTH}
+        imgHeight={MPUSH_IMG_MAX_HEIGHT}
+        uploadAsset={uploadMpushAsset}
+        isFullMode={isFullMode}
+        imageSrc={imageSource}
+        updateImageSrc={(src) => setUpdateMpushImageSrc(src, activeTab === ANDROID ? 0 : 1, IMAGE)}
+        updateOnReUpload={updateOnMpushImageReUpload}
+        index={activeTab === ANDROID ? 0 : 1}
+        className="cap-custom-image-upload"
+        key="mpush-uploaded-image"
+        imageData={imageData}
+        channel={MOBILE_PUSH_CHANNEL}
+        showReUploadButton
+        errorMessage={formatMessage(messages.imageErrorMessage)}
+      />
+    );
+  }, [
+    activeTab,
+    imageSrc,
+    uploadMpushAsset,
+    isFullMode,
+    setUpdateMpushImageSrc,
+    updateOnMpushImageReUpload,
+    imageData,
+    formatMessage,
+  ]);
+
+  const renderVideoComponent = useCallback(() => {
+    // Apply same platform isolation logic as images
+    let platformVideoData = {};
+    const currentIndex = activeTab === ANDROID ? 0 : 1;
+
+    // Use platform-specific video data
+    if (videoDataForVideo && videoDataForVideo[`uploadedAssetData${currentIndex}`] && Object.keys(videoDataForVideo[`uploadedAssetData${currentIndex}`]).length > 0) {
+      // ONLY include the current platform's uploadedAssetData to prevent cross-platform bleeding
+      platformVideoData = {
+        [`uploadedAssetData${currentIndex}`]: videoDataForVideo[`uploadedAssetData${currentIndex}`],
+      };
+    } else {
+      // No platform-specific video data in Redux - check if video exists in content state (like images do)
+      // This handles initialization from edit data where video is in content but not yet in Redux
+      platformVideoData = {};
+    }
+
+    // Add videoSrc content state as additional source for the component
+    let videoSource = '';
+    videoSource = activeTab === ANDROID ? videoSrc?.androidVideoSrc || '' : videoSrc?.iosVideoSrc || '';
+
+    return (
+      <CapVideoUpload
+        key="mpush-video-upload"
+        index={currentIndex}
+        allowedExtensionsRegex={ALLOWED_EXTENSIONS_VIDEO_REGEX}
+        videoSize={MPUSH_VIDEO_SIZE}
+        isFullMode={isFullMode}
+        uploadAsset={uploadMpushAsset}
+        uploadedAssetList={videoAssetList}
+        onVideoUploadUpdateAssestList={setUpdateMpushVideoSrc}
+        videoData={platformVideoData}
+        videoSrc={videoSource} // Pass video content state as additional source
+        className="cap-custom-video-upload"
+        formClassName="mpush-video-upload"
+        channel={MOBILE_PUSH_CHANNEL}
+        errorMessage={formatMessage(messages.videoErrorMessage)}
+        showVideoNameAndDuration={false}
+        showReUploadButton
+        mediaType="video"
+      />
+    );
+  }, [
+    activeTab,
+    isFullMode,
+    uploadMpushAsset,
+    videoAssetList,
+    setUpdateMpushVideoSrc,
+    videoDataForVideo,
+    videoSrc,
+    formatMessage,
+  ]);
+
+  const renderGifComponent = useCallback(() => {
+    // Apply same platform isolation logic as images
+    let platformGifData = {};
+    const currentIndex = activeTab === ANDROID ? 0 : 1;
+
+    // Use platform-specific GIF data
+    if (videoDataForGif && videoDataForGif[`uploadedAssetData${currentIndex}`] && Object.keys(videoDataForGif[`uploadedAssetData${currentIndex}`]).length > 0) {
+      // ONLY include the current platform's uploadedAssetData to prevent cross-platform bleeding
+      platformGifData = {
+        [`uploadedAssetData${currentIndex}`]: videoDataForGif[`uploadedAssetData${currentIndex}`],
+      };
+    } else {
+      // No platform-specific GIF data in Redux - check if GIF exists in content state (like images do)
+      // This handles initialization from edit data where GIF is in content but not yet in Redux
+      platformGifData = {};
+    }
+    // Add videoSrc content state as additional source for the component
+    const gifSource = activeTab === ANDROID ? videoSrc?.androidVideoSrc || '' : videoSrc?.iosVideoSrc || '';
+
+    return (
+      <CapVideoUpload
+        key="mpush-gif-upload"
+        index={currentIndex}
+        allowedExtensionsRegex={ALLOWED_GIF_REGEX}
+        videoSize={MPUSH_GIF_SIZE}
+        isFullMode={isFullMode}
+        uploadAsset={uploadMpushAsset}
+        uploadedAssetList={gifAssetList}
+        onVideoUploadUpdateAssestList={setUpdateMpushVideoSrc}
+        videoData={platformGifData}
+        videoSrc={gifSource} // Pass GIF content state as additional source
+        className="cap-custom-gif-upload"
+        formClassName="mpush-gif-upload"
+        channel={MOBILE_PUSH_CHANNEL}
+        errorMessage={formatMessage(messages.gifErrorMessage)}
+        showVideoNameAndDuration={false}
+        showReUploadButton
+        mediaType={GIF.toLowerCase()}
+      />
+    );
+  }, [
+    activeTab,
+    uploadMpushAsset,
+    gifAssetList,
+    setUpdateMpushVideoSrc,
+    videoDataForGif,
+    videoSrc,
+  ]);
+
+  const renderCarouselComponent = useCallback(() => {
+    const handleCarouselMediaOptions = ({ target: { value = '' } = {} }) => {
+      setCarouselMediaType(value);
+      const currentData = getCurrentCarouselData();
+      setCurrentCarouselData(currentData.map((card) => ({
+        ...card,
+        mediaType: value,
+        imageUrl: value === 'image' ? card.imageUrl : '',
+        videoSrc: value === 'video' ? card.videoSrc : '',
+        buttons: card.buttons || [{
+          actionOnClick: false,
+          linkType: DEEP_LINK,
+          deepLinkValue: '',
+          externalLinkValue: '',
+        }],
+      })));
+    };
+
+    const onTabChange = (index) => {
+      setCarouselActiveTabIndex(index);
+    };
+
+    const addCarouselCard = () => {
+      const currentData = getCurrentCarouselData();
+      if (currentData.length < MAX_CAROUSEL_ALLOWED) {
+        setCurrentCarouselData([
+          ...currentData,
+          { ...CAROUSEL_INITIAL_DATA, mediaType: carouselMediaType },
+        ]);
+      }
+    };
+
+    const deleteCarouselCard = (index) => {
+      const currentData = getCurrentCarouselData();
+      if (currentData.length > 1) {
+        setCurrentCarouselData(currentData.filter((_, i) => i !== index));
+        if (carouselActiveTabIndex >= currentData.length - 1) {
+          setCarouselActiveTabIndex(Math.max(0, currentData.length - 2));
+        }
+      }
+    };
+
+    const updateCarouselCard = (index, fields) => {
+      const currentData = getCurrentCarouselData();
+      setCurrentCarouselData(currentData.map((card, i) => (
+        i === index ? { ...card, ...fields } : card
+      )));
+      // Don't clear assets for carousel cards since they store data in component state, not Redux
+      // Only clear assets for non-carousel media types
+    };
+
+    const handleCarouselImageChange = (image) => {
+      updateCarouselCard(parseInt(carouselActiveTabIndex, 10), { imageUrl: image });
+    };
+
+    // Carousel-specific re-upload handler that clears both Redux and component state
+    const handleCarouselImageReUpload = () => {
+      // Set re-upload mode to prevent automatic restoration
+      setIsReUploading(true);
+
+      // Clear Redux state (same as updateOnMpushImageReUpload)
+      updateOnMpushImageReUpload();
+
+      // Clear Redux uploadedAssetData to prevent automatic restoration
+      const platformIndex = activeTab === ANDROID ? 0 : 1;
+      mobilePushActions.clearAsset(platformIndex);
+
+      // Clear carousel component state for the current card
+      const currentData = getCurrentCarouselData();
+      if (currentData.length > carouselActiveTabIndex) {
+        const updatedData = [...currentData];
+        updatedData[carouselActiveTabIndex] = {
+          ...updatedData[carouselActiveTabIndex],
+          imageUrl: '',
+        };
+        setCurrentCarouselData(updatedData);
+      }
+
+      // Reset re-upload mode after a longer delay to allow for upload completion
+      setTimeout(() => {
+        setIsReUploading(false);
+      }, 3000); // Increased from 1000ms to 3000ms
+    };
+
+    // Action link handlers for carousel cards
+    const handleCarouselActionOnClickChange = (cardIndex, checked) => {
+      const currentData = getCurrentCarouselData();
+      const card = currentData[cardIndex];
+      const updatedButtons = [...card.buttons];
+      updatedButtons[0] = { ...updatedButtons[0], actionOnClick: checked };
+      updateCarouselCard(cardIndex, { buttons: updatedButtons });
+    };
+
+    const handleCarouselLinkTypeChange = (cardIndex, value) => {
+      const currentData = getCurrentCarouselData();
+      const card = currentData[cardIndex];
+      const updatedButtons = [...card.buttons];
+      updatedButtons[0] = { ...updatedButtons[0], linkType: value };
+      updateCarouselCard(cardIndex, { buttons: updatedButtons });
+      // Clear errors when link type changes
+      updateCarouselLinkError(cardIndex, 'deepLink', null);
+      updateCarouselLinkError(cardIndex, 'externalLink', null);
+    };
+
+    const handleCarouselDeepLinkChange = (cardIndex, value) => {
+      const currentData = getCurrentCarouselData();
+      const card = currentData[cardIndex];
+      const updatedButtons = [...card.buttons];
+      updatedButtons[0] = { ...updatedButtons[0], deepLinkValue: value };
+      updateCarouselCard(cardIndex, { buttons: updatedButtons });
+      // Validate deep link
+      const error = validateDeepLink(value, formatMessage, messages);
+      updateCarouselLinkError(cardIndex, 'deepLink', error);
+    };
+
+    const handleCarouselExternalLinkChange = (cardIndex, value) => {
+      const currentData = getCurrentCarouselData();
+      const card = currentData[cardIndex];
+      const updatedButtons = [...card.buttons];
+      updatedButtons[0] = { ...updatedButtons[0], externalLinkValue: value };
+      updateCarouselCard(cardIndex, { buttons: updatedButtons });
+      // Validate external link
+      const error = validateExternalLink(value, formatMessage, messages);
+      updateCarouselLinkError(cardIndex, 'externalLink', error);
+    };
+
+    const handleCarouselDeepLinkKeysChange = (cardIndex, value) => {
+      const currentData = getCurrentCarouselData();
+      const card = currentData[cardIndex];
+      const updatedButtons = [...card.buttons];
+      // Parse comma-separated values into array
+      const keysArray = value.split(',').map((key) => key.trim()).filter((key) => key.length > 0);
+      updatedButtons[0] = { ...updatedButtons[0], deepLinkKeys: keysArray };
+      updateCarouselCard(cardIndex, { buttons: updatedButtons });
+      // Validate deep link keys
+      const error = keysArray.length === 0 ? formatMessage(messages.deepLinkKeysRequired) : null;
+      updateCarouselLinkError(cardIndex, 'deepLinkKeys', error);
+    };
+
+    const renderCarouselImageComponent = (cardIndex) => {
+      const currentData = getCurrentCarouselData();
+      const card = currentData[cardIndex];
+
+      // Each carousel card maintains its own imageUrl
+      const imageSource = card.imageUrl || '';
+
+      return (
+        <CapImageUpload
+          style={{ paddingTop: "20px" }}
+          allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
+          imgSize={MPUSH_IMG_SIZE}
+          imgWidth={MPUSH_IMG_MAX_WIDTH}
+          imgHeight={MPUSH_IMG_MAX_HEIGHT}
+          uploadAsset={uploadMpushAsset}
+          isFullMode={isFullMode}
+          imageSrc={imageSource}
+          updateImageSrc={(src) => {
+            // Update only this specific carousel card's image
+            handleCarouselImageChange(src);
+          }}
+          updateOnReUpload={handleCarouselImageReUpload}
+          index={activeTab === ANDROID ? 0 : 1}
+          className="cap-custom-image-upload"
+          key={`carousel-image-${activeTab}-${cardIndex}`}
+          imageData={{}} // Empty object for carousel images since they're stored in component state
+          channel={MOBILE_PUSH_CHANNEL}
+          showReUploadButton
+          errorMessage={formatMessage(messages.imageErrorMessage)}
+          disableAutoRestore // Disable automatic restoration for carousel images
+        />
+      );
+    };
+
+    const renderCarouselVideoComponent = (cardIndex) => (
+      <CapVideoUpload
+        index={activeTab === ANDROID ? 0 : 1}
+        allowedExtensionsRegex={ALLOWED_EXTENSIONS_VIDEO_REGEX}
+        videoSize={MPUSH_VIDEO_SIZE}
+        isFullMode={isFullMode}
+        uploadAsset={uploadMpushAsset}
+        uploadedAssetList={videoAssetList}
+        onVideoUploadUpdateAssestList={(src) => updateCarouselCard(cardIndex, { videoSrc: src })}
+        videoData={videoDataForVideo}
+        className="cap-custom-video-upload"
+        formClassName="mpush-video-upload"
+        channel={MOBILE_PUSH_CHANNEL}
+        errorMessage={formatMessage(messages.videoErrorMessage)}
+        showVideoNameAndDuration={false}
+        showReUploadButton
+        mediaType="video"
+      />
+    );
+
+    const renderCarouselActionLinks = (cardIndex) => {
+      const currentData = getCurrentCarouselData();
+      const card = currentData[cardIndex];
+
+      // Ensure buttons array exists and has at least one element
+      if (!card.buttons || !Array.isArray(card.buttons) || card.buttons.length === 0) {
+        return null;
+      }
+
+      const button = card.buttons[0]; // We're handling only one button for now
+
+      return (
+        <>
+          <CapDivider />
+          <CapRow className="creatives-mpush-actions">
+            <CapRow className="mpush-actions-main">
+              <CapHeading type="h4" className="mpush-actions">
+                <FormattedMessage {...messages.buttonsAndLinks} />
+              </CapHeading>
+              <CapLabel className="optional-text">
+                <FormattedMessage {...messages.optionalText} />
+              </CapLabel>
+            </CapRow>
+            <CapCheckbox
+              checked={button.actionOnClick}
+              onChange={(e) => handleCarouselActionOnClickChange(cardIndex, e.target.checked)}
+              className="action-on-click-checkbox"
+            >
+              <FormattedMessage {...messages.actionOnClickBody} />
+            </CapCheckbox>
+            <CapRow>
+              <CapLabel className="action-description">
+                <FormattedMessage {...messages.actionDescription} />
+              </CapLabel>
+            </CapRow>
+            {button.actionOnClick && (
+              <CapRow style={{ display: "flex", justifyContent: "space-around" }}>
+                <CapColumn span={6}>
+                  <CapHeading type="h4" className="buttons-heading">
+                    <FormattedMessage {...messages.linkType} />
+                  </CapHeading>
+                  <CapSelect.CapCustomSelect
+                    options={LINK_TYPE_OPTIONS}
+                    value={button.linkType}
+                    onChange={(value) => handleCarouselLinkTypeChange(cardIndex, value)}
+                    key={`mobile-push-link-type-${activeTab}-${cardIndex}`}
+                    selectPlaceholder={formatMessage(messages.selectDeepLink)}
+                  />
+                </CapColumn>
+                {button.linkType === DEEP_LINK && (
+                  <CapColumn span={14}>
+                    <CapHeading type="h4" className="buttons-heading">
+                      {formatMessage(messages.deepLink)}
+                    </CapHeading>
+                    <CapSelect.CapCustomSelect
+                      options={deepLink || []}
+                      value={button.deepLinkValue}
+                      onChange={(value) => handleCarouselDeepLinkChange(cardIndex, value)}
+                      key={`mobile-push-deep-link-type-${activeTab}-${cardIndex}`}
+                      placeholder={formatMessage(messages.selectDeepLink)}
+                      style={{ marginTop: "10px" }}
+                    />
+                    {carouselLinkErrors[`${cardIndex}-deepLink`] && (
+                      <CapError className="mobile-push-carousel-deep-link-error">
+                        {carouselLinkErrors[`${cardIndex}-deepLink`]}
+                      </CapError>
+                    )}
+                  </CapColumn>
+                )}
+                {button.linkType === EXTERNAL_LINK && (
+                  <CapColumn span={14}>
+                    <CapHeading type="h4" className="buttons-heading">
+                      {formatMessage(messages.externalLink)}
+                    </CapHeading>
+                    <CapInput
+                      id={`mobile-push-external-link-input-${activeTab}-${cardIndex}`}
+                      onChange={(e) => handleCarouselExternalLinkChange(cardIndex, e.target.value)}
+                      placeholder={formatMessage(messages.enterExternalLink)}
+                      value={button.externalLinkValue}
+                      size="default"
+                      isRequired
+                    />
+                    {carouselLinkErrors[`${cardIndex}-externalLink`] && (
+                      <CapError className="mobile-push-carousel-external-link-error">
+                        {carouselLinkErrors[`${cardIndex}-externalLink`]}
+                      </CapError>
+                    )}
+                  </CapColumn>
+                )}
+              </CapRow>
+            )}
+            {button.linkType === DEEP_LINK && button.deepLinkValue && (() => {
+              const selectedDeepLink = deepLink?.find((link) => link?.value === button.deepLinkValue);
+              const deepLinkKeysFromSelection = selectedDeepLink?.keys;
+              let deepLinkKeysFromSelectionArray = [];
+              if (Array.isArray(deepLinkKeysFromSelection)) {
+                deepLinkKeysFromSelectionArray = deepLinkKeysFromSelection;
+              } else if (deepLinkKeysFromSelection) {
+                deepLinkKeysFromSelectionArray = [deepLinkKeysFromSelection];
+              }
+              return deepLinkKeysFromSelectionArray.length > 0;
+            })() && (
+              <CapRow style={{ marginTop: "10px", left: "6%", width: '115%'}}>
+                <CapColumn span={7}>
+                  <CapHeading type="h4" className="deep-link-keys-heading">
+                    {formatMessage(messages.deepLinkKeys)}
+                  </CapHeading>
+                  <CapLabel type="label2" className="deep-link-keys-value">
+                    {(() => {
+                      const selectedDeepLink = deepLink?.find((link) => link?.value === button.deepLinkValue);
+                      const deepLinkKeysFromSelection = selectedDeepLink?.keys;
+                      let deepLinkKeysArray = [];
+                      if (Array.isArray(button.deepLinkKeys)) {
+                        deepLinkKeysArray = button.deepLinkKeys;
+                      } else if (button.deepLinkKeys) {
+                        deepLinkKeysArray = [button.deepLinkKeys];
+                      }
+                      let deepLinkKeysFromSelectionArray = [];
+                      if (Array.isArray(deepLinkKeysFromSelection)) {
+                        deepLinkKeysFromSelectionArray = deepLinkKeysFromSelection;
+                      } else if (deepLinkKeysFromSelection) {
+                        deepLinkKeysFromSelectionArray = [deepLinkKeysFromSelection];
+                      }
+
+                      if (deepLinkKeysFromSelectionArray.length > 0) {
+                        return deepLinkKeysFromSelectionArray.join(', ');
+                      }
+                      if (deepLinkKeysArray.length > 0) {
+                        return deepLinkKeysArray.join(', ');
+                      }
+                      return "No value set";
+                    })()}
+                  </CapLabel>
+                  <CapInput
+                    id={`mobile-push-carousel-deep-link-keys-input-${activeTab}-${cardIndex}`}
+                    onChange={(e) => handleCarouselDeepLinkKeysChange(cardIndex, e.target.value)}
+                    placeholder={formatMessage(messages.deepLinkKeysPlaceholder, {
+                      key: (() => {
+                        const selectedDeepLink = deepLink?.find((link) => link?.value === button.deepLinkValue);
+                        const deepLinkKeysFromSelection = selectedDeepLink?.keys;
+                        let deepLinkKeysFromSelectionArray = [];
+                        if (Array.isArray(deepLinkKeysFromSelection)) {
+                          deepLinkKeysFromSelectionArray = deepLinkKeysFromSelection;
+                        } else if (deepLinkKeysFromSelection) {
+                          deepLinkKeysFromSelectionArray = [deepLinkKeysFromSelection];
+                        }
+                        return deepLinkKeysFromSelectionArray.join(', ') || 'deep link keys';
+                      })(),
+                    })}
+                    value={Array.isArray(button.deepLinkKeys) ? button.deepLinkKeys.join(', ') : (button.deepLinkKeys || "")}
+                    size="default"
+                    style={{ marginTop: "10px" }}
+                    error={carouselLinkErrors[`${cardIndex}-deepLinkKeys`]}
+                  />
+                </CapColumn>
+              </CapRow>
+            )}
+          </CapRow>
+        </>
+      );
+    };
+
+    const getTabPanes = () => {
+      const currentData = getCurrentCarouselData();
+      return currentData.map((data, index) => ({
+        key: index,
+        tab: index + 1,
+        content: (
+          <CapCard
+            title={`${formatMessage(messages.card)} ${index + 1}`}
+            extra={(
+              <CapButton
+                type="flat"
+                onClick={() => deleteCarouselCard(index)}
+                disabled={currentData.length === 1}
+              >
+                <CapIcon type="delete" />
+              </CapButton>
+            )}
+            className="mobile-push-carousel-card"
+          >
+            <CapRow>
+              {carouselMediaType === 'image' ? (
+                <CapRow>
+                  <CapHeading type="h4">
+                    {formatMessage(messages.mediaImage)}
+                  </CapHeading>
+                  {renderCarouselImageComponent(index)}
+                </CapRow>
+              ) : (
+                <CapRow>
+                  <CapHeading type="h4">
+                    {formatMessage(messages.mediaVideo)}
+                  </CapHeading>
+                  {renderCarouselVideoComponent(index)}
+                </CapRow>
+              )}
+            </CapRow>
+            {renderCarouselActionLinks(index)}
+          </CapCard>
+        ),
+      }));
+    };
+
+    const operations = (
+      <>
+        <CapDivider type="vertical" />
+        <CapButton
+          onClick={addCarouselCard}
+          type="flat"
+          className="add-carousel-content-button"
+          disabled={getCurrentCarouselData().length >= MAX_CAROUSEL_ALLOWED}
+        >
+          <CapIcon type="plus" />
+        </CapButton>
+      </>
+    );
+
+    return (
+      <div>
+        <CapRow>
+          <CapRow className="carousel-media-selection">
+            <CapColumn className="carousel-media-selection-heading">
+              <CapHeading type="h4">
+                {formatMessage(messages.carouselMediaType)}
+              </CapHeading>
+            </CapColumn>
+            <CapColumn>
+              <div className="carousel-radio-wrapper">
+                <CapRadioGroup
+                  id="carousel-media-radio"
+                  options={[
+                    {
+                      value: 'image',
+                      label: formatMessage(messages.mediaImage),
+                    },
+                    {
+                      value: 'video',
+                      label: formatMessage(messages.mediaVideo),
+                      disabled: true,
+                    },
+                  ]}
+                  value={carouselMediaType}
+                  onChange={handleCarouselMediaOptions}
+                  className="mobile-push-media-radio"
+                />
+              </div>
+            </CapColumn>
+          </CapRow>
+          <CapRow className="mobile-push-carousel-tab">
+            <CapTab
+              defaultActiveKey="0"
+              activeKey={carouselActiveTabIndex.toString()}
+              tabBarExtraContent={operations}
+              onChange={onTabChange}
+              panes={getTabPanes()}
+            />
+          </CapRow>
+        </CapRow>
+      </div>
+    );
+  }, [
+    carouselMediaType,
+    activeTab,
+    getCurrentCarouselData,
+    setCurrentCarouselData,
+    carouselActiveTabIndex,
+    uploadMpushAsset,
+    isFullMode,
+    setUpdateMpushImageSrc,
+    updateOnMpushImageReUpload,
+    imageData,
+    videoAssetList,
+    setUpdateMpushVideoSrc,
+    videoDataForVideo,
+    formatMessage,
+    clearImageDataByMediaType,
+    mobilePushActions,
+    carouselLinkErrors,
+    updateCarouselLinkError,
+    carouselActiveTabIndex,
+    setCarouselActiveTabIndex,
+  ]);
+
+  if (mediaType === IMAGE) return renderImageComponent();
+  if (mediaType === VIDEO) return renderVideoComponent();
+  if (mediaType === GIF) return renderGifComponent();
+  if (mediaType === "CAROUSEL") return renderCarouselComponent();
+  return null;
+};
+
+MediaUploaders.propTypes = {
+  mediaType: PropTypes.string.isRequired,
+  activeTab: PropTypes.string.isRequired,
+  imageSrc: PropTypes.object.isRequired,
+  uploadMpushAsset: PropTypes.func.isRequired,
+  isFullMode: PropTypes.bool.isRequired,
+  setUpdateMpushImageSrc: PropTypes.func.isRequired,
+  updateOnMpushImageReUpload: PropTypes.func.isRequired,
+  imageData: PropTypes.object.isRequired,
+  videoAssetList: PropTypes.object.isRequired,
+  gifAssetList: PropTypes.object.isRequired,
+  setUpdateMpushVideoSrc: PropTypes.func.isRequired,
+  videoDataForVideo: PropTypes.object.isRequired,
+  videoDataForGif: PropTypes.object.isRequired,
+  videoSrc: PropTypes.object, // Add videoSrc prop for content state fallback
+  formatMessage: PropTypes.func.isRequired,
+  linkProps: PropTypes.object,
+  clearImageDataByMediaType: PropTypes.func.isRequired,
+  carouselData: PropTypes.array,
+  onCarouselDataChange: PropTypes.func,
+  mobilePushActions: PropTypes.object.isRequired,
+  carouselActiveTabIndex: PropTypes.number.isRequired,
+  setCarouselActiveTabIndex: PropTypes.func.isRequired,
+  carouselLinkErrors: PropTypes.object,
+  updateCarouselLinkError: PropTypes.func,
+};
+
+export default MediaUploaders;