@capillarytech/creatives-library 0.1.27 → 0.1.28

package/containers/Templates/index.js

@@ -20,6 +20,7 @@ import { makeSelectCreate as makeSelectCreateMobilePush } from '../MobilePush/Cr
 import { makeSelectEbill as makeSelectCreateEbill } from '../Ebill/selectors';
 import { makeSelectEmail as makeSelectCreateEmail } from '../Email/selectors';
 import { makeSelectEdit } from '../Sms/Edit/selectors';
+import { makeSelectLine } from '../Line/Create/selectors';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import messages from './messages';
 import * as charCount from '../../utils/smsCharCount';
@@ -29,6 +30,7 @@ import * as mobilepushActions from '../MobilePush/Create/actions';
 import * as smsEditActions from '../Sms/Edit/actions';
 import * as ebillActions from '../Ebill/actions';
 import * as emailActions from '../Email/actions';
+import * as lineActions from '../Line/Create/actions';
 import CardGrid from '../../components/CardGrid';
 import PreviewSideBar from '../../components/PreviewSideBar';
 import './_templates.scss';
@@ -65,6 +67,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       device: 'desktop',
       searchedTemplates: false,
       defaultAccount: true,
+      modeType: null,
     };
     this.handleOnHoverItem = this.handleOnHoverItem.bind(this);
     this.handleOnItemClick = this.handleOnItemClick.bind(this);
@@ -108,6 +111,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         case "ebill":
           channel = 'Ebill';
           break;
+        case "line":
+          channel = "Line";
+          break;
         default:
           channel = '';
       }
@@ -120,7 +126,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.props.location.query.type === 'embedded' && this.isEnabledInLibraryModule("setLocale")) {
       this.setLocale();
     }
