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

package/v2Containers/EmailWrapper/components/__tests__/EmailHTMLEditor.test.js

@@ -12,7 +12,7 @@ import '@testing-library/jest-dom';
 import { IntlProvider } from 'react-intl';
 import EmailHTMLEditor from '../EmailHTMLEditor';
 import { validateLiquidTemplateContent } from '../../../../utils/commonUtils';
-import { validateTags } from '../../../../utils/tagValidations';
+import { validateTags, hasUnsubscribeTag } from '../../../../utils/tagValidations';
 import { isEmailUnsubscribeTagOptional } from '../../../../utils/common';
 import { downloadHtmlFile } from '../../../../utils/downloadFile';
 
@@ -23,6 +23,7 @@ jest.mock('../../../../utils/commonUtils', () => ({
 
 jest.mock('../../../../utils/tagValidations', () => ({
   validateTags: jest.fn(),
+  hasUnsubscribeTag: jest.fn(() => false),
 }));
 
 jest.mock('../../../../utils/common', () => ({
@@ -217,11 +218,12 @@ jest.mock('../../../../v2Components/CapTagListWithInput', () => {
     React.useEffect(() => {
       setValue(props.inputValue || '');
     }, [props.inputValue]);
+    const isPreheader = props.inputId === 'template-preheader';
     return (
       <div data-testid="cap-tag-list-input">
         <input
-          id="template-subject"
-          data-testid="subject-input"
+          id={props.inputId || 'template-subject'}
+          data-testid={isPreheader ? 'preheader-input' : 'subject-input'}
           value={value}
           onChange={(e) => {
             setValue(e.target.value);
@@ -233,16 +235,35 @@ jest.mock('../../../../v2Components/CapTagListWithInput', () => {
         />
         <button
           onClick={() => props.onTagSelect && props.onTagSelect('customer.name')}
-          data-testid="trigger-tag-select"
+          data-testid={isPreheader ? 'preheader-trigger-tag-select' : 'trigger-tag-select'}
         >
           Select Tag
         </button>
+        {isPreheader && (
+          <button
+            onClick={() => props.onTagSelect && props.onTagSelect('')}
+            data-testid="preheader-trigger-tag-select-empty"
+          >
+            Select Empty Tag
+          </button>
+        )}
         <button
           onClick={() => props.onContextChange && props.onContextChange('default')}
-          data-testid="trigger-context-change"
+          data-testid={isPreheader ? 'preheader-trigger-context-change' : 'trigger-context-change'}
         >
           Change Context
         </button>
+        {props.extraContent}
+        {props.inputProps && props.inputProps.prefix}
+        {props.inputProps && props.inputProps.suffix}
+        <span data-testid={isPreheader ? 'preheader-exclude-tags' : 'subject-exclude-tags'}>
+          {JSON.stringify(props.excludeTags || [])}
+        </span>
+        {props.inputErrorMessage && (
+          <span data-testid={isPreheader ? 'preheader-error' : 'subject-error'}>
+            {props.inputErrorMessage}
+          </span>
+        )}
       </div>
     );
   };
@@ -407,6 +428,7 @@ describe('EmailHTMLEditor', () => {
     jest.clearAllMocks();
     validateLiquidTemplateContent.mockResolvedValue(true);
     validateTags.mockReturnValue({ valid: true });
+    hasUnsubscribeTag.mockReturnValue(false);
     isEmailUnsubscribeTagOptional.mockReturnValue(false);
     // Reset mock functions
     mockGetAllIssues.mockReturnValue([]);
@@ -754,6 +776,186 @@ describe('EmailHTMLEditor', () => {
     });
   });
 
+  describe('Pre-header Handling', () => {
+    const revealPreheader = () => {
+      fireEvent.click(screen.getByText('+ Pre-header'));
+    };
+
+    it('uses the updated placeholder text and 85-character limit', () => {
+      renderWithIntl();
+      revealPreheader();
+
+      expect(screen.getByTestId('preheader-input').placeholder).toBe('e.g. Get 20% off your next order');
+      expect(screen.getByText('0 / 85')).toBeInTheDocument();
+
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: 'Hello' } });
+      expect(screen.getByText('5 / 85')).toBeInTheDocument();
+    });
+
+    it('shows an info tooltip icon next to the Pre-header label', () => {
+      const { container } = renderWithIntl();
+      revealPreheader();
+
+      expect(container.querySelector('.cap-icon-v2-info-circle')).toBeInTheDocument();
+    });
+
+    it('inserts tag into Pre-header field at the cursor position', () => {
+      renderWithIntl();
+      revealPreheader();
+      const input = screen.getByTestId('preheader-input');
+      fireEvent.change(input, { target: { value: 'Hello ' } });
+      Object.defineProperty(input, 'selectionStart', { value: 6, writable: true });
+      Object.defineProperty(input, 'selectionEnd', { value: 6, writable: true });
+
+      fireEvent.click(screen.getByTestId('preheader-trigger-tag-select'));
+
+      expect(screen.getByTestId('preheader-input').value).toBe('Hello {{customer.name}}');
+    });
+
+    it('appends the tag when the Pre-header input has no selection', () => {
+      renderWithIntl();
+      revealPreheader();
+      const input = screen.getByTestId('preheader-input');
+      fireEvent.change(input, { target: { value: 'Hello' } });
+      Object.defineProperty(input, 'selectionStart', { value: undefined, writable: true });
+      Object.defineProperty(input, 'selectionEnd', { value: undefined, writable: true });
+
+      fireEvent.click(screen.getByTestId('preheader-trigger-tag-select'));
+
+      expect(screen.getByTestId('preheader-input').value).toBe('Hello{{customer.name}}');
+    });
+
+    it('appends the tag when the Pre-header input element is not found', () => {
+      renderWithIntl();
+      revealPreheader();
+      const input = screen.getByTestId('preheader-input');
+      fireEvent.change(input, { target: { value: 'Hello' } });
+      input.remove();
+
+      fireEvent.click(screen.getByTestId('preheader-trigger-tag-select'));
+      // Should handle gracefully without throwing
+    });
+
+    it('falls back to a safe append when reading the Pre-header input throws', () => {
+      renderWithIntl();
+      revealPreheader();
+      const input = screen.getByTestId('preheader-input');
+      fireEvent.change(input, { target: { value: 'Hello' } });
+      Object.defineProperty(input, 'selectionStart', {
+        configurable: true,
+        get() { throw new Error('boom'); },
+      });
+
+      expect(() => fireEvent.click(screen.getByTestId('preheader-trigger-tag-select'))).not.toThrow();
+      expect(screen.getByTestId('preheader-input').value).toBe('Hello{{customer.name}}');
+    });
+
+    it('does nothing when the Pre-header tag select fires without data', () => {
+      renderWithIntl();
+      revealPreheader();
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: 'Hello' } });
+
+      fireEvent.click(screen.getByTestId('preheader-trigger-tag-select-empty'));
+
+      expect(screen.getByTestId('preheader-input').value).toBe('Hello');
+    });
+
+    it('inserts a tag into an empty Pre-header field', () => {
+      renderWithIntl();
+      revealPreheader();
+
+      fireEvent.click(screen.getByTestId('preheader-trigger-tag-select'));
+
+      expect(screen.getByTestId('preheader-input').value).toBe('{{customer.name}}');
+    });
+
+    it('handles the Pre-header context-change trigger', () => {
+      renderWithIntl();
+      revealPreheader();
+
+      fireEvent.click(screen.getByTestId('preheader-trigger-context-change'));
+      // Exercises handleOnTagsContextChange for the Pre-header field
+    });
+
+    it('clears a stale Pre-header error once the user edits the field again', () => {
+      hasUnsubscribeTag.mockReturnValue(true);
+      const { rerender } = renderWithIntl({ isGetFormData: false });
+      fireEvent.change(screen.getByTestId('subject-input'), { target: { value: 'Valid Subject' } });
+      revealPreheader();
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: '{{unsubscribe}}' } });
+
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} isGetFormData />
+        </IntlProvider>
+      );
+      expect(screen.getByTestId('preheader-error')).toBeInTheDocument();
+
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: '{{unsubscribe}} extra' } });
+
+      expect(screen.queryByTestId('preheader-error')).not.toBeInTheDocument();
+    });
+
+    it('blocks save for an invalid Pre-header even when onValidationFail is not provided', () => {
+      hasUnsubscribeTag.mockReturnValue(true);
+      const emailActions = {
+        ...defaultProps.emailActions,
+        createTemplate: jest.fn((obj, callback) => callback({ templateId: { _id: '123', versions: {} } })),
+      };
+      const props = { ...defaultProps, emailActions };
+      delete props.onValidationFail;
+      const { rerender } = render(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...props} isGetFormData={false} />
+        </IntlProvider>
+      );
+      fireEvent.change(screen.getByTestId('subject-input'), { target: { value: 'Valid Subject' } });
+      revealPreheader();
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: '{{unsubscribe}}' } });
+
+      expect(() => rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...props} isGetFormData />
+        </IntlProvider>
+      )).not.toThrow();
+
+      expect(screen.getByTestId('preheader-error')).toBeInTheDocument();
+      expect(emailActions.createTemplate).not.toHaveBeenCalled();
+    });
+
+    it('removes the Pre-header field, clearing its value and error, when Remove is clicked', () => {
+      hasUnsubscribeTag.mockReturnValue(true);
+      const { rerender } = renderWithIntl({ isGetFormData: false });
+      fireEvent.change(screen.getByTestId('subject-input'), { target: { value: 'Valid Subject' } });
+      revealPreheader();
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: '{{unsubscribe}}' } });
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} isGetFormData />
+        </IntlProvider>
+      );
+      expect(screen.getByTestId('preheader-error')).toBeInTheDocument();
+
+      fireEvent.click(screen.getByText('Remove'));
+
+      expect(screen.queryByTestId('preheader-input')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('preheader-error')).not.toBeInTheDocument();
+      expect(screen.getByText('+ Pre-header')).toBeInTheDocument();
+    });
+
+    it('defaults injectedTags to {} for the Pre-header tag list when the prop is falsy', () => {
+      // null (not undefined) is required here: a static defaultProps entry only kicks in for
+      // undefined, so deleting the prop would never actually exercise the `|| {}` fallback.
+      expect(() => render(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} injectedTags={null} />
+        </IntlProvider>
+      )).not.toThrow();
+      fireEvent.click(screen.getByText('+ Pre-header'));
+      expect(screen.getByTestId('preheader-input')).toBeInTheDocument();
+    });
+  });
+
   describe('Content Change Handling', () => {
     it('updates content when HTMLEditor changes', () => {
       renderWithIntl();
@@ -899,6 +1101,63 @@ describe('EmailHTMLEditor', () => {
       }, { timeout: 3000 });
     });
 
+    it('hides the unsubscribe tag from the Pre-header Add Label dropdown but not Subject\'s', () => {
+      renderWithIntl();
+      fireEvent.click(screen.getByText('+ Pre-header'));
+      expect(screen.getByTestId('preheader-exclude-tags')).toHaveTextContent(JSON.stringify(['unsubscribe']));
+      expect(screen.getByTestId('subject-exclude-tags')).toHaveTextContent(JSON.stringify([]));
+    });
+
+    it('blocks save and shows an inline error when Pre-header contains the unsubscribe tag', async () => {
+      const onValidationFail = jest.fn();
+      hasUnsubscribeTag.mockReturnValue(true);
+      const { rerender } = renderWithIntl({ onValidationFail, isGetFormData: false });
+      fireEvent.change(screen.getByTestId('subject-input'), { target: { value: 'Valid Subject' } });
+      fireEvent.click(screen.getByText('+ Pre-header'));
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: '{{unsubscribe}}' } });
+
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} onValidationFail={onValidationFail} isGetFormData />
+        </IntlProvider>
+      );
+
+      await waitFor(() => {
+        expect(onValidationFail).toHaveBeenCalled();
+      }, { timeout: 3000 });
+      expect(defaultProps.emailActions.createTemplate).not.toHaveBeenCalled();
+      expect(screen.getByTestId('preheader-error')).toHaveTextContent('Unsubscribe tag is not allowed in Pre-header.');
+    });
+
+    it('allows save when Pre-header does not contain the unsubscribe tag', async () => {
+      hasUnsubscribeTag.mockReturnValue(false);
+      const emailActions = {
+        ...defaultProps.emailActions,
+        transformEmailTemplate: jest.fn((obj, callback) => callback(obj)),
+        createTemplate: jest.fn((obj, callback) => {
+          callback({ templateId: { _id: '123', versions: {} } });
+        }),
+      };
+      const { rerender } = renderWithIntl({
+        isGetFormData: false, templateName: 'New Template', emailActions, getLiquidTags: null,
+      });
+      fireEvent.change(screen.getByTestId('subject-input'), { target: { value: 'Valid Subject' } });
+      fireEvent.click(screen.getByText('+ Pre-header'));
+      fireEvent.change(screen.getByTestId('preheader-input'), { target: { value: 'A normal preheader' } });
+      fireEvent.click(screen.getByTestId('trigger-content-change'));
+
+      rerender(
+        <IntlProvider locale="en" messages={{}}>
+          <EmailHTMLEditor {...defaultProps} isGetFormData templateName="New Template" emailActions={emailActions} getLiquidTags={null} />
+        </IntlProvider>
+      );
+
+      await waitFor(() => {
+        expect(emailActions.createTemplate).toHaveBeenCalled();
+      }, { timeout: 3000 });
+      expect(screen.queryByTestId('preheader-error')).not.toBeInTheDocument();
+    });
+
     it('blocks save when there are HTML validation errors', async () => {
       const onValidationFail = jest.fn();
       // Mock getAllIssues to return BLOCKING errors (sanitizer errors or client-side Liquid errors)

package/v2Containers/EmailWrapper/components/_emailHTMLEditor.scss

@@ -9,3 +9,32 @@
 .html-editor-options-icon {
   cursor: pointer;
 }
+
+// Subject/Pre-header field rows
+.email-html-editor-field {
+  margin-bottom: $CAP_SPACE_16;
+}
+
+.email-html-editor-add-preheader-btn {
+  white-space: nowrap;
+}
+
+// Subject/Pre-header inline prefix label and Pre-header suffix (counter + Remove)
+.email-html-editor-prefix {
+  padding-right: $CAP_SPACE_08;
+  margin-right: $CAP_SPACE_08;
+  border-right: 0.0625rem solid $CAP_COLOR_16;
+}
+
+.email-html-editor-prefix-label {
+  font-weight: 600;
+}
+
+.email-html-editor-counter {
+  white-space: nowrap;
+}
+
+.email-html-editor-remove-link {
+  white-space: nowrap;
+  cursor: pointer;
+}

package/v2Containers/EmailWrapper/constants.js

@@ -4,6 +4,8 @@
  *
  */
 
+import { UNSUBSCRIBE_TAG } from '../../constants/unified';
+
 export const DEFAULT_ACTION = "app/EmailWrapper/DEFAULT_ACTION";
 export const EMAIL_CREATE_MODES = {
   UPLOAD: "upload",
@@ -17,3 +19,6 @@ export const STEPS = {
   TEMPLATE_SELECTION: "templateSelection",
   CREATE_TEMPLATE_CONTENT: "createTemplateContent",
 };
+
+// Unsubscribe is not a valid Pre-header tag — hide it from the "Add Label" dropdown there.
+export const PREHEADER_EXCLUDED_TAGS = [UNSUBSCRIBE_TAG];

package/v2Containers/EmailWrapper/messages.js

@@ -122,6 +122,30 @@ export default defineMessages({
     id: 'creatives.containersV2.EmailWrapper.enterEmailSubject',
     defaultMessage: 'Enter Email Subject',
   },
+  preheader: {
+    id: 'creatives.containersV2.EmailWrapper.preheader',
+    defaultMessage: 'Pre-header',
+  },
+  enterEmailPreheader: {
+    id: 'creatives.containersV2.EmailWrapper.enterEmailPreheader',
+    defaultMessage: 'e.g. Get 20% off your next order',
+  },
+  preheaderInfoTooltip: {
+    id: 'creatives.containersV2.EmailWrapper.preheaderInfoTooltip',
+    defaultMessage: 'Shows next to the subject line in the inbox, use it to add context and improve open rates. Keep it to 40–85 characters.',
+  },
+  addPreheader: {
+    id: 'creatives.containersV2.EmailWrapper.addPreheader',
+    defaultMessage: '+ Pre-header',
+  },
+  removePreheader: {
+    id: 'creatives.containersV2.EmailWrapper.removePreheader',
+    defaultMessage: 'Remove',
+  },
+  unsubscribeNotAllowedInPreheader: {
+    id: 'creatives.containersV2.EmailWrapper.unsubscribeNotAllowedInPreheader',
+    defaultMessage: 'Unsubscribe tag is not allowed in Pre-header.',
+  },
   editorType: {
     id: 'creatives.containersV2.EmailWrapper.editorType',
     defaultMessage: 'Editor type',

package/v2Containers/TagList/index.js

@@ -287,6 +287,10 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       //filtering BADGES_RELATED_TAGS if org does not have BADGES feature enabled
       excludedTags.push(...BADGES_RELATED_TAGS);
     }
+    if (this.props.excludeTags?.length) {
+      // Caller-specified exclusions (e.g. unsubscribe tag not allowed in the Pre-header field)
+      excludedTags.push(...this.props.excludeTags);
+    }
     //Form tags object with tag headers
     _.forEach(tagsList, (temp) => {
       const tag = temp.definition;
@@ -491,12 +495,15 @@ TagList.defaultProps = {
   userLocale: 'en',
   eventContextTags: [],
   waitEventContextTags: {},
+  excludeTags: [],
 };
 
 TagList.propTypes = {
   onTagSelect: PropTypes.func,
   tags: PropTypes.array,
   injectedTags: PropTypes.object,
+  // Tag values (e.g. 'unsubscribe') to hide from the Add Label dropdown for this instance
+  excludeTags: PropTypes.array,
   label: PropTypes.string,
   onContextChange: PropTypes.func,
   moduleFilterEnabled: PropTypes.bool,

package/v2Containers/TagList/tests/TagList.test.js

@@ -105,6 +105,48 @@ describe("TagList test :  UNIT", () => {
     expect(btn).toBeDisabled();
   });
 
+  it('hides a tag named in excludeTags from the Add Label dropdown, keeping other tags visible', () => {
+    const unsubscribeTag = {
+      _id: 'unsubscribe-tag-id',
+      type: 'TAG',
+      definition: {
+        label: { en: 'Unsubscribe' },
+        value: 'unsubscribe',
+        subtags: [],
+        'tag-header': false,
+        supportedModules: [{ context: 'default', layout: 'email', mandatory: false }],
+      },
+    };
+    initializeTagList({
+      tags: [...TagListData.tags, unsubscribeTag],
+      excludeTags: ['unsubscribe'],
+      moduleFilterEnabled: false,
+    });
+    addLabelBtnAssertion();
+    expect(queryByText(/Unsubscribe/i)).not.toBeInTheDocument();
+    expect(getByText(/Optout/i)).toBeInTheDocument();
+  });
+
+  it('does not filter any tag when excludeTags is not provided (default behavior unaffected)', () => {
+    const unsubscribeTag = {
+      _id: 'unsubscribe-tag-id',
+      type: 'TAG',
+      definition: {
+        label: { en: 'Unsubscribe' },
+        value: 'unsubscribe',
+        subtags: [],
+        'tag-header': false,
+        supportedModules: [{ context: 'default', layout: 'email', mandatory: false }],
+      },
+    };
+    initializeTagList({
+      tags: [...TagListData.tags, unsubscribeTag],
+      moduleFilterEnabled: false,
+    });
+    addLabelBtnAssertion();
+    expect(getByText(/Unsubscribe/i)).toBeInTheDocument();
+  });
+
   it('calls transformCouponTags when selectedOfferDetails and coupon tags are present', () => {
     const spy = jest.spyOn(TagList.prototype, 'transformCouponTags');
     initializeTagList({

package/v2Containers/Templates/constants.js

@@ -95,6 +95,7 @@ export const noApprovedRcsTemplatesTitle='noApprovedRcsTemplatesTitle'
 export const noApprovedRcsTemplatesDesc='noApprovedRcsTemplatesDesc'
 
 // Archive feature
+export const DEFAULT_ARCHIVAL_LIMIT = 25;
 export const ARCHIVE_TEMPLATE_REQUEST = 'app/v2Containers/Templates/ARCHIVE_TEMPLATE_REQUEST';
 export const ARCHIVE_TEMPLATE_SUCCESS = 'app/v2Containers/Templates/ARCHIVE_TEMPLATE_SUCCESS';
 export const ARCHIVE_TEMPLATE_FAILURE = 'app/v2Containers/Templates/ARCHIVE_TEMPLATE_FAILURE';

package/v2Containers/Templates/index.js

@@ -117,7 +117,7 @@ import {
   URL,
   SITE_URL,
 } from '../App/constants';
-import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES , ACCOUNT_MAPPING_ON_CHANNEL, noFilteredWhatsappZaloTemplatesTitle, noFilteredWhatsappZaloTemplatesDesc, noApprovedWhatsappZaloTemplatesTitle, noApprovedWhatsappTemplatesDesc, zaloDescIllustration, noApprovedRcsTemplatesTitle, noApprovedRcsTemplatesDesc, ARCHIVE_STATUS_ACTIVE, ARCHIVE_STATUS_ARCHIVED, ARCHIVE_REFRESH_TYPE_ARCHIVE, ARCHIVE_REFRESH_TYPE_UNARCHIVE} from './constants';
+import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES , ACCOUNT_MAPPING_ON_CHANNEL, noFilteredWhatsappZaloTemplatesTitle, noFilteredWhatsappZaloTemplatesDesc, noApprovedWhatsappZaloTemplatesTitle, noApprovedWhatsappTemplatesDesc, zaloDescIllustration, noApprovedRcsTemplatesTitle, noApprovedRcsTemplatesDesc, ARCHIVE_STATUS_ACTIVE, ARCHIVE_STATUS_ARCHIVED, ARCHIVE_REFRESH_TYPE_ARCHIVE, ARCHIVE_REFRESH_TYPE_UNARCHIVE, DEFAULT_ARCHIVAL_LIMIT} from './constants';
 import { COPY_OF, EMBEDDED } from '../../constants/unified';
 import { sanitizeFileName, exportEmailTemplateHtml } from '../../utils/downloadFile';
 import {
@@ -152,7 +152,7 @@ import {
   CAP_SPACE_16, CAP_G08, CAP_G05, CAP_SPACE_08, CAP_SPACE_12, CAP_YELLOW01,
 } from '@capillarytech/cap-ui-library/styled/variables';
 import { SMS_CATEGORY_TAG_STYLES, SMS_CATEGORY_LABELS } from '../../v2Components/SmsFallback/constants';
-import { GA } from '@capillarytech/cap-ui-utils';
+import { GA, getEnvVariable } from '@capillarytech/cap-ui-utils';
 import { MAPP_SDK } from '../InApp/constants';
 import injectReducer from '../../utils/injectReducer';
 import v2TemplateReducer from './reducer';
@@ -186,6 +186,7 @@ const AccountScrollDiv = styled.div`
   overflow: scroll;
   height: calc(100vh - 18.75rem);
 `;
+const ARCHIVAL_LIMIT = parseInt(getEnvVariable('ARCHIVAL_LIMIT'), 10) || DEFAULT_ARCHIVAL_LIMIT;
 const ACCOUNT_SELECTION_MODE = "accountSelectionMode";
 const ACCOUNT_CHANGE_MODE = 'accountChangeMode';
 const TEMPLATES_MODE = "templatesMode";
@@ -2159,10 +2160,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       // Archive eligibility per template: Zalo never; WhatsApp/RCS not when pending/awaiting
       const cardWhatsappStatus = get(template, `versions.base.content.${WHATSAPP_LOWERCASE}.status`, '');
       const cardRcsStatus = get(template, 'versions.base.content.RCS.rcsContent.cardContent[0].Status', '');
-      const isArchivalEnabled = commonUtil.hasCreativesArchivalEnabled();
-      const isCardArchiveEligible = isArchivalEnabled && this.isChannelArchiveEligible(currentChannel, cardWhatsappStatus, cardRcsStatus);
-      const isArchivedMode = isArchivalEnabled && get(this.props, 'Templates.isArchivedMode', false);
-      const isAnyArchiveInProgress = isArchivalEnabled && !!(get(this.props, 'Templates.archiveInProgress') || get(this.props, 'Templates.unarchiveInProgress') || get(this.props, 'Templates.bulkArchiveInProgress') || get(this.props, 'Templates.bulkUnarchiveInProgress'));
+      const isCardArchiveEligible = this.isChannelArchiveEligible(currentChannel, cardWhatsappStatus, cardRcsStatus);
+      const isArchivedMode = get(this.props, 'Templates.isArchivedMode', false);
+      const isAnyArchiveInProgress = !!(get(this.props, 'Templates.archiveInProgress') || get(this.props, 'Templates.unarchiveInProgress') || get(this.props, 'Templates.bulkArchiveInProgress') || get(this.props, 'Templates.bulkUnarchiveInProgress'));
       const templateData = {
         key: `${currentChannel}-card-${template?.name}`,
         title: (
@@ -2307,7 +2307,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                   </CapMenu.Item>
                 )}
                 {/* Archive/Unarchive menu item (full mode only, not for Zalo, not for WhatsApp/RCS awaiting/pending) */}
-                {commonUtil.hasCreativesArchivalEnabled() && (() => {
+                {(() => {
                   const channelUp = this.state.channel.toUpperCase();
                   if (!this.isChannelArchiveEligible(channelUp, status, rcsStatus)) return null;
                   const canArchive = this.canPerform(PERMISSIONS.CREATIVE_DELETE);
@@ -2928,12 +2928,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     
     const noLoaderAndSearchText = isEmpty(this.state.searchText) && !isLoading;
 
-    const isArchivalEnabledLocal = commonUtil.hasCreativesArchivalEnabled();
-    const isArchivedModeLocal = isArchivalEnabledLocal && get(this.props, 'Templates.isArchivedMode', false);
+    const isArchivedModeLocal = get(this.props, 'Templates.isArchivedMode', false);
     const selectedIdsLocal = get(this.props, 'Templates.selectedTemplateIds', []);
     const selectedIdsArrayLocal = selectedIdsLocal && typeof selectedIdsLocal.toJS === 'function' ? selectedIdsLocal.toJS() : (Array.isArray(selectedIdsLocal) ? selectedIdsLocal : []);
     const selectedCountLocal = selectedIdsArrayLocal.length;
-    const hasSelectionLocal = isArchivalEnabledLocal && this.props.isFullMode && selectedCountLocal > 0;
+    const hasSelectionLocal = this.props.isFullMode && selectedCountLocal > 0;
+    const isArchiveLimitExceeded = selectedCountLocal > ARCHIVAL_LIMIT;
 
     return (<div>
       {[WECHAT, MOBILE_PUSH, WEBPUSH, INAPP, WHATSAPP, ZALO, RCS].includes(currentChannel) && this.showAccountName()}
@@ -2945,16 +2945,21 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               {this.props.intl.formatMessage(messages.templatesSelected, { count: selectedCountLocal })}
             </CapLabel>
             <NoPermissionWrapper allowed={this.canPerform(PERMISSIONS.CREATIVE_DELETE)}>
-              <CapButton
-                type="primary"
-                className="archive-template-button"
-                prefix={<CapIcon type="archive" size="s" />}
-                onClick={() => this.handleBulkArchiveAction({ ids: selectedIdsArrayLocal, count: selectedCountLocal, isUnarchive: isArchivedModeLocal })}
-              >
-                <span className="archive-btn-label">
-                  <FormattedMessage {...(isArchivedModeLocal ? messages.unarchiveButton : messages.archiveButton)} />
+              <CapTooltip title={isArchiveLimitExceeded ? this.props.intl.formatMessage(messages.archiveLimitExceeded, { limit: ARCHIVAL_LIMIT }) : ''}>
+                <span>
+                  <CapButton
+                    type="primary"
+                    className="archive-template-button"
+                    disabled={isArchiveLimitExceeded}
+                    prefix={<CapIcon type="archive" size="s" />}
+                    onClick={() => this.handleBulkArchiveAction({ ids: selectedIdsArrayLocal, count: selectedCountLocal, isUnarchive: isArchivedModeLocal })}
+                  >
+                    <span className="archive-btn-label">
+                      <FormattedMessage {...(isArchivedModeLocal ? messages.unarchiveButton : messages.archiveButton)} />
+                    </span>
+                  </CapButton>
                 </span>
-              </CapButton>
+              </CapTooltip>
             </NoPermissionWrapper>
             <CapButton type="secondary" onClick={() => this.props.actions.clearTemplateSelection()}>
               <FormattedMessage {...messages.archiveConfirmCancel} />
@@ -4195,7 +4200,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               <span className="template-name" style={{ fontWeight: `${this.state.channel.toLowerCase() === 'wechat' ? '400' : '600'}` }}>
                 { template && template.versions && template.versions.history && template.versions.history.length > 1 && this.state.channel.toLowerCase() !== 'mobilepush' && <i style={{fontSize: '16px', margin: '0 8px 0 0', verticalAlign: 'middle'}} className="material-icons">filter_none</i>}
                 {template?.name}
-                {commonUtil.hasCreativesArchivalEnabled() && template.isArchived && <CapColoredTag tagColor={CAP_G08} tagTextColor={CAP_G05} className="archived-tag">{this.props.intl.formatMessage(messages.archivedTag)}</CapColoredTag>}
+                {template.isArchived && <CapColoredTag tagColor={CAP_G08} tagTextColor={CAP_G05} className="archived-tag">{this.props.intl.formatMessage(messages.archivedTag)}</CapColoredTag>}
               </span>
               {this.props.location.query.type !== EMBEDDED && <CapPopover
                 trigger="click"
@@ -4208,7 +4213,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                         </CapButton>
                       </NoPermissionWrapper>
                     </div>}
-                    {commonUtil.hasCreativesArchivalEnabled() && this.props.isFullMode && isTemplateArchiveEligible && !template.isArchived && <div className="popover-action-container">
+                    {this.props.isFullMode && isTemplateArchiveEligible && !template.isArchived && <div className="popover-action-container">
                       <NoPermissionWrapper allowed={this.canPerform(PERMISSIONS.CREATIVE_DELETE)}>
                         <CapButton
                           type="link"
@@ -4220,7 +4225,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                         </CapButton>
                       </NoPermissionWrapper>
                     </div>}
-                    {commonUtil.hasCreativesArchivalEnabled() && this.props.isFullMode && isTemplateArchiveEligible && template.isArchived && <div className="popover-action-container">
+                    {this.props.isFullMode && isTemplateArchiveEligible && template.isArchived && <div className="popover-action-container">
                       <NoPermissionWrapper allowed={this.canPerform(PERMISSIONS.CREATIVE_DELETE)}>
                         <CapButton
                           type="link"
@@ -4867,11 +4872,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (([WHATSAPP_LOWERCASE, ZALO_LOWERCASE, RCS_LOWERCASE].includes(this.state?.channel?.toLocaleLowerCase()) && isEmpty(this.state?.hostName))) {
       isfilterContentVisisble = false;
     }
-    const _isArchivalEnabled = commonUtil.hasCreativesArchivalEnabled();
-    const _isArchivedMode = _isArchivalEnabled && get(this.props, 'Templates.isArchivedMode', false);
+    const _isArchivedMode = get(this.props, 'Templates.isArchivedMode', false);
     const _renderSelectedIds = get(this.props, 'Templates.selectedTemplateIds', []);
     const _renderSelectedIdsArray = _renderSelectedIds && typeof _renderSelectedIds.toJS === 'function' ? _renderSelectedIds.toJS() : (Array.isArray(_renderSelectedIds) ? _renderSelectedIds : []);
-    const _renderHasSelection = _isArchivalEnabled && this.props.isFullMode && _renderSelectedIdsArray.length > 0;
+    const _renderHasSelection = this.props.isFullMode && _renderSelectedIdsArray.length > 0;
 
     const useLocalTemplates = this.props.localTemplatesConfig?.useLocalTemplates;
     const builtFilterContent = ((isfilterContentVisisble || [WECHAT, MOBILE_PUSH, INAPP].includes(this.state.channel.toUpperCase())) && (
@@ -5033,7 +5037,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
       <div className="template-listing-header-actions">
         {/* More (⋯) menu: full mode only, not archived mode, not Zalo (no archive support), not when selection active, archive flag enabled */}
-        {commonUtil.hasCreativesArchivalEnabled() && !_isArchivedMode && !_renderHasSelection && this.props.isFullMode && this.props.location.query.type !== EMBEDDED && channelLowerCase !== ZALO_LOWERCASE && (
+        {!_isArchivedMode && !_renderHasSelection && this.props.isFullMode && this.props.location.query.type !== EMBEDDED && channelLowerCase !== ZALO_LOWERCASE && (
           <CapDropdown
             trigger={['click']}
             overlay={
@@ -5129,7 +5133,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           />
 
           {/* Archived mode header with back arrow (full mode only, archive flag enabled) */}
-          {commonUtil.hasCreativesArchivalEnabled() && this.props.isFullMode && get(this.props, 'Templates.isArchivedMode', false) && (
+          {this.props.isFullMode && get(this.props, 'Templates.isArchivedMode', false) && (
             <CapRow type="flex" align="middle" className="archived-mode-header">
               <CapIcon
                 type="back"

package/v2Containers/Templates/messages.js

@@ -714,6 +714,10 @@ export default defineMessages({
     id: `${scope}.unarchiveTemplateSuccess`,
     defaultMessage: 'Template unarchived successfully',
   },
+  "archiveLimitExceeded": {
+    id: `${scope}.archiveLimitExceeded`,
+    defaultMessage: 'Archive limit exceeded, it cannot be greater than {limit}.',
+  },
   "bulkArchiveSuccess": {
     id: `${scope}.bulkArchiveSuccess`,
     defaultMessage: '{count} {count, plural, one {template} other {templates}} archived successfully',