@capillarytech/creatives-library 9.0.72 → 9.1.0

package/v2Containers/Email/messages.js

@@ -154,6 +154,14 @@ export default defineMessages({
     id: 'creatives.containersV2.Email.emailSubjectNotEmplty',
     defaultMessage: 'Email subject cannot be empty.',
   },
+  "Enter Pre-header Text": {
+    id: 'creatives.containersV2.Email.emailPreheader',
+    defaultMessage: 'Enter pre-header text',
+  },
+  "Pre-header": {
+    id: 'creatives.containersV2.Email.Preheader',
+    defaultMessage: 'Pre-header',
+  },
   "Enter template name": {
     id: 'creatives.containersV2.Email.templateNamePlaceholder',
     defaultMessage: 'Enter template name',

package/v2Containers/Email/tests/index.test.js

@@ -377,6 +377,27 @@ describe('Email container', () => {
       const addLangCol = cols.find((c) => c.id === 'add-language-button');
       expect(addLangCol.colStyle.display).toBe('');
     });
+
+    const getStandaloneFieldIds = (schema) => _.flatMap(
+      schema.standalone.sections,
+      (section) => _.flatMap(section.inputFields, (inputField) => _.map(inputField.cols, (col) => col.id)),
+    );
+
+    it('keeps both template-subject and template-preheader as standalone fields for embedded/library module', () => {
+      const wrapper = renderEmail({ location: { query: { type: 'embedded', module: 'library' } } });
+
+      const result = wrapper.instance().removeStandAlone(_.cloneDeep(emailDefinition));
+
+      expect(getStandaloneFieldIds(result)).toEqual(['template-subject', 'template-preheader']);
+    });
+
+    it('drops template-name from standalone fields for embedded/library module (unchanged prior behavior)', () => {
+      const wrapper = renderEmail({ location: { query: { type: 'embedded', module: 'library' } } });
+
+      const result = wrapper.instance().removeStandAlone(_.cloneDeep(emailDefinition));
+
+      expect(getStandaloneFieldIds(result)).not.toContain('template-name');
+    });
   });
 
   describe('handleEdmSave (mode === "switchEditor")', () => {
@@ -717,4 +738,90 @@ describe('Email container', () => {
       expect(wrapper.state('savedTemplate')).toBeNull();
     });
   });
+
+  describe('pre-header field', () => {
+    describe('onTagSelect', () => {
+      it('appends the tag to template-preheader when a tag is selected from the pre-header field', () => {
+        const wrapper = renderEmail();
+        wrapper.setState({ formData: { 'template-preheader': 'Hello ' } });
+
+        wrapper.instance().onTagSelect('first_name', 1, { id: 'template-preheader' });
+
+        expect(wrapper.state('formData')['template-preheader']).toBe('Hello {{first_name}}');
+      });
+
+      it('does not touch template-subject when the tag is selected from the pre-header field', () => {
+        const wrapper = renderEmail();
+        wrapper.setState({ formData: { 'template-preheader': '', 'template-subject': 'Original subject' } });
+
+        wrapper.instance().onTagSelect('loyalty_points', 1, { id: 'template-preheader' });
+
+        expect(wrapper.state('formData')['template-subject']).toBe('Original subject');
+        expect(wrapper.state('formData')['template-preheader']).toBe('{{loyalty_points}}');
+      });
+    });
+
+    describe('setEditData', () => {
+      it('populates formData["template-preheader"] from versions.base.preheader', () => {
+        const wrapper = renderEmail();
+        wrapper.setState({ schema: { containers: [] } });
+        const instance = wrapper.instance();
+        const editData = {
+          name: 'My Template',
+          versions: {
+            base: {
+              subject: 'My subject',
+              preheader: 'My preheader text',
+              activeTab: 'en',
+              selectedLanguages: ['en'],
+              en: {},
+            },
+            history: [],
+          },
+        };
+
+        instance.setEditData(editData);
+
+        expect(wrapper.state('formData')['template-preheader']).toBe('My preheader text');
+      });
+
+      it('defaults to an empty string when versions.base.preheader is absent', () => {
+        const wrapper = renderEmail();
+        wrapper.setState({ schema: { containers: [] } });
+        const instance = wrapper.instance();
+        const editData = {
+          name: 'My Template',
+          versions: {
+            base: {
+              subject: 'My subject',
+              activeTab: 'en',
+              selectedLanguages: ['en'],
+              en: {},
+            },
+            history: [],
+          },
+        };
+
+        instance.setEditData(editData);
+
+        expect(wrapper.state('formData')['template-preheader']).toBe('');
+      });
+    });
+
+    describe('transformFormData', () => {
+      it('carries template-preheader into the returned base.preheader', () => {
+        const wrapper = renderEmail();
+        wrapper.setState({
+          formData: {
+            'template-preheader': 'Preview snippet text',
+            base: { activeTab: 'en', en: { 'template-content': '<p>hi</p>' } },
+          },
+        });
+
+        const result = wrapper.instance().transformFormData(wrapper.state('formData'));
+
+        expect(result.base.preheader).toBe('Preview snippet text');
+      });
+    });
+  });
 });

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -6,7 +6,6 @@ import { injectIntl, FormattedMessage } from 'react-intl';
 import isEmpty from 'lodash/isEmpty';
 import get from 'lodash/get';
 import _ from 'lodash';
