@capillarytech/creatives-library 8.0.136-alpha.4 → 8.0.136-beta.3

package/containers/WeChat/RichmediaTemplates/Edit/index.js

@@ -0,0 +1,136 @@
+/*
+ *
+ * Edit
+ *
+ */
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators, compose } from 'redux';
+import _ from 'lodash';
+import { createStructuredSelector } from 'reselect';
+import makeSelectEdit, { makeSelectTemplates } from './selectors';
+import * as actions from './actions';
+import Create from '../Create';
+import injectSaga from '../../../../utils/injectSaga';
+import injectReducer from '../../../../utils/injectReducer';
+import reducer from './reducer';
+import createReducer from '../Create/reducer';
+import { richMediaTemplatesEditSaga } from './sagas';
+import { richMediaTemplatesSaga } from '../Create/sagas';
+import { createQueryString } from '../../../../utils/common';
+
+export class Edit extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.state = {
+      totalContentBlocks: 0,
+      templateData: {},
+    };
+    this.setTemplateData = this.setTemplateData.bind(this);
+  }
+  componentWillMount = () => {
+    if (_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
+      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+      const type = this.props.location.query.type;
+      this.props.router.push({
+        pathname: `/wechat`,
+        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
+      });
+    }
+  }
+  componentDidMount = () => {
+    this.props.actions.getTemplateDetails(this.props.params.id, "wechat");
+  }
+  componentWillReceiveProps = (nextProps) => {
+    if (nextProps.Edit.templateDetails && !_.isEmpty(nextProps.Edit.templateDetails) && !_.isEqual(this.props.Edit.templateDetails, nextProps.Edit.templateDetails)) {
+      const templateData = this.setTemplateData(nextProps.Edit.templateDetails);
+      this.setState({templateData});
+    }
+  }
+  setTemplateData = (templateDetails) => {
+    const templateData = {};
+    let contentId = 0;
+    if (!_.isEmpty(templateDetails)) {
+      _.forEach(templateDetails.versions.base.mediaList, (content) => {
+        const formData = {};
+        formData['title-value'] = content.title;
+        formData['author-value'] = content.author;
+        formData['cover-abstract-value'] = content.digest;
+        formData['content-value'] = content.content;
+        formData['source-link-value'] = content.content_source_url;
+        formData['post-comments-value'] = content.post_comments_scope;
+        formData['show-cover-pic-value'] = content.show_cover_pic;
+        templateData[contentId] = {
+          formData,
+          imageUrl: content.image_url,
+          mediaId: content.thumb_media_id,
+        };
+        contentId += 1;
+      });
+      if (this.props.location.query.type === "embedded" && this.props.location.query.module === "outbound") {
+        templateData.templateDetails = templateDetails;
+      }
+    }
+    this.setState({totalContentBlocks: contentId});
+    return templateData;
+  }
+  render() {
+    if (this.state.templateData && !_.isEmpty(this.state.templateData) && this.state.totalContentBlocks > 0) {
+      return (
+        <div className="richmedia-container">
+          <Create
+            templateData={this.state.templateData}
+            mode="EDIT"
+            totalContentBlocks={this.state.totalContentBlocks}
+            templateName={this.props.Edit && this.props.Edit.templateDetails && this.props.Edit.templateDetails.name ? this.props.Edit.templateDetails.name : ""}
+            mediaId={this.props.Edit && this.props.Edit.templateDetails && this.props.Edit.templateDetails.versions && this.props.Edit.templateDetails.versions.base && this.props.Edit.templateDetails.versions.base.mediaId ? this.props.Edit.templateDetails.versions.base.mediaId : ""}
+            templateId={this.props.Edit && this.props.Edit.templateDetails && this.props.Edit.templateDetails._id ? this.props.Edit.templateDetails._id : ""}
+            router={this.props.router}
+            location={this.props.location}
+          />
+        </div>
+      );
+    }
+    return (
+      <div></div>
+    );
+  }
+}
+
+Edit.propTypes = {
+  router: PropTypes.object,
+  location: PropTypes.object,
+  actions: PropTypes.object,
+  params: PropTypes.object,
+  Edit: PropTypes.object,
+  Templates: PropTypes.object,
+};
+
+const mapStateToProps = createStructuredSelector({
+  Edit: makeSelectEdit(),
+  Templates: makeSelectTemplates(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+  };
+}
+
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+const withReducer = injectReducer({ key: 'edit', reducer });
+const withCreateReducer = injectReducer({ key: 'create', reducer: createReducer });
+const withSaga = injectSaga({ key: 'edit', saga: richMediaTemplatesEditSaga });
+const withCreateSaga = injectSaga({ key: 'create', saga: richMediaTemplatesSaga });
+
+export default compose(
+  withReducer,
+  withCreateReducer,
+  withSaga,
+  withCreateSaga,
+  withConnect,
+)(Edit);
+

package/containers/WeChat/RichmediaTemplates/Edit/messages.js

@@ -0,0 +1,13 @@
+/*
+ * Edit Messages
+ *
+ * This contains all the text for the Edit component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'creatives.containers.Edit.header',
+    defaultMessage: 'This is Edit container !',
+  },
+});

package/containers/WeChat/RichmediaTemplates/Edit/reducer.js

@@ -0,0 +1,28 @@
+/*
+ *
+ * Edit reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import * as types from './constants';
+
+const initialState = fromJS({});
+
+function editReducer(state = initialState, action) {
+  switch (action.type) {
+    case types.DEFAULT_ACTION:
+      return state;
+    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);
+    default:
+      return state;
+  }
+}
+
+export default editReducer;

package/containers/WeChat/RichmediaTemplates/Edit/sagas.js

@@ -0,0 +1,36 @@
+import { call, put, takeLatest, all } from 'redux-saga/effects';
+import * as Api from '../../../../services/api';
+import * as types from './constants';
+
+// Individual exports for testing
+export function* defaultSaga() {
+  // See example in containers/HomePage/sagas.js
+}
+export function* getTemplateDetails({id, channel}) {
+  try {
+    const params = {
+      id, channel,
+    };
+    
+    const result = yield call(Api.getTemplateDetails, params);
+    // const sidebar = result.response.sidebar;
+    yield put({ type: types.GET_TEMPLATE_DETAILS_SUCCESS, data: result.response });
+  } catch (error) {
+    yield put({ type: types.GET_TEMPLATE_DETAILS_FAILURE, error });
+  }
+}
+function* watchGetTemplateDetails() {
+  yield takeLatest(types.GET_TEMPLATE_DETAILS_REQUEST, getTemplateDetails);
+}
+// All sagas to be loaded
+export default [
+  defaultSaga,
+  watchGetTemplateDetails,
+];
+
+export function* richMediaTemplatesEditSaga() {
+  yield all([
+    defaultSaga(),
+    watchGetTemplateDetails(),
+  ]);
+}

package/containers/WeChat/RichmediaTemplates/Edit/selectors.js

@@ -0,0 +1,30 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the edit state domain
+ */
+const selectEditDomain = () => (state) => state.get('edit');
+const selectTemplatesDomain = (state) => state.get('templates');
+
+/**
+ * Other specific selectors
+ */
+const makeSelectTemplates = () => createSelector(
+  selectTemplatesDomain,
+  (globalState) => globalState.toJS()
+);
+
+/**
+ * Default selector used by Edit
+ */
+
+const makeSelectEdit = () => createSelector(
+  selectEditDomain(),
+  (substate) => substate.toJS()
+);
+
+export default makeSelectEdit;
+export {
+  selectEditDomain,
+  makeSelectTemplates,
+};

package/containers/WeChat/RichmediaTemplates/Edit/test/saga.test.js

@@ -0,0 +1,12 @@
+
+import { expectSaga } from "redux-saga-test-plan";
+
+import {
+  richMediaTemplatesEditSaga,
+} from "../sagas";
+
+describe("richMediaTemplatesEditSaga Combined", () => {
+    it.concurrent("should initialize all richMediaTemplatesEditSaga-related watcher sagas without error", () => {
+      return expectSaga(richMediaTemplatesEditSaga).run();
+    });
+  });

package/containers/WeChat/RichmediaTemplates/View/actions.js

@@ -0,0 +1,15 @@
+/*
+ *
+ * View actions
+ *
+ */
+
+import {
+  DEFAULT_ACTION,
+} from './constants';
+
+export function defaultAction() {
+  return {
+    type: DEFAULT_ACTION,
+  };
+}

package/containers/WeChat/RichmediaTemplates/View/constants.js

@@ -0,0 +1,7 @@
+/*
+ *
+ * View constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/View/DEFAULT_ACTION';

package/containers/WeChat/RichmediaTemplates/View/index.js

@@ -0,0 +1,47 @@
+/*
+ *
+ * View
+ *
+ */
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { connect } from 'react-redux';
+import Helmet from 'react-helmet';
+import { FormattedMessage } from 'react-intl';
+import { createStructuredSelector } from 'reselect';
+import makeSelectView from './selectors';
+import messages from './messages';
+
+export class View extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    return (
+      <div>
+        <Helmet
+          title={<FormattedMessage {...messages.view} />}
+          meta={[
+            { name: 'description', content: <FormattedMessage {...messages.descriptionView} /> },
+          ]}
+        />
+        <FormattedMessage {...messages.header} />
+      </div>
+    );
+  }
+}
+
+View.propTypes = {
+  dispatch: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = createStructuredSelector({
+  View: makeSelectView(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    dispatch,
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(View);

package/containers/WeChat/RichmediaTemplates/View/messages.js

@@ -0,0 +1,21 @@
+/*
+ * View Messages
+ *
+ * This contains all the text for the View component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'creatives.containers.View.header',
+    defaultMessage: 'This is View container !',
+  },
+  view: {
+    id: 'creatives.containers.View.view',
+    defaultMessage: 'View',
+  },
+  descriptionView: {
+    id: 'creatives.containers.View.descriptionView',
+    defaultMessage: 'Description of View',
+  },
+});

package/containers/WeChat/RichmediaTemplates/View/reducer.js

@@ -0,0 +1,23 @@
+/*
+ *
+ * View reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import {
+  DEFAULT_ACTION,
+} from './constants';
+
+const initialState = fromJS({});
+
+function viewReducer(state = initialState, action) {
+  switch (action.type) {
+    case DEFAULT_ACTION:
+      return state;
+    default:
+      return state;
+  }
+}
+
+export default viewReducer;

package/containers/WeChat/RichmediaTemplates/View/sagas.js

@@ -0,0 +1,11 @@
+// import { take, call, put, select } from 'redux-saga/effects';
+
+// Individual exports for testing
+export function* defaultSaga() {
+  // See example in containers/HomePage/sagas.js
+}
+
+// All sagas to be loaded
+export default [
+  defaultSaga,
+];

package/containers/WeChat/RichmediaTemplates/View/selectors.js

@@ -0,0 +1,25 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the view state domain
+ */
+const selectViewDomain = () => (state) => state.get('view');
+
+/**
+ * Other specific selectors
+ */
+
+
+/**
+ * Default selector used by View
+ */
+
+const makeSelectView = () => createSelector(
+  selectViewDomain(),
+  (substate) => substate.toJS()
+);
+
+export default makeSelectView;
+export {
+  selectViewDomain,
+};

package/index.js

@@ -138,10 +138,8 @@ const FTPContainer = {FTP, FTPReducer, FTPSagas};
 export {default as TagList} from './v2Containers/TagList/index';
 export {default as TagListSaga} from './v2Containers/TagList/sagas';
 export {default as TagListReducer} from './v2Containers/TagList/reducer';
-
-export {default as TemplatePreview} from './v2Components/TemplatePreview';
-export {default as EmailPreview} from './v2Components/EmailPreview';
-
+export {default as TemplatePreview} from './components/TemplatePreview';
+export {default as EmailPreview} from './components/EmailPreview';
 export {default as EmailPreviewV2} from './v2Components/EmailPreviewV2';
 export {default as CallTaskPreview} from './v2Components/CallTaskPreview';
 export {default as EmailMobilePreview} from './v2Components/EmailMobilePreview';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.136-alpha.4",
+  "version": "8.0.136-beta.3",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",