@capillarytech/creatives-library 9.0.73-alpha.sprint-testpreview.22 → 9.1.1

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -6,7 +6,6 @@ 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';
@@ -15,6 +14,9 @@ import CapDropdown from '@capillarytech/cap-ui-library/CapDropdown';
 import CapMenu from '@capillarytech/cap-ui-library/CapMenu';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import HTMLEditor from '../../../v2Components/HtmlEditor';
 import CapTagListWithInput from '../../../v2Components/CapTagListWithInput';
 import formBuilderMessages from '../../../v2Components/FormBuilder/messages';
@@ -24,14 +26,17 @@ import { downloadHtmlFile, sanitizeFileName, getExportHtmlDisabledTooltip } from
 import history from '../../../utils/history';
 import messages from '../messages';
 import emailMessages from '../../Email/messages';
-import { validateTags } from '../../../utils/tagValidations';
+import { validateTags, hasUnsubscribeTag } from '../../../utils/tagValidations';
 import {
   TAG, EMBEDDED, DEFAULT, FULL, LIBRARY,
 } from '../../Whatsapp/constants';
 import { EMAIL } from '../../CreativesContainer/constants';
 import { OUTBOUND } from '../../../v2Components/FormBuilder/constants';
+import { PREHEADER_EXCLUDED_TAGS } from '../constants';
 import './_emailHTMLEditor.scss';
 
