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

package/constants/unified.js

@@ -59,7 +59,6 @@ export const EXTENDED_TAG = 'ExtendedTagMessage';
 export const BADGES_UI_ENABLED = 'BADGES_UI_ENABLED';
 export const JP_LOCALE_HIDE_FEATURE = 'JP_LOCALE_HIDE_FEATURE';
 export const ENABLE_WECHAT = 'ENABLE_WECHAT';
-export const ENABLE_CREATIVES_ARCHIVAL = 'ENABLE_CREATIVES_ARCHIVAL';
 export const ENABLE_WEBPUSH = 'ENABLE_WEBPUSH';
 export const ENABLE_CUSTOMER_BARCODE_TAG = 'ENABLE_CUSTOMER_BARCODE_TAG';
 export const EMAIL_UNSUBSCRIBE_TAG_MANDATORY = 'EMAIL_UNSUBSCRIBE_TAG_MANDATORY';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.70",
+  "version": "9.0.71-alpha.sprint-cap-211543.17",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/common.js

@@ -29,7 +29,6 @@ import {
   ENABLE_NEW_FORMBUILDER_SMS,
   ENABLE_NEW_FORMBUILDER_MPUSH,
   SUPPORT_ENGAGEMENT_MODULE,
-  ENABLE_CREATIVES_ARCHIVAL,
 } from '../constants/unified';
 import { apiMessageFormatHandler } from './commonUtils';
 
@@ -121,11 +120,6 @@ export const hasWechatFeatureEnabled = Auth.hasFeatureAccess.bind(
   ENABLE_WECHAT,
 );
 
