@capillarytech/creatives-library 6.7.1 → 6.8.1

package/v2Containers/Line/Container/reducer.js

@@ -0,0 +1,103 @@
+/*
+ *
+ * Create reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import * as types from './constants';
+
+const initialState = fromJS({
+  createTemplateInProgress: false,
+  response: {},
+  uploadedAssetData: {},
+});
+
+function createReducer(state = initialState, action) {
+  switch (action.type) {
+    case types.DEFAULT_ACTION:
+      return state;
+    case types.CREATE_TEMPLATE_REQUEST:
+      return state
+        .set('createTemplateInProgress', true)
+        .set('createTemplateError', false)
+        .set('createTemplateErrorMessage', fromJS(""));
+    case types.CREATE_TEMPLATE_SUCCESS:
+      return state.set('createTemplateInProgress', false)
+        .set('response', action.data)
+        .set('createTemplateError', (action.statusCode !== undefined && action.statusCode > 300))
+        .set('createTemplateErrorMessage', fromJS(action.errorMsg));
+    case types.CREATE_TEMPLATE_FAILURE:
+      return state
+        .set('createTemplateInProgress', false)
+        .set('createTemplateError', true)
+        .set('createTemplateErrorMessage', fromJS(action.errorMsg));
+    case types.CLEAR_CREATE_RESPONSE_REQUEST:
+      return state.set('response', {});
+    case types.UPLOAD_ASSET_REQUEST:
+      return state
+        .set('uploadAssetSuccess', false)
+        .set('assetUploading', true);
+    case types.UPLOAD_ASSET_SUCCESS:
+      return state
+        .set('uploadAssetSuccess', (action.statusCode !== undefined && action.statusCode !== '' && action.statusCode < 300))
+        .set('assetUploading', false)
+        .set('uploadedAssetData', action.data);
+    case types.UPLOAD_ASSET_FAILURE:
+      return state
+        .set('uploadAssetSuccess', false)
+        .set('assetUploading', false);
+    case types.CLEAR_ASSET:
+      return state
+        .delete('uploadedAssetData');
+      // FOR EDIT
+    case types.EDIT_TEMPLATE_REQUEST:
+      return state
+        .set('editTemplateInProgress', true)
+        .set('editTemplateError', false)
+        .set('editTemplateErrorMessage', fromJS(""));
+    case types.EDIT_TEMPLATE_SUCCESS:
+      return state.set('editTemplateInProgress', false)
+        .set('editResponse', action.data)
+        .set('editTemplateError', (action.statusCode !== undefined && action.statusCode > 300))
+        .set('editTemplateErrorMessage', fromJS(action.errorMsg));
+    case types.EDIT_TEMPLATE_FAILURE:
+      return state
+        .set('editTemplateInProgress', false)
+        .set('editTemplateError', true)
+        .set('editTemplateErrorMessage', fromJS(action.errorMsg));
+    case types.GET_TEMPLATE_DETAILS_REQUEST:
+      return state.set('getTemplateDetailsInProgress', true);
+    case types.GET_TEMPLATE_DETAILS_SUCCESS:
+      return state.set('getTemplateDetailsInProgress', false)
+        .set('templateDetails', action.data);
+    case types.GET_TEMPLATE_DETAILS_FAILURE:
+      return state.set('getTemplateDetailsInProgress', false);
+    case types.CLEAR_EDIT_RESPONSE_REQUEST:
+      return state.set('editResponse', {});
+    case types.CLEAR_DATA:
+      return state
+        .delete('uploadedAssetData')
+        .delete('metaEntities')
+        .delete('templateDetails');
+    case types.GET_LINE_TEMPLATES_LIST_REQUEST:
+      return state
+        .set('fetchingDefaultTemplates', true);
+    case types.GET_LINE_TEMPLATES_LIST_SUCCESS:
+      return state
+        .set('fetchingDefaultTemplates', false)
+        .set('lineTemplates', fromJS(action.data));
+    case types.GET_LINE_TEMPLATES_LIST_FAILURE:
+      return state
+        .set('fetchingDefaultTemplates', false)
+        .set('errorFetchingDefaultTempalte', true);
+    case types.GET_STICKER_RESPONSE:
+      return state
+        .set('lineStickers', action.result)
+        .set('lineStickersError', action.error)
+    default:
+      return state;
+  }
+}
+
+export default createReducer;

package/v2Containers/Line/Container/sagas.js

@@ -0,0 +1,137 @@
+// Line Sagas
+
+import { take, cancel, call, put, takeLatest } from 'redux-saga/effects';
+import { LOCATION_CHANGE } from 'react-router-redux';
+import * as Api from '../../../services/api';
+import * as types from './constants';
+
+export function* createTemplate({ template, callback }) {
+  let errorMsg;
+  try {
+    console.log('inside line saga createTemplate@@@', template);
+    const result = yield call(Api.createLineTemplate, { template });
+    if (result.message || result.status.code === 500) {
+      errorMsg = result.message;
+    }
+    yield put({ type: types.CREATE_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
+    if (callback) {
+      callback(result.response);
+    }
+  } catch (error) {
+    yield put({ type: types.CREATE_TEMPLATE_FAILURE, error, errorMsg });
+  }
+}
+export function* uploadAsset(file, assetType, fileParams) {
+  try {
+    const result = yield call(Api.uploadFile, file, assetType, fileParams);
+    yield put({ type: types.UPLOAD_ASSET_SUCCESS, data: result.response.asset, statusCode: result.status ? result.status.code : '' });
+  } catch (error) {
+    yield put({ type: types.UPLOAD_ASSET_FAILURE, error });
+  }
+}
+
+function* watchCreateTemplate() {
+  console.log('inside watch line saga createTemplate@@@');
+  const watcher = yield takeLatest(types.CREATE_TEMPLATE_REQUEST, createTemplate);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+function* watchUploadAsset() {
+  console.log("inside watchUploadAsset");
+  const watcher = yield takeLatest(types.UPLOAD_ASSET_REQUEST, uploadAsset);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+// edit
+
+export function* editTemplate({ template, callback }) {
+  let errorMsg;
+  try {
+    console.log('saga editTemplate line', template);
+    const result = yield call(Api.createLineTemplate, {template});
+    console.log('saga editTemplate success line', result);
+    if (result.message || result.status.code === 500) {
+      errorMsg = result.message;
+    }
+    if (callback) {
+      callback(result.response);
+    }
+    yield put({ type: types.EDIT_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
+  } catch (error) {
+    yield put({ type: types.EDIT_TEMPLATE_FAILURE, error, errorMsg });
+  }
+}
+
+export function* getTemplateDetails(id) {
+  try {
+    console.log('saga get Template details line', id);
+    const result = yield call(Api.getTemplateDetails, id);
+    // const sidebar = result.response.sidebar;
+    yield put({ type: types.GET_TEMPLATE_DETAILS_SUCCESS, data: result.response });
+    if (id.callback) {
+      id.callback(false);
+    }
+  } catch (error) {
+    yield put({ type: types.GET_TEMPLATE_DETAILS_FAILURE, error });
+  }
+}
+
+export function* getLineTemplatesList(params) {
+  try {
+    console.log('Saga param line ', params.channel, params.queryParams);
+    const result = yield call(Api.getAllTemplates, {channel: params.channel, queryParams: params.queryParams});
+    yield put({ type: types.GET_LINE_TEMPLATES_LIST_SUCCESS, data: result.response.templates, templateData: result.response.mapped});
+  } catch (error) {
+    yield put({ type: types.GET_LINE_TEMPLATES_LIST_FAILURE, error });
+  }
+}
+
+export function* getLineStickers() {
+  try {
+    const result = yield call(Api.getAllLineStickers);
+    yield put({
+      type: types.GET_STICKER_RESPONSE,
+      result,
+    });
+  } catch (error) {
+    yield put({
+      type: types.GET_STICKER_RESPONSE,
+      error,
+    });
+  }
+}
+
+function* watchEditTemplate() {
+  const watcher = yield takeLatest(types.EDIT_TEMPLATE_REQUEST, editTemplate);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+function* watchGetTemplateDetails() {
+  const watcher = yield takeLatest(types.GET_TEMPLATE_DETAILS_REQUEST, getTemplateDetails);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+function* watchLineTemplatesList() {
+  const watcher = yield takeLatest(types.GET_LINE_TEMPLATES_LIST_REQUEST, getLineTemplatesList);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+function* watchGetLineStickers() {
+  const watcher = yield takeLatest(types.GET_STICKER_REQUEST, getLineStickers);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+// All sagas to be loaded
+export default [
+  watchCreateTemplate,
+  watchUploadAsset,
+  watchEditTemplate,
+  watchGetTemplateDetails,
+  watchLineTemplatesList,
+  watchGetLineStickers,
+];

package/v2Containers/Line/Container/selectors.js

@@ -0,0 +1,30 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the create state domain
+ */
+const selectLineDomain = () => (state) => state.get('templates');
+const selectLineMessageEditDomain = () => (state) => state.get('lineCreate');
+
+const makeSelectLine = () => createSelector(
+  selectLineDomain(),
+  (substate) => substate && substate.toJS()
+);
+
+const makeSelectCreateLine = () => createSelector(
+  selectLineMessageEditDomain(),
+  (substate) => substate && substate.toJS()
+);
+
+const editLineContentSelector = () => createSelector(
+  selectLineMessageEditDomain(),
+  substate => [{
+    messageContent: substate.getIn(['templateDetails', 'versions', 'base', 'content', 'messages']),
+    messageTitle: substate.getIn(['templateDetails', 'name']),
+    type: substate.getIn(['templateDetails', 'mode']),
+  }]
+);
+
+export {
+  makeSelectLine, makeSelectCreateLine, editLineContentSelector,
+};

