@capillarytech/creatives-library 8.0.213 → 8.0.214-beta.0

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -0,0 +1,1005 @@
+import React, {
+  useState, useEffect, 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 = forwardRef((props, ref) => {
+  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,
+  } = 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('');
+
+  // State for tags and validation
+  const [tags, setTags] = 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);
+
+  // Expose method to get formData for TestAndPreviewSlidebox
+  useImperativeHandle(ref, () => ({
+    getFormDataForPreview: () => {
+      const baseLanguage = get(currentOrgDetails, 'basic_details.base_language', 'en');
+      return {
+        "0": {
+          [baseLanguage]: {
+            'template-content': htmlContent || '',
+          },
+          activeTab: baseLanguage,
+          selectedLanguages: [baseLanguage],
+          base: true,
+        },
+        'template-subject': subject || '',
+      };
+    },
+    getContentForPreview: () => htmlContent || '',
+  }));
+
+  // 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 = 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);
+    }
+  }, []);
+
+  // Update tags when metaEntities change
+  useEffect(() => {
+    let tagList = get(metaEntities, 'tags.standard', []);
+    const { type, module } = location?.query || {};
+    if (type === EMBEDDED && module === LIBRARY && !getDefaultTags) {
+      tagList = supportedTags || [];
+    }
+    setTags(tagList);
+  }, [metaEntities, supportedTags, location, getDefaultTags]);
+
+  // 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 && !contentInitializedRef.current) {
+      // 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) {
+        setHtmlContent(uploadedContent);
+        contentInitializedRef.current = true;
+        setIsLoading(false);
+        if (setIsLoadingContent) {
+          setIsLoadingContent(false);
+        }
+      } else {
+        // No uploaded content, stop loading
+        setIsLoading(false);
+        if (setIsLoadingContent) {
+          setIsLoadingContent(false);
+        }
+      }
+    } else if (!EmailLayout && !contentInitializedRef.current) {
+      // 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
+    const hasCompleteTemplateData = templateDataProp && (
+      templateDataProp.emailBody
+      || templateDataProp.html_content
+      || templateDataProp.base?.html_content
+      || templateDataProp.base?.emailBody
+      || templateDataProp.versions?.base
+      || (templateDataProp.base && (templateDataProp.base.subject || templateDataProp.base.emailSubject))
+    );
+
+    // Extract from templateDataProp if available
+    if (hasCompleteTemplateData && !contentInitializedRef.current) {
+      let extractedContent = '';
+      let extractedSubject = '';
+      let extractedName = '';
+
+      if (templateDataProp.base) {
+        extractedContent = templateDataProp.base.html_content || templateDataProp.base.emailBody || '';
+        extractedSubject = templateDataProp.base.subject || templateDataProp.base.emailSubject || '';
+      } else {
+        extractedContent = templateDataProp.emailBody || templateDataProp.html_content || '';
+        extractedSubject = templateDataProp.emailSubject || templateDataProp.subject || '';
+      }
+
+      // Extract template name from templateDataProp
+      extractedName = templateDataProp.name || get(templateDataProp, 'versions.base.name') || '';
+
+      setHtmlContent(extractedContent);
+      setSubject(extractedSubject);
+      setExtractedTemplateName(extractedName);
+      contentInitializedRef.current = true;
+      subjectInitializedRef.current = true;
+      setIsLoading(false);
+      if (setIsLoadingContent) {
+        setIsLoadingContent(false);
+      }
+      return;
+    }
+
+    if (currentTemplateId && emailActions?.getTemplateDetails && !isTemplateLoading) {
+      const templateIdChanged = lastTemplateIdRef.current !== currentTemplateId;
+      const needsContent = !contentInitializedRef.current;
+      const alreadyFetching = fetchingTemplateIdRef.current === currentTemplateId;
+      const shouldFetch = (templateIdChanged || 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
+    if (!isAnyApiInProgress && 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;
+    } else {
+      // 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) => {
+              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 query = {
+      layout: EMAIL,
+      type: TAG,
+      context: data || (isEmbedded ? module : DEFAULT),
+      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}
+          />
+        </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,
+};
+
+export default injectIntl(EmailHTMLEditor);