-import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
@@ -15,6 +14,9 @@ import CapDropdown from '@capillarytech/cap-ui-library/CapDropdown';
 import CapMenu from '@capillarytech/cap-ui-library/CapMenu';
 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 CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import HTMLEditor from '../../../v2Components/HtmlEditor';
 import CapTagListWithInput from '../../../v2Components/CapTagListWithInput';
 import formBuilderMessages from '../../../v2Components/FormBuilder/messages';
@@ -24,14 +26,17 @@ import { downloadHtmlFile, sanitizeFileName, getExportHtmlDisabledTooltip } from
 import history from '../../../utils/history';
 import messages from '../messages';
 import emailMessages from '../../Email/messages';
-import { validateTags } from '../../../utils/tagValidations';
+import { validateTags, hasUnsubscribeTag } from '../../../utils/tagValidations';
 import {
   TAG, EMBEDDED, DEFAULT, FULL, LIBRARY,
 } from '../../Whatsapp/constants';
 import { EMAIL } from '../../CreativesContainer/constants';
 import { OUTBOUND } from '../../../v2Components/FormBuilder/constants';
+import { PREHEADER_EXCLUDED_TAGS } from '../constants';
 import './_emailHTMLEditor.scss';
 
+const { CapLabelInline } = CapLabel;
+
 /**
  * EmailHTMLEditor Component
  *
@@ -111,6 +116,17 @@ const EmailHTMLEditor = (props) => {
   const [savedTemplate, setSavedTemplate] = useState(null);
   const [subject, setSubject] = useState('');
   const [subjectError, setSubjectError] = useState('');
+  const [preheader, setPreheader] = useState('');
+  const [preheaderError, setPreheaderError] = useState('');
+  // null = show if content exists; true/false = manual "+ Pre-header"/"Remove" click.
+  const [preheaderRevealed, setPreheaderRevealed] = useState(null);
+  const isPreheaderRevealed = preheaderRevealed !== null ? preheaderRevealed : !!preheader;
+  const handleShowPreheaderClick = useCallback(() => setPreheaderRevealed(true), []);
+  const handleRemovePreheaderClick = useCallback(() => {
+    setPreheader('');
+    setPreheaderError('');
+    setPreheaderRevealed(false);
+  }, []);
   // State for template name (extracted from template data in Edit mode)
   const [extractedTemplateName, setExtractedTemplateName] = useState('');
   const [tagValidationError, setTagValidationError] = useState(null);
@@ -183,6 +199,7 @@ const EmailHTMLEditor = (props) => {
           base: true,
         },
         'template-subject': subject || '',
+        'template-preheader': preheader || '',
       };
     },
     getContentForPreview: () => htmlContent || '',
@@ -206,7 +223,7 @@ const EmailHTMLEditor = (props) => {
         html: 0, label: 0, liquid: 0, total: 0,
       };
     },
-  }), [htmlContent, subject, currentOrgDetails]);
+  }), [htmlContent, subject, preheader, currentOrgDetails]);
 
   // Detect edit mode: when isEditEmail is false (create flow), never treat as edit or fetch template details
   const hasParamsId = params?.id || location?.query?.id || location?.params?.id || location?.pathname?.includes('/edit/');
@@ -296,6 +313,7 @@ const EmailHTMLEditor = (props) => {
       lastTemplateIdRef.current = currentTemplateId;
       setHtmlContent('');
       setSubject('');
+      setPreheader('');
       setExtractedTemplateName('');
       baselineContentRef.current = null;
       setHasContentChanged(false);
@@ -324,11 +342,13 @@ const EmailHTMLEditor = (props) => {
     if (hasCompleteTemplateData && !contentInitializedRef.current) {
       let extractedContent = '';
       let extractedSubject = '';
+      let extractedPreheader = '';
       let extractedName = '';
 
       if (templateDataProp.base) {
         extractedContent = templateDataProp.base['template-content'] || templateDataProp.base.html_content || templateDataProp.base.emailBody || '';
         extractedSubject = templateDataProp.base.subject || templateDataProp.base.emailSubject || '';
+        extractedPreheader = templateDataProp.base.preheader || '';
       } else if (templateDataProp.versions && templateDataProp.versions.base) {
         const { base } = templateDataProp.versions;
         const activeTab = base.activeTab || 'en';
@@ -341,9 +361,11 @@ const EmailHTMLEditor = (props) => {
           || '';
 
         extractedSubject = base.subject || base.emailSubject || '';
+        extractedPreheader = base.preheader || '';
       } else {
         extractedContent = templateDataProp['template-content'] || templateDataProp.emailBody || templateDataProp.html_content || '';
         extractedSubject = templateDataProp.emailSubject || templateDataProp.subject || '';
+        extractedPreheader = templateDataProp.preheader || '';
       }
 
       // Extract template name from templateDataProp
@@ -354,6 +376,7 @@ const EmailHTMLEditor = (props) => {
       setHtmlContent(extractedContent);
       setLoadedHtmlContent(extractedContent);
       setSubject(extractedSubject);
+      setPreheader(extractedPreheader);
       setExtractedTemplateName(extractedName);
       contentInitializedRef.current = true;
       subjectInitializedRef.current = true;
@@ -425,6 +448,11 @@ const EmailHTMLEditor = (props) => {
           || get(templateDataFromRedux, 'versions.base.subject')
           || '';
 
+        const extractedPreheader = baseData.preheader
+          || get(templateDataFromRedux, 'preheader')
+          || get(templateDataFromRedux, 'versions.base.preheader')
+          || '';
+
         // Extract template name from Redux data
         const extractedName = templateDataFromRedux.name || '';
 
@@ -438,6 +466,7 @@ const EmailHTMLEditor = (props) => {
           if (!contentInitializedRef.current || htmlContent === loadedHtmlContent) {
             setHtmlContent(extractedContent);
             setSubject(extractedSubject);
+            setPreheader(extractedPreheader);
             setExtractedTemplateName(extractedName);
           }
         } else if (!contentInitializedRef.current) {
@@ -445,6 +474,7 @@ const EmailHTMLEditor = (props) => {
           setHtmlContent(extractedContent);
           setLoadedHtmlContent(extractedContent);
           setSubject(extractedSubject);
+          setPreheader(extractedPreheader);
           setExtractedTemplateName(extractedName);
         }
 
@@ -470,6 +500,7 @@ const EmailHTMLEditor = (props) => {
       setHtmlContent('');
       setLoadedHtmlContent(''); // Set stable loaded content
       setSubject('');
+      setPreheader('');
       setExtractedTemplateName('');
       setIsLoading(false);
       if (setIsLoadingContent) {
@@ -676,6 +707,53 @@ const EmailHTMLEditor = (props) => {
     }
   }, [subjectError]);
 
+  // Handle tag insertion into Pre-header field
+  const handlePreheaderTagSelect = useCallback((data) => {
+    if (data) {
+      const tagToInsert = `{{${data}}}`;
+      const input = document.getElementById('template-preheader') || document.querySelector('#template-preheader input');
+      let preheaderValue = preheader || '';
+      try {
+        if (input && (typeof input.selectionStart === 'number')) {
+          const startPos = input.selectionStart;
+          const endPos = input.selectionEnd;
+          preheaderValue = `${preheaderValue.substring(0, startPos)}${tagToInsert}${preheaderValue.substring(endPos)}`;
+          setPreheader(preheaderValue);
+          try {
+            input.focus();
+            const newPos = startPos + tagToInsert.length;
+            input.selectionStart = newPos;
+            input.selectionEnd = newPos;
+          } catch (e) {
+            // Ignore focus errors
+          }
+        } else {
+          preheaderValue = `${preheaderValue}${tagToInsert}`;
+          setPreheader(preheaderValue);
+          if (input) {
+            try {
+              input.value = preheaderValue;
+            } catch (e) {
+              // Ignore value setting errors
+            }
+          }
+        }
+      } catch (e) {
+        // Fallback: safe append
+        preheaderValue = `${preheaderValue}${tagToInsert}`;
+        setPreheader(preheaderValue);
+      }
+    }
+  }, [preheader]);
+
+  // Handle pre-header change
+  const handlePreheaderChange = useCallback((e) => {
+    setPreheader(e.target.value);
+    if (preheaderError) {
+      setPreheaderError('');
+    }
+  }, [preheaderError]);
+
   // Handle Save/Update with liquid validation
   const handleSave = useCallback(() => {
     // IMPORTANT: Clear API validation errors FIRST before checking for validation errors
@@ -704,6 +782,15 @@ const EmailHTMLEditor = (props) => {
       setSubjectError('');
     }
 
+    // 1.1. Validate Pre-header - BLOCKING: must never contain the unsubscribe tag
+    if (hasUnsubscribeTag(preheader)) {
+      setPreheaderError(formatMessage(messages.unsubscribeNotAllowedInPreheader));
+      if (onValidationFail) {
+        onValidationFail();
+      }
+      return;
+    }
+
     // 1.5. Check for validation errors (Errors = blocking, Warnings = non-blocking)
     // Get issue counts from ref or stored state
     let issueCounts = { errors: 0, warnings: 0, total: 0 };
@@ -835,6 +922,7 @@ const EmailHTMLEditor = (props) => {
           base: true,
           tabKey,
           subject: subject || '',
+          preheader: preheader || '',
         };
 
         const historyEntry = {
@@ -844,6 +932,7 @@ const EmailHTMLEditor = (props) => {
           base: true,
           tabKey,
           subject: subject || '',
+          preheader: preheader || '',
         };
 
         // Opened in edit mode: name from the loaded template; created in this session: the name entered for it
@@ -944,6 +1033,7 @@ const EmailHTMLEditor = (props) => {
           secondary_templates: [{ template_data: tmpData }],
         };
         libraryPayload.base.subject = subject || '';
+        libraryPayload.base.preheader = preheader || '';
 
         if (location?.query?.module === 'library' && isGetFormData && getFormdata) {
           const response = {
@@ -1006,6 +1096,7 @@ const EmailHTMLEditor = (props) => {
     }
   }, [
     subject,
+    preheader,
     htmlContent,
     tags,
     injectedTags,
@@ -1142,7 +1233,7 @@ const EmailHTMLEditor = (props) => {
       <CapRow>
         <CapColumn span={24}>
           {/* Subject Field */}