-export const hasCreativesArchivalEnabled = Auth.hasFeatureAccess.bind(
-  null,
-  ENABLE_CREATIVES_ARCHIVAL,
-);
-
 export const hasWebPushFeatureEnabled = Auth.hasFeatureAccess.bind(
   null,
   ENABLE_WEBPUSH,

package/v2Components/CapTagListWithInput/__tests__/CapTagListWithInput.test.js

@@ -5,6 +5,7 @@ import { IntlProvider } from 'react-intl';
 import CapTagListWithInput from '../index';
 
 const capturedTagListProps = { current: null };
+const capturedCapRowProps = { current: null };
 
 jest.mock('../../../v2Containers/TagList', () => {
   const React = require('react');
@@ -15,7 +16,14 @@ jest.mock('../../../v2Containers/TagList', () => {
   return Mock;
 });
 
-jest.mock('@capillarytech/cap-ui-library/CapRow', () => ({ children }) => <div>{children}</div>);
+jest.mock('@capillarytech/cap-ui-library/CapRow', () => {
+  const React = require('react');
+  const Mock = ({ children, ...rest }) => {
+    capturedCapRowProps.current = rest;
+    return <div>{children}</div>;
+  };
+  return Mock;
+});
 jest.mock('@capillarytech/cap-ui-library/CapColumn', () => ({ children }) => <div>{children}</div>);
 jest.mock('@capillarytech/cap-ui-library/CapHeading', () => () => null);
 jest.mock('@capillarytech/cap-ui-library/CapInput', () => () => <input data-testid="cap-input" />);
@@ -27,6 +35,7 @@ const waitMap = {
 describe('CapTagListWithInput', () => {
   beforeEach(() => {
     capturedTagListProps.current = null;
+    capturedCapRowProps.current = null;
   });
 
   it('forwards waitEventContextTags to TagList', () => {
@@ -60,4 +69,52 @@ describe('CapTagListWithInput', () => {
 
     expect(capturedTagListProps.current.waitEventContextTags).toEqual({});
   });
+
+  it('forwards excludeTags to TagList', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CapTagListWithInput
+          inputId="template-preheader"
+          inputOnChange={jest.fn()}
+          excludeTags={['unsubscribe']}
+          onTagSelect={jest.fn()}
+          onContextChange={jest.fn()}
+        />
+      </IntlProvider>
+    );
+
+    expect(capturedTagListProps.current.excludeTags).toEqual(['unsubscribe']);
+  });
+
+  it('uses default empty array for excludeTags when omitted', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CapTagListWithInput
+          inputId="test-url"
+          inputOnChange={jest.fn()}
+          onTagSelect={jest.fn()}
+          onContextChange={jest.fn()}
+        />
+      </IntlProvider>
+    );
+
+    expect(capturedTagListProps.current.excludeTags).toEqual([]);
+  });
+
+  it('top-aligns the singleLineLayout row so an error message growing the input does not shift the Add Label button', () => {
+    render(
+      <IntlProvider locale="en" messages={{}}>
+        <CapTagListWithInput
+          inputId="template-preheader"
+          inputOnChange={jest.fn()}
+          inputErrorMessage="Unsubscribe tag is not allowed in Pre-header."
+          singleLineLayout
+          onTagSelect={jest.fn()}
+          onContextChange={jest.fn()}
+        />
+      </IntlProvider>
+    );
+
+    expect(capturedCapRowProps.current.align).toBe('top');
+  });
 });

package/v2Components/CapTagListWithInput/index.js

@@ -7,6 +7,7 @@ import CapInput from '@capillarytech/cap-ui-library/CapInput';
 import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
 import TagList from '../../v2Containers/TagList';
 import messages from './messages';
+import './index.scss';
 
 /**
  * CapTagListWithInput - A reusable component that combines TagList and CapInput
@@ -18,6 +19,7 @@ export const CapTagListWithInput = (props) => {
     // TagList props
     tags = [],
     injectedTags = {},
+    excludeTags = [],
     location = {},
     selectedOfferDetails = [],
     onTagSelect,
@@ -51,10 +53,65 @@ export const CapTagListWithInput = (props) => {
     showInput = true,
     inputProps = {},
     popoverPlacement,
+    // Tag-insert trigger inline with the input (not in a row above)
+    singleLineLayout = false,
+    // Content between input and tag trigger (singleLineLayout only)
+    extraContent = null,
   } = props;
 
   const { formatMessage } = intl;
 
+  const tagListElement = showTagList && (
+    <TagList
+      key={`${inputId}_tags`}
+      className={className}
+      moduleFilterEnabled={moduleFilterEnabled}
+      label={formatMessage(messages.addLabels)}
+      onTagSelect={onTagSelect}
+      onContextChange={onContextChange}
+      location={location}
+      tags={tags}
+      injectedTags={injectedTags}
+      excludeTags={excludeTags}
+      userLocale={userLocale}
+      selectedOfferDetails={selectedOfferDetails}
+      eventContextTags={eventContextTags}
+      waitEventContextTags={waitEventContextTags}
+      style={tagListStyle}
+      popoverPlacement={popoverPlacement}
+      restrictPersonalization={restrictPersonalization}
+    />
+  );
+
+  const inputElement = showInput && (
+    <CapInput
+      id={inputId}
+      onChange={inputOnChange}
+      placeholder={inputPlaceholder}
+      value={inputValue}
+      size={inputSize}
+      maxLength={inputMaxLength}
+      errorMessage={inputErrorMessage}
+      isRequired={inputRequired}
+      disabled={inputDisabled}
+      style={inputStyle}
+      {...inputProps}
+    />
+  );
+
+  if (singleLineLayout) {
+    return (
+      <CapColumn style={containerStyle}>
+        {/* "top", not "middle": keeps the buttons in place when an error grows the input */}
+        <CapRow align="top" type="flex" noWrap gap={8} className="cap-tag-list-with-input__single-line-row">
+          <CapColumn className="cap-tag-list-with-input__input-column">{inputElement}</CapColumn>
+          {extraContent}
+          {tagListElement}
+        </CapRow>
+      </CapColumn>
+    );
+  }
+
   return (
     <CapColumn style={containerStyle}>
       <CapRow align="middle" type="flex" noWrap>
@@ -64,42 +121,9 @@ export const CapTagListWithInput = (props) => {
           </CapHeading>
         )}
 
