@capillarytech/creatives-library 8.0.345 → 8.0.347

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.345",
+  "version": "8.0.347",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/tests/v2Common.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { getObjFromQueryParams } from '../v2common';
+import { shallow } from 'enzyme';
+import { getObjFromQueryParams, buildTemplateNameDescription } from '../v2common';
 
 describe('Test v2common container', () => {
   it('test getObjFromQueryParams', () => {
@@ -9,3 +10,47 @@ describe('Test v2common container', () => {
     });
   });
 });
+
+describe('buildTemplateNameDescription', () => {
+  it('returns undefined when templateName is empty string', () => {
+    expect(buildTemplateNameDescription('Template name', '')).toBeUndefined();
+  });
+
+  it('returns undefined when templateName is null', () => {
+    expect(buildTemplateNameDescription('Template name', null)).toBeUndefined();
+  });
+
+  it('returns undefined when templateName is undefined', () => {
+    expect(buildTemplateNameDescription('Template name', undefined)).toBeUndefined();
+  });
+
+  it('renders a span wrapper when templateName is provided', () => {
+    const result = buildTemplateNameDescription('Template name', 'Welcome 01');
+    const wrapper = shallow(result);
+    expect(wrapper.type()).toBe('span');
+  });
+
+  it('renders label text in the first CapLabelInline with correct class', () => {
+    const result = buildTemplateNameDescription('Template name', 'Welcome 01');
+    const wrapper = shallow(result);
+    const firstLabel = wrapper.childAt(0);
+    expect(firstLabel.prop('className')).toBe('notification-template-label');
+    expect(firstLabel.prop('children')).toBe('Template name');
+  });
+
+  it('renders template name in the second CapLabelInline with correct class', () => {
+    const result = buildTemplateNameDescription('Template name', 'Welcome 01');
+    const wrapper = shallow(result);
+    const secondLabel = wrapper.childAt(1);
+    expect(secondLabel.prop('className')).toBe('notification-template-name');
+    expect(secondLabel.prop('children')).toBe('Welcome 01');
+  });
+
+  it('both CapLabelInline elements have type="label1"', () => {
+    const result = buildTemplateNameDescription('Template name', 'Welcome 01');
+    const wrapper = shallow(result);
+    wrapper.children().forEach((node) => {
+      expect(node.prop('type')).toBe('label1');
+    });
+  });
+});

package/utils/v2common.js