+const { CapLabelInline } = CapLabel;
+
 /**
  * EmailHTMLEditor Component
  *
@@ -111,6 +116,17 @@ const EmailHTMLEditor = (props) => {
   const [savedTemplate, setSavedTemplate] = useState(null);
   const [subject, setSubject] = useState('');
   const [subjectError, setSubjectError] = useState('');
+  const [preheader, setPreheader] = useState('');
+  const [preheaderError, setPreheaderError] = useState('');
+  // null = show if content exists; true/false = manual "+ Pre-header"/"Remove" click.
+  const [preheaderRevealed, setPreheaderRevealed] = useState(null);
+  const isPreheaderRevealed = preheaderRevealed !== null ? preheaderRevealed : !!preheader;
+  const handleShowPreheaderClick = useCallback(() => setPreheaderRevealed(true), []);
+  const handleRemovePreheaderClick = useCallback(() => {
+    setPreheader('');
+    setPreheaderError('');
+    setPreheaderRevealed(false);
+  }, []);
   // State for template name (extracted from template data in Edit mode)
   const [extractedTemplateName, setExtractedTemplateName] = useState('');
   const [tagValidationError, setTagValidationError] = useState(null);
@@ -183,6 +199,7 @@ const EmailHTMLEditor = (props) => {
           base: true,
         },
         'template-subject': subject || '',
+        'template-preheader': preheader || '',
       };
     },
     getContentForPreview: () => htmlContent || '',
@@ -206,7 +223,7 @@ const EmailHTMLEditor = (props) => {
         html: 0, label: 0, liquid: 0, total: 0,
       };
     },
-  }), [htmlContent, subject, currentOrgDetails]);
+  }), [htmlContent, subject, preheader, currentOrgDetails]);
 
   // Detect edit mode: when isEditEmail is false (create flow), never treat as edit or fetch template details
   const hasParamsId = params?.id || location?.query?.id || location?.params?.id || location?.pathname?.includes('/edit/');
@@ -296,6 +313,7 @@ const EmailHTMLEditor = (props) => {
       lastTemplateIdRef.current = currentTemplateId;
       setHtmlContent('');
       setSubject('');
+      setPreheader('');
       setExtractedTemplateName('');
       baselineContentRef.current = null;
       setHasContentChanged(false);
@@ -324,11 +342,13 @@ const EmailHTMLEditor = (props) => {
     if (hasCompleteTemplateData && !contentInitializedRef.current) {
       let extractedContent = '';
       let extractedSubject = '';
+      let extractedPreheader = '';
       let extractedName = '';
 
       if (templateDataProp.base) {
         extractedContent = templateDataProp.base['template-content'] || templateDataProp.base.html_content || templateDataProp.base.emailBody || '';
         extractedSubject = templateDataProp.base.subject || templateDataProp.base.emailSubject || '';
+        extractedPreheader = templateDataProp.base.preheader || '';
       } else if (templateDataProp.versions && templateDataProp.versions.base) {
         const { base } = templateDataProp.versions;
         const activeTab = base.activeTab || 'en';
@@ -341,9 +361,11 @@ const EmailHTMLEditor = (props) => {
           || '';
 
         extractedSubject = base.subject || base.emailSubject || '';
+        extractedPreheader = base.preheader || '';
       } else {
         extractedContent = templateDataProp['template-content'] || templateDataProp.emailBody || templateDataProp.html_content || '';
         extractedSubject = templateDataProp.emailSubject || templateDataProp.subject || '';
+        extractedPreheader = templateDataProp.preheader || '';
       }
 
       // Extract template name from templateDataProp
@@ -354,6 +376,7 @@ const EmailHTMLEditor = (props) => {
       setHtmlContent(extractedContent);
       setLoadedHtmlContent(extractedContent);
       setSubject(extractedSubject);
+      setPreheader(extractedPreheader);
       setExtractedTemplateName(extractedName);
       contentInitializedRef.current = true;
       subjectInitializedRef.current = true;
@@ -425,6 +448,11 @@ const EmailHTMLEditor = (props) => {
           || get(templateDataFromRedux, 'versions.base.subject')
           || '';
 
+        const extractedPreheader = baseData.preheader
+          || get(templateDataFromRedux, 'preheader')
+          || get(templateDataFromRedux, 'versions.base.preheader')
+          || '';
+
         // Extract template name from Redux data
         const extractedName = templateDataFromRedux.name || '';
 
@@ -438,6 +466,7 @@ const EmailHTMLEditor = (props) => {
           if (!contentInitializedRef.current || htmlContent === loadedHtmlContent) {
             setHtmlContent(extractedContent);
             setSubject(extractedSubject);
+            setPreheader(extractedPreheader);
             setExtractedTemplateName(extractedName);
           }
         } else if (!contentInitializedRef.current) {
@@ -445,6 +474,7 @@ const EmailHTMLEditor = (props) => {
           setHtmlContent(extractedContent);
           setLoadedHtmlContent(extractedContent);
           setSubject(extractedSubject);
+          setPreheader(extractedPreheader);
           setExtractedTemplateName(extractedName);
         }
 
@@ -470,6 +500,7 @@ const EmailHTMLEditor = (props) => {
       setHtmlContent('');
       setLoadedHtmlContent(''); // Set stable loaded content
       setSubject('');
+      setPreheader('');
       setExtractedTemplateName('');
       setIsLoading(false);
       if (setIsLoadingContent) {
@@ -676,6 +707,53 @@ const EmailHTMLEditor = (props) => {
     }
   }, [subjectError]);
 
+  // Handle tag insertion into Pre-header field
+  const handlePreheaderTagSelect = useCallback((data) => {
+    if (data) {
+      const tagToInsert = `{{${data}}}`;
+      const input = document.getElementById('template-preheader') || document.querySelector('#template-preheader input');
+      let preheaderValue = preheader || '';
+      try {
+        if (input && (typeof input.selectionStart === 'number')) {
+          const startPos = input.selectionStart;
+          const endPos = input.selectionEnd;
+          preheaderValue = `${preheaderValue.substring(0, startPos)}${tagToInsert}${preheaderValue.substring(endPos)}`;
+          setPreheader(preheaderValue);
+          try {
+            input.focus();
+            const newPos = startPos + tagToInsert.length;
+            input.selectionStart = newPos;
+            input.selectionEnd = newPos;
+          } catch (e) {
+            // Ignore focus errors
+          }
+        } else {
+          preheaderValue = `${preheaderValue}${tagToInsert}`;
+          setPreheader(preheaderValue);
+          if (input) {
+            try {
+              input.value = preheaderValue;
+            } catch (e) {
+              // Ignore value setting errors
+            }
+          }
+        }
+      } catch (e) {
+        // Fallback: safe append
+        preheaderValue = `${preheaderValue}${tagToInsert}`;
+        setPreheader(preheaderValue);
+      }
+    }
+  }, [preheader]);
+
+  // Handle pre-header change
+  const handlePreheaderChange = useCallback((e) => {
+    setPreheader(e.target.value);
+    if (preheaderError) {
+      setPreheaderError('');
+    }
+  }, [preheaderError]);
+
   // Handle Save/Update with liquid validation
   const handleSave = useCallback(() => {
     // IMPORTANT: Clear API validation errors FIRST before checking for validation errors
@@ -704,6 +782,15 @@ const EmailHTMLEditor = (props) => {
       setSubjectError('');
     }
 
+    // 1.1. Validate Pre-header - BLOCKING: must never contain the unsubscribe tag
+    if (hasUnsubscribeTag(preheader)) {
+      setPreheaderError(formatMessage(messages.unsubscribeNotAllowedInPreheader));
+      if (onValidationFail) {
+        onValidationFail();
+      }
+      return;
+    }
+
     // 1.5. Check for validation errors (Errors = blocking, Warnings = non-blocking)
     // Get issue counts from ref or stored state
     let issueCounts = { errors: 0, warnings: 0, total: 0 };
@@ -835,6 +922,7 @@ const EmailHTMLEditor = (props) => {
           base: true,
           tabKey,
           subject: subject || '',
+          preheader: preheader || '',
         };
 
         const historyEntry = {
@@ -844,6 +932,7 @@ const EmailHTMLEditor = (props) => {
           base: true,
           tabKey,
           subject: subject || '',
+          preheader: preheader || '',
         };
 
         // Opened in edit mode: name from the loaded template; created in this session: the name entered for it
@@ -944,6 +1033,7 @@ const EmailHTMLEditor = (props) => {
           secondary_templates: [{ template_data: tmpData }],
         };
         libraryPayload.base.subject = subject || '';
+        libraryPayload.base.preheader = preheader || '';
 
         if (location?.query?.module === 'library' && isGetFormData && getFormdata) {
           const response = {
@@ -1006,6 +1096,7 @@ const EmailHTMLEditor = (props) => {
     }
   }, [
     subject,
+    preheader,
     htmlContent,
     tags,
     injectedTags,
@@ -1142,7 +1233,7 @@ const EmailHTMLEditor = (props) => {
       <CapRow>
         <CapColumn span={24}>
           {/* Subject Field */}
