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

package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/EmailPreviewContent.test.js

@@ -481,6 +481,33 @@ describe('EmailPreviewContent', () => {
 
       expect(container.querySelector('.email-content')).toBeTruthy();
     });
+
+    it('should not render a pre-header row when preheader is not provided', () => {
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...defaultProps} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelector('.email-preheader')).toBeNull();
+    });
+
+    it('should render the pre-header text when provided', () => {
+      const props = {
+        ...defaultProps,
+        preheader: 'Unlock 20% off your next order',
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      const preheaderElement = container.querySelector('.email-preheader');
+      expect(preheaderElement).toBeTruthy();
+      expect(preheaderElement.textContent).toBe('Unlock 20% off your next order');
+    });
   });
 
   describe('Device Handling', () => {

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

@@ -46,6 +46,7 @@ jest.mock('../../UnifiedPreview/EmailPreviewContent', () => ({
     <div data-testid="email-preview">
       <div data-testid="email-content">{props.content}</div>
       <div data-testid="email-subject">{props.subject}</div>
+      <div data-testid="email-preheader">{props.preheader}</div>
       <div data-testid="email-device">{props.device}</div>
     </div>
   ),
@@ -288,6 +289,45 @@ describe('UnifiedPreview', () => {
       expect(screen.getByTestId('email-subject')).toHaveTextContent('Email Subject');
     });
 
+    it('should pass resolvedPreheader through as the preheader prop', () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.EMAIL,
+        content: {
+          resolvedBody: '<html>Email Content</html>',
+          resolvedTitle: 'Email Subject',
+          resolvedPreheader: 'Unlock 20% off',
+        },
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('email-preheader')).toHaveTextContent('Unlock 20% off');
+    });
+
+    it('should default preheader to an empty string when resolvedPreheader is absent', () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.EMAIL,
+        content: {
+          resolvedBody: '<html>Email Content</html>',
+          resolvedTitle: 'Email Subject',
+        },
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('email-preheader')).toHaveTextContent('');
+    });
+
     it('should handle empty resolvedBody', () => {
       const props = {
         ...defaultProps,

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

@@ -7,9 +7,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  render, screen, waitFor, act,
-} from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import CommonTestAndPreview from '../index';
 import { CHANNELS, MEDIA_TYPE_CAROUSEL } from '../constants';
@@ -72,14 +70,12 @@ jest.mock('../SendTestMessage', () => {
   };
 });
 
-let lastPreviewSectionProps = null;
 jest.mock('../PreviewSection', () => {
   // eslint-disable-next-line global-require, import/no-extraneous-dependencies
   const ReactLib = require('react');
   return {
     __esModule: true,
-    default: function MockPreviewSection(props) {
-      lastPreviewSectionProps = props;
+    default: function MockPreviewSection() {
       return ReactLib.createElement('div', { 'data-testid': 'preview-section' }, 'Preview Section');
     },
   };
@@ -203,7 +199,6 @@ describe('CommonTestAndPreview', () => {
     lastSendTestMessageProps = null;
     lastLeftPanelContentProps = null;
     lastCustomValuesEditorProps = null;
-    lastPreviewSectionProps = null;
     // Reset all mock function implementations
     Object.values(mockActions).forEach((mockFn) => {
       if (jest.isMockFunction(mockFn)) {
@@ -541,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>
@@ -2982,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,
@@ -3764,17 +3829,16 @@ describe('CommonTestAndPreview', () => {
       expect(mockActions.updatePreviewRequested).toHaveBeenCalledTimes(1);
     });
 
-    it('should call updatePreviewRequested with RCS channel when handleDiscardCustomValues is invoked for RCS with fallback', async () => {
+    it('should include messageSubtitle alongside messageTitle/messageBody in the EMAIL preview payload', async () => {
       render(
         <TestWrapper>
           <CommonTestAndPreview
             {...defaultProps}
-            channel={CHANNELS.RCS}
-            smsFallbackContent={{
-              templateContent: 'Fallback {{name}}',
-              content: 'Fallback {{name}}',
+            channel={CHANNELS.EMAIL}
+            formData={{
+              ...defaultProps.formData,
+              'template-preheader': 'Enjoy {{discount}}',
             }}
-            formData={{}}
           />
         </TestWrapper>
       );
@@ -3783,103 +3847,34 @@ describe('CommonTestAndPreview', () => {
 
       lastCustomValuesEditorProps.handleDiscardCustomValues();
 
-      // updatePreviewRequested is called; syncSmsFallbackPreview (which hits Api directly) is NOT called
       expect(mockActions.updatePreviewRequested).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('client-side preview fill-in when the preview API reply is not an object', () => {
-    const getPreviewContent = () => lastPreviewSectionProps.unifiedPreviewProps.content;
-
-    const enterValuesAndUpdatePreview = async (values) => {
-      await waitFor(() => expect(lastCustomValuesEditorProps).not.toBeNull());
-      act(() => {
-        Object.entries(values).forEach(([tag, value]) => lastCustomValuesEditorProps.handleCustomValueChange(tag, value));
-      });
-      await act(async () => {
-        await lastCustomValuesEditorProps.handleUpdatePreview();
-      });
-    };
-
-    const whatsappContent = {
-      templateHeader: 'Order for {{1}}',
-      templateMsg: 'Hi {{1}}, delivered by {{2}}',
-    };
-
-    it('fills entered values into the WhatsApp header and message', async () => {
-      render(
-        <TestWrapper>
-          <CommonTestAndPreview
-            {...defaultProps}
-            channel={CHANNELS.WHATSAPP}
-            content={whatsappContent}
-            formData={whatsappContent}
-          />
-        </TestWrapper>
-      );
-
-      await enterValuesAndUpdatePreview({ 1: 'Sh', 2: 'Monday' });
-
-      expect(getPreviewContent().templateHeader).toBe('Order for Sh');
-      expect(getPreviewContent().templateMsg).toBe('Hi Sh, delivered by Monday');
-    });
-
-    it('fills entered values when the preview API returns an object with unresolved {{N}}', async () => {
-      render(
-        <TestWrapper>
-          <CommonTestAndPreview
-            {...defaultProps}
-            channel={CHANNELS.WHATSAPP}
-            content={whatsappContent}
-            formData={whatsappContent}
-            previewData={{ resolvedBody: JSON.stringify(whatsappContent) }}
-          />
-        </TestWrapper>
-      );
-
-      await enterValuesAndUpdatePreview({ 1: 'Shash', 2: 'Name' });
-
-      expect(getPreviewContent().templateHeader).toBe('Order for Shash');
-      expect(getPreviewContent().templateMsg).toBe('Hi Shash, delivered by Name');
+      const [payload] = mockActions.updatePreviewRequested.mock.calls[0];
+      expect(payload.messageTitle).toBe('Test Subject');
+      expect(payload.messageSubtitle).toBe('Enjoy {{discount}}');
+      expect(payload.messageBody).toBeDefined();
     });
 
-    it('restores WhatsApp placeholders after Discard custom values', async () => {
-      render(
-        <TestWrapper>
-          <CommonTestAndPreview
-            {...defaultProps}
-            channel={CHANNELS.WHATSAPP}
-            content={whatsappContent}
-            formData={whatsappContent}
-          />
-        </TestWrapper>
-      );
-
-      await enterValuesAndUpdatePreview({ 1: 'Sh', 2: 'Monday' });
-      act(() => {
-        lastCustomValuesEditorProps.handleDiscardCustomValues();
-      });
-
-      expect(getPreviewContent().templateMsg).toBe('Hi {{1}}, delivered by {{2}}');
-    });
-
-    it('fills entered values into an RCS standalone card', async () => {
-      const rcsContent = { templateHeader: 'Store {{1}}', templateMessage: 'Visit store for {{1}} offer' };
+    it('should call updatePreviewRequested with RCS channel when handleDiscardCustomValues is invoked for RCS with fallback', async () => {
       render(
         <TestWrapper>
           <CommonTestAndPreview
             {...defaultProps}
             channel={CHANNELS.RCS}
-            content={rcsContent}
-            formData={{ rcsTitle: 'Store {{1}}', rcsDesc: 'Visit store for {{1}} offer' }}
+            smsFallbackContent={{
+              templateContent: 'Fallback {{name}}',
+              content: 'Fallback {{name}}',
+            }}
+            formData={{}}
           />
         </TestWrapper>
       );
 
-      await enterValuesAndUpdatePreview({ 1: 'Goog' });
+      await waitFor(() => expect(lastCustomValuesEditorProps).not.toBeNull());
 
-      expect(getPreviewContent().templateHeader).toBe('Store Goog');
-      expect(getPreviewContent().templateMessage).toBe('Visit store for Goog offer');
+      lastCustomValuesEditorProps.handleDiscardCustomValues();
+
+      // updatePreviewRequested is called; syncSmsFallbackPreview (which hits Api directly) is NOT called
+      expect(mockActions.updatePreviewRequested).toHaveBeenCalledTimes(1);
     });
   });
 });

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/CommonTestAndPreview/tests/utils.test.js

@@ -10,9 +10,6 @@ import {
   hasTrimmedText,
   getCarouselButtonsWithTitles,
   getCarouselButtonSlotCount,
-  mergeSyntheticMustacheTags,
-  getWhatsappTagExtractionText,
-  mergeZaloUnfilledParamTags,
 } from '../utils';
 
 describe('CommonTestAndPreview/utils', () => {
@@ -200,67 +197,4 @@ describe('CommonTestAndPreview/utils', () => {
       expect(getCarouselButtonSlotCount([{ buttons: [{ title: '  ' }] }])).toBe(0);
     });
   });
-
-  describe('getWhatsappTagExtractionText', () => {
-    it('joins header and message', () => {
-      expect(getWhatsappTagExtractionText({ templateHeader: 'Order {{1}}', templateMsg: 'Hi {{2}}' }))
-        .toBe('Order {{1}} Hi {{2}}');
-    });
-
-    it('handles missing fields', () => {
-      expect(getWhatsappTagExtractionText({ templateMsg: 'Hi {{1}}' })).toBe('Hi {{1}}');
-      expect(getWhatsappTagExtractionText(undefined)).toBe('');
-    });
-
-    it('surfaces unmapped WhatsApp slots as tags alongside API tags', () => {
-      const apiTags = [{ name: 'adv', metaData: { userDriven: false }, children: [] }];
-      const text = getWhatsappTagExtractionText({
-        templateHeader: 'Order {{1}}',
-        templateMsg: 'Hi {{adv}}, by {{2}}',
-      });
-      expect(mergeSyntheticMustacheTags(apiTags, text).map((tag) => tag.name)).toEqual(['adv', '1', '2']);
-    });
-  });
-
-  describe('mergeZaloUnfilledParamTags', () => {
-    const formData = {
-      templateListParams: [
-        { name: 'danh_xung', value: '' },
-        { name: 'name', value: '{{first_name}}' },
-        { name: 'ma_so', value: '   ' },
-      ],
-    };
-
-    it('adds a tag for each empty param', () => {
-      expect(mergeZaloUnfilledParamTags([], formData)).toEqual([
-        { name: 'danh_xung', metaData: { userDriven: false }, children: [] },
-        { name: 'ma_so', metaData: { userDriven: false }, children: [] },
-      ]);
-    });
-
-    it('keeps API tags and does not duplicate names', () => {
-      const apiTags = [{ name: 'danh_xung', metaData: { userDriven: true }, children: [] }];
-      const result = mergeZaloUnfilledParamTags(apiTags, formData);
-      expect(result.map((tag) => tag.name)).toEqual(['danh_xung', 'ma_so']);
-      expect(result[0]).toBe(apiTags[0]);
-    });
-
-    it('returns API tags when there are no params', () => {
-      expect(mergeZaloUnfilledParamTags(undefined, {})).toEqual([]);
-    });
-
-    it('handles missing args, unnamed params and null values', () => {
-      expect(mergeZaloUnfilledParamTags()).toEqual([]);
-      expect(mergeZaloUnfilledParamTags(null, {
-        templateListParams: [{ value: '' }, { name: 'a', value: null }, { name: 'b' }],
-      }).map((tag) => tag.name)).toEqual(['a', 'b']);
-    });
-  });
-
-  describe('mergeSyntheticMustacheTags', () => {
-    it('handles null API tags', () => {
-      expect(mergeSyntheticMustacheTags(null, 'Hi {{1}}').map((tag) => tag.name)).toEqual(['1']);
-      expect(mergeSyntheticMustacheTags(null, 'no tags')).toEqual([]);
-    });
-  });
 });

package/v2Components/CommonTestAndPreview/utils.js

@@ -61,20 +61,6 @@ export const mergeSyntheticMustacheTags = (apiTags = [], rawText = '') => {
   return [...(apiTags ?? []), ...synthetic];
 };
 
-/** WhatsApp header + body text, scanned for unmapped `{{N}}` slots. */
-export const getWhatsappTagExtractionText = (formDataObj) => (
-  `${formDataObj?.templateHeader || ''} ${formDataObj?.templateMsg || ''}`.trim()
-);
-
-/** Zalo params left empty on Overview, surfaced as fillable test values (keyed by param name). */
-export const mergeZaloUnfilledParamTags = (apiTags = [], formDataObj = {}) => {
-  const existingNames = new Set((apiTags ?? []).map((tag) => tag?.name));
-  const unfilledParamTags = (formDataObj?.templateListParams || [])
-    .filter((param) => param?.name && !String(param?.value ?? '').trim() && !existingNames.has(param.name))
-    .map((param) => ({ name: param.name, metaData: { userDriven: false }, children: [] }));
-  return [...(apiTags ?? []), ...unfilledParamTags];
-};
-
 /** RCS createMessageMeta: normalize media shape (mediaUrl, thumbnailUrl, height string). */
 export const normalizeRcsTestCardMedia = (media) => {
   if (!media || typeof media !== 'object') return undefined;

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;