package/v2Containers/Line/Container/style.js

@@ -0,0 +1,57 @@
+import { css } from 'styled-components';
+import {
+  CAP_SPACE_44,
+  CAP_SPACE_28,
+  CAP_SPACE_20,
+  CAP_SPACE_12,
+  CAP_SPACE_08,
+  CAP_G07,
+  CAP_G12,
+  CAP_G06,
+  FONT_COLOR_05,
+  CAP_SPACE_16,
+  CAP_SECONDARY,
+  CAP_SPACE_24,
+  CAP_SPACE_32,
+  CAP_WHITE,
+} from '@capillarytech/cap-ui-library/styled/variables';
+
+export default css`
+    .ant-btn.cap-button-v2.add-msg {
+        margin-bottom: ${CAP_SPACE_16};
+        border: 2px solid ${CAP_SECONDARY.base};
+    }
+
+    .ant-spin-container > .ant-row {
+      height: calc(100vh - 160px);
+      overflow-y: auto;
+    }
+
+    .shell-v2 {
+      text-align: right;
+
+      .msgContainer.line-preview {
+        left: 46%;
+      }
+    }
+
+    .action-section {
+      background-color: ${CAP_WHITE};
+      position: fixed;
+      bottom: 0;
+      width: 100%;
+      margin-left: -32px;
+      padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
+  
+      .ant-btn {
+        margin-right: ${CAP_SPACE_16};
+      }
+    }
+
+    .text-template-title,
+    .sticker-template-title,
+    .image-template-title {
+      margin-bottom: ${CAP_SPACE_16};
+    }
+`;
+

