@capillarytech/creatives-library 9.0.70 → 9.0.71-alpha.sprint-cap-211543.17

package/v2Containers/Email/tests/index.test.js

@@ -377,6 +377,27 @@ describe('Email container', () => {
       const addLangCol = cols.find((c) => c.id === 'add-language-button');
       expect(addLangCol.colStyle.display).toBe('');
     });
+
+    const getStandaloneFieldIds = (schema) => _.flatMap(
+      schema.standalone.sections,
+      (section) => _.flatMap(section.inputFields, (inputField) => _.map(inputField.cols, (col) => col.id)),
+    );
+
+    it('keeps both template-subject and template-preheader as standalone fields for embedded/library module', () => {
+      const wrapper = renderEmail({ location: { query: { type: 'embedded', module: 'library' } } });
+
+      const result = wrapper.instance().removeStandAlone(_.cloneDeep(emailDefinition));
+
+      expect(getStandaloneFieldIds(result)).toEqual(['template-subject', 'template-preheader']);
+    });
+
+    it('drops template-name from standalone fields for embedded/library module (unchanged prior behavior)', () => {
+      const wrapper = renderEmail({ location: { query: { type: 'embedded', module: 'library' } } });
+
+      const result = wrapper.instance().removeStandAlone(_.cloneDeep(emailDefinition));
+
+      expect(getStandaloneFieldIds(result)).not.toContain('template-name');
+    });
   });
 
   describe('handleEdmSave (mode === "switchEditor")', () => {
@@ -717,4 +738,90 @@ describe('Email container', () => {
       expect(wrapper.state('savedTemplate')).toBeNull();
     });
   });
+
+  describe('pre-header field', () => {
+    describe('onTagSelect', () => {
+      it('appends the tag to template-preheader when a tag is selected from the pre-header field', () => {
+        const wrapper = renderEmail();
+        wrapper.setState({ formData: { 'template-preheader': 'Hello ' } });
+
+        wrapper.instance().onTagSelect('first_name', 1, { id: 'template-preheader' });
+
+        expect(wrapper.state('formData')['template-preheader']).toBe('Hello {{first_name}}');
+      });
+
+      it('does not touch template-subject when the tag is selected from the pre-header field', () => {
+        const wrapper = renderEmail();
+        wrapper.setState({ formData: { 'template-preheader': '', 'template-subject': 'Original subject' } });
+
+        wrapper.instance().onTagSelect('loyalty_points', 1, { id: 'template-preheader' });
+
+        expect(wrapper.state('formData')['template-subject']).toBe('Original subject');
+        expect(wrapper.state('formData')['template-preheader']).toBe('{{loyalty_points}}');
+      });
+    });
+
+    describe('setEditData', () => {
+      it('populates formData["template-preheader"] from versions.base.preheader', () => {
+        const wrapper = renderEmail();
+        wrapper.setState({ schema: { containers: [] } });
+        const instance = wrapper.instance();
+        const editData = {
+          name: 'My Template',
+          versions: {
+            base: {
+              subject: 'My subject',
+              preheader: 'My preheader text',
+              activeTab: 'en',
+              selectedLanguages: ['en'],
+              en: {},
+            },
+            history: [],
+          },
+        };
+
+        instance.setEditData(editData);
+
+        expect(wrapper.state('formData')['template-preheader']).toBe('My preheader text');
+      });
+
+      it('defaults to an empty string when versions.base.preheader is absent', () => {
+        const wrapper = renderEmail();
+        wrapper.setState({ schema: { containers: [] } });
+        const instance = wrapper.instance();
+        const editData = {
+          name: 'My Template',
+          versions: {
+            base: {
+              subject: 'My subject',
+              activeTab: 'en',
+              selectedLanguages: ['en'],
+              en: {},
+            },
+            history: [],
+          },
+        };
+
+        instance.setEditData(editData);
+
+        expect(wrapper.state('formData')['template-preheader']).toBe('');
+      });
+    });
+
+    describe('transformFormData', () => {
+      it('carries template-preheader into the returned base.preheader', () => {
+        const wrapper = renderEmail();
+        wrapper.setState({
+          formData: {
+            'template-preheader': 'Preview snippet text',
+            base: { activeTab: 'en', en: { 'template-content': '<p>hi</p>' } },
+          },
+        });
+
+        const result = wrapper.instance().transformFormData(wrapper.state('formData'));
+
+        expect(result.base.preheader).toBe('Preview snippet text');
+      });
+    });
+  });
 });

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,8 @@ 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 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 +25,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 +115,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 +198,7 @@ const EmailHTMLEditor = (props) => {
           base: true,
         },
         'template-subject': subject || '',
+        'template-preheader': preheader || '',
       };
     },
     getContentForPreview: () => htmlContent || '',
