@capillarytech/creatives-library 8.0.242-alpha.10 → 8.0.242-alpha.11

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -1,1046 +0,0 @@
-import React, {
-  useState, useEffect, useMemo, useCallback, useRef, useImperativeHandle, forwardRef,
-} from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, FormattedMessage } from 'react-intl';
-import isEmpty from 'lodash/isEmpty';
-import get from 'lodash/get';
-import _ from 'lodash';
-import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
-import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
-import HTMLEditor from '../../../v2Components/HtmlEditor';
-import CapTagListWithInput from '../../../v2Components/CapTagListWithInput';
-import formBuilderMessages from '../../../v2Components/FormBuilder/messages';
-import { validateLiquidTemplateContent } from '../../../utils/commonUtils';
-import { hasLiquidSupportFeature } from '../../../utils/common';
-import history from '../../../utils/history';
-import messages from '../messages';
-import emailMessages from '../../Email/messages';
-import { validateTags } from '../../../utils/tagValidations';
-import {
-  TAG, EMBEDDED, DEFAULT, FULL, LIBRARY,
-} from '../../Whatsapp/constants';
-import { EMAIL } from '../../CreativesContainer/constants';
-
-/**
- * EmailHTMLEditor Component
- *
- * IMPORTANT: This component is ONLY used when supportCKEditor flag is FALSE (new flow).
- * When supportCKEditor is TRUE, the existing Email component with FormBuilder is used (legacy flow).
- *
- * A completely self-contained component for Email HTML Editor that handles:
- * - Tag loading and management
- * - Tag validation
- * - Content editing with HTMLEditor
- * - Template data extraction for edit mode
- * - Save logic (full mode & library mode) with liquid validation
- * - API calls via Email actions/sagas
- *
- * This component is independent and reusable, similar to Whatsapp and InApp channels.
- */
-const EmailHTMLEditor = (props) => {
-  const {
-    intl,
-    location,
-    params,
-    getDefaultTags,
-    supportedTags,
-    metaEntities,
-    injectedTags,
-    globalActions,
-    loadingTags,
-    eventContextTags,
-    forwardedTags,
-    selectedOfferDetails,
-    currentOrgDetails,
-    isReadOnly = false,
-    fetchingLiquidTags = false,
-    createTemplateInProgress = false,
-    fetchingCmsData = false,
-    // Email Redux state
-    Email,
-    // Email actions for API calls
-    emailActions,
-    // Full mode props
-    isFullMode,
-    templateName,
-    showTemplateName,
-    isGetFormData,
-    getFormdata,
-    // Library mode props
-    templateData: templateDataProp,
-    // Uploaded content from zip file
-    EmailLayout,
-    // Liquid validation
-    getLiquidTags,
-    showLiquidErrorInFooter,
-    onValidationFail,
-    // Preview/Test
-    // Parent loading control
-    setIsLoadingContent,
-    forwardedRef,
-  } = props;
-
-
-  const { formatMessage } = intl;
-
-  // State for content and subject
-  const [htmlContent, setHtmlContent] = useState('');
-  const [loadedHtmlContent, setLoadedHtmlContent] = useState(''); // Stable content for HTMLEditor initialization
-  const [subject, setSubject] = useState('');
-  const [subjectError, setSubjectError] = useState('');
-  // State for template name (extracted from template data in Edit mode)
-  const [extractedTemplateName, setExtractedTemplateName] = useState('');
-  const [tagValidationError, setTagValidationError] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  // Refs for tracking initialization and previous values
-  const contentInitializedRef = useRef(false);
-  const subjectInitializedRef = useRef(false);
-  const lastTemplateIdRef = useRef(null);
-  const fetchingTemplateIdRef = useRef(null); // Track which template we're currently fetching
-  const prevIsGetFormDataRef = useRef(false);
-
-  // Compute tags directly from metaEntities (same approach as Email component)
-  // Use deep equality check to prevent TagList from re-processing when tags haven't actually changed
-  // This fixes the slow expansion and React Intl errors when clicking nested tags
-  const tags = useMemo(() => {
-    let tagList = get(metaEntities, 'tags.standard', []);
-    const { type, module } = location?.query || {};
-    if (type === EMBEDDED && module === LIBRARY && !getDefaultTags) {
-      tagList = supportedTags || [];
-    }
-    return tagList;
-  }, [metaEntities, supportedTags, location, getDefaultTags]);
-
-  // Expose method to get formData for TestAndPreviewSlidebox
-  useImperativeHandle(forwardedRef, () => ({
-    getFormDataForPreview: () => {
-      const baseLanguage = get(currentOrgDetails, 'basic_details.base_language', 'en');
-      return {
-        "0": {
-          [baseLanguage]: {
-            'template-content': htmlContent || '',
-            'is_drag_drop': false,
-          },
-          activeTab: baseLanguage,
-          selectedLanguages: [baseLanguage],
-          base: true,
-        },
-        'template-subject': subject || '',
-      };
-    },
-    getContentForPreview: () => htmlContent || '',
-  }), [htmlContent, subject, currentOrgDetails]);
-
-  // Check if liquid support is enabled
-  const isLiquidEnabled = hasLiquidSupportFeature();
-
-  // Detect edit mode
-  const hasParamsId = params?.id || location?.query?.id || location?.params?.id || location?.pathname?.includes('/edit/');
-  const currentTemplateId = templateDataProp?._id || params?.id || location?.query?.id || location?.params?.id
-    || location?.pathname?.match(/\/edit\/([^/]+)/)?.[1];
-  const isEditMode = !!currentTemplateId || !!hasParamsId;
-
-  // Load tags on component mount
-  useEffect(() => {
-    const { type, module } = location?.query || {};
-    const isEmbedded = type === EMBEDDED;
-    const query = {
-      layout: EMAIL,
-      type: TAG,
-      context: isEmbedded ? module : DEFAULT,
-      embedded: isEmbedded ? type : FULL,
-    };
-    if (getDefaultTags) {
-      query.context = getDefaultTags;
-    }
-    if (globalActions && globalActions.fetchSchemaForEntity) {
-      globalActions.fetchSchemaForEntity(query);
-    }
-  }, []);
-
-  // Initialize content from EmailLayout (uploaded zip) in create mode
-  useEffect(() => {
-    // Only check EmailLayout in create mode (not edit mode)
-    if (isEditMode) {
-      return;
-    }
-
-    // Check if EmailLayout has content from zip upload
-    if (EmailLayout) {
-      // EmailLayout can be a string (HTML content) or an object with html property
-      const uploadedContent = typeof EmailLayout === 'string'
-        ? EmailLayout
-        : (EmailLayout.html || EmailLayout.content || '');
-
-      if (uploadedContent) {
-        // IMPORTANT: Set both htmlContent and loadedHtmlContent for ZIP upload
-        // loadedHtmlContent is used by HTMLEditor's initialContent prop
-        setHtmlContent(uploadedContent);
-        setLoadedHtmlContent(uploadedContent);
-        setIsLoading(false);
-        if (setIsLoadingContent) {
-          setIsLoadingContent(false);
-        }
-      } else {
-        // No uploaded content, stop loading
-        setIsLoading(false);
-        if (setIsLoadingContent) {
-          setIsLoadingContent(false);
-        }
-      }
-    } else {
-      // No EmailLayout, stop loading
-      setIsLoading(false);
-      if (setIsLoadingContent) {
-        setIsLoadingContent(false);
-      }
-    }
-  }, [EmailLayout, isEditMode, setIsLoadingContent]);
-
-  // Edit mode: Extract template data and load content/subject
-  useEffect(() => {
-    if (!isEditMode) {
-      // Create mode: stop loading immediately
-      setIsLoading(false);
-      return;
-    }
-
-    const templateDataFromRedux = Email?.templateDetails || Email?.BEETemplate;
-    const isTemplateLoading = Email?.getTemplateDetailsInProgress || Email?.fetchingCmsData;
-
-    // Check if template ID changed (switching templates)
-    const templateIdChanged = currentTemplateId
-      && lastTemplateIdRef.current
-      && currentTemplateId !== lastTemplateIdRef.current;
-
-    // Reset refs when switching templates
-    if (templateIdChanged) {
-      contentInitializedRef.current = false;
-      subjectInitializedRef.current = false;
-      lastTemplateIdRef.current = currentTemplateId;
-      setHtmlContent('');
-      setSubject('');
-      setExtractedTemplateName('');
-    }
-
-    // Set last template ID on first load
-    if (currentTemplateId && !lastTemplateIdRef.current) {
-      lastTemplateIdRef.current = currentTemplateId;
-    }
-
-    // Check if templateDataProp has complete data
-    // Check if templateDataProp has complete data (must have actual content string)
-    const hasCompleteTemplateData = templateDataProp && (
-      (templateDataProp.emailBody || templateDataProp.html_content || templateDataProp['template-content'])
-      || (templateDataProp.base && (templateDataProp.base.html_content || templateDataProp.base.emailBody || templateDataProp.base['template-content']))
-      || (templateDataProp.versions?.base && (
-        // Check active tab content in versions
-        (() => {
-          const { base } = templateDataProp.versions;
-          const activeTab = base.activeTab || 'en';
-          const langData = base[activeTab] || {};
-          return langData['template-content'] || langData.html_content || base.html_content || base.emailBody;
-        })()
-      ))
-    );
-    if (hasCompleteTemplateData && !contentInitializedRef.current) {
-      let extractedContent = '';
-      let extractedSubject = '';
-      let extractedName = '';
-
-      if (templateDataProp.base) {
-        extractedContent = templateDataProp.base['template-content'] || templateDataProp.base.html_content || templateDataProp.base.emailBody || '';
-        extractedSubject = templateDataProp.base.subject || templateDataProp.base.emailSubject || '';
-      } else if (templateDataProp.versions && templateDataProp.versions.base) {
-        const { base } = templateDataProp.versions;
-        const activeTab = base.activeTab || 'en';
-        const languageData = base[activeTab] || {};
-
-        extractedContent = languageData['template-content']
-          || languageData.html_content
-          || base.html_content
-          || base.emailBody
-          || '';
-
-        extractedSubject = base.subject || base.emailSubject || '';
-      } else {
-        extractedContent = templateDataProp['template-content'] || templateDataProp.emailBody || templateDataProp.html_content || '';
-        extractedSubject = templateDataProp.emailSubject || templateDataProp.subject || '';
-      }
-
-      // Extract template name from templateDataProp
-      extractedName = templateDataProp.name || get(templateDataProp, 'versions.base.name') || '';
-
-      // IMPORTANT: Set both htmlContent and loadedHtmlContent
-      // loadedHtmlContent is used by HTMLEditor's initialContent prop
-      setHtmlContent(extractedContent);
-      setLoadedHtmlContent(extractedContent);
-      setSubject(extractedSubject);
-      setExtractedTemplateName(extractedName);
-      contentInitializedRef.current = true;
-      subjectInitializedRef.current = true;
-      setIsLoading(false);
-      if (setIsLoadingContent) {
-        setIsLoadingContent(false);
-      }
-      return;
-    }
-
-    if (currentTemplateId && emailActions?.getTemplateDetails && !isTemplateLoading) {
-      const isTemplateIdChanged = lastTemplateIdRef.current !== currentTemplateId;
-      const needsContent = !contentInitializedRef.current;
-      const alreadyFetching = fetchingTemplateIdRef.current === currentTemplateId;
-      const shouldFetch = (isTemplateIdChanged || needsContent) && !alreadyFetching;
-
-      // Fetch fresh data when template ID changes OR when we don't have content loaded yet
-      // BUT only if we're not already fetching this template
-      if (shouldFetch) {
-        fetchingTemplateIdRef.current = currentTemplateId; // Mark as fetching
-        emailActions.getTemplateDetails(currentTemplateId, 'email');
-        lastTemplateIdRef.current = currentTemplateId;
-      }
-    }
-
-    // **IMPORTANT: Clear stale Redux data in create mode**
-    // When not in edit mode (create mode), clear any existing template data from Redux
-    // This prevents previous template data from persisting when switching from Edit to Create
-    if (!currentTemplateId && !isEditMode && (templateDataFromRedux?._id || templateDataFromRedux?.name)) {
-      // Clear stale template data - component will handle via resetTemplateData or clearAllValues
-      if (emailActions?.clearAllValues) {
-        emailActions.clearAllValues();
-      }
-      // Reset component state to ensure clean slate for create mode
-      setExtractedTemplateName('');
-      contentInitializedRef.current = false;
-      subjectInitializedRef.current = false;
-      lastTemplateIdRef.current = null;
-    }
-
-    // Stop loading if template is loading
-    if (isTemplateLoading) {
-      return;
-    }
-
-    // Extract from Redux data
-    const hasTemplateDataFromRedux = templateDataFromRedux
-      && (templateDataFromRedux._id || templateDataFromRedux.name || templateDataFromRedux.versions);
-
-    if (hasTemplateDataFromRedux && currentTemplateId) {
-      const reduxTemplateId = templateDataFromRedux?._id;
-
-      if (reduxTemplateId === currentTemplateId) {
-        const baseData = get(templateDataFromRedux, 'versions.base') || get(templateDataFromRedux, 'base') || {};
-        const activeTab = baseData.activeTab
-          || get(currentOrgDetails, 'basic_details.base_language', 'en');
-        const languageData = baseData[activeTab] || {};
-
-        const extractedContent = languageData['template-content']
-          || languageData.html_content
-          || baseData.html_content
-          || baseData['template-content']
-          || get(templateDataFromRedux, 'html_content')
-          || get(templateDataFromRedux, 'template-content')
-          || '';
-
-        const extractedSubject = baseData.subject
-          || get(templateDataFromRedux, 'subject')
-          || get(templateDataFromRedux, 'versions.base.subject')
-          || '';
-
-        // Extract template name from Redux data
-        const extractedName = templateDataFromRedux.name || '';
-
-        // Smart update logic:
-        // 1. Always update loadedHtmlContent if Redux data is different (keep sync with backend)
-        // 2. Update htmlContent ONLY if it matches the OLD loadedHtmlContent (user hasn't edited)
-        //    OR if it's the first initialization
-        if (extractedContent !== loadedHtmlContent) {
-          setLoadedHtmlContent(extractedContent);
-
-          if (!contentInitializedRef.current || htmlContent === loadedHtmlContent) {
-            setHtmlContent(extractedContent);
-            setSubject(extractedSubject);
-            setExtractedTemplateName(extractedName);
-          }
-        } else if (!contentInitializedRef.current) {
-          // First load, even if content matches (e.g. empty), ensure we set state
-          setHtmlContent(extractedContent);
-          setLoadedHtmlContent(extractedContent);
-          setSubject(extractedSubject);
-          setExtractedTemplateName(extractedName);
-        }
-
-        contentInitializedRef.current = true;
-        subjectInitializedRef.current = true;
-
-        // Only clear fetching ref if we are not loading anymore
-        // This prevents race conditions where we load stale data while real fetch is pending
-        if (!isTemplateLoading) {
-          fetchingTemplateIdRef.current = null;
-        }
-      }
-
-      setIsLoading(false);
-      if (setIsLoadingContent) {
-        setIsLoadingContent(false);
-      }
-      return;
-    }
-
-    // Fallback: stop loading anyway
-    if (!isTemplateLoading && !hasTemplateDataFromRedux && !hasCompleteTemplateData) {
-      setHtmlContent('');
-      setLoadedHtmlContent(''); // Set stable loaded content
-      setSubject('');
-      setExtractedTemplateName('');
-      setIsLoading(false);
-      if (setIsLoadingContent) {
-        setIsLoadingContent(false);
-      }
-    }
-  }, [
-    Email?.templateDetails,
-    Email?.BEETemplate,
-    Email?.getTemplateDetailsInProgress,
-    Email?.fetchingCmsData,
-    templateDataProp,
-    currentTemplateId,
-    isEditMode,
-    emailActions,
-    currentOrgDetails,
-  ]);
-
-  // Handle loading state
-  useEffect(() => {
-    const isAnyApiInProgress = loadingTags || fetchingLiquidTags || createTemplateInProgress || fetchingCmsData;
-
-    // Stop loading when no API is in progress and tags are loaded
-    // Use optional chaining to safely access tags
-    if (!isAnyApiInProgress && Array.isArray(tags) && tags?.length >= 0) {
-      setIsLoading(false);
-    } else if (isAnyApiInProgress) {
-      setIsLoading(true);
-    }
-  }, [loadingTags, tags, fetchingLiquidTags, createTemplateInProgress, fetchingCmsData]);
-
-  // Handle content change from HTMLEditor
-  const handleContentChange = useCallback((content) => {
-    setHtmlContent(content);
-
-    // Validate tags
-    if (tags.length > 0 || !isEmpty(injectedTags)) {
-      const validationResult = validateTags({
-        content,
-        tagsParam: tags,
-        injectedTagsParams: injectedTags,
-        location,
-        tagModule: getDefaultTags,
-        eventContextTags,
-      });
-
-      if (!validationResult.valid) {
-        setTagValidationError(validationResult);
-      } else {
-        setTagValidationError(null);
-      }
-    }
-  }, [tags, injectedTags, location, getDefaultTags, eventContextTags]);
-
-  // Handle tag insertion into Subject field
-  const handleSubjectTagSelect = useCallback((data) => {
-    if (data) {
-      const tagToInsert = `{{${data}}}`;
-      const input = document.getElementById('template-subject') || document.querySelector('#template-subject input');
-      let subjectValue = subject || '';
-      try {
-        if (input && (typeof input.selectionStart === 'number')) {
-          const startPos = input.selectionStart;
-          const endPos = input.selectionEnd;
-          subjectValue = `${subjectValue.substring(0, startPos)}${tagToInsert}${subjectValue.substring(endPos)}`;
-          setSubject(subjectValue);
-          try {
-            input.focus();
-            const newPos = startPos + tagToInsert.length;
-            input.selectionStart = newPos;
-            input.selectionEnd = newPos;
-          } catch (e) {
-            // Ignore focus errors
-          }
-        } else {
-          subjectValue = `${subjectValue}${tagToInsert}`;
-          setSubject(subjectValue);
-          if (input) {
-            try {
-              input.value = subjectValue;
-            } catch (e) {
-              // Ignore value setting errors
-            }
-          }
-        }
-      } catch (e) {
-        // Fallback: safe append
-        subjectValue = `${subjectValue}${tagToInsert}`;
-        setSubject(subjectValue);
-      }
-    }
-  }, [subject]);
-
-  // Handle subject change
-  const handleSubjectChange = useCallback((e) => {
-    const newSubject = e.target.value;
-    setSubject(newSubject);
-    if (newSubject && subjectError) {
-      setSubjectError('');
-    }
-  }, [subjectError]);
-
-  // Handle Save/Update with liquid validation
-  const handleSave = useCallback(() => {
-    // 1. Validate Subject - BLOCKING (matches CK/BEE behavior)
-    if (!subject || !subject.trim()) {
-      const errorMessage = formatMessage(emailMessages["Email Subject cannot be empty."]);
-      setSubjectError(errorMessage);
-      // Reset parent state so next click is detected as a change
-      if (onValidationFail) {
-        onValidationFail();
-      }
-      // IMPORTANT: Return here to block save - matches CK/BEE editor behavior
-      return;
-    }
-    // Clear error if subject is valid
-    if (subjectError) {
-      setSubjectError('');
-    }
-
-
-    // 2. Validate Content Tags
-    // For NON-liquid orgs: BLOCKING validation (matches CK/BEE behavior)
-    // For liquid orgs: Non-blocking (extractTags API will validate)
-    if (tags.length > 0 || !isEmpty(injectedTags)) {
-      const validationResult = validateTags({
-        content: htmlContent,
-        tagsParam: tags,
-        injectedTagsParams: injectedTags,
-        location,
-        tagModule: getDefaultTags,
-        eventContextTags,
-      });
-
-      const hasUnsupportedTags = validationResult?.unsupportedTags?.length > 0;
-      if (!validationResult?.valid || hasUnsupportedTags) {
-        setTagValidationError(validationResult);
-
-        // IMPORTANT: For non-liquid orgs, block save (like CK/BEE editor)
-        // For liquid orgs, continue (extractTags API will validate)
-        if (!isLiquidEnabled) {
-          // Show notification popup like CK/BEE editor
-          const baseLanguage = get(currentOrgDetails, 'basic_details.base_language', 'en');
-
-          const contentNotValidMsg = intl.formatMessage(formBuilderMessages.contentNotValidLanguage);
-          let errorMessage = `${contentNotValidMsg} ${baseLanguage}`;
-
-          if (hasUnsupportedTags) {
-            const unsupportedTagsMsg = intl.formatMessage(formBuilderMessages.unsupportedTags);
-            errorMessage += `\n${unsupportedTagsMsg} ${validationResult?.unsupportedTags?.join(', ')}`;
-          }
-          if (validationResult?.missingTags?.length > 0) {
-            const missingTagsMsg = intl.formatMessage(formBuilderMessages.missingTags);
-            errorMessage += `\n${missingTagsMsg} ${validationResult?.missingTags?.join(', ')}`;
-          }
-
-          const type = 'error';
-          CapNotification[type]({
-            message: `${type.toUpperCase()} ! ! ! `,
-            description: errorMessage,
-            duration: 5,
-          });
-
-          // Reset parent state so next click is detected as a change
-          if (onValidationFail) {
-            onValidationFail();
-          }
-          // Block save for non-liquid orgs
-          return;
-        }
-        // For liquid orgs, just show warning and continue
-      } else {
-        // Clear tag errors if valid
-        if (tagValidationError) {
-          setTagValidationError(null);
-        }
-      }
-    }
-
-
-    const baseLanguage = get(currentOrgDetails, 'basic_details.base_language', 'en');
-
-    // Actual save function - called after liquid validation (if enabled) or directly
-    const performSave = () => {
-      if (isFullMode) {
-        // Full mode: Call email actions directly
-        const templateDataFromRedux = Email?.templateDetails || Email?.BEETemplate;
-        // IMPORTANT: Only use currentTemplateId from URL/params - don't fallback to Redux data
-        // which might be stale from previous template in create mode
-        const templateId = currentTemplateId;
-        const isEditModeForSave = !!templateId;
-
-        const langId = get(currentOrgDetails, `basic_details.languages.${baseLanguage}.lang_id`, '');
-        const language = get(currentOrgDetails, `basic_details.languages.${baseLanguage}.language`, baseLanguage);
-
-        // Generate or reuse tabKey
-        let tabKey = _.uniqueId();
-        if (isEditMode && templateDataFromRedux) {
-          const existingTabKey = get(templateDataFromRedux, 'versions.base.tabKey')
-            || get(templateDataFromRedux, 'base.tabKey');
-          if (existingTabKey) {
-            tabKey = existingTabKey;
-          }
-        }
-
-        const languageData = {
-          'template-content': htmlContent || '',
-          "is_drag_drop": false,
-          "drag_drop_id": '',
-          "lang_id": langId,
-          "iso_code": baseLanguage,
-          "language": language,
-          "tabKey": tabKey,
-        };
-
-        const baseStructure = {
-          [baseLanguage]: languageData,
-          activeTab: baseLanguage,
-          selectedLanguages: [baseLanguage],
-          base: true,
-          tabKey,
-          subject: subject || '',
-        };
-
-        const historyEntry = {
-          [baseLanguage]: { ...languageData },
-          activeTab: baseLanguage,
-          selectedLanguages: [baseLanguage],
-          base: true,
-          tabKey,
-          subject: subject || '',
-        };
-
-        const finalTemplateName = isEditModeForSave ? (extractedTemplateName || '') : (templateName || '');
-
-        const obj = {
-          type: EMAIL,
-          // In Edit mode, use extractedTemplateName; in Create mode, use templateName prop
-          name: finalTemplateName,
-          versions: {
-            base: baseStructure,
-            history: [historyEntry],
-          },
-        };
-
-        if (isEditModeForSave && templateId) {
-          obj._id = templateId;
-        }
-
-        if (emailActions?.transformEmailTemplate && emailActions?.createTemplate) {
-          emailActions.transformEmailTemplate(obj, (newEmail) => {
-            emailActions.createTemplate(newEmail, (createResponse) => {
-              // Handle error response (from 409 or other failures)
-              if (createResponse?.error) {
-                // Error already shown by Email component via stopValidation
-                // Just reset parent state so next click is detected
-                if (onValidationFail) {
-                  onValidationFail();
-                }
-                return;
-              }
-
-              // Handle success response
-              if (createResponse && createResponse.templateId) {
-                const successMessage = formatMessage(emailMessages.emailCreateSuccess);
-                CapNotification.success({ message: successMessage, key: 'create-template-success' });
-
-                const module = location?.query?.module || 'default';
-                const type = location?.query?.type;
-                const isLanguageSupport = location?.query?.isLanguageSupport || false;
-                const isBEESupport = (location?.query?.isBEESupport !== "false") || false;
-
-                if (getFormdata) {
-                  const { versions, ...rest } = createResponse.templateId;
-                  getFormdata({ value: versions, ...rest, validity: true });
-                } else {
-                  const queryParams = type === 'embedded'
-                    ? {
-                      type: 'embedded', module, isLanguageSupport, isBEESupport,
-                    }
-                    : { module, isLanguageSupport, isBEESupport };
-
-                  const searchParams = new URLSearchParams();
-                  Object.keys(queryParams).forEach((key) => {
-                    if (queryParams[key] !== undefined && queryParams[key] !== null) {
-                      searchParams.append(key, queryParams[key]);
-                    }
-                  });
-
-                  history.push({
-                    pathname: '/email',
-                    search: searchParams.toString() ? `?${searchParams.toString()}` : '',
-                  });
-                }
-              }
-            });
-          });
-        }
-      } else {
-        // Library mode: Use getFormdata flow
-        const tmpData = {
-          html_content: htmlContent || '',
-          is_drag_drop: false,
-          lang_id: get(currentOrgDetails, `basic_details.languages.${baseLanguage}.lang_id`, ''),
-          iso_code: baseLanguage,
-          language: get(currentOrgDetails, `basic_details.languages.${baseLanguage}.language`, baseLanguage),
-        };
-
-        const libraryPayload = {
-          base: tmpData,
-          secondary_templates: [{ template_data: tmpData }],
-        };
-        libraryPayload.base.subject = subject || '';
-
-        if (location?.query?.module === 'library' && isGetFormData && getFormdata) {
-          const response = {
-            action: "getFormData",
-            postAction: 'next',
-            id: get(Email, 'templateDetails._id', ''),
-            value: libraryPayload,
-            validity: true,
-            type: EMAIL,
-          };
-          getFormdata(response);
-        } else if (getFormdata) {
-          getFormdata({
-            value: libraryPayload,
-            validity: true,
-            type: EMAIL,
-          });
-        }
-      }
-    };
-
-    // If liquid enabled, validate first using extractTags API
-    if (isLiquidEnabled && getLiquidTags) {
-      const onError = ({ standardErrors, liquidErrors }) => {
-        if (showLiquidErrorInFooter) {
-          showLiquidErrorInFooter({
-            STANDARD_ERROR_MSG: standardErrors || [],
-            LIQUID_ERROR_MSG: liquidErrors || [],
-          });
-        }
-        // Don't reset ref here - liquid validation is async and resetting causes infinite loop
-        // The parent's isGetFormData will be reset by onValidationFail, and the next click will be detected
-        if (onValidationFail) {
-          onValidationFail();
-        }
-      };
-
-      const onSuccess = () => {
-        performSave();
-      };
-
-      validateLiquidTemplateContent(htmlContent || '', {
-        getLiquidTags: getLiquidTags
-          ? (inputContent, callback) => getLiquidTags(inputContent, callback)
-          : (inputContent, callback) => globalActions?.getLiquidTags?.(inputContent, callback),
-        formatMessage: intl.formatMessage,
-        messages: formBuilderMessages,
-        onError,
-        onSuccess,
-        tagLookupMap: metaEntities?.tagLookupMap,
-        eventContextTags,
-        isLiquidFlow: true,
-        forwardedTags: forwardedTags || {},
-      });
-    } else {
-      performSave();
-    }
-  }, [
-    subject,
-    htmlContent,
-    tags,
-    injectedTags,
-    location,
-    getDefaultTags,
-    eventContextTags,
-    formatMessage,
-    subjectError,
-    isFullMode,
-    currentOrgDetails,
-    Email,
-    currentTemplateId,
-    templateDataProp,
-    templateName,
-    emailActions,
-    getFormdata,
-    isGetFormData,
-    isLiquidEnabled,
-    getLiquidTags,
-    showLiquidErrorInFooter,
-    metaEntities,
-    forwardedTags,
-    globalActions,
-    intl,
-    extractedTemplateName,
-  ]);
-
-  // Trigger save when isGetFormData becomes true (Create/Done button clicked)
-  useEffect(() => {
-    const isGetFormDataChanged = isGetFormData && !prevIsGetFormDataRef.current;
-    const wasReset = !isGetFormData && prevIsGetFormDataRef.current;
-
-    if (isGetFormDataChanged) {
-      handleSave();
-    }
-
-    // Reset ref when parent resets isGetFormData (e.g., after validation failure)
-    if (wasReset) {
-      prevIsGetFormDataRef.current = false;
-      return;
-    }
-
-    prevIsGetFormDataRef.current = isGetFormData;
-  }, [isGetFormData, handleSave]);
-
-  // Handle tag context change
-  const handleOnTagsContextChange = useCallback((data) => {
-    const { type, module } = location?.query || {};
-    const isEmbedded = type === EMBEDDED;
-    const contextValue = data || (isEmbedded ? module : DEFAULT);
-    const query = {
-      layout: EMAIL,
-      type: TAG,
-      context: contextValue ? contextValue.toLowerCase() : contextValue,
-      embedded: isEmbedded ? type : FULL,
-    };
-    if (globalActions && globalActions.fetchSchemaForEntity) {
-      globalActions.fetchSchemaForEntity(query);
-    }
-  }, [location, globalActions]);
-
-
-  const spinTip = fetchingLiquidTags ? <FormattedMessage {...formBuilderMessages.liquidSpinText} /> : '';
-
-  // Handle template name change
-  // Call showTemplateName when templateName is available (for CreativesContainer header)
-  // This matches the behavior of Email component which calls showTemplateName in onFormDataChange
-  // In Edit mode, use extractedTemplateName from template data; in Create mode, use templateName prop
-  const { onFormDataChange: onFormDataChangeProp } = props;
-
-  // Create onFormDataChange callback that updates extractedTemplateName in Edit mode
-  // This matches the Email component's onFormDataChange which updates its state
-  const handleFormDataChange = useCallback((updatedFormData) => {
-    const newTemplateName = updatedFormData?.['template-name'] || '';
-
-    // In Edit mode, update extractedTemplateName state (similar to Email component updating its formData state)
-    if (isEditMode && newTemplateName !== extractedTemplateName) {
-      setExtractedTemplateName(newTemplateName);
-    }
-
-    // Call the parent's onFormDataChange if provided
-    if (onFormDataChangeProp) {
-      onFormDataChangeProp(updatedFormData);
-    }
-
-    // Call showTemplateName again with updated formData (same pattern as Email component)
-    if (showTemplateName && isFullMode) {
-      showTemplateName({ formData: updatedFormData, onFormDataChange: handleFormDataChange });
-    }
-  }, [isEditMode, extractedTemplateName, onFormDataChangeProp, showTemplateName, isFullMode]);
-
-  useEffect(() => {
-    if (showTemplateName && isFullMode) {
-      // In Edit mode, use extractedTemplateName; in Create mode, use templateName prop
-      const nameToUse = isEditMode ? extractedTemplateName : templateName;
-      const formData = {
-        'template-name': nameToUse || '',
-      };
-      // Pass handleFormDataChange callback so CreativesContainer can update template name
-      // This is the same pattern used in Email component
-      showTemplateName({ formData, onFormDataChange: handleFormDataChange });
-    }
-  }, [showTemplateName, isFullMode, templateName, extractedTemplateName, isEditMode, handleFormDataChange]);
-
-  return (
-    <CapSpin spinning={isLoading} tip={spinTip}>
-      <CapRow>
-        <CapColumn span={24}>
-          {/* Subject Field */}
-          <CapColumn span={24} style={{ marginBottom: CAP_SPACE_16 }}>
-            <CapTagListWithInput
-              inputId="template-subject"
-              inputValue={subject}
-              inputOnChange={handleSubjectChange}
-              inputPlaceholder={formatMessage(messages.enterEmailSubject)}
-              inputRequired
-              inputErrorMessage={subjectError}
-              headingText={formatMessage(messages.subject)}
-              headingType="h4"
-              headingStyle={{ marginRight: '85%' }}
-              onTagSelect={handleSubjectTagSelect}
-              onContextChange={handleOnTagsContextChange}
-              location={location}
-              tags={tags}
-              injectedTags={injectedTags || {}}
-              selectedOfferDetails={selectedOfferDetails}
-              eventContextTags={eventContextTags}
-              showHeading
-              showTagList
-              showInput
-              containerStyle={{
-                display: 'flex',
-                flexDirection: 'column',
-              }}
-              popoverPlacement="bottomRight"
-            />
-          </CapColumn>
-
-          {/* Tag Validation Error Display */}
-          {/* {tagValidationError && !tagValidationError.valid && (
-            <CapColumn span={24} style={{ marginBottom: CAP_SPACE_16 }}>
-              <CapNotification
-                type="error"
-                message={formatMessage({
-                  id: 'creatives.containersV2.Email.tagValidationError',
-                  defaultMessage: 'Tag validation error',
-                })}
-                description={(
-                  <CapRow>
-                    {tagValidationError?.missingTags?.length > 0 && (
-                      <CapColumn span={24}>
-                        Missing tags:
-                        {' '}
-                        {tagValidationError.missingTags.join(', ')}
-                      </CapColumn>
-                    )}
-                    {tagValidationError?.unsupportedTags?.length > 0 && (
-                      <CapColumn span={24}>
-                        Unsupported tags:
-                        {' '}
-                        {tagValidationError.unsupportedTags.join(', ')}
-                      </CapColumn>
-                    )}
-                    {tagValidationError?.isBraceError && (
-                      <CapColumn span={24}>
-                        Unbalanced brackets detected
-                      </CapColumn>
-                    )}
-                  </CapRow>
-                )}
-              />
-            </CapColumn>
-          )} */}
-
-          <HTMLEditor
-            variant="email"
-            initialContent={loadedHtmlContent || ''}
-            onContentChange={handleContentChange}
-            onSave={handleSave}
-            readOnly={isReadOnly}
-            showFullscreenButton
-            autoSave={false}
-            tags={tags}
-            injectedTags={injectedTags}
-            location={location}
-            eventContextTags={eventContextTags}
-            selectedOfferDetails={selectedOfferDetails}
-            channel={EMAIL}
-            userLocale={intl.locale || 'en'}
-            moduleFilterEnabled={location?.query?.type !== EMBEDDED}
-            onTagContextChange={handleOnTagsContextChange}
-            isLiquidEnabled={isLiquidEnabled}
-            isFullMode={isFullMode}
-          />
-        </CapColumn>
-      </CapRow>
-    </CapSpin>
-  );
-};
-
-EmailHTMLEditor.propTypes = {
-  intl: PropTypes.object.isRequired,
-  location: PropTypes.object,
-  params: PropTypes.object,
-  getDefaultTags: PropTypes.string,
-  supportedTags: PropTypes.array,
-  metaEntities: PropTypes.object,
-  injectedTags: PropTypes.object,
-  globalActions: PropTypes.object,
-  loadingTags: PropTypes.bool,
-  eventContextTags: PropTypes.array,
-  forwardedTags: PropTypes.object,
-  selectedOfferDetails: PropTypes.array,
-  currentOrgDetails: PropTypes.object,
-  isReadOnly: PropTypes.bool,
-  fetchingLiquidTags: PropTypes.bool,
-  createTemplateInProgress: PropTypes.bool,
-  fetchingCmsData: PropTypes.bool,
-  // Email Redux state
-  Email: PropTypes.object,
-  // Email actions
-  emailActions: PropTypes.object,
-  // Full mode props
-  isFullMode: PropTypes.bool,
-  templateName: PropTypes.string,
-  showTemplateName: PropTypes.func,
-  onFormDataChange: PropTypes.func,
-  isGetFormData: PropTypes.bool,
-  getFormdata: PropTypes.func,
-  // Library mode props
-  templateData: PropTypes.object,
-  // Uploaded content from zip file
-  EmailLayout: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), // eslint-disable-line react/require-default-props
-  // Liquid validation
-  getLiquidTags: PropTypes.func,
-  showLiquidErrorInFooter: PropTypes.func,
-  // Preview/Test
-  // Parent loading control
-  setIsLoadingContent: PropTypes.func,
-};
-
-EmailHTMLEditor.defaultProps = {
-  location: {},
-  params: {},
-  getDefaultTags: null,
-  supportedTags: [],
-  showTemplateName: null,
-  metaEntities: {},
-  injectedTags: {},
-  globalActions: {},
-  loadingTags: false,
-  eventContextTags: [],
-  forwardedTags: {},
-  selectedOfferDetails: [],
-  currentOrgDetails: {},
-  isReadOnly: false,
-  fetchingLiquidTags: false,
-  createTemplateInProgress: false,
-  fetchingCmsData: false,
-  Email: {},
-  emailActions: {},
-  isFullMode: false,
-  templateName: '',
-  onFormDataChange: null,
-  isGetFormData: false,
-  getFormdata: null,
-  templateData: null,
-  getLiquidTags: null,
-  showLiquidErrorInFooter: null,
-  setIsLoadingContent: null,
-};
-
-const EmailHTMLEditorWithIntl = injectIntl(EmailHTMLEditor);
-
-export default forwardRef((props, ref) => <EmailHTMLEditorWithIntl {...props} forwardedRef={ref} />);