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

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/SlideBoxContent.js

@@ -653,7 +653,6 @@ export function SlideBoxContent(props) {
           showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
           handleTestAndPreview={handleTestAndPreview}
           handleCloseTestAndPreview={handleCloseTestAndPreview}
-          handleClose={handleClose}
           onContentValidityChange={onContentValidityChange}
         />
       }
@@ -1158,7 +1157,6 @@ export function SlideBoxContent(props) {
         handleTestAndPreview={handleTestAndPreview}
         handleCloseTestAndPreview={handleCloseTestAndPreview}
         isTestAndPreviewMode={isTestAndPreviewMode}
-        handleClose={handleClose}
         params={{
           id: templateData._id,
         }}

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: [

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',

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');
+      });
+    });
+  });
 });