@capillarytech/creatives-library 8.0.123 → 8.0.124

package/v2Containers/MobilePushNew/index.js

@@ -0,0 +1,1960 @@
+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,
+} from "./constants";
+import TemplatePreview from "../../v2Components/TemplatePreview";
+import {
+  EMBEDDED,
+  IMAGE,
+  NONE,
+  VIDEO,
+  DEFAULT,
+  FULL,
+  TAG,
+  ALL,
+  LIBRARY,
+} 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 { TRACK_CREATE_MPUSH } from "../App/constants";
+import { validateExternalLink, validateDeepLink } from "./utils";
+import messages from "./messages";
+
+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;
+
+  const isEditMode = !!(params?.id && isFullMode);
+
+  // 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(
+    () => ({
+      ...editData,
+      uploadedAssetData0,
+      uploadedAssetData1,
+    }),
+    [editData, uploadedAssetData0, uploadedAssetData1]
+  );
+
+  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);
+
+  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, cardIndex) => {
+      // 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, buttonIndex) => {
+          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 && isFullMode) {
+      setSpin(true);
+      mobilePushActions.getTemplateDetails(params.id);
+    }
+    // No need to resetStore here, as we want to keep the new template's details
+  }, [params?.id, isFullMode, 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;
+    }
+
+    // Always reset form state before populating new template 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',
+            imageUrl: card.imageUrl || '',
+            videoSrc: card.videoSrc || '',
+            buttons: card.buttons || [],
+          }));
+        }
+
+        const androidContentData = {
+          title: androidTitle,
+          message: androidMessage,
+          mediaType: androidMediaType,
+          buttons: (() => {
+            if (Array.isArray(androidCtas)) return androidCtas;
+            if (Array.isArray(androidCta)) return androidCta;
+            return [];
+          })(),
+          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 {
+            // Fallback to URL pattern detection if type is not explicitly set
+            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: iosCta = [],
+          expandableDetails: iosExpandableDetails = {},
+          image: iosImage = "",
+          cta: iosMainCta = null, // This is the main notification body CTA
+        } = iosContentType || {};
+
+        // Only destructure iosExpandableDetails here
+        const { style, ctas, image } = iosExpandableDetails || {};
+        // In Android 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 (style === BIG_PICTURE) {
+          iosMediaType = IMAGE;
+          iosImageSrc = image || iosImage;
+        } else if (style === BIG_TEXT) {
+          iosMediaType = NONE;
+        } else if (style === '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 ((style === 'MANUAL_CAROUSEL' || iosContentType?.type === CAROUSEL) && iosExpandableDetails?.carouselData) {
+          iosMediaType = CAROUSEL;
+          // Process carousel data from editData
+          carouselDataFromEdit = iosExpandableDetails.carouselData.map((card) => ({
+            mediaType: card.mediaType || 'image',
+            imageUrl: card.imageUrl || '',
+            videoSrc: card.videoSrc || '',
+            buttons: card.buttons || [],
+          }));
+        }
+
+        const iosContentData = {
+          title: iosTitle,
+          message: iosMessage,
+          mediaType: iosMediaType,
+          buttons: Array.isArray(ctas) ? ctas : [],
+          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)
+        if (iosMainCta?.actionLink) {
+          iosContentData.actionOnClick = true;
+          iosContentData.deepLinkValue = iosMainCta.actionLink;
+
+          // Determine link type based on saved CTA type (prioritize saved type over URL pattern)
+          if (iosMainCta.type === 'EXTERNAL_URL') {
+            iosContentData.linkType = EXTERNAL_LINK;
+            iosContentData.externalLinkValue = iosMainCta.actionLink;
+            iosContentData.deepLinkValue = "";
+          } else if (iosMainCta.type === 'DEEP_LINK') {
+            iosContentData.linkType = DEEP_LINK;
+            iosContentData.deepLinkValue = iosMainCta.actionLink;
+            iosContentData.externalLinkValue = "";
+          } else {
+            // Fallback to URL pattern detection if type is not explicitly set
+            if (iosMainCta.actionLink.startsWith('http://') || iosMainCta.actionLink.startsWith('https://')) {
+              iosContentData.linkType = EXTERNAL_LINK;
+              iosContentData.externalLinkValue = iosMainCta.actionLink;
+              iosContentData.deepLinkValue = "";
+            } else {
+              iosContentData.linkType = DEEP_LINK;
+              iosContentData.deepLinkValue = iosMainCta.actionLink;
+              iosContentData.externalLinkValue = "";
+            }
+          }
+        }
+
+        // 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, resetFormData]);
+
+  const handleSave = useCallback(() => {
+    if (templateNameError) {
+      CapNotification.error({
+        message: formatMessage(messages.emptyTemplateErrorMessage),
+      });
+      return;
+    }
+
+    if (!templateName?.trim()) {
+      CapNotification.error({
+        message: formatMessage(messages.emptyTemplateErrorMessage),
+      });
+      return;
+    }
+
+    if (!androidContent?.title?.trim() || !androidContent?.message?.trim()) {
+      CapNotification.error({
+        message: formatMessage(messages.androidValidationError),
+      });
+      return;
+    }
+
+    if (!iosContent?.title?.trim() || !iosContent?.message?.trim()) {
+      CapNotification.error({
+        message: formatMessage(messages.iosValidationError),
+      });
+      return;
+    }
+
+    // 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,
+            })),
+          };
+        }
+      }
+
+      const payload = createPayload({
+        templateName,
+        androidContent: processedAndroidContent,
+        iosContent: processedIosContent,
+        imageSrc,
+        mpushVideoSrcAndPreview,
+        accountData,
+        sameContent,
+        options: {
+          mode: params?.mode,
+        },
+      });
+
+      // Add template ID for edit mode
+      if (isEditMode && params?.id) {
+        payload._id = params.id;
+      }
+
+
+      const content = getContent(payload);
+      const { definition: { mode: definitionMode } = {} } = payload || {};
+      const label = definitionMode === "image" ? "image" : "text";
+
+      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",
+        });
+
+        // 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({ 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) {
+          getFormLibraryData({ validity: true });
+        }
+      };
+
+      // Use appropriate action based on mode
+      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 {
+        // Remove fallback timeout logic entirely
+        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 });
+        });
+      }
+    } 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,
+  ]);
+
+  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();
+
+  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]
+  );
+
+  // Add changeSourceRef for debounced sync
+  const changeSourceRef = useRef(null);
+
+  const {
+    handleTitleChange,
+    handleMessageChange,
+    handleTagSelect,
+    handleMediaTypeChange,
+    handleButtonChange,
+    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]);
+
+  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
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sameContent]);
+
+  const createModeContent = useCallback(
+    () => (
+      <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>
+    ),
+    [formatMessage, templateName, onTemplateNameChange, templateNameError]
+  );
+
+  const onTagSelect = useCallback(
+    (data, id) => {
+      const platform = activeTab === ANDROID ? ANDROID : IOS;
+      handleTagSelect(platform, data, id === 0);
+    },
+    [activeTab, handleTagSelect]
+  );
+
+  const renderContentFields = useCallback(
+    (deviceType) => {
+      const isAndroid = activeTab === ANDROID;
+      const currentContent = isAndroid ? androidContent : iosContent;
+      const titleError = isAndroid ? androidTitleError : iosTitleError;
+      const messageError = isAndroid ? androidMessageError : iosMessageError;
+      const externalLinkError = isAndroid ? androidExternalLinkError : iosExternalLinkError;
+      const deepLinkError = isAndroid ? androidDeepLinkError : 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(activeTab, value),
+        handleExternalLinkChange: (value) => handleExternalLinkChange(activeTab, value),
+        onTagSelect,
+        handleOnTagsContextChange,
+      };
+
+      const tagListProps = {
+        moduleFilterEnabled: location?.query?.type !== EMBEDDED,
+        label: formatMessage(messages.addLabels),
+        location,
+        tags: tags || [],
+        injectedTags: injectedTags || {},
+        selectedOfferDetails,
+      };
+
+      const mediaUploaderProps = {
+        mediaType: currentContent?.mediaType,
+        activeTab,
+        // sameContent, // Removed
+        imageSrc,
+        uploadMpushAsset,
+        isFullMode,
+        setUpdateMpushImageSrc,
+        updateOnMpushImageReUpload,
+        imageData,
+        // Create separate asset lists for VIDEO and GIF - use platform-specific lists
+        videoAssetList: currentContent?.mediaType === "VIDEO" ? (activeTab === ANDROID ? androidAssetList : iosAssetList) : {},
+        gifAssetList: currentContent?.mediaType === "GIF" ? (activeTab === ANDROID ? androidAssetList : iosAssetList) : {},
+        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,
+      };
+
+      const ctaButtonProps = {
+        primaryButton,
+        secondaryButton,
+        setPrimaryButton,
+        setSecondaryButton,
+        ctaData,
+        updateHandler,
+        deleteHandler,
+        deepLink,
+      };
+
+      const linkProps = {
+        deepLink,
+        deepLinkValue: currentContent?.deepLinkValue || "",
+        externalLinkValue: currentContent?.externalLinkValue || "",
+      };
+
+      return (
+        <PlatformContentFields
+          key={`platform-fields-${activeTab}`}
+          deviceType={activeTab}
+          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,
+      // sameContent, // Removed
+      imageSrc,
+      isFullMode,
+      imageData,
+      androidAssetList,
+      iosAssetList,
+      videoState,
+      videoData,
+      location,
+      tags,
+      injectedTags,
+      selectedOfferDetails,
+      primaryButtonAndroid,
+      secondaryButtonAndroid,
+      primaryButtonIos,
+      secondaryButtonIos,
+      ctaData,
+      deepLink,
+      mobilePushActions,
+      carouselActiveTabIndex,
+      carouselLinkErrors,
+    ]
+  );
+    // 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 handleSameContentChange = useCallback((e) => {
+    const isCurrentPlatformAndroid = activeTab === ANDROID;
+    syncPlatformContent(isCurrentPlatformAndroid ? androidContent : iosContent, isCurrentPlatformAndroid ? ANDROID : IOS);
+    setSameContent(e.target.checked);
+  }, [activeTab, androidContent, iosContent]);
+
+  const PANES = useMemo(() => [
+    {
+      content: renderContentFields(),
+      tab: (
+        <CapRow>
+          <CapIcon type="android" />
+          {formatMessage(messages.android)}
+        </CapRow>
+      ),
+      key: ANDROID,
+    },
+    {
+      content: renderContentFields(),
+      tab: (
+        <CapRow>
+          <CapIcon type="ios" />
+          {formatMessage(messages.ios)}
+        </CapRow>
+      ),
+      key: IOS,
+    },
+  ], [renderContentFields, formatMessage]);
+
+  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;
+            }
+            // Only fallback to other platform's image if sameContent is enabled
+            // if (sameContent) { // Removed
+            //   const fallbackImage = content.imageSrc.androidImageSrc || content.imageSrc.iosImageSrc || ''; // Removed
+            //   return fallbackImage; // Removed
+            // } // Removed
+            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;
+        }
+
+        // Only fallback to other platform's image if sameContent is enabled
+        // if (sameContent) { // Removed
+        //   const fallbackUploadImage = imageSrc?.androidImageSrc || imageSrc?.iosImageSrc || ''; // Removed
+        //   return fallbackUploadImage; // Removed
+        // } // Removed
+        return '';
+      };
+
+      // Get video source from multiple possible locations
+      const getVideoSource = () => {
+        // When sync is disabled, only use current platform's data - no fallbacks
+        // if (!sameContent) { // Removed
+        // 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;
+        // } // Removed
+
+        // When sync is enabled, allow fallbacks to other platform
+        // if (content?.videoSrc) { // Removed
+        //   return content.videoSrc; // Removed
+        // } // Removed
+
+        // const otherPlatformContent = activeTab === ANDROID ? iosContent : androidContent; // Removed
+        // if (otherPlatformContent?.videoSrc) { // Removed
+        //   return otherPlatformContent.videoSrc; // Removed
+        // } // Removed
+
+        // Check upload state with fallback to other platform - DEFENSIVE: ensure perfect symmetry
+        // const currentPlatformVideoSrc = activeTab === ANDROID
+        //   ? videoState?.androidVideoSrc
+        //   : videoState?.iosVideoSrc;
+
+        // if (currentPlatformVideoSrc) {
+        //   return currentPlatformVideoSrc;
+        // }
+
+        // // Fallback to other platform's upload state - DEFENSIVE: ensure perfect symmetry
+        // const otherPlatformVideoSrc = activeTab === ANDROID
+        //   ? videoState?.iosVideoSrc
+        //   : videoState?.androidVideoSrc;
+
+        // return otherPlatformVideoSrc || '';
+      };
+
+      const getVideoPreview = () => {
+        // When sync is disabled, only use current platform's data - no fallbacks
+        // if (!sameContent) { // Removed
+        // 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;
+        // } // Removed
+
+        // When sync is enabled, allow fallbacks to other platform
+        // if (content?.videoPreview) { // Removed
+        //   return content.videoPreview; // Removed
+        // } // Removed
+
+        // const otherPlatformContent = activeTab === ANDROID ? iosContent : androidContent; // Removed
+        // if (otherPlatformContent?.videoPreview) { // Removed
+        //   return otherPlatformContent.videoPreview; // Removed
+        // } // Removed
+
+        // // Check upload state with fallback to other platform - DEFENSIVE: ensure perfect symmetry
+        // const currentPlatformVideoPreview = activeTab === ANDROID
+        //   ? videoState?.androidVideoPreview
+        //   : videoState?.iosVideoPreview;
+
+        // if (currentPlatformVideoPreview) {
+        //   return currentPlatformVideoPreview;
+        // }
+
+        // // Fallback to other platform's upload state - DEFENSIVE: ensure perfect symmetry  
+        // const otherPlatformVideoPreview = activeTab === ANDROID
+        //   ? videoState?.iosVideoPreview
+        //   : videoState?.androidVideoPreview;
+
+        // return otherPlatformVideoPreview || '';
+      };
+
+      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]); // Remove handleSave from dependencies to prevent infinite loop
+
+  return (
+    <CapSpin
+      spinning={spin || editData?.editTemplateInProgress || fetchingLiquidValidation || getTemplateDetailsInProgress}
+      tip={
+        fetchingLiquidValidation && formatMessage(messages.validationLoadingMessage)
+      }
+    >
+      <CapRow className="mobile-push-container">
+        <CapColumn className="content-section" span={14}>
+          {isFullMode && createModeContent()}
+          <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,
+                }}
+              />
+
+              {isFullMode && !isEditMode && (
+                <CapRow className="save-section">
+                  <CapColumn span={24}>
+                    <CapButton
+                      type="primary"
+                      onClick={isLiquidFlow ? liquidMiddleWare : handleSave}
+                      className="save-button"
+                      disabled={
+                        templateNameError
+                        || !!androidTitleError
+                        || !!androidMessageError
+                        || !!iosTitleError
+                        || !!iosMessageError
+                        || !!androidExternalLinkError
+                        || !!iosExternalLinkError
+                        || !!androidDeepLinkError
+                        || !!iosDeepLinkError
+                        || Object.values(carouselLinkErrors).some((error) => error !== null && error !== "")
+                        || !isCarouselDataValid()
+                      }
+                    >
+                      {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,
+  assetUploading: 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,
+  assetUploading: 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],
+});