@capillarytech/creatives-library 8.0.125-alpha.6 → 8.0.126

package/v2Containers/MobilePushNew/index.js

@@ -1,2170 +0,0 @@
-import React, {
-  useCallback, useEffect, useMemo, useState, useRef,
-} from "react";
-import PropTypes from "prop-types";
-import { createStructuredSelector, createSelector } from "reselect";
-import { bindActionCreators } from "redux";
-import {
-  injectReducer,
-  injectSaga,
-} from "@capillarytech/vulcan-react-sdk/utils";
-import { cloneDeep, get, isEmpty } from "lodash";
-import CapCheckbox from "@capillarytech/cap-ui-library/CapCheckbox";
-import CapInput from "@capillarytech/cap-ui-library/CapInput";
-import CapButton from "@capillarytech/cap-ui-library/CapButton";
-import CapRow from "@capillarytech/cap-ui-library/CapRow";
-import CapSpin from "@capillarytech/cap-ui-library/CapSpin";
-import CapTab from "@capillarytech/cap-ui-library/CapTab";
-import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
-import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
-import { intlShape } from "react-intl";
-import "./index.scss";
-import { GA } from "@capillarytech/cap-ui-utils";
-import CapNotification from "@capillarytech/cap-ui-library/CapNotification";
-import { DAEMON } from "@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes";
-import globalMessages from "../Cap/messages";
-import * as actions from "./actions";
-import {
-  MEDIA_TYPES_OPTIONS,
-  ANDROID,
-  IOS,
-  MOBILE_PUSH_CHANNEL,
-  INITIAL_CONTENT,
-  BIG_PICTURE,
-  EXTERNAL_LINK,
-  GIF,
-  CAROUSEL,
-  PRIMARY,
-  SECONDARY,
-  MANUAL_CAROUSEL,
-  TEXT,
-} from "./constants";
-import TemplatePreview from "../../v2Components/TemplatePreview";
-import {
-  EMBEDDED,
-  IMAGE,
-  NONE,
-  VIDEO,
-  DEFAULT,
-  FULL,
-  TAG,
-  LIBRARY,
-  ALL,
-} from "../Whatsapp/constants";
-import * as globalActions from "../Cap/actions";
-import {
-  isLoadingMetaEntities,
-  makeSelectMetaEntities,
-  selectCurrentOrgDetails,
-  selectLiquidStateDetails,
-  setInjectedTags,
-} from "../Cap/selectors";
-import {
-  makeSelectMobilePushNew,
-  makeSelectUploadedAssetData,
-  makeSelectUploadedAssetData0,
-  makeSelectUploadedAssetData1,
-  makeSelectUploadAssetSuccess,
-  makeSelectCreateError,
-  makeSelectGetTemplateDetailsInProgress,
-  makeSelectAssetUploading,
-} from "./selectors";
-import withCreatives from "../../hoc/withCreatives";
-import { BIG_TEXT, DEEP_LINK, DEVICE_SUPPORTED } from "../InApp/constants";
-import { v2MobilePushSagas } from "./sagas";
-import { getContent } from "../MobilePush/commonMethods";
-import { getMessageObject } from "../../utils/messageUtils";
-import { gtmPush } from "../../utils/gtmTrackers";
-import { createPayload } from "../../utils/createPayload";
-import mobilePushReducer from "./reducer";
-import { hasLiquidSupportFeature } from "../../utils/common";
-import formBuilderMessages from "../../v2Components/FormBuilder/messages";
-import { validateMobilePushContent } from "../../utils/commonUtils";
-import { getSingleTab } from "../InApp/utils";
-import ErrorInfoNote from "../../v2Components/ErrorInfoNote";
-import usePlatformSync from "./hooks/usePlatformSync";
-import useUpload from "./hooks/useUpload";
-import { validateTags } from "../../utils/tagValidations";
-import { PlatformContentFields } from "./components";
-import { CREATE, EDIT, TRACK_CREATE_MPUSH } from "../App/constants";
-import { validateExternalLink, validateDeepLink } from "./utils";
-import messages from "./messages";
-import { EXTERNAL_URL } from "../CreativesContainer/constants";
-
-const MobilePushNew = ({
-  isFullMode,
-  intl,
-  onEnterTemplateName,
-  onRemoveTemplateName,
-  location,
-  selectedOfferDetails,
-  getDefaultTags,
-  injectedTags,
-  params,
-  templateData = {},
-  accountData,
-  editData = {},
-  mobilePushActions,
-  onValidationFail,
-  getFormLibraryData,
-  uploadedAssetData,
-  uploadedAssetData0,
-  uploadedAssetData1,
-  uploadAssetSuccess,
-  metaEntities,
-  supportedTags = [],
-  globalActions: globalActionsProps,
-  handleClose,
-  fetchingLiquidValidation,
-  createTemplateError,
-  isGetFormData,
-  getTemplateDetailsInProgress,
-  onCreateComplete,
-}) => {
-  const { formatMessage } = intl;
-
-  // Compute templateId from params or templateData for robust edit mode detection
-  const templateId = params?.id || templateData?._id || templateData?.id;
-  const isEditMode = !!templateId;
-  const computedCreativesMode = isEditMode ? 'edit' : 'create';
-  console.log('[MobilePushNew] computedCreativesMode:', computedCreativesMode);
-
-  // 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) => {
-      // 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;
-    }
-
-    // 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.toLowerCase(),
-            imageUrl: card.imageUrl || '',
-            videoSrc: card.videoSrc || '',
-            buttons: card.buttons || [],
-          }));
-        }
-
-        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 || [],
-          }));
-        }
-
-        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, resetFormData]);
-
-  // Data population useEffect - for library mode (not full mode) using templateData
-  useEffect(() => {
-    if (isFullMode || !templateData || isEmpty(templateData)) {
-      return;
-    }
-
-    // Always reset form state before populating new template 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 || [],
-        }));
-      }
-      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 || [],
-        }));
-      }
-      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, resetFormData]);
-
-  // 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;
-    }
-    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,
-            })),
-          };
-        }
-      }
-
-      // Fix: Only include enabled platform content in payload
-      const payload = createPayload({
-        templateName,
-        androidContent: isAndroidSupported ? processedAndroidContent : undefined,
-        iosContent: isIosSupported ? processedIosContent : undefined,
-        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.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) {
-          // Match the old MobilePushCreate/Edit structure for library mode
-          const formDataForLibrary = {
-            action: 'getFormData',
-            value: payload, // payload is the backend-ready template data
-            validity: true,
-            type: 'MOBILEPUSH',
-          };
-          if (window && window.parent) {
-            window.parent.postMessage(formDataForLibrary, '*');
-          }
-          if (typeof getFormLibraryData === 'function') {
-            getFormLibraryData(formDataForLibrary);
-          }
-        }
-        // --- 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({ 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 });
-        }
-      };
-
-      // 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) {
-      console.log('handleSave error:', error, error && error.stack);
-      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,
-  ]);
-
-  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]
-  );
-
-  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 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]
-  );
-
-  // 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 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]); // 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}>
-          {!isEditMode && 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,
-                }}
-              />
-
-              {!isEditMode && computedCreativesMode === 'create' && (
-                <CapRow className="save-section">
-                  <CapColumn span={24}>
-                    <CapButton
-                      type="primary"
-                      onClick={isLiquidFlow ? liquidMiddleWare : 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],
-});