-          <CapColumn span={24} style={{ marginBottom: CAP_SPACE_16 }}>
+          <CapColumn span={24} className="email-html-editor-field">
             <CapTagListWithInput
               inputId="template-subject"
               inputValue={subject}
@@ -1150,9 +1241,13 @@ const EmailHTMLEditor = (props) => {
               inputPlaceholder={formatMessage(messages.enterEmailSubject)}
               inputRequired
               inputErrorMessage={subjectError}
-              headingText={formatMessage(messages.subject)}
-              headingType="h4"
-              headingStyle={{ marginRight: '85%' }}
+              inputProps={{
+                prefix: (
+                  <CapLabelInline type="label2" className="email-html-editor-prefix email-html-editor-prefix-label">
+                    {formatMessage(messages.subject)}
+                  </CapLabelInline>
+                ),
+              }}
               onTagSelect={handleSubjectTagSelect}
               onContextChange={handleOnTagsContextChange}
               location={location}
@@ -1161,9 +1256,77 @@ const EmailHTMLEditor = (props) => {
               selectedOfferDetails={selectedOfferDetails}
               eventContextTags={eventContextTags}
               waitEventContextTags={waitEventContextTags}
-              showHeading
+              showHeading={false}
+              showTagList
+              showInput
+              singleLineLayout
+              extraContent={!isPreheaderRevealed ? (
+                <CapButton
+                  type="dashed"
+                  size="small"
+                  className="email-html-editor-add-preheader-btn"
+                  onClick={handleShowPreheaderClick}
+                >
+                  {formatMessage(messages.addPreheader)}
+                </CapButton>
+              ) : null}
+              containerStyle={{
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+              popoverPlacement="bottomRight"
+            />
+          </CapColumn>
+
+          {/* Pre-header Field */}
+          {isPreheaderRevealed && (
+          <CapColumn span={24} className="email-html-editor-field">
+            <CapTagListWithInput
+              inputId="template-preheader"
+              inputValue={preheader}
+              inputOnChange={handlePreheaderChange}
+              inputPlaceholder={formatMessage(messages.enterEmailPreheader)}
+              inputMaxLength={85}
+              inputErrorMessage={preheaderError}
+              excludeTags={PREHEADER_EXCLUDED_TAGS}
+              inputProps={{
+                prefix: (
+                  <CapRow align="middle" type="flex" noWrap gap={4} className="email-html-editor-prefix">
+                    <CapLabelInline type="label2" className="email-html-editor-prefix-label">
+                      {formatMessage(messages.preheader)}
+                    </CapLabelInline>
+                    <CapTooltipWithInfo title={formatMessage(messages.preheaderInfoTooltip)} />
+                  </CapRow>
+                ),
+                suffix: (
+                  <CapRow align="middle" type="flex" noWrap gap={8}>
+                    <CapLabelInline type="label1" className="email-html-editor-counter">
+                      {`${(preheader || '').length} / 85`}
+                    </CapLabelInline>
+                    <CapLabelInline
+                      type="label1"
+                      role="button"
+                      tabIndex={0}
+                      className="email-html-editor-remove-link"
+                      onClick={handleRemovePreheaderClick}
+                    >
+                      {formatMessage(messages.removePreheader)}
+                    </CapLabelInline>
+                  </CapRow>
+                ),
+              }}
+              onTagSelect={handlePreheaderTagSelect}
+              onContextChange={handleOnTagsContextChange}
+              location={location}
+              tags={tags}
+              injectedTags={injectedTags || {}}
+              selectedOfferDetails={selectedOfferDetails}
+              eventContextTags={eventContextTags}
+              waitEventContextTags={waitEventContextTags}
+              showHeading={false}
               showTagList
               showInput
+              singleLineLayout
               containerStyle={{
                 display: 'flex',
                 flexDirection: 'column',
@@ -1171,6 +1334,7 @@ const EmailHTMLEditor = (props) => {
               popoverPlacement="bottomRight"
             />
           </CapColumn>
+          )}
 
           <CapColumn span={24} className="html-editor-options-column">
             <CapDropdown