-    if (this.state.channel.toLowerCase() === 'sms' || this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill' || ((this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === 'mobilepush') && !_.isEmpty(this.props.Templates.selectedWeChatAccount))) {
+    if (this.state.channel.toLowerCase() === 'line' || this.state.channel.toLowerCase() === 'sms' || this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill' || ((this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === 'mobilepush') && !_.isEmpty(this.props.Templates.selectedWeChatAccount))) {
       const queryParams = {
         // name: this.state.searchText,
         // sortBy: this.state.sortBy,
@@ -172,10 +178,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         nextProps.actions.getWeCrmAccounts(channel);
       } else if (nextProps.route.name.toLowerCase() === 'ebill') {
         channel = 'Ebill';
+      } else if (nextProps.route.name.toLowerCase() === 'line') {
+        channel = 'Line';
       }
       // console.log('Next Props details ', nextProps.route.name, channel);
       this.setState({ channel }, () => {
-        if (this.state.channel.toLowerCase() === 'sms' || this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill' || (this.state.channel.toLowerCase() === 'wechat' && !_.isEmpty(nextProps.Templates.selectedWeChatAccount))) {
+        if (this.state.channel.toLowerCase() === 'line' || this.state.channel.toLowerCase() === 'sms' || this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill' || (this.state.channel.toLowerCase() === 'wechat' && !_.isEmpty(nextProps.Templates.selectedWeChatAccount))) {
           if (this.state.channel.toLowerCase() === 'wechat' && !_.isEmpty(nextProps.Templates.selectedWeChatAccount)) {
             params.wecrmId = nextProps.Templates.selectedWeChatAccount.configs.wecrm_app_id;
             params.wecrmToken = nextProps.Templates.selectedWeChatAccount.configs.wecrm_token;
@@ -254,6 +262,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.props.emailActions.clearStoreValues();
     }
 
+    if (this.state.channel.toLowerCase() === "line" && nextProps.Line && nextProps.Line.response && nextProps.Line.response.templateId && nextProps.Line.response.templateId !== '') {
+      const message = getMessageObject('success', `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`, true);
+      this.props.globalActions.addMessageToQueue(message);
+      this.getAllTemplates({params, resetPage: true});
+      this.props.lineActions.clearCreateResponse();
+    }
+
     if (nextProps.Create && this.props.Create && nextProps.Create.createTemplateError && !_.isEqual(nextProps.Create.createTemplateError, this.props.Create.createTemplateError)) {
       const message = getMessageObject('error', this.props.intl.formatMessage(messages.somethingWentWrong), true);
       this.props.globalActions.addMessageToQueue(message);
@@ -263,6 +278,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         this.props.mobilepushActions.clearCreateResponse();
       } else if (this.state.channel.toLowerCase() === "ebill") {
         this.props.ebillActions.clearCreateResponse();
+      } else if (this.state.channel.toLowerCase() === "line") {
+        this.props.lineActions.clearCreateResponse();
       }
     }
 
@@ -306,7 +323,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.setState({previewTemplate: nextProps.Templates.templateDetails});
     }
 
-    if (nextProps.Templates.weCrmAccounts !== undefined && nextProps.Templates.weCrmAccounts.length === 1 && this.state.defaultAccount ) {
+    if (nextProps.Templates.weCrmAccounts !== undefined && nextProps.Templates.weCrmAccounts.length === 1 && this.state.defaultAccount && (['wechat', 'mobilepush'].indexOf(this.state.channel.toLowerCase()) > -1)) {
       const paramsDefault = {
         name: this.state.searchText,
         sortBy: this.state.sortBy,
@@ -315,12 +332,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         paramsDefault.wecrmId = nextProps.Templates.weCrmAccounts[0].configs.wecrm_app_id;
         paramsDefault.wecrmToken = nextProps.Templates.weCrmAccounts[0].configs.wecrm_token;
         nextProps.actions.setWeChatAccount(nextProps.Templates.weCrmAccounts[0]);
-        this.setState({defaultAccount: false});
       } else if (this.state.channel.toLowerCase() === 'mobilepush') {
         nextProps.actions.setWeChatAccount(nextProps.Templates.weCrmAccounts[0]);
         paramsDefault.accountId = nextProps.Templates.weCrmAccounts[0].id;
-        this.setState({defaultAccount: false});
       }
+      this.setState({defaultAccount: false});
       this.getAllTemplates({params: paramsDefault}, true);
     }
   }
@@ -361,7 +377,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     //locale = 'zh';
     console.log('Setting final locale as', locale);
     moment.locale(locale);
-  }
+  };
 
   getMappedLocale = (locale) => {
     const map = {
@@ -369,7 +385,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       'zh-cn': 'zh',
     };
     return map[locale];
-  }
+  };
 
   getAllTemplates = ({params, getNextPage, resetPage}, resetTemplates) => {
     let queryParams = params;
@@ -428,6 +444,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   skipTemplateSelection = (e) => {
+    console.log("vvv", e);
     const type = this.props.location.query.type;
     const module = (type === 'embedded') ? this.props.location.query.module : 'default';
     if (this.state.channel.toLowerCase() === 'email') {
@@ -451,6 +468,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         pathname: `/wechat/edit/${e.template_id}`,
         query: type === 'embedded' ? {type: 'embedded', module, source_account_id: e.source_account_id} : {},
       });
+    } else if (this.state.channel.toLowerCase() === 'line') {
+      this.props.router.push({
+        pathname: `/line/view/${e.msg_type}/`,
+        query: type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id } : {}
+      });
     }
     this.setState({loading: true});
   }
@@ -466,7 +488,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
   };
 
