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

package/v2Components/FormBuilder/Classic.js

@@ -31,6 +31,7 @@ import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import CapAskAira from '@capillarytech/cap-ui-library/CapAskAira';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
@@ -61,7 +62,7 @@ import { convert } from 'html-to-text';
 import { OUTBOUND, ADD_LANGUAGE, UPLOAD, USE_EDITOR, COPY_PRIMARY_LANGUAGE, GLOBAL_CONVERT_OPTIONS } from './constants';
 import { GET_TRANSLATION_MAPPED } from '../../constants/unified';
 import moment from 'moment';
-import { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX, SKIP_TAGS_REGEX_GROUPS} from '../../constants/unified';
+import { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX, SKIP_TAGS_REGEX_GROUPS, UNSUBSCRIBE_TAG} from '../../constants/unified';
 import { REQUEST } from '../../v2Containers/Cap/constants'
 import { isEmailUnsubscribeTagOptional, isAiContentBotDisabled } from '../../utils/common';
 import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
@@ -70,6 +71,7 @@ import { getChannelData, hasPersonalizationTags, validateLiquidTemplateContent,
 const {Column} = Table;
 const {TextArea} = CapInput;
 const {CapRadioGroup} = CapRadio;
+const {CapLabelInline} = CapLabel;
 // import styled from 'styled-components';
 
 const tagsTypes = {
@@ -110,21 +112,32 @@ class HighFreqInput extends React.Component {
   }
 }
 
-// Isolated wrapper for EMAIL template-subject: blur-only commit, same as HighFreqInput.
+// EMAIL fields kept visible in BEE mode; use the blur-commit HighFreqTagInput below.
+const HIGH_FREQ_EMAIL_TAG_INPUT_IDS = ['template-subject', 'template-preheader'];
+
+// EMAIL subject/preheader wrapper: commits on blur, like HighFreqInput.
 class HighFreqTagInput extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { localInputValue: props.inputValue || '' };
+    this.state = { localInputValue: props.inputValue || '', errorDismissed: false };
   }
 
   componentDidUpdate(prevProps) {
     if (prevProps.inputValue !== this.props.inputValue && this.state.localInputValue !== this.props.inputValue) {
       this.setState({ localInputValue: this.props.inputValue || '' });
     }
+    // New errorDataRef = fresh validation (each Save): un-dismiss so a repeated error shows again.
+    if (this.props.errorDataRef !== undefined && prevProps.errorDataRef !== this.props.errorDataRef && this.state.errorDismissed) {
+      this.setState({ errorDismissed: false });
+    }
   }
 
   handleInputChange = (e) => {
     this.setState({ localInputValue: e.target.value });
+    // Hide a stale error on edit (like the HTML editor's Pre-header); re-validates only on Save.
+    if (this.props.errorDataRef !== undefined && !this.state.errorDismissed) {
+      this.setState({ errorDismissed: true });
+    }
   };
 
   handleBlur = () => {
@@ -132,13 +145,39 @@ class HighFreqTagInput extends React.Component {
   };
 
   render() {
-    const { inputValue: _iv, onCommit: _oc, inputOnChange: _ic, ...rest } = this.props;
+    const {
+      inputValue: _iv, onCommit: _oc, inputOnChange: _ic, inputMaxLength, onRemove, removeLabel,
+      errorDataRef, inputErrorMessage, ...rest
+    } = this.props;
+    const counterSuffix = inputMaxLength ? (
+      <CapLabelInline type="label1" className="high-freq-tag-input-counter">
+        {`${this.state.localInputValue.length} / ${inputMaxLength}`}
+      </CapLabelInline>
+    ) : null;
+    const removeSuffix = onRemove ? (
+      <CapLabelInline type="label1" role="button" tabIndex={0} className="high-freq-tag-input-remove-link" onClick={onRemove}>
+        {removeLabel}
+      </CapLabelInline>
+    ) : null;
+    const combinedSuffix = (counterSuffix || removeSuffix) ? (
+      <CapRow align="middle" type="flex" noWrap gap={8}>
+        {counterSuffix}
+        {removeSuffix}
+      </CapRow>
+    ) : undefined;
     return (
       <CapTagListWithInput
         {...rest}
+        inputMaxLength={inputMaxLength}
         inputValue={this.state.localInputValue}
         inputOnChange={this.handleInputChange}
-        inputProps={{ ...(this.props.inputProps || {}), onBlur: this.handleBlur }}
+        inputErrorMessage={this.state.errorDismissed ? '' : inputErrorMessage}
+        inputProps={{
+          ...(this.props.inputProps || {}),
+          onBlur: this.handleBlur,
+          ...(combinedSuffix ? { suffix: combinedSuffix } : {}),
+        }}
+        singleLineLayout
       />
     );
   }
@@ -169,6 +208,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         STANDARD_ERROR_MSG: [],
         LIQUID_ERROR_MSG: [],
       },
