@capillarytech/creatives-library 9.0.72 → 9.1.0

package/v2Components/FormBuilder/Functional/layout/TabsContainer.js

@@ -4,9 +4,9 @@
  * renderContainer 'tabs' case (Classic.js:4246-4328) with state-driven tab
  * activation — no DOM scans, no setTimeout — while keeping the exact container
  * contract: pane keys come from the bound tab's tabKey, unsupported panes are
- * skipped WITHOUT reserving an index (pane→tab binding shifts, matching the
- * class's paneIndex behavior), and the container's injected onTabChange still
- * receives the 1-based active index (bridged by the shell via onTabSwitch).
+ * skipped but every pane stays bound to its own tab (iOS keeps tab 1 when Android
+ * is hidden), and the container's injected onTabChange still receives the
+ * 1-based active index (bridged by the shell via onTabSwitch).
  */
 
 import React from 'react';
@@ -23,17 +23,14 @@ const TabsContainer = ({ container, renderContext }) => {
   const activeTabIndex = renderContext?.activeTabIndex ?? 0;
 
   const renderedPanes = [];
-  let supportedOrdinal = 0; // class parity: only supported panes advance the index
   container.panes.forEach((pane, paneIndex) => {
     const isPaneSupported = typeof pane.isSupported === 'boolean' ? pane.isSupported : true;
     if (!isPaneSupported) return;
-    const tabIndex = supportedOrdinal;
-    supportedOrdinal += 1;
 
     // Fields inside this pane read/write their OWN tab; everything else in the
     // context is shared. (paneTabIndex is consumed by Section.renderField.)
-    const paneContext = { ...renderContext, paneTabIndex: tabIndex };
-    const paneTabKey = tabs[tabIndex]?.tabKey;
+    const paneContext = { ...renderContext, paneTabIndex: paneIndex };
+    const paneTabKey = tabs[paneIndex]?.tabKey;
     const headerSections = pane.sectionsHeaders || container.tabContent?.sections || [];
 
     renderedPanes.push({
@@ -57,11 +54,13 @@ const TabsContainer = ({ container, renderContext }) => {
   });
 
   // Must resolve through the SAME fallback chain as the pane keys — a divergent
-  // fallback leaves no pane matching activeKey and CapTab renders nothing.
+  // fallback leaves no pane matching activeKey and CapTab renders nothing. An
+  // active tab whose pane is hidden falls back to the first visible pane.
   const activeKey = tabs[activeTabIndex]?.tabKey;
-  const resolvedActiveKey = hasTabKey(activeKey)
-    ? `${activeKey}`
-    : (renderedPanes[activeTabIndex]?.key ?? renderedPanes[0]?.key ?? '1');
+  const preferredKey = hasTabKey(activeKey) ? `${activeKey}` : `${activeTabIndex}`;
+  const resolvedActiveKey = renderedPanes.some((renderedPane) => renderedPane.key === preferredKey)
+    ? preferredKey
+    : (renderedPanes[0]?.key ?? '1');
 
   return (
     <CapTab

package/v2Components/FormBuilder/Functional/tests/mpush.singlePlatform.test.js

@@ -0,0 +1,144 @@
+/**
+ * MOBILEPUSH single-platform accounts (Functional FormBuilder): the containers mark the
+ * disabled platform's pane isSupported:false. The visible pane must stay bound to its own
+ * tab (Android = formData[0], iOS = formData[1]) for display, writes and the active tab.
+ */
+import React from 'react';
+import '@testing-library/jest-dom';
+import _ from 'lodash';
+import { Provider } from 'react-redux';
+import { Router } from 'react-router-dom';
+import { injectIntl } from 'react-intl';
+import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
+import history from '../../../../utils/history';
+import { initialReducer } from '../../../../initialReducer';
+import { render, fireEvent, waitFor } from '../../../../utils/test-utils';
+import { response as mpushSchemaResponse } from '../../../../v2Containers/MobilePush/initialSchema';
+import FunctionalFormBuilder from '../index';
+
+jest.mock('redux-auth-wrapper/history4/redirect', () => ({
+  connectedRouterRedirect: jest.fn(() => (Component) => Component),
+}));
+jest.mock('../../../../services/api', () => ({
+  ...jest.requireActual('../../../../services/api'),
+  getUnsubscribeUrl: () => Promise.resolve({ response: { response: '' } }),
+}));
+
+const ComponentToRender = injectIntl(FunctionalFormBuilder);
+
+const buildSchema = (hiddenPane) => {
+  const schema = _.cloneDeep(mpushSchemaResponse.metaEntities[0].definition.textSchema);
+  schema.containers[0].panes[hiddenPane].isSupported = false;
+  return schema;
+};
+
+const buildProps = (overrides = {}) => ({
+  channel: 'MOBILEPUSH',
+  formData: {},
+  location: { pathname: '/mobilepush/create/text', query: { type: false, module: 'default' } },
+  usingTabContainer: true,
+  isFullMode: true,
+  isEdit: false,
+  startValidation: false,
+  checkValidation: false,
+  currentTab: 1,
+  tabCount: 2,
+  tabKey: '',
+  tags: [],
+  injectedTags: {},
+  onChange: jest.fn(),
+  onSubmit: jest.fn(),
+  onFormValidityChange: jest.fn(),
+  stopValidation: jest.fn(),
+  showLiquidErrorInFooter: jest.fn(),
+  setModalContent: jest.fn(),
+  handleCancelModal: jest.fn(),
+  ...overrides,
+});
+
+const renderBuilder = (props) => {
+  const store = configureStore({}, initialReducer, history);
+  const ui = (p) => (
+    <Router history={history}>
+      <Provider store={store}>
+        <div className="mobilepush-wrapper">
+          <ComponentToRender {...p} />
+        </div>
+      </Provider>
+    </Router>
+  );
+  const utils = render(ui(props));
+  return { ...utils, rerenderWith: (next) => utils.rerender(ui(next)) };
+};
+
+const lastFormData = (onChange) => onChange.mock.calls[onChange.mock.calls.length - 1][0];
+
+describe('Functional MPUSH — single-platform accounts', () => {
+  it('iOS only: create shows the active iOS pane and typing lands in formData[1]', async () => {
+    const props = buildProps({ schema: buildSchema(0) });
+    const { rerenderWith, container } = renderBuilder(props);
+    rerenderWith({ ...props, currentTab: 2 });
+
+    await waitFor(() => expect(container.querySelector('.ant-tabs-tab-active')).toHaveTextContent('iOS'));
+    fireEvent.change(document.getElementById('message-title2'), { target: { value: 'test' } });
+
+    await waitFor(() => expect(document.getElementById('message-title2')).toHaveValue('test'));
+    await waitFor(() => expect(lastFormData(props.onChange)[1]['message-title2']).toBe('test'));
+    expect(lastFormData(props.onChange)[0]['message-title2']).toBeUndefined();
+  });
+
+  it('iOS only: edit shows the saved iOS content in the active pane', async () => {
+    const props = buildProps({ schema: buildSchema(0), isEdit: true });
+    const { rerenderWith, container } = renderBuilder(props);
+    const tab0 = { 'message-title': '', 'message-editor': '', base: true };
+    rerenderWith({ ...props, currentTab: 2 });
+    rerenderWith({
+      ...props,
+      currentTab: 2,
+      formData: {
+        'template-name': 'T', 0: tab0, 1: { 'message-title2': 'I title', 'message-editor2': 'I body' }, base: tab0,
+      },
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('.ant-tabs-tab-active')).toHaveTextContent('iOS');
+      expect(document.getElementById('message-title2')).toHaveValue('I title');
+      expect(document.getElementById('message-editor2')).toHaveValue('I body');
+    });
+  });
+
+  it('Android only: edit shows the saved Android content in the active pane', async () => {
+    const props = buildProps({ schema: buildSchema(1), isEdit: true });
+    const { rerenderWith, container } = renderBuilder(props);
+    const tab0 = { 'message-title': 'A title', 'message-editor': 'A body', base: true };
+    rerenderWith({
+      ...props,
+      formData: {
+        'template-name': 'T', 0: tab0, 1: { 'message-title2': '', 'message-editor2': '' }, base: tab0,
+      },
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('.ant-tabs-tab-active')).toHaveTextContent('Android');
+      expect(document.getElementById('message-title')).toHaveValue('A title');
+      expect(document.getElementById('message-editor')).toHaveValue('A body');
+    });
+  });
+
+  it('both platforms hidden: renders no platform tabs', () => {
+    const schema = buildSchema(0);
+    schema.containers[0].panes[1].isSupported = false;
+    const props = buildProps({ schema, currentTab: 2 });
+    const { container } = renderBuilder(props);
+
+    expect(container.querySelectorAll('.ant-tabs-tab').length).toBe(0);
+  });
+
+  it('a layout without a tabs container renders without switching tabs', () => {
+    const { standalone } = buildSchema(0);
+    const props = buildProps({ schema: { channel: 'MOBILEPUSH', standalone } });
+    const { container } = renderBuilder(props);
+
+    expect(container.querySelectorAll('.ant-tabs-tab').length).toBe(0);
+  });
+});

package/v2Components/FormBuilder/Functional/tests/tabsContainer.test.js

@@ -47,16 +47,28 @@ describe('TabsContainer', () => {
     expect(c2.textContent).toBe('');
   });
 
-  it('skips isSupported:false panes WITHOUT reserving a tab index (pane->tab binding shifts)', () => {
+  it('skips isSupported:false panes but keeps each visible pane bound to its own tab', () => {
     const container = buildContainer();
     container.panes[0].isSupported = false;
+    [0, 1].forEach((activeTabIndex) => {
+      const { container: dom, unmount } = render(
+        <TabsContainer container={container} renderContext={buildContext({ activeTabIndex })} />,
+      );
+      // only the iOS pane renders, bound to tab 1 (key 'kI'), and it is ACTIVE even
+      // when the active index still points at the hidden Android tab
+      expect(dom.querySelectorAll('.ant-tabs-tab').length).toBe(1);
+      expect(dom.querySelector('.ant-tabs-tab-active').getAttribute('data-node-key')).toBe('kI');
+      unmount();
+    });
+  });
+
+  it('renders no tabs when every pane is hidden', () => {
+    const container = buildContainer();
+    container.panes.forEach((pane) => { pane.isSupported = false; }); // eslint-disable-line no-param-reassign
     const { container: dom } = render(
       <TabsContainer container={container} renderContext={buildContext()} />,
     );
-    // only the iOS pane renders, bound to tab 0 (key 'kA' — the shifted binding);
-    // it must also be ACTIVE, proving the pane key and activeKey shift together
-    expect(dom.querySelectorAll('.ant-tabs-tab').length).toBe(1);
-    expect(dom.querySelectorAll('.ant-tabs-tab-active').length).toBe(1);
+    expect(dom.querySelectorAll('.ant-tabs-tab').length).toBe(0);
   });
 
   it('renders the tab-header sections for every locale (Classic has no locale gating)', () => {

package/v2Components/FormBuilder/_formBuilder.scss

@@ -136,4 +136,25 @@
 }
 .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 {
+  padding-right: $CAP_SPACE_08;
+  margin-right: $CAP_SPACE_08;
+  border-right: 1px solid $CAP_COLOR_16;
+}
+
+.high-freq-tag-input-prefix-label {
+  font-weight: 600;
 }

package/v2Components/FormBuilder/messages.js

@@ -98,4 +98,16 @@ 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',
+  },
+  preheaderInfoTooltip: {
+    id: 'creatives.componentsV2.FormBuilder.preheaderInfoTooltip',
+    defaultMessage: 'Shows next to the subject line in the inbox, use it to add context and improve open rates. Keep it to 40–85 characters.',
+  },
 });

package/v2Components/FormBuilder/tests/mpush.characterization.test.js

@@ -457,3 +457,48 @@ describe('MPUSH characterization — imageSchema', () => {
     expect(props.onSubmit).not.toHaveBeenCalled();
   });
 });
+
+describe('MPUSH — single-platform accounts', () => {
+  const tab0 = { 'message-title': 'A title', 'message-editor': 'A body', base: true };
+  const tab1 = { 'message-title2': 'I title', 'message-editor2': 'I body' };
+  const renderEdit = async (hiddenPane, currentTab) => {
+    const { schema } = buildMpushSchema();
+    schema.containers[0].panes[hiddenPane].isSupported = false;
+    const base = buildProps({ schema, isEdit: true, formData: {} });
+    const { rerenderWith } = renderMpush(base);
+    rerenderWith({ ...base, currentTab });
+    rerenderWith({
+      ...base, currentTab, formData: { 'template-name': 'T', 0: { ...tab0 }, 1: { ...tab1 }, base: tab0 },
+    });
+  };
+
+  it('iOS only (Android hidden): edit shows the saved iOS content', async () => {
+    await renderEdit(0, 2);
+    await waitFor(() => {
+      expect(document.getElementById('message-title2')).toHaveValue('I title');
+      expect(document.getElementById('message-editor2')).toHaveValue('I body');
+    });
+    expect(screen.queryByText('Android')).toBeNull();
+  });
+
+  it('Android only (iOS hidden): edit shows the saved Android content', async () => {
+    await renderEdit(1, 1);
+    await waitFor(() => {
+      expect(titleInput()).toHaveValue('A title');
+      expect(editorInput()).toHaveValue('A body');
+    });
+    expect(screen.queryByText('iOS')).toBeNull();
+  });
+
+  it('both platforms hidden: renders no tabs and leaves currentTab alone', () => {
+    const { schema } = buildMpushSchema();
+    schema.containers[0].panes[0].isSupported = false;
+    schema.containers[0].panes[1].isSupported = false;
+    const base = buildProps({ schema, formData: _.cloneDeep(seedTabs) });
+    const { rerenderWith } = renderMpush(base);
+    rerenderWith({ ...base, currentTab: 2 });
+
+    expect(screen.queryByText('Android')).toBeNull();
+    expect(screen.queryByText('iOS')).toBeNull();
+  });
+});

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

@@ -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?.subject || '',
+            emailPreHeader: emailBase?.preheader || '',
           };
           delete templateData.html_content;
           delete templateData.subject;
+          delete templateData.preheader;
         }
         break;
       case constants.MOBILE_PUSH:

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 ([undefined, ''].includes(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: "e.g. Get 20% off your next order",
+                      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: 85,
+                      errorMessage: "Unsubscribe tag is not allowed in Pre-header.",
+                      supportedEvents: [
+                        "onChange",
+                        "onTagSelect",
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
             {
               type: "multicols",
               inputFields: [