@capillarytech/creatives-library 8.0.129 → 8.0.130

package/v2Containers/MobilePushNew/index.js

@@ -1,3412 +0,0 @@
-import React, {
-  useCallback, useEffect, useMemo, useState, useRef,
-} from "react";
-import PropTypes from "prop-types";
-import { createStructuredSelector, createSelector } from "reselect";
-import { bindActionCreators } from "redux";
-import {
-  injectReducer,
-  injectSaga,
-} from "@capillarytech/vulcan-react-sdk/utils";
-import { cloneDeep, get, isEmpty } from "lodash";
-import CapCheckbox from "@capillarytech/cap-ui-library/CapCheckbox";
-import CapInput from "@capillarytech/cap-ui-library/CapInput";
-import CapButton from "@capillarytech/cap-ui-library/CapButton";
-import CapRow from "@capillarytech/cap-ui-library/CapRow";
-import CapSpin from "@capillarytech/cap-ui-library/CapSpin";
-import CapTab from "@capillarytech/cap-ui-library/CapTab";
-import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
-import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
-import { intlShape } from "react-intl";
-import "./index.scss";
-import { GA } from "@capillarytech/cap-ui-utils";
-import CapNotification from "@capillarytech/cap-ui-library/CapNotification";
-import { DAEMON } from "@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes";
-import globalMessages from "../Cap/messages";
-import * as actions from "./actions";
-import {
-  MEDIA_TYPES_OPTIONS,
-  ANDROID,
-  IOS,
-  MOBILE_PUSH_CHANNEL,
-  INITIAL_CONTENT,
-  BIG_PICTURE,
-  EXTERNAL_LINK,
-  GIF,
-  CAROUSEL,
-  PRIMARY,
-  SECONDARY,
-  MANUAL_CAROUSEL,
-  TEXT,
-} from "./constants";
-import TemplatePreview from "../../v2Components/TemplatePreview";
-import {
-  EMBEDDED,
-  IMAGE,
-  NONE,
-  VIDEO,
-  DEFAULT,
-  FULL,
-  TAG,
-  LIBRARY,
-  ALL,
-} from "../Whatsapp/constants";
-import * as globalActions from "../Cap/actions";
-import {
-  isLoadingMetaEntities,
-  makeSelectMetaEntities,
-  selectCurrentOrgDetails,
-  selectLiquidStateDetails,
-  setInjectedTags,
-} from "../Cap/selectors";
-import {
-  makeSelectMobilePushNew,
-  makeSelectUploadedAssetData,
-  makeSelectUploadedAssetData0,
-  makeSelectUploadedAssetData1,
-  makeSelectUploadAssetSuccess,
-  makeSelectCreateError,
-  makeSelectGetTemplateDetailsInProgress,
-  makeSelectAssetUploading,
-} from "./selectors";
-import withCreatives from "../../hoc/withCreatives";
-import { BIG_TEXT, DEEP_LINK, DEVICE_SUPPORTED } from "../InApp/constants";
-import { v2MobilePushSagas } from "./sagas";
-import { getContent } from "../MobilePush/commonMethods";
-import { getMessageObject } from "../../utils/messageUtils";
-import { gtmPush } from "../../utils/gtmTrackers";
-import { createPayload } from "../../utils/createPayload";
-import mobilePushReducer from "./reducer";
-import { hasLiquidSupportFeature } from "../../utils/common";
-import formBuilderMessages from "../../v2Components/FormBuilder/messages";
-import { validateMobilePushContent } from "../../utils/commonUtils";
-import { getSingleTab } from "../InApp/utils";
-import ErrorInfoNote from "../../v2Components/ErrorInfoNote";
-import usePlatformSync from "./hooks/usePlatformSync";
-import useUpload from "./hooks/useUpload";
-import { validateTags } from "../../utils/tagValidations";
-import { PlatformContentFields } from "./components";
-import { CREATE, EDIT, TRACK_CREATE_MPUSH } from "../App/constants";
-import { validateExternalLink, validateDeepLink } from "./utils";
-import messages from "./messages";
-import { EXTERNAL_URL } from "../CreativesContainer/constants";
-
-const MobilePushNew = ({
-  isFullMode,
-  intl,
-  onEnterTemplateName,
-  onRemoveTemplateName,
-  location,
-  selectedOfferDetails,
-  getDefaultTags,
-  injectedTags,
-  params,
-  templateData = {},
-  accountData,
-  editData = {},
-  mobilePushActions,
-  onValidationFail,
-  getFormLibraryData,
-  uploadedAssetData,
-  uploadedAssetData0,
-  uploadedAssetData1,
-  uploadAssetSuccess,
-  metaEntities,
-  supportedTags = [],
-  globalActions: globalActionsProps,
-  handleClose,
-  fetchingLiquidValidation,
-  createTemplateError,
-  isGetFormData,
-  getTemplateDetailsInProgress,
-  onCreateComplete,
-}) => {
-  const { formatMessage } = intl;
-
-  // Improved edit mode detection for both full and library modes
-  const templateId = params?.id || templateData?._id || templateData?.id;
-  const isEditMode = !!templateId;
-  const computedCreativesMode = isEditMode || templateData?.type === 'MOBILEPUSH' ? 'edit' : 'create';
-
-  const [sameContent, setSameContent] = useState(false);
-  const [templateName, setTemplateName] = useState("");
-  const [spin, setSpin] = useState(false);
-  const [activeTab, setActiveTab] = useState(ANDROID);
-  const [templateNameError, setTemplateNameError] = useState(false);
-  // Replace ctaData with platform-specific state
-  const [ctaDataAndroid, setCtaDataAndroid] = useState([]);
-  const [ctaDataIos, setCtaDataIos] = useState([]);
-  const ctaData = activeTab === ANDROID ? ctaDataAndroid : ctaDataIos;
-  const [deepLink, setDeepLink] = useState([]);
-  const [primaryButtonAndroid, setPrimaryButtonAndroid] = useState(false);
-  const [secondaryButtonAndroid, setSecondaryButtonAndroid] = useState(false);
-  const [primaryButtonIos, setPrimaryButtonIos] = useState(false);
-  const [secondaryButtonIos, setSecondaryButtonIos] = useState(false);
-  const [carouselActiveTabIndex, setCarouselActiveTabIndex] = useState(0);
-  const [errorMessage, setErrorMessage] = useState({
-    STANDARD_ERROR_MSG: {},
-    LIQUID_ERROR_MSG: {},
-  });
-  const [androidContent, setAndroidContent] = useState(INITIAL_CONTENT);
-
-  const [iosContent, setIosContent] = useState(INITIAL_CONTENT);
-  // Refs to track object references for debugging
-  const prevEditDataRef = useRef(null);
-  const prevUploadedAssetDataRef = useRef(null);
-  const prevVideoDataRef = useRef(null);
-
-  const videoData = useMemo(
-    () => {
-      const videoDataId = `vd_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-      const newVideoData = {
-        ...editData,
-        uploadedAssetData0,
-        uploadedAssetData1,
-        _videoDataId: videoDataId, // Add unique ID for tracking
-      };
-
-      // Store references for next comparison
-      prevEditDataRef.current = editData;
-      prevUploadedAssetDataRef.current = uploadedAssetData;
-      prevVideoDataRef.current = newVideoData;
-
-      return newVideoData;
-    },
-    [editData, uploadedAssetData0, uploadedAssetData1]
-  );
-
-  const imageData = useMemo(
-    () => {
-      // For carousel media type, don't include carousel images in Redux structure
-      // since carousel images are stored in component state, not Redux
-      const currentContent = activeTab === ANDROID ? androidContent : iosContent;
-
-      if (currentContent?.mediaType === CAROUSEL) {
-        // Return only the base editData and uploadedAssetData for non-carousel assets
-        return {
-          ...editData,
-          uploadedAssetData0,
-          uploadedAssetData1,
-        };
-      }
-
-      return {
-        ...editData,
-        uploadedAssetData0,
-        uploadedAssetData1,
-      };
-    },
-    [editData, uploadedAssetData0, uploadedAssetData1, activeTab, androidContent, iosContent]
-  );
-
-
-  const {
-    // States
-    androidAssetList,
-    iosAssetList,
-    mpushVideoSrcAndPreview,
-    imageSrc,
-    videoState,
-    // Upload functions
-    uploadMpushAsset,
-    setUpdateMpushImageSrc,
-    setUpdateMpushVideoSrc,
-    updateOnMpushImageReUpload,
-    updateOnMpushVideoReUpload,
-    // Clear functions
-    clearImageDataByMediaType,
-    resetUploadStates,
-  } = useUpload(
-    mobilePushActions,
-    editData,
-    uploadedAssetData0,
-    uploadedAssetData1,
-    uploadAssetSuccess,
-    sameContent,
-    setAndroidContent,
-    setIosContent,
-    activeTab,
-    androidContent,
-    iosContent
-  );
-
-  const [androidTitleError, setAndroidTitleError] = useState("");
-  const [androidMessageError, setAndroidMessageError] = useState("");
-  const [iosTitleError, setIosTitleError] = useState("");
-  const [iosMessageError, setIosMessageError] = useState("");
-
-  const [tags, updateTags] = useState([]);
-
-  // Ref to track if schema has been fetched to prevent duplicate calls
-  const schemaFetched = useRef(false);
-
-  // Ref to track previous mode to detect mode changes
-  const prevModeRef = useRef({ id: params?.id, isFullMode });
-
-  // Add URL validation state
-  const [androidExternalLinkError, setAndroidExternalLinkError] = useState("");
-  const [iosExternalLinkError, setIosExternalLinkError] = useState("");
-  const [androidDeepLinkError, setAndroidDeepLinkError] = useState("");
-  const [iosDeepLinkError, setIosDeepLinkError] = useState("");
-  const [androidDeepLinkKeysError, setAndroidDeepLinkKeysError] = useState("");
-  const [iosDeepLinkKeysError, setIosDeepLinkKeysError] = useState("");
-  const [carouselLinkErrors, setCarouselLinkErrors] = useState({});
-
-  // Ref for create timeout fallback
-  const createTimeoutRef = useRef(null);
-
-  // Function to validate carousel data completeness
-  const validateCarouselData = useCallback((carouselData = []) => {
-    if (!carouselData || carouselData.length === 0) {
-      return false;
-    }
-
-    return carouselData.every((card) => {
-      // Check if image is uploaded (currently only image media type is supported)
-      if (card.mediaType === 'image' && !card.imageUrl) {
-        return false;
-      }
-
-      // Check if buttons have proper link data when actionOnClick is true
-      if (card.buttons && card.buttons.length > 0) {
-        return card.buttons.every((button) => {
-          if (button.actionOnClick) {
-            // Check if link is provided based on link type
-            if (button.linkType === DEEP_LINK && !button.deepLinkValue) {
-              return false;
-            }
-            if (button.linkType === DEEP_LINK && button.deepLinkValue) {
-              // Check if the selected deep link has keys, and if so, require them
-              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];
-              }
-              
-              // Only require deep link keys if the selected deep link has keys defined
-              if (deepLinkKeysFromSelectionArray.length > 0 && (!Array.isArray(button.deepLinkKeys) || button.deepLinkKeys.length === 0)) {
-                return false;
-              }
-            }
-            if (button.linkType === EXTERNAL_LINK && !button.externalLinkValue) {
-              return false;
-            }
-          }
-          return true;
-        });
-      }
-
-      return true;
-    });
-  }, [deepLink]);
-
-  // Function to check if carousel data is valid for both platforms
-  const isCarouselDataValid = useCallback(() => {
-    // Check Android carousel data
-    const androidCarouselValid = androidContent?.mediaType === CAROUSEL
-      ? validateCarouselData(androidContent.carouselData)
-      : true;
-
-    // Check iOS carousel data (only if not using same content)
-    let iosCarouselValid = true;
-    if (sameContent) {
-      iosCarouselValid = androidCarouselValid; // If same content, iOS uses same data as Android
-    } else if (iosContent?.mediaType === CAROUSEL) {
-      iosCarouselValid = validateCarouselData(iosContent.carouselData);
-    }
-
-    return androidCarouselValid && iosCarouselValid;
-  }, [androidContent?.mediaType, androidContent?.carouselData, iosContent?.mediaType, iosContent?.carouselData, sameContent, validateCarouselData]);
-
-  // Define resetFormData early to avoid initialization errors
-  const resetFormData = useCallback(() => {
-    setTemplateName("");
-    setAndroidContent({
-      title: "",
-      message: "",
-      mediaType: NONE,
-      buttons: [],
-      actionOnClick: false,
-      linkType: DEEP_LINK,
-      deepLinkValue: "",
-      deepLinkKeysValue: [],
-      externalLinkValue: "",
-      carouselData: [],
-    });
-    setIosContent({
-      title: "",
-      message: "",
-      mediaType: NONE,
-      buttons: [],
-      actionOnClick: false,
-      linkType: DEEP_LINK,
-      deepLinkValue: "",
-      deepLinkKeysValue: [],
-      externalLinkValue: "",
-      carouselData: [],
-    });
-    // Update resetFormData to reset both ctaDataAndroid and ctaDataIos
-    setCtaDataAndroid([]);
-    setCtaDataIos([]);
-    setPrimaryButtonAndroid(false);
-    setSecondaryButtonAndroid(false);
-    setPrimaryButtonIos(false);
-    setSecondaryButtonIos(false);
-    setSameContent(false);
-    setTemplateNameError(false);
-    setAndroidTitleError("");
-    setAndroidMessageError("");
-    setIosTitleError("");
-    setIosMessageError("");
-    setAndroidExternalLinkError("");
-    setIosExternalLinkError("");
-    setAndroidDeepLinkError("");
-    setIosDeepLinkError("");
-    setCarouselLinkErrors({});
-    resetUploadStates();
-  }, [resetUploadStates]);
-
-  useEffect(() => {
-    if (createTemplateError) {
-      CapNotification.error({
-        message: createTemplateError,
-        key: "createMpushError",
-      });
-      return;
-    }
-
-    // Prevent duplicate schema fetching
-    if (schemaFetched.current) return;
-
-    const { type, module } = location?.query || {};
-    const isEmbedded = type === EMBEDDED;
-    const context = isEmbedded ? module : DEFAULT;
-    const embedded = isEmbedded ? type : FULL;
-    const query = {
-      layout: 'mobilepush',
-      type: TAG,
-      context,
-      embedded,
-    };
-    if (getDefaultTags) {
-      query.context = getDefaultTags;
-    }
-    globalActionsProps.fetchSchemaForEntity(query);
-    schemaFetched.current = true;
-  }, [createTemplateError, location?.query?.type, location?.query?.module, getDefaultTags]);
-
-  useEffect(() => {
-    let tag = get(metaEntities, `tags.standard`, []);
-    const { type, module } = location?.query || {};
-    if (type === EMBEDDED && module === LIBRARY && !getDefaultTags) {
-      tag = supportedTags;
-    }
-    updateTags(tag);
-  }, [metaEntities, location, getDefaultTags, supportedTags]);
-
-  const templateDescErrorHandler = useCallback(
-    (value) => {
-      let errorTemplateDescMessage = "";
-
-      const { unsupportedTags, isBraceError } = validateTags({
-        content: value,
-        tagsParam: tags,
-        injectedTagsParams: injectedTags,
-        location,
-        tagModule: getDefaultTags,
-      }) || {};
-      if (value === "" && MEDIA_TYPES_OPTIONS[0].value) {
-        errorTemplateDescMessage = formatMessage(
-          messages.emptyTemplateDescErrorMessage
-        );
-      }
-      if (unsupportedTags?.length > 0) {
-        errorTemplateDescMessage = formatMessage(
-          globalMessages.unsupportedTagsValidationError,
-          {
-            unsupportedTags,
-          }
-        );
-      }
-      if (isBraceError) {
-        errorTemplateDescMessage = formatMessage(
-          globalMessages.unbalanacedCurlyBraces
-        );
-      }
-      return errorTemplateDescMessage;
-    },
-    [tags, injectedTags, location, getDefaultTags, formatMessage]
-  );
-
-  const validateTitle = useCallback(
-    (value) => {
-      let error = templateDescErrorHandler(value);
-      if (!value || value.trim() === "") {
-        error = formatMessage(messages.emptyTemplateDescErrorMessage);
-      }
-      return error || "";
-    },
-    [templateDescErrorHandler, formatMessage]
-  );
-
-  const validateMessage = useCallback(
-    (value) => {
-      let error = templateDescErrorHandler(value);
-      if (!value || value.trim() === "") {
-        error = formatMessage(messages.emptyTemplateDescErrorMessage);
-      }
-      return error || "";
-    },
-    [templateDescErrorHandler, formatMessage]
-  );
-
-  const handleOnTagsContextChange = useCallback(
-    (data) => {
-      const { type } = location?.query || {};
-      const tempData = (data || "").toLowerCase();
-      const isEmbedded = type === EMBEDDED;
-      const embedded = isEmbedded ? type : FULL;
-      const context = tempData === ALL ? DEFAULT : tempData;
-      const query = {
-        layout: 'mobilepush',
-        type: TAG,
-        context,
-        embedded,
-      };
-      globalActionsProps.fetchSchemaForEntity(query);
-    },
-    [globalActionsProps, location]
-  );
-
-  useEffect(() => {
-    // accountData IS the selectedWeChatAccount object based on mapStateToProps
-    const accountObj = accountData || {};
-    const deepLinkObj = accountObj?.configs?.deeplink || "";
-
-    // Debug logging removed - issue identified and fixed
-
-    if (!isEmpty(accountObj)) {
-      const { configs = {} } = accountObj;
-      const isAndroidSupported = configs?.android === DEVICE_SUPPORTED;
-
-      try {
-        // Parse deep link data - handle both object and array formats
-        const parsedDeepLinks = JSON.parse(deepLinkObj || "[]");
-        // Debug logging removed - issue identified and fixed
-        
-        let keys = [];
-        
-        if (Array.isArray(parsedDeepLinks)) {
-          // Handle array format
-          keys = parsedDeepLinks.map((link) => ({
-            label: link?.name,
-            value: link?.link,
-            title: link?.link,
-            keys: link?.keys,
-          }));
-        } else if (typeof parsedDeepLinks === 'object' && parsedDeepLinks !== null) {
-          // Handle object format - convert to array
-          keys = Object.values(parsedDeepLinks).map((link) => ({
-            label: link?.name,
-            value: link?.link,
-            title: link?.link,
-            keys: link?.keys,
-          }));
-        }
-
-        // Debug logging removed - issue identified and fixed
-
-        setActiveTab(isAndroidSupported ? ANDROID : IOS);
-        setDeepLink(keys);
-      } catch (error) {
-        console.error("[MobilePushNew] Error parsing deeplinks:", error, { deepLinkObj });
-        setDeepLink([]);
-      }
-    } else {
-      // Debug logging removed - issue identified and fixed
-      setDeepLink([]);
-    }
-  }, [accountData?.configs?.deeplink, accountData?.configs?.android, accountData]);
-
-  // Add debug logs for template switching and data population
-  useEffect(() => {
-    resetFormData();
-    if (params?.id) {
-      setSpin(true);
-      mobilePushActions.getTemplateDetails(params.id);
-    }
-    // No need to resetStore here, as we want to keep the new template's details
-  }, [params?.id, resetFormData, mobilePushActions]);
-
-  // Add a useEffect to reset form data only when switching from create mode to edit mode
-  useEffect(() => {
-    const currentMode = { id: params?.id, isFullMode };
-    const prevMode = prevModeRef.current;
-    const isEditModeNow = !!(params?.id && isFullMode);
-    const wasCreateMode = !(prevMode.id && prevMode.isFullMode);
-    const isModeChange = prevMode.id !== currentMode.id || prevMode.isFullMode !== currentMode.isFullMode;
-
-    // Only reset if we're switching from create mode to edit mode
-    if (isModeChange && isEditModeNow && wasCreateMode) {
-      resetFormData();
-    }
-
-    prevModeRef.current = currentMode;
-  }, [params?.id, isFullMode, resetFormData]);
-
-  // Add a useEffect to reset dataPopulated when switching templates
-  useEffect(() => {
-    // setDataPopulated(false); // Removed
-  }, [params?.id]);
-
-  // Data population useEffect - ONLY for edit mode
-  useEffect(() => {
-    if (!isEditMode) {
-      return;
-    }
-
-    // Do NOT reset form state here; only populate data
-    // resetFormData();
-
-    const { name = "", versions = {} } = editData?.templateDetails || {};
-    const editContent = versions?.base || {};
-
-    // If templateDetails exist but content is empty/invalid, hide spinner
-    if (editData?.templateDetails && isEmpty(editContent)) {
-      setSpin(false);
-      return;
-    }
-
-    if (editContent && !isEmpty(editContent)) {
-      // Populate data immediately
-      setTemplateName(name);
-      // Process Android content
-      const androidContentType = editContent?.ANDROID;
-      if (!isEmpty(androidContentType)) {
-        const {
-          title: androidTitle = "",
-          message: androidMessage = "",
-          ctas: androidCta = [],
-          expandableDetails: androidExpandableDetails = {},
-          image: androidImage = "",
-          cta: androidMainCta = null, // This is the main notification body CTA
-        } = androidContentType || {};
-
-        // Only destructure androidExpandableDetails here
-        const { style: androidStyle, ctas: androidCtas = [], image: androidExpandableImage = "" } = androidExpandableDetails || {};
-        // In iOS content extraction, use unique names:
-
-        // Determine media type based on style and available content
-        let androidMediaType = NONE;
-        let androidImageSrc = "";
-        let androidVideoSrc = "";
-        let androidVideoPreview = "";
-        let carouselDataFromEdit = [];
-
-        if (androidStyle === BIG_PICTURE) {
-          androidMediaType = IMAGE;
-          androidImageSrc = androidExpandableImage || androidImage;
-        } else if (androidStyle === BIG_TEXT) {
-          androidMediaType = NONE;
-        } else if (androidStyle === MANUAL_CAROUSEL) {
-          androidMediaType = CAROUSEL;
-        }
-
-        // Handle video/GIF content from expandableDetails.media array (new format)
-        if (androidExpandableDetails?.media && Array.isArray(androidExpandableDetails.media) && androidExpandableDetails.media.length > 0) {
-          const mediaItem = androidExpandableDetails.media[0];
-          if (mediaItem.type === VIDEO) {
-            // Distinguish between actual video and GIF based on URL extension
-            if (mediaItem.url && mediaItem.url.toLowerCase().includes('.gif')) {
-              androidMediaType = GIF;
-            } else {
-              androidMediaType = VIDEO;
-            }
-            androidVideoSrc = mediaItem.url;
-            androidVideoPreview = mediaItem.url;
-          } else if (mediaItem.type === GIF) {
-            androidMediaType = GIF;
-            androidVideoSrc = mediaItem.url;
-            androidVideoPreview = mediaItem.url;
-          }
-        }
-        // Handle video content if present in image field (legacy format)
-        else if (androidImage && (androidImage.includes('.mp4') || androidImage.includes('.mov'))) {
-          androidMediaType = VIDEO;
-          androidVideoSrc = androidImage;
-          androidVideoPreview = androidImage; // Use same for preview
-        }
-        // Handle GIF content if present in image field (legacy format)
-        else if (androidImage && androidImage.toLowerCase().includes('.gif')) {
-          androidMediaType = GIF;
-          androidVideoSrc = androidImage;
-          androidVideoPreview = androidImage; // Use same for preview
-        }
-        // Handle carousel content from expandableDetails.carouselData
-        else if ((androidExpandableDetails?.style === MANUAL_CAROUSEL || androidContentType?.type === CAROUSEL) && androidExpandableDetails?.carouselData) {
-          androidMediaType = CAROUSEL;
-          // Process carousel data from editData
-          carouselDataFromEdit = androidExpandableDetails.carouselData.map((card) => ({
-            mediaType: card.mediaType || IMAGE.toLowerCase(),
-            imageUrl: card.imageUrl || '',
-            videoSrc: card.videoSrc || '',
-            buttons: card.buttons ? card.buttons.map((button) => {
-              // Extract deep link keys from deepLinkValue URL for carousel buttons
-              let deepLinkKeys = [];
-              let matchedDeepLinkValue = button.deepLinkValue || "";
-              
-              if (button.linkType === DEEP_LINK && button.deepLinkValue) {
-                // Parse deep links directly from accountData to avoid timing issues
-                let availableDeepLinks = [];
-                if (accountData?.configs?.deeplink) {
-                  try {
-                    const parsedDeepLinks = JSON.parse(accountData.configs.deeplink || "[]");
-                    if (Array.isArray(parsedDeepLinks)) {
-                      availableDeepLinks = parsedDeepLinks.map((link) => ({
-                        label: link?.name,
-                        value: link?.link,
-                        title: link?.link,
-                        keys: link?.keys,
-                      }));
-                    } else if (typeof parsedDeepLinks === 'object' && parsedDeepLinks !== null) {
-                      availableDeepLinks = Object.values(parsedDeepLinks).map((link) => ({
-                        label: link?.name,
-                        value: link?.link,
-                        title: link?.link,
-                        keys: link?.keys,
-                      }));
-                    }
-                  } catch (error) {
-                    console.error("[MobilePushNew] Error parsing deeplinks for carousel button:", error);
-                  }
-                }
-                
-                if (availableDeepLinks.length > 0) {
-                  // Remove query parameters from deepLinkValue to find the base deep link
-                  let baseDeepLinkValue = button.deepLinkValue;
-                  try {
-                    const url = new URL(button.deepLinkValue);
-                    baseDeepLinkValue = url.origin + url.pathname;
-                  } catch (error) {
-                    // If URL parsing fails, try to remove query parameters manually
-                    const queryIndex = button.deepLinkValue.indexOf('?');
-                    if (queryIndex !== -1) {
-                      baseDeepLinkValue = button.deepLinkValue.substring(0, queryIndex);
-                    }
-                  }
-                  
-                  // Find matching deep link by comparing with the base deep link value
-                  const matchingDeepLink = availableDeepLinks.find((link) => link.value === baseDeepLinkValue);
-                  if (matchingDeepLink) {
-                    matchedDeepLinkValue = matchingDeepLink.value;
-                  } else {
-                    // If no exact match, try to find by partial match
-                    const partialMatch = availableDeepLinks.find((link) =>
-                      button.deepLinkValue.includes(link.value)
-                      || link.value.includes(baseDeepLinkValue)
-                    );
-                    if (partialMatch) {
-                      matchedDeepLinkValue = partialMatch.value;
-                    }
-                  }
-                }
-                
-                // Extract deep link keys from the original deepLinkValue URL
-                try {
-                  const url = new URL(button.deepLinkValue);
-                  const extractedKeys = [];
-                  url.searchParams.forEach((value, key) => {
-                    if (value === key) { // Only extract keys where value equals key (deep link keys pattern)
-                      extractedKeys.push(key);
-                    }
-                  });
-                  if (extractedKeys.length > 0) {
-                    deepLinkKeys = extractedKeys;
-                  }
-                } catch (error) {
-                  // If URL parsing fails, try manual extraction
-                  const url = button.deepLinkValue;
-                  const queryMatch = url.match(/[?&]([^=&]+)=([^=&]+)/g);
-                  if (queryMatch) {
-                    const extractedKeys = [];
-                    queryMatch.forEach((param) => {
-                      const [key, value] = param.replace(/^[?&]/, '').split('=');
-                      if (key === value) { // Only extract keys where value equals key
-                        extractedKeys.push(key);
-                      }
-                    });
-                    if (extractedKeys.length > 0) {
-                      deepLinkKeys = extractedKeys;
-                    }
-                  }
-                }
-              }
-
-              return {
-                ...button,
-                deepLinkValue: matchedDeepLinkValue,
-                deepLinkKeys: deepLinkKeys,
-              };
-            }) : [],
-          }));
-
-          // Initialize carousel images in Redux state for proper display in uploaders
-          if (carouselDataFromEdit.length > 0) {
-            const firstCard = carouselDataFromEdit[0];
-            if (firstCard.mediaType === 'image' && firstCard.imageUrl) {
-              // Set the first carousel image in Redux state for the uploader to recognize
-              setUpdateMpushImageSrc(firstCard.imageUrl, 0, CAROUSEL);
-            }
-          }
-        }
-
-        let androidButtonsValue = [];
-        if (Array.isArray(androidCtas)) {
-          androidButtonsValue = androidCtas;
-        } else if (Array.isArray(androidCta)) {
-          androidButtonsValue = androidCta;
-        }
-        const androidContentData = {
-          title: androidTitle,
-          message: androidMessage,
-          mediaType: androidMediaType,
-          buttons: androidButtonsValue,
-          actionOnClick: false,
-          linkType: DEEP_LINK,
-          deepLinkValue: "",
-          deepLinkKeysValue: [], // Initialize deep link keys value
-          externalLinkValue: "",
-          imageSrc: androidImageSrc,
-          videoSrc: androidVideoSrc,
-          videoPreview: androidVideoPreview,
-          carouselData: carouselDataFromEdit, // Initialize carousel data
-        };
-        // Set image/video sources for upload state with platform isolation
-        if (androidImageSrc) {
-          setUpdateMpushImageSrc(androidImageSrc, 0, IMAGE);
-        }
-
-        // Apply exact same simple pattern as images for videos/GIFs
-        if (androidVideoSrc) {
-          setUpdateMpushVideoSrc(0, {
-            videoSrc: androidVideoSrc,
-            previewUrl: androidVideoPreview,
-          }, true); // isInitialization = true
-        }
-
-        // Check for main notification body CTA (actionOnClick functionality)
-        if (androidMainCta?.actionLink) {
-          androidContentData.actionOnClick = true;
-
-          // Determine link type based on saved CTA type (prioritize saved type over URL pattern)
-          if (androidMainCta.type === EXTERNAL_URL) {
-            androidContentData.linkType = EXTERNAL_LINK;
-            androidContentData.externalLinkValue = androidMainCta.actionLink;
-            androidContentData.deepLinkValue = "";
-          } else if (androidMainCta.type === DEEP_LINK) {
-            androidContentData.linkType = DEEP_LINK;
-            
-            // Find the matching deep link from the available options
-            let matchedDeepLinkValue = "";
-            if (androidMainCta.actionLink) {
-              // Parse deep links directly from accountData to avoid timing issues
-              let availableDeepLinks = [];
-              if (accountData?.configs?.deeplink) {
-                try {
-                  const parsedDeepLinks = JSON.parse(accountData.configs.deeplink || "[]");
-                  if (Array.isArray(parsedDeepLinks)) {
-                    availableDeepLinks = parsedDeepLinks.map((link) => ({
-                      label: link?.name,
-                      value: link?.link,
-                      title: link?.link,
-                      keys: link?.keys,
-                    }));
-                  } else if (typeof parsedDeepLinks === 'object' && parsedDeepLinks !== null) {
-                    availableDeepLinks = Object.values(parsedDeepLinks).map((link) => ({
-                      label: link?.name,
-                      value: link?.link,
-                      title: link?.link,
-                      keys: link?.keys,
-                    }));
-                  }
-                } catch (error) {
-                  console.error("[MobilePushNew] Error parsing deeplinks for main CTA:", error);
-                }
-              }
-              
-              if (availableDeepLinks.length > 0) {
-                // Remove query parameters from actionLink to find the base deep link
-                let baseActionLink = androidMainCta.actionLink;
-                try {
-                  const url = new URL(androidMainCta.actionLink);
-                  baseActionLink = url.origin + url.pathname;
-                } catch (error) {
-                  // If URL parsing fails, try to remove query parameters manually
-                  const queryIndex = androidMainCta.actionLink.indexOf('?');
-                  if (queryIndex !== -1) {
-                    baseActionLink = androidMainCta.actionLink.substring(0, queryIndex);
-                  }
-                }
-                
-                // Find matching deep link by comparing with the base action link
-                const matchingDeepLink = availableDeepLinks.find((link) => link.value === baseActionLink);
-                if (matchingDeepLink) {
-                  matchedDeepLinkValue = matchingDeepLink.value;
-                } else {
-                  // If no exact match, try to find by partial match
-                  const partialMatch = availableDeepLinks.find((link) =>
-                    androidMainCta.actionLink.includes(link.value)
-                    || link.value.includes(baseActionLink)
-                  );
-                  if (partialMatch) {
-                    matchedDeepLinkValue = partialMatch.value;
-                  }
-                }
-              }
-            }
-            
-            androidContentData.deepLinkValue = matchedDeepLinkValue;
-            
-            // Handle deep link keys - could be string or array
-            const { deepLinkKeys } = androidMainCta;
-            let deepLinkKeysValue = [];
-            
-            // First try to get from main CTA
-            if (Array.isArray(deepLinkKeys)) {
-              deepLinkKeysValue = deepLinkKeys;
-            } else if (typeof deepLinkKeys === 'string' && deepLinkKeys) {
-              deepLinkKeysValue = [deepLinkKeys];
-            }
-            
-            // If not found in main CTA, try to get from custom array
-            if (deepLinkKeysValue.length === 0 && androidContentType?.custom && Array.isArray(androidContentType.custom)) {
-              deepLinkKeysValue = androidContentType.custom
-                .filter((item) => item.key && item.value)
-                .map((item) => item.key);
-            }
-            
-            // If still not found, try to extract from action link URL
-            if (deepLinkKeysValue.length === 0 && androidMainCta?.actionLink) {
-              try {
-                const url = new URL(androidMainCta.actionLink);
-                const extractedKeys = [];
-                url.searchParams.forEach((value, key) => {
-                  if (value === key) { // Only extract keys where value equals key (deep link keys pattern)
-                    extractedKeys.push(key);
-                  }
-                });
-                if (extractedKeys.length > 0) {
-                  deepLinkKeysValue = extractedKeys;
-                }
-              } catch (error) {
-                // If URL parsing fails, try manual extraction
-                const url = androidMainCta.actionLink;
-                const queryMatch = url.match(/[?&]([^=&]+)=([^=&]+)/g);
-                if (queryMatch) {
-                  const extractedKeys = [];
-                  queryMatch.forEach((param) => {
-                    const [key, value] = param.replace(/^[?&]/, '').split('=');
-                    if (key === value) { // Only extract keys where value equals key
-                      extractedKeys.push(key);
-                    }
-                  });
-                  if (extractedKeys.length > 0) {
-                    deepLinkKeysValue = extractedKeys;
-                  }
-                }
-              }
-            }
-            
-            androidContentData.deepLinkKeysValue = deepLinkKeysValue;
-            androidContentData.externalLinkValue = "";
-          } else if (androidMainCta.actionLink.startsWith('http://') || androidMainCta.actionLink.startsWith('https://')) {
-            androidContentData.linkType = EXTERNAL_LINK;
-            androidContentData.externalLinkValue = androidMainCta.actionLink;
-            androidContentData.deepLinkValue = "";
-          } else {
-            androidContentData.linkType = DEEP_LINK;
-            androidContentData.deepLinkValue = androidMainCta.actionLink;
-            androidContentData.externalLinkValue = "";
-          }
-        } else {
-          // If no CTA data, ensure both link values are empty
-          androidContentData.deepLinkValue = "";
-          androidContentData.externalLinkValue = "";
-        }
-
-        // Set Android content after all deep link keys are processed
-        setAndroidContent(androidContentData);
-
-        // Set CTA data for buttons (from expandableDetails.ctas)
-        const androidButtons = androidExpandableDetails?.ctas || [];
-        
-        if (androidButtons.length > 0) {
-          const ctaDataFromAndroid = androidButtons.map((button, index) => {
-            // Extract deep link keys from action link URL for button CTAs
-            let deepLinkKeys = [];
-            if (button.type === DEEP_LINK && button.actionLink) {
-              // First try to get from button's deepLinkKeys property
-              if (Array.isArray(button.deepLinkKeys)) {
-                deepLinkKeys = button.deepLinkKeys;
-              } else if (typeof button.deepLinkKeys === 'string' && button.deepLinkKeys) {
-                deepLinkKeys = [button.deepLinkKeys];
-              }
-              
-              // If not found in button, try to get from custom array
-              if (deepLinkKeys.length === 0 && androidExpandableDetails?.custom && Array.isArray(androidExpandableDetails.custom)) {
-                const customKeys = androidExpandableDetails.custom
-                  .filter((item) => item.key && item.value)
-                  .map((item) => item.key);
-                if (customKeys.length > 0) {
-                  deepLinkKeys = customKeys;
-                }
-              }
-              
-              // If still not found, try to extract from action link URL
-              if (deepLinkKeys.length === 0) {
-                try {
-                  const url = new URL(button.actionLink);
-                  const extractedKeys = [];
-                  url.searchParams.forEach((value, key) => {
-                    if (value === key) { // Only extract keys where value equals key (deep link keys pattern)
-                      extractedKeys.push(key);
-                    }
-                  });
-                  if (extractedKeys.length > 0) {
-                    deepLinkKeys = extractedKeys;
-                  }
-                } catch (error) {
-                  // If URL parsing fails, try manual extraction
-                  const url = button.actionLink;
-                  const queryMatch = url.match(/[?&]([^=&]+)=([^=&]+)/g);
-                  if (queryMatch) {
-                    const extractedKeys = [];
-                    queryMatch.forEach((param) => {
-                      const [key, value] = param.replace(/^[?&]/, '').split('=');
-                      if (key === value) { // Only extract keys where value equals key
-                        extractedKeys.push(key);
-                      }
-                    });
-                    if (extractedKeys.length > 0) {
-                      deepLinkKeys = extractedKeys;
-                    }
-                  }
-                }
-              }
-            }
-
-            const ctaData = {
-              text: button.actionText || button.label || "",
-              index,
-              url: (() => {
-                // For deep link buttons, find the matching deep link value
-                if (button.type === DEEP_LINK && button.actionLink) {
-                  // Parse deep links directly from accountData to avoid timing issues
-                  let availableDeepLinks = [];
-                  if (accountData?.configs?.deeplink) {
-                    try {
-                      const parsedDeepLinks = JSON.parse(accountData.configs.deeplink || "[]");
-                      if (Array.isArray(parsedDeepLinks)) {
-                        availableDeepLinks = parsedDeepLinks.map((link) => ({
-                          label: link?.name,
-                          value: link?.link,
-                          title: link?.link,
-                          keys: link?.keys,
-                        }));
-                      } else if (typeof parsedDeepLinks === 'object' && parsedDeepLinks !== null) {
-                        availableDeepLinks = Object.values(parsedDeepLinks).map((link) => ({
-                          label: link?.name,
-                          value: link?.link,
-                          title: link?.link,
-                          keys: link?.keys,
-                        }));
-                      }
-                    } catch (error) {
-                      console.error("[MobilePushNew] Error parsing deeplinks for iOS button CTA:", error);
-                    }
-                  }
-                  
-                  if (availableDeepLinks.length > 0) {
-                    // Remove query parameters from actionLink to find the base deep link
-                    let baseActionLink = button.actionLink;
-                    try {
-                      const url = new URL(button.actionLink);
-                      baseActionLink = url.origin + url.pathname;
-                    } catch (error) {
-                      // If URL parsing fails, try to remove query parameters manually
-                      const queryIndex = button.actionLink.indexOf('?');
-                      if (queryIndex !== -1) {
-                        baseActionLink = button.actionLink.substring(0, queryIndex);
-                      }
-                    }
-                    
-                    // Find matching deep link by comparing with the base action link
-                    const matchingDeepLink = availableDeepLinks.find((link) => link.value === baseActionLink);
-                    if (matchingDeepLink) {
-                      return matchingDeepLink.value;
-                    } else {
-                      // If no exact match, try to find by partial match
-                      const partialMatch = availableDeepLinks.find((link) =>
-                        button.actionLink.includes(link.value)
-                        || link.value.includes(baseActionLink)
-                      );
-                      if (partialMatch) {
-                        return partialMatch.value;
-                      }
-                    }
-                  }
-                }
-                return button.actionLink || "";
-              })(),
-              urlType: button.type || DEEP_LINK,
-              deepLinkKeys: deepLinkKeys,
-              ctaType: index === 0 ? PRIMARY : SECONDARY,
-              isSaved: true, // Mark as saved since it's loaded from backend
-            };
-            
-
-            
-            return ctaData;
-          });
-          setCtaDataAndroid(ctaDataFromAndroid);
-          setPrimaryButtonAndroid(androidButtons.length >= 1);
-          setSecondaryButtonAndroid(androidButtons.length >= 2);
-        } else {
-          setCtaDataAndroid([]);
-          setPrimaryButtonAndroid(false);
-          setSecondaryButtonAndroid(false);
-        }
-      }
-
-      // Process iOS content
-      const iosContentType = editContent?.IOS;
-      if (!isEmpty(iosContentType)) {
-        const {
-          title: iosTitle = "",
-          message: iosMessage = "",
-          ctas = [],
-          expandableDetails: iosExpandableDetails = {},
-          image: iosImage = "",
-          // Removed unused iosCta and iosMainCta variables
-        } = iosContentType || {};
-
-        // Only destructure iosExpandableDetails here
-        const { style: iosStyle, image: iosExpandableImage = "" } = iosExpandableDetails || {};
-        // In iOS content extraction, use unique names:
-
-        // Determine media type based on style and available content
-        let iosMediaType = NONE;
-        let iosImageSrc = "";
-        let iosVideoSrc = "";
-        let iosVideoPreview = "";
-        let carouselDataFromEdit = [];
-
-        if (iosStyle === BIG_PICTURE) {
-          iosMediaType = IMAGE;
-          iosImageSrc = iosExpandableImage || iosImage;
-        } else if (iosStyle === BIG_TEXT) {
-          iosMediaType = NONE;
-        } else if (iosStyle === MANUAL_CAROUSEL) {
-          iosMediaType = CAROUSEL;
-        }
-
-        // Handle video/GIF content from expandableDetails.media array (new format)
-        if (iosExpandableDetails?.media && Array.isArray(iosExpandableDetails.media) && iosExpandableDetails.media.length > 0) {
-          const mediaItem = iosExpandableDetails.media[0];
-          if (mediaItem.type === VIDEO) {
-            // Distinguish between actual video and GIF based on URL extension
-            if (mediaItem.url && mediaItem.url.toLowerCase().includes('.gif')) {
-              iosMediaType = GIF;
-            } else {
-              iosMediaType = VIDEO;
-            }
-            iosVideoSrc = mediaItem.url;
-            iosVideoPreview = mediaItem.url;
-          } else if (mediaItem.type === GIF) {
-            iosMediaType = GIF;
-            iosVideoSrc = mediaItem.url;
-            iosVideoPreview = mediaItem.url;
-          }
-        }
-        // Handle video content if present in image field (legacy format)
-        else if (iosImage && (iosImage.includes('.mp4') || iosImage.includes('.mov'))) {
-          iosMediaType = VIDEO;
-          iosVideoSrc = iosImage;
-          iosVideoPreview = iosImage; // Use same for preview
-        }
-        // Handle GIF content if present in image field (legacy format)
-        else if (iosImage && iosImage.toLowerCase().includes('.gif')) {
-          iosMediaType = GIF;
-          iosVideoSrc = iosImage;
-          iosVideoPreview = iosImage; // Use same for preview
-        }
-        // Handle carousel content from expandableDetails.carouselData
-        else if ((iosExpandableDetails?.style === MANUAL_CAROUSEL || iosContentType?.type === CAROUSEL) && iosExpandableDetails?.carouselData) {
-          iosMediaType = CAROUSEL;
-          // Process carousel data from editData
-          carouselDataFromEdit = iosExpandableDetails.carouselData.map((card) => ({
-            mediaType: card.mediaType || IMAGE.toLowerCase(),
-            imageUrl: card.imageUrl || '',
-            videoSrc: card.videoSrc || '',
-            buttons: card.buttons ? card.buttons.map((button) => {
-              // Extract deep link keys from deepLinkValue URL for carousel buttons
-              let deepLinkKeys = [];
-              let matchedDeepLinkValue = button.deepLinkValue || "";
-              
-              if (button.linkType === DEEP_LINK && button.deepLinkValue) {
-                // Parse deep links directly from accountData to avoid timing issues
-                let availableDeepLinks = [];
-                if (accountData?.configs?.deeplink) {
-                  try {
-                    const parsedDeepLinks = JSON.parse(accountData.configs.deeplink || "[]");
-                    if (Array.isArray(parsedDeepLinks)) {
-                      availableDeepLinks = parsedDeepLinks.map((link) => ({
-                        label: link?.name,
-                        value: link?.link,
-                        title: link?.link,
-                        keys: link?.keys,
-                      }));
-                    } else if (typeof parsedDeepLinks === 'object' && parsedDeepLinks !== null) {
-                      availableDeepLinks = Object.values(parsedDeepLinks).map((link) => ({
-                        label: link?.name,
-                        value: link?.link,
-                        title: link?.link,
-                        keys: link?.keys,
-                      }));
-                    }
-                  } catch (error) {
-                    console.error("[MobilePushNew] Error parsing deeplinks for carousel button:", error);
-                  }
-                }
-                
-                if (availableDeepLinks.length > 0) {
-                  // Remove query parameters from deepLinkValue to find the base deep link
-                  let baseDeepLinkValue = button.deepLinkValue;
-                  try {
-                    const url = new URL(button.deepLinkValue);
-                    baseDeepLinkValue = url.origin + url.pathname;
-                  } catch (error) {
-                    // If URL parsing fails, try to remove query parameters manually
-                    const queryIndex = button.deepLinkValue.indexOf('?');
-                    if (queryIndex !== -1) {
-                      baseDeepLinkValue = button.deepLinkValue.substring(0, queryIndex);
-                    }
-                  }
-                  
-                  // Find matching deep link by comparing with the base deep link value
-                  const matchingDeepLink = availableDeepLinks.find((link) => link.value === baseDeepLinkValue);
-                  if (matchingDeepLink) {
-                    matchedDeepLinkValue = matchingDeepLink.value;
-                  } else {
-                    // If no exact match, try to find by partial match
-                    const partialMatch = availableDeepLinks.find((link) =>
-                      button.deepLinkValue.includes(link.value)
-                      || link.value.includes(baseDeepLinkValue)
-                    );
-                    if (partialMatch) {
-                      matchedDeepLinkValue = partialMatch.value;
-                    }
-                  }
-                }
-                
-                // Extract deep link keys from the original deepLinkValue URL
-                try {
-                  const url = new URL(button.deepLinkValue);
-                  const extractedKeys = [];
-                  url.searchParams.forEach((value, key) => {
-                    if (value === key) { // Only extract keys where value equals key (deep link keys pattern)
-                      extractedKeys.push(key);
-                    }
-                  });
-                  if (extractedKeys.length > 0) {
-                    deepLinkKeys = extractedKeys;
-                  }
-                } catch (error) {
-                  // If URL parsing fails, try manual extraction
-                  const url = button.deepLinkValue;
-                  const queryMatch = url.match(/[?&]([^=&]+)=([^=&]+)/g);
-                  if (queryMatch) {
-                    const extractedKeys = [];
-                    queryMatch.forEach((param) => {
-                      const [key, value] = param.replace(/^[?&]/, '').split('=');
-                      if (key === value) { // Only extract keys where value equals key
-                        extractedKeys.push(key);
-                      }
-                    });
-                    if (extractedKeys.length > 0) {
-                      deepLinkKeys = extractedKeys;
-                    }
-                  }
-                }
-              }
-
-              return {
-                ...button,
-                deepLinkValue: matchedDeepLinkValue,
-                deepLinkKeys: deepLinkKeys,
-              };
-            }) : [],
-          }));
-
-          // Initialize carousel images in Redux state for proper display in uploaders
-          if (carouselDataFromEdit.length > 0) {
-            const firstCard = carouselDataFromEdit[0];
-            if (firstCard.mediaType === 'image' && firstCard.imageUrl) {
-              // Set the first carousel image in Redux state for the uploader to recognize
-              setUpdateMpushImageSrc(firstCard.imageUrl, 1, CAROUSEL);
-            }
-          }
-        }
-
-        let iosButtonsValue = [];
-        if (Array.isArray(ctas)) {
-          iosButtonsValue = ctas;
-        }
-        const iosContentData = {
-          title: iosTitle,
-          message: iosMessage,
-          mediaType: iosMediaType,
-          buttons: iosButtonsValue,
-          actionOnClick: false,
-          linkType: DEEP_LINK,
-          deepLinkValue: "",
-          deepLinkKeysValue: [],
-          externalLinkValue: "",
-          imageSrc: iosImageSrc,
-          videoSrc: iosVideoSrc,
-          videoPreview: iosVideoPreview,
-          carouselData: carouselDataFromEdit, // Initialize carousel data
-        };
-
-        // Check for deep link keys in custom array for iOS
-        if (iosContentType?.custom && Array.isArray(iosContentType.custom)) {
-          const deepLinkKeysFromCustom = iosContentType.custom
-            .filter((item) => item.key && item.value)
-            .map((item) => item.key);
-          if (deepLinkKeysFromCustom.length > 0) {
-            iosContentData.deepLinkKeysValue = deepLinkKeysFromCustom;
-          }
-        }
-        
-        // For iOS, also check button CTAs for deep link keys in URLs
-        if (iosContentData.deepLinkKeysValue.length === 0 && iosExpandableDetails?.ctas) {
-          for (const cta of iosExpandableDetails.ctas) {
-            if (cta.type === DEEP_LINK && cta.actionLink) {
-              try {
-                const url = new URL(cta.actionLink);
-                const extractedKeys = [];
-                url.searchParams.forEach((value, key) => {
-                  if (value === key) { // Only extract keys where value equals key (deep link keys pattern)
-                    extractedKeys.push(key);
-                  }
-                });
-                if (extractedKeys.length > 0) {
-                  iosContentData.deepLinkKeysValue = extractedKeys;
-                  break; // Use the first CTA with deep link keys
-                }
-              } catch (error) {
-                // If URL parsing fails, try manual extraction
-                const url = cta.actionLink;
-                const queryMatch = url.match(/[?&]([^=&]+)=([^=&]+)/g);
-                if (queryMatch) {
-                  const extractedKeys = [];
-                  queryMatch.forEach((param) => {
-                    const [key, value] = param.replace(/^[?&]/, '').split('=');
-                    if (key === value) { // Only extract keys where value equals key
-                      extractedKeys.push(key);
-                    }
-                  });
-                  if (extractedKeys.length > 0) {
-                    iosContentData.deepLinkKeysValue = extractedKeys;
-                    break; // Use the first CTA with deep link keys
-                  }
-                }
-              }
-            }
-          }
-        }
-
-        setIosContent(iosContentData);
-        // Set image/video sources for upload state with platform isolation
-        if (iosImageSrc) {
-          setUpdateMpushImageSrc(iosImageSrc, 1, IMAGE);
-        }
-
-        // Apply exact same simple pattern as images for videos/GIFs
-        if (iosVideoSrc) {
-          setUpdateMpushVideoSrc(1, {
-            videoSrc: iosVideoSrc,
-            previewUrl: iosVideoPreview,
-          }, true); // isInitialization = true
-        }
-
-        // Check for main notification body CTA (actionOnClick functionality)
-        // Removed all iosMainCta references (was not defined or used)
-
-        // Set CTA data for buttons (from expandableDetails.ctas)
-        const iosButtons = iosExpandableDetails?.ctas || [];
-        if (iosButtons.length > 0) {
-          const ctaDataFromIos = iosButtons.map((button, index) => {
-            // Extract deep link keys from action link URL for button CTAs
-            let deepLinkKeys = [];
-            if (button.type === DEEP_LINK && button.actionLink) {
-              try {
-                const url = new URL(button.actionLink);
-                const extractedKeys = [];
-                url.searchParams.forEach((value, key) => {
-                  if (value === key) { // Only extract keys where value equals key (deep link keys pattern)
-                    extractedKeys.push(key);
-                  }
-                });
-                if (extractedKeys.length > 0) {
-                  deepLinkKeys = extractedKeys;
-                }
-              } catch (error) {
-                // If URL parsing fails, try manual extraction
-                const url = button.actionLink;
-                const queryMatch = url.match(/[?&]([^=&]+)=([^=&]+)/g);
-                if (queryMatch) {
-                  const extractedKeys = [];
-                  queryMatch.forEach((param) => {
-                    const [key, value] = param.replace(/^[?&]/, '').split('=');
-                    if (key === value) { // Only extract keys where value equals key
-                      extractedKeys.push(key);
-                    }
-                  });
-                  if (extractedKeys.length > 0) {
-                    deepLinkKeys = extractedKeys;
-                  }
-                }
-              }
-            }
-
-            return {
-              text: button.actionText || button.label || "",
-              index,
-              url: (() => {
-                // For deep link buttons, find the matching deep link value
-                if (button.type === DEEP_LINK && button.actionLink) {
-                  // Parse deep links directly from accountData to avoid timing issues
-                  let availableDeepLinks = [];
-                  if (accountData?.configs?.deeplink) {
-                    try {
-                      const parsedDeepLinks = JSON.parse(accountData.configs.deeplink || "[]");
-                      if (Array.isArray(parsedDeepLinks)) {
-                        availableDeepLinks = parsedDeepLinks.map((link) => ({
-                          label: link?.name,
-                          value: link?.link,
-                          title: link?.link,
-                          keys: link?.keys,
-                        }));
-                      } else if (typeof parsedDeepLinks === 'object' && parsedDeepLinks !== null) {
-                        availableDeepLinks = Object.values(parsedDeepLinks).map((link) => ({
-                          label: link?.name,
-                          value: link?.link,
-                          title: link?.link,
-                          keys: link?.keys,
-                        }));
-                      }
-                    } catch (error) {
-                      console.error("[MobilePushNew] Error parsing deeplinks for iOS button CTA:", error);
-                    }
-                  }
-                  
-                  if (availableDeepLinks.length > 0) {
-                    // Remove query parameters from actionLink to find the base deep link
-                    let baseActionLink = button.actionLink;
-                    try {
-                      const url = new URL(button.actionLink);
-                      baseActionLink = url.origin + url.pathname;
-                    } catch (error) {
-                      // If URL parsing fails, try to remove query parameters manually
-                      const queryIndex = button.actionLink.indexOf('?');
-                      if (queryIndex !== -1) {
-                        baseActionLink = button.actionLink.substring(0, queryIndex);
-                      }
-                    }
-                    
-                    // Find matching deep link by comparing with the base action link
-                    const matchingDeepLink = availableDeepLinks.find((link) => link.value === baseActionLink);
-                    if (matchingDeepLink) {
-                      return matchingDeepLink.value;
-                    } else {
-                      // If no exact match, try to find by partial match
-                      const partialMatch = availableDeepLinks.find((link) =>
-                        button.actionLink.includes(link.value)
-                        || link.value.includes(baseActionLink)
-                      );
-                      if (partialMatch) {
-                        return partialMatch.value;
-                      }
-                    }
-                  }
-                }
-                return button.actionLink || "";
-              })(),
-              urlType: button.type || DEEP_LINK,
-              deepLinkKeys: deepLinkKeys,
-              ctaType: index === 0 ? PRIMARY : SECONDARY,
-              isSaved: true, // Mark as saved since it's loaded from backend
-            };
-          });
-          setCtaDataIos(ctaDataFromIos);
-          setPrimaryButtonIos(iosButtons.length >= 1);
-          setSecondaryButtonIos(iosButtons.length >= 2);
-        } else {
-          setCtaDataIos([]);
-          setPrimaryButtonIos(false);
-          setSecondaryButtonIos(false);
-        }
-      }
-
-      // Mark initial load as complete after data population and hide spinner
-      // setIsInitialLoad(false); // Removed
-      // setDataPopulated(true); // Removed
-      setSpin(false); // Hide spinner only after all state is populated
-    }
-  }, [editData?.templateDetails, isEditMode, params?.id]);
-
-  // Data population useEffect - for library mode (not full mode) using templateData
-  useEffect(() => {
-    if (isFullMode || !templateData || isEmpty(templateData)) {
-      return;
-    }
-
-    // Do NOT reset form state here; only populate data
-    // resetFormData();
-
-    // templateData is expected to have a similar structure as editData.templateDetails
-    const { name = "", versions = {} } = templateData || {};
-    const templateContent = versions?.base || {};
-
-    if (isEmpty(templateContent)) {
-      setSpin(false);
-      return;
-    }
-
-    setTemplateName(name);
-    // Process Android content
-    const androidContentType = templateContent?.ANDROID;
-    if (!isEmpty(androidContentType)) {
-      const {
-        title: androidTitle = "",
-        message: androidMessage = "",
-        ctas: androidCta = [],
-        expandableDetails: androidExpandableDetails = {},
-        image: androidImage = "",
-        cta: androidMainCta = null,
-      } = androidContentType || {};
-      const { style: androidStyle, ctas: androidCtas = [], image: androidExpandableImage = "" } = androidExpandableDetails || {};
-      let androidMediaType = NONE;
-      let androidImageSrc = "";
-      let androidVideoSrc = "";
-      let androidVideoPreview = "";
-      let carouselDataFromTemplate = [];
-      if (androidStyle === BIG_PICTURE) {
-        androidMediaType = IMAGE;
-        androidImageSrc = androidExpandableImage || androidImage;
-      } else if (androidStyle === BIG_TEXT) {
-        androidMediaType = NONE;
-      } else if (androidStyle === MANUAL_CAROUSEL) {
-        androidMediaType = CAROUSEL;
-      }
-      if (androidExpandableDetails?.media && Array.isArray(androidExpandableDetails.media) && androidExpandableDetails.media.length > 0) {
-        const mediaItem = androidExpandableDetails.media[0];
-        if (mediaItem.type === VIDEO) {
-          if (mediaItem.url && mediaItem.url.toLowerCase().includes('.gif')) {
-            androidMediaType = GIF;
-          } else {
-            androidMediaType = VIDEO;
-          }
-          androidVideoSrc = mediaItem.url;
-          androidVideoPreview = mediaItem.url;
-        } else if (mediaItem.type === GIF) {
-          androidMediaType = GIF;
-          androidVideoSrc = mediaItem.url;
-          androidVideoPreview = mediaItem.url;
-        }
-      } else if (androidImage && (androidImage.includes('.mp4') || androidImage.includes('.mov'))) {
-        androidMediaType = VIDEO;
-        androidVideoSrc = androidImage;
-        androidVideoPreview = androidImage;
-      } else if (androidImage && androidImage.toLowerCase().includes('.gif')) {
-        androidMediaType = GIF;
-        androidVideoSrc = androidImage;
-        androidVideoPreview = androidImage;
-      } else if ((androidExpandableDetails?.style === MANUAL_CAROUSEL || androidContentType?.type === CAROUSEL) && androidExpandableDetails?.carouselData) {
-        androidMediaType = CAROUSEL;
-        carouselDataFromTemplate = androidExpandableDetails.carouselData.map((card) => ({
-          mediaType: card.mediaType || IMAGE.toLowerCase(),
-          imageUrl: card.imageUrl || '',
-          videoSrc: card.videoSrc || '',
-          buttons: card.buttons ? card.buttons.map((button) => {
-            // Extract deep link keys from deepLinkValue URL for carousel buttons
-            let deepLinkKeys = [];
-            let matchedDeepLinkValue = button.deepLinkValue || "";
-            
-            if (button.linkType === DEEP_LINK && button.deepLinkValue) {
-              // Parse deep links directly from accountData to avoid timing issues
-              let availableDeepLinks = [];
-              if (accountData?.configs?.deeplink) {
-                try {
-                  const parsedDeepLinks = JSON.parse(accountData.configs.deeplink || "[]");
-                  if (Array.isArray(parsedDeepLinks)) {
-                    availableDeepLinks = parsedDeepLinks.map((link) => ({
-                      label: link?.name,
-                      value: link?.link,
-                      title: link?.link,
-                      keys: link?.keys,
-                    }));
-                  } else if (typeof parsedDeepLinks === 'object' && parsedDeepLinks !== null) {
-                    availableDeepLinks = Object.values(parsedDeepLinks).map((link) => ({
-                      label: link?.name,
-                      value: link?.link,
-                      title: link?.link,
-                      keys: link?.keys,
-                    }));
-                  }
-                } catch (error) {
-                  console.error("[MobilePushNew] Error parsing deeplinks for library mode carousel button:", error);
-                }
-              }
-              
-              if (availableDeepLinks.length > 0) {
-                // Remove query parameters from deepLinkValue to find the base deep link
-                let baseDeepLinkValue = button.deepLinkValue;
-                try {
-                  const url = new URL(button.deepLinkValue);
-                  baseDeepLinkValue = url.origin + url.pathname;
-                } catch (error) {
-                  // If URL parsing fails, try to remove query parameters manually
-                  const queryIndex = button.deepLinkValue.indexOf('?');
-                  if (queryIndex !== -1) {
-                    baseDeepLinkValue = button.deepLinkValue.substring(0, queryIndex);
-                  }
-                }
-                
-                // Find matching deep link by comparing with the base deep link value
-                const matchingDeepLink = availableDeepLinks.find((link) => link.value === baseDeepLinkValue);
-                if (matchingDeepLink) {
-                  matchedDeepLinkValue = matchingDeepLink.value;
-                } else {
-                  // If no exact match, try to find by partial match
-                  const partialMatch = availableDeepLinks.find((link) =>
-                    button.deepLinkValue.includes(link.value)
-                    || link.value.includes(baseDeepLinkValue)
-                  );
-                  if (partialMatch) {
-                    matchedDeepLinkValue = partialMatch.value;
-                  }
-                }
-              }
-              
-              // Extract deep link keys from the original deepLinkValue URL
-              try {
-                const url = new URL(button.deepLinkValue);
-                const extractedKeys = [];
-                url.searchParams.forEach((value, key) => {
-                  if (value === key) { // Only extract keys where value equals key (deep link keys pattern)
-                    extractedKeys.push(key);
-                  }
-                });
-                if (extractedKeys.length > 0) {
-                  deepLinkKeys = extractedKeys;
-                }
-              } catch (error) {
-                // If URL parsing fails, try manual extraction
-                const url = button.deepLinkValue;
-                const queryMatch = url.match(/[?&]([^=&]+)=([^=&]+)/g);
-                if (queryMatch) {
-                  const extractedKeys = [];
-                  queryMatch.forEach((param) => {
-                    const [key, value] = param.replace(/^[?&]/, '').split('=');
-                    if (key === value) { // Only extract keys where value equals key
-                      extractedKeys.push(key);
-                    }
-                  });
-                  if (extractedKeys.length > 0) {
-                    deepLinkKeys = extractedKeys;
-                  }
-                }
-              }
-            }
-
-            return {
-              ...button,
-              deepLinkValue: matchedDeepLinkValue,
-              deepLinkKeys: deepLinkKeys,
-            };
-          }) : [],
-        }));
-
-        // Initialize carousel images in Redux state for proper display in uploaders
-        if (carouselDataFromTemplate.length > 0) {
-          const firstCard = carouselDataFromTemplate[0];
-          if (firstCard.mediaType === 'image' && firstCard.imageUrl) {
-            // Set the first carousel image in Redux state for the uploader to recognize
-            setUpdateMpushImageSrc(firstCard.imageUrl, 0, CAROUSEL);
-          }
-        }
-      }
-      let androidButtonsValue = [];
-      if (Array.isArray(androidCtas)) {
-        androidButtonsValue = androidCtas;
-      } else if (Array.isArray(androidCta)) {
-        androidButtonsValue = androidCta;
-      }
-      const androidContentData = {
-        title: androidTitle,
-        message: androidMessage,
-        mediaType: androidMediaType,
-        buttons: androidButtonsValue,
-        actionOnClick: false,
-        linkType: DEEP_LINK,
-        deepLinkValue: "",
-        externalLinkValue: "",
-        imageSrc: androidImageSrc,
-        videoSrc: androidVideoSrc,
-        videoPreview: androidVideoPreview,
-        carouselData: carouselDataFromTemplate,
-      };
-      setAndroidContent(androidContentData);
-      if (androidImageSrc) {
-        setUpdateMpushImageSrc(androidImageSrc, 0, IMAGE);
-      }
-      if (androidVideoSrc) {
-        setUpdateMpushVideoSrc(0, {
-          videoSrc: androidVideoSrc,
-          previewUrl: androidVideoPreview,
-        }, true);
-      }
-      if (androidMainCta?.actionLink) {
-        androidContentData.actionOnClick = true;
-        if (androidMainCta.type === EXTERNAL_URL) {
-          androidContentData.linkType = EXTERNAL_LINK;
-          androidContentData.externalLinkValue = androidMainCta.actionLink;
-          androidContentData.deepLinkValue = "";
-        } else if (androidMainCta.type === DEEP_LINK) {
-          androidContentData.linkType = DEEP_LINK;
-          
-          // Find the matching deep link from the available options
-          let matchedDeepLinkValue = "";
-          if (androidMainCta.actionLink) {
-            // Parse deep links directly from accountData to avoid timing issues
-            let availableDeepLinks = [];
-            if (accountData?.configs?.deeplink) {
-              try {
-                const parsedDeepLinks = JSON.parse(accountData.configs.deeplink || "[]");
-                if (Array.isArray(parsedDeepLinks)) {
-                  availableDeepLinks = parsedDeepLinks.map((link) => ({
-                    label: link?.name,
-                    value: link?.link,
-                    title: link?.link,
-                    keys: link?.keys,
-                  }));
-                } else if (typeof parsedDeepLinks === 'object' && parsedDeepLinks !== null) {
-                  availableDeepLinks = Object.values(parsedDeepLinks).map((link) => ({
-                    label: link?.name,
-                    value: link?.link,
-                    title: link?.link,
-                    keys: link?.keys,
-                  }));
-                }
-              } catch (error) {
-                console.error("[MobilePushNew] Error parsing deeplinks for library mode main CTA:", error);
-              }
-            }
-            
-            if (availableDeepLinks.length > 0) {
-              // Remove query parameters from actionLink to find the base deep link
-              let baseActionLink = androidMainCta.actionLink;
-              try {
-                const url = new URL(androidMainCta.actionLink);
-                baseActionLink = url.origin + url.pathname;
-              } catch (error) {
-                // If URL parsing fails, try to remove query parameters manually
-                const queryIndex = androidMainCta.actionLink.indexOf('?');
-                if (queryIndex !== -1) {
-                  baseActionLink = androidMainCta.actionLink.substring(0, queryIndex);
-                }
-              }
-              
-              // Find matching deep link by comparing with the base action link
-              const matchingDeepLink = availableDeepLinks.find((link) => link.value === baseActionLink);
-              if (matchingDeepLink) {
-                matchedDeepLinkValue = matchingDeepLink.value;
-              } else {
-                // If no exact match, try to find by partial match
-                const partialMatch = availableDeepLinks.find((link) =>
-                  androidMainCta.actionLink.includes(link.value)
-                  || link.value.includes(baseActionLink)
-                );
-                if (partialMatch) {
-                  matchedDeepLinkValue = partialMatch.value;
-                }
-              }
-            }
-          }
-          
-          androidContentData.deepLinkValue = matchedDeepLinkValue;
-          androidContentData.externalLinkValue = "";
-          
-          // Extract deep link keys from action link URL for main CTA
-          let deepLinkKeysValue = [];
-          if (androidMainCta.actionLink) {
-            try {
-              const url = new URL(androidMainCta.actionLink);
-              const extractedKeys = [];
-              url.searchParams.forEach((value, key) => {
-                if (value === key) { // Only extract keys where value equals key (deep link keys pattern)
-                  extractedKeys.push(key);
-                }
-              });
-              if (extractedKeys.length > 0) {
-                deepLinkKeysValue = extractedKeys;
-              }
-            } catch (error) {
-              // If URL parsing fails, try manual extraction
-              const url = androidMainCta.actionLink;
-              const queryMatch = url.match(/[?&]([^=&]+)=([^=&]+)/g);
-              if (queryMatch) {
-                const extractedKeys = [];
-                queryMatch.forEach((param) => {
-                  const [key, value] = param.replace(/^[?&]/, '').split('=');
-                  if (key === value) { // Only extract keys where value equals key
-                    extractedKeys.push(key);
-                  }
-                });
-                if (extractedKeys.length > 0) {
-                  deepLinkKeysValue = extractedKeys;
-                }
-              }
-            }
-          }
-          androidContentData.deepLinkKeysValue = deepLinkKeysValue;
-        } else if (androidMainCta.actionLink.startsWith('http://') || androidMainCta.actionLink.startsWith('https://')) {
-          androidContentData.linkType = EXTERNAL_LINK;
-          androidContentData.externalLinkValue = androidMainCta.actionLink;
-          androidContentData.deepLinkValue = "";
-        } else {
-          androidContentData.linkType = DEEP_LINK;
-          androidContentData.deepLinkValue = androidMainCta.actionLink;
-          androidContentData.externalLinkValue = "";
-        }
-      } else {
-        androidContentData.deepLinkValue = "";
-        androidContentData.externalLinkValue = "";
-      }
-      const androidButtons = androidExpandableDetails?.ctas || [];
-      if (androidButtons.length > 0) {
-        const ctaDataFromAndroid = androidButtons.map((button, index) => {
-          // Extract deep link keys from action link URL for button CTAs
-          let deepLinkKeys = [];
-          if (button.type === DEEP_LINK && button.actionLink) {
-            try {
-              const url = new URL(button.actionLink);
-              const extractedKeys = [];
-              url.searchParams.forEach((value, key) => {
-                if (value === key) { // Only extract keys where value equals key (deep link keys pattern)
-                  extractedKeys.push(key);
-                }
-              });
-              if (extractedKeys.length > 0) {
-                deepLinkKeys = extractedKeys;
-              }
-            } catch (error) {
-              // If URL parsing fails, try manual extraction
-              const url = button.actionLink;
-              const queryMatch = url.match(/[?&]([^=&]+)=([^=&]+)/g);
-              if (queryMatch) {
-                const extractedKeys = [];
-                queryMatch.forEach((param) => {
-                  const [key, value] = param.replace(/^[?&]/, '').split('=');
-                  if (key === value) { // Only extract keys where value equals key
-                    extractedKeys.push(key);
-                  }
-                });
-                if (extractedKeys.length > 0) {
-                  deepLinkKeys = extractedKeys;
-                }
-              }
-            }
-          }
-
-          return {
-            text: button.actionText || button.label || "",
-            index,
-            url: (() => {
-              // For deep link buttons, find the matching deep link value
-              if (button.type === DEEP_LINK && button.actionLink) {
-                // Parse deep links directly from accountData to avoid timing issues
-                let availableDeepLinks = [];
-                if (accountData?.configs?.deeplink) {
-                  try {
-                    const parsedDeepLinks = JSON.parse(accountData.configs.deeplink || "[]");
-                    if (Array.isArray(parsedDeepLinks)) {
-                      availableDeepLinks = parsedDeepLinks.map((link) => ({
-                        label: link?.name,
-                        value: link?.link,
-                        title: link?.link,
-                        keys: link?.keys,
-                      }));
-                    } else if (typeof parsedDeepLinks === 'object' && parsedDeepLinks !== null) {
-                      availableDeepLinks = Object.values(parsedDeepLinks).map((link) => ({
-                        label: link?.name,
-                        value: link?.link,
-                        title: link?.link,
-                        keys: link?.keys,
-                      }));
-                    }
-                  } catch (error) {
-                    console.error("[MobilePushNew] Error parsing deeplinks for library mode button CTA:", error);
-                  }
-                }
-                
-                if (availableDeepLinks.length > 0) {
-                  // Remove query parameters from actionLink to find the base deep link
-                  let baseActionLink = button.actionLink;
-                  try {
-                    const url = new URL(button.actionLink);
-                    baseActionLink = url.origin + url.pathname;
-                  } catch (error) {
-                    // If URL parsing fails, try to remove query parameters manually
-                    const queryIndex = button.actionLink.indexOf('?');
-                    if (queryIndex !== -1) {
-                      baseActionLink = button.actionLink.substring(0, queryIndex);
-                    }
-                  }
-                  
-                  // Find matching deep link by comparing with the base action link
-                  const matchingDeepLink = availableDeepLinks.find((link) => link.value === baseActionLink);
-                  if (matchingDeepLink) {
-                    return matchingDeepLink.value;
-                  } else {
-                    // If no exact match, try to find by partial match
-                    const partialMatch = availableDeepLinks.find((link) =>
-                      button.actionLink.includes(link.value)
-                      || link.value.includes(baseActionLink)
-                    );
-                    if (partialMatch) {
-                      return partialMatch.value;
-                    }
-                  }
-                }
-              }
-              return button.actionLink || "";
-            })(),
-            urlType: button.type || DEEP_LINK,
-            deepLinkKeys: deepLinkKeys,
-            ctaType: index === 0 ? PRIMARY : SECONDARY,
-            isSaved: true,
-          };
-        });
-        setCtaDataAndroid(ctaDataFromAndroid);
-        setPrimaryButtonAndroid(androidButtons.length >= 1);
-        setSecondaryButtonAndroid(androidButtons.length >= 2);
-      } else {
-        setCtaDataAndroid([]);
-        setPrimaryButtonAndroid(false);
-        setSecondaryButtonAndroid(false);
-      }
-    }
-    // Process iOS content
-    const iosContentType = templateContent?.IOS;
-    if (!isEmpty(iosContentType)) {
-      const {
-        title: iosTitle = "",
-        message: iosMessage = "",
-        ctas = [],
-        expandableDetails: iosExpandableDetails = {},
-        image: iosImage = "",
-      } = iosContentType || {};
-      const { style: iosStyle, image: iosExpandableImage = "" } = iosExpandableDetails || {};
-      let iosMediaType = NONE;
-      let iosImageSrc = "";
-      let iosVideoSrc = "";
-      let iosVideoPreview = "";
-      let carouselDataFromTemplate = [];
-      if (iosStyle === BIG_PICTURE) {
-        iosMediaType = IMAGE;
-        iosImageSrc = iosExpandableImage || iosImage;
-      } else if (iosStyle === BIG_TEXT) {
-        iosMediaType = NONE;
-      } else if (iosStyle === MANUAL_CAROUSEL) {
-        iosMediaType = CAROUSEL;
-      }
-      if (iosExpandableDetails?.media && Array.isArray(iosExpandableDetails.media) && iosExpandableDetails.media.length > 0) {
-        const mediaItem = iosExpandableDetails.media[0];
-        if (mediaItem.type === VIDEO) {
-          if (mediaItem.url && mediaItem.url.toLowerCase().includes('.gif')) {
-            iosMediaType = GIF;
-          } else {
-            iosMediaType = VIDEO;
-          }
-          iosVideoSrc = mediaItem.url;
-          iosVideoPreview = mediaItem.url;
-        } else if (mediaItem.type === GIF) {
-          iosMediaType = GIF;
-          iosVideoSrc = mediaItem.url;
-          iosVideoPreview = mediaItem.url;
-        }
-      } else if (iosImage && (iosImage.includes('.mp4') || iosImage.includes('.mov'))) {
-        iosMediaType = VIDEO;
-        iosVideoSrc = iosImage;
-        iosVideoPreview = iosImage;
-      } else if (iosImage && iosImage.toLowerCase().includes('.gif')) {
-        iosMediaType = GIF;
-        iosVideoSrc = iosImage;
-        iosVideoPreview = iosImage;
-      } else if ((iosExpandableDetails?.style === MANUAL_CAROUSEL || iosContentType?.type === CAROUSEL) && iosExpandableDetails?.carouselData) {
-        iosMediaType = CAROUSEL;
-        carouselDataFromTemplate = iosExpandableDetails.carouselData.map((card) => ({
-          mediaType: card.mediaType || IMAGE.toLowerCase(),
-          imageUrl: card.imageUrl || '',
-          videoSrc: card.videoSrc || '',
-          buttons: card.buttons ? card.buttons.map((button) => {
-            // Extract deep link keys from deepLinkValue URL for carousel buttons
-            let deepLinkKeys = [];
-            let matchedDeepLinkValue = button.deepLinkValue || "";
-            
-            if (button.linkType === DEEP_LINK && button.deepLinkValue) {
-              // Parse deep links directly from accountData to avoid timing issues
-              let availableDeepLinks = [];
-              if (accountData?.configs?.deeplink) {
-                try {
-                  const parsedDeepLinks = JSON.parse(accountData.configs.deeplink || "[]");
-                  if (Array.isArray(parsedDeepLinks)) {
-                    availableDeepLinks = parsedDeepLinks.map((link) => ({
-                      label: link?.name,
-                      value: link?.link,
-                      title: link?.link,
-                      keys: link?.keys,
-                    }));
-                  } else if (typeof parsedDeepLinks === 'object' && parsedDeepLinks !== null) {
-                    availableDeepLinks = Object.values(parsedDeepLinks).map((link) => ({
-                      label: link?.name,
-                      value: link?.link,
-                      title: link?.link,
-                      keys: link?.keys,
-                    }));
-                  }
-                } catch (error) {
-                  console.error("[MobilePushNew] Error parsing deeplinks for library mode iOS carousel button:", error);
-                }
-              }
-              
-              if (availableDeepLinks.length > 0) {
-                // Remove query parameters from deepLinkValue to find the base deep link
-                let baseDeepLinkValue = button.deepLinkValue;
-                try {
-                  const url = new URL(button.deepLinkValue);
-                  baseDeepLinkValue = url.origin + url.pathname;
-                } catch (error) {
-                  // If URL parsing fails, try to remove query parameters manually
-                  const queryIndex = button.deepLinkValue.indexOf('?');
-                  if (queryIndex !== -1) {
-                    baseDeepLinkValue = button.deepLinkValue.substring(0, queryIndex);
-                  }
-                }
-                
-                // Find matching deep link by comparing with the base deep link value
-                const matchingDeepLink = availableDeepLinks.find((link) => link.value === baseDeepLinkValue);
-                if (matchingDeepLink) {
-                  matchedDeepLinkValue = matchingDeepLink.value;
-                } else {
-                  // If no exact match, try to find by partial match
-                  const partialMatch = availableDeepLinks.find((link) =>
-                    button.deepLinkValue.includes(link.value)
-                    || link.value.includes(baseDeepLinkValue)
-                  );
-                  if (partialMatch) {
-                    matchedDeepLinkValue = partialMatch.value;
-                  }
-                }
-              }
-              
-              // Extract deep link keys from the original deepLinkValue URL
-              try {
-                const url = new URL(button.deepLinkValue);
-                const extractedKeys = [];
-                url.searchParams.forEach((value, key) => {
-                  if (value === key) { // Only extract keys where value equals key (deep link keys pattern)
-                    extractedKeys.push(key);
-                  }
-                });
-                if (extractedKeys.length > 0) {
-                  deepLinkKeys = extractedKeys;
-                }
-              } catch (error) {
-                // If URL parsing fails, try manual extraction
-                const url = button.deepLinkValue;
-                const queryMatch = url.match(/[?&]([^=&]+)=([^=&]+)/g);
-                if (queryMatch) {
-                  const extractedKeys = [];
-                  queryMatch.forEach((param) => {
-                    const [key, value] = param.replace(/^[?&]/, '').split('=');
-                    if (key === value) { // Only extract keys where value equals key
-                      extractedKeys.push(key);
-                    }
-                  });
-                  if (extractedKeys.length > 0) {
-                    deepLinkKeys = extractedKeys;
-                  }
-                }
-              }
-            }
-
-            return {
-              ...button,
-              deepLinkValue: matchedDeepLinkValue,
-              deepLinkKeys: deepLinkKeys,
-            };
-          }) : [],
-        }));
-
-        // Initialize carousel images in Redux state for proper display in uploaders
-        if (carouselDataFromTemplate.length > 0) {
-          const firstCard = carouselDataFromTemplate[0];
-          if (firstCard.mediaType === 'image' && firstCard.imageUrl) {
-            // Set the first carousel image in Redux state for the uploader to recognize
-            setUpdateMpushImageSrc(firstCard.imageUrl, 1, CAROUSEL);
-          }
-        }
-      }
-      let iosButtonsValue = [];
-      if (Array.isArray(ctas)) {
-        iosButtonsValue = ctas;
-      }
-      const iosContentData = {
-        title: iosTitle,
-        message: iosMessage,
-        mediaType: iosMediaType,
-        buttons: iosButtonsValue,
-        actionOnClick: false,
-        linkType: DEEP_LINK,
-        deepLinkValue: "",
-        externalLinkValue: "",
-        imageSrc: iosImageSrc,
-        videoSrc: iosVideoSrc,
-        videoPreview: iosVideoPreview,
-        carouselData: carouselDataFromTemplate,
-      };
-      setIosContent(iosContentData);
-      if (iosImageSrc) {
-        setUpdateMpushImageSrc(iosImageSrc, 1, IMAGE);
-      }
-      if (iosVideoSrc) {
-        setUpdateMpushVideoSrc(1, {
-          videoSrc: iosVideoSrc,
-          previewUrl: iosVideoPreview,
-        }, true);
-      }
-      const iosButtons = iosExpandableDetails?.ctas || [];
-      if (iosButtons.length > 0) {
-        const ctaDataFromIos = iosButtons.map((button, index) => {
-          // Extract deep link keys from action link URL for button CTAs
-          let deepLinkKeys = [];
-          if (button.type === DEEP_LINK && button.actionLink) {
-            try {
-              const url = new URL(button.actionLink);
-              const extractedKeys = [];
-              url.searchParams.forEach((value, key) => {
-                if (value === key) { // Only extract keys where value equals key (deep link keys pattern)
-                  extractedKeys.push(key);
-                }
-              });
-              if (extractedKeys.length > 0) {
-                deepLinkKeys = extractedKeys;
-              }
-            } catch (error) {
-              // If URL parsing fails, try manual extraction
-              const url = button.actionLink;
-              const queryMatch = url.match(/[?&]([^=&]+)=([^=&]+)/g);
-              if (queryMatch) {
-                const extractedKeys = [];
-                queryMatch.forEach((param) => {
-                  const [key, value] = param.replace(/^[?&]/, '').split('=');
-                  if (key === value) { // Only extract keys where value equals key
-                    extractedKeys.push(key);
-                  }
-                });
-                if (extractedKeys.length > 0) {
-                  deepLinkKeys = extractedKeys;
-                }
-              }
-            }
-          }
-
-          return {
-            text: button.actionText || button.label || "",
-            index,
-            url: (() => {
-              // For deep link buttons, find the matching deep link value
-              if (button.type === DEEP_LINK && button.actionLink) {
-                // Parse deep links directly from accountData to avoid timing issues
-                let availableDeepLinks = [];
-                if (accountData?.configs?.deeplink) {
-                  try {
-                    const parsedDeepLinks = JSON.parse(accountData.configs.deeplink || "[]");
-                    if (Array.isArray(parsedDeepLinks)) {
-                      availableDeepLinks = parsedDeepLinks.map((link) => ({
-                        label: link?.name,
-                        value: link?.link,
-                        title: link?.link,
-                        keys: link?.keys,
-                      }));
-                    } else if (typeof parsedDeepLinks === 'object' && parsedDeepLinks !== null) {
-                      availableDeepLinks = Object.values(parsedDeepLinks).map((link) => ({
-                        label: link?.name,
-                        value: link?.link,
-                        title: link?.link,
-                        keys: link?.keys,
-                      }));
-                    }
-                  } catch (error) {
-                    console.error("[MobilePushNew] Error parsing deeplinks for iOS button CTA:", error);
-                  }
-                }
-                
-                if (availableDeepLinks.length > 0) {
-                  // Remove query parameters from actionLink to find the base deep link
-                  let baseActionLink = button.actionLink;
-                  try {
-                    const url = new URL(button.actionLink);
-                    baseActionLink = url.origin + url.pathname;
-                  } catch (error) {
-                    // If URL parsing fails, try to remove query parameters manually
-                    const queryIndex = button.actionLink.indexOf('?');
-                    if (queryIndex !== -1) {
-                      baseActionLink = button.actionLink.substring(0, queryIndex);
-                    }
-                  }
-                  
-                  // Find matching deep link by comparing with the base action link
-                  const matchingDeepLink = availableDeepLinks.find((link) => link.value === baseActionLink);
-                  if (matchingDeepLink) {
-                    return matchingDeepLink.value;
-                  } else {
-                    // If no exact match, try to find by partial match
-                    const partialMatch = availableDeepLinks.find((link) =>
-                      button.actionLink.includes(link.value)
-                      || link.value.includes(baseActionLink)
-                    );
-                    if (partialMatch) {
-                      return partialMatch.value;
-                    }
-                  }
-                }
-              }
-              return button.actionLink || "";
-            })(),
-            urlType: button.type || DEEP_LINK,
-            deepLinkKeys: deepLinkKeys,
-            ctaType: index === 0 ? PRIMARY : SECONDARY,
-            isSaved: true,
-          };
-        });
-        setCtaDataIos(ctaDataFromIos);
-        setPrimaryButtonIos(iosButtons.length >= 1);
-        setSecondaryButtonIos(iosButtons.length >= 2);
-      } else {
-        setCtaDataIos([]);
-        setPrimaryButtonIos(false);
-        setSecondaryButtonIos(false);
-      }
-    }
-    setSpin(false);
-  }, [isFullMode, templateData]);
-
-  // Determine platform support from accountData
-  const isAndroidSupported = accountData?.configs?.android === '1';
-  const isIosSupported = accountData?.configs?.ios === '1';
-
-  // Validation logic for template creation/update
-  const isAndroidFieldsMissing = isAndroidSupported && (!androidContent?.title?.trim() || !androidContent?.message?.trim());
-  const isIosFieldsMissing = isIosSupported && (!iosContent?.title?.trim() || !iosContent?.message?.trim());
-
-  // Add changeSourceRef for debounced sync
-  const changeSourceRef = useRef(null);
-
-  const {
-    handleTitleChange,
-    handleMessageChange,
-    handleTagSelect,
-    handleMediaTypeChange,
-    handleActionOnClickChange,
-    handleLinkTypeChange,
-  } = usePlatformSync({
-    setAndroidContent,
-    setIosContent,
-    validateTitle,
-    validateMessage,
-    setAndroidTitleError,
-    setAndroidMessageError,
-    setIosTitleError,
-    setIosMessageError,
-    androidContent,
-    iosContent,
-    updateOnMpushImageReUpload,
-    updateOnMpushVideoReUpload,
-    sameContent,
-    changeSourceRef,
-  });
-
-  // Platform-specific deeplink and external link handlers
-  const handleDeepLinkChange = useCallback((platform, deepLinkValue) => {
-    // Validate deep link
-    const deepLinkError = validateDeepLink(deepLinkValue, formatMessage, messages);
-
-    if (platform === ANDROID) {
-      setAndroidContent((prev) => {
-        const updated = {
-          ...prev,
-          deepLinkValue,
-          // Clear external link value when deep link is selected
-          externalLinkValue: "",
-        };
-        return updated;
-      });
-      setAndroidDeepLinkError(deepLinkError || "");
-    } else {
-      setIosContent((prev) => {
-        const updated = {
-          ...prev,
-          deepLinkValue,
-          // Clear external link value when deep link is selected
-          externalLinkValue: "",
-        };
-        return updated;
-      });
-      setIosDeepLinkError(deepLinkError || "");
-    }
-  }, [validateDeepLink]);
-
-  const handleDeepLinkKeysChange = useCallback((platform, deepLinkKeysValue) => {
-    if (platform === ANDROID) {
-      setAndroidContent((prev) => {
-        const updated = {
-          ...prev,
-          deepLinkKeysValue,
-        };
-        return updated;
-      });
-    } else {
-      setIosContent((prev) => {
-        const updated = {
-          ...prev,
-          deepLinkKeysValue,
-        };
-        return updated;
-      });
-    }
-  }, []);
-
-  const handleExternalLinkChange = useCallback((platform, externalLinkValue) => {
-    // Validate URL
-    const urlError = validateExternalLink(externalLinkValue, formatMessage, messages);
-
-    if (platform === ANDROID) {
-      setAndroidContent((prev) => {
-        const updated = {
-          ...prev,
-          externalLinkValue,
-          // Clear deep link value when external link is entered
-          deepLinkValue: "",
-        };
-        return updated;
-      });
-      setAndroidExternalLinkError(urlError || "");
-    } else {
-      setIosContent((prev) => {
-        const updated = {
-          ...prev,
-          externalLinkValue,
-          // Clear deep link value when external link is entered
-          deepLinkValue: "",
-        };
-        return updated;
-      });
-      setIosExternalLinkError(urlError || "");
-    }
-  }, [validateExternalLink]);
-
-  // Carousel data handler for platform-specific carousel management
-  const updateCarouselLinkError = useCallback((cardIndex, field, error) => {
-    setCarouselLinkErrors((prev) => ({
-      ...prev,
-      [`${cardIndex}-${field}`]: error,
-    }));
-  }, []);
-
-  const handleCarouselDataChange = useCallback((platform, carouselData) => {
-    if (platform === ANDROID) {
-      setAndroidContent((prev) => {
-        const updated = { ...prev, carouselData };
-        return updated;
-      });
-    } else {
-      setIosContent((prev) => {
-        const updated = { ...prev, carouselData };
-        return updated;
-      });
-    }
-  }, []);
-
-  // Update updateHandler to sync button state for both platforms if sameContent is true
-  const updateHandler = useCallback(
-    (ctaDataParam, index) => {
-      if (sameContent) {
-        setCtaDataAndroid((prevState) => {
-          const clonedCta = cloneDeep(prevState);
-          clonedCta[index] = ctaDataParam;
-          return clonedCta;
-        });
-        setCtaDataIos((prevState) => {
-          const clonedCta = cloneDeep(prevState);
-          clonedCta[index] = ctaDataParam;
-          return clonedCta;
-        });
-        // Update button state for both platforms
-        if (index === 0) {
-          setPrimaryButtonAndroid(true);
-          setPrimaryButtonIos(true);
-        } else if (index === 1) {
-          setSecondaryButtonAndroid(true);
-          setSecondaryButtonIos(true);
-        }
-      } else if (activeTab === ANDROID) {
-        setCtaDataAndroid((prevState) => {
-          const clonedCta = cloneDeep(prevState);
-          clonedCta[index] = ctaDataParam;
-          return clonedCta;
-        });
-        if (index === 0) setPrimaryButtonAndroid(true);
-        if (index === 1) setSecondaryButtonAndroid(true);
-      } else {
-        setCtaDataIos((prevState) => {
-          const clonedCta = cloneDeep(prevState);
-          clonedCta[index] = ctaDataParam;
-          return clonedCta;
-        });
-        if (index === 0) setPrimaryButtonIos(true);
-        if (index === 1) setSecondaryButtonIos(true);
-      }
-    },
-    [activeTab, sameContent]
-  );
-
-  // Update deleteHandler to sync button state for both platforms if sameContent is true
-  const deleteHandler = useCallback((index) => {
-    if (sameContent) {
-      setCtaDataAndroid((prevState) => {
-        const clonedCta = cloneDeep(prevState);
-        const filteredCta = clonedCta.filter((cta) => cta.index !== index);
-        return filteredCta;
-      });
-      setCtaDataIos((prevState) => {
-        const clonedCta = cloneDeep(prevState);
-        const filteredCta = clonedCta.filter((cta) => cta.index !== index);
-        return filteredCta;
-      });
-      // Update button state for both platforms
-      if (index === 0) {
-        setPrimaryButtonAndroid(false);
-        setPrimaryButtonIos(false);
-      } else if (index === 1) {
-        setSecondaryButtonAndroid(false);
-        setSecondaryButtonIos(false);
-      }
-    } else if (activeTab === ANDROID) {
-      setCtaDataAndroid((prevState) => {
-        const clonedCta = cloneDeep(prevState);
-        const filteredCta = clonedCta.filter((cta) => cta.index !== index);
-        return filteredCta;
-      });
-      if (index === 0) setPrimaryButtonAndroid(false);
-      if (index === 1) setSecondaryButtonAndroid(false);
-    } else {
-      setCtaDataIos((prevState) => {
-        const clonedCta = cloneDeep(prevState);
-        const filteredCta = clonedCta.filter((cta) => cta.index !== index);
-        return filteredCta;
-      });
-      if (index === 0) setPrimaryButtonIos(false);
-      if (index === 1) setSecondaryButtonIos(false);
-    }
-  }, [activeTab, sameContent]);
-
-  const onTagSelect = useCallback(
-    (data, id) => {
-      const platform = activeTab === ANDROID ? ANDROID : IOS;
-      handleTagSelect(platform, data, id === 0);
-    },
-    [activeTab, handleTagSelect]
-  );
-
-  const renderContentFields = useCallback(
-    (platform) => {
-      const isAndroid = platform === ANDROID;
-      const currentContent = isAndroid ? androidContent : iosContent;
-      // Only show error if the platform is enabled
-      let titleError = "";
-      let messageError = "";
-      let externalLinkError = "";
-      let deepLinkError = "";
-      let deepLinkKeysError = "";
-      if (isAndroid) {
-        titleError = isAndroidSupported ? androidTitleError : "";
-        messageError = isAndroidSupported ? androidMessageError : "";
-        externalLinkError = isAndroidSupported ? androidExternalLinkError : "";
-        deepLinkError = isAndroidSupported ? androidDeepLinkError : "";
-        deepLinkKeysError = isAndroidSupported ? androidDeepLinkKeysError : "";
-      } else {
-        titleError = isIosSupported ? iosTitleError : "";
-        messageError = isIosSupported ? iosMessageError : "";
-        externalLinkError = isIosSupported ? iosExternalLinkError : "";
-        deepLinkError = isIosSupported ? iosDeepLinkError : "";
-        deepLinkKeysError = isIosSupported ? iosDeepLinkKeysError : "";
-      }
-      const primaryButton = isAndroid ? primaryButtonAndroid : primaryButtonIos;
-      const secondaryButton = isAndroid ? secondaryButtonAndroid : secondaryButtonIos;
-      const setPrimaryButton = isAndroid ? setPrimaryButtonAndroid : setPrimaryButtonIos;
-      const setSecondaryButton = isAndroid ? setSecondaryButtonAndroid : setSecondaryButtonIos;
-
-      const handlers = {
-        handleTitleChange,
-        handleMessageChange,
-        handleMediaTypeChange,
-        handleActionOnClickChange,
-        handleLinkTypeChange,
-        handleDeepLinkChange: (value) => handleDeepLinkChange(platform, value),
-        handleDeepLinkKeysChange: (value) => handleDeepLinkKeysChange(platform, value),
-        handleExternalLinkChange: (value) => handleExternalLinkChange(platform, value),
-        onTagSelect,
-        handleOnTagsContextChange,
-      };
-
-      const tagListProps = {
-        moduleFilterEnabled: location?.query?.type !== EMBEDDED,
-        label: formatMessage(messages.addLabels),
-        location,
-        tags: tags || [],
-        injectedTags: injectedTags || {},
-        selectedOfferDetails,
-      };
-
-      // Fix nested ternary for videoAssetList and gifAssetList
-      let videoAssetList = {};
-      let gifAssetList = {};
-      if (currentContent?.mediaType === VIDEO) {
-        videoAssetList = platform === ANDROID ? androidAssetList : iosAssetList;
-      }
-      if (currentContent?.mediaType === GIF) {
-        gifAssetList = platform === ANDROID ? androidAssetList : iosAssetList;
-      }
-      const mediaUploaderProps = {
-        mediaType: currentContent?.mediaType,
-        activeTab: platform,
-        imageSrc,
-        uploadMpushAsset,
-        isFullMode,
-        setUpdateMpushImageSrc,
-        updateOnMpushImageReUpload,
-        imageData,
-        videoAssetList,
-        gifAssetList,
-        setUpdateMpushVideoSrc,
-        // Add video content state for fallback when Redux is empty (same pattern as imageSrc)
-        videoSrc: {
-          androidVideoSrc: videoState?.androidVideoSrc || '',
-          iosVideoSrc: videoState?.iosVideoSrc || '',
-          androidVideoPreview: videoState?.androidVideoPreview || '',
-          iosVideoPreview: videoState?.iosVideoPreview || '',
-        },
-        // Create truly platform-specific video data with no cross-platform information
-        videoDataForVideo: currentContent?.mediaType === VIDEO ? {
-          // Keep BOTH platforms available like images do - let MediaUploaders choose which to show
-          uploadedAssetData0: uploadedAssetData0 || {},
-          uploadedAssetData1: uploadedAssetData1 || {},
-        } : {},
-        videoDataForGif: currentContent?.mediaType === GIF ? {
-          // Keep BOTH platforms available like images do - let MediaUploaders choose which to show
-          uploadedAssetData0: uploadedAssetData0 || {},
-          uploadedAssetData1: uploadedAssetData1 || {},
-        } : {},
-        videoData,
-        clearImageDataByMediaType,
-        carouselData: currentContent?.carouselData || [],
-        onCarouselDataChange: handleCarouselDataChange,
-        mobilePushActions,
-        carouselActiveTabIndex,
-        setCarouselActiveTabIndex,
-        carouselLinkErrors,
-        updateCarouselLinkError,
-        linkProps: { deepLink },
-        videoPreviewKey: videoState?.videoPreviewKey,
-      };
-
-      const ctaButtonProps = {
-        primaryButton,
-        secondaryButton,
-        setPrimaryButton,
-        setSecondaryButton,
-        ctaData,
-        updateHandler,
-        deleteHandler,
-        deepLink,
-      };
-
-      const linkProps = {
-        deepLink,
-        deepLinkValue: currentContent?.deepLinkValue || "",
-        deepLinkKeysValue: currentContent?.deepLinkKeysValue || "",
-        externalLinkValue: currentContent?.externalLinkValue || "",
-      };
-
-      return (
-        <PlatformContentFields
-          key={`platform-fields-${platform}`}
-          deviceType={platform}
-          content={currentContent}
-          errors={{
-            title: titleError,
-            message: messageError,
-            externalLink: externalLinkError,
-            deepLink: deepLinkError,
-            deepLinkKeys: deepLinkKeysError,
-          }}
-          handlers={handlers}
-          tagListProps={tagListProps}
-          mediaUploaderProps={mediaUploaderProps}
-          ctaButtonProps={ctaButtonProps}
-          linkProps={linkProps}
-          sameContent={sameContent}
-          formatMessage={formatMessage}
-        />
-      );
-    }, [androidContent, iosContent, androidTitleError, iosTitleError, androidMessageError, iosMessageError, androidExternalLinkError, iosExternalLinkError, androidDeepLinkError, iosDeepLinkError, androidDeepLinkKeysError, iosDeepLinkKeysError, formatMessage, activeTab, imageSrc, isFullMode, imageData, androidAssetList, iosAssetList, videoState, videoData, location, tags, injectedTags, selectedOfferDetails, primaryButtonAndroid, secondaryButtonAndroid, primaryButtonIos, secondaryButtonIos, ctaData, deepLink, mobilePushActions, carouselActiveTabIndex, carouselLinkErrors, handleTitleChange, handleMessageChange, handleMediaTypeChange, handleActionOnClickChange, handleLinkTypeChange, handleDeepLinkChange, handleDeepLinkKeysChange, handleExternalLinkChange, onTagSelect, handleOnTagsContextChange, setUpdateMpushImageSrc, updateOnMpushImageReUpload, setUpdateMpushVideoSrc, updateOnMpushVideoReUpload, clearImageDataByMediaType, handleCarouselDataChange, updateCarouselLinkError, sameContent, updateHandler, deleteHandler]
-  );
-
-  // PANES: Only render enabled platforms
-  const PANES = useMemo(() => {
-    const panes = [];
-    if (isAndroidSupported) {
-      panes.push({
-        key: ANDROID,
-        tab: (
-          <CapRow>
-            <CapIcon type="android" />
-            {formatMessage(messages.android)}
-          </CapRow>
-        ),
-        content: renderContentFields(ANDROID),
-      });
-    }
-    if (isIosSupported) {
-      panes.push({
-        key: IOS,
-        tab: (
-          <CapRow>
-            <CapIcon type="ios" />
-            {formatMessage(messages.ios)}
-          </CapRow>
-        ),
-        content: renderContentFields(IOS),
-      });
-    }
-    return panes;
-  }, [isAndroidSupported, isIosSupported, renderContentFields, formatMessage]);
-
-  // Save button disabled logic: only check enabled platforms
-  const isSaveDisabled = (
-    (isAndroidSupported && (!androidContent?.title?.trim() || !androidContent?.message?.trim()))
-    || (isIosSupported && (!iosContent?.title?.trim() || !iosContent?.message?.trim()))
-    || templateNameError
-    || Object.values(carouselLinkErrors).some((error) => error !== null && error !== "")
-    || !isCarouselDataValid()
-  );
-
-  // Validation in handleSave: only show errors for enabled platforms
-  const handleSave = useCallback(() => {
-    if (isAndroidSupported && (!androidContent?.title?.trim() || !androidContent?.message?.trim())) {
-      CapNotification.error({
-        message: formatMessage(messages.androidValidationError),
-      });
-      if (onValidationFail) onValidationFail();
-      return;
-    }
-    if (isIosSupported && (!iosContent?.title?.trim() || !iosContent?.message?.trim())) {
-      CapNotification.error({
-        message: formatMessage(messages.iosValidationError),
-      });
-      if (onValidationFail) onValidationFail();
-      return;
-    }
-    if (templateNameError) {
-      CapNotification.error({
-        message: formatMessage(messages.emptyTemplateErrorMessage),
-      });
-      return;
-    }
-    // Only require templateName in full mode
-    if (isFullMode && !templateName?.trim()) {
-      CapNotification.error({
-        message: formatMessage(messages.emptyTemplateErrorMessage),
-      });
-      return;
-    }
-
-    // In library mode, set templateName programmatically if empty
-    let finalTemplateName = templateName;
-    if (!isFullMode && (!finalTemplateName || !finalTemplateName.trim())) {
-      if (androidContent?.title && androidContent.title.trim()) {
-        finalTemplateName = androidContent.title.trim();
-      } else if (iosContent?.title && iosContent.title.trim()) {
-        finalTemplateName = iosContent.title.trim();
-      } else {
-        finalTemplateName = '';
-      }
-    }
-
-    // Validate external links
-    const androidUrlError = validateExternalLink(androidContent.externalLinkValue, formatMessage, messages);
-    const iosUrlError = validateExternalLink(iosContent.externalLinkValue, formatMessage, messages);
-
-    setAndroidExternalLinkError(androidUrlError || "");
-    setIosExternalLinkError(iosUrlError || "");
-
-    // Validate deep links
-    const androidDeepLinkUrlError = validateDeepLink(androidContent.deepLinkValue, formatMessage, messages);
-    const iosDeepLinkUrlError = validateDeepLink(iosContent.deepLinkValue, formatMessage, messages);
-
-    setAndroidDeepLinkError(androidDeepLinkUrlError || "");
-    setIosDeepLinkError(iosDeepLinkUrlError || "");
-
-    // Validate deep link keys
-    const androidDeepLinkKeysErrorMsg = androidContent.linkType === DEEP_LINK && androidContent.deepLinkValue && (!Array.isArray(androidContent.deepLinkKeysValue) || androidContent.deepLinkKeysValue.length === 0) ? formatMessage(messages.deepLinkKeysRequired) : "";
-    const iosDeepLinkKeysErrorMsg = iosContent.linkType === DEEP_LINK && iosContent.deepLinkValue && (!Array.isArray(iosContent.deepLinkKeysValue) || iosContent.deepLinkKeysValue.length === 0) ? formatMessage(messages.deepLinkKeysRequired) : "";
-
-    setAndroidDeepLinkKeysError(androidDeepLinkKeysErrorMsg || "");
-    setIosDeepLinkKeysError(iosDeepLinkKeysErrorMsg || "");
-
-    // Check for carousel link errors
-    const hasCarouselErrors = Object.values(carouselLinkErrors).some((error) => error !== null && error !== "");
-
-    if (androidUrlError || iosUrlError || androidDeepLinkUrlError || iosDeepLinkUrlError || androidDeepLinkKeysErrorMsg || iosDeepLinkKeysErrorMsg || hasCarouselErrors) {
-      CapNotification.error({
-        message: formatMessage(messages.invalidUrl),
-      });
-      if (onValidationFail) {
-        onValidationFail();
-      }
-      return;
-    }
-
-    try {
-      // Convert ctaData to backend format and add to content
-      const processedAndroidContent = { ...androidContent };
-      const processedIosContent = { ...iosContent };
-
-      // Process button CTA data if it exists
-      if (ctaDataAndroid && ctaDataAndroid.length > 0) {
-        const savedCtas = ctaDataAndroid.filter((cta) => cta.isSaved);
-        if (savedCtas.length > 0) {
-          processedAndroidContent.expandableDetails = {
-            ...processedAndroidContent.expandableDetails,
-            ctas: savedCtas.map((cta) => ({
-              actionText: cta.text,
-              type: cta.urlType || DEEP_LINK,
-              actionLink: cta.url,
-              deepLinkKeys: cta.deepLinkKeys, // Keep deepLinkKeys for createPayload.js to process
-            })),
-          };
-        }
-      }
-      if (ctaDataIos && ctaDataIos.length > 0) {
-        const savedCtas = ctaDataIos.filter((cta) => cta.isSaved);
-        if (savedCtas.length > 0) {
-          processedIosContent.expandableDetails = {
-            ...processedIosContent.expandableDetails,
-            ctas: savedCtas.map((cta) => ({
-              actionText: cta.text,
-              type: cta.urlType || DEEP_LINK,
-              actionLink: cta.url,
-              deepLinkKeys: cta.deepLinkKeys, // Keep deepLinkKeys for createPayload.js to process
-            })),
-          };
-        }
-      }
-
-      // Fix: Only include enabled platform content in payload
-      const payload = createPayload({
-        templateName: finalTemplateName,
-        androidContent: isAndroidSupported ? processedAndroidContent : undefined,
-        iosContent: isIosSupported ? processedIosContent : undefined,
-        imageSrc,
-        mpushVideoSrcAndPreview,
-        accountData,
-        sameContent,
-        options: {
-          mode: params?.mode,
-        },
-      });
-
-      // Add template ID for edit mode
-      if (isEditMode && templateId) {
-        payload._id = templateId;
-      }
-
-      const content = getContent(payload);
-      const { definition: { mode: definitionMode } = {} } = payload || {};
-      const label = definitionMode === IMAGE.toLowerCase() ? IMAGE.toLowerCase() : TEXT.toLowerCase();
-
-      const handleSuccess = (response) => {
-        const timeTaken = GA.timeTracker.stopTimer(TRACK_CREATE_MPUSH, {
-          category: "Creatives",
-          action: TRACK_CREATE_MPUSH,
-          label,
-        });
-
-        gtmPush("creativeDetails", {
-          id: response?.templateId || params?.id,
-          name: payload.name,
-          channel: MOBILE_PUSH_CHANNEL,
-          timeTaken,
-          content,
-          mode: isEditMode ? EDIT : CREATE,
-          imageAdded: definitionMode === IMAGE.toLowerCase(),
-        });
-
-        // --- BEGIN: Library mode communication fix ---
-        if (!isFullMode) {
-          // In library mode, only communicate to parent/callback, do NOT call create/edit API
-          const formDataForLibrary = {
-            action: 'getFormData',
-            value: payload, // payload is the backend-ready template data with versions.base structure
-            validity: true,
-            type: 'MOBILEPUSH',
-          };
-          if (window && window.parent) {
-            window.parent.postMessage(JSON.stringify(formDataForLibrary), '*');
-          }
-          if (typeof getFormLibraryData === 'function') {
-            try {
-              getFormLibraryData(formDataForLibrary);
-            } catch (error) {
-              console.error('[MobilePushNew] Error calling getFormLibraryData:', error);
-            }
-          }
-
-          // Close slidebox after successful save in library mode
-          if (typeof handleClose === 'function') {
-            handleClose();
-          }
-
-          // Do not proceed with any API or further side effects in library mode
-          return;
-        }
-        // --- END: Library mode communication fix ---
-
-        // Show success toast and refresh list after create (not edit)
-        if (!isEditMode && response && (response.templateId || response._id)) {
-          const message = `${intl.formatMessage(messages.templateCreateSuccess)}`;
-          CapNotification.success({ key: 'createSuccess', message });
-          // Call handleClose to close the slidebox/modal
-          if (typeof handleClose === 'function') {
-            handleClose();
-          }
-          // Call onCreateComplete to notify parent to refresh list
-          if (typeof onCreateComplete === 'function') {
-            onCreateComplete(true);
-          }
-          // Optionally, trigger a parent refresh (if needed)
-          if (window && window.parent) {
-            window.parent.postMessage(JSON.stringify({ type: 'REFRESH_MOBILEPUSH_TEMPLATES' }), '*');
-          }
-          setTimeout(() => {
-            mobilePushActions.clearCreateResponse();
-          }, 100);
-        }
-
-        if (isEditMode) {
-          // Delay handleClose to ensure Templates container processes the response first
-          setTimeout(() => {
-            try {
-              handleClose();
-            } catch (error) {
-              console.error("[MobilePushNew] Error calling handleClose:", error);
-            }
-          }, 150);
-          // Delay clearing the response to allow Templates container to process it
-          setTimeout(() => {
-            mobilePushActions.clearEditResponse();
-          }, 100);
-        } else {
-          resetFormData();
-        }
-
-        if (getFormLibraryData && isFullMode) {
-          getFormLibraryData({ validity: true });
-        }
-      };
-
-      // --- Only call create/edit API in full mode ---
-      if (isFullMode) {
-        if (isEditMode) {
-          mobilePushActions.editTemplate(payload, (response) => {
-            // Guard: If response is an Error object, show error notification and return
-            if (response instanceof Error) {
-              CapNotification.error({ key: 'createError', message: intl.formatMessage(messages.somethingWentWrong) });
-              return;
-            }
-            handleSuccess({ ...response, isEdit: true });
-          });
-        } else {
-          mobilePushActions.createTemplate(payload, (response) => {
-            // Guard: If response is an Error object, show error notification and return
-            if (response instanceof Error) {
-              const errorMsg = response.message || response.toString();
-              // Check for duplicate name error
-              if (errorMsg && errorMsg.toLowerCase().includes('template name already exist')) {
-                CapNotification.error({ key: 'duplicateName', message: errorMsg });
-                // Do NOT close the slidebox or call onCreateComplete
-                return;
-              }
-              CapNotification.error({ key: 'createError', message: intl.formatMessage(messages.somethingWentWrong) });
-              if (typeof onCreateComplete === 'function') {
-                onCreateComplete(false);
-              }
-              return;
-            }
-            handleSuccess({ ...response, isEdit: false });
-          });
-        }
-      } else {
-        // In library mode, do NOT call create/edit API, just communicate to parent/callback (already handled above)
-        // Call handleSuccess directly to trigger the postMessage logic
-        handleSuccess({ isLibraryMode: true });
-      }
-    } catch (error) {
-      const errorMsg = getMessageObject(
-        "error",
-        formatMessage(messages.somethingWentWrong),
-        true
-      );
-      globalActionsProps.addMessageToQueue(errorMsg);
-      if (onValidationFail) {
-        onValidationFail();
-      }
-    }
-  }, [
-    templateNameError,
-    formatMessage,
-    templateName,
-    androidContent,
-    iosContent,
-    imageSrc,
-    mpushVideoSrcAndPreview,
-    accountData,
-    params?.mode,
-    params?.id,
-    isEditMode,
-    mobilePushActions,
-    handleClose,
-    getFormLibraryData,
-    globalActionsProps,
-    onValidationFail,
-    resetFormData,
-    validateExternalLink,
-    ctaDataAndroid,
-    ctaDataIos,
-    intl,
-    onCreateComplete,
-    createTimeoutRef,
-    isAndroidSupported,
-    isIosSupported,
-    isAndroidFieldsMissing,
-    isIosFieldsMissing,
-    isCarouselDataValid,
-    isFullMode,
-    templateId,
-  ]);
-
-  // Helper to sync content between platforms
-  const syncPlatformContent = useCallback((sourceContent, sourcePlatform) => {
-    const targetPlatform = sourcePlatform === ANDROID ? IOS : ANDROID;
-    const setTargetContent = sourcePlatform === ANDROID ? setIosContent : setAndroidContent;
-    const setTargetTitleError = sourcePlatform === ANDROID ? setIosTitleError : setAndroidTitleError;
-    const setTargetMessageError = sourcePlatform === ANDROID ? setIosMessageError : setAndroidMessageError;
-    // Sync all content fields
-    setTargetContent({
-      ...sourceContent,
-      // Preserve platform-specific fields if any
-      buttons: Array.isArray(sourceContent.buttons)
-        ? sourceContent.buttons.map((btn) => ({
-          ...btn,
-          platform: targetPlatform,
-        }))
-        : [],
-    });
-
-    // Validate synced content
-    setTargetTitleError(validateTitle(sourceContent.title));
-    setTargetMessageError(validateMessage(sourceContent.message));
-  }, []);
-
-  const onTemplateNameChange = useCallback(
-    (ev) => {
-      const { value } = ev.target;
-      setTemplateName(value);
-      const isInvalid = !value || value.trim() === "";
-      setTemplateNameError(isInvalid);
-      if (value && onEnterTemplateName) {
-        onEnterTemplateName();
-      } else if (onRemoveTemplateName) {
-        onRemoveTemplateName();
-      }
-    },
-    [onEnterTemplateName, onRemoveTemplateName]
-  );
-
-  // --- Only show template name input in full mode (not library/consumer mode) ---
-  const createModeContent = useCallback(
-    () => (
-      isFullMode ? (
-        <CapRow className="input-group creative-name-container">
-          <CapInput
-            id="mobile-push-template-name-input"
-            className="mobile-push-template-name-input"
-            key={`template-name-${params?.id || 'create'}`}
-            label={formatMessage(messages.creativeName)}
-            placeholder={formatMessage(messages.creativeNamePlaceholder)}
-            value={templateName}
-            onChange={onTemplateNameChange}
-            status={templateNameError ? "error" : ""}
-            help={
-              templateNameError
-                ? formatMessage(messages.emptyTemplateErrorMessage)
-                : ""
-            }
-          />
-        </CapRow>
-      ) : null
-    ),
-    [isFullMode, formatMessage, templateName, onTemplateNameChange, templateNameError, params?.id]
-  );
-
-  const liquidMiddleWare = useCallback(() => {
-    const onError = ({ standardErrors, liquidErrors }) => {
-      setErrorMessage((prev) => ({
-        STANDARD_ERROR_MSG: { ...prev.STANDARD_ERROR_MSG, ...standardErrors },
-        LIQUID_ERROR_MSG: { ...prev.LIQUID_ERROR_MSG, ...liquidErrors },
-      }));
-    };
-    const onSuccess = () => handleSave();
-
-    validateMobilePushContent([androidContent, iosContent], {
-      currentTab: activeTab === ANDROID ? 1 : 2,
-      onError,
-      onSuccess,
-      getLiquidTags: globalActionsProps.getLiquidTags,
-      formatMessage,
-      messages: formBuilderMessages,
-      tagLookupMap: metaEntities?.tagLookupMap || {},
-      eventContextTags: metaEntities?.eventContextTags || [],
-      isLiquidFlow: hasLiquidSupportFeature(),
-      forwardedTags: {},
-      skipTags: (tag) => {
-        const skipRegexes = [
-          /dynamic_expiry_date_after_\d+_days\.FORMAT_\d/,
-          /unsubscribe\(#[a-zA-Z\d]{6}\)/,
-          /Link_to_[a-zA-z]/,
-          /SURVEY.*\.TOKEN/,
-          /^[A-Za-z].*\([a-zA-Z\d]*\)/,
-        ];
-        return skipRegexes.some((regex) => regex.test(tag));
-      },
-      singleTab: getSingleTab(accountData),
-    });
-  }, [
-    androidContent,
-    iosContent,
-    activeTab,
-    globalActionsProps,
-    formatMessage,
-    metaEntities,
-    accountData,
-  ]);
-
-  const isLiquidFlow = hasLiquidSupportFeature();
-
-  useEffect(() => {
-    // Always map to { label } for both platforms
-    const newButtons = Array.isArray(ctaData)
-      ? ctaData.map((data) => ({
-        label: data?.text || '',
-      }))
-      : [];
-
-    if (activeTab === ANDROID) {
-      setAndroidContent((prevContent) => ({
-        ...prevContent,
-        buttons: newButtons,
-      }));
-    } else if (activeTab === IOS) {
-      setIosContent((prevContent) => ({
-        ...prevContent,
-        buttons: newButtons,
-      }));
-    }
-  }, [ctaData, activeTab]);
-
-  // Sync button data and state for both platforms when sameContent is enabled (e.g., in edit mode)
-  useEffect(() => {
-    if (sameContent) {
-      // Copy button data and state from the active tab to the other platform
-      if (activeTab === ANDROID) {
-        setCtaDataIos(ctaDataAndroid);
-        setPrimaryButtonIos(primaryButtonAndroid);
-        setSecondaryButtonIos(secondaryButtonAndroid);
-      } else {
-        setCtaDataAndroid(ctaDataIos);
-        setPrimaryButtonAndroid(primaryButtonIos);
-        setSecondaryButtonAndroid(secondaryButtonIos);
-      }
-    }
-    // Only run when sameContent or activeTab changes
-  }, [sameContent]);
-
-  const handleSameContentChange = useCallback((e) => {
-    const isCurrentPlatformAndroid = activeTab === ANDROID;
-    syncPlatformContent(isCurrentPlatformAndroid ? androidContent : iosContent, isCurrentPlatformAndroid ? ANDROID : IOS);
-    setSameContent(e.target.checked);
-  }, [activeTab, androidContent, iosContent]);
-
-  const getContentType = useCallback(
-    (content) => {
-      // Get image source from multiple possible locations
-      const getImageSource = () => {
-        // First check content-specific image - handle both string and object formats
-        if (content?.imageSrc) {
-          // If imageSrc is a string, return it directly
-          if (typeof content.imageSrc === 'string') {
-            return content.imageSrc;
-          }
-          // If imageSrc is an object, extract the URL based on active tab
-          if (typeof content.imageSrc === 'object') {
-            if (activeTab === ANDROID && content.imageSrc.androidImageSrc) {
-              return content.imageSrc.androidImageSrc;
-            }
-            if (activeTab === IOS && content.imageSrc.iosImageSrc) {
-              return content.imageSrc.iosImageSrc;
-            }
-            return '';
-          }
-        }
-
-        // Then check upload state based on active tab
-        if (activeTab === ANDROID && imageSrc?.androidImageSrc) {
-          return imageSrc.androidImageSrc;
-        }
-        if (activeTab === IOS && imageSrc?.iosImageSrc) {
-          return imageSrc.iosImageSrc;
-        }
-
-        return '';
-      };
-
-      // Get video source from multiple possible locations
-      const getVideoSource = () => {
-        // First check current platform's content
-        if (content?.videoSrc) {
-          return content.videoSrc;
-        }
-
-        // Then check current platform's upload state only - DEFENSIVE: ensure perfect symmetry
-        const uploadVideoSrc = activeTab === ANDROID
-          ? videoState?.androidVideoSrc || ''
-          : videoState?.iosVideoSrc || '';
-        return uploadVideoSrc;
-      };
-
-      const getVideoPreview = () => {
-        // First check current platform's content
-        if (content?.videoPreview) {
-          return content.videoPreview;
-        }
-
-        // Then check current platform's upload state only - DEFENSIVE: ensure perfect symmetry
-        const uploadVideoPreview = activeTab === ANDROID
-          ? videoState?.androidVideoPreview || ''
-          : videoState?.iosVideoPreview || '';
-        return uploadVideoPreview;
-      };
-
-      const videoSrc = getVideoSource();
-      const videoPreview = getVideoPreview();
-
-      const bodyGifValue = content?.mediaType === GIF ? (videoSrc || getImageSource()) : "";
-
-      const previewData = {
-        appName: editData?.selectedWeChatAccount?.name || accountData?.selectedWeChatAccount?.name || "",
-        bodyText: content?.message || "",
-        bodyImage: content?.mediaType === IMAGE ? getImageSource() : "",
-        actions: Array.isArray(content?.buttons) ? content.buttons : [],
-        carouselData: content?.carouselData || [],
-        header: content?.title || "",
-        bodyVideo: (content?.mediaType === VIDEO || content?.mediaType === GIF) ? {
-          videoSrc,
-          videoPreview,
-        } : {},
-        bodyGif: bodyGifValue,
-      };
-      return previewData;
-    },
-    [editData, accountData, imageSrc, mpushVideoSrcAndPreview, activeTab, videoState]
-  );
-
-  const previewContent = useMemo(() => {
-    const currentContent = activeTab === ANDROID ? androidContent : iosContent;
-    const preview = getContentType(currentContent);
-    return preview;
-  }, [activeTab, androidContent, iosContent, getContentType]);
-
-  // Add useEffect to handle isGetFormData prop changes
-  useEffect(() => {
-    if (isGetFormData) {
-      handleSave();
-      // Reset the flag to prevent infinite loop
-      if (onValidationFail) {
-        onValidationFail();
-      }
-    }
-  }, [isGetFormData, handleSave, onValidationFail]);
-
-  // Add message event listener to handle parent communication (like old MobilePush components)
-  useEffect(() => {
-    const handleFrameTasks = (e) => {
-      const { data: type } = e;
-
-      if (typeof type === 'object') {
-        const { action } = type;
-        switch (action) {
-          case "getFormData":
-            handleSave();
-            break;
-          case "startTemplateCreation":
-            // Handle template creation start if needed
-            break;
-          default:
-            break;
-        }
-      } else {
-        switch (type) {
-          case "getFormData":
-            handleSave();
-            break;
-          default:
-            break;
-        }
-      }
-    };
-
-    window.addEventListener("message", handleFrameTasks);
-
-    return () => {
-      window.removeEventListener("message", handleFrameTasks);
-    };
-  }, [handleSave]);
-
-  return (
-    <CapSpin
-      spinning={spin || editData?.editTemplateInProgress || fetchingLiquidValidation || getTemplateDetailsInProgress}
-      tip={
-        fetchingLiquidValidation && formatMessage(messages.validationLoadingMessage)
-      }
-    >
-      <CapRow className="mobile-push-container">
-        <CapColumn className="content-section" span={14}>
-          {createModeContent()}
-          {isAndroidSupported && isIosSupported && (
-            <CapCheckbox
-              className="same-content-checkbox"
-              checked={sameContent}
-              onChange={handleSameContentChange}
-              key={`same-content-${sameContent}`}
-            >
-              {formatMessage(messages.sameContentForBothChannels)}
-            </CapCheckbox>
-          )}
-          <CapRow className="platform-header">
-            <CapTab
-              className="platform-tabs"
-              activeKey={activeTab}
-              onChange={setActiveTab}
-              panes={PANES}
-            />
-          </CapRow>
-          <CapRow>
-            <CapColumn span={24}>
-              <ErrorInfoNote
-                currentTab={activeTab?.toUpperCase()}
-                errorMessages={{
-                  LIQUID_ERROR_MSG: errorMessage?.LIQUID_ERROR_MSG,
-                  STANDARD_ERROR_MSG: errorMessage?.STANDARD_ERROR_MSG,
-                }}
-              />
-
-              {/* In library mode, only show save button in create mode (edit mode has Done button from FormBuilder). In full mode, keep old logic. */}
-              {((!isFullMode && computedCreativesMode !== 'edit') || (isFullMode && !isEditMode && computedCreativesMode === 'create')) && (
-                <CapRow className="save-section">
-                  <CapColumn span={24}>
-                    <CapButton
-                      type="primary"
-                      onClick={() => {
-                        if (isLiquidFlow) {
-                          liquidMiddleWare();
-                        } else {
-                          handleSave();
-                        }
-                      }}
-                      className="save-button"
-                      disabled={isSaveDisabled}
-                    >
-                      {formatMessage(messages.saveTemplate)}
-                    </CapButton>
-                  </CapColumn>
-                </CapRow>
-              )}
-
-            </CapColumn>
-          </CapRow>
-        </CapColumn>
-        <CapColumn className="preview-section" span={10}>
-          <TemplatePreview
-            device={activeTab === ANDROID ? "android" : "iphone"}
-            content={previewContent}
-            channel={MOBILE_PUSH_CHANNEL}
-            templateData={templateData}
-          />
-        </CapColumn>
-      </CapRow>
-    </CapSpin>
-  );
-};
-
-MobilePushNew.propTypes = {
-  isFullMode: PropTypes.bool,
-  onEnterTemplateName: PropTypes.func,
-  onRemoveTemplateName: PropTypes.func,
-  intl: intlShape.isRequired,
-  location: PropTypes.object,
-  selectedOfferDetails: PropTypes.object,
-  getDefaultTags: PropTypes.func,
-  injectedTags: PropTypes.object,
-  params: PropTypes.object,
-  templateData: PropTypes.object,
-  accountData: PropTypes.object,
-  editData: PropTypes.object,
-  mobilePushActions: PropTypes.object,
-  onValidationFail: PropTypes.func,
-  getFormLibraryData: PropTypes.func,
-  uploadedAssetData: PropTypes.object,
-  uploadedAssetData0: PropTypes.object,
-  uploadedAssetData1: PropTypes.object,
-  uploadAssetSuccess: PropTypes.bool,
-  metaEntities: PropTypes.object,
-  supportedTags: PropTypes.array,
-  globalActions: PropTypes.object,
-  fetchingLiquidValidation: PropTypes.bool,
-  handleClose: PropTypes.func,
-  createTemplateError: PropTypes.any,
-  isGetFormData: PropTypes.bool,
-  getTemplateDetailsInProgress: PropTypes.bool,
-  onCreateComplete: PropTypes.func,
-};
-
-MobilePushNew.defaultProps = {
-  isFullMode: false,
-  onEnterTemplateName: () => {},
-  onRemoveTemplateName: () => {},
-  location: {},
-  selectedOfferDetails: {},
-  getDefaultTags: () => {},
-  injectedTags: {},
-  params: {},
-  templateData: {},
-  accountData: {},
-  editData: {},
-  mobilePushActions: {},
-  onValidationFail: () => {},
-  getFormLibraryData: () => {},
-  uploadedAssetData: {},
-  uploadedAssetData0: {},
-  uploadedAssetData1: {},
-  uploadAssetSuccess: false,
-  metaEntities: {},
-  supportedTags: [],
-  globalActions: {},
-  fetchingLiquidValidation: false,
-  handleClose: () => {},
-  createTemplateError: null,
-  isGetFormData: false,
-  getTemplateDetailsInProgress: false,
-  onCreateComplete: () => {},
-};
-
-const mapStateToProps = createStructuredSelector({
-  editData: makeSelectMobilePushNew(),
-  injectedTags: setInjectedTags(),
-  currentOrgDetails: selectCurrentOrgDetails(),
-  metaEntities: makeSelectMetaEntities(),
-  loadingTags: isLoadingMetaEntities(),
-  uploadedAssetData: makeSelectUploadedAssetData(),
-  uploadedAssetData0: makeSelectUploadedAssetData0(),
-  uploadedAssetData1: makeSelectUploadedAssetData1(),
-  uploadAssetSuccess: makeSelectUploadAssetSuccess(),
-  assetUploading: makeSelectAssetUploading(),
-  fetchingLiquidValidation: selectLiquidStateDetails(),
-  createTemplateError: makeSelectCreateError(),
-  supportedTags: () => [],
-  accountData: createSelector(
-    (state) => state.get('templates'),
-    (templatesState) => {
-      if (!templatesState) {
-        return {};
-      }
-      const templates = templatesState.toJS();
-      const selectedAccount = templates?.selectedWeChatAccount || {};
-      // Debug logging removed - issue identified and fixed
-      return selectedAccount;
-    }
-  ),
-  getTemplateDetailsInProgress: makeSelectGetTemplateDetailsInProgress(),
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  mobilePushActions: bindActionCreators(actions, dispatch),
-  globalActions: bindActionCreators(globalActions, dispatch),
-});
-
-const withSaga = injectSaga({
-  key: "mobilePushNew",
-  saga: v2MobilePushSagas,
-  mode: DAEMON,
-});
-
-const withReducer = injectReducer({
-  key: "mobilePushNew",
-  reducer: mobilePushReducer,
-});
-
-export default withCreatives({
-  WrappedComponent: MobilePushNew,
-  mapStateToProps,
-  mapDispatchToProps,
-  userAuth: true,
-  sagas: [withSaga],
-  reducers: [withReducer],
-});