@capillarytech/creatives-library 8.0.125 → 8.0.127-alpha.0

package/v2Containers/MobilePushNew/index.js

@@ -0,0 +1,2280 @@
+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 [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 === EXTERNAL_LINK && !button.externalLinkValue) {
+              return false;
+            }
+          }
+          return true;
+        });
+      }
+
+      return true;
+    });
+  }, []);
+
+  // 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: "",
+      externalLinkValue: "",
+      carouselData: [],
+    });
+    setIosContent({
+      title: "",
+      message: "",
+      mediaType: NONE,
+      buttons: [],
+      actionOnClick: false,
+      linkType: DEEP_LINK,
+      deepLinkValue: "",
+      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 || "";
+
+    if (!isEmpty(accountObj)) {
+      const { configs = {} } = accountObj;
+      const isAndroidSupported = configs?.android === DEVICE_SUPPORTED;
+
+      try {
+        const parsedDeepLinks = JSON.parse(deepLinkObj || "{}");
+        const deepLinkKeys = Object.values(parsedDeepLinks);
+        const keys = deepLinkKeys?.map((link) => ({
+          label: link?.name,
+          value: link?.link,
+          title: link?.link,
+        }));
+
+        setActiveTab(isAndroidSupported ? ANDROID : IOS);
+        setDeepLink(keys);
+      } catch (error) {
+        console.error("[MobilePushNew] Error parsing deeplinks:", error, { deepLinkObj });
+        setDeepLink([]);
+      }
+    }
+  }, [accountData?.configs?.deeplink, accountData?.configs?.android]);
+
+  // 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 || [],
+          }));
+
+          // 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: "",
+          externalLinkValue: "",
+          imageSrc: androidImageSrc,
+          videoSrc: androidVideoSrc,
+          videoPreview: androidVideoPreview,
+          carouselData: carouselDataFromEdit, // Initialize carousel data
+        };
+
+        setAndroidContent(androidContentData);
+        // 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;
+            androidContentData.deepLinkValue = androidMainCta.actionLink;
+            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 CTA data for buttons (from expandableDetails.ctas)
+        const androidButtons = androidExpandableDetails?.ctas || [];
+        if (androidButtons.length > 0) {
+          const ctaDataFromAndroid = androidButtons.map((button, index) => ({
+            text: button.actionText || button.label || "",
+            index,
+            url: button.actionLink || "",
+            urlType: button.type || DEEP_LINK,
+            ctaType: index === 0 ? PRIMARY : SECONDARY,
+            isSaved: true, // Mark as saved since it's loaded from backend
+          }));
+          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 || [],
+          }));
+
+          // 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: "",
+          externalLinkValue: "",
+          imageSrc: iosImageSrc,
+          videoSrc: iosVideoSrc,
+          videoPreview: iosVideoPreview,
+          carouselData: carouselDataFromEdit, // Initialize carousel data
+        };
+
+        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) => ({
+            text: button.actionText || button.label || "",
+            index,
+            url: button.actionLink || "",
+            urlType: button.type || DEEP_LINK,
+            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 || [],
+        }));
+
+        // 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;
+          androidContentData.deepLinkValue = androidMainCta.actionLink;
+          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 {
+        androidContentData.deepLinkValue = "";
+        androidContentData.externalLinkValue = "";
+      }
+      const androidButtons = androidExpandableDetails?.ctas || [];
+      if (androidButtons.length > 0) {
+        const ctaDataFromAndroid = androidButtons.map((button, index) => ({
+          text: button.actionText || button.label || "",
+          index,
+          url: button.actionLink || "",
+          urlType: button.type || DEEP_LINK,
+          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 || [],
+        }));
+
+        // 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) => ({
+          text: button.actionText || button.label || "",
+          index,
+          url: button.actionLink || "",
+          urlType: button.type || DEEP_LINK,
+          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 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 = "";
+      if (isAndroid) {
+        titleError = isAndroidSupported ? androidTitleError : "";
+        messageError = isAndroidSupported ? androidMessageError : "";
+        externalLinkError = isAndroidSupported ? androidExternalLinkError : "";
+        deepLinkError = isAndroidSupported ? androidDeepLinkError : "";
+      } else {
+        titleError = isIosSupported ? iosTitleError : "";
+        messageError = isIosSupported ? iosMessageError : "";
+        externalLinkError = isIosSupported ? iosExternalLinkError : "";
+        deepLinkError = isIosSupported ? iosDeepLinkError : "";
+      }
+      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),
+        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 || "",
+        externalLinkValue: currentContent?.externalLinkValue || "",
+      };
+
+      return (
+        <PlatformContentFields
+          key={`platform-fields-${platform}`}
+          deviceType={platform}
+          content={currentContent}
+          errors={{
+            title: titleError,
+            message: messageError,
+            externalLink: externalLinkError,
+            deepLink: deepLinkError,
+          }}
+          handlers={handlers}
+          tagListProps={tagListProps}
+          mediaUploaderProps={mediaUploaderProps}
+          ctaButtonProps={ctaButtonProps}
+          linkProps={linkProps}
+          sameContent={sameContent}
+          formatMessage={formatMessage}
+        />
+      );
+    }, [androidContent, iosContent, androidTitleError, iosTitleError, androidMessageError, iosMessageError, androidExternalLinkError, iosExternalLinkError, androidDeepLinkError, iosDeepLinkError, 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, 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 || "");
+
+    // Check for carousel link errors
+    const hasCarouselErrors = Object.values(carouselLinkErrors).some((error) => error !== null && error !== "");
+
+    if (androidUrlError || iosUrlError || androidDeepLinkUrlError || iosDeepLinkUrlError || 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,
+            })),
+          };
+        }
+      }
+      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,
+            })),
+          };
+        }
+      }
+
+      // 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();
+      return templates?.selectedWeChatAccount || {};
+    }
+  ),
+  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],
+});