@capillarytech/creatives-library 7.17.6 → 7.17.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.6",
+  "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/Email/initialSchema.js

@@ -351,7 +351,7 @@ export const response = {
                             fontFamily: "open-sans, sans-serif",
                             fontStyle: "normal",
                             fontWeight: "600",
-                            marginLeft: "5px",
+                            justifyContent: "flex-end",
                           },
                           customComponent: true,
                           width: 2,

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;
+}