@capillarytech/creatives-library 7.17.7 → 7.17.9

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.7",
+  "version": "7.17.9",
   "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,9 @@ 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';
+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;
@@ -32,10 +35,26 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       visible: false,
       dynamicDateValue: '',
       showModal: false,
+      translationLang: '',
     };
     this.renderTags = this.renderTags.bind(this);
     this.getSearchedExpandedKeys = this.getSearchedExpandedKeys.bind(this);
   }
+  getTranslationMappedLocale(locale) {
+    return GET_TRANSLATION_MAPPED?.[locale];
+  }
+  componentDidMount() {
+    const user = localStorage.getItem('user');
+    let locale = 'en';
+    moment.locale(locale);
+    if (user) {
+      locale = JSON.parse(user).lang || locale;
+    }
+    locale = this.getTranslationMappedLocale(locale);
+    this.setState({
+      translationLang: locale,
+    });
+  }
 
   onChange = (e) => {
     const value = e.target.value;
@@ -178,12 +197,14 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     });
     return list;
   }
-
+  openTranslationLink = () => {
+    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 } = this.state;
+    const { tagValue, expandedKeys, autoExpandParent, searchValue, visible, translationLang } = this.state;
     const options = [
       {
         value: "All",
@@ -225,6 +246,27 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       >
           {this.renderTags(tg, searchValue)}
         </CapTree>
+        {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>
+            }
+
       </CapSpin>
     </div>);
     return (

package/v2Containers/Email/initialSchema.js

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

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 ;
 }
@@ -6,3 +7,20 @@
   max-height: 300px;
   overflow-y: auto;
 }
+
+.tag-list-footer {
+  display: flex;
+  align-items: center;
+}
+.tag-list-footer-icon {
+  display: flex;
+  align-items: center;
+  padding: 0rem 0.625rem;
+}
+.tag-list-footer-icon > div {
+  color: $FONT_COLOR_05;
+  padding: 0rem 0.313rem;
+}
+#translationtagfooter {
+  padding: 0rem;
+}