@capillarytech/creatives-library 3.8.10 → 3.9.0

package/index.js

@@ -43,6 +43,10 @@ import Facebook from './v2Containers/Facebook';
 import facebookReducer from './v2Containers/Facebook/reducer';
 import facebookSaga from './v2Containers/Facebook/sagas';
 
+import Gallery from './v2Containers/Assets/Gallery';
+import galleryReducer from './v2Containers/Assets/Gallery/reducer';
+import gallerySagas from './v2Containers/Assets/Gallery/sagas';
+
 import MobilepushCreate from './v2Containers/MobilePush/Create';
 import mobilepushCreateReducer from './v2Containers/MobilePush/Create/reducer';
 import mobilepushCreateSaga from './v2Containers/MobilePush/Create/sagas';
@@ -86,6 +90,7 @@ const LineCreateContainer = {LineCreate, lineCreateReducer, lineCreateSaga};
 const LineEditContainer = {LineEdit, lineEditReducer, lineEditSaga};
 const TemplatesV2Container = {TemplatesV2, templateReducer, templateSaga};
 const FacebookContainer = {Facebook, facebookReducer, facebookSaga};
+const GalleryContainer = {Gallery, galleryReducer, gallerySagas};
 
 export {default as TagList} from './v2Containers/TagList/index';
 export {default as TagListSaga} from './v2Containers/TagList/sagas';
@@ -123,4 +128,5 @@ export { CapContainer,
   CreativesContainer,
   updateCharCount,
   FacebookContainer,
+  GalleryContainer,
 };

package/package.json

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

package/v2Components/FormBuilder/index.js

@@ -2594,6 +2594,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         image: undefined,
         imagePreview: undefined,
       },
+      reUpload: true,
     });
   }
 
@@ -2833,7 +2834,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             );
             break;
           case 'upload':
-            const isImage = self.state && !!self.state.formData[`${self.state.currentTab - 1}`].image;
+            const {
+              formData: {
+                [`${self.state.currentTab - 1}`]: {
+                  image,
+                } = {},
+              } = {},
+            } = self.state;
+            const isImage = !!image;
             ifError = (this.state.checkValidation || this.props.startValidation) && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
             const ImageComponent = (props) => (
               <div key={`${val.id}-${this.state.currentTab}`}>
@@ -2898,16 +2906,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             );
             break;
           case "tag-list":
-            let moduleFilterEnabled = this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded';
-            const channel = _.get(this.props, 'schema.channel', "");
-            if (channel === 'EMAIL') {
-              moduleFilterEnabled = this.props.isFullMode;
-            }
             columns.push(
               <CapColumn key={`input-${val.id}`} offset={val.offset} span={val.width ? val.width : ''} style={val.style ? val.style : {marginBottom: '16px'}}>
                 <TagList
                   key={`input-${val.id}`}
-                  moduleFilterEnabled={moduleFilterEnabled}
+                  moduleFilterEnabled={this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded'}
                   label={val.label ? val.label : ''}
                   onTagSelect={(data) => this.callChildEvent(data, val, 'onTagSelect')}
                   onContextChange={this.props.onContextChange}
@@ -3478,7 +3481,6 @@ FormBuilder.propTypes = {
   selectedOfferDetails: PropTypes.array,
   setDrawerVisibility: PropTypes.bool,
   capDrawerContent: PropTypes.array,
-  isFullMode: PropTypes.bool,
 };
 
 export default injectIntl(FormBuilder);

package/v2Containers/Assets/Gallery/index.js

@@ -245,6 +245,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
         const fileParams = {
           width: this.width,
           height: this.height,
+          isGeneratePreview: true,
         };
         that.props.actions.uploadAsset(files[file], 'image', fileParams);
       };

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -73,6 +73,8 @@ function SlideBoxContent(props) {
       weChatMaptemplateStep,
       onWeChatMaptemplateStepChange,
       onFacebookSubmit,
+      saveMessage,
+      selectedAccount,
     } = props;
   const type = messageDetails.type.toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -360,7 +362,12 @@ function SlideBoxContent(props) {
             }}
             route={{ name: (templateData.modeType || (templateData.definition && templateData.definition.mode)) === 'image' ? 'edit_image' : 'edit_text' }}
             onCreateComplete={onCreateComplete}