-  handleBlankTemplateAction = (item) => {
+  handleBlankTemplateAction = (item, channel) => {
     const type = this.props.location.query.type;
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
     if (item === "uploadFile") {
@@ -475,12 +497,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.toggleEdmEmailTemplateSelection();
     } else if (item === 'textTemplate') {
       this.props.router.push({
-        pathname: `/mobilepush/create/text`,
+        pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/text`,
         query: type === 'embedded' ? {type: 'embedded', module} : {module},
       });
     } else if (item === 'imageTemplate') {
       this.props.router.push({
-        pathname: `/mobilepush/create/image`,
+        pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/image`,
         query: type === 'embedded' ? {type: 'embedded', module} : {module},
       });
     }
@@ -693,11 +715,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   createTemplate(ev) {
     const type = this.props.location.query.type;
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+    const channel = this.state.channel.toLowerCase();
+    //const keyType = ev.key && ev.key.toLowerCase() !== undefined ? ev.state.toLowerCase() : '';
     if (this.isEnabledInLibraryModule("callCreateFromProps")) {
       this.props.createNew();
     } else if (ev.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
       this.props.router.push({
-        pathname: `/mobilepush/create/${ev.key.toLowerCase()}`,
+        pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/${ev.key.toLowerCase()}`,
         query: type === 'embedded' ? {type: 'embedded', module} : {module},
       });
     } else {
@@ -751,7 +775,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (this.state.channel.toLowerCase() === "mobilepush") {
         params.accountId = this.props.Templates.selectedWeChatAccount.id;
       }
-      if (this.state.channel.toLowerCase() === 'mobilepush' && data.toLowerCase() !== "all") {
+      if ( (this.state.channel.toLowerCase() === 'mobilepush' || this.state.channel.toLowerCase() === 'line') && data.toLowerCase() !== "all") {
         params.mode = this.state.mode.toLowerCase();
       }
       this.getAllTemplates({params, resetPage: true});
@@ -795,6 +819,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.props.ebillActions.createTemplate(duplicateObj);
     } else if (this.state.channel.toLowerCase() === "email") {
       this.props.emailActions.duplicateTemplate(template._id, "EMAIL");
+    } else if (this.state.channel.toLowerCase() === "line"){
+      this.props.lineActions.createTemplate(duplicateObj);
     }
   }
 
@@ -838,8 +864,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
   };
 
-  handleEditClick(e, id) {
+  handleEditClick(e, id, modeType) {
     console.log('inside props****', this.props);
+    if (modeType && modeType !== undefined) {
+      this.setState({modeType});
+    }
     const type = this.props.location.query.type;
     const module = this.props.location.query.module;
     const isLanguageSupport = (this.props.location.query.isLanguageSupport) ? this.props.location.query.isLanguageSupport : false;
@@ -864,6 +893,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.state.channel.toLowerCase() === 'ebill') {
       pathName = `/ebill/edit/${id}`;
     }
+    if (this.state.channel.toLowerCase() === 'line') {
+      pathName = `/line/edit/${modeType}/${id}`;
+    }
     if (this.isEnabledInLibraryModule("callSelectFromProps")) {
       this.props.onSelectTemplate(id);
     } else {
@@ -877,9 +909,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
   }
 
-  handlePreviewClick(template) {
+  handlePreviewClick(template, modeType) {
     this.togglePreview();
     const templateInfo = _.cloneDeep(template);
+    if (this.state.channel.toLowerCase() === 'line') {
+      templateInfo.modeType = modeType;
+    }
     templateInfo.updatedByName = commonUtil.getUserNameById(parseInt(template.updatedBy, 10), commonUtil.getMergedUserList(this.props.Templates.userList));
     if (this.state.channel === 'wechat') {
       templateInfo.content = this.prepareWeChatPreviewData(template.versions.base.content, template.versions.base.Tag, template.versions.base.data);
@@ -935,20 +970,20 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             </div>
           </div>
         </div>);
-      } else if (channel === 'mobilepush') {
+      } else if (channel === 'mobilepush' || channel === 'line') {
         content = (<div className="sms-template-content">
           <div style={{textAlign: 'center', lineHeight: '260px'}} className="sms-text">
             <div>
               <button
                 type="button"
                 className="ant-btn cap-button edit-button ant-btn-ghost"
-                onClick={() => this.handleBlankTemplateAction('textTemplate')}>
+                onClick={() => this.handleBlankTemplateAction('textTemplate', channel)}>
                 <span>{this.props.intl.formatMessage(messages.textTemplate)}</span>
               </button>
               <button
                 type="button"
                 className="ant-btn cap-button preview-button ant-btn-danger"
-                onClick={() => this.handleBlankTemplateAction('imageTemplate')}>
+                onClick={() => this.handleBlankTemplateAction('imageTemplate', channel)}>
                 <span>{this.props.intl.formatMessage(messages.imageTemplate)}</span>
               </button>
             </div>
@@ -1022,6 +1057,22 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             {template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
             {template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
           </div>);
+      } else if (this.state.channel.toLowerCase() === 'line') {
+        //content = template.versions.base.messages[0].Text;
+        content = {
+          bodyText: template.versions.base.content.messages[0].text ? template.versions.base.content.messages[0].text : '',
+          bodyImage: template.versions.base.content.messages[0].originalContentUrl ? template.versions.base.content.messages[0].originalContentUrl : '',
+        };
+        const modeType = template.versions.base.content.messages[0].type;
+        temp.content = (
+          <div className="sms-template-content" key={template._id}>
+            {content.bodyText ? <div className={`sms-text ${this.state.hoveredItem === template._id ? 'sms-text-blurred' : ''}`}>{content.bodyText || ''}</div> : ''}
+            {content.bodyImage ? <div className={`sms-text ${this.state.hoveredItem === template._id ? 'sms-text-blurred' : ''}`}>
+              <img src={content.bodyImage} alt="Line Image" style={{maxWidth: '100%', objectFit: 'cover', height: '100%'}}/></div> : ''}
+            {template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id, modeType)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
+            {template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handlePreviewClick(template, modeType)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
+          </div>
+        );
       } else {
         content = template && template.versions && template.versions.base ? template.versions.base['sms-editor'] : '';
         for (let idx = 2; idx <= 5; idx += 1) {
@@ -1081,7 +1132,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       return true;
     });
     return items;
-  }
+  };
 
   toggleEmailPreview = () => {
     this.setState({ showHtmlPreview: !this.state.showHtmlPreview }, () => {
@@ -1089,11 +1140,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         this.setState({previewTemplate: {}});
       }
     });
-  }
+  };
 
   changePreviewDevice = (device) => {
     this.setState({ device });
-  }
+  };
 
   renderEmailPreviewModal() {
     const slideboxContent = (
@@ -1165,6 +1216,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         pageHeaderText = this.props.intl.formatMessage(messages.mobilepushHeader);
       } else if (this.state.channel.toUpperCase() === 'EBILL') {
         pageHeaderText = this.props.intl.formatMessage(messages.ebillHeader);
+      } else if (this.state.channel.toUpperCase() === 'LINE') {
+        pageHeaderText = this.props.intl.formatMessage(messages.lineHeader);
       }
     }
     const options = [
@@ -1207,7 +1260,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             <CapSelect key={"select-account"} style={{width: '120px', marginLeft: '16px', minWidth: 'initial'}} defaultValue="Most Recent" onChange={this.handleSortBy} options={options}>
             </CapSelect>
           </div>
-          {this.state.channel.toLowerCase() === 'mobilepush' &&
+          { (this.state.channel.toLowerCase() === 'mobilepush' || this.state.channel.toLowerCase() === 'line') &&
             <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center', marginLeft: '16px'}}>
               <div className="select-font">Type</div>
               <CapSelect key={"select-type"} style={{width: '120px', marginLeft: '16px', minWidth: 'initial'}} defaultValue="All" onChange={this.handleType} options={typeOptions}>
@@ -1247,6 +1300,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     } else if (this.state.channel.toUpperCase() === "EBILL") {
       templateText = "Select Ebill Template";
       titleText = "Ebill";
+    } else if (this.state.channel.toUpperCase() === "LINE") {
+      templateText = "Select Line Template";
+      titleText = "Line";
     }
     const pageHeader = (
       <div>
@@ -1312,11 +1368,33 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             </div>
           </CapButton>
         </Dropdown>);
+      } else if (this.props.route.name.toLowerCase() === "line"){
+        const lineMenu = (
+          <Menu onClick={this.createTemplate}>
+            <MenuItem key="text">
+              {this.props.intl.formatMessage(messages.textTemplate)}
+            </MenuItem>
+            <MenuItem key="image">
+              {this.props.intl.formatMessage(messages.imageTemplate)}
+            </MenuItem>
+          </Menu>
+        );
+        actionButton = (<Dropdown overlay={lineMenu} trigger={['click']}>
+          <CapButton style={{paddingLeft: '24px', paddingRight: '4px'}}>
+            <div style={{display: 'inline-flex'}}>
+              <p style={{ lineHeight: '28px'}}>New Template</p>
+              <p style={{ height: '28px'}}>
+                <i style={{ color: '#fff', paddingTop: '2px', margin: '0', paddingRight: '8px'}} className="material-icons">arrow_drop_down</i>
+              </p>
+            </div>
+          </CapButton>
+        </Dropdown>);
       } else {
         actionButton = (<CapButton onClick={this.createTemplate}>{this.state.channel.toUpperCase() === 'SMS' ? this.props.intl.formatMessage(messages.createSmsActionButton) : 'Create SMS'}</CapButton>);
       }
     }
 
+    const lineLoader = (this.props.Templates.getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'line');
     const smsLoader = (this.props.Templates.getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'sms');
     const wechatLoader = (((this.state.selectedAccount !== '' && this.props.Templates.getAllTemplatesInProgress) || (this.props.Templates.fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'wechat');
     const mobilePushLoader = (((this.props.Templates.getAllTemplatesInProgress) || (this.props.Templates.fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'mobilepush');
@@ -1326,7 +1404,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       (smsLoader !== undefined ? smsLoader : false) ||
       (emailLoader !== undefined ? emailLoader : false) ||
       (ebillLoader !== undefined ? ebillLoader : false) ||
-      (mobilePushLoader !== undefined ? mobilePushLoader : false);
+      (mobilePushLoader !== undefined ? mobilePushLoader : false) ||
+      (lineLoader !== undefined ? lineLoader : false);
     let previewHeader = this.props.intl.formatMessage(messages.preview);
     // const previewHeader = (this.state.channel.toLowerCase() === 'email' ? <h3>{this.props.intl.formatMessage(messages.emailPreview)}</h3> : <h3>{this.props.intl.formatMessage(messages.ebillPreview)}</h3>);
     if (this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill') {
@@ -1355,6 +1434,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
 
     const templateList = this.populateTemplatesList(this.props.TemplatesList, true);
+
     const isSearch = this.props.Templates.isSearch;
     return (
       <div>
@@ -1458,6 +1538,7 @@ Templates.propTypes = {
   Global: PropTypes.object,
   createNew: PropTypes.func,
   onSelectTemplate: PropTypes.func,
+  lineActions: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -1469,6 +1550,7 @@ const mapStateToProps = createStructuredSelector({
   Edit: makeSelectEdit(),
   EmailCreate: makeSelectCreateEmail(),
   Global: makeSelectAuthenticated(),
+  Line: makeSelectLine(),
 });
 
 function mapDispatchToProps(dispatch) {
@@ -1480,6 +1562,7 @@ function mapDispatchToProps(dispatch) {
     ebillActions: bindActionCreators(ebillActions, dispatch),
     emailActions: bindActionCreators(emailActions, dispatch),
     globalActions: bindActionCreators(globalActions, dispatch),
+    lineActions: bindActionCreators(lineActions, dispatch),
   };
 }
 

package/containers/Templates/messages.js

@@ -46,6 +46,10 @@ export default defineMessages({
     id: 'app.containers.Templates.ebillHeader',
     defaultMessage: 'Ebill',
   },
+  lineHeader: {
+    id: 'app.containers.Templates.lineHeader',
+    defaultMessage: 'Line',
+  },
   selectWechatHeader: {
     id: 'app.containers.Templates.selectWechatHeader',
     defaultMessage: 'Select WECHAT Template',

package/package.json

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

package/routes.js

@@ -10,6 +10,8 @@ import * as mobilpushSagas from 'containers/MobilePush/Create/sagas';
 import * as ebillSagas from 'containers/Ebill/sagas';
 import * as emailSagas from 'containers/Email/sagas';
 import * as templateSagas from 'containers/Templates/sagas';
+import * as lineSagas from 'containers/Line/Create/sagas';
+
 const errorLoading = (err) => {
   console.error('Dynamic page loading failed', err); // eslint-disable-line no-console
 };
@@ -440,6 +442,114 @@ export default function createRoutes(store) {
         importModules.catch(errorLoading);
       },
     }, {
+      path: '/line',
+      name: 'line',
+      getComponent(nextState, cb) {
+        const importModules = Promise.all([
+          import('containers/Templates/reducer'),
+          import('containers/Line/Create/reducer'),
+          import('containers/Templates/sagas'),
+          import('containers/Templates'),
+        ]);
+
+        const renderRoute = loadModule(cb);
+
+        importModules.then(([reducer, createReducer, sagas, component]) => {
+          injectReducer('templates', reducer.default);
+          injectReducer('lineTemplates', createReducer.default);
+          injectSagas(sagas.default);
+          injectSagas(rootSaga.default);
+          injectSagas(lineSagas.default);
+          renderRoute(component);
+        });
+
+        importModules.catch(errorLoading);
+      },
+    }, {
+      path: '/line/create/:mode',
+      name: 'create line',
+      getComponent(nextState, cb) {
+        const importModules = Promise.all([
+          import('containers/Line/Create/reducer'),
+          import('containers/Line/Create/sagas'),
+          import('containers/Line/Create'),
+        ]);
+
+        const renderRoute = loadModule(cb);
+
+        importModules.then(([reducer, sagas, component]) => {
+          injectReducer('line', reducer.default);
+          injectSagas(sagas.default);
+          injectSagas(rootSaga.default);
+          renderRoute(component);
+        });
+
+        importModules.catch(errorLoading);
+      },
+    }, {
+      path: '/line/view/:mode',
+      name: 'view',
+      getComponent(nextState, cb) {
+        const importModules = Promise.all([
+          import('containers/Line/Create/reducer'),
+          import('containers/Line/Create/sagas'),
+          import('containers/Line/Create'),
+        ]);
+
+        const renderRoute = loadModule(cb);
+
+        importModules.then(([reducer, sagas, component]) => {
+          injectReducer('line', reducer.default);
+          injectSagas(sagas.default);
+          injectSagas(rootSaga.default);
+          renderRoute(component);
+        });
+
+        importModules.catch(errorLoading);
+      },
+    }, {
+      path: 'line/edit/text/:id',
+      name: 'edit_text',
+      getComponent(nextState, cb) {
+        const importModules = Promise.all([
+          import('containers/Line/Create/reducer'),
+          import('containers/Line/Create/sagas'),
+          import('containers/Line/Create'),
+        ]);
+
+        const renderRoute = loadModule(cb);
+
+        importModules.then(([reducer, sagas, component]) => {
+          injectReducer('line', reducer.default);
+          injectSagas(sagas.default);
+          injectSagas(rootSaga.default);
+          renderRoute(component);
+        });
+
+        importModules.catch(errorLoading);
+      },
+    }, {
+      path: 'line/edit/image/:id',
+      name: 'edit_image',
+      getComponent(nextState, cb) {
+        const importModules = Promise.all([
+          import('containers/Line/Create/reducer'),
+          import('containers/Line/Create/sagas'),
+          import('containers/Line/Create'),
+        ]);
+
+        const renderRoute = loadModule(cb);
+
+        importModules.then(([reducer, sagas, component]) => {
+          injectReducer('line', reducer.default);
+          injectSagas(sagas.default);
+          injectSagas(rootSaga.default);
+          renderRoute(component);
+        });
+
+        importModules.catch(errorLoading);
+      },
+    }, {
       path: '*',
       name: 'notfound',
       getComponent(nextState, cb) {

package/services/api.js

@@ -296,3 +296,11 @@ export const getEdmTemplates = () => {
   const url = `${API_ENDPOINT}/templates/email/default`;
   return request(url, getAPICallObject('GET'));
 };
+
+// All about line
+
+export const createLineTemplate = ({template}) => {
+  console.log('LINE : in api.js', template);
+  const url = `${API_ENDPOINT}/templates/LINE`;
+  return request(url, getAPICallObject('POST', template));
+};