@capillarytech/creatives-library 8.0.239-alpha.0 → 8.0.239

package/v2Containers/WebPush/Create/index.js

@@ -1,1727 +0,0 @@
-import React, {
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-  useMemo,
-  memo,
-} from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { createStructuredSelector, createSelector } from 'reselect';
-import { bindActionCreators } from 'redux';
-import {
-  injectReducer,
-  injectSaga,
-} from '@capillarytech/vulcan-react-sdk/utils';
-import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
-import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
-import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
-import CapError from '@capillarytech/cap-ui-library/CapError';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
-import CapImageUpload from '../../../v2Components/CapImageUpload';
-import CapImageUrlUpload from '../../../v2Components/CapImageUrlUpload';
-import TagList from '../../TagList';
-import ButtonForm from './components/ButtonForm';
-import ButtonList from './components/ButtonList';
-import WebPushPreview from './preview/WebPushPreview';
-import isEmpty from 'lodash/isEmpty';
-import get from 'lodash/get';
-import { WEBPUSH, WEBPUSH_BRAND_ICON } from '../../CreativesContainer/constants.js';
-import {
-  WEBPUSH_MEDIA_TYPES,
-  WEBPUSH_MEDIA_TYPES_OPTIONS,
-  ALLOWED_IMAGE_EXTENSIONS_REGEX,
-  WEBPUSH_IMG_SIZE,
-  WEBPUSH_RECOMMENDED_DIMENSIONS,
-  BRAND_ICON_OPTIONS,
-  IMAGE_UPLOAD_METHODS,
-  WEBPUSH_BRAND_ICON_SIZE,
-  WEBPUSH_BRAND_ICON_RECOMMENDED_DIMENSIONS,
-  UPLOAD_FIELD_TYPES,
-  WEBPUSH_BUTTON_TYPES,
-  ON_CLICK_BEHAVIOUR_OPTIONS,
-  ACTION_TYPES,
-} from '../constants';
-import * as actions from '../actions';
-import {
-  makeSelectWebPush,
-  makeSelectCreateError,
-  makeSelectCreateTemplateInProgress,
-  makeSelectEditTemplateInProgress,
-  makeSelectEditError,
-} from '../selectors';
-import webPushReducer from '../reducer';
-import webPushSagas from '../sagas';
-import withCreatives from '../../../hoc/withCreatives';
-import messages from './messages';
-import globalMessages from '../../Cap/messages';
-import { isValidHttpUrl } from './utils/urlValidation';
-import { validateTags } from '../../../utils/tagValidations';
-import {
-  makeSelectMetaEntities,
-  setInjectedTags,
-} from '../../Cap/selectors';
-import {
-  ALL,
-  TAG,
-  EMBEDDED,
-  DEFAULT,
-  FULL,
-  LIBRARY,
-} from '../../Whatsapp/constants';
-import { SMS } from '../../CreativesContainer/constants';
-import './index.scss';
-
-// Character count configuration - set to false to disable
-const SHOW_CHARACTER_COUNT = true;
-
-// Maximum character limits for Web Push fields
-const NOTIFICATION_TITLE_MAX_LENGTH = 65;
-const MESSAGE_MAX_LENGTH = 240;
-
-// Memoized TagList wrapper components for better performance
-const MemoizedTagList = memo(({
-  moduleFilterEnabled,
-  label,
-  onContextChange,
-  location,
-  tags,
-  injectedTags,
-  selectedOfferDetails,
-  eventContextTags,
-  forwardedTags,
-  onTagSelect,
-}) => (
-  <TagList
-    moduleFilterEnabled={moduleFilterEnabled}
-    label={label}
-    onContextChange={onContextChange}
-    location={location}
-    tags={tags}
-    injectedTags={injectedTags}
-    selectedOfferDetails={selectedOfferDetails}
-    eventContextTags={eventContextTags}
-    forwardedTags={forwardedTags}
-    onTagSelect={onTagSelect}
-  />
-), (prevProps, nextProps) => {
-  // Custom comparison function for better memoization
-  return (
-    prevProps.moduleFilterEnabled === nextProps.moduleFilterEnabled
-    && prevProps.label === nextProps.label
-    && prevProps.onContextChange === nextProps.onContextChange
-    && prevProps.location === nextProps.location
-    && prevProps.tags === nextProps.tags
-    && prevProps.injectedTags === nextProps.injectedTags
-    && prevProps.selectedOfferDetails === nextProps.selectedOfferDetails
-    && prevProps.eventContextTags === nextProps.eventContextTags
-    && prevProps.forwardedTags === nextProps.forwardedTags
-    && prevProps.onTagSelect === nextProps.onTagSelect
-  );
-});
-
-MemoizedTagList.displayName = 'MemoizedTagList';
-
-const createWebPushPayload = ({
-  templateName,
-  notificationTitle,
-  message,
-  mediaType,
-  accountId,
-  isFullMode,
-  imageSrc,
-  imageUrl,
-  imageUploadMethod,
-  brandIconOption,
-  brandIconSrc,
-  brandIconUrl,
-  buttons,
-  onClickBehaviour,
-  redirectUrl,
-  websiteLink,
-}) => {
-  const trimmedTemplateName = (templateName || '').trim();
-  const trimmedTitle = (notificationTitle || '').trim();
-  const trimmedMessage = (message || '').trim();
-
-  const webpushContent = {
-    title: trimmedTitle,
-    message: trimmedMessage,
-    ...(mediaType && mediaType !== WEBPUSH_MEDIA_TYPES.NONE ? { mediaType } : {}),
-  };
-  
-  // Add image data if media type is IMAGE
-  if (mediaType === WEBPUSH_MEDIA_TYPES.IMAGE) {
-    if (imageUploadMethod === IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE && imageSrc) {
-      webpushContent.image = imageSrc;
-    } else if (imageUploadMethod === IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL && imageSrc) {
-      // Use imageSrc (uploaded secure_file_path) instead of imageUrl
-      // NOTE: To move upload to save event, check imageUrl exists but imageSrc is empty, upload, then use secure_file_path
-      webpushContent.image = imageSrc;
-    }
-  }
-
-  // Add brand icon data if option is not DONT_SHOW
-  if (brandIconOption !== BRAND_ICON_OPTIONS.DONT_SHOW && brandIconSrc) {
-    webpushContent.brandIcon = brandIconSrc;
-  }
-
-  // Add on-click behaviour for the notification body
-  if (onClickBehaviour === ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL && redirectUrl) {
-    webpushContent.onClickAction = {
-      type: ACTION_TYPES.URL,
-      url: redirectUrl.trim(),
-    };
-  } else if (onClickBehaviour === ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL) {
-    webpushContent.onClickAction = {
-      type: ACTION_TYPES.SITE_URL,
-      url: websiteLink || '',
-    };
-  }
-
-  // Add CTA buttons if any exist
-  if (buttons && buttons.length > 0) {
-    webpushContent.ctas = buttons.map((button) => ({
-      actionText: button.text,
-      type: ACTION_TYPES.URL,
-      actionLink: button.url,
-    }));
-  }
-
-  return {
-    name: trimmedTemplateName || "",
-    type: WEBPUSH,
-    definition: {
-      accountId,
-    },
-    versions: {
-      base: {
-        content: {
-          webpush: webpushContent,
-        },
-      },
-    },
-  };
-};
-
-const WebPushCreate = ({
-  isFullMode,
-  handleClose,
-  intl,
-  webPushActions,
-  createTemplateInProgress,
-  createTemplateError,
-  editTemplateInProgress,
-  editTemplateError,
-  accountData,
-  webPush,
-  onCreateComplete,
-  getFormData,
-  isGetFormData,
-  templateData,
-  creativesMode,
-  params,
-  globalActions,
-  location,
-  metaEntities,
-  injectedTags,
-  getDefaultTags,
-  supportedTags = [],
-  forwardedTags,
-  selectedOfferDetails = [],
-  eventContextTags = [],
-}) => {
-  const { formatMessage } = intl;
-  const { CapHeadingSpan } = CapHeading;
-  // Convert to state for controlled components
-  const [templateName, setTemplateName] = useState('');
-  const [notificationTitle, setNotificationTitle] = useState('');
-  const [message, setMessage] = useState('');
-  const [mediaType, setMediaType] = useState(WEBPUSH_MEDIA_TYPES.NONE);
-  const [templateNameError, setTemplateNameError] = useState(false);
-  const [titleError, setTitleError] = useState('');
-  const [messageError, setMessageError] = useState('');
-  const [fieldCompletion, setFieldCompletion] = useState({
-    templateName: !isFullMode,
-    notificationTitle: false,
-    message: false,
-  });
-  const titleCountRef = useRef(null);
-  const messageCountRef = useRef(null);
-  // Track if save/edit was initiated to prevent stale response handlers from firing
-  const saveInitiatedRef = useRef(false);
-  const [brandIconOption, setBrandIconOption] = useState(BRAND_ICON_OPTIONS.DONT_SHOW);
-  const [onClickBehaviour, setOnClickBehaviour] = useState(ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL);
-  const [redirectUrl, setRedirectUrl] = useState('');
-  const [redirectUrlError, setRedirectUrlError] = useState('');
-
-  // Image upload state
-  const [imageUploadMethod, setImageUploadMethod] = useState(IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE);
-  const [imageSrc, setImageSrc] = useState('');
-  const [imageUrl, setImageUrl] = useState('');
-  const [isImageValidating, setIsImageValidating] = useState(false);
-  const [isImageUploading, setIsImageUploading] = useState(false);
-
-  // Brand icon upload state
-  const [brandIconSrc, setBrandIconSrc] = useState('');
-  const [brandIconUrl, setBrandIconUrl] = useState('');
-  const [isBrandIconValidating, setIsBrandIconValidating] = useState(false);
-  const [isBrandIconUploading, setIsBrandIconUploading] = useState(false);
-
-  // Button state
-  const [buttons, setButtons] = useState([]);
-  const [isAddingButton, setIsAddingButton] = useState(false);
-  const [buttonBeingAdded, setButtonBeingAdded] = useState(null); // WEBPUSH_BUTTON_TYPES.PRIMARY or WEBPUSH_BUTTON_TYPES.SECONDARY
-  const [editingButtonIndex, setEditingButtonIndex] = useState(null);
-  const [activeUploadField, setActiveUploadField] = useState(null); // UPLOAD_FIELD_TYPES.IMAGE | UPLOAD_FIELD_TYPES.BRAND_ICON | null
-  const [tags, setTags] = useState([]);
-  const tagFetchKeyRef = useRef(null);
-
-  // Edit mode detection: check creativesMode or presence of template ID
-  const isEditMode = useMemo(
-    () =>
-      creativesMode === 'editTemplate'
-      || creativesMode === 'edit'
-      || !!(templateData?._id)
-      || !!(params?.id),
-    [creativesMode, templateData?._id, params?.id],
-  );
-
-  const accountId = useMemo(() => {
-    const fallbackAccountId = get(templateData, 'definition.accountId');
-    return (
-      accountData?.accountId
-      || accountData?.id
-      || fallbackAccountId
-      || get(accountData, 'sourceAccountIdentifier')
-    );
-  }, [
-    accountData?.accountId,
-    accountData?.id,
-    accountData?.sourceAccountIdentifier,
-    templateData,
-  ]);
-
-  const websiteLink = useMemo(
-    () => accountData?.configs?.websiteLink || '',
-    [accountData?.configs?.websiteLink],
-  );
-
-  const previewUrl = useMemo(
-    () => (
-      onClickBehaviour === ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL
-        ? redirectUrl
-        : websiteLink || redirectUrl
-    ),
-    [onClickBehaviour, redirectUrl, websiteLink],
-  );
-
-  const brandIconOptions = useMemo(
-    () => ([
-      { value: BRAND_ICON_OPTIONS.DONT_SHOW, label: formatMessage(messages.dontShow) },
-      { value: BRAND_ICON_OPTIONS.UPLOAD_IMAGE, label: formatMessage(messages.uploadImage) },
-      { value: BRAND_ICON_OPTIONS.ADD_IMAGE_URL, label: formatMessage(messages.addImageUrl) },
-    ]),
-    [formatMessage],
-  );
-
-  const onClickBehaviourOptions = useMemo(
-    () => ([
-      { value: ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL, label: formatMessage(messages.openSite) },
-      { value: ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL, label: formatMessage(messages.redirectToSpecificUrl) },
-    ]),
-    [formatMessage],
-  );
-
-  const validateTemplateName = useCallback((value) => !value || value.trim() === '', []);
-
-  const validateTitle = useCallback((value) => {
-    if (!value || value.trim() === '') {
-      return formatMessage(messages.titleRequired);
-    }
-    return '';
-  }, [formatMessage]);
-
-  const validateUrl = useCallback((value) => {
-    if (!value || value.trim() === '') {
-      return formatMessage(messages.urlRequired);
-    }
-    
-    if (!isValidHttpUrl(value)) {
-      return formatMessage(messages.urlInvalid);
-    }
-    
-    return '';
-  }, [formatMessage]);
-
-  const updateFieldCompletion = useCallback((field, hasValue) => {
-    setFieldCompletion((prev) => {
-      if (prev[field] === hasValue) {
-        return prev;
-      }
-      return {
-        ...prev,
-        [field]: hasValue,
-      };
-    });
-  }, []);
-
-  const updateCharacterCount = useCallback((labelRef, currentLength, maxLength) => {
-    if (labelRef?.current) {
-      labelRef.current.textContent = formatMessage(messages.characterCount, {
-        currentLength,
-        maxLength,
-      });
-    }
-  }, [formatMessage]);
-
-  // Fetch tags on mount based on context
-  const locationType = location?.query?.type || '';
-  const locationModule = location?.query?.module || '';
-
-  const tagFetchKey = useMemo(
-    () => JSON.stringify({
-      type: locationType,
-      module: locationModule,
-      defaultTags: getDefaultTags || '',
-    }),
-    [locationModule, locationType, getDefaultTags],
-  );
-
-  useEffect(() => {
-    if (!globalActions?.fetchSchemaForEntity) return;
-
-    const { type, module } = location?.query || {};
-    const isEmbedded = type === EMBEDDED;
-    const context = isEmbedded ? module : DEFAULT;
-    const embedded = isEmbedded ? type : FULL;
-    const query = {
-      layout: SMS,
-      type: TAG,
-      context,
-      embedded,
-    };
-    if (getDefaultTags) {
-      query.context = getDefaultTags;
-    }
-
-    if (tagFetchKeyRef.current === tagFetchKey) {
-      return;
-    }
-    tagFetchKeyRef.current = tagFetchKey;
-    globalActions.fetchSchemaForEntity(query);
-  }, [globalActions, getDefaultTags, location?.query, tagFetchKey]);
-
-  // Update tags from metaEntities and supported tags
-  useEffect(() => {
-    if (!metaEntities) return;
-    let tagList = get(metaEntities, 'tags.standard', []);
-    if (locationType === EMBEDDED && locationModule === LIBRARY && !getDefaultTags) {
-      tagList = supportedTags;
-    }
-    setTags(tagList || []);
-  }, [metaEntities, locationModule, locationType, supportedTags, getDefaultTags]);
-
-  const handleOnTagsContextChange = useCallback((data) => {
-    const isEmbedded = locationType === EMBEDDED;
-    const embedded = isEmbedded ? locationType : FULL;
-    const context = (data || '').toLowerCase() === ALL ? DEFAULT : (data || '').toLowerCase();
-    const query = {
-      layout: SMS,
-      type: TAG,
-      context,
-      embedded,
-    };
-    if (getDefaultTags) {
-      query.context = getDefaultTags;
-    }
-    globalActions?.fetchSchemaForEntity(query);
-  }, [globalActions, getDefaultTags, locationType]);
-
-  // Memoize validation function to avoid recreating on every render
-  const validationConfig = useMemo(
-    () => ({
-      tagsParam: tags,
-      injectedTagsParams: injectedTags,
-      location,
-      tagModule: getDefaultTags,
-      eventContextTags,
-    }),
-    [tags, injectedTags, location, getDefaultTags, eventContextTags],
-  );
-
-  const validateMessageContent = useCallback((value) => {
-    if (!value || value.trim() === '') {
-      return formatMessage(messages.messageRequired);
-    }
-    const validationResponse = validateTags({
-      content: value,
-      ...validationConfig,
-    }) || {};
-    if (validationResponse?.unsupportedTags?.length) {
-      return formatMessage(globalMessages.unsupportedTagsValidationError, {
-        unsupportedTags: validationResponse.unsupportedTags.join(', '),
-      });
-    }
-    if (validationResponse?.isBraceError) {
-      return formatMessage(globalMessages.unbalanacedCurlyBraces);
-    }
-    return '';
-  }, [formatMessage, validationConfig]);
-
-  useEffect(() => {
-    if (!isEditMode) {
-      return;
-    }
-
-    if (isEmpty(templateData)) {
-      return;
-    }
-
-    const webpushContent = get(templateData, 'versions.base.content.webpush', {});
-
-    const extractedTemplateName = templateData?.name || '';
-    const extractedNotificationTitle = webpushContent?.title || '';
-    const extractedMessage = webpushContent?.message || '';
-
-    // Update state to populate form fields
-    setTemplateName(extractedTemplateName);
-    setNotificationTitle(extractedNotificationTitle);
-    setMessage(extractedMessage);
-
-    const nextMediaType = webpushContent?.mediaType || WEBPUSH_MEDIA_TYPES.NONE;
-    setMediaType(nextMediaType);
-
-    const existingImage = webpushContent?.image || '';
-    if (existingImage) {
-      setImageSrc(existingImage);
-      setImageUploadMethod(IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE);
-      setImageUrl('');
-    } else {
-      setImageSrc('');
-      setImageUrl('');
-    }
-
-    const existingBrandIcon = webpushContent?.brandIcon || '';
-    if (existingBrandIcon) {
-      setBrandIconOption(BRAND_ICON_OPTIONS.UPLOAD_IMAGE);
-      setBrandIconSrc(existingBrandIcon);
-      setBrandIconUrl('');
-    } else {
-      setBrandIconOption(BRAND_ICON_OPTIONS.DONT_SHOW);
-      setBrandIconSrc('');
-      setBrandIconUrl('');
-    }
-
-    const webpushCtas = Array.isArray(webpushContent?.ctas) ? webpushContent.ctas : [];
-    setButtons(
-      webpushCtas.map((cta, index) => ({
-        text: cta?.actionText || '',
-        url: cta?.actionLink || '',
-        type: index === 0 ? WEBPUSH_BUTTON_TYPES.PRIMARY : WEBPUSH_BUTTON_TYPES.SECONDARY,
-      })),
-    );
-
-    const onClickAction = webpushContent?.onClickAction || {};
-    if (onClickAction?.type === ACTION_TYPES.URL) {
-      setOnClickBehaviour(ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL);
-      setRedirectUrl(onClickAction?.url || '');
-      setRedirectUrlError('');
-    } else if (onClickAction?.type === ACTION_TYPES.SITE_URL) {
-      setOnClickBehaviour(ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL);
-      setRedirectUrl(websiteLink);
-      setRedirectUrlError('');
-    } else {
-      setOnClickBehaviour(ON_CLICK_BEHAVIOUR_OPTIONS.SITE_URL);
-      setRedirectUrl(websiteLink);
-      setRedirectUrlError('');
-    }
-
-    updateFieldCompletion('notificationTitle', extractedNotificationTitle.trim().length > 0);
-    updateFieldCompletion('message', extractedMessage.trim().length > 0);
-    if (isFullMode) {
-      updateFieldCompletion('templateName', extractedTemplateName.trim().length > 0);
-      setTemplateNameError('');
-    }
-    setTitleError('');
-    setMessageError('');
-
-    setIsAddingButton(false);
-    setButtonBeingAdded(null);
-    setEditingButtonIndex(null);
-
-    updateCharacterCount(
-      titleCountRef,
-      extractedNotificationTitle.length,
-      NOTIFICATION_TITLE_MAX_LENGTH,
-    );
-    updateCharacterCount(
-      messageCountRef,
-      extractedMessage.length,
-      MESSAGE_MAX_LENGTH,
-    );
-  }, [
-    isEditMode,
-    templateData,
-    isFullMode,
-    updateFieldCompletion,
-    updateCharacterCount,
-  ]);
-
-  const handleTemplateNameChange = useCallback((e) => {
-    const { value } = e.target;
-    setTemplateName(value);
-    if (isFullMode) {
-      const nextError = validateTemplateName(value);
-      setTemplateNameError((prev) => (prev === nextError ? prev : nextError));
-    }
-    updateFieldCompletion('templateName', value.trim().length > 0);
-  }, [isFullMode, updateFieldCompletion, validateTemplateName]);
-
-  const handleNotificationTitleChange = useCallback((e) => {
-    const { value } = e.target;
-    setNotificationTitle(value);
-    const nextError = validateTitle(value);
-    setTitleError((prev) => (prev === nextError ? prev : nextError));
-    updateFieldCompletion('notificationTitle', value.trim().length > 0);
-    updateCharacterCount(titleCountRef, value.length, NOTIFICATION_TITLE_MAX_LENGTH);
-  }, [updateCharacterCount, updateFieldCompletion, validateTitle]);
-
-  // Optimize message change handler - use functional updates where possible
-  const handleMessageChange = useCallback((e) => {
-    const { value } = e.target;
-    // Cap length to maximum (maxLength not passed to TextArea to avoid embedded character count)
-    const cappedValue = value.length > MESSAGE_MAX_LENGTH
-      ? value.slice(0, MESSAGE_MAX_LENGTH)
-      : value;
-    if (cappedValue !== value) {
-      e.target.value = cappedValue;
-    }
-    setMessage(cappedValue);
-    const nextError = validateMessageContent(cappedValue);
-    setMessageError((prev) => (prev === nextError ? prev : nextError));
-    updateFieldCompletion('message', cappedValue.trim().length > 0);
-    updateCharacterCount(messageCountRef, cappedValue.length, MESSAGE_MAX_LENGTH);
-  }, [updateCharacterCount, updateFieldCompletion, validateMessageContent]);
-
-  const handleMediaTypeChange = useCallback((value) => {
-    setMediaType(value);
-    if (value === WEBPUSH_MEDIA_TYPES.NONE) {
-      setImageSrc('');
-      setImageUrl('');
-      setImageUploadMethod(IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE);
-    }
-  }, []);
-
-  const handleImageUploadMethodChange = useCallback((e) => {
-    const method = e.target.value;
-    setImageUploadMethod(method);
-    setImageSrc('');
-    setImageUrl('');
-  }, []);
-
-  // Image upload handlers
-  const setUpdateWebPushImageSrc = useCallback(
-    (filePath) => {
-      setImageSrc(filePath);
-      webPushActions.clearWebPushAsset(0);
-    },
-    [webPushActions],
-  );
-
-  const updateOnWebPushImageReUpload = useCallback(() => {
-    setImageSrc('');
-  }, []);
-
-  const uploadWebPushAsset = (file, type, fileParams) => {
-    setActiveUploadField(UPLOAD_FIELD_TYPES.IMAGE);
-    webPushActions.uploadWebPushAsset(file, type, fileParams, 0);
-  };
-
-  const handleImageUrlChange = useCallback((url) => {
-    setImageUrl(url);
-    // Clear imageSrc when URL changes
-    if (url !== imageUrl) {
-      setImageSrc('');
-    }
-  }, [imageUrl]);
-
-  const handleImageValidationStateChange = useCallback((isValidating) => {
-    setIsImageValidating(isValidating);
-  }, []);
-
-  const handleImageUploadStateChange = useCallback((isUploading) => {
-    setIsImageUploading(isUploading);
-  }, []);
-
-  // Restore image from uploaded asset data
-  useEffect(() => {
-    const imageDataObj = get(webPush, 'uploadedAssetData0') || get(webPush, 'uploadedAssetData');
-    if (!isEmpty(imageDataObj)) {
-      const { secure_file_path = '' } = get(imageDataObj, 'metaInfo', {});
-      if (secure_file_path) {
-        setUpdateWebPushImageSrc(secure_file_path);
-      }
-    }
-  }, [webPush, setUpdateWebPushImageSrc]);
-
-  // Brand icon handlers
-  const handleBrandIconChange = useCallback((e) => {
-    const option = e.target.value;
-    setBrandIconOption(option);
-    setBrandIconSrc('');
-    setBrandIconUrl('');
-  }, []);
-
-  const setUpdateWebPushBrandIconSrc = useCallback(
-    (filePath) => {
-      setBrandIconSrc(filePath);
-      webPushActions.clearWebPushAsset(1);
-    },
-    [webPushActions],
-  );
-
-  const updateOnWebPushBrandIconReUpload = useCallback(() => {
-    setBrandIconSrc('');
-  }, []);
-
-  const uploadWebPushBrandIconAsset = (file, type, fileParams) => {
-    setActiveUploadField(UPLOAD_FIELD_TYPES.BRAND_ICON);
-    webPushActions.uploadWebPushAsset(file, type, fileParams, 1);
-  };
-
-  const handleBrandIconUrlChange = useCallback((url) => {
-    setBrandIconUrl(url);
-    // Clear brandIconSrc when URL changes
-    if (url !== brandIconUrl) {
-      setBrandIconSrc('');
-    }
-  }, [brandIconUrl]);
-
-  const handleBrandIconValidationStateChange = useCallback((isValidating) => {
-    setIsBrandIconValidating(isValidating);
-  }, []);
-
-  const handleBrandIconUploadStateChange = useCallback((isUploading) => {
-    setIsBrandIconUploading(isUploading);
-  }, []);
-
-  // Restore brand icon from uploaded asset data
-  useEffect(() => {
-    const brandIconDataObj = get(webPush, 'uploadedAssetData1');
-    if (!isEmpty(brandIconDataObj)) {
-      const { secure_file_path = '' } = get(brandIconDataObj, 'metaInfo', {});
-      if (secure_file_path) {
-        setUpdateWebPushBrandIconSrc(secure_file_path);
-      }
-    }
-  }, [webPush, setUpdateWebPushBrandIconSrc]);
-
-
-  // Render character count for notification title
-  const renderTitleCharacterCount = (className = "webpush-character-count") => {
-    if (!SHOW_CHARACTER_COUNT) return null;
-
-    const maxLength = NOTIFICATION_TITLE_MAX_LENGTH;
-
-    return (
-      <CapLabel type="label2" className={className}>
-        <span ref={titleCountRef}>
-          {formatMessage(messages.characterCount, {
-            currentLength: notificationTitle.length,
-            maxLength,
-          })}
-        </span>
-      </CapLabel>
-    );
-  };
-
-  // Render character count for message
-  const renderMessageCharacterCount = (className = "webpush-character-count") => {
-    if (!SHOW_CHARACTER_COUNT) return null;
-
-    const maxLength = MESSAGE_MAX_LENGTH;
-
-    return (
-      <CapLabel type="label2" className={className}>
-        <span ref={messageCountRef}>
-          {formatMessage(messages.characterCount, {
-            currentLength: message.length,
-            maxLength,
-          })}
-        </span>
-      </CapLabel>
-    );
-  };
-
-  const handleOnClickBehaviourChange = useCallback((e) => {
-    const value = e.target.value;
-    setOnClickBehaviour(value);
-    if (value !== ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL) {
-      setRedirectUrl('');
-      setRedirectUrlError('');
-    }
-  }, []);
-
-  const handleRedirectUrlChange = useCallback((e) => {
-    const { value } = e.target;
-    setRedirectUrl(value);
-    const nextError = validateUrl(value);
-    setRedirectUrlError((prev) => (prev === nextError ? prev : nextError));
-  }, [validateUrl]);
-
-  // Optimized tag insertion handlers - split into separate callbacks
-  const handleTagSelectTitle = useCallback((tagValue) => {
-    const tagText = `{{${tagValue}}}`;
-    setNotificationTitle((prevTitle) => {
-      const nextTitle = `${prevTitle}${tagText}`.slice(0, NOTIFICATION_TITLE_MAX_LENGTH);
-      // Use functional updates to avoid dependency on notificationTitle
-      const nextError = validateTitle(nextTitle);
-      setTitleError((prev) => (prev === nextError ? prev : nextError));
-      updateFieldCompletion('notificationTitle', nextTitle.trim().length > 0);
-      updateCharacterCount(titleCountRef, nextTitle.length, NOTIFICATION_TITLE_MAX_LENGTH);
-      return nextTitle;
-    });
-  }, [updateCharacterCount, updateFieldCompletion, validateTitle]);
-
-  const handleTagSelectMessage = useCallback((tagValue) => {
-    const tagText = `{{${tagValue}}}`;
-    setMessage((prevMessage) => {
-      const nextMessage = `${prevMessage}${tagText}`.slice(0, MESSAGE_MAX_LENGTH);
-      // Use functional updates to avoid dependency on message
-      const nextError = validateMessageContent(nextMessage);
-      setMessageError((prev) => (prev === nextError ? prev : nextError));
-      updateFieldCompletion('message', nextMessage.trim().length > 0);
-      updateCharacterCount(messageCountRef, nextMessage.length, MESSAGE_MAX_LENGTH);
-      return nextMessage;
-    });
-  }, [updateCharacterCount, updateFieldCompletion, validateMessageContent]);
-
-  // Button handlers
-  const handleAddPrimaryButton = useCallback(() => {
-    setIsAddingButton(true);
-    setButtonBeingAdded(WEBPUSH_BUTTON_TYPES.PRIMARY);
-    setEditingButtonIndex(null);
-  }, []);
-
-  const handleAddSecondaryButton = useCallback(() => {
-    setIsAddingButton(true);
-    setButtonBeingAdded(WEBPUSH_BUTTON_TYPES.SECONDARY);
-    setEditingButtonIndex(null);
-  }, []);
-
-  const handleButtonSave = useCallback((buttonData) => {
-    if (editingButtonIndex !== null) {
-      // Editing existing button
-      const newButtons = [...buttons];
-      newButtons[editingButtonIndex] = buttonData;
-      setButtons(newButtons);
-    } else {
-      // Adding new button
-      setButtons((prev) => [...prev, buttonData]);
-    }
-    setIsAddingButton(false);
-    setButtonBeingAdded(null);
-    setEditingButtonIndex(null);
-  }, [buttons, editingButtonIndex]);
-
-  const handleButtonCancel = useCallback(() => {
-    setIsAddingButton(false);
-    setButtonBeingAdded(null);
-    setEditingButtonIndex(null);
-  }, []);
-
-  const handleButtonEdit = useCallback((index) => {
-    setIsAddingButton(true);
-    setButtonBeingAdded(buttons[index].type);
-    setEditingButtonIndex(index);
-  }, [buttons]);
-
-  const handleButtonDelete = useCallback((index) => {
-    const newButtons = [...buttons];
-    newButtons.splice(index, 1);
-    setButtons(newButtons);
-  }, [buttons]);
-
-  const handleButtonReorder = useCallback((fromIndex, toIndex) => {
-    const newButtons = [...buttons];
-    const [movedButton] = newButtons.splice(fromIndex, 1);
-    newButtons.splice(toIndex, 0, movedButton);
-    setButtons(newButtons);
-  }, [buttons]);
-
-  const isAddFlow = useMemo(
-    () => isAddingButton && editingButtonIndex === null,
-    [isAddingButton, editingButtonIndex],
-  );
-  const isEditFlow = useMemo(
-    () => isAddingButton && editingButtonIndex !== null,
-    [isAddingButton, editingButtonIndex],
-  );
-
-  const showAddPrimaryButton = useMemo(
-    () => buttons.length === 0 && !isAddingButton,
-    [buttons.length, isAddingButton],
-  );
-  const showAddSecondaryButton = useMemo(
-    () => buttons.length === 1 && !isAddingButton,
-    [buttons.length, isAddingButton],
-  );
-  const showDisabledSecondaryDuringPrimary = useMemo(
-    () => isAddFlow && buttonBeingAdded === WEBPUSH_BUTTON_TYPES.PRIMARY && buttons.length === 0,
-    [isAddFlow, buttonBeingAdded, buttons.length],
-  );
-  const disableSecondaryAddButton = useMemo(
-    () => isAddFlow && buttonBeingAdded === WEBPUSH_BUTTON_TYPES.PRIMARY,
-    [isAddFlow, buttonBeingAdded],
-  );
-
-  const renderButtonForm = (isEditMode) => (
-    <ButtonForm
-      buttonType={buttonBeingAdded}
-      formatMessage={formatMessage}
-      onSave={handleButtonSave}
-      onCancel={handleButtonCancel}
-      initialData={isEditMode && editingButtonIndex !== null ? buttons[editingButtonIndex] : null}
-      isEditMode={isEditMode}
-    />
-  );
-
-  useEffect(() => {
-    updateCharacterCount(
-      titleCountRef,
-      notificationTitle.length,
-      NOTIFICATION_TITLE_MAX_LENGTH,
-    );
-    updateCharacterCount(
-      messageCountRef,
-      message.length,
-      MESSAGE_MAX_LENGTH,
-    );
-  }, [updateCharacterCount, notificationTitle, message]);
-
-  useEffect(() => {
-    setFieldCompletion((prev) => {
-      const nextTemplateNameComplete = !isFullMode
-        || templateName.trim().length > 0;
-      if (prev.templateName === nextTemplateNameComplete) {
-        return prev;
-      }
-      return {
-        ...prev,
-        templateName: nextTemplateNameComplete,
-      };
-    });
-  }, [isFullMode, templateName]);
-
-  const isFormValid = () => {
-    const templateNameInvalid = isFullMode && validateTemplateName(templateName);
-    const titleValidation = validateTitle(notificationTitle);
-    const messageValidation = validateMessageContent(message);
-
-    setTemplateNameError((prev) => (prev === templateNameInvalid ? prev : templateNameInvalid));
-    setTitleError((prev) => (prev === titleValidation ? prev : titleValidation));
-    setMessageError((prev) => (prev === messageValidation ? prev : messageValidation));
-
-    return !(templateNameInvalid || titleValidation || messageValidation);
-  };
-
-  const handleSave = () => {
-    if (!isFormValid()) {
-      return;
-    }
-
-    // Set flag to indicate save/edit operation has been initiated
-    saveInitiatedRef.current = true;
-
-    const payload = createWebPushPayload({
-      templateName,
-      notificationTitle,
-      message,
-      mediaType,
-      accountId,
-      isFullMode,
-      imageSrc,
-      imageUrl,
-      imageUploadMethod,
-      brandIconOption,
-      brandIconSrc,
-      brandIconUrl,
-      buttons,
-      onClickBehaviour,
-      redirectUrl,
-      websiteLink,
-    });
-
-    // In library mode (not full mode), use getFormData to communicate with parent
-    if (!isFullMode && getFormData) {
-      const formDataForLibrary = {
-        validity: true,
-        value: payload,
-        type: 'WEBPUSH',
-      };
-      getFormData(formDataForLibrary);
-      if (handleClose) {
-        handleClose();
-      }
-      return;
-    }
-
-    // Full mode: proceed with API calls
-    if (isEditMode) {
-      // Get template ID from params or templateData
-      const templateId = params?.id || templateData?._id;
-      if (templateId) {
-        webPushActions.editTemplate(
-          {
-            ...payload,
-            _id: templateId,
-          },
-          (resp, errorMessage) => {
-            if (!errorMessage) {
-              if (onCreateComplete) {
-                onCreateComplete(true);
-              }
-              if (handleClose) {
-                handleClose();
-              }
-            }
-          },
-        );
-      }
-    } else {
-      webPushActions.createTemplate(payload);
-    }
-  };
-
-  // Clear response state on mount to prevent stale responses from triggering callbacks
-  useEffect(() => {
-    webPushActions.clearCreateResponse();
-    webPushActions.clearEditResponse();
-    saveInitiatedRef.current = false;
-  }, []);
-
-  // Handle create response
-  useEffect(() => {
-    const response = webPush?.response || {};
-    if (
-      response &&
-      Object.keys(response).length > 0 &&
-      !isEditMode &&
-      saveInitiatedRef.current
-    ) {
-      // Reset flag after handling response
-      saveInitiatedRef.current = false;
-      if (onCreateComplete) {
-        onCreateComplete(true);
-      }
-      if (handleClose) {
-        handleClose();
-      }
-    }
-  }, [webPush?.response, onCreateComplete, handleClose, isEditMode]);
-
-  // Handle edit response
-  useEffect(() => {
-    const editResponse = webPush?.editResponse || {};
-    if (
-      editResponse &&
-      Object.keys(editResponse).length > 0 &&
-      isEditMode &&
-      saveInitiatedRef.current
-    ) {
-      // Reset flag after handling response
-      saveInitiatedRef.current = false;
-      if (onCreateComplete) {
-        onCreateComplete(true);
-      }
-      if (handleClose) {
-        handleClose();
-      }
-    }
-  }, [webPush?.editResponse, onCreateComplete, handleClose, isEditMode]);
-
-  // Handle getFormData request from parent (library mode)
-  useEffect(() => {
-    if (isGetFormData && getFormData && isFormValid()) {
-      const payload = createWebPushPayload({
-        templateName,
-        notificationTitle,
-        message,
-        mediaType,
-        accountId,
-        isFullMode,
-        imageSrc,
-        imageUrl,
-        imageUploadMethod,
-        brandIconOption,
-        brandIconSrc,
-        brandIconUrl,
-        buttons,
-        onClickBehaviour,
-        redirectUrl,
-      });
-      const formDataForLibrary = {
-        validity: true,
-        value: payload,
-        type: 'WEBPUSH',
-      };
-      getFormData(formDataForLibrary);
-    }
-  }, [isGetFormData, getFormData, templateName, notificationTitle, message, mediaType, accountId, isFullMode, imageSrc, imageUrl, imageUploadMethod, brandIconOption, brandIconSrc, brandIconUrl, buttons, onClickBehaviour, redirectUrl]);
-
-  const isUploadingAsset = useMemo(
-    () => webPush?.assetUploading || false,
-    [webPush?.assetUploading],
-  );
-
-  // Track which field is currently controlling uploads/validation
-  useEffect(() => {
-    if (isImageValidating || isImageUploading) {
-      setActiveUploadField(UPLOAD_FIELD_TYPES.IMAGE);
-      return;
-    }
-    if (isBrandIconValidating || isBrandIconUploading) {
-      setActiveUploadField(UPLOAD_FIELD_TYPES.BRAND_ICON);
-      return;
-    }
-    if (!isUploadingAsset) {
-      setActiveUploadField(null);
-    }
-  }, [
-    isImageValidating,
-    isImageUploading,
-    isBrandIconValidating,
-    isBrandIconUploading,
-    isUploadingAsset,
-  ]);
-
-  const isImageFieldActive = useMemo(
-    () => (
-      isImageValidating
-      || isImageUploading
-      || (isUploadingAsset && activeUploadField === UPLOAD_FIELD_TYPES.IMAGE)
-    ),
-    [
-      isImageValidating,
-      isImageUploading,
-      isUploadingAsset,
-      activeUploadField,
-    ],
-  );
-
-  const isBrandIconFieldActive = useMemo(
-    () => (
-      isBrandIconValidating
-      || isBrandIconUploading
-      || (isUploadingAsset && activeUploadField === UPLOAD_FIELD_TYPES.BRAND_ICON)
-    ),
-    [
-      isBrandIconValidating,
-      isBrandIconUploading,
-      isUploadingAsset,
-      activeUploadField,
-    ],
-  );
-
-  const isAnyUploadActive = useMemo(
-    () => isImageFieldActive || isBrandIconFieldActive,
-    [isImageFieldActive, isBrandIconFieldActive],
-  );
-
-  const isMediaSectionLocked = useMemo(
-    () => isBrandIconFieldActive,
-    [isBrandIconFieldActive],
-  );
-
-  const isBrandIconSectionLocked = useMemo(
-    () => isImageFieldActive,
-    [isImageFieldActive],
-  );
-
-  // Optimize tagListCommonProps - split into stable and dynamic parts
-  const moduleFilterEnabled = useMemo(
-    () => location?.query?.type !== 'embedded',
-    [location?.query?.type],
-  );
-
-  const tagListLabel = useMemo(
-    () => formatMessage(messages.addLabels),
-    [formatMessage],
-  );
-
-  // Stable props that don't change often
-  const tagListStableProps = useMemo(
-    () => ({
-      moduleFilterEnabled,
-      label: tagListLabel,
-      onContextChange: handleOnTagsContextChange,
-      location,
-    }),
-    [moduleFilterEnabled, tagListLabel, handleOnTagsContextChange, location],
-  );
-
-  // Dynamic props that change with tags
-  const tagListDynamicProps = useMemo(
-    () => ({
-      tags,
-      injectedTags,
-      selectedOfferDetails,
-      eventContextTags,
-      forwardedTags,
-    }),
-    [tags, injectedTags, selectedOfferDetails, eventContextTags, forwardedTags],
-  );
-
-  // Memoized TagList components with optimized props
-  const titleTagList = useMemo(
-    () => (
-      <MemoizedTagList
-        {...tagListStableProps}
-        {...tagListDynamicProps}
-        onTagSelect={handleTagSelectTitle}
-      />
-    ),
-    [tagListStableProps, tagListDynamicProps, handleTagSelectTitle],
-  );
-
-  const messageTagList = useMemo(
-    () => (
-      <MemoizedTagList
-        {...tagListStableProps}
-        {...tagListDynamicProps}
-        onTagSelect={handleTagSelectMessage}
-      />
-    ),
-    [tagListStableProps, tagListDynamicProps, handleTagSelectMessage],
-  );
-
-  const isSaveDisabled = useMemo(
-    () => (
-      createTemplateInProgress
-      || editTemplateInProgress
-      || isUploadingAsset
-      || isImageValidating
-      || isImageUploading
-      || isBrandIconValidating
-      || isBrandIconUploading
-      || isAddingButton
-      || (isFullMode && !fieldCompletion.templateName)
-      || !fieldCompletion.notificationTitle
-      || !fieldCompletion.message
-      || !accountId
-      || (
-        mediaType === WEBPUSH_MEDIA_TYPES.IMAGE
-        && (
-          (imageUploadMethod === IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE && !imageSrc)
-          || (imageUploadMethod === IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL && !imageSrc)
-        )
-      )
-      || (
-        brandIconOption !== BRAND_ICON_OPTIONS.DONT_SHOW
-        && (
-          (brandIconOption === BRAND_ICON_OPTIONS.UPLOAD_IMAGE && !brandIconSrc)
-          || (brandIconOption === BRAND_ICON_OPTIONS.ADD_IMAGE_URL && !brandIconSrc)
-        )
-      )
-      || (onClickBehaviour === ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL && (!redirectUrl.trim() || redirectUrlError))
-    ),
-    [
-      createTemplateInProgress,
-      editTemplateInProgress,
-      isUploadingAsset,
-      isImageValidating,
-      isImageUploading,
-      isBrandIconValidating,
-      isBrandIconUploading,
-      isAddingButton,
-      isFullMode,
-      fieldCompletion.templateName,
-      fieldCompletion.notificationTitle,
-      fieldCompletion.message,
-      accountId,
-      mediaType,
-      imageUploadMethod,
-      imageSrc,
-      brandIconOption,
-      brandIconSrc,
-      onClickBehaviour,
-      redirectUrl,
-      redirectUrlError,
-    ],
-  );
-
-  const errorText = useMemo(() => {
-    const error = isEditMode ? editTemplateError : createTemplateError;
-    if (!error) {
-      return '';
-    }
-    if (typeof error === 'string') {
-      return error;
-    }
-    if (error?.message) {
-      return error.message;
-    }
-    if (typeof error?.toJS === 'function') {
-      const errorObject = error.toJS();
-      if (typeof errorObject === 'string') {
-        return errorObject;
-      }
-      if (errorObject?.message) {
-        return errorObject.message;
-      }
-      try {
-        return JSON.stringify(errorObject);
-      } catch (err) {
-        return '';
-      }
-    }
-    try {
-      return JSON.stringify(error);
-    } catch (err) {
-      return '';
-    }
-  }, [createTemplateError, editTemplateError, isEditMode]);
-
-  const accountErrorText = useMemo(
-    () => (!accountId ? formatMessage(messages.accountRequired) : ''),
-    [accountId, formatMessage],
-  );
-  
-  return (
-    <CapRow className="webpush-container">
-      <CapColumn className="content-section" span={14}>
-        {isFullMode && (
-          <CapRow className="input-group creative-name-container">
-            <CapInput
-              id="webpush-template-name-input"
-              className="webpush-template-name-input"
-              label={formatMessage(messages.creativeName)}
-              placeholder={formatMessage(messages.creativeNamePlaceholder)}
-              value={templateName}
-              onChange={handleTemplateNameChange}
-              size="default"
-              status={templateNameError ? 'error' : ''}
-              help={
-                templateNameError
-                  ? formatMessage(messages.emptyTemplateErrorMessage)
-                  : ''
-              }
-            />
-          </CapRow>
-        )}
-        {isFullMode && <CapDivider />}
-        <CapRow className="creatives-webpush-title">
-          <CapRow className="tooltip-add-label-container webpush-title-taglist">
-            {titleTagList}
-          </CapRow>
-          <CapHeading type="h3" className="webpush-title">
-            <FormattedMessage {...messages.notificationTitle} />
-          </CapHeading>
-          <CapInput
-            id="webpush-notification-title-input"
-            value={notificationTitle}
-            onChange={handleNotificationTitleChange}
-            placeholder={formatMessage(messages.notificationTitlePlaceholder)}
-            size="default"
-            isRequired
-            maxLength={NOTIFICATION_TITLE_MAX_LENGTH}
-            errorMessage={
-              titleError && (
-                <CapError className="webpush-template-title-error">
-                  {titleError}
-                </CapError>
-              )
-            }
-          />
-          {renderTitleCharacterCount()}
-        </CapRow>
-        <CapRow className="creatives-webpush-message">
-          <CapRow className="tooltip-add-label-container webpush-message-taglist">
-            {messageTagList}
-          </CapRow>
-          <CapHeading type="h3" className="webpush-message">
-            <FormattedMessage {...messages.message} />
-          </CapHeading>
-          <CapInput.TextArea
-            id="webpush-message-input"
-            value={message}
-            onChange={handleMessageChange}
-            placeholder={formatMessage(messages.messagePlaceholder)}
-            size="default"
-            isRequired
-            autosize={{ minRows: 3, maxRows: 5 }}
-            errorMessage={
-              messageError && (
-                <CapError className="webpush-template-message-error">
-                  {messageError}
-                </CapError>
-              )
-            }
-          />
-          {renderMessageCharacterCount()}
-        </CapRow>
-        <CapDivider className="webpush-message-divider" />
-        <CapRow className="creatives-webpush-media">
-          <CapHeading type="h3" className="webpush-media-type">
-            <FormattedMessage {...messages.mediaType} />
-          </CapHeading>
-          <CapSelect.CapCustomSelect
-            width="100%"
-            className="margin-t-4"
-            options={WEBPUSH_MEDIA_TYPES_OPTIONS}
-            value={mediaType}
-            onChange={handleMediaTypeChange}
-            disabled={isAnyUploadActive}
-          />
-        </CapRow>
-        {mediaType === WEBPUSH_MEDIA_TYPES.IMAGE && (
-          <>
-            <CapRow className="webpush-image-upload-method">
-              <CapRadioGroup
-                options={[
-                  { value: IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE, label: formatMessage(messages.uploadImage) },
-                  { value: IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL, label: formatMessage(messages.addImageUrl) },
-                ]}
-                value={imageUploadMethod}
-                onChange={handleImageUploadMethodChange}
-                disabled={isAnyUploadActive}
-              />
-            </CapRow>
-            {imageUploadMethod === IMAGE_UPLOAD_METHODS.UPLOAD_IMAGE && (
-              <CapRow
-                className="webpush-image-upload-section"
-                style={isMediaSectionLocked ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
-                aria-disabled={isMediaSectionLocked}
-              >
-                {/* Note: image width/height validation will be ignored for the web push channel inside CapImageUpload */}
-                <CapImageUpload
-                  allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
-                  imgSize={WEBPUSH_IMG_SIZE}
-                  uploadAsset={uploadWebPushAsset}
-                  isFullMode={isFullMode}
-                  imageSrc={imageSrc}
-                  updateImageSrc={setUpdateWebPushImageSrc}
-                  updateOnReUpload={updateOnWebPushImageReUpload}
-                  index={0}
-                  className="cap-custom-image-upload"
-                  key="webpush-uploaded-image"
-                  imageData={webPush}
-                  channel={WEBPUSH}
-                  showReUploadButton
-                  recommendedDimensions={WEBPUSH_RECOMMENDED_DIMENSIONS}
-                />
-              </CapRow>
-            )}
-            {imageUploadMethod === IMAGE_UPLOAD_METHODS.ADD_IMAGE_URL && (
-              <CapRow
-                className="webpush-image-url-section"
-                style={isMediaSectionLocked ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
-                aria-disabled={isMediaSectionLocked}
-              >
-                <CapImageUrlUpload
-                  uploadAsset={uploadWebPushAsset}
-                  imgSize={WEBPUSH_IMG_SIZE}
-                  recommendedDimensions={WEBPUSH_RECOMMENDED_DIMENSIONS}
-                  sizeLabel={formatMessage(messages.sizeLimit)}
-                  formatLabel={formatMessage(messages.formatTypes)}
-                  imageUrl={imageUrl}
-                  imageSrc={imageSrc}
-                  onUrlChange={handleImageUrlChange}
-                  onValidationStateChange={handleImageValidationStateChange}
-                  onUploadStateChange={handleImageUploadStateChange}
-                  isExternalUploading={isImageFieldActive && isUploadingAsset}
-                  disabled={isMediaSectionLocked}
-                  className="webpush-image-url-upload"
-                  fileNamePrefix="webpush-image"
-                />
-              </CapRow>
-            )}
-          </>
-        )}
-        <CapDivider />
-        <CapRow className="creatives-webpush-brand-icon">
-          <CapHeading type="h3" className="webpush-brand-icon">
-            <FormattedMessage {...messages.brandIconLogo} />
-          </CapHeading>
-          <CapRadioGroup
-            options={brandIconOptions}
-            value={brandIconOption}
-            onChange={handleBrandIconChange}
-            disabled={isAnyUploadActive}
-          />
-        </CapRow>
-        {brandIconOption === BRAND_ICON_OPTIONS.UPLOAD_IMAGE && (
-          <CapRow
-            className="webpush-brand-icon-upload-section"
-            style={isBrandIconSectionLocked ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
-            aria-disabled={isBrandIconSectionLocked}
-          >
-            {/* Note: image width/height validation will be ignored for the web push channel inside CapImageUpload */}
-            <CapImageUpload
-              allowedExtensionsRegex={ALLOWED_IMAGE_EXTENSIONS_REGEX}
-              imgSize={WEBPUSH_BRAND_ICON_SIZE}
-              uploadAsset={uploadWebPushBrandIconAsset}
-              isFullMode={isFullMode}
-              imageSrc={brandIconSrc}
-              updateImageSrc={setUpdateWebPushBrandIconSrc}
-              updateOnReUpload={updateOnWebPushBrandIconReUpload}
-              index={1}
-              className="cap-custom-image-upload"
-              key="webpush-brand-icon-uploaded-image"
-              imageData={webPush}
-              channel={WEBPUSH_BRAND_ICON}
-              showReUploadButton
-              recommendedDimensions={WEBPUSH_BRAND_ICON_RECOMMENDED_DIMENSIONS}
-            />
-          </CapRow>
-        )}
-        {brandIconOption === BRAND_ICON_OPTIONS.ADD_IMAGE_URL && (
-          <CapRow
-            className="webpush-brand-icon-url-section"
-            style={isBrandIconSectionLocked ? { pointerEvents: 'none', opacity: 0.5 } : undefined}
-            aria-disabled={isBrandIconSectionLocked}
-          >
-            <CapImageUrlUpload
-              uploadAsset={uploadWebPushBrandIconAsset}
-              imgSize={WEBPUSH_BRAND_ICON_SIZE}
-              recommendedDimensions={WEBPUSH_BRAND_ICON_RECOMMENDED_DIMENSIONS}
-              sizeLabel={formatMessage(messages.sizeLimitBrandIcon)}
-              formatLabel={formatMessage(messages.formatTypes)}
-              imageUrl={brandIconUrl}
-              imageSrc={brandIconSrc}
-              onUrlChange={handleBrandIconUrlChange}
-              onValidationStateChange={handleBrandIconValidationStateChange}
-              onUploadStateChange={handleBrandIconUploadStateChange}
-              isExternalUploading={isBrandIconFieldActive && isUploadingAsset}
-              disabled={isBrandIconSectionLocked}
-              className="webpush-brand-icon-url-upload"
-              fileNamePrefix="webpush-brand-icon"
-            />
-          </CapRow>
-        )}
-        <CapDivider />
-        <CapRow className="creatives-webpush-buttons-links">
-          <CapHeading type="h3" className="webpush-buttons-links">
-            <FormattedMessage {...messages.buttonsAndLinks} />{' '}
-            <span className="optional-text">
-              <FormattedMessage {...messages.optional} />
-            </span>
-          </CapHeading>
-          <CapHeading type="h4" className="webpush-on-click-behaviour">
-            <FormattedMessage {...messages.onClickBehaviour} />
-          </CapHeading>
-          <CapRadioGroup
-            options={onClickBehaviourOptions}
-            value={onClickBehaviour}
-            onChange={handleOnClickBehaviourChange}
-          />
-          {onClickBehaviour === ON_CLICK_BEHAVIOUR_OPTIONS.REDIRECT_TO_URL && (
-            <CapInput
-              id="webpush-redirect-url-input"
-              className="webpush-redirect-url-input"
-              placeholder={formatMessage(messages.enterUrl)}
-              value={redirectUrl}
-              onChange={handleRedirectUrlChange}
-              size="default"
-              status={redirectUrlError ? 'error' : ''}
-              help={redirectUrlError || ''}
-            />
-          )}
-        </CapRow>
-        <CapRow className="creatives-webpush-buttons-section">
-          <CapHeading type="h4" className="webpush-buttons-section-heading">
-            <FormattedMessage {...messages.buttons} />
-          </CapHeading>
-          <ButtonList
-            buttons={buttons}
-            onEdit={handleButtonEdit}
-            onDelete={handleButtonDelete}
-            onReorder={handleButtonReorder}
-            onAddPrimary={handleAddPrimaryButton}
-            onAddSecondary={handleAddSecondaryButton}
-            showAddPrimary={false}
-            showAddSecondary={false}
-            disabled={isAddFlow}
-            disableSecondaryButton={disableSecondaryAddButton}
-            isInlineFormVisible={isEditFlow}
-            inlineFormIndex={isEditFlow ? editingButtonIndex : null}
-            renderInlineForm={isEditFlow ? () => renderButtonForm(true) : null}
-          />
-          {isAddFlow && buttonBeingAdded && renderButtonForm(false)}
-          {(showAddPrimaryButton || showAddSecondaryButton || showDisabledSecondaryDuringPrimary) && (
-            <div className="button-add-controls">
-              {showAddPrimaryButton && (
-                <CapButton
-                  type="flat"
-                  onClick={handleAddPrimaryButton}
-                  className="add-primary-button button-add-trigger"
-                  icon="plus"
-                >
-                  <FormattedMessage {...messages.addButton} />
-                </CapButton>
-              )}
-              {showAddSecondaryButton && (
-                <CapButton
-                  type="flat"
-                  onClick={handleAddSecondaryButton}
-                  className="add-secondary-button button-add-trigger"
-                  icon="plus"
-                >
-                  <FormattedMessage {...messages.addButton} />
-                </CapButton>
-              )}
-              {showDisabledSecondaryDuringPrimary && (
-                <CapButton
-                  type="flat"
-                  className="add-secondary-button button-add-trigger"
-                  icon="plus"
-                  disabled
-                >
-                  <FormattedMessage {...messages.addButton} />
-                </CapButton>
-              )}
-            </div>
-          )}
-        </CapRow>
-        <CapRow className="creatives-webpush-actions">
-          <CapButton
-            type="primary"
-            onClick={handleSave}
-            disabled={isSaveDisabled}
-          >
-            {formatMessage(messages.saveTemplate)}
-          </CapButton>
-        </CapRow>
-        {(createTemplateError || editTemplateError) && (
-          <CapRow>
-            <CapError className="webpush-template-error">
-              {errorText}
-            </CapError>
-          </CapRow>
-        )}
-        {accountErrorText && (
-          <CapRow>
-            <CapError className="webpush-template-account-error">
-              {accountErrorText}
-            </CapError>
-          </CapRow>
-        )}
-      </CapColumn>
-      <CapColumn className="preview-section" span={10}>
-        <WebPushPreview
-          notificationTitle={notificationTitle}
-          notificationBody={message}
-          url={previewUrl}
-          imageSrc={imageSrc}
-          brandIconSrc={brandIconSrc}
-        />
-      </CapColumn>
-    </CapRow>
-  );
-};
-
-WebPushCreate.propTypes = {
-  isFullMode: PropTypes.bool,
-  handleClose: PropTypes.func,
-  intl: intlShape.isRequired,
-  webPushActions: PropTypes.object,
-  createTemplateInProgress: PropTypes.bool,
-  createTemplateError: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  editTemplateInProgress: PropTypes.bool,
-  editTemplateError: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  accountData: PropTypes.object,
-  webPush: PropTypes.object,
-  onCreateComplete: PropTypes.func,
-  getFormData: PropTypes.func,
-  isGetFormData: PropTypes.bool,
-  templateData: PropTypes.object,
-  creativesMode: PropTypes.string,
-  params: PropTypes.object,
-  globalActions: PropTypes.object,
-  location: PropTypes.object,
-  metaEntities: PropTypes.object,
-  injectedTags: PropTypes.object,
-  getDefaultTags: PropTypes.string,
-  supportedTags: PropTypes.array,
-  forwardedTags: PropTypes.object,
-  selectedOfferDetails: PropTypes.array,
-  eventContextTags: PropTypes.array,
-};
-
-WebPushCreate.defaultProps = {
-  isFullMode: true,
-  handleClose: () => { },
-  webPushActions: {},
-  createTemplateInProgress: false,
-  createTemplateError: '',
-  accountData: {},
-  webPush: {},
-  onCreateComplete: () => { },
-  getFormData: null,
-  isGetFormData: false,
-  templateData: null,
-  creativesMode: 'createTemplate',
-  params: null,
-  globalActions: {},
-  location: null,
-  metaEntities: null,
-  injectedTags: {},
-  getDefaultTags: '',
-  supportedTags: [],
-  forwardedTags: {},
-  selectedOfferDetails: [],
-  eventContextTags: [],
-};
-
-const mapStateToProps = createStructuredSelector({
-  webPush: makeSelectWebPush(),
-  createTemplateInProgress: makeSelectCreateTemplateInProgress(),
-  createTemplateError: makeSelectCreateError(),
-  editTemplateInProgress: makeSelectEditTemplateInProgress(),
-  editTemplateError: makeSelectEditError(),
-  metaEntities: makeSelectMetaEntities(),
-  injectedTags: setInjectedTags(),
-  accountData: createSelector(
-    (state) => state.get('templates'),
-    (templatesState) => {
-      if (!templatesState) {
-        return {};
-      }
-      const templates = templatesState.toJS();
-      return templates?.selectedWebPushAccount || {};
-    },
-  ),
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  webPushActions: bindActionCreators(actions, dispatch),
-});
-
-const withSaga = injectSaga({
-  key: 'webPush',
-  saga: webPushSagas,
-  mode: DAEMON,
-});
-
-const withReducer = injectReducer({
-  key: 'webPush',
-  reducer: webPushReducer,
-});
-
-export default withCreatives({
-  WrappedComponent: injectIntl(WebPushCreate),
-  mapStateToProps,
-  mapDispatchToProps,
-  userAuth: true,
-  sagas: [withSaga],
-  reducers: [withReducer],
-});
-