-            isFullMode={props.isFullMode}
+            isFullMode={isFullMode}
+            saveMessage={saveMessage}
+            getFormSubscriptionData={getFormData}
+            isGetFormData={isGetFormData}
+            templateData={templateData}
+            selectedAccount={selectedAccount}
           />
         )
       }
@@ -369,7 +376,12 @@ function SlideBoxContent(props) {
           <CreateLineWrapper
             location={creativesLocationProps}
             onCreateComplete={onCreateComplete}
-            isFullMode={props.isFullMode}
+            isFullMode={isFullMode}
+            isGetFormData={isGetFormData}
+            saveMessage={saveMessage}
+            selectedAccount={selectedAccount}
+            templateData={templateData}
+            getFormSubscriptionData={getFormData}
           />
         )
       }
@@ -414,5 +426,7 @@ SlideBoxContent.propTypes = {
   weChatMaptemplateStep: PropTypes.string,
   onFacebookSubmit: PropTypes.func,
   onCreateComplete: PropTypes.func,
+  saveMessage: PropTypes.func,
+  selectedAccount: PropTypes.object,
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/index.js

@@ -12,7 +12,7 @@ import { bindActionCreators } from 'redux';
 import styled from 'styled-components';
 
 import * as actions from './actions';
-import {selectEmailLayout, uploadSelector, templateUserList} from '../Templates/selectors';
+import { selectEmailLayout, uploadSelector, templateUserList, makeSelectTemplates } from '../Templates/selectors';
 import SlideBoxContent from './SlideBoxContent';
 import SlideBoxHeader from './SlideBoxHeader';
 import SlideBoxFooter from './SlideBoxFooter';
@@ -215,6 +215,33 @@ class Creatives extends React.Component {
           };
           break;
         }
+        case constants.LINE: {
+          const { messageBody } = templateData;
+          const {
+            messages,
+            to,
+            messages: [{
+              type,
+            }] = [{}],
+          } = JSON.parse(messageBody);
+          creativesTemplateData = {
+            type: constants.LINE,
+            edit: true,
+            definition: {
+              mode: type,
+            },
+            name: "Campaign message Line content",
+            versions: {
+              base: {
+                content: {
+                  messages,
+                  to,
+                },
+              },
+            },
+          };
+          break;
+        }
         default:
           break;
       }
@@ -280,6 +307,18 @@ class Creatives extends React.Component {
           templateData = { channel, accountId, messageBody: JSON.stringify(messageBody), previewContent};
         }
         break;
+      case constants.LINE:
+        if (template.value) {
+          const { versions } = template.value;
+          const { Templates } = this.props;
+          const accountDetails = Templates && Templates.selectedLineAccount ? JSON.stringify(Templates.selectedLineAccount) : '';
+          templateData = {
+            channel,
+            accountDetails,
+            messageBody: JSON.stringify(versions.base.content),
+          };
+        }
+        break;
       default:
         break;
     }
@@ -393,6 +432,11 @@ class Creatives extends React.Component {
         showFooter = showFooter && !this.state.isLoadingContent;
       }
     }
