@capillarytech/creatives-library 9.0.73-alpha.sprint-cap-212983.19 → 9.1.0

package/v2Components/CommonTestAndPreview/tests/sagas.test.js

@@ -224,6 +224,7 @@ describe('CommonTestAndPreview Sagas', () => {
       expect(generator.next().value).toEqual(
         call(Api.extractTagsWithMetaData, {
           messageTitle: 'Hello {{name}}',
+          messageSubtitle: '',
           messageBody: 'Welcome {{email}}',
         })
       );
@@ -238,6 +239,25 @@ describe('CommonTestAndPreview Sagas', () => {
       expect(generator.next().done).toBe(true);
     });
 
+    it('should pass templatePreheader through as messageSubtitle', () => {
+      const action = {
+        payload: {
+          templateSubject: 'Hello {{name}}',
+          templatePreheader: 'Enjoy {{discount}}',
+          templateContent: 'Welcome {{email}}',
+        },
+      };
+      const generator = extractTagsSaga(action);
+
+      expect(generator.next().value).toEqual(
+        call(Api.extractTagsWithMetaData, {
+          messageTitle: 'Hello {{name}}',
+          messageSubtitle: 'Enjoy {{discount}}',
+          messageBody: 'Welcome {{email}}',
+        })
+      );
+    });
+
     it('should handle empty templateSubject', () => {
       const action = {
         payload: {
@@ -250,6 +270,7 @@ describe('CommonTestAndPreview Sagas', () => {
       expect(generator.next().value).toEqual(
         call(Api.extractTagsWithMetaData, {
           messageTitle: '',
+          messageSubtitle: '',
           messageBody: 'Welcome {{email}}',
         })
       );
@@ -268,6 +289,7 @@ describe('CommonTestAndPreview Sagas', () => {
       expect(generator.next().value).toEqual(
         call(Api.extractTagsWithMetaData, {
           messageTitle: 'Hello {{name}}',
+          messageSubtitle: '',
           messageBody: '',
         })
       );
@@ -284,6 +306,7 @@ describe('CommonTestAndPreview Sagas', () => {
       expect(generator.next().value).toEqual(
         call(Api.extractTagsWithMetaData, {
           messageTitle: '',
+          messageSubtitle: '',
           messageBody: 'Welcome {{email}}',
         })
       );
@@ -301,6 +324,7 @@ describe('CommonTestAndPreview Sagas', () => {
       expect(generator.next().value).toEqual(
         call(Api.extractTagsWithMetaData, {
           messageTitle: 'Hello {{name}}',
+          messageSubtitle: '',
           messageBody: '',
         })
       );

package/v2Components/EmailMobilePreview/index.js

@@ -29,7 +29,7 @@ const deviceAspectRatio = {
   },
 };
 
-class EmailMobilePreview extends React.Component {
+export class EmailMobilePreview extends React.Component {
   static getDerivedStateFromProps(props) {
     if (props.showAllDevices) {
       return {
@@ -66,6 +66,7 @@ class EmailMobilePreview extends React.Component {
       templateContent,
       enableShowAllDevices,
       templateSubject,
+      templatePreHeader,
     } = this.props;
     const copyContent = templateContent && removeLinksFromHtmlContent(templateContent);
     const updateCopyContent = templateContent && iframePreviewAdjustWidth(copyContent);
@@ -76,6 +77,10 @@ class EmailMobilePreview extends React.Component {
       <CapLabel className="email-subject-mobile" type="label2">
         <FormattedMessage {...messages.subject} /> {templateSubject}</CapLabel>
     );
+    const emailPreHeaderLabel = templatePreHeader && (
+      <CapLabel className="email-preheader-mobile" type="label2">
+        <FormattedMessage {...messages.preheader} /> {templatePreHeader}</CapLabel>
+    );
 
     return (
       <div className="email-mobile-preview-container">
@@ -100,6 +105,7 @@ class EmailMobilePreview extends React.Component {
                       <img src={mobileBody} alt="capillary" width="386" />
                       <div className={`${messageContainerName} ${emailSubjectLabel ? 'with-subject' : ''}`}>
                         {emailSubjectLabel}
+                        {emailPreHeaderLabel}
                         <iframe srcDoc={updateCopyContent} {...deviceAspectRatio.mobile} >
                           <p><FormattedMessage {...messages.noIframeSupport}/></p>
                         </iframe>
@@ -127,6 +133,7 @@ class EmailMobilePreview extends React.Component {
 EmailMobilePreview.propTypes = {
   templateContent: PropTypes.string,
   templateSubject: PropTypes.string,
+  templatePreHeader: PropTypes.string,
   templateData: PropTypes.object,
   templateActions: PropTypes.object,
   onClickShowInAllDevices: PropTypes.func,

package/v2Components/EmailMobilePreview/index.scss

@@ -44,10 +44,19 @@ $classPrefix: email-mobile-preview-container;
                 justify-content: center;
               }
               .email-subject-mobile {
-                width: 227px;
+                width: 14.1875rem;
                 text-align: left;
-                margin: 8px 0;
-                margin-left: 4px;
+                margin: 0.5rem 0.25rem 0;
+                padding-bottom: 0.5rem;
+                border-bottom: 0.0625rem solid #d9d9d9;
+              }
+              .email-preheader-mobile {
+                width: 14.1875rem;
+                text-align: left;
+                margin: 0.5rem 0.25rem 0;
+                padding-bottom: 0.5rem;
+                border-bottom: 0.0625rem solid #d9d9d9;
+                color: #8c8c8c;
               }
               // .mobile-message-container {
               //   position: absolute;

package/v2Components/EmailMobilePreview/tests/index.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { EmailMobilePreview } from '../index';
+
+describe('<EmailMobilePreview />', () => {
+  const baseProps = {
+    templateContent: '<p>Body</p>',
+    templateActions: {
+      getTemplateDetails: jest.fn(),
+    },
+  };
+
+  it('does not render a pre-header label when templatePreHeader is not provided', () => {
+    const wrapper = shallow(<EmailMobilePreview {...baseProps} templateSubject="Hello" />);
+    expect(wrapper.find('.email-preheader-mobile')).toHaveLength(0);
+  });
+
+  it('renders the pre-header label when templatePreHeader is provided', () => {
+    const wrapper = shallow(
+      <EmailMobilePreview {...baseProps} templateSubject="Hello" templatePreHeader="Enjoy 20% off" />
+    );
+    const label = wrapper.find('.email-preheader-mobile');
+    expect(label).toHaveLength(1);
+    expect(label.text()).toContain('Enjoy 20% off');
+  });
+
+  it('renders the pre-header label even when subject is absent', () => {
+    const wrapper = shallow(<EmailMobilePreview {...baseProps} templatePreHeader="Enjoy 20% off" />);
+    expect(wrapper.find('.email-preheader-mobile')).toHaveLength(1);
+  });
+});

package/v2Components/EmailPreviewV2/_emailPreviewV2.scss

@@ -1,4 +1,8 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
 $classPrefix: email-preview-v2;
+$preheaderMutedColor: #8c8c8c;
+
 .#{$classPrefix}:not(.email-mobile-preview-container){
     #emailPreivew-container {
         position: relative;
@@ -54,19 +58,47 @@ $classPrefix: email-preview-v2;
               .email-subject-mobile {
                 width: 310px;
                 text-align: left;
-                margin: 8px 0;
-                margin-left: 4px;
+                margin: 0.5rem 0.25rem 0;
+                padding-bottom: 0.5rem;
+                border-bottom: 0.0625rem solid $CAP_COLOR_16;
               }
               .email-subject-tablet {
                 width: 450px;
                 text-align: left;
-                margin: 8px 0;
-                margin-left: 4px;
+                margin: 0.5rem 0.25rem 0;
+                padding-bottom: 0.5rem;
+                border-bottom: 0.0625rem solid $CAP_COLOR_16;
               }
               .email-subject-desktop {
                 text-align: left;
                 margin-left: 6%;
-                margin-bottom: 8px;
+                margin-right: 6%;
+                padding-bottom: 0.5rem;
+                border-bottom: 0.0625rem solid $CAP_COLOR_16;
+              }
+              .email-preheader-mobile {
+                width: 19.375rem;
+                text-align: left;
+                margin: 0.5rem 0.25rem 0;
+                padding-bottom: 0.5rem;
+                border-bottom: 0.0625rem solid $CAP_COLOR_16;
+                color: $preheaderMutedColor;
+              }
+              .email-preheader-tablet {
+                width: 28.125rem;
+                text-align: left;
+                margin: 0.5rem 0.25rem 0;
+                padding-bottom: 0.5rem;
+                border-bottom: 0.0625rem solid $CAP_COLOR_16;
+                color: $preheaderMutedColor;
+              }
+              .email-preheader-desktop {
+                text-align: left;
+                margin-left: 6%;
+                margin-right: 6%;
+                padding-bottom: 0.5rem;
+                border-bottom: 0.0625rem solid $CAP_COLOR_16;
+                color: $preheaderMutedColor;
               }
               .tablet-message-container {
                 position: absolute;

package/v2Components/EmailPreviewV2/index.js

@@ -30,12 +30,12 @@ const deviceAspectRatio = {
     height: "500",
     width: "1024",
   }),
-  tablet: (emailSubject) => ({
-    height: emailSubject ? "570" : "600",
+  tablet: (emailSubject, emailPreHeader) => ({
+    height: emailSubject ? (emailPreHeader ? "545" : "570") : "600",
     width: "450",
   }),
-  mobile: (emailSubject) => ({
-    height: emailSubject ? "541" : "511",
+  mobile: (emailSubject, emailPreHeader) => ({
+    height: emailSubject ? (emailPreHeader ? "516" : "541") : "511",
     width: "340",
   }),
 };
@@ -72,25 +72,36 @@ export class EmailPreviewV2 extends React.Component {
   render() {
     let messageContainerName = '';
     const {currentDevice} = this.state;
-    const { templateContent, templateData = {}, templateSubject } = this.props;
+    const {
+      templateContent, templateData = {}, templateSubject, templatePreHeader,
+    } = this.props;
     const copyContent = templateContent && removeLinksFromHtmlContent(templateContent);
     const updateCopyContent = templateContent && iframePreviewAdjustWidth(copyContent);
     let subjectClassName = 'email-subject-desktop';
+    let preheaderClassName = 'email-preheader-desktop';
     if (currentDevice === devices.tablet) {
       messageContainerName = 'tablet-message-container';
       subjectClassName = "email-subject-tablet";
+      preheaderClassName = "email-preheader-tablet";
     } else if (currentDevice === devices.mobile) {
       messageContainerName = 'mobile-message-container';
       subjectClassName = "email-subject-mobile";
+      preheaderClassName = "email-preheader-mobile";
     }
     const emailSubject = get(templateData, 'versions.base.subject') || templateSubject;
+    const emailPreHeader = get(templateData, 'versions.base.preheader') || templatePreHeader;
     const emailSubjectLabel = emailSubject && (
       <CapLabel className={subjectClassName} type="label2">
         <FormattedMessage {...messages.subject} /> {emailSubject}</CapLabel>
     );
+    const emailPreHeaderLabel = emailPreHeader && (
+      <CapLabel className={preheaderClassName} type="label2">
+        <FormattedMessage {...messages.preheader} /> {emailPreHeader}</CapLabel>
+    );
     const iframeDiv = (<div className={`${messageContainerName}`}>
       {emailSubjectLabel}
-      <iframe srcDoc={updateCopyContent} {...deviceAspectRatio[currentDevice](emailSubject)} >
+      {emailPreHeaderLabel}
+      <iframe srcDoc={updateCopyContent} {...deviceAspectRatio[currentDevice](emailSubject, emailPreHeader)} >
         <p><FormattedMessage {...messages.browserDoesntSupportIframe} /></p>
       </iframe>
     </div>);
@@ -171,6 +182,7 @@ export class EmailPreviewV2 extends React.Component {
 EmailPreviewV2.propTypes = {
   templateContent: PropTypes.string,
   templateSubject: PropTypes.string,
+  templatePreHeader: PropTypes.string,
   templateData: PropTypes.object,
   templateActions: PropTypes.object,
   device: PropTypes.string,

package/v2Components/EmailPreviewV2/messages.js

@@ -42,6 +42,10 @@ export default defineMessages({
     id: 'creatives.componentsV2.EmailPreviewV2.subject',
     defaultMessage: 'Subject:',
   },
+  preheader: {
+    id: 'creatives.componentsV2.EmailPreviewV2.preheader',
+    defaultMessage: 'Pre-header:',
+  },
   browserDoesntSupportIframe: {
     id: 'creatives.componentsV2.EmailPreviewV2.browserDoesntSupportIframe',
     defaultMessage: 'Your browser does not support iframes.',

package/v2Components/EmailPreviewV2/tests/index.test.js

@@ -13,4 +13,47 @@ describe('<EmailPreviewV2 />', () => {
     />);
     expect(compoent).toMatchSnapshot();
   });
+
+  const baseProps = {
+    templateData: {},
+    templateActions: {
+      getTemplateDetails: jest.fn(),
+      resetTemplateData: jest.fn(),
+    },
+  };
+
+  // The desktop pane's content is passed as a prop to CapTab (not a rendered child), so
+  // shallow() won't reach into it via .find() directly - render that pane's content JSX
+  // on its own to inspect it.
+  const getDesktopPaneWrapper = (wrapper) => {
+    const panes = wrapper.find('CapTab').prop('panes');
+    const desktopPane = panes.find((pane) => pane.key === 'desktop');
+    return shallow(desktopPane.content);
+  };
+
+  it('does not render a pre-header label when templatePreHeader is not provided', () => {
+    const wrapper = shallow(<EmailPreviewV2 {...baseProps} templateSubject="Hello" />);
+    expect(getDesktopPaneWrapper(wrapper).find('.email-preheader-desktop')).toHaveLength(0);
+  });
+
+  it('renders the pre-header label for the current (desktop) device by default', () => {
+    const wrapper = shallow(
+      <EmailPreviewV2 {...baseProps} templateSubject="Hello" templatePreHeader="Enjoy 20% off" />
+    );
+    const label = getDesktopPaneWrapper(wrapper).find('.email-preheader-desktop');
+    expect(label).toHaveLength(1);
+    expect(label.text()).toContain('Enjoy 20% off');
+  });
+
+  it('prefers templateData.versions.base.preheader over the templatePreHeader prop', () => {
+    const wrapper = shallow(
+      <EmailPreviewV2
+        {...baseProps}
+        templateData={{ versions: { base: { preheader: 'From template data' } } }}
+        templatePreHeader="From prop"
+      />
+    );
+    const label = getDesktopPaneWrapper(wrapper).find('.email-preheader-desktop');
+    expect(label.text()).toContain('From template data');
+  });
 });

package/v2Components/FormBuilder/Classic.js

@@ -30,7 +30,9 @@ import CapUploader from '@capillarytech/cap-ui-library/CapUploader';
 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 CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
 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 +63,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 +72,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 +113,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 +146,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 +209,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);
@@ -596,6 +638,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     if (!_.isEqual(prevProps.isTransactional, this.props.isTransactional)) {
       this.validateForm(this.props.tags, this.props.injectedTags);
     }
+    const panes = _.get(this.props, 'schema.containers[0].panes', []);
+    if (_.toUpper(_.get(this.props, 'schema.channel')) === MOBILE_PUSH && _.get(panes, `[${this.state.currentTab - 1}].isSupported`) === false) {
+      const visiblePaneIndex = _.findIndex(panes, (pane) => pane?.isSupported !== false);
+      if (visiblePaneIndex !== -1) {
+        this.setState({ currentTab: visiblePaneIndex + 1 });
+      }
+    }
   }
 
   onEdit() {
@@ -1245,6 +1294,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 +3506,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 +3878,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 +3899,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 +3917,47 @@ 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: (
+                      <CapRow align="middle" type="flex" noWrap gap={4} className="high-freq-tag-input-prefix">
+                        <CapLabelInline type="label2" className="high-freq-tag-input-prefix-label">
+                          {val.label || ''}
+                        </CapLabelInline>
+                        {val.id === 'template-preheader' && (
+                          <CapTooltipWithInfo title={this.props.intl.formatMessage(messages.preheaderInfoTooltip)} />
+                        )}
+                      </CapRow>
+                    ),
+                  }
+                  : (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 +4365,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 />
@@ -4281,7 +4397,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     const renderedPanes = [];
     let renderedSections = [];
     let renderedContentSections = [];
-    let paneIndex = 1;
     let panes = [];
     let result = [];
     let extraActionSections = [];
@@ -4292,6 +4407,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       case "tabs":
         panes = container.panes;
         _.forEach(panes, (pane, index) => {
+          const paneIndex = index + 1;
           renderedSections = pane.sections.map((section) => {
             result = this.renderSection(section, paneIndex);
             return result;
@@ -4341,7 +4457,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 })
               ),
             });
-            paneIndex += 1;
           }
         });
         extraActionSections = container.tabBarExtraContent && container.tabBarExtraContent.sections ? container.tabBarExtraContent.sections.map((section) => {
@@ -4352,11 +4467,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         if (stateTabKey && stateTabKey !== '') {
           activeTabKey = stateTabKey;
         }
+        activeTabKey = activeTabKey && activeTabKey !== '' ? `${activeTabKey}` : '1';
+        if (renderedPanes?.length && !_.some(renderedPanes, (renderedPane) => `${renderedPane?.key}` === activeTabKey)
+          && _.some(panes, (pane) => pane?.isSupported === false)) {
+          activeTabKey = `${renderedPanes[0]?.key}`;
+        }
         return (
           <CapTab
             className={`cap-tabs-${container.id}`}
-            activeKey={activeTabKey && activeTabKey !== '' ? `${activeTabKey}` : '1'}
-            defaultActiveKey={activeTabKey && activeTabKey !== '' ? `${activeTabKey}` : '1'}
+            activeKey={activeTabKey}
+            defaultActiveKey={activeTabKey}
             onChange={(data, e) => { this.callChildEvent(data, container, 'onTabChange', e); }}
             onEdit={(data, e) => this.onEdit(data, e)}
             style={{width: '100%'}}

package/v2Components/FormBuilder/Functional/FormBuilderShell.js

@@ -303,6 +303,15 @@ const FormBuilderShell = (props) => {
     dispatch(setActiveTab(currentTabProp - 1));
   }, [currentTabProp, hasTabs]);
 
+  // Field writes target the active tab, so it must never be a hidden (isSupported: false) pane.
+  useEffect(() => {
+    if (!hasTabs) return;
+    const panes = schema?.containers?.find((container) => container?.type === 'tabs')?.panes || [];
+    if (panes[activeTabIndex]?.isSupported !== false) return;
+    const visiblePaneIndex = panes.findIndex((pane) => pane?.isSupported !== false);
+    if (visiblePaneIndex !== -1) dispatch(setActiveTab(visiblePaneIndex));
+  }, [activeTabIndex, schema, hasTabs]);
+
   // ---- container-driven modal visibility (mirrors Classic's props->state modal sync) ----
   useEffect(() => {
     setModalVisible(Boolean(showModal));