-          <CapColumn span={24} style={{ marginBottom: CAP_SPACE_16 }}>
+          <CapColumn span={24} className="email-html-editor-field">
             <CapTagListWithInput
               inputId="template-subject"
               inputValue={subject}
@@ -1150,9 +1241,13 @@ const EmailHTMLEditor = (props) => {
               inputPlaceholder={formatMessage(messages.enterEmailSubject)}
               inputRequired
               inputErrorMessage={subjectError}
-              headingText={formatMessage(messages.subject)}
-              headingType="h4"
-              headingStyle={{ marginRight: '85%' }}
+              inputProps={{
+                prefix: (
+                  <CapLabelInline type="label2" className="email-html-editor-prefix email-html-editor-prefix-label">
+                    {formatMessage(messages.subject)}
+                  </CapLabelInline>
+                ),
+              }}
               onTagSelect={handleSubjectTagSelect}
               onContextChange={handleOnTagsContextChange}
               location={location}
@@ -1161,9 +1256,77 @@ const EmailHTMLEditor = (props) => {
               selectedOfferDetails={selectedOfferDetails}
               eventContextTags={eventContextTags}
               waitEventContextTags={waitEventContextTags}
-              showHeading
+              showHeading={false}
+              showTagList
+              showInput
+              singleLineLayout
+              extraContent={!isPreheaderRevealed ? (
+                <CapButton
+                  type="dashed"
+                  size="small"
+                  className="email-html-editor-add-preheader-btn"
+                  onClick={handleShowPreheaderClick}
+                >
+                  {formatMessage(messages.addPreheader)}
+                </CapButton>
+              ) : null}
+              containerStyle={{
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+              popoverPlacement="bottomRight"
+            />
+          </CapColumn>
+
+          {/* Pre-header Field */}
+          {isPreheaderRevealed && (
+          <CapColumn span={24} className="email-html-editor-field">
+            <CapTagListWithInput
+              inputId="template-preheader"
+              inputValue={preheader}
+              inputOnChange={handlePreheaderChange}
+              inputPlaceholder={formatMessage(messages.enterEmailPreheader)}
+              inputMaxLength={85}
+              inputErrorMessage={preheaderError}
+              excludeTags={PREHEADER_EXCLUDED_TAGS}
+              inputProps={{
+                prefix: (
+                  <CapRow align="middle" type="flex" noWrap gap={4} className="email-html-editor-prefix">
+                    <CapLabelInline type="label2" className="email-html-editor-prefix-label">
+                      {formatMessage(messages.preheader)}
+                    </CapLabelInline>
+                    <CapTooltipWithInfo title={formatMessage(messages.preheaderInfoTooltip)} />
+                  </CapRow>
+                ),
+                suffix: (
+                  <CapRow align="middle" type="flex" noWrap gap={8}>
+                    <CapLabelInline type="label1" className="email-html-editor-counter">
+                      {`${(preheader || '').length} / 85`}
+                    </CapLabelInline>
+                    <CapLabelInline
+                      type="label1"
+                      role="button"
+                      tabIndex={0}
+                      className="email-html-editor-remove-link"
+                      onClick={handleRemovePreheaderClick}
+                    >
+                      {formatMessage(messages.removePreheader)}
+                    </CapLabelInline>
+                  </CapRow>
+                ),
+              }}
+              onTagSelect={handlePreheaderTagSelect}
+              onContextChange={handleOnTagsContextChange}
+              location={location}
+              tags={tags}
+              injectedTags={injectedTags || {}}
+              selectedOfferDetails={selectedOfferDetails}
+              eventContextTags={eventContextTags}
+              waitEventContextTags={waitEventContextTags}
+              showHeading={false}
               showTagList
               showInput
+              singleLineLayout
               containerStyle={{
                 display: 'flex',
                 flexDirection: 'column',
@@ -1171,6 +1334,7 @@ const EmailHTMLEditor = (props) => {
               popoverPlacement="bottomRight"
             />
           </CapColumn>
+          )}
 
           <CapColumn span={24} className="html-editor-options-column">
             <CapDropdown

package/v2Containers/EmailWrapper/components/__tests__/EmailHTMLEditor.test.js

@@ -12,7 +12,7 @@ import '@testing-library/jest-dom';
 import { IntlProvider } from 'react-intl';
 import EmailHTMLEditor from '../EmailHTMLEditor';
 import { validateLiquidTemplateContent } from '../../../../utils/commonUtils';
-import { validateTags } from '../../../../utils/tagValidations';
+import { validateTags, hasUnsubscribeTag } from '../../../../utils/tagValidations';
 import { isEmailUnsubscribeTagOptional } from '../../../../utils/common';
 import { downloadHtmlFile } from '../../../../utils/downloadFile';
 
@@ -23,6 +23,7 @@ jest.mock('../../../../utils/commonUtils', () => ({
 
 jest.mock('../../../../utils/tagValidations', () => ({
   validateTags: jest.fn(),
+  hasUnsubscribeTag: jest.fn(() => false),
 }));
 
 jest.mock('../../../../utils/common', () => ({
@@ -217,11 +218,12 @@ jest.mock('../../../../v2Components/CapTagListWithInput', () => {
     React.useEffect(() => {
       setValue(props.inputValue || '');
     }, [props.inputValue]);
+    const isPreheader = props.inputId === 'template-preheader';
     return (
       <div data-testid="cap-tag-list-input">
         <input
-          id="template-subject"
-          data-testid="subject-input"
+          id={props.inputId || 'template-subject'}
+          data-testid={isPreheader ? 'preheader-input' : 'subject-input'}
           value={value}
           onChange={(e) => {
             setValue(e.target.value);
@@ -233,16 +235,35 @@ jest.mock('../../../../v2Components/CapTagListWithInput', () => {
         />
         <button
           onClick={() => props.onTagSelect && props.onTagSelect('customer.name')}
-          data-testid="trigger-tag-select"
+          data-testid={isPreheader ? 'preheader-trigger-tag-select' : 'trigger-tag-select'}
         >
           Select Tag
         </button>
+        {isPreheader && (
+          <button
+            onClick={() => props.onTagSelect && props.onTagSelect('')}
+            data-testid="preheader-trigger-tag-select-empty"
+          >
+            Select Empty Tag
+          </button>
+        )}
         <button
           onClick={() => props.onContextChange && props.onContextChange('default')}
-          data-testid="trigger-context-change"
+          data-testid={isPreheader ? 'preheader-trigger-context-change' : 'trigger-context-change'}
         >
           Change Context
         </button>
+        {props.extraContent}
+        {props.inputProps && props.inputProps.prefix}
+        {props.inputProps && props.inputProps.suffix}
+        <span data-testid={isPreheader ? 'preheader-exclude-tags' : 'subject-exclude-tags'}>
+          {JSON.stringify(props.excludeTags || [])}
+        </span>
+        {props.inputErrorMessage && (
+          <span data-testid={isPreheader ? 'preheader-error' : 'subject-error'}>
+            {props.inputErrorMessage}
+          </span>
+        )}
       </div>
     );
   };
@@ -407,6 +428,7 @@ describe('EmailHTMLEditor', () => {
     jest.clearAllMocks();
     validateLiquidTemplateContent.mockResolvedValue(true);
     validateTags.mockReturnValue({ valid: true });
+    hasUnsubscribeTag.mockReturnValue(false);
     isEmailUnsubscribeTagOptional.mockReturnValue(false);
     // Reset mock functions
     mockGetAllIssues.mockReturnValue([]);
@@ -754,6 +776,186 @@ describe('EmailHTMLEditor', () => {
     });
   });
 
+  describe('Pre-header Handling', () => {
+    const revealPreheader = () => {
+      fireEvent.click(screen.getByText('+ Pre-header'));
+    };
+
+    it('uses the updated placeholder text and 85-character limit', () => {
+      renderWithIntl();
+      revealPreheader();
+
+      expect(screen.getByTestId('preheader-input').placeholder).toBe('e.g. Get 20% off your next order');
+      expect(screen.getByText('0 / 85')).toBeInTheDocument();
+
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: 'Hello' } });
+      expect(screen.getByText('5 / 85')).toBeInTheDocument();
+    });
+
+    it('shows an info tooltip icon next to the Pre-header label', () => {
+      const { container } = renderWithIntl();
+      revealPreheader();
+
+      expect(container.querySelector('.cap-icon-v2-info-circle')).toBeInTheDocument();
+    });
+
+    it('inserts tag into Pre-header field at the cursor position', () => {
+      renderWithIntl();
+      revealPreheader();
+      const input = screen.getByTestId('preheader-input');
+      fireEvent.change(input, { target: { value: 'Hello ' } });
+      Object.defineProperty(input, 'selectionStart', { value: 6, writable: true });
+      Object.defineProperty(input, 'selectionEnd', { value: 6, writable: true });
+
+      fireEvent.click(screen.getByTestId('preheader-trigger-tag-select'));
+
+      expect(screen.getByTestId('preheader-input').value).toBe('Hello {{customer.name}}');
+    });
+
+    it('appends the tag when the Pre-header input has no selection', () => {
+      renderWithIntl();
+      revealPreheader();
+      const input = screen.getByTestId('preheader-input');
+      fireEvent.change(input, { target: { value: 'Hello' } });
+      Object.defineProperty(input, 'selectionStart', { value: undefined, writable: true });
+      Object.defineProperty(input, 'selectionEnd', { value: undefined, writable: true });
+
+      fireEvent.click(screen.getByTestId('preheader-trigger-tag-select'));
+
+      expect(screen.getByTestId('preheader-input').value).toBe('Hello{{customer.name}}');
+    });
+
+    it('appends the tag when the Pre-header input element is not found', () => {
+      renderWithIntl();
+      revealPreheader();
+      const input = screen.getByTestId('preheader-input');
+      fireEvent.change(input, { target: { value: 'Hello' } });
+      input.remove();
+
+      fireEvent.click(screen.getByTestId('preheader-trigger-tag-select'));
+      // Should handle gracefully without throwing
+    });
+
+    it('falls back to a safe append when reading the Pre-header input throws', () => {
+      renderWithIntl();
+      revealPreheader();
+      const input = screen.getByTestId('preheader-input');
+      fireEvent.change(input, { target: { value: 'Hello' } });
+      Object.defineProperty(input, 'selectionStart', {
+        configurable: true,
+        get() { throw new Error('boom'); },
+      });
+
+      expect(() => fireEvent.click(screen.getByTestId('preheader-trigger-tag-select'))).not.toThrow();
+      expect(screen.getByTestId('preheader-input').value).toBe('Hello{{customer.name}}');
+    });
+
+    it('does nothing when the Pre-header tag select fires without data', () => {
+      renderWithIntl();
+      revealPreheader();
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: 'Hello' } });
+
+      fireEvent.click(screen.getByTestId('preheader-trigger-tag-select-empty'));
+
+      expect(screen.getByTestId('preheader-input').value).toBe('Hello');
+    });
+
+    it('inserts a tag into an empty Pre-header field', () => {
+      renderWithIntl();
+      revealPreheader();
+
+      fireEvent.click(screen.getByTestId('preheader-trigger-tag-select'));
+
+      expect(screen.getByTestId('preheader-input').value).toBe('{{customer.name}}');
+    });
+
+    it('handles the Pre-header context-change trigger', () => {
+      renderWithIntl();
+      revealPreheader();
+
+      fireEvent.click(screen.getByTestId('preheader-trigger-context-change'));
+      // Exercises handleOnTagsContextChange for the Pre-header field
+    });
+
+    it('clears a stale Pre-header error once the user edits the field again', () => {
+      hasUnsubscribeTag.mockReturnValue(true);
+      const { rerender } = renderWithIntl({ isGetFormData: false });
+      fireEvent.change(screen.getByTestId('subject-input'), { target: { value: 'Valid Subject' } });
+      revealPreheader();
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: '{{unsubscribe}}' } });
+
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} isGetFormData />
+        </IntlProvider>
+      );
+      expect(screen.getByTestId('preheader-error')).toBeInTheDocument();
+
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: '{{unsubscribe}} extra' } });
+
+      expect(screen.queryByTestId('preheader-error')).not.toBeInTheDocument();
+    });
+
+    it('blocks save for an invalid Pre-header even when onValidationFail is not provided', () => {
+      hasUnsubscribeTag.mockReturnValue(true);
+      const emailActions = {
+        ...defaultProps.emailActions,
+        createTemplate: jest.fn((obj, callback) => callback({ templateId: { _id: '123', versions: {} } })),
+      };
+      const props = { ...defaultProps, emailActions };
+      delete props.onValidationFail;
+      const { rerender } = render(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...props} isGetFormData={false} />
+        </IntlProvider>
+      );
+      fireEvent.change(screen.getByTestId('subject-input'), { target: { value: 'Valid Subject' } });
+      revealPreheader();
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: '{{unsubscribe}}' } });
+
+      expect(() => rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...props} isGetFormData />
+        </IntlProvider>
+      )).not.toThrow();
+
+      expect(screen.getByTestId('preheader-error')).toBeInTheDocument();
+      expect(emailActions.createTemplate).not.toHaveBeenCalled();
+    });
+
+    it('removes the Pre-header field, clearing its value and error, when Remove is clicked', () => {
+      hasUnsubscribeTag.mockReturnValue(true);
+      const { rerender } = renderWithIntl({ isGetFormData: false });
+      fireEvent.change(screen.getByTestId('subject-input'), { target: { value: 'Valid Subject' } });
+      revealPreheader();
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: '{{unsubscribe}}' } });
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} isGetFormData />
+        </IntlProvider>
+      );
+      expect(screen.getByTestId('preheader-error')).toBeInTheDocument();
+
+      fireEvent.click(screen.getByText('Remove'));
+
+      expect(screen.queryByTestId('preheader-input')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('preheader-error')).not.toBeInTheDocument();
+      expect(screen.getByText('+ Pre-header')).toBeInTheDocument();
+    });
+
+    it('defaults injectedTags to {} for the Pre-header tag list when the prop is falsy', () => {
+      // null (not undefined) is required here: a static defaultProps entry only kicks in for
+      // undefined, so deleting the prop would never actually exercise the `|| {}` fallback.
+      expect(() => render(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} injectedTags={null} />
+        </IntlProvider>
+      )).not.toThrow();
+      fireEvent.click(screen.getByText('+ Pre-header'));
+      expect(screen.getByTestId('preheader-input')).toBeInTheDocument();
+    });
+  });
+
   describe('Content Change Handling', () => {
     it('updates content when HTMLEditor changes', () => {
       renderWithIntl();
@@ -899,6 +1101,63 @@ describe('EmailHTMLEditor', () => {
       }, { timeout: 3000 });
     });
 
+    it('hides the unsubscribe tag from the Pre-header Add Label dropdown but not Subject\'s', () => {
+      renderWithIntl();
+      fireEvent.click(screen.getByText('+ Pre-header'));
+      expect(screen.getByTestId('preheader-exclude-tags')).toHaveTextContent(JSON.stringify(['unsubscribe']));
+      expect(screen.getByTestId('subject-exclude-tags')).toHaveTextContent(JSON.stringify([]));
+    });
+
+    it('blocks save and shows an inline error when Pre-header contains the unsubscribe tag', async () => {
+      const onValidationFail = jest.fn();
+      hasUnsubscribeTag.mockReturnValue(true);
+      const { rerender } = renderWithIntl({ onValidationFail, isGetFormData: false });
+      fireEvent.change(screen.getByTestId('subject-input'), { target: { value: 'Valid Subject' } });
+      fireEvent.click(screen.getByText('+ Pre-header'));
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: '{{unsubscribe}}' } });
+
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} onValidationFail={onValidationFail} isGetFormData />
+        </IntlProvider>
+      );
+
+      await waitFor(() => {
+        expect(onValidationFail).toHaveBeenCalled();
+      }, { timeout: 3000 });
+      expect(defaultProps.emailActions.createTemplate).not.toHaveBeenCalled();
+      expect(screen.getByTestId('preheader-error')).toHaveTextContent('Unsubscribe tag is not allowed in Pre-header.');
+    });
+
+    it('allows save when Pre-header does not contain the unsubscribe tag', async () => {
+      hasUnsubscribeTag.mockReturnValue(false);
+      const emailActions = {
+        ...defaultProps.emailActions,
+        transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
+        createTemplate: jest.fn((obj, callback) => {
+          callback({ templateId: { _id: '123', versions: {} } });
+        }),
+      };
+      const { rerender } = renderWithIntl({
+        isGetFormData: false, templateName: 'New Template', emailActions, getLiquidTags: null,
+      });
+      fireEvent.change(screen.getByTestId('subject-input'), { target: { value: 'Valid Subject' } });
+      fireEvent.click(screen.getByText('+ Pre-header'));
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: 'A normal preheader' } });
+      fireEvent.click(screen.getByTestId('trigger-content-change'));
+
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} isGetFormData templateName="New Template" emailActions={emailActions} getLiquidTags={null} />
+        </IntlProvider>
+      );
+
+      await waitFor(() => {
+        expect(emailActions.createTemplate).toHaveBeenCalled();
+      }, { timeout: 3000 });
+      expect(screen.queryByTestId('preheader-error')).not.toBeInTheDocument();
+    });
+
     it('blocks save when there are HTML validation errors', async () => {
       const onValidationFail = jest.fn();
       // Mock getAllIssues to return BLOCKING errors (sanitizer errors or client-side Liquid errors)