+
+    if (channel === constants.LINE) {
+      showFooter = showFooter && isFullMode;
+    }
+
     return showFooter;
   }
   shouldShowDoneFooter = () => {
@@ -540,6 +584,8 @@ class Creatives extends React.Component {
               selectedWeChatAccount={selectedWeChatAccount}
               onWeChatMaptemplateStepChange={this.onWeChatMaptemplateStepChange}
               onFacebookSubmit={getCreativesData}
+              saveMessage={this.saveMessage}
+              selectedAccount={this.props.selectedAccount}
             />
           }
           footer={this.shouldShowFooter() &&
@@ -589,12 +635,15 @@ Creatives.propTypes = {
   selectedOfferDetails: PropTypes.array,
   channelsToDisable: PropTypes.array,
   selectedWeChatAccount: PropTypes.object,
+  Templates: PropTypes.object,
+  selectedAccount: PropTypes.object,
 };
 const mapStatesToProps = () => createStructuredSelector({
   isLoading: isLoadingSelector(),
   templateUserList: templateUserList(),
   EmailLayout: selectEmailLayout(),
   isUploading: uploadSelector(),
+  Templates: makeSelectTemplates(),
 });
 function mapDispatchToProps(dispatch) {
   return {

package/v2Containers/EmailWrapper/index.js

@@ -20,7 +20,7 @@ import * as templatesActionsCreators from '../Templates/actions';
 import Email from '../Email';
 import CmsTemplatesComponent from '../../v2Components/CmsTemplatesComponent';
 import messages from './messages';
-import { CHANNEL_CREATE_TRACK_MAPPING } from '../App/constants';
+import { CHANNEL_CREATE_TRACK_MAPPING } from '../App/constants'
 
 const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
 const { timeTracker } = GA;
@@ -110,15 +110,16 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
     };
     CapNotification.error(message);
   }
-  stopTimerGA=() => {
+  stopTimerGA=()=>{
     // stop timer
-    timeTracker.stopTimer(CHANNEL_CREATE_TRACK_MAPPING.email, {
+    timeTracker.stopTimer(CHANNEL_CREATE_TRACK_MAPPING['email'], {
       category: 'Creatives',
       action: 'Create',
       label: 'uploadZip',
     });
   }
   handleFileUpload = (file) => {
+    
     const { templatesActions, intl, showNextStep, isUploading } = this.props;
     if (!isUploading) {
       const fileExtension = file.name.split('.').pop();
@@ -130,6 +131,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
           this.setState({ modeContent: { file } }, showNextStep);
           stopTimerGA();
         }, this.handleZipUploadError);
+        
       } else if (fileExtension === 'html' || fileExtension === 'htm') {
         const reader = new FileReader();
         reader.onload = () => {

package/v2Containers/Line/Create/actions.js

@@ -47,11 +47,12 @@ export function clearAsset() {
 // FOR EDIT
 
 
-export function editTemplate(template) {
+export function editTemplate(template, callback) {
   console.log('action trigereed editTemplate line @@@');
   return {
     type: types.EDIT_TEMPLATE_REQUEST,
     template,
+    callback,
   };
 }
 

package/v2Containers/Line/Create/index.js

@@ -1,18 +1,18 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import get from 'lodash/get';
+import set from 'lodash/set';
 import { bindActionCreators } from 'redux';
 import { intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
-import { Row, Col, Spin } from 'antd';
 import _ from 'lodash';
-import { CapHeading } from '@capillarytech/cap-ui-library';
+import { CapSpin, CapHeading, CapRow, CapColumn } from '@capillarytech/cap-ui-library';
 import messages from './messages';
 import * as actions from './actions';
 import Gallery from '../../Assets/Gallery';
 import FormBuilder from '../../../v2Components/FormBuilder';
 //import { makeSelectCreate, makeSelectCreateResponse, makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse } from './selectors';
-import {makeSelectCreateLine} from './selectors';
+import {makeSelectCreateLine, makeSelectLine} from './selectors';
 import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
 import {getMessageObject} from '../../../utils/messageUtils';
 import { makeSelectTemplates } from '../../Templates/selectors';
@@ -44,7 +44,7 @@ export class Line extends Component {
       'title-tagList': {
         onTagSelect: this.onTagSelectTitle,
       },
-      pane: {
+      'pane': {
         onTabChange: this.onTabChange,
       },
       'line-template': {
@@ -53,7 +53,7 @@ export class Line extends Component {
       'image-upload-line': {
         onUpload: this.uploadImage,
       },
-      tagList: {
+      'tagList': {
         onTagSelect: this.onTagSelect,
       },
       'line-editor': {
@@ -88,7 +88,7 @@ export class Line extends Component {
       isReady: false,
       modeType: null,
       isDrawerRequired: false,
-      galleryPage: 1,
+      startValidation: false,
     };
   }
 
@@ -127,8 +127,26 @@ export class Line extends Component {
     if (modeType) {
       this.setState({ modeType, schema: {} });
     }
-    if (nextProps.isGetFormData) {
-      nextProps.getFormLibraryData(this.getFormData());
+    const {
+      isGetFormData,
+      templateData,
+    } = nextProps;
+    if (isGetFormData) {
+      const {
+        lineData,
+        getFormSubscriptionData,
+      } = nextProps;
+      let selectedAccount = {};
+      if (lineData) {
+        const {
+          weCrmAccounts = [],
+        } = lineData;
+        selectedAccount = weCrmAccounts.filter((account) => account === selectedAccount);
+      }
+      getFormSubscriptionData({ ...this.getFormData(), accountDetails: selectedAccount});
+    }
+    if (templateData && templateData.edit) {
+      this.setEditState(templateData);
     }
     if (isSchemaReady) {
       // set schema value as per mode type. Supported mode (text & image)
@@ -221,24 +239,6 @@ export class Line extends Component {
       this.props.actions.clearData();
     }
 
-    const isEditSucceed =
-      this.state.isEdit &&
-      nextProps.Line &&
-      nextProps.Line.editResponse &&
-      nextProps.Line.editResponse.templateId;
-    if (isEditSucceed) {
-      this.setState({ formData: {} });
-      const message = getMessageObject(
-        'success',
-        this.props.intl.formatMessage(
-          messages['Line Template Edited Successfully']
-        ),
-        true
-      );
-      this.props.globalActions.addMessageToQueue(message);
-      this.props.actions.clearEditResponse();
-    }
-
     if (
       nextProps.Line.editTemplateError &&
       !_.isEqual(
@@ -272,6 +272,40 @@ export class Line extends Component {
     }
   }
 
+  setEditSuccessMessage = () => {
+    this.setState({ formData: {} });
+    const message = getMessageObject(
+      'success',
+      this.props.intl.formatMessage(
+        messages['Line Template Edited Successfully']
+      ),
+      true
+    );
+    this.props.globalActions.addMessageToQueue(message);
+    this.props.actions.clearEditResponse();
+  }
+
+  setEditState = (data) => {
+    const { formData: previousFormData } = this.state;
+    const { text, originalContentUrl, imagePreview, image } = get(data, "versions.base.content.messages[0]");
+    const retrievedData = {
+      ...previousFormData[0],
+    };
+    if (text) {
+      retrievedData["message-editor"] = text;
+    }
+    const lineImage = originalContentUrl || image;
+    if (lineImage) {
+      retrievedData.image = lineImage;
+      retrievedData.imagePreview = imagePreview;
+    }
+    const formData = {
+      0: retrievedData,
+      base: retrievedData,
+    };
+    this.setState({ formData });
+  }
+
   componentWillUnmount() {
     window.removeEventListener('message', this.handleFrameTasks);
   }
@@ -297,7 +331,7 @@ export class Line extends Component {
   }
 
   onFormDataChange = (formData, tabCount, currentTab) => {
-    this.setState({ formData });
+    this.setState({ formData: { ...formData } });
     if (tabCount) {
       this.setState({ tabCount });
     }
@@ -468,13 +502,30 @@ export class Line extends Component {
         return;
       }
     }
-    if (this.state.isEdit) {
-      this.props.actions.editTemplate(obj, this.props.onCreateComplete);
-    } else {
-      this.props.actions.createTemplate(
-        obj,
-        this.props.onCreateComplete
-      );
+    if (!this.state.startValidation) {
+      this.setState({
+        startValidation: true,
+      }, () => {
+        const {
+          isFullMode,
+          saveMessage,
+          actions,
+          onCreateComplete,
+        } = this.props;
+        if (!isFullMode) {
+          saveMessage();
+        } else if (this.state.isEdit) {
+          actions.editTemplate(obj, () => {
+            this.setEditSuccessMessage();
+            onCreateComplete();
+          });
+        } else {
+          actions.createTemplate(
+            obj,
+            onCreateComplete
+          );
+        }
+      });
     }
   };
 
@@ -763,16 +814,24 @@ export class Line extends Component {
 
   removeStandAlone = () => {
     const schema = _.cloneDeep(this.state.schema);
-    if (
-      this.props.location.query.type === 'embedded' &&
-      this.props.location.query.module === 'loyalty'
-    ) {
+    const {
+      location: {
+        query: {
+          type,
+          mode,
+          module,
+        },
+      },
+    } = this.props;
+    if (type === 'embedded' && module === 'loyalty') {
       schema.standalone.sections.splice(0, 1);
-    } else if (
-      this.props.location.query.type === 'embedded' &&
-      typeof this.props.location.query.mode !== 'undefined'
-    ) {
-      delete schema.standalone;
+    } else if (type === 'embedded' && typeof mode !== 'undefined') {
+        delete schema.standalone;
+      } else if (!this.props.isFullMode) {
+        const childSections = get(schema, 'standalone.sections[0].childSections');
+        const fields = get(childSections, '[1].childSections[0].childSections');//removing template name section
+        fields.splice(0, 1);
+        set(childSections, '[1].childSections[0].childSections', fields);
     } else {
       schema.standalone.sections.splice(1, 1);
     }
@@ -910,18 +969,31 @@ export class Line extends Component {
   };
 
   render() {
-    if (
-      this.state.formData &&
-      this.state.formData['0'] &&
-      this.state.formData['0'].image
-    ) {
-      console.log('before render@@@', this.state.formData['0'].image);
-    }
-    let loading = this.props.Line.createTemplateInProgress
-      ? this.props.Line.createTemplateInProgress
-      : false;
-    if (this.props.Line.assetUploading) {
-      loading = true;
+    const {
+      Line: {
+        createTemplateInProgress,
+        assetUploading,
+      } = {},
+      templateData: {
+        edit,
+        mode,
+        orgId,
+      } = {},
+      params: {
+        id,
+      } = {},
+    } = this.props;
+    let loading = createTemplateInProgress || false;
+    loading = !!assetUploading;
+    if (edit || mode === 'edit' || (orgId && id)) {
+      const {
+        base: {
+          'message-editor': msgEditor,
+          image: uploadedAsset,
+        } = {},
+        reUpload,
+      } = this.state.formData;
+      loading = typeof reUpload === 'undefined' ? !(msgEditor || uploadedAsset) : !reUpload;
     }
     let tags =
       this.props.metaEntities && this.props.metaEntities.tags
@@ -931,9 +1003,9 @@ export class Line extends Component {
       tags = this.props.supportedTags;
     }
     return (
-      <Spin spinning={loading}>
-        <Row>
-          <Col>
+      <CapSpin spinning={loading}>
+        <CapRow>
+          <CapColumn>
             <FormBuilder
               key={'form builder'}
               schema={this.state.schema}
@@ -965,10 +1037,11 @@ export class Line extends Component {
               setDrawerVisibility={(drawervisibleFlag) =>
                 this.setState({ isDrawerRequired: drawervisibleFlag })
               }
+              startValidation={this.state.startValidation}
             />
-          </Col>
-        </Row>
-      </Spin>
+          </CapColumn>
+        </CapRow>
+      </CapSpin>
     );
   }
 }
@@ -989,10 +1062,13 @@ Line.propTypes = {
   injectedTags: PropTypes.object,
   onCreateComplete: PropTypes.func,
   isFullMode: PropTypes.bool,
+  saveMessage: PropTypes.func,
+  templateData: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
   Line: makeSelectCreateLine(),
+  lineData: makeSelectLine(),
   Templates: makeSelectTemplates(),
   metaEntities: makeSelectMetaEntities(),
   injectedTags: setInjectedTags(),

package/v2Containers/Line/Create/sagas.js

@@ -16,7 +16,7 @@ export function* createTemplate({ template, callback }) {
     }
     yield put({ type: types.CREATE_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
     if (callback) {
-      callback();
+      callback(result.response);
     }
   } catch (error) {
     yield put({ type: types.CREATE_TEMPLATE_FAILURE, error, errorMsg });
@@ -56,7 +56,7 @@ export function* editTemplate({ template, callback }) {
       errorMsg = result.message;
     }
     if (callback) {
-      callback();
+      callback(result.response);
     }
     yield put({ type: types.EDIT_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
   } catch (error) {

package/v2Containers/Line/Create/selectors.js

@@ -17,19 +17,14 @@ const selectLineMessageEditDomain = () => (state) => state.get('lineCreate');
 
 const makeSelectLine = () => createSelector(
   selectLineDomain(),
-  (substate) => substate.toJS()
+  (substate) => substate && substate.toJS()
 );
 
 const makeSelectCreateLine = () => createSelector(
   selectLineMessageEditDomain(),
-  (substate) => substate.toJS()
+  (substate) => substate && substate.toJS()
 );
 
-// const makeSelectDuplicate = () => createSelector(
-//   selectLineDuplicateDomain(),
-//   (substate) => substate.toJS()
-// );
-
 export {
   makeSelectLine, makeSelectCreateLine,
 };

package/v2Containers/Line/CreateWrapper/index.js

@@ -5,7 +5,8 @@
  */
 import React, {useState} from 'react';
 import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
-import {CapRadioCard, CapLabel, CapButton} from '@capillarytech/cap-ui-library';
+import PropTypes from 'prop-types';
+import { CapRadioCard, CapLabel, CapButton } from '@capillarytech/cap-ui-library';
 import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
 import styled from 'styled-components';
 import { CAP_SPACE_04, CAP_SPACE_08, CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
@@ -33,7 +34,7 @@ const CardContainer = styled.div`
 `;
 
 const CreateLineWrapper = (props) => {
-  const { intl: { formatMessage } } = props;
+  const { intl: { formatMessage }, selectedAccount } = props;
 
   const getModes = (modeList) => (
     modeList.map(({ label, imageSrc, type, title }) => ({
@@ -103,12 +104,14 @@ const CreateLineWrapper = (props) => {
       {...props}
       params={{mode: selectedLineTemplateOption}}
       route={{name: selectedLineTemplateOption}}
+      selectedAccount={selectedAccount}
     />
   );
 };
 
 CreateLineWrapper.propTypes = {
   intl: intlShape.isRequired,
+  selectedAccount: PropTypes.object,
 };
 
 export default injectIntl(CreateLineWrapper);

package/v2Containers/Line/CreateWrapper/messages.js

@@ -40,4 +40,16 @@ export default defineMessages({
     id: `${prefix}.continue`,
     defaultMessage: 'Continue',
   },
+  "accountLineListTitle": {
+    id: `${prefix}.accountLineListTitle`,
+    defaultMessage: 'Line accounts',
+  },
+  "accountLineListDescription": {
+    id: `${prefix}.accountLineListDescription`,
+    defaultMessage: 'Choose the account to send content',
+  },
+  "accountLineNoListTitle": {
+    id: `${prefix}.accountLineNoListTitle`,
+    defaultMessage: 'No line accounts present',
+  },
 });

package/v2Containers/Templates/_templates.scss

@@ -13,23 +13,27 @@
         &:nth-child(4n+4) { //every 4th child
           margin-right: unset;
         }
+      }
+    }
+  }
+}
 
-        .LINE {
-          .ant-card-body {
-            background-color: $CAP_G09;
-            height: 320px;
-          }
-
-          &.no-image .ant-card-meta {
-            height: 276px;
-            background: $CAP_WHITE;
-            padding: $CAP_SPACE_16 $CAP_SPACE_12;
-
-            .ant-card-meta-description {
-              height: 250px;
-              word-wrap: break-word;
-            }
-          }
+.creatives-templates-list {
+  .pagination-container {
+    .LINE {
+      .ant-card-body {
+        background-color: $CAP_G09;
+        height: 320px;
+      }
+    
+      &.no-image .ant-card-meta {
+        height: 276px;
+        background: $CAP_WHITE;
+        padding: $CAP_SPACE_16 $CAP_SPACE_12;
+    
+        .ant-card-meta-description {
+          height: 250px;
+          word-wrap: break-word;
         }
       }
     }

package/v2Containers/Templates/actions.js

@@ -52,6 +52,13 @@
    };
  }
 
+ export function setLineAccount(lineAccount) {
+  return {
+    type: types.SET_LINE_ACCOUNT,
+    lineAccount,
+  };
+}
+
  export function handleHtmlUpload(selectedTemplate) {
    return {
      type: types.SET_SELECTED_LAYOUT,

package/v2Containers/Templates/constants.js

@@ -43,3 +43,5 @@ export const RESET_TEMPLATE = "app/v2Containers/Templates/RESET_TEMPLATE";
 export const RESET_TEMPLATE_DATA = "app/v2Containers/Templates/RESET_TEMPLATE_DATA";
 export const RESET_UPLOAD_DATA = "app/v2Containers/Templates/RESET_UPLOAD_DATA";
 export const CLEAR_TEMPLATE_STORE_DATA = "app/v2Containers/Templates/CLEAR_TEMPLATE_STORE_DATA";
+
+export const SET_LINE_ACCOUNT = "app/v2Containers/Templates/SET_LINE_ACCOUNT";

package/v2Containers/Templates/index.js

@@ -160,6 +160,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           break;
         case LINE:
           channel = "Line";
+          if (!this.props.isFullMode) {
+            activeMode = ACCOUNT_SELECTION_MODE;
+            this.props.actions.getWeCrmAccounts(channel);
+          }
           break;
         default:
           channel = '';
@@ -239,6 +243,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         channel = 'Ebill';
       } else if (nextProps.route.name.toLowerCase() === 'line') {
         channel = 'Line';
+        if (!this.props.isFullMode) {
+          this.setState({defaultAccount: true});
+          nextProps.actions.getWeCrmAccounts(channel);
+        }
       }
       this.setState({ channel }, () => {
         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))) {
@@ -421,6 +429,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         } else {
           this.setState({selectedAccountError: false});
         }
+      } else if (this.state.channel.toLowerCase() === 'line') {
+        this.props.actions.setLineAccount(this.props.Templates.weCrmAccounts.find(item => item.name === this.state.selectedAccount));
       }
       this.setState({activeMode: TEMPLATES_MODE});
       console.log("getAllTemplates params: ", params);
@@ -460,6 +470,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         } else {
           creativesParams._id = pathname.split('/')[3];
           creativesParams.modeType = pathname.split('/')[4];
+          creativesParams.account = pathname.split('/')[5];
         }
         creativesParams.type = this.state.channel.toUpperCase();
       }
@@ -577,7 +588,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               onClick={() => { if (this.props.isFullMode) { handlers.handlePreviewClick(template); } else { this.props.handlePeviewTemplate(template); } }}
               />,
           ],
-          hoverOption: <CapButton className={this.props.isFullMode ? `edit-${channelLowerCase}` : `select-${channelLowerCase}`} onClick={(e) => handlers.handleEditClick(e, template)}>{this.props.intl.formatMessage(this.props.isFullMode ? messages.creativesTemplatesEdit : messages.selectButton)}</CapButton>,
+          hoverOption: <CapButton className={this.props.isFullMode ? `edit-${channelLowerCase}` : `select-${channelLowerCase}`} onClick={(e) => handlers.handleEditClick(e, template, undefined, undefined, {account: this.state.selectedAccount})}>{this.props.intl.formatMessage(this.props.isFullMode ? messages.creativesTemplatesEdit : messages.selectButton)}</CapButton>,
         };
       if (this.props.isFullMode) {
         templateData.extra.push(<CapDropdown
@@ -646,7 +657,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             <div className={!isEmpty(this.state.searchText) && isEmpty(cardDataList) ? '' : "pagination-container"}>
               <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} style={{marginLeft: '16px'}}/>
             </div>)
-            : ['sms', "email"].includes(this.state.channel.toLowerCase()) && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+            : ['sms', "email"].includes(this.state.channel.toLowerCase()) && <CapIllustration {...this.getChannelTypeIllustrationInfo(currentChannel)} />
           }
 
           {(this.state.selectedAccount === '' && isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") &&
@@ -668,7 +679,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               isEmpty(filteredTemplates) &&
               isEmpty(this.state.searchText) &&
               <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto'} : {}}>
-                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+                <CapIllustration {...this.getChannelTypeIllustrationInfo(currentChannel)} />
               </div>
             )
           }
@@ -1119,7 +1130,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     } 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);
+      this.props.lineActions.createTemplate(duplicateObj, (response) => {
+        if (response && response.templateId) {
+          const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
+          CapNotification.success({key: 'duplicateSucess', message});
+          this.getAllTemplates({params, resetPage: true});
+          this.props.lineActions.clearCreateResponse();
+        }
+      });
     }
   }
 
@@ -1161,7 +1179,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
   };
 
-  handleEditClick(e, template, modeType, path) {
+  handleEditClick(e, template, modeType, path, options) {
     timeTracker.startTimer(CHANNEL_EDIT_TRACK_MAPPING[this.state.channel.toLowerCase()]);
     if (modeType && modeType !== undefined) {
       this.setState({modeType});
@@ -1197,6 +1215,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       const { messages } = template.versions.base.content;
       const type = messages && messages[0] && messages[0].type;
       pathName = `/line/edit/${id}/${type}`;
+      if (options && options.account) {
+        pathName += `/${options.account}`;
+      }
     }
     if (this.state.channel.toUpperCase() === WECHAT) {
       if (get(template, 'definition.msgcontent', '') === "RICH_MEDIA_WECHAT") {
@@ -1577,10 +1598,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const { weCrmAccounts = [], fetchingWeCrmAccounts = false } = templates;
     const isWechatChannel = channel === WECHAT;
     const isMobilePushChannel = channel === MOBILE_PUSH;
+    const isLineChannel = channel === LINE;
 
-    if ((isWechatChannel || isMobilePushChannel) && !isEmpty(weCrmAccounts)) {
+    if ((isWechatChannel || isMobilePushChannel || isLineChannel) && !isEmpty(weCrmAccounts)) {
       forEach(weCrmAccounts, (account) => {
-        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || isMobilePushChannel) {
+        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || isMobilePushChannel || isLineChannel) {
           if (query.type === 'embedded' && (!query.module || (query.module && query.module !== 'library'))) {
             if (query.source_account_id && account.sourceAccountIdentifier === query.source_account_id) {
               accountOptions.push(
@@ -1613,11 +1635,37 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         }
       });
     }
+    const {
+      intl: {
+        formatMessage,
+      },
+    } = this.props;
+    let accountHeader = formatMessage(messages.mobilepushAccount);
+    let noAccountHeader = messages.noAccountsPresent;
+    switch (channel) {
+      case MOBILE_PUSH: {
+        accountHeader = formatMessage(messages.mobilepushAccount);
+        noAccountHeader = messages.noAccountsPresent;
+        break;
+      }
+      case WECHAT: {
+        accountHeader = formatMessage(messages.noAccountsPresentWeChat);
+        noAccountHeader = messages.noAccountsPresent;
+        break;
+      }
+      case LINE: {
+        accountHeader = formatMessage(messages.lineAccount);
+        noAccountHeader = messages.noAccountsPresentLine;
+        break;
+      }
+      default:
+        break;
+    }
     return (<CapSpin spinning={fetchingWeCrmAccounts}>
-      {isEmpty(weCrmAccounts) && !fetchingWeCrmAccounts ? <FormattedMessage {...(channel === WECHAT ? messages.noAccountsPresentWeChat : messages.noAccountsPresent)} /> :
+      {isEmpty(weCrmAccounts) && !fetchingWeCrmAccounts ? <FormattedMessage {...noAccountHeader} /> :
       <div style={{ overflowX: "auto", paddingBottom: CAP_SPACE_16 }}>
         <CapHeader
-          title={isMobilePushChannel ? this.props.intl.formatMessage(messages.mobilepushAccount) : this.props.intl.formatMessage(messages.wechatAccount)}
+          title={accountHeader}
           description={this.props.intl.formatMessage(messages.chooseAccount)}
           size="regular"
           className="select-account-header"
@@ -1798,6 +1846,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               channel={route.name.toUpperCase()}
               handleCloseCreatives={this.onCreateComplete}
               selectedWeChatAccount={get(this.props, 'Templates.selectedWeChatAccount', {})}
+              selectedAccount={this.state.selectedAccount}
             />
           }
           </CapRow>

package/v2Containers/Templates/messages.js

@@ -126,6 +126,10 @@ export default defineMessages({
     id: `${scope}.noAccountsPresentWeChat`,
     defaultMessage: "Wechat accounts are not setup for your brand",
   },
+  "noAccountsPresentLine": {
+    id: `${scope}.noAccountsPresentLine`,
+    defaultMessage: "Line accounts are not setup for your brand",
+  },
   "noTemplatesMessage": {
     id: `${scope}.noTemplatesMessage`,
     defaultMessage: "No templates available",
@@ -326,6 +330,10 @@ export default defineMessages({
     id: `${scope}.mobilepushAccount`,
     defaultMessage: 'Mobilepush account',
   },
+  "lineAccount": {
+    id: `${scope}.lineAccount`,
+    defaultMessage: 'Line account',
+  },
   "all": {
     id: `${scope}.all`,
     defaultMessage: 'All',

package/v2Containers/Templates/reducer.js

@@ -71,6 +71,8 @@ function templatesReducer(state = initialState, action) {
     case types.SET_WECHAT_ACCOUNT:
       return state
         .set('selectedWeChatAccount', fromJS(action.weChatAccount));
+    case types.SET_LINE_ACCOUNT:
+      return state.set('selectedLineAccount', fromJS(action.lineAccount));
     case types.RESET_ACCOUNT:
       return state
         .remove('selectedWeChatAccount')