+      // Pre-header visibility: null = show if it has content; true/false = user's Add/Remove click.
+      preheaderRevealed: null,
     };
     this.renderForm = this.renderForm.bind(this);
     this.updateFormData = this.updateFormData.bind(this);
@@ -1245,6 +1286,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
         }
 
+        // Pre-header must not contain the unsubscribe tag (checked on Save, not per keystroke).
+        if (index === 'template-preheader') {
+          if (hasUnsubscribeTag(data)) {
+            errorData[index] = true;
+            isValid = false;
+          } else {
+            errorData[index] = false;
+          }
+        }
+
         // Check if Template name present in full mode
         if(type !== 'embedded' && index === 'template-name' && data === '') {
           errorData[index] = true;
@@ -3447,6 +3498,18 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     let contentSections = [];
     let popoverSections = [];
     const self = this;
+    // Pre-header visibility: null = show if it has content; true/false = user's Add/Remove click.
+    const preheaderValueForRenderSection = this.state.formData['template-preheader'] || '';
+    const isPreheaderRevealed = this.state.preheaderRevealed !== null
+      ? this.state.preheaderRevealed
+      : !!preheaderValueForRenderSection;
+    // Hidden Pre-header section renders no fields by design — not the "not ready" spinner case below.
+    const isHiddenPreheaderOnlySection = !isPreheaderRevealed
+      && section.inputFields
+      && section.inputFields.length === 1
+      && section.inputFields[0].cols
+      && section.inputFields[0].cols.length === 1
+      && section.inputFields[0].cols[0].id === 'template-preheader';
     _.forEach(section.inputFields, (field) => {
       const columns = [];
       _.forEach(field.cols, (val) => {
@@ -3807,14 +3870,19 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             const isBEEAppEnableForCapTagList = this.checkBeeEditorAllowedForLibrary();
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
 
-            // Always render Subject CapTagListWithInput even when Bee editor is active for EMAIL channel
+            // Pre-header hidden behind "+ Pre-header" unless it has content or the user toggled it.
+            if (val.id === 'template-preheader' && !isPreheaderRevealed) {
+              break;
+            }
+
+            // Subject/Pre-header render even in BEE mode
             if (
-              val.id === 'template-subject' ||
+              HIGH_FREQ_EMAIL_TAG_INPUT_IDS.includes(val.id) ||
               !(_.get(this.state, `formData[${this.state.currentTab - 1}][${currentLangForCapTagList}].is_drag_drop`, false)) ||
               isBEEAppEnableForCapTagList === false ||
               channelForCapTagList !== 'EMAIL'
             ) {
-              const isEmailStandaloneSubject = val.standalone && channelForCapTagList === EMAIL && val.id === 'template-subject';
+              const isEmailStandaloneSubject = val.standalone && channelForCapTagList === EMAIL && HIGH_FREQ_EMAIL_TAG_INPUT_IDS.includes(val.id);
               const tagListProps = {
                 key: `input-${val.id}`,
                 inputId: val.id,
@@ -3823,9 +3891,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 inputErrorMessage: val.errorMessage && ifError ? val.errorMessage : '',
                 inputRequired: val.required || false,
                 inputDisabled: val.disabled || false,
+                inputMaxLength: val.maxLength,
                 headingText: val.label || '',
                 headingStyle: val.headingStyle || { marginTop: '3%', marginRight: '79%' },
                 headingType: "h4",
+                // Label is an inline input prefix (see inputProps), so no heading here.
+                showHeading: !isEmailStandaloneSubject,
                 onTagSelect: (data) => this.callChildEvent(data, val, 'onTagSelect'),
                 onContextChange: this.props.onContextChange,
                 location: this.props.location,
@@ -3838,10 +3909,42 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 waitEventContextTags: this.props?.waitEventContextTags,
                 moduleFilterEnabled: moduleFilterEnabledForCapTagList,
                 containerStyle: val.style || {},
-                inputProps: val.inputProps || {},
+                inputProps: isEmailStandaloneSubject
+                  ? {
+                    ...(val.inputProps || {}),
+                    prefix: (
+                      <CapLabelInline type="label2" className="high-freq-tag-input-prefix-label">
+                        {val.label || ''}
+                      </CapLabelInline>
+                    ),
+                  }
+                  : (val.inputProps || {}),
                 showInput: val.showInput !== false,
                 showTagList: val.showTagList !== false,
                 restrictPersonalization: this.props.restrictPersonalization,
+                ...(val.id === 'template-subject' && !isPreheaderRevealed ? {
+                  extraContent: (
+                    <CapButton
+                      type="dashed"
+                      size="small"
+                      style={{ whiteSpace: 'nowrap' }}
+                      onClick={() => this.setState({ preheaderRevealed: true })}
+                    >
+                      {this.props.intl.formatMessage(messages.addPreheader)}
+                    </CapButton>
+                  ),
+                } : {}),
+                ...(val.id === 'template-preheader' ? {
+                  onRemove: () => {
+                    this.performFormDataUpdate('', val);
+                    this.setState({ preheaderRevealed: false });
+                  },
+                  removeLabel: this.props.intl.formatMessage(messages.removePreheader),
+                  // Unsubscribe is not a valid Pre-header tag — hide it from the Add Label dropdown.
+                  excludeTags: [UNSUBSCRIBE_TAG],
+                  // New ref per Save/Done click; lets HighFreqTagInput hide stale errors while editing.
+                  errorDataRef: this.state.errorData,
+                } : {}),
               };
               columns.push(
                 <CapColumn key={`input-${val.id}`} offset={val.offset} span={val.width ? val.width : ''} style={val.style ? val.style : {marginBottom: '16px'}}>
@@ -4249,7 +4352,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         fields.push(row);
       }
     });
-    if (!this.props.isEmailLoading && this.props.schema.channel.toUpperCase() === EMAIL && !fields.length) {
+    if (!this.props.isEmailLoading && this.props.schema.channel.toUpperCase() === EMAIL && !fields.length && !isHiddenPreheaderOnlySection) {
       return (
         <div style={{ textAlign: 'center' }}>
           <CapSpin spinning />

package/v2Components/FormBuilder/_formBuilder.scss

@@ -136,4 +136,22 @@
 }
 .error-boundary{
   border: $CAP_SPACE_02 solid $CAP_RED;
+}
+
+// Suffix controls (character counter, Remove link) rendered alongside EMAIL's
+// Subject/Pre-header inputs by HighFreqTagInput (Classic.js).
+.high-freq-tag-input-counter {
+  white-space: nowrap;
+}
+
+.high-freq-tag-input-remove-link {
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.high-freq-tag-input-prefix-label {
+  font-weight: 600;
+  padding-right: $CAP_SPACE_08;
+  margin-right: $CAP_SPACE_08;
+  border-right: 1px solid $CAP_COLOR_16;
 }

package/v2Components/FormBuilder/messages.js

@@ -98,4 +98,12 @@ export default defineMessages({
     id: `creatives.componentsV2.FormBuilder.personalizationTagsErrorMessage`,
     defaultMessage: 'Personalization tags are not supported for anonymous customers, please remove the tags.',
   },
+  addPreheader: {
+    id: 'creatives.componentsV2.FormBuilder.addPreheader',
+    defaultMessage: '+ Pre-header',
+  },
+  removePreheader: {
+    id: 'creatives.componentsV2.FormBuilder.removePreheader',
+    defaultMessage: 'Remove',
+  },
 });

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

@@ -8,6 +8,7 @@ import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
 const { match, location, capGlobal, language } = mockData;
 
 jest.mock('@capillarytech/cap-ui-utils', () => ({
+  getEnvVariable: jest.fn(),
   GA: {
     initialize: jest.fn(),
     timeTracker: {

package/v2Containers/CommunicationFlow/Tests/CommunicationFlow.test.js

@@ -479,7 +479,7 @@ describe('handleSave — CCS flow', () => {
       initialData: {
         contentItems: [{
           channel: 'EMAIL',
-          templateData: { emailSubject: 'Order Confirmed', emailBody: '<html>Hi</html>' },
+          templateData: { emailSubject: 'Order Confirmed', emailBody: '<html>Hi</html>', emailPreHeader: 'Your order is on its way' },
         }],
       },
       onSave,
@@ -497,6 +497,7 @@ describe('handleSave — CCS flow', () => {
               channel: 'EMAIL',
               messageSubject: 'Order Confirmed',
               messageBody: '<html>Hi</html>',
+              messagePreHeader: 'Your order is on its way',
             },
           }),
         }),

package/v2Containers/CommunicationFlow/Tests/constants.test.js

@@ -10,20 +10,20 @@ describe('CCS_CONTENT_TRANSFORMS', () => {
     it('prefers emailBody over emailHtml when both are present', () => {
       expect(
         CCS_CONTENT_TRANSFORMS.EMAIL({
-          emailSubject: 'Subject', emailBody: '<p>Body</p>', emailHtml: '<p>Html</p>',
+          emailSubject: 'Subject', emailBody: '<p>Body</p>', emailHtml: '<p>Html</p>', emailPreHeader: 'Preheader',
         }),
-      ).toEqual({ messageSubject: 'Subject', messageBody: '<p>Body</p>' });
+      ).toEqual({ messageSubject: 'Subject', messageBody: '<p>Body</p>', messagePreHeader: 'Preheader' });
     });
 
     it('falls back to emailHtml when emailBody is absent', () => {
       expect(
         CCS_CONTENT_TRANSFORMS.EMAIL({ emailSubject: 'Subject', emailHtml: '<p>Html</p>' }),
-      ).toEqual({ messageSubject: 'Subject', messageBody: '<p>Html</p>' });
+      ).toEqual({ messageSubject: 'Subject', messageBody: '<p>Html</p>', messagePreHeader: undefined });
     });
 
     it('defaults templateData to {} when called with no argument', () => {
       expect(CCS_CONTENT_TRANSFORMS.EMAIL()).toEqual({
-        messageSubject: undefined, messageBody: undefined,
+        messageSubject: undefined, messageBody: undefined, messagePreHeader: undefined,
       });
     });
   });

package/v2Containers/CommunicationFlow/constants.js

@@ -65,6 +65,7 @@ export const CCS_CONTENT_TRANSFORMS = {
   EMAIL: (templateData = {}) => ({
     messageSubject: templateData.emailSubject,
     messageBody: templateData.emailBody || templateData.emailHtml,
+    messagePreHeader: templateData.emailPreHeader,
   }),
   SMS: (templateData = {}) => ({
     message: templateData.messageBody || '',

package/v2Containers/CommunicationFlow/utils/Tests/mapCommDefinitionToStepData.test.js

@@ -101,7 +101,7 @@ describe('mapCommDefinitionToStepData', () => {
       singleChannelStrategy: {
         variant: {
           channel: 'EMAIL',
-          emailMessageContent: { messageSubject: 'Subject', messageBody: '<p>Body</p>' },
+          emailMessageContent: { messageSubject: 'Subject', messageBody: '<p>Body</p>', messagePreHeader: 'Preheader' },
         },
       },
     };
@@ -111,6 +111,7 @@ describe('mapCommDefinitionToStepData', () => {
     expect(result.contentItems[0].templateData).toEqual({
       emailSubject: 'Subject',
       emailBody: '<p>Body</p>',
+      emailPreHeader: 'Preheader',
       channel: 'EMAIL',
     });
   });

package/v2Containers/CommunicationFlow/utils/mapCommDefinitionToStepData.js

@@ -27,6 +27,7 @@ const CCS_CONTENT_REVERSE_TRANSFORMS = {
   EMAIL: (payload = {}) => ({
     emailSubject: payload.messageSubject,
     emailBody: payload.messageBody,
+    emailPreHeader: payload.messagePreHeader,
   }),
   SMS: (payload = {}) => ({
     messageBody: payload.message || '',

package/v2Containers/CreativesContainer/index.js

@@ -320,7 +320,7 @@ export class Creatives extends React.Component {
   };
 
   onEditTemplate = () => {
-    if (commonUtil.hasCreativesArchivalEnabled() && this.props.templateData?.isArchived) {
+    if (this.props.templateData?.isArchived) {
       CapNotification.error({ message: this.props.intl.formatMessage(messages.cannotEditArchivedTemplate) });
       return;
     }
@@ -503,6 +503,7 @@ export class Creatives extends React.Component {
         case constants.EMAIL: {
           const formData = {
             subject: templateData.emailSubject,
+            preheader: templateData.emailPreHeader,
             html_content: templateData.emailBody,
             is_drag_drop: templateData.is_drag_drop,
             lang_id: templateData.lang_id,
@@ -1092,10 +1093,15 @@ export class Creatives extends React.Component {
           }
           const newHtmlContent = await updateImagesInHtml(html_content);
           templateData = {
-            ...templateData, ...emailBase, emailBody: newHtmlContent, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : '',
+            ...templateData,
+            ...emailBase,
+            emailBody: newHtmlContent,
+            emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : '',
+            emailPreHeader: (emailBase && emailBase.preheader) ? emailBase.preheader : '',
           };
           delete templateData.html_content;
           delete templateData.subject;
+          delete templateData.preheader;
         }
         break;
       case constants.MOBILE_PUSH:
@@ -2472,7 +2478,7 @@ export class Creatives extends React.Component {
               onSave={this.saveMessage}
               onDiscard={this.discardMessage}
               onEditTemplate={this.onEditTemplate}
-              isTemplateArchived={!!(commonUtil.hasCreativesArchivalEnabled() && this.props.templateData && this.props.templateData.isArchived)}
+              isTemplateArchived={!!(this.props.templateData && this.props.templateData.isArchived)}
               slidBoxContent={slidBoxContent}
               onCreateNextStep={this.onCreateNextStep}
               currentChannel={currentChannel.toUpperCase()}

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

@@ -376,4 +376,85 @@ describe('Test SlideBoxContent container', () => {
     expect(getCreativesData).toHaveBeenCalledTimes(1);
     expect(getCreativesData).toHaveBeenCalledWith({ channel: 'EMAIL'});
   });
+
+  it('EMAIL getFormData maps preheader to emailPreHeader for campaigns, alongside subject/body', async () => {
+    renderFunction('EMAIL', 'editTemplate', emailTemplates, emailEditTemplateData);
+    renderedComponent.instance().onEditTemplate();
+
+    const mockValue = {
+      validity: true,
+      value: {
+        name: 'email_creative_name',
+        type: 'EMAIL',
+        base: {
+          subject: 'Test subject',
+          preheader: 'Test preheader',
+          html_content: '<p>hello</p>',
+        },
+      },
+    };
+
+    renderedComponent.instance().getFormData(mockValue);
+    await tick();
+
+    expect(getCreativesData).toHaveBeenCalledTimes(1);
+    const sentData = getCreativesData.mock.calls[0][0];
+    expect(sentData.emailSubject).toBe('Test subject');
+    expect(sentData.emailPreHeader).toBe('Test preheader');
+    expect(sentData.emailBody).toBe('<p>hello</p>');
+    expect(sentData.subject).toBeUndefined();
+    expect(sentData.preheader).toBeUndefined();
+    expect(sentData.html_content).toBeUndefined();
+  });
+
+  it('EMAIL getFormData maps emailPreHeader to an empty string when not present', async () => {
+    renderFunction('EMAIL', 'editTemplate', emailTemplates, emailEditTemplateData);
+    renderedComponent.instance().onEditTemplate();
+
+    const mockValue = {
+      validity: true,
+      value: {
+        name: 'email_creative_name',
+        type: 'EMAIL',
+        base: {
+          subject: 'Test subject',
+          html_content: '<p>hello</p>',
+        },
+      },
+    };
+
+    renderedComponent.instance().getFormData(mockValue);
+    await tick();
+
+    expect(getCreativesData).toHaveBeenCalledTimes(1);
+    const sentData = getCreativesData.mock.calls[0][0];
+    expect(sentData.emailPreHeader).toBe('');
+  });
+
+  it('EMAIL getTemplateData maps emailPreHeader back to preheader when reopening a saved campaign message', () => {
+    renderedComponent = shallowWithIntl(
+      <Creatives
+        loyaltyMetaData={loyaltyMetaData}
+        Templates={emailTemplates}
+        channel="EMAIL"
+        slidBoxContent="editTemplate"
+        templateData={{
+          channel: 'EMAIL',
+          emailSubject: 'Reopened subject',
+          emailPreHeader: 'Reopened preheader',
+          emailBody: '<p>hello</p>',
+        }}
+        handleCloseCreatives={handleCloseCreatives}
+        getCreativesData={getCreativesData}
+        isFullMode={false}
+        templateActions={{
+          getCdnTransformationConfig,
+        }}
+      />,
+    );
+
+    const { templateData } = renderedComponent.instance().state;
+    expect(templateData.base.subject).toBe('Reopened subject');
+    expect(templateData.base.preheader).toBe('Reopened preheader');
+  });
 });

package/v2Containers/Email/index.js

@@ -119,6 +119,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       "template-subject": {
         onTagSelect: this.onTagSelect,
       },
+      // unified pre-header field with input and tag selection
+      "template-preheader": {
+        onTagSelect: this.onTagSelect,
+      },
       "template-version": {
         onSelect: this.handleVersionSelect,
         addVersion: this.addVersion,
@@ -645,6 +649,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
               formData['template-subject'] = subjectFromEditData;
             }
           }
+
+          // Ensure template-preheader is preserved at the top level
+          if (formData['template-preheader'] === undefined || formData['template-preheader'] === '') {
+            const preheaderFromEditData = _.get(nextProps, 'Email.templateDetails.versions.base.preheader', '');
+            if (preheaderFromEditData) {
+              formData['template-preheader'] = preheaderFromEditData;
+            }
+          }
           
           if (langIndex !== undefined && langIndex !== -1 && temp && temp.panes) {
             _.forEach(temp.panes, (pane, index) => {
@@ -903,11 +915,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
 
   onTagSelect = (data, currentTab, sourceVal) => {
-    // If tag is selected from Subject's TagList or unified subject field, insert into subject input
-    if (sourceVal && (sourceVal.id === 'title-tagList' || sourceVal.id === 'template-subject')) {
+    // If tag is selected from Subject's TagList, unified subject field, or the pre-header field, insert into the relevant input
+    if (sourceVal && (sourceVal.id === 'title-tagList' || sourceVal.id === 'template-subject' || sourceVal.id === 'template-preheader')) {
       const tagToInsert = `{{${data}}}`;
       const formData = _.cloneDeep(this.state.formData);
-      const fieldId = 'template-subject';
+      const fieldId = sourceVal.id === 'template-preheader' ? 'template-preheader' : 'template-subject';
       const input = document.getElementById(fieldId) || document.querySelector(`#${fieldId} input`);
       let subjectValue = formData[fieldId] || '';
       try {
@@ -1184,6 +1196,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     formData['template-name'] = editData.name;
     const subject = _.get(editData, 'versions.base.subject', '');
     formData['template-subject'] = subject;
+    const preheader = _.get(editData, 'versions.base.preheader', '');
+    formData['template-preheader'] = preheader;
     formData.base = editData.versions.base;
 
     _.forEach(editData.versions.history, (data1, index) => {
@@ -1686,6 +1700,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     newFormData.base = _.cloneDeep(tmpData);
     newFormData.secondary_templates.push({template_data: tmpData});
     newFormData.base.subject = formData['template-subject'];
+    newFormData.base.preheader = formData['template-preheader'] || '';
     return newFormData;
   }
 
@@ -2531,7 +2546,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     newSchema.standalone.sections = [];
     if (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "coupon_expiry" || this.props.location.query.module === "timeline" ||
       this.props.location.query.module === "library")) {
-      newSchema.standalone.sections.push(_.cloneDeep(schema.standalone.sections[0]));
+      // Keep only Subject/Pre-header (matched by field id; template-name stays hidden).
+      const standAloneFieldIdsToKeep = ['template-subject', 'template-preheader'];
+      _.forEach(_.get(schema, 'standalone.sections', []), (section) => {
+        const hasKeepableField = _.some(section.inputFields, (inputField) => _.some(inputField.cols, (col) => standAloneFieldIdsToKeep.includes(col.id)));
+        if (hasKeepableField) {
+          newSchema.standalone.sections.push(_.cloneDeep(section));
+        }
+      });
     }
 
     _.forEach(newSchema.containers, (container) => {
@@ -2590,6 +2612,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       if ((this.props.location.query.isLanguageSupport === undefined || this.props.location.query.isLanguageSupport === 'false')) {
         // If formData['template-subject'] is empty, assign an empty string; otherwise, retain its current value or use data.base.subject.
         formData['template-subject'] = formData?.['template-subject'] === '' ? '' : (data?.base?.subject || '');
+        formData['template-preheader'] = formData?.['template-preheader'] === '' ? '' : (data?.base?.preheader || '');
         const baseLanguage = this.props.currentOrgDetails.basic_details.base_language;
         let languageIndex = _.findIndex(this.supportedLanguages, {iso_code: baseLanguage});
 
@@ -2923,12 +2946,16 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       if (index === "template-subject" && obj?.versions?.history?.[0]) {
         obj.versions.history[0].subject = newdata;
       }
+      if (index === "template-preheader" && obj?.versions?.history?.[0]) {
+        obj.versions.history[0].preheader = newdata;
+      }
     });
     //const data = formData[`${this.state.currentTab - 1}`];
     obj.name = formData['template-name'];
     obj.versions.base = formData.base;
     obj.versions.base.tabKey = baseKey;
     obj.versions.base.subject = formData['template-subject'];
+    obj.versions.base.preheader = formData['template-preheader'] || '';
     obj.versions.base.activeTab = formData?.base?.activeTab || baseLanguage;
     _.forEach(obj.versions.base.selectedLanguages, (language) => {
       if (obj.versions.base[language].is_drag_drop) {

package/v2Containers/Email/initialSchema.js

@@ -42,6 +42,36 @@ export const response = {
                 },
               ],
             },
+            {
+              type: "multicols",
+              inputFields: [
+                {
+                  cols: [
+                    {
+                      id: "template-preheader",
+                      placeholder: "Enter Pre-header Text",
+                      type: "cap-tag-list-with-input",
+                      metaType: "text",
+                      datatype: "string",
+                      required: false,
+                      label: "Pre-header",
+                      styling: "semantic",
+                      order: 1,
+                      width: 16,
+                      customComponent: true,
+                      standalone: true,
+                      onlyDisplay: false,
+                      maxLength: 150,
+                      errorMessage: "Unsubscribe tag is not allowed in Pre-header.",
+                      supportedEvents: [
+                        "onChange",
+                        "onTagSelect",
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
             {
               type: "multicols",
               inputFields: [

package/v2Containers/Email/messages.js

@@ -154,6 +154,14 @@ export default defineMessages({
     id: 'creatives.containersV2.Email.emailSubjectNotEmplty',
     defaultMessage: 'Email subject cannot be empty.',
   },
+  "Enter Pre-header Text": {
+    id: 'creatives.containersV2.Email.emailPreheader',
+    defaultMessage: 'Enter pre-header text',
+  },
+  "Pre-header": {
+    id: 'creatives.containersV2.Email.Preheader',
+    defaultMessage: 'Pre-header',
+  },
   "Enter template name": {
     id: 'creatives.containersV2.Email.templateNamePlaceholder',
     defaultMessage: 'Enter template name',