package/v2Containers/Line/Create/index.js

@@ -1129,4 +1129,4 @@ export default withCreatives({
   mapStateToProps,
   mapDispatchToProps,
   userAuth: true,
-});
+});

package/v2Containers/Templates/index.js

@@ -29,7 +29,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 { makeSelectLine } from '../Line/Container/selectors';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import messages from './messages';
 import {checkUnicode} from '../../utils/smsCharCountV2';
@@ -39,7 +39,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 * as lineActions from '../Line/Container/actions';
 import CardGrid from '../../v2Components/CardGrid';
 import config from '../../config/app';
 import './_templates.scss';
@@ -81,6 +81,8 @@ const LINE_FILTERS = {
   ALL: 'all',
   TEXT: 'text',
   IMAGE_VIDEO: 'image',
+  STICKER: 'sticker',
+  IMAGE_MAP: 'imagemap'
 };
 
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -636,11 +638,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               messages: [{
                 text = '',
                 originalContentUrl = '',
+                stickerUrl = '',
+                animatedStickerUrl = '',
+                baseUrl = '',
               }] = [{}],
             } = {},
           } = template.versions.base;
           templateData.content = text;
-          templateData.url = originalContentUrl;
+          templateData.url = originalContentUrl || animatedStickerUrl || stickerUrl || (baseUrl ? `${baseUrl}/1040` : '');
           break;
         }
         default:
@@ -1773,26 +1778,39 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         </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>
-                </>
-              );
-            })()
+        channel.toUpperCase() === LINE && 
+          isFullMode
+          ? (
+            <CapRadio.CapRadioGroup className="line-filters" defaultValue={lineFilter} onChange={this.setLineFilter}>
+              {
+                (() => {
+                  const { ALL, TEXT, IMAGE_VIDEO, STICKER, IMAGE_MAP } = 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.Button value={STICKER}><CapLabel type="label2">
+                        <FormattedMessage {...messages.stickerTemplate} />
+                      </CapLabel></CapRadio.Button>
+                      <CapRadio.Button value={IMAGE_MAP}><CapLabel type="label2">
+                        <FormattedMessage {...messages.imageMapTemplate} />
+                      </CapLabel></CapRadio.Button>
+                    </>
+                  );
+                })()
+              }
+            </CapRadio.CapRadioGroup>
+          )
+          : () => {
+            return null;
           }
-        </CapRadio.CapRadioGroup>
       }
       <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
         {isfilterContentVisisble && !isWechatEmbedded && <CapButton

package/v2Containers/Templates/messages.js

@@ -238,6 +238,14 @@ export default defineMessages({
     id: `${scope}.imageTemplate`,
     defaultMessage: `Image`,
   },
+  "stickerTemplate": {
+    id: `${scope}.stickerTemplate`,
+    defaultMessage: `Sticker`,
+  },
+  "imageMapTemplate": {
+    id: `${scope}.imageMapTemplate`,
+    defaultMessage: `Image map`,
+  },
   "selectDefaultButton": {
     id: `${scope}.selectDefaultButton`,
     defaultMessage: `Select`,

package/v2Containers/TemplatesV2/index.js

@@ -22,6 +22,7 @@ import * as actions from './actions';
 import Templates from '../Templates';
 import CallTask from '../CallTask';
 import Facebook from '../Facebook';
+import Line from '../Line/Container';
 import Gallery from '../Assets/Gallery';
 import withStyles from '../../hoc/withStyles';
 import styles, { CapTabStyle } from './TemplatesV2.style';
@@ -149,11 +150,23 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     );
   }
 
+  getLineComponent = () => {
+    return (
+      <Line
+        {...this.props}
+        isCreateFlow
+      />
+    )
+  }
+
   getTemplatesComponent(channel) {
     // const templates = this.props.Templates[`${channel}Templates`];
     let query = {};
     if (!this.props.isFullMode) {
       query = {type: 'embedded', module: 'library'};
+      if (channel === 'line') {
+        return this.getLineComponent();
+      }
     }
     const location = {pathname: `/${channel}`, search: '', query};
     switch (channel) {