@@ -1,3 +1,21 @@
+import React from 'react';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+
+/**
+ * Builds a JSX description for template archive/unarchive notifications.
+ * @param {string} labelText - Localised label (e.g. "Template name ")
+ * @param {string} templateName - The template name to display
+ */
+export const buildTemplateNameDescription = (labelText, templateName) => (
+  templateName
+    ? (
+      <span>
+        <CapLabel.CapLabelInline type="label1" className="notification-template-label">{labelText}</CapLabel.CapLabelInline>
+        <CapLabel.CapLabelInline type="label1" className="notification-template-name">{templateName}</CapLabel.CapLabelInline>
+      </span>
+    )
+    : undefined
+);
 
 // returns query items as obj when query string is passed
 /**

package/v2Containers/Email/reducer.js

@@ -12,6 +12,8 @@ const initialState = fromJS({
   createTemplateInProgress: false,
   createResponse: {},
   isBeeEnabled: null,
+  fetchingCmsAccounts: false,
+  cmsAccountsLoaded: false,
 });
 
 function emailReducer(state = initialState, action) {
@@ -85,6 +87,7 @@ function emailReducer(state = initialState, action) {
     case types.GET_CMS_EDITOR_DETAILS_SUCCESS:
       return state
         .set('fetchingCmsSettings', false)
+        .set('isBeeEnabled', action.isBeeEnabled)
         .set('CmsSettings', fromJS(action.settings));
     case types.GET_CMS_EDITOR_DETAILS_FAILURE:
       return state
@@ -110,13 +113,19 @@ function emailReducer(state = initialState, action) {
         .set('fetchingCmsDataFailed', true);
     case types.GET_CMS_ACCOUNTS_REQUEST:
       return state
-        .set('isBeeEnabled', false); // default to false
+        .set('isBeeEnabled', false)
+        .set('fetchingCmsAccounts', true)
+        .set('cmsAccountsLoaded', false);
     case types.GET_CMS_ACCOUNTS_SUCCESS:
       return state
-        .set('isBeeEnabled', action.isBeeEnabled);
+        .set('isBeeEnabled', action.isBeeEnabled)
+        .set('fetchingCmsAccounts', false)
+        .set('cmsAccountsLoaded', true);
     case types.GET_CMS_ACCOUNTS_FAILURE:
       return state
-        .set('isBeeEnabled', false);
+        .set('isBeeEnabled', false)
+        .set('fetchingCmsAccounts', false)
+        .set('cmsAccountsLoaded', true);
     case types.CLEAR_EMAIL_CRUD_RESPONSE_REQUEST:
       return state
         .set('createResponse', fromJS({}));

package/v2Containers/Email/sagas.js

@@ -1,5 +1,5 @@
 import {
-  call, put, takeLatest, takeEvery, all,
+  call, put, takeLatest, takeEvery, all, select, take,
 } from 'redux-saga/effects';
 import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import * as Api from '../../services/api';
@@ -103,14 +103,19 @@ export function* getAllAssets(assetType, queryParams) {
 }
 
 export function* getCmsSetting({
-  cmsType, projectId, cmsMode, langId, isEdmSupport, isBEEAppEnable,
+  cmsType, projectId, cmsMode, langId, isEdmSupport, isBEEAppEnable: isBEEAppEnableFromAction,
 }) {
   try {
+    const emailState = yield select((state) => state.get('email'));
+    if (!emailState.get('cmsAccountsLoaded') && emailState.get('fetchingCmsAccounts')) {
+      yield take([types.GET_CMS_ACCOUNTS_SUCCESS, types.GET_CMS_ACCOUNTS_FAILURE]);
+    }
+    const updatedState = yield select((state) => state.get('email'));
+    const isBEEAppEnable = updatedState.get('isBeeEnabled') ?? isBEEAppEnableFromAction;
     const result = yield call(Api.getCmsTemplateSettingsV2, cmsType, projectId, cmsMode, langId, isEdmSupport, isBEEAppEnable);
     const cmsAccountDetail = result.data?.response.cmsDetails || {};
     const isBeeEnabled = cmsAccountDetail?.type === cmsType;
-    yield put({ type: types.GET_CMS_ACCOUNTS_SUCCESS, isBeeEnabled });
-    yield put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: result.data.response.cmsDetails });
+    yield put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: cmsAccountDetail, isBeeEnabled });
   } catch (error) {
     yield put({ type: types.GET_CMS_EDITOR_DETAILS_FAILURE, error });
   }

package/v2Containers/Email/tests/__snapshots__/reducer.test.js.snap

@@ -5,6 +5,8 @@ Immutable.Map {
   "createTemplateInProgress": false,
   "createResponse": Immutable.Map {},
   "isBeeEnabled": null,
+  "fetchingCmsAccounts": false,
+  "cmsAccountsLoaded": false,
 }
 `;
 
@@ -13,5 +15,7 @@ Immutable.Map {
   "createTemplateInProgress": true,
   "createResponse": Immutable.Map {},
   "isBeeEnabled": null,
+  "fetchingCmsAccounts": false,
+  "cmsAccountsLoaded": false,
 }
 `;

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

@@ -16,6 +16,53 @@ describe('emailReducer', () => {
     expect(emailReducer(undefined, action)).toMatchSnapshot();
   });
 
+  it.concurrent('it handles GET_CMS_EDITOR_DETAILS_SUCCESS action — sets isBeeEnabled true and CmsSettings', () => {
+    const initialState = fromJS({ isBeeEnabled: null, fetchingCmsSettings: true });
+    const action = {
+      type: types.GET_CMS_EDITOR_DETAILS_SUCCESS,
+      isBeeEnabled: true,
+      settings: { isDragDrop: true, editorType: 'bee' },
+    };
+    const result = emailReducer(initialState, action);
+    expect(result.get('fetchingCmsSettings')).toBe(false);
+    expect(result.get('isBeeEnabled')).toBe(true);
+    expect(result.getIn(['CmsSettings', 'isDragDrop'])).toBe(true);
+  });
+
+  it.concurrent('it handles GET_CMS_EDITOR_DETAILS_SUCCESS action — sets isBeeEnabled false', () => {
+    const initialState = fromJS({ isBeeEnabled: true, fetchingCmsSettings: true });
+    const action = {
+      type: types.GET_CMS_EDITOR_DETAILS_SUCCESS,
+      isBeeEnabled: false,
+      settings: {},
+    };
+    const result = emailReducer(initialState, action);
+    expect(result.get('fetchingCmsSettings')).toBe(false);
+    expect(result.get('isBeeEnabled')).toBe(false);
+  });
+
+  it.concurrent('it handles GET_CMS_EDITOR_DETAILS_SUCCESS action — overwrites stale isBeeEnabled from CLEAR_ALL_VALUES (null)', () => {
+    const initialState = fromJS({ isBeeEnabled: null, fetchingCmsSettings: true });
+    const action = {
+      type: types.GET_CMS_EDITOR_DETAILS_SUCCESS,
+      isBeeEnabled: true,
+      settings: { type: 'bee' },
+    };
+    const result = emailReducer(initialState, action);
+    expect(result.get('isBeeEnabled')).toBe(true);
+  });
+
+  it.concurrent('it handles GET_CMS_EDITOR_DETAILS_SUCCESS action — sets CmsSettings to empty object when settings is {}', () => {
+    const initialState = fromJS({ CmsSettings: { old: 'data' } });
+    const action = {
+      type: types.GET_CMS_EDITOR_DETAILS_SUCCESS,
+      isBeeEnabled: false,
+      settings: {},
+    };
+    const result = emailReducer(initialState, action);
+    expect(result.get('CmsSettings').toJS()).toEqual({});
+  });
+
   it.concurrent('it handles GET_CMS_ACCOUNTS_REQUEST action (line 111-113)', () => {
     const initialState = fromJS({
       isBeeEnabled: true, // Start with true to verify it gets set to false

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

@@ -3,6 +3,7 @@ import { expectSaga } from 'redux-saga-test-plan';
 import { takeLatest } from 'redux-saga/effects';
 import * as matchers from 'redux-saga-test-plan/matchers';
 import { throwError } from 'redux-saga-test-plan/providers';
+import { fromJS } from 'immutable';
 import * as types from '../constants';
 import * as sagas from '../sagas';
 import { v2EmailDuplicateTemplateSaga, v2EmailSagas } from '../sagas';
@@ -709,10 +710,14 @@ describe('getCmsSetting saga', () => {
 
     return expectSaga(sagas.getCmsSetting, basePayload)
       .provide([
+        {
+          select(effect, next) {
+            return fromJS({ cmsAccountsLoaded: true, isBeeEnabled: true });
+          },
+        },
         [matchers.call.fn(Api.getCmsTemplateSettingsV2), fakeResponse],
       ])
-      .put({ type: types.GET_CMS_ACCOUNTS_SUCCESS, isBeeEnabled: true })
-      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: fakeResponse.data.response.cmsDetails })
+      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: fakeResponse.data.response.cmsDetails, isBeeEnabled: true })
       .run();
   });
 
@@ -727,10 +732,14 @@ describe('getCmsSetting saga', () => {
 
     return expectSaga(sagas.getCmsSetting, basePayload)
       .provide([
+        {
+          select(effect, next) {
+            return fromJS({ cmsAccountsLoaded: true, isBeeEnabled: false });
+          },
+        },
         [matchers.call.fn(Api.getCmsTemplateSettingsV2), fakeResponse],
       ])
-      .put({ type: types.GET_CMS_ACCOUNTS_SUCCESS, isBeeEnabled: false })
-      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: fakeResponse.data.response.cmsDetails })
+      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: fakeResponse.data.response.cmsDetails, isBeeEnabled: false })
       .run();
   });
 
@@ -743,10 +752,14 @@ describe('getCmsSetting saga', () => {
 
     return expectSaga(sagas.getCmsSetting, basePayload)
       .provide([
+        {
+          select(effect, next) {
+            return fromJS({ cmsAccountsLoaded: true, isBeeEnabled: false });
+          },
+        },
         [matchers.call.fn(Api.getCmsTemplateSettingsV2), fakeResponse],
       ])
-      .put({ type: types.GET_CMS_ACCOUNTS_SUCCESS, isBeeEnabled: false })
-      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: undefined })
+      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: {}, isBeeEnabled: false })
       .run();
   });
 
@@ -755,11 +768,138 @@ describe('getCmsSetting saga', () => {
 
     return expectSaga(sagas.getCmsSetting, basePayload)
       .provide([
+        {
+          select(effect, next) {
+            return fromJS({ cmsAccountsLoaded: true, isBeeEnabled: true });
+          },
+        },
         [matchers.call.fn(Api.getCmsTemplateSettingsV2), throwError(fakeError)],
       ])
       .put({ type: types.GET_CMS_EDITOR_DETAILS_FAILURE, error: fakeError })
       .run();
   });
+
+  it('should wait for accounts when fetchingCmsAccounts is true and cmsAccountsLoaded is false (accounts succeed)', () => {
+    const fakeResponse = {
+      data: { response: { cmsDetails: { type: 'bee', settings: {} } } },
+    };
+    let selectCallCount = 0;
+
+    return expectSaga(sagas.getCmsSetting, basePayload)
+      .provide([
+        {
+          select(effect, next) {
+            selectCallCount += 1;
+            if (selectCallCount === 1) {
+              return fromJS({ cmsAccountsLoaded: false, fetchingCmsAccounts: true, isBeeEnabled: null });
+            }
+            return fromJS({ cmsAccountsLoaded: true, fetchingCmsAccounts: false, isBeeEnabled: true });
+          },
+        },
+        [matchers.call.fn(Api.getCmsTemplateSettingsV2), fakeResponse],
+      ])
+      .dispatch({ type: types.GET_CMS_ACCOUNTS_SUCCESS, isBeeEnabled: true })
+      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: { type: 'bee', settings: {} }, isBeeEnabled: true })
+      .run();
+  });
+
+  it('should wait for accounts when fetchingCmsAccounts is true and cmsAccountsLoaded is false (accounts fail)', () => {
+    const fakeResponse = {
+      data: { response: { cmsDetails: { type: 'ck', settings: {} } } },
+    };
+    let selectCallCount = 0;
+
+    return expectSaga(sagas.getCmsSetting, basePayload)
+      .provide([
+        {
+          select(effect, next) {
+            selectCallCount += 1;
+            if (selectCallCount === 1) {
+              return fromJS({ cmsAccountsLoaded: false, fetchingCmsAccounts: true, isBeeEnabled: null });
+            }
+            return fromJS({ cmsAccountsLoaded: true, fetchingCmsAccounts: false, isBeeEnabled: false });
+          },
+        },
+        [matchers.call.fn(Api.getCmsTemplateSettingsV2), fakeResponse],
+      ])
+      .dispatch({ type: types.GET_CMS_ACCOUNTS_FAILURE })
+      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: { type: 'ck', settings: {} }, isBeeEnabled: false })
+      .run();
+  });
+
+  it('should skip wait and use isBEEAppEnableFromAction as fallback when cmsAccountsLoaded is false but fetchingCmsAccounts is false', () => {
+    const fakeResponse = {
+      data: { response: { cmsDetails: { type: 'bee', settings: {} } } },
+    };
+
+    return expectSaga(sagas.getCmsSetting, { ...basePayload, isBEEAppEnable: true })
+      .provide([
+        {
+          select(effect, next) {
+            return fromJS({ cmsAccountsLoaded: false, fetchingCmsAccounts: false, isBeeEnabled: null });
+          },
+        },
+        [matchers.call.fn(Api.getCmsTemplateSettingsV2), fakeResponse],
+      ])
+      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: { type: 'bee', settings: {} }, isBeeEnabled: true })
+      .run();
+  });
+
+  it('should use state isBeeEnabled (null) and fall back to isBEEAppEnableFromAction via ?? operator', () => {
+    const fakeResponse = {
+      data: { response: { cmsDetails: { type: 'bee', settings: {} } } },
+    };
+
+    return expectSaga(sagas.getCmsSetting, { ...basePayload, isBEEAppEnable: true })
+      .provide([
+        {
+          select(effect, next) {
+            return fromJS({ cmsAccountsLoaded: true, fetchingCmsAccounts: false, isBeeEnabled: null });
+          },
+        },
+        [matchers.call.fn(Api.getCmsTemplateSettingsV2), fakeResponse],
+      ])
+      .call(Api.getCmsTemplateSettingsV2, basePayload.cmsType, basePayload.projectId, basePayload.cmsMode, basePayload.langId, basePayload.isEdmSupport, true)
+      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: { type: 'bee', settings: {} }, isBeeEnabled: true })
+      .run();
+  });
+
+  it('should use state isBeeEnabled false over isBEEAppEnableFromAction true via ?? operator (false is not null/undefined)', () => {
+    const fakeResponse = {
+      data: { response: { cmsDetails: { type: 'bee', settings: {} } } },
+    };
+
+    return expectSaga(sagas.getCmsSetting, { ...basePayload, isBEEAppEnable: true })
+      .provide([
+        {
+          select(effect, next) {
+            return fromJS({ cmsAccountsLoaded: true, fetchingCmsAccounts: false, isBeeEnabled: false });
+          },
+        },
+        [matchers.call.fn(Api.getCmsTemplateSettingsV2), fakeResponse],
+      ])
+      .call(Api.getCmsTemplateSettingsV2, basePayload.cmsType, basePayload.projectId, basePayload.cmsMode, basePayload.langId, basePayload.isEdmSupport, false)
+      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: { type: 'bee', settings: {} }, isBeeEnabled: true })
+      .run();
+  });
+
+  it('should derive isBeeEnabled false when cmsDetails type is undefined', () => {
+    const fakeResponse = {
+      data: { response: { cmsDetails: { settings: {} } } },
+    };
+
+    return expectSaga(sagas.getCmsSetting, basePayload)
+      .provide([
+        {
+          select(effect, next) {
+            return fromJS({ cmsAccountsLoaded: true, fetchingCmsAccounts: false, isBeeEnabled: true });
+          },
+        },
+        [matchers.call.fn(Api.getCmsTemplateSettingsV2), fakeResponse],
+      ])
+      .put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: { settings: {} }, isBeeEnabled: false })
+      .run();
+  });
 });
 
 

package/v2Containers/Templates/_templates.scss

@@ -6,6 +6,7 @@
       padding: unset;
     }
   }
+//removing current one as not required now in each row we'll have 3 cards for which css has been added
 
 // 3 cards per row across all breakpoints
 .creatives-templates-list {
@@ -24,6 +25,21 @@
 }
 
 .creatives-templates-list {
+  position: relative;
+
+  .archive-listing-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    gap: $CAP_SPACE_08;
+    background: $CAP_WHITE;
+    padding: $CAP_SPACE_08 $CAP_SPACE_16;
+    border-radius: $CAP_SPACE_08;
+    z-index: 10;
+  }
 
   .delete-template-confirm {
     .ant-modal-footer {
@@ -664,6 +680,11 @@
 
 // Archive/Unarchive confirm modal overrides — scoped to avoid affecting other modals
 .archive-confirm-modal {
+  .ant-modal-body {
+    padding: $CAP_SPACE_32 $CAP_SPACE_32 $CAP_SPACE_24;
+    margin-top: 8.571rem;
+  }
+
   // Remove the left margin added when an icon is present
   .ant-modal-confirm-body {
     > .anticon + .ant-modal-confirm-title + .ant-modal-confirm-content {
@@ -1127,7 +1148,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 100%;
+  width: 102%;
 }
 
 .filter-row-content {
@@ -1139,6 +1160,7 @@
   align-items: center;
   gap: $CAP_SPACE_12;
   flex-shrink: 0;
+  margin-right: $CAP_SPACE_32;
 }
 
 .archived-mode-header {
@@ -1197,14 +1219,41 @@
 }
 
 .template-listing-more-btn {
-  padding: 0 $CAP_SPACE_08;
+  padding: 0;
+  margin-right: $CAP_SPACE_12;
   min-width: auto;
 }
 
 .notification-template-label {
-  color: #5E6C84;
+  color: $CAP_G04;
 }
 
 .notification-template-name {
-  color: #091E42;
+  color: $CAP_G01;
+}
+
+.template-card-title {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+
+  .cap-checkbox-v2 {
+    flex-shrink: 0;
+    margin-right: $CAP_SPACE_04;
+    // Remove the empty label span's padding that antd Checkbox renders when no children are passed
+    .ant-checkbox + span {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+
+  .template-card-name {
+    font-weight: 500;
+    font-size: $FONT_SIZE_L;
+    color: $CAP_G01;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
 }

package/v2Containers/Templates/actions.js

@@ -168,20 +168,28 @@ export function getCdnTransformationConfig() {
   };
 }
 
-export function archiveTemplate(channel, id, templateName) {
-  return { type: types.ARCHIVE_TEMPLATE_REQUEST, channel, id, templateName };
+export function archiveTemplate(channel, id, successMessage, description) {
+  return {
+    type: types.ARCHIVE_TEMPLATE_REQUEST, channel, id, successMessage, description 
+  };
 }
 
-export function unarchiveTemplate(channel, id, templateName) {
-  return { type: types.UNARCHIVE_TEMPLATE_REQUEST, channel, id, templateName };
+export function unarchiveTemplate(channel, id, successMessage, description) {
+  return {
+    type: types.UNARCHIVE_TEMPLATE_REQUEST, channel, id, successMessage, description 
+  };
 }
 
-export function bulkArchiveTemplates(channel, ids) {
-  return { type: types.BULK_ARCHIVE_REQUEST, channel, ids };
+export function bulkArchiveTemplates(channel, ids, successMessage) {
+  return {
+    type: types.BULK_ARCHIVE_REQUEST, channel, ids, successMessage 
+  };
 }
 
-export function bulkUnarchiveTemplates(channel, ids) {
-  return { type: types.BULK_UNARCHIVE_REQUEST, channel, ids };
+export function bulkUnarchiveTemplates(channel, ids, successMessage) {
+  return {
+    type: types.BULK_UNARCHIVE_REQUEST, channel, ids, successMessage 
+  };
 }
 
 export function setArchiveFilter(filter) {