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

package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap

@@ -813,7 +813,38 @@ exports[`Test Templates container Should render temlates when whatsapp templates
                   <Component />
                   <div
                     className="template-listing-header-actions"
-                  />
+                  >
+                    <CapDropdownComponent
+                      overlay={
+                        <CapMenuComponent>
+                          <withItemHOC
+                            onClick={[Function]}
+                          >
+                            <FormattedMessage
+                              defaultMessage="Archived templates"
+                              id="creatives.containersV2.Templates.archivedTemplates"
+                              values={Object {}}
+                            />
+                          </withItemHOC>
+                        </CapMenuComponent>
+                      }
+                      placement="bottomRight"
+                      trigger={
+                        Array [
+                          "click",
+                        ]
+                      }
+                    >
+                      <CapButton
+                        className="template-listing-more-btn"
+                        type="flat"
+                      >
+                        <CapIcon
+                          type="more"
+                        />
+                      </CapButton>
+                    </CapDropdownComponent>
+                  </div>
                 </div>
                 <div>
                   <div
@@ -1227,7 +1258,38 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
                   <Component />
                   <div
                     className="template-listing-header-actions"
-                  />
+                  >
+                    <CapDropdownComponent
+                      overlay={
+                        <CapMenuComponent>
+                          <withItemHOC
+                            onClick={[Function]}
+                          >
+                            <FormattedMessage
+                              defaultMessage="Archived templates"
+                              id="creatives.containersV2.Templates.archivedTemplates"
+                              values={Object {}}
+                            />
+                          </withItemHOC>
+                        </CapMenuComponent>
+                      }
+                      placement="bottomRight"
+                      trigger={
+                        Array [
+                          "click",
+                        ]
+                      }
+                    >
+                      <CapButton
+                        className="template-listing-more-btn"
+                        type="flat"
+                      >
+                        <CapIcon
+                          type="more"
+                        />
+                      </CapButton>
+                    </CapDropdownComponent>
+                  </div>
                 </div>
                 <div>
                   <div
@@ -1714,7 +1776,38 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
                   <Component />
                   <div
                     className="template-listing-header-actions"
-                  />
+                  >
+                    <CapDropdownComponent
+                      overlay={
+                        <CapMenuComponent>
+                          <withItemHOC
+                            onClick={[Function]}
+                          >
+                            <FormattedMessage
+                              defaultMessage="Archived templates"
+                              id="creatives.containersV2.Templates.archivedTemplates"
+                              values={Object {}}
+                            />
+                          </withItemHOC>
+                        </CapMenuComponent>
+                      }
+                      placement="bottomRight"
+                      trigger={
+                        Array [
+                          "click",
+                        ]
+                      }
+                    >
+                      <CapButton
+                        className="template-listing-more-btn"
+                        type="flat"
+                      >
+                        <CapIcon
+                          type="more"
+                        />
+                      </CapButton>
+                    </CapDropdownComponent>
+                  </div>
                 </div>
                 <div>
                   <div
@@ -2201,7 +2294,38 @@ exports[`Test Templates container Test max templates warning 1`] = `
                   <Component />
                   <div
                     className="template-listing-header-actions"
-                  />
+                  >
+                    <CapDropdownComponent
+                      overlay={
+                        <CapMenuComponent>
+                          <withItemHOC
+                            onClick={[Function]}
+                          >
+                            <FormattedMessage
+                              defaultMessage="Archived templates"
+                              id="creatives.containersV2.Templates.archivedTemplates"
+                              values={Object {}}
+                            />
+                          </withItemHOC>
+                        </CapMenuComponent>
+                      }
+                      placement="bottomRight"
+                      trigger={
+                        Array [
+                          "click",
+                        ]
+                      }
+                    >
+                      <CapButton
+                        className="template-listing-more-btn"
+                        type="flat"
+                      >
+                        <CapIcon
+                          type="more"
+                        />
+                      </CapButton>
+                    </CapDropdownComponent>
+                  </div>
                 </div>
                 <div>
                   <div

package/v2Containers/Templates/tests/archival.test.js

@@ -0,0 +1,221 @@
+import React from 'react';
+import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
+import { Templates } from '../index';
+import mockdata from '../../mockdata';
+import { DEFAULT_ARCHIVAL_LIMIT } from '../constants';
+import { CREATIVE_CREATE, CREATIVE_DELETE, CREATIVE_EDIT } from '../../App/constants';
+
+const { whatsappTemplates: TemplatesProp } = mockdata;
+
+jest.mock('@capillarytech/cap-ui-library', () => ({
+  ...jest.requireActual('@capillarytech/cap-ui-library'),
+  CapNotification: { error: jest.fn(), success: jest.fn(), warning: jest.fn() },
+}));
+
+jest.mock('../../CreativesContainer', () => ({
+  __esModule: true,
+  default: () => null,
+}));
+
+const buildTemplateIds = count => Array.from({ length: count }, (_, index) => `template_${index}`);
+
+// Walks a rendered element/plain-object tree (cards are never mounted) for a node by className.
+const findByClassName = (node, className, seen = new Set()) => {
+  if (!node || typeof node !== 'object' || seen.has(node)) return null;
+  seen.add(node);
+  if (Array.isArray(node)) {
+    return node.reduce((found, child) => found || findByClassName(child, className, seen), null);
+  }
+  if (node.props && typeof node.props.className === 'string' && node.props.className.includes(className)) {
+    return node;
+  }
+  return Object.values(node.props || node).reduce(
+    (found, value) => found || findByClassName(value, className, seen),
+    null,
+  );
+};
+
+describe('Templates archival (enabled by default)', () => {
+  const actions = {
+    getWeCrmAccounts: jest.fn(),
+    setChannelAccount: jest.fn(),
+    getAllTemplates: jest.fn(),
+    getUserList: jest.fn(),
+    getSenderDetails: jest.fn(),
+    resetTemplate: jest.fn(),
+    setArchivedMode: jest.fn(),
+    clearTemplateSelection: jest.fn(),
+    toggleTemplateSelection: jest.fn(),
+    bulkArchiveTemplates: jest.fn(),
+    bulkUnarchiveTemplates: jest.fn(),
+    archiveTemplate: jest.fn(),
+    unarchiveTemplate: jest.fn(),
+  };
+  let renderedComponent;
+
+  const renderTemplates = ({ channel = 'email', isFullMode = true, templatesProps = {} } = {}) => {
+    renderedComponent = shallowWithIntl(
+      <Templates
+        route={{ name: channel }}
+        cap={{ user: { accessiblePermissions: [CREATIVE_CREATE, CREATIVE_EDIT, CREATIVE_DELETE] } }}
+        Templates={{ ...TemplatesProp, ...templatesProps }}
+        actions={actions}
+        location={{ pathname: `/${channel}`, query: {}, search: '' }}
+        EmailCreate={{ duplicateTemplateInProgress: false }}
+        isFullMode={isFullMode}
+        intl={{ formatMessage: ({ defaultMessage }) => defaultMessage }}
+      />,
+    );
+    return renderedComponent;
+  };
+
+  const getCardList = (templates, channel = 'email') =>
+    renderedComponent.instance().getTemplateDataForGrid({
+      templates,
+      handlers: { handlePreviewClick: jest.fn(), handleEditClick: jest.fn() },
+      filterContent: null,
+      channel,
+      isLoading: false,
+      isInitialLoading: false,
+      loadingTip: '',
+      previewTemplateId: null,
+    });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('bulk selection bar', () => {
+    const getBulkArchiveButton = () =>
+      renderedComponent
+        .find('.bulk-selection-bar')
+        .find('.archive-template-button');
+
+    it('renders without any feature flag once templates are selected', () => {
+      renderTemplates({ templatesProps: { selectedTemplateIds: buildTemplateIds(2) } });
+      expect(renderedComponent.find('.bulk-selection-bar')).toHaveLength(1);
+      expect(getBulkArchiveButton().prop('disabled')).toBe(false);
+    });
+
+    it('is not rendered when nothing is selected', () => {
+      renderTemplates({ templatesProps: { selectedTemplateIds: [] } });
+      expect(renderedComponent.find('.bulk-selection-bar')).toHaveLength(0);
+    });
+
+    it('is not rendered outside full mode', () => {
+      renderTemplates({ isFullMode: false, templatesProps: { selectedTemplateIds: buildTemplateIds(2) } });
+      expect(renderedComponent.find('.bulk-selection-bar')).toHaveLength(0);
+    });
+
+    it('keeps the action enabled at exactly the archival limit', () => {
+      renderTemplates({ templatesProps: { selectedTemplateIds: buildTemplateIds(DEFAULT_ARCHIVAL_LIMIT) } });
+      expect(getBulkArchiveButton().prop('disabled')).toBe(false);
+    });
+
+    it('disables the action and shows the limit message above the archival limit', () => {
+      renderTemplates({ templatesProps: { selectedTemplateIds: buildTemplateIds(DEFAULT_ARCHIVAL_LIMIT + 1) } });
+      expect(getBulkArchiveButton().prop('disabled')).toBe(true);
+      const tooltip = renderedComponent.find('.bulk-selection-bar').find('CapTooltip').first();
+      expect(tooltip.prop('title')).toContain('Archive limit exceeded');
+      expect(tooltip.prop('title')).toContain(String(DEFAULT_ARCHIVAL_LIMIT));
+    });
+
+    it('triggers bulk unarchive for the selection in archived mode', () => {
+      const selectedIds = buildTemplateIds(2);
+      renderTemplates({ templatesProps: { selectedTemplateIds: selectedIds, isArchivedMode: true } });
+      const handleBulkArchiveAction = jest
+        .spyOn(renderedComponent.instance(), 'handleBulkArchiveAction')
+        .mockImplementation(() => {});
+      getBulkArchiveButton().prop('onClick')();
+      expect(handleBulkArchiveAction).toHaveBeenCalledWith({ ids: selectedIds, count: 2, isUnarchive: true });
+    });
+  });
+
+  describe('handleBulkArchiveAction', () => {
+    it('opens the confirm modal and bulk archives the selected ids on confirm', () => {
+      renderTemplates();
+      const instance = renderedComponent.instance();
+      const showArchiveConfirm = jest.spyOn(instance, 'showArchiveConfirm').mockImplementation(() => {});
+      instance.handleBulkArchiveAction({ ids: ['a', 'b'], count: 2 });
+      expect(showArchiveConfirm).toHaveBeenCalledWith(expect.objectContaining({ count: 2, isUnarchive: false }));
+      showArchiveConfirm.mock.calls[0][0].onConfirm();
+      expect(actions.bulkArchiveTemplates).toHaveBeenCalledWith('Email', ['a', 'b'], expect.any(Function));
+      expect(actions.bulkUnarchiveTemplates).not.toHaveBeenCalled();
+    });
+
+    it('bulk unarchives when isUnarchive is set', () => {
+      renderTemplates();
+      const instance = renderedComponent.instance();
+      const showArchiveConfirm = jest.spyOn(instance, 'showArchiveConfirm').mockImplementation(() => {});
+      instance.handleBulkArchiveAction({ ids: ['a'], count: 1, isUnarchive: true });
+      showArchiveConfirm.mock.calls[0][0].onConfirm();
+      expect(actions.bulkUnarchiveTemplates).toHaveBeenCalledWith('Email', ['a'], expect.any(Function));
+      expect(actions.bulkArchiveTemplates).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('single template card', () => {
+    const activeTemplate = { _id: 'tpl_1', name: 'Active template', versions: { base: {} } };
+    const archivedTemplate = { _id: 'tpl_2', name: 'Archived template', isArchived: true, versions: { base: {} } };
+
+    it('shows the archive menu action for an active template without any feature flag', () => {
+      renderTemplates();
+      const cardList = getCardList([activeTemplate]);
+      expect(findByClassName(cardList, 'archive-email')).not.toBeNull();
+      expect(findByClassName(cardList, 'unarchive-email')).toBeNull();
+    });
+
+    it('shows the unarchive menu action for an archived template', () => {
+      renderTemplates();
+      const cardList = getCardList([archivedTemplate]);
+      expect(findByClassName(cardList, 'unarchive-email')).not.toBeNull();
+    });
+
+    it('shows the archived tag and unarchive popover action for an archived template', () => {
+      renderTemplates({ channel: 'sms' });
+      const cardList = renderedComponent.instance().populateTemplatesList([archivedTemplate], false, false);
+      expect(findByClassName(cardList, 'archived-tag')).not.toBeNull();
+      expect(findByClassName(cardList, 'popover-archive-action')).not.toBeNull();
+    });
+
+    it('shows no archived tag for an active template', () => {
+      renderTemplates({ channel: 'sms' });
+      const cardList = renderedComponent.instance().populateTemplatesList([activeTemplate], false, false);
+      expect(findByClassName(cardList, 'archived-tag')).toBeNull();
+      expect(findByClassName(cardList, 'popover-archive-action')).not.toBeNull();
+    });
+
+    it('hides the archive actions outside full mode', () => {
+      renderTemplates({ isFullMode: false });
+      const cardList = getCardList([activeTemplate]);
+      expect(findByClassName(cardList, 'archive-email')).toBeNull();
+    });
+
+    it('archives a single template through the confirm modal', () => {
+      renderTemplates();
+      const instance = renderedComponent.instance();
+      const showArchiveConfirm = jest.spyOn(instance, 'showArchiveConfirm').mockImplementation(() => {});
+      instance.handleTemplateArchiveAction({ templateId: 'tpl_1', templateName: 'Active template' });
+      expect(showArchiveConfirm).toHaveBeenCalledTimes(1);
+      showArchiveConfirm.mock.calls[0][0].onConfirm();
+      expect(actions.archiveTemplate).toHaveBeenCalled();
+    });
+
+    it('unarchives a single template through the confirm modal', () => {
+      renderTemplates();
+      const instance = renderedComponent.instance();
+      const showArchiveConfirm = jest.spyOn(instance, 'showArchiveConfirm').mockImplementation(() => {});
+      instance.handleTemplateArchiveAction({ templateId: 'tpl_2', templateName: 'Archived template', isUnarchive: true });
+      showArchiveConfirm.mock.calls[0][0].onConfirm();
+      expect(actions.unarchiveTemplate).toHaveBeenCalled();
+    });
+  });
+
+  describe('isChannelArchiveEligible', () => {
+    it('does not allow archiving Zalo templates', () => {
+      renderTemplates();
+      expect(renderedComponent.instance().isChannelArchiveEligible('ZALO')).toBe(false);
+      expect(renderedComponent.instance().isChannelArchiveEligible('SMS')).toBe(true);
+    });
+  });
+});