@capillarytech/creatives-library 7.17.8 → 7.17.10

package/.npmrc copy

@@ -0,0 +1,2 @@
+npm config set scope capillarytech	
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}

package/components/Ckeditor/index.js

@@ -13,14 +13,14 @@ import React from 'react';
 import _ from 'lodash';
 // import messages from './messages';
 const loadScript = require('load-script');
-const defaultScriptUrl = "https://storage.crm.n.content-cdn.io/ckeditor_test/ckeditor4/ckeditor.js";
+const defaultScriptUrl = "https://storage.crm.n.content-cdn.io/ckeditor_full/ckeditor/ckeditor.js";
 const user = localStorage.getItem('user');
 let locale = 'en';
 if (user && JSON.parse(user).lang) {
   locale = JSON.parse(user).lang;
 }
 const CKEditorConfig = {
-  skin: 'moono',
+  skin: 'moono-lisa',
   toolbar: [
     { name: 'document', items: ['Source', '-'] },
     { name: 'clipboard', items: ['Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },

package/containers/TagList/constants.js

@@ -5,3 +5,15 @@
  */
 
 export const DEFAULT_ACTION = 'app/TagList/DEFAULT_ACTION';
+
+export const JAPANESE_HELP_TEXT = 'ヘルプ :トークンの定義';
+
+export const TAG_TRANSLATION_DOC = 'https://docs.capillarytech.com/docs/tags-translation';
+
+export const GET_TRANSLATION_MAPPED = {
+  'en': 'en-US',
+  'zh-cn': 'zh',
+  'zh': 'zh',
+  'en-US': 'en-US',
+  'ja-JP': 'ja-JP',
+};

package/package.json

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

package/v2Components/CapTagList/index.js

@@ -18,6 +18,8 @@ import { makeSelectLoyaltyPromotionDisplay } from '../../v2Containers/Cap/select
 import { CARD_RELATED_TAGS } from '../../containers/App/constants';
 import { hasCardBasedScope } from '../../utils/common';
 import moment from 'moment';
+import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
+import { GET_TRANSLATION_MAPPED, JAPANESE_HELP_TEXT, TAG_TRANSLATION_DOC } from '../../containers/TagList/constants';
 
 const {Search} = CapInput;
 const {CapTreeNode} = CapTree;
@@ -33,31 +35,24 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       visible: false,
       dynamicDateValue: '',
       showModal: false,
-      japaneseLang: '',
+      translationLang: '',
     };
     this.renderTags = this.renderTags.bind(this);
     this.getSearchedExpandedKeys = this.getSearchedExpandedKeys.bind(this);
   }
-  getMappedLocale = (locale) => {
-    const map = {
-      'en': 'en-US',
-      'zh-cn': 'zh',
-      'zh': 'zh',
-      'en-US': 'en-US',
-      'ja-JP': 'ja-JP',
-    };
-    return map[locale];
-  };
+  getTranslationMappedLocale(locale) {
+    return GET_TRANSLATION_MAPPED?.[locale];
+  }
   componentDidMount() {
     const user = localStorage.getItem('user');
-    let locale = localStorage.getItem('jlocale') || 'en';
+    let locale = 'en';
     moment.locale(locale);
     if (user) {
       locale = JSON.parse(user).lang || locale;
     }
-    locale = this.getMappedLocale(locale);
+    locale = this.getTranslationMappedLocale(locale);
     this.setState({
-      japaneseLang: locale,
+      translationLang: locale,
     });
   }
 
@@ -203,13 +198,13 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     return list;
   }
   openTranslationLink = () => {
-    window.open(`https://docs.capillarytech.com/docs/tags-translation`, "_blank");
+    window.open(TAG_TRANSLATION_DOC, '_blank');
   }
   render() {
     const { hidePopover = false, tags = {}, intl = {}, moduleFilterEnabled, label, modalProps } = this.props;
     const tg = tags;
     const {formatMessage} = intl;
-    const { tagValue, expandedKeys, autoExpandParent, searchValue, visible, japaneseLang } = this.state;
+    const { tagValue, expandedKeys, autoExpandParent, searchValue, visible, translationLang } = this.state;
     const options = [
       {
         value: "All",
@@ -248,34 +243,27 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           expandedKeys={expandedKeys}
           autoExpandParent={autoExpandParent}
           onExpand={this.onExpand}
-        >
+      >
           {this.renderTags(tg, searchValue)}
         </CapTree>
-        { 
-        japaneseLang === "ja-JP" &&
-            <div className = 'tag-list-footer'>
-                <CapIcon
-                  type="help"
-                  size="s"
-                />
-               
-              <CapLink>
-              <CapButton type="flat" style={{padding: '0px'}} onClick={this.openTranslationLink} >
-                  <div className = 'tag-list-footer-icon'>
-                    <div>ヘルプ :トークンの定義</div>
-                    <CapIcon
-                      type="open-in-new-light"
-                      size="s"
-                      style={{ marginRight: 4 }}
-
-                      svgProps={{
-                        fill: '#2466ea',
-                      }}
-                    />
-                  </div>
-                </CapButton>
-              </CapLink>
-           
+        {translationLang === "ja-JP" &&
+          <div className="tag-list-footer">
+            <CapIcon
+              type="help"
+              size="s"
+            />  
+            <CapLink>
+              <CapButton id="translationtagfooter" type="flat" onClick={this.openTranslationLink} >
+                <div className="tag-list-footer-icon">
+                  <div>{JAPANESE_HELP_TEXT}</div>
+                  <CapIcon
+                    type="open-in-new-light"
+                    size="s"
+                    svgProps={{ color: FONT_COLOR_05 }}
+                  />
+                </div>
+              </CapButton>
+            </CapLink>
             </div>
             }
 
@@ -287,18 +275,18 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           visible={this.props.visibleTaglist}
           footer={[]}
           {...modalProps}
-        >
+          >
           {contentSection}
         </CapModal> :
-          <CapPopover
-            visible={visible}
-            onVisibleChange={this.togglePopoverVisibility}
-            content={contentSection}
-            trigger="click"
-            placement="rightTop"
+        <CapPopover
+          visible={visible}
+          onVisibleChange={this.togglePopoverVisibility}
+          content={contentSection}
+          trigger="click"
+          placement="rightTop"
           >
-            <CapButton isAddBtn type="flat">{label || ''}</CapButton>
-          </CapPopover>
+          <CapButton isAddBtn type="flat">{label || ''}</CapButton>
+        </CapPopover>
         }
         <CapModal
           visible={this.state.showModal}

package/v2Components/Ckeditor/index.js

@@ -13,14 +13,14 @@ import React from 'react';
 import _ from 'lodash';
 // import messages from './messages';
 const loadScript = require('load-script');
-const defaultScriptUrl = "https://storage.crm.n.content-cdn.io/ckeditor_test/ckeditor4/ckeditor.js";
+const defaultScriptUrl = "https://storage.crm.n.content-cdn.io/ckeditor_full/ckeditor/ckeditor.js";
 const user = localStorage.getItem('user');
 let locale = 'en';
 if (user && JSON.parse(user).lang) {
   locale = JSON.parse(user).lang;
 }
 const CKEditorConfig = {
-  skin: 'moono',
+  skin: 'moono-lisa',
   toolbar: [
     { name: 'document', items: ['Source', '-'] },
     { name: 'clipboard', items: ['Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo'] },

package/v2Components/Ckeditor/tests/index.test.js

@@ -0,0 +1,44 @@
+import React, { Component } from "react";
+import { injectIntl } from "react-intl";
+import "@testing-library/jest-dom";
+import { render, getByText, screen } from "../../../utils/test-utils";
+import Ckeditor from "../index";
+
+const initializeComponent = () => {
+  const Component = injectIntl(Ckeditor);
+
+  //const originalComponentDidMount = Ckeditor.prototype.componentDidMount;
+  Ckeditor.prototype.componentDidMount = jest.fn();
+  Ckeditor.prototype.handleContentChange = jest.fn();
+
+  //Render with default props.
+  return render(<Component />);
+};
+
+describe("Load Ckeditor", () => {
+  it("Test if Ckeditor Mounts", () => {
+    initializeComponent();
+
+    expect(Ckeditor.prototype.componentDidMount).toHaveBeenCalled();
+  });
+
+  it("Test if Ckeditor un-Mounts", () => {
+    // Spy on the componentWillUnmount method
+    const componentWillUnmountSpy = jest.spyOn(
+      Ckeditor.prototype,
+      "componentWillUnmount"
+    );
+
+    // Render the component
+    const { unmount } = initializeComponent();
+
+    // Manually unmount the component (simulate unmounting)
+    unmount();
+
+    // Assert that componentWillUnmount has been called
+    expect(componentWillUnmountSpy).toHaveBeenCalled();
+
+    // Clean up the spy
+    componentWillUnmountSpy.mockRestore();
+  });
+});

package/v2Containers/App/constants.js

@@ -50,6 +50,11 @@ export const VIBER = 'viber';
 export const FACEBOOK = 'facebook';
 export const WHATSAPP = 'whatsapp';
 export const RCS = 'rcs';
+export const LINE = 'line';
+export const EMAIL = 'email';
+export const ASSETS = 'assets';
+
+export const HIDE_ENGAGEMENT_CHANNELS = 'HIDE_ENGAGEMENT_CHANNELS';
 
 export const TRACK_EDIT_SMS = 'editSms';
 export const TRACK_EDIT_EMAIL = 'editEmail';

package/v2Containers/TagList/_tagList.scss

@@ -1,3 +1,4 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 .ant-tree li span.ant-tree-switcher {
   margin-left: 0 !important ;
 }
@@ -13,8 +14,13 @@
 }
 .tag-list-footer-icon {
   display: flex;
+  align-items: center;
+  padding: 0rem 0.625rem;
 }
 .tag-list-footer-icon > div {
-  color: #2466ea;
-  padding: 0px 10px;
+  color: $FONT_COLOR_05;
+  padding: 0rem 0.313rem;
+}
+#translationtagfooter {
+  padding: 0rem;
 }

package/v2Containers/TemplatesV2/index.js

@@ -29,9 +29,10 @@ import FTP from '../FTP';
 import Gallery from '../Assets/Gallery';
 import withStyles from '../../hoc/withStyles';
 import styles, { CapTabStyle } from './TemplatesV2.style';
-import { CREATIVES_UI_VIEW, LOYALTY, WHATSAPP, RCS } from '../App/constants';
+import { CREATIVES_UI_VIEW, LOYALTY, WHATSAPP, RCS, LINE, EMAIL, ASSETS, HIDE_ENGAGEMENT_CHANNELS } from '../App/constants';
 import AccessForbidden from '../../v2Components/AccessForbidden';
 import { getObjFromQueryParams } from '../../utils/v2common';
+import { selectCurrentOrgDetails } from "../../v2Containers/Cap/selectors";
 
 const {CapCustomCardList} = CapCustomCard;
 
@@ -51,6 +52,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       onChannelChange,
       showDisabledFBInfo,
       enableNewChannels = [],
+      currentOrgDetails = {},
+      cap = {},
     } = props;
 
     const defaultPanes = {
@@ -112,6 +115,15 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       return pane;
     });
 
+    // This data will be available when it will be accessed in full mode
+    const { accessibleFeatures = [] } = currentOrgDetails || {};
+    // This data will be available when it will be accessed in library mode
+    const { currentOrgDetails: { accessibleFeatures: libModeAccessibleFeatures = [] } = {} } = cap || {};
+    const hideEngagementChannel = accessibleFeatures.includes(HIDE_ENGAGEMENT_CHANNELS) || libModeAccessibleFeatures.includes(HIDE_ENGAGEMENT_CHANNELS);
+    // Show only line and email channel content with both channel tabs if the HIDE_ENGAGEMENT_CHANNELS feature is enabled;
+    filteredPanes = hideEngagementChannel ? filteredPanes?.filter((pane) => [EMAIL, LINE, ASSETS].includes(pane?.key) && pane) : filteredPanes;
+    defaultChannel = hideEngagementChannel ? EMAIL : defaultChannel;
+
     const channel = ['sms', 'email', 'mobilepush', 'line', 'call_task'];
     if (!isEmpty(channelsToDisable)) {
       channel.some((ch) => {
@@ -341,15 +353,18 @@ TemplatesV2.propTypes = {
   authData: PropTypes.object,
   FTPMode: PropTypes.string,
   messageStrategy: PropTypes.string,
+  currentOrgDetails: PropTypes.object,
 };
 
 TemplatesV2.defaultProps = {
   isFullMode: true,
+  currentOrgDetails: {},
 };
 
 const mapStateToProps = createStructuredSelector({
   Templates: makeSelectTemplates(),
   TemplatesList: makeSelectTemplatesResponse(),
+  currentOrgDetails: selectCurrentOrgDetails(),
 });
 
 function mapDispatchToProps(dispatch) {

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import '@testing-library/jest-dom';
+import cloneDeep from 'lodash/cloneDeep';
+import { Provider } from 'react-redux';
+import configureStore from '../../../store';
+import {
+    render,
+    screen,
+} from '../../../utils/test-utils';
+import { TemplatesV2 } from '../index';
+import { Templates, authData, currentOrgDetails } from './mockData';
+
+const ComponentToRender = injectIntl(TemplatesV2);
+const renderComponent = (props) => {
+  const store = configureStore({}, null);
+  return render(
+    <Provider store={store}>
+      <ComponentToRender {...props} />
+    </Provider>,
+  );
+};
+
+// Mock the UserAuthWrapper module
+jest.mock('../../../utils/authWrapper', () => ({
+  UserIsAuthenticated: jest.fn((config) => config),
+}));
+
+describe("Test TemplatesV2", () => {
+  const templateActions = {
+    templateActions: jest.fn(),
+    deleteTemplate: jest.fn(),
+    getAccountsSettings: jest.fn(),
+    getAllTemplates: jest.fn(),
+    getCdnTransformationConfig: jest.fn(),
+    getDefaultBeeTemplates: jest.fn(),
+    getSenderDetails: jest.fn(),
+    getTemplateDetails: jest.fn(),
+    getUserList: jest.fn(),
+    getWeCrmAccounts: jest.fn(),
+    handleHtmlUpload: jest.fn(),
+    handleZipUpload: jest.fn(),
+    resetAccount: jest.fn(),
+    resetTemplate: jest.fn(),
+    resetTemplateData: jest.fn(),
+    resetTemplateStoreData: jest.fn(),
+    resetUploadData: jest.fn(),
+    setBEETemplate: jest.fn(),
+    setChannelAccount: jest.fn(),
+    setEdmTemplate: jest.fn(),
+    setFacebookAccount: jest.fn(),
+    setViberAccount: jest.fn(),
+    setWeChatAccount: jest.fn(),
+  };
+  const props = {
+    actions: { defaultAction: jest.fn(), getTemplates: jest.fn() },
+    Templates,
+    TemplatesList: Templates?.templates,
+    authData,
+    templateActions,
+    isFullMode: true,
+    channelsToHide: [],
+    channelsToDisable: [],
+    onChannelChange: jest.fn(),
+    enableNewChannels: [],
+    currentOrgDetails,
+    location: {
+      pathname: "v2",
+      basename: "/creatives/ui/",
+      query: {},
+    },
+  };
+  const { getByText, queryByText } = screen;
+
+  it("Should show only Email, Line channels and Gallery", () => {
+    renderComponent(props);
+    expect(getByText('Email')).toBeInTheDocument();
+    expect(getByText('Line')).toBeInTheDocument();
+    expect(getByText('Gallery')).toBeInTheDocument();
+    expect(queryByText('RCS')).toBeNull();
+  });
+
+  it("Should show all other channels", () => {
+    const updatedProps = cloneDeep(props);
+    updatedProps.currentOrgDetails.accessibleFeatures.pop();
+    renderComponent(updatedProps);
+    expect(getByText('SMS')).toBeInTheDocument();
+    expect(getByText('RCS')).toBeInTheDocument();
+    expect(getByText('Email')).toBeInTheDocument();
+    expect(getByText('Push notification')).toBeInTheDocument();
+    expect(getByText('Line')).toBeInTheDocument();
+    expect(getByText('Wechat')).toBeInTheDocument();
+    expect(getByText('Viber')).toBeInTheDocument();
+    expect(getByText('Facebook')).toBeInTheDocument();
+    expect(getByText('WhatsApp')).toBeInTheDocument();
+    expect(getByText('Gallery')).toBeInTheDocument();
+  });
+});