@@ -206,7 +222,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 +312,7 @@ const EmailHTMLEditor = (props) => {
       lastTemplateIdRef.current = currentTemplateId;
       setHtmlContent('');
       setSubject('');
+      setPreheader('');
       setExtractedTemplateName('');
       baselineContentRef.current = null;
       setHasContentChanged(false);
@@ -324,11 +341,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 +360,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 +375,7 @@ const EmailHTMLEditor = (props) => {
       setHtmlContent(extractedContent);
       setLoadedHtmlContent(extractedContent);
       setSubject(extractedSubject);
+      setPreheader(extractedPreheader);
       setExtractedTemplateName(extractedName);
       contentInitializedRef.current = true;
       subjectInitializedRef.current = true;
@@ -425,6 +447,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 +465,7 @@ const EmailHTMLEditor = (props) => {
           if (!contentInitializedRef.current || htmlContent === loadedHtmlContent) {
             setHtmlContent(extractedContent);
             setSubject(extractedSubject);
+            setPreheader(extractedPreheader);
             setExtractedTemplateName(extractedName);
           }
         } else if (!contentInitializedRef.current) {
@@ -445,6 +473,7 @@ const EmailHTMLEditor = (props) => {
           setHtmlContent(extractedContent);
           setLoadedHtmlContent(extractedContent);
           setSubject(extractedSubject);
+          setPreheader(extractedPreheader);
           setExtractedTemplateName(extractedName);
         }
 
@@ -470,6 +499,7 @@ const EmailHTMLEditor = (props) => {
       setHtmlContent('');
       setLoadedHtmlContent(''); // Set stable loaded content
       setSubject('');
+      setPreheader('');
       setExtractedTemplateName('');
       setIsLoading(false);
       if (setIsLoadingContent) {
@@ -676,6 +706,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 +781,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 +921,7 @@ const EmailHTMLEditor = (props) => {
           base: true,
           tabKey,
           subject: subject || '',
+          preheader: preheader || '',
         };
 
         const historyEntry = {
@@ -844,6 +931,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 +1032,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 +1095,7 @@ const EmailHTMLEditor = (props) => {
     }
   }, [
     subject,
+    preheader,
     htmlContent,
     tags,
     injectedTags,
@@ -1142,7 +1232,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 +1240,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-label">
+                    {formatMessage(messages.subject)}
+                  </CapLabelInline>
+                ),
+              }}
               onTagSelect={handleSubjectTagSelect}
               onContextChange={handleOnTagsContextChange}
               location={location}
@@ -1161,9 +1255,74 @@ 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={150}
+              inputErrorMessage={preheaderError}
+              excludeTags={PREHEADER_EXCLUDED_TAGS}
+              inputProps={{
+                prefix: (
+                  <CapLabelInline type="label2" className="email-html-editor-prefix-label">
+                    {formatMessage(messages.preheader)}
+                  </CapLabelInline>
+                ),
+                suffix: (
+                  <CapRow align="middle" type="flex" noWrap gap={8}>
+                    <CapLabelInline type="label1" className="email-html-editor-counter">
+                      {`${(preheader || '').length} / 150`}
+                    </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 +1330,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);
@@ -243,6 +245,15 @@ jest.mock('../../../../v2Components/CapTagListWithInput', () => {
         >
           Change Context
         </button>
+        {props.extraContent}
+        <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 +418,7 @@ describe('EmailHTMLEditor', () => {
     jest.clearAllMocks();
     validateLiquidTemplateContent.mockResolvedValue(true);
     validateTags.mockReturnValue({ valid: true });
+    hasUnsubscribeTag.mockReturnValue(false);
     isEmailUnsubscribeTagOptional.mockReturnValue(false);
     // Reset mock functions
     mockGetAllIssues.mockReturnValue([]);
@@ -899,6 +911,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)

package/v2Containers/EmailWrapper/components/_emailHTMLEditor.scss

@@ -9,3 +9,29 @@
 .html-editor-options-icon {
   cursor: pointer;
 }
+
+// Subject/Pre-header field rows
+.email-html-editor-field {
+  margin-bottom: $CAP_SPACE_16;
+}
+
+.email-html-editor-add-preheader-btn {
+  white-space: nowrap;
+}
+
+// Subject/Pre-header inline prefix label and Pre-header suffix (counter + Remove)
+.email-html-editor-prefix-label {
+  font-weight: 600;
+  padding-right: $CAP_SPACE_08;
+  margin-right: $CAP_SPACE_08;
+  border-right: 0.0625rem solid $CAP_COLOR_16;
+}
+
+.email-html-editor-counter {
+  white-space: nowrap;
+}
+
+.email-html-editor-remove-link {
+  white-space: nowrap;
+  cursor: pointer;
+}

package/v2Containers/EmailWrapper/constants.js

@@ -4,6 +4,8 @@
  *
  */
 
+import { UNSUBSCRIBE_TAG } from '../../constants/unified';
+
 export const DEFAULT_ACTION = "app/EmailWrapper/DEFAULT_ACTION";
 export const EMAIL_CREATE_MODES = {
   UPLOAD: "upload",
@@ -17,3 +19,6 @@ export const STEPS = {
   TEMPLATE_SELECTION: "templateSelection",
   CREATE_TEMPLATE_CONTENT: "createTemplateContent",
 };
+
+// Unsubscribe is not a valid Pre-header tag — hide it from the "Add Label" dropdown there.
+export const PREHEADER_EXCLUDED_TAGS = [UNSUBSCRIBE_TAG];

package/v2Containers/EmailWrapper/messages.js

@@ -122,6 +122,26 @@ export default defineMessages({
     id: 'creatives.containersV2.EmailWrapper.enterEmailSubject',
     defaultMessage: 'Enter Email Subject',
   },
+  preheader: {
+    id: 'creatives.containersV2.EmailWrapper.preheader',
+    defaultMessage: 'Pre-header',
+  },
+  enterEmailPreheader: {
+    id: 'creatives.containersV2.EmailWrapper.enterEmailPreheader',
+    defaultMessage: 'Enter Pre-header Text',
+  },
+  addPreheader: {
+    id: 'creatives.containersV2.EmailWrapper.addPreheader',
+    defaultMessage: '+ Pre-header',
+  },
+  removePreheader: {
+    id: 'creatives.containersV2.EmailWrapper.removePreheader',
+    defaultMessage: 'Remove',
+  },
+  unsubscribeNotAllowedInPreheader: {
+    id: 'creatives.containersV2.EmailWrapper.unsubscribeNotAllowedInPreheader',
+    defaultMessage: 'Unsubscribe tag is not allowed in Pre-header.',
+  },
   editorType: {
     id: 'creatives.containersV2.EmailWrapper.editorType',
     defaultMessage: 'Editor type',