@capillarytech/creatives-library 7.17.7 → 7.17.8

package/package.json

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

package/v2Components/CapTagList/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 // import styled from 'styled-components';
-import { CapSpin, CapModal, CapButton, CapPopover, CapInput, CapTree, CapSelect, CapTooltip } from '@capillarytech/cap-ui-library';
+import { CapSpin, CapModal, CapButton, CapPopover, CapInput, CapTree, CapSelect, CapTooltip, CapLink, CapIcon } from '@capillarytech/cap-ui-library';
 
 import _ from 'lodash';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
@@ -17,6 +17,7 @@ import messages from './messages';
 import { makeSelectLoyaltyPromotionDisplay } from '../../v2Containers/Cap/selectors';
 import { CARD_RELATED_TAGS } from '../../containers/App/constants';
 import { hasCardBasedScope } from '../../utils/common';
+import moment from 'moment';
 
 const {Search} = CapInput;
 const {CapTreeNode} = CapTree;
@@ -32,10 +33,33 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       visible: false,
       dynamicDateValue: '',
       showModal: false,
+      japaneseLang: '',
     };
     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];
+  };
+  componentDidMount() {
+    const user = localStorage.getItem('user');
+    let locale = localStorage.getItem('jlocale') || 'en';
+    moment.locale(locale);
+    if (user) {
+      locale = JSON.parse(user).lang || locale;
+    }
+    locale = this.getMappedLocale(locale);
+    this.setState({
+      japaneseLang: locale,
+    });
+  }
 
   onChange = (e) => {
     const value = e.target.value;
@@ -178,12 +202,14 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     });
     return list;
   }
-
+  openTranslationLink = () => {
+    window.open(`https://docs.capillarytech.com/docs/tags-translation`, "_blank");
+  }
   render() {
     const { hidePopover = false, tags = {}, intl = {}, moduleFilterEnabled, label, modalProps } = this.props;
     const tg = tags;
     const {formatMessage} = intl;
-    const { tagValue, expandedKeys, autoExpandParent, searchValue, visible } = this.state;
+    const { tagValue, expandedKeys, autoExpandParent, searchValue, visible, japaneseLang } = this.state;
     const options = [
       {
         value: "All",
@@ -222,9 +248,37 @@ 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>
+           
+            </div>
+            }
+
       </CapSpin>
     </div>);
     return (
@@ -233,18 +287,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/v2Containers/App/constants.js

@@ -50,11 +50,6 @@ 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

@@ -6,3 +6,15 @@
   max-height: 300px;
   overflow-y: auto;
 }
+
+.tag-list-footer {
+  display: flex;
+  align-items: center;
+}
+.tag-list-footer-icon {
+  display: flex;
+}
+.tag-list-footer-icon > div {
+  color: #2466ea;
+  padding: 0px 10px;
+}

package/v2Containers/TemplatesV2/index.js

@@ -29,10 +29,9 @@ 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, LINE, EMAIL, ASSETS, HIDE_ENGAGEMENT_CHANNELS } from '../App/constants';
+import { CREATIVES_UI_VIEW, LOYALTY, WHATSAPP, RCS } from '../App/constants';
 import AccessForbidden from '../../v2Components/AccessForbidden';
 import { getObjFromQueryParams } from '../../utils/v2common';
-import { selectCurrentOrgDetails } from "../../v2Containers/Cap/selectors";
 
 const {CapCustomCardList} = CapCustomCard;
 
@@ -52,8 +51,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       onChannelChange,
       showDisabledFBInfo,
       enableNewChannels = [],
-      currentOrgDetails = {},
-      cap = {},
     } = props;
 
     const defaultPanes = {
@@ -115,15 +112,6 @@ 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) => {
@@ -353,18 +341,15 @@ 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

@@ -1,98 +0,0 @@
-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();
-  });
-});