@capillarytech/creatives-library 3.8.7 → 3.8.8

package/v2Containers/Templates/index.js

@@ -50,7 +50,7 @@ import Pagination from '../../v2Components/Pagination';
 import EmailPreview from '../../v2Components/EmailPreview';
 import CreativesContainer from '../CreativesContainer';
 import WechatRichmediaTemplatePreview from '../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
-import { CHANNEL_CREATE_TRACK_MAPPING, CHANNEL_EDIT_TRACK_MAPPING } from '../App/constants'
+import { CHANNEL_CREATE_TRACK_MAPPING, CHANNEL_EDIT_TRACK_MAPPING } from '../App/constants';
 import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE } from '../CreativesContainer/constants';
 import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
@@ -77,6 +77,11 @@ const WECHAT_FILTERS = {
   MAPTEMPLATES: 'maptemplate',
 };
 
+const LINE_FILTERS = {
+  ALL: 'all',
+  TEXT: 'text',
+  IMAGE_VIDEO: 'image',
+};
 
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -104,6 +109,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       routeParams: null,
       activeMode: TEMPLATES_MODE,
       wechatFilter: WECHAT_FILTERS.ALL,
+      lineFilter: LINE_FILTERS.ALL,
     };
 
     this.handleOnHoverItem = this.handleOnHoverItem.bind(this);
@@ -166,7 +172,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   componentDidMount() {
-    
     if (this.props.location.query.type === 'embedded' && this.isEnabledInLibraryModule("setLocale")) {
       this.setLocale();
     }
@@ -454,6 +459,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           };
         } else {
           creativesParams._id = pathname.split('/')[3];
+          creativesParams.modeType = pathname.split('/')[4];
         }
         creativesParams.type = this.state.channel.toUpperCase();
       }
@@ -546,6 +552,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         return templates;
     }
   }
+
   getTemplateDataForGrid = ({templates, handlers, filterContent, channel, isLoading, loadingTip}) => {
     const currentChannel = channel.toUpperCase();
     const {channel: stateChannel} = this.state;
@@ -554,6 +561,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (currentChannel === WECHAT) {
       filteredTemplates = this.filterWechatTemplates(templates);
     }
+    if (currentChannel === LINE) {
+      filteredTemplates = this.filterLineTemplates(templates);
+    }
     const cardDataList = filteredTemplates && filteredTemplates.length ? map(filteredTemplates, (template) => {
       const templateData =
         {
@@ -607,6 +617,19 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         case WECHAT:
           templateData.content = this.prepareWeChatPreviewData(template);
           break;
+        case LINE: {
+          const {
+            content: {
+              messages: [{
+                text = '',
+                originalContentUrl = '',
+              }] = [{}],
+            } = {},
+          } = template.versions.base;
+          templateData.content = text;
+          templateData.url = originalContentUrl;
+          break;
+        }
         default:
           templateData.content = "";
       }
@@ -656,6 +679,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
     </div>);
   }
+  filterLineTemplates = (templates) => {
+    const { lineFilter } = this.state;
+    if (LINE_FILTERS.ALL === lineFilter) {
+      return templates;
+    }
+    return templates.filter((template) => template.definition && template.definition.mode === lineFilter);
+  }
   skipTemplateSelection = (e) => {
     const type = this.props.location.query.type;
     const module = (type === 'embedded') ? this.props.location.query.module : 'default';
@@ -1164,7 +1194,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       pathName = `/ebill/edit/${id}`;
     }
     if (this.state.channel.toLowerCase() === 'line') {
-      pathName = `/line/edit/${modeType}/${id}`;
+      const { messages } = template.versions.base.content;
+      const type = messages && messages[0] && messages[0].type;
+      pathName = `/line/edit/${id}/${type}`;
     }
     if (this.state.channel.toUpperCase() === WECHAT) {
       if (get(template, 'definition.msgcontent', '') === "RICH_MEDIA_WECHAT") {
@@ -1631,10 +1663,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   setWechatFilter = (e) => this.setState({wechatFilter: e.target.value});
+  setLineFilter = (e) => this.setState({lineFilter: e.target.value});
 
   render() {
     const isFullMode = this.isFullMode();
-    const { activeMode, channel, wechatFilter } = this.state;
+    const { activeMode, channel, wechatFilter, lineFilter } = this.state;
     if (activeMode === ACCOUNT_SELECTION_MODE) {
       return this.renderAccountSelection();
     }
@@ -1688,7 +1721,28 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           </CapLabel></CapRadio.Button>
         </CapRadio.CapRadioGroup>
       }
-      
+      {
+        channel.toUpperCase() === LINE && <CapRadio.CapRadioGroup className="line-filters" defaultValue={lineFilter} onChange={this.setLineFilter}>
+          {
+            (() => {
+              const { ALL, TEXT, IMAGE_VIDEO } = LINE_FILTERS;
+              return (
+                <>
+                  <CapRadio.Button value={ALL}><CapLabel type="label2">
+                    <FormattedMessage {...messages.all} />
+                  </CapLabel></CapRadio.Button>
+                  <CapRadio.Button value={TEXT}><CapLabel type="label2">
+                    <FormattedMessage {...messages.textTemplate} />
+                  </CapLabel></CapRadio.Button>
+                  <CapRadio.Button value={IMAGE_VIDEO}><CapLabel type="label2">
+                    <FormattedMessage {...messages.imageTemplate} />
+                  </CapLabel></CapRadio.Button>
+                </>
+              );
+            })()
+          }
+        </CapRadio.CapRadioGroup>
+      }
       <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
         {isfilterContentVisisble && !isWechatEmbedded && <CapButton
           className={`create-new-${channelLowerCase}`}

package/v2Containers/TemplatesV2/index.js

@@ -43,11 +43,12 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     } = props;
 
     const defaultPanes = {
-      sms: {content: <div></div>, tab: intl.formatMessage(messages.sms), key: 'sms'},
-      email: {content: <div></div>, tab: intl.formatMessage(messages.email), key: 'email'},
-      weChat: {content: <div></div>, tab: intl.formatMessage(messages.wechat), key: 'wechat'},
+      sms: {content: <></>, tab: intl.formatMessage(messages.sms), key: 'sms'},
+      email: {content: <></>, tab: intl.formatMessage(messages.email), key: 'email'},
+      weChat: {content: <></>, tab: intl.formatMessage(messages.wechat), key: 'wechat'},
       //'wechat': {content: this.getTemplatesComponent('wechat'), tab: 'Wechat', key: 'wechat'},
-      mPush: {content: <div></div>, tab: intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
+      mPush: {content: <></>, tab: intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
+      line: {content: <></>, tab: intl.formatMessage(messages.line), key: 'line'},
     };
     let filteredPanes = Object.keys(defaultPanes)
       .filter((key) => !channelsToHide.includes(key)).reduce((obj = [], key) => {

package/v2Containers/TemplatesV2/messages.js

@@ -54,4 +54,8 @@ export default defineMessages({
     id: 'creatives.containersV2.TemplatesV2.wechat',
     defaultMessage: 'Wechat',
   },
+  line: {
+    id: 'creatives.containersV2.TemplatesV2.line',
+    defaultMessage: 'Line',
+  },
 });