-        {showTagList && (
-          <TagList
-            key={`${inputId}_tags`}
-            className={className}
-            moduleFilterEnabled={moduleFilterEnabled}
-            label={formatMessage(messages.addLabels)}
-            onTagSelect={onTagSelect}
-            onContextChange={onContextChange}
-            location={location}
-            tags={tags}
-            injectedTags={injectedTags}
-            userLocale={userLocale}
-            selectedOfferDetails={selectedOfferDetails}
-            eventContextTags={eventContextTags}
-            waitEventContextTags={waitEventContextTags}
-            style={tagListStyle}
-            popoverPlacement={popoverPlacement}
-            restrictPersonalization={restrictPersonalization}
-          />
-        )}
+        {tagListElement}
       </CapRow>
-      {showInput && (
-        <CapInput
-          id={inputId}
-          onChange={inputOnChange}
-          placeholder={inputPlaceholder}
-          value={inputValue}
-          size={inputSize}
-          maxLength={inputMaxLength}
-          errorMessage={inputErrorMessage}
-          isRequired={inputRequired}
-          disabled={inputDisabled}
-          style={inputStyle}
-          {...inputProps}
-        />
-      )}
+      {inputElement}
     </CapColumn>
   );
 };
@@ -109,6 +133,7 @@ CapTagListWithInput.propTypes = {
   // TagList props
   tags: PropTypes.array,
   injectedTags: PropTypes.object,
+  excludeTags: PropTypes.array,
   location: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
   onTagSelect: PropTypes.func.isRequired,
@@ -145,6 +170,8 @@ CapTagListWithInput.propTypes = {
   showTagList: PropTypes.bool,
   showInput: PropTypes.bool,
   popoverPlacement: PropTypes.string,
+  singleLineLayout: PropTypes.bool,
+  extraContent: PropTypes.node,
 };
 
 CapTagListWithInput.defaultProps = {
@@ -176,6 +203,8 @@ CapTagListWithInput.defaultProps = {
   showInput: true,
   inputProps: {},
   popoverPlacement: undefined,
+  singleLineLayout: false,
+  extraContent: null,
 };
 
 export default injectIntl(CapTagListWithInput);

package/v2Components/CapTagListWithInput/index.scss

@@ -0,0 +1,9 @@
+.cap-tag-list-with-input__single-line-row {
+  width: 100%;
+}
+
+// Input takes the remaining width and can shrink below its content size
+.cap-tag-list-with-input__input-column {
+  flex: 1;
+  min-width: 0;
+}

package/v2Components/CommonTestAndPreview/UnifiedPreview/EmailPreviewContent.js

@@ -22,6 +22,7 @@ import {
 const EmailPreviewContent = ({
   content,
   subject,
+  preheader,
   device,
   isUpdating,
   error,
@@ -75,6 +76,11 @@ const EmailPreviewContent = ({
         </CapRow>
       </CapRow>
 
+      {/* Email Pre-header */}
+      {preheader && (
+        <CapRow useLegacy className="email-preheader">{preheader}</CapRow>
+      )}
+
       {/* Email Content - Varies based on state */}
       <CapRow useLegacy className="email-content">
         {contentSection}
@@ -131,6 +137,7 @@ const EmailPreviewContent = ({
 EmailPreviewContent.propTypes = {
   content: PropTypes.string,
   subject: PropTypes.string,
+  preheader: PropTypes.string,
   device: PropTypes.oneOf([DESKTOP, MOBILE, TABLET]),
   isUpdating: PropTypes.bool,
   error: PropTypes.string,
@@ -140,6 +147,7 @@ EmailPreviewContent.propTypes = {
 EmailPreviewContent.defaultProps = {
   content: '',
   subject: '',
+  preheader: '',
   device: DESKTOP,
   isUpdating: false,
   error: null,

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -520,6 +520,13 @@
       }
     }
 
+    // Email Pre-header
+    .email-preheader {
+      padding: $CAP_SPACE_12 $CAP_SPACE_16;
+      font-size: $FONT_SIZE_M;
+      color: #8c8c8c;
+    }
+
     // Email Content
     .email-content {
       border-top: $CAP_SPACE_01 solid $CAP_G12;

package/v2Components/CommonTestAndPreview/UnifiedPreview/index.js

@@ -87,6 +87,7 @@ const UnifiedPreview = ({
           <EmailPreviewContent
             content={content?.resolvedBody || ''}
             subject={content?.resolvedTitle || ''}
+            preheader={content?.resolvedPreheader || ''}
             device={device}
             isUpdating={isUpdating}
             error={error}

package/v2Components/CommonTestAndPreview/actions.js

@@ -43,7 +43,7 @@ export const searchCustomersRequested = (query) => ({
  */
 export const extractTagsRequested = (payload) => ({
   type: EXTRACT_TAGS_REQUESTED,
-  payload, // { templateSubject, templateContent }
+  payload, // { templateSubject, templatePreheader, templateContent }
 });
 
 /**

package/v2Components/CommonTestAndPreview/index.js

@@ -947,6 +947,7 @@ const CommonTestAndPreview = (props) => {
         return {
           ...basePayload,
           messageTitle: resolveTagsInText(formDataObj['template-subject'], customValuesObj),
+          messageSubtitle: resolveTagsInText(formDataObj['template-preheader'], customValuesObj),
           messageBody: contentStr,
         };
 
@@ -1069,6 +1070,7 @@ const CommonTestAndPreview = (props) => {
       case CHANNELS.EMAIL:
         return {
           templateSubject: formDataObj['template-subject'] || '',
+          templatePreheader: formDataObj['template-preheader'] || '',
           templateContent: contentStr,
         };
 
@@ -1410,13 +1412,22 @@ const CommonTestAndPreview = (props) => {
           || formDataObj?.base?.['template-subject']
           || '';
 
+        // Extract pre-header from formData (same shapes as subject)
+        const preheader = formDataObj?.['template-preheader']
+          || formDataObj?.[0]?.['template-preheader']
+          || formDataObj?.base?.['template-preheader']
+          || '';
+
         // Extract body from previewData (resolved) or content
         const messageBody = previewDataObj?.resolvedBody || contentStr || '';
 
-        // Resolve tags in subject if custom values are provided
+        // Resolve tags in subject/pre-header if custom values are provided
         const resolvedSubject = customValuesObj && Object.keys(customValuesObj).length > 0
           ? resolveTagsInText(subject, customValuesObj)
           : subject;
+        const resolvedPreheader = customValuesObj && Object.keys(customValuesObj).length > 0
+          ? resolveTagsInText(preheader, customValuesObj)
+          : preheader;
 
         const emailChannelSettings = {
           channel: CHANNELS.EMAIL,
@@ -1442,6 +1453,7 @@ const CommonTestAndPreview = (props) => {
             channel: CHANNELS.EMAIL,
             messageBody,
             messageSubject: resolvedSubject,
+            messagePreHeader: resolvedPreheader,
           },
         };
       }
@@ -2587,6 +2599,10 @@ const CommonTestAndPreview = (props) => {
         resolvedTitle: hasPreviewCallBeenMade && previewDataHtml?.resolvedTitle
           ? previewDataHtml.resolvedTitle
           : formData?.['template-subject'] || '',
+        // The liquid preview API returns the resolved pre-header as `resolvedSubtitle`.
+        resolvedPreheader: hasPreviewCallBeenMade && previewDataHtml?.resolvedSubtitle
+          ? previewDataHtml.resolvedSubtitle
+          : formData?.['template-preheader'] || '',
       };
     } else if (channel === CHANNELS.SMS) {
       // For SMS, content is the text message (string)
@@ -2931,12 +2947,12 @@ const CommonTestAndPreview = (props) => {
               });
 
               // Always extract tags when content changes
-              const { templateSubject, templateContent } = prepareTagExtractionPayload(
+              const { templateSubject, templatePreheader, templateContent } = prepareTagExtractionPayload(
                 channel,
                 formData,
                 htmlFile,
               );
-              actions.extractTagsRequested({ templateSubject, templateContent });
+              actions.extractTagsRequested({ templateSubject, templatePreheader, templateContent });
             }
 
             // Restore original handler
@@ -2951,32 +2967,32 @@ const CommonTestAndPreview = (props) => {
           const templateContent = currentTabData?.[activeTab]?.['template-content'];
           if (templateContent) {
             // Extract tags when showing (but don't set previewDataHtml - use raw content initially)
-            const { templateSubject, templateContent: extractContent } = prepareTagExtractionPayload(
+            const { templateSubject, templatePreheader, templateContent: extractContent } = prepareTagExtractionPayload(
               channel,
               formData,
               templateContent
             );
-            actions.extractTagsRequested({ templateSubject, templateContent: extractContent });
+            actions.extractTagsRequested({ templateSubject, templatePreheader, templateContent: extractContent });
           } else {
             // Fallback to content prop if no template content
-            const { templateSubject, templateContent: extractContent } = prepareTagExtractionPayload(
+            const { templateSubject, templatePreheader, templateContent: extractContent } = prepareTagExtractionPayload(
               channel,
               formData,
               getCurrentContent
             );
-            actions.extractTagsRequested({ templateSubject, templateContent: extractContent });
+            actions.extractTagsRequested({ templateSubject, templatePreheader, templateContent: extractContent });
           }
         }
       } else {
       // For non-email channels, extract tags from content
         // Use getCurrentContent for SMS (extracts from formData) or content prop for others
         const contentToConvert = getCurrentContent;
-        const { templateSubject, templateContent } = prepareTagExtractionPayload(
+        const { templateSubject, templatePreheader, templateContent } = prepareTagExtractionPayload(
           channel,
           formData || {},
           contentToConvert
         );
-        actions.extractTagsRequested({ templateSubject, templateContent });
+        actions.extractTagsRequested({ templateSubject, templatePreheader, templateContent });
       }
 
       // Fetch test customers and groups if enabled
@@ -3057,12 +3073,12 @@ const CommonTestAndPreview = (props) => {
       const handleContentUpdate = (contentToUpdate) => {
         // Extract tags from content (but don't set previewDataHtml - use raw content initially)
         // previewDataHtml will only be set when preview API call is made
-        const { templateSubject, templateContent: extractContent } = prepareTagExtractionPayload(
+        const { templateSubject, templatePreheader, templateContent: extractContent } = prepareTagExtractionPayload(
           channel,
           formData,
           contentToUpdate
         );
-        actions.extractTagsRequested({ templateSubject, templateContent: extractContent });
+        actions.extractTagsRequested({ templateSubject, templatePreheader, templateContent: extractContent });
       };
 
       if (isDragDrop) {
@@ -3504,12 +3520,12 @@ const CommonTestAndPreview = (props) => {
     }
 
     setTagsExtracted(true);
-    const { templateSubject, templateContent } = prepareTagExtractionPayload(
+    const { templateSubject, templatePreheader, templateContent } = prepareTagExtractionPayload(
       activeChannelForActions,
       formData || {},
       contentToExtract
     );
-    actions.extractTagsRequested({ templateSubject, templateContent });
+    actions.extractTagsRequested({ templateSubject, templatePreheader, templateContent });
   };
 
   /**

package/v2Components/CommonTestAndPreview/sagas.js

@@ -70,10 +70,11 @@ export function* searchCustomersSaga(action) {
 // Extract Tags Saga
 export function* extractTagsSaga(action) {
   try {
-    const { templateSubject, templateContent } = action.payload;
+    const { templateSubject, templatePreheader, templateContent } = action.payload;
 
     const payload = {
       messageTitle: templateSubject || '',
+      messageSubtitle: templatePreheader || '',
       messageBody: templateContent || '',
     };
 

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,