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

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

@@ -536,6 +536,45 @@ describe('CommonTestAndPreview', () => {
       expect(initialPayload.emailDeliverySettings.channelSettings.channel).toBe(CHANNELS.EMAIL);
     });
 
+    it('should send the pre-header as messagePreHeader alongside messageSubject/messageBody for EMAIL', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.EMAIL}
+            formData={{
+              ...defaultProps.formData,
+              'template-preheader': 'Test Preheader',
+            }}
+          />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+        expect(typeof lastSendTestMessageProps.handleSendTestMessage).toBe('function');
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      expect(mockActions.createMessageMetaRequested).toHaveBeenCalled();
+      const [initialPayload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      expect(initialPayload.emailMessageContent.messageSubject).toBe('Test Subject');
+      expect(initialPayload.emailMessageContent.messagePreHeader).toBe('Test Preheader');
+    });
+
+    it('should default messagePreHeader to an empty string when no pre-header is present for EMAIL', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...defaultProps} channel={CHANNELS.EMAIL} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+        expect(typeof lastSendTestMessageProps.handleSendTestMessage).toBe('function');
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [initialPayload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      expect(initialPayload.emailMessageContent.messagePreHeader).toBe('');
+    });
+
     it('should include delivery settings in payload when handleSendTestMessage is called for SMS', async () => {
       render(
         <TestWrapper>
@@ -2977,6 +3016,37 @@ describe('CommonTestAndPreview', () => {
       expect(mockActions.extractTagsRequested).toHaveBeenCalled();
     });
 
+    it('should pass template-preheader separately (not merged into templateSubject) in the extraction payload for EMAIL', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.EMAIL,
+        formData: {
+          'template-subject': 'Hello {{name}}',
+          'template-preheader': 'Enjoy {{discount}} off, {{name}}',
+          0: {
+            activeTab: 'base',
+            base: {
+              'template-content': '<html>Your order {{orderId}} is ready</html>',
+            },
+          },
+        },
+      };
+
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+
+      expect(mockActions.extractTagsRequested).toHaveBeenCalled();
+      const call = mockActions.extractTagsRequested.mock.calls.find(
+        ([payload]) => payload?.templatePreheader?.includes('{{discount}}')
+      );
+      expect(call).toBeDefined();
+      expect(call[0].templateSubject).toBe('Hello {{name}}');
+      expect(call[0].templatePreheader).toBe('Enjoy {{discount}} off, {{name}}');
+    });
+
     it('should extract tags from SMS content', async () => {
       const props = {
         ...defaultProps,
@@ -3759,6 +3829,31 @@ describe('CommonTestAndPreview', () => {
       expect(mockActions.updatePreviewRequested).toHaveBeenCalledTimes(1);
     });
 
+    it('should include messageSubtitle alongside messageTitle/messageBody in the EMAIL preview payload', async () => {
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview
+            {...defaultProps}
+            channel={CHANNELS.EMAIL}
+            formData={{
+              ...defaultProps.formData,
+              'template-preheader': 'Enjoy {{discount}}',
+            }}
+          />
+        </TestWrapper>
+      );
+
+      await waitFor(() => expect(lastCustomValuesEditorProps).not.toBeNull());
+
+      lastCustomValuesEditorProps.handleDiscardCustomValues();
+
+      expect(mockActions.updatePreviewRequested).toHaveBeenCalledTimes(1);
+      const [payload] = mockActions.updatePreviewRequested.mock.calls[0];
+      expect(payload.messageTitle).toBe('Test Subject');
+      expect(payload.messageSubtitle).toBe('Enjoy {{discount}}');
+      expect(payload.messageBody).toBeDefined();
+    });
+
     it('should call updatePreviewRequested with RCS channel when handleDiscardCustomValues is invoked for RCS with fallback', async () => {
       render(
         <TestWrapper>

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,3 +1,5 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables';
+
 $classPrefix: email-preview-v2;
 .#{$classPrefix}:not(.email-mobile-preview-container){
     #emailPreivew-container {
@@ -54,19 +56,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: #8c8c8c;
+              }
+              .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: #8c8c8c;
+              }
+              .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: #8c8c8c;
               }
               .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');
+  });
 });