@capillarytech/creatives-library 3.0.35 → 3.1.0

package/v2Containers/WeChat/RichmediaTemplates/Create/richmediaschema.js

@@ -10,37 +10,15 @@ export default {
               {
                 rowClassName: "wechat-richmedia-row",
                 cols: [
-                  {
-                    id: "title-label",
-                    metaType: "label",
-                    value: "Title*",
-                    primitive: true,
-                    dynamicTab: false,
-                    type: "div",
-                    width: 4,
-                    style: {
-                      backgroundColor: "white",
-                      textAlign: "left",
-                      color: "#333333",
-                      lineHeight: "24px",
-                      fontSize: "14px",
-                      fontFamily: "open-sans",
-                      fontStyle: "normal",
-                    },
-                    onlyDisplay: true,
-                    colStyle: {
-                      flex: 1,
-                    },
-                  },
                   {
                     id: "title-value",
                     label: "Title",
+                    inductiveText: "Write a brief headline to draw customer's attention",
                     type: "input",
                     metaType: "text",
                     datatype: "string",
                     required: true,
-                    width: 16,
-                    placeholder: "Please input title",
+                    width: 24,
                     fluid: true,
                     styling: "semantic",
                     order: 1,
@@ -51,42 +29,21 @@ export default {
                       "onChange",
                     ],
                     errorMessage: "This field is required!",
+                    size: "large",
                   }],
               },
               {
                 rowClassName: "wechat-richmedia-row",
                 cols: [
-                  {
-                    id: "author-label",
-                    metaType: "label",
-                    value: "Author",
-                    primitive: true,
-                    dynamicTab: false,
-                    type: "div",
-                    width: 4,
-                    style: {
-                      backgroundColor: "white",
-                      textAlign: "left",
-                      color: "#333333",
-                      lineHeight: "24px",
-                      fontSize: "14px",
-                      fontFamily: "open-sans",
-                      fontStyle: "normal",
-                    },
-                    onlyDisplay: true,
-                    colStyle: {
-                      flex: 1,
-                    },
-                  },
                   {
                     id: "author-value",
                     label: "Author",
+                    inductiveText: "Brand/name that your customer will recognise",
                     type: "input",
                     metaType: "text",
                     datatype: "string",
                     required: true,
-                    width: 16,
-                    placeholder: "Please input author",
+                    width: 24,
                     fluid: true,
                     styling: "semantic",
                     order: 1,
@@ -96,38 +53,69 @@ export default {
                       "onChange",
                     ],
                     errorMessage: "This field is required!",
+                    size: "large",
                   }],
               },
               {
-                rowClassName: "wechat-richmedia-row",
                 cols: [
                   {
-                    id: "image-label",
+                    id: "upload-image-label",
                     metaType: "label",
-                    value: "Cover image*",
+                    value: "Cover image",
                     primitive: true,
                     dynamicTab: false,
                     type: "div",
                     width: 4,
+                    onlyDisplay: true,
                     style: {
-                      backgroundColor: "white",
-                      textAlign: "left",
-                      color: "#333333",
-                      lineHeight: "24px",
+                      color: "#091e42",
+                      lineHeight: "20px",
                       fontSize: "14px",
-                      fontFamily: "open-sans",
-                      fontStyle: "normal",
+                      fontWeight: "500",
                     },
-                    offset: 0,
+                  },
+                  {
+                    id: "upload-image-label-resolution",
+                    metaType: "label",
+                    value: "Resolution 360 x 200",
+                    primitive: true,
+                    dynamicTab: false,
+                    type: "div",
+                    width: 11,
                     onlyDisplay: true,
-                    colStyle: {
-                      flex: 1,
+                    style: {
+                      color: "#5e6c84",
+                      lineHeight: "20px",
+                      fontSize: "12px",
                     },
-                  },
+                  }],
+              },
+              {
+                cols: [
+                  {
+                    id: "upload-image-inductive-text",
+                    metaType: "label",
+                    value: "The relevant image that complements title.",
+                    primitive: true,
+                    dynamicTab: false,
+                    type: "div",
+                    width: 24,
+                    onlyDisplay: true,
+                    style: {
+                      color: "#5e6c84",
+                      lineHeight: "16px",
+                      fontSize: "12px",
+                      marginBottom: "8px",
+                    },
+                  }],
+              },
+              {
+                rowClassName: "wechat-richmedia-row",
+                cols: [
                   {
                     id: "image-value",
                     label: "Upload Image",
-                    type: "upload",
+                    type: "capDragger",
                     width: 4,
                     supportedExtensions: ".bmp, .png, .jpeg, .gif .jpg",
                     metaType: "text",
@@ -142,6 +130,9 @@ export default {
                     supportedEvents: [
                       "onUpload",
                     ],
+                    componentProps: {
+                      showUploadList: false,
+                    },
                   }],
               },
               {
@@ -150,37 +141,15 @@ export default {
                   'margin-bottom': "0",
                 },
                 cols: [
-                  {
-                    id: "cover-abstract-label",
-                    metaType: "label",
-                    value: "Cover abstract",
-                    primitive: true,
-                    dynamicTab: false,
-                    type: "div",
-                    width: 4,
-                    style: {
-                      backgroundColor: "white",
-                      textAlign: "left",
-                      color: "#333333",
-                      lineHeight: "24px",
-                      fontSize: "14px",
-                      fontFamily: "open-sans",
-                      fontStyle: "normal",
-                    },
-                    onlyDisplay: true,
-                    colStyle: {
-                      flex: 1,
-                    },
-                  },
                   {
                     id: "cover-abstract-value",
                     label: "Cover abstract",
-                    type: "textarea",
+                    inductiveText: "A short description help customers learn more",
+                    type: "input",
                     metaType: "text",
                     datatype: "string",
                     required: true,
-                    width: 16,
-                    placeholder: "Please input cover abstract",
+                    width: 24,
                     fluid: false,
                     styling: "semantic",
                     order: 2,
@@ -195,109 +164,7 @@ export default {
                       maxRows: 18,
                       minRows: 3,
                     },
-                    style: {
-                      backgroundColor: "white",
-                      textAlign: "left",
-                      color: "#333333",
-                      lineHeight: "24px",
-                      fontSize: "14px",
-                      fontFamily: "proxima-nova",
-                      fontStyle: "normal",
-                    },
-                  }],
-              },
-              {
-                rowClassName: "wechat-richmedia-row",
-                rowStyle: {
-                  display: "inline-flex",
-                },
-                cols: [
-                  {
-                    id: "show-cover-pic-value",
-                    supportedEvents: [
-                      "onChange",
-                    ],
-                    type: "checkbox",
-                    metaType: "text",
-                    datatype: "boolean",
-                    required: true,
-                    fluid: true,
-                    styling: "semantic",
-                    order: 1,
-                    offset: 4,
-                    value: 0,
-                    onlyDisplay: false,
-                    disabled: false,
-                    errorMessage: "Please check if you intend to use unicode characters.",
-                    customComponent: false,
-                  },
-                  {
-                    id: "show-cover-pic-label",
-                    metaType: "label",
-                    value: "Whether to display the graphic cover on the graphic details page",
-                    primitive: true,
-                    dynamicTab: false,
-                    type: "div",
-                    style: {
-                      backgroundColor: "white",
-                      textAlign: "left",
-                      color: "#333333",
-                      lineHeight: "24px",
-                      fontSize: "14px",
-                      fontFamily: "open-sans",
-                      fontStyle: "normal",
-                    },
-                    offset: 0,
-                    onlyDisplay: true,
-                    colStyle: {
-                      flex: 1,
-                    },
-                  },
-                ],
-              },
-              {
-                rowClassName: "wechat-richmedia-row",
-                cols: [
-                  {
-                    id: "source-link-label",
-                    metaType: "label",
-                    value: "Source link*",
-                    primitive: true,
-                    dynamicTab: false,
-                    type: "div",
-                    width: 4,
-                    style: {
-                      backgroundColor: "white",
-                      textAlign: "left",
-                      color: "#333333",
-                      lineHeight: "24px",
-                      fontSize: "14px",
-                      fontFamily: "open-sans",
-                      fontStyle: "normal",
-                    },
-                    onlyDisplay: true,
-                    colStyle: {
-                      flex: 1,
-                    },
-                  },
-                  {
-                    id: "source-link-value",
-                    label: "Cover abstract",
-                    type: "input",
-                    metaType: "text",
-                    datatype: "string",
-                    required: true,
-                    width: 16,
-                    placeholder: "Example: http://example.com",
-                    fluid: true,
-                    styling: "semantic",
-                    order: 1,
-                    disabled: false,
-                    customComponent: false,
-                    supportedEvents: [
-                      "onChange",
-                    ],
-                    errorMessage: "This field is required!",
+                    size: "large",
                   }],
               }],
           },
@@ -307,35 +174,6 @@ export default {
               display: "inline-flex",
             },
             childSections: [
-              {
-                type: "multicols",
-                inputFields: [
-                  {
-                    cols: [
-                      {
-                        id: "content-label",
-                        metaType: "label",
-                        value: "Content*",
-                        primitive: true,
-                        dynamicTab: false,
-                        type: "div",
-                        width: 4,
-                        style: {
-                          backgroundColor: "white",
-                          textAlign: "left",
-                          color: "#333333",
-                          lineHeight: "24px",
-                          fontSize: "14px",
-                          fontFamily: "open-sans",
-                          fontStyle: "normal",
-                          width: "8.3rem",
-                        },
-                        onlyDisplay: true,
-                      },
-                    ],
-                  },
-                ],
-              },
               {
                 type: "parent",
                 childSections: [
@@ -345,29 +183,26 @@ export default {
                       {
                         cols: [
                           {
-                            id: "content-label-2",
+                            id: "content-label",
                             metaType: "label",
-                            value: "to be displayed on the graphic details page",
+                            value: "Article content",
                             primitive: true,
                             dynamicTab: false,
                             type: "div",
-                            width: 11,
+                            width: 20,
+                            onlyDisplay: true,
                             style: {
-                              backgroundColor: "white",
-                              textAlign: "left",
-                              color: "#333333",
-                              lineHeight: "24px",
+                              color: "#091e42",
+                              lineHeight: "20px",
                               fontSize: "14px",
-                              fontFamily: "open-sans",
-                              fontStyle: "normal",
+                              fontWeight: "500",
                             },
-                            onlyDisplay: true,
                           },
                           {
                             id: "content-image-value",
                             label: "Insert Image",
                             type: "upload",
-                            width: 11,
+                            width: 4,
                             supportedExtensions: ".bmp, .png, .jpeg, .gif .jpg",
                             metaType: "text",
                             datatype: "string",
@@ -385,6 +220,24 @@ export default {
                               "margin-bottom": "5px",
                             },
                           },
+                          {
+                            id: "content-inductive-text",
+                            metaType: "label",
+                            value: "A short description help customers learn more",
+                            primitive: true,
+                            dynamicTab: false,
+                            type: "div",
+                            width: 24,
+                            onlyDisplay: true,
+                            style: {
+                              color: "#5e6c84",
+                              lineHeight: "16px",
+                              fontSize: "12px",
+                              marginBottom: "8px",
+                              position: "absolute",
+                              top: "-24px",
+                            },
+                          },
                         ],
                       },
                     ],
@@ -403,7 +256,6 @@ export default {
                             datatype: "string",
                             required: true,
                             errorMessage: "This field is required!",
-                            placeholder: "Please input content",
                             fluid: false,
                             styling: "semantic",
                             onlyDisplay: false,
@@ -445,6 +297,29 @@ export default {
             inputFields: [
               {
                 rowClassName: "wechat-richmedia-row",
+                cols: [
+                  {
+                    id: "source-link-value",
+                    label: "Read more link",
+                    inductiveText: "Link to help customers discover more about the brand.",
+                    type: "input",
+                    metaType: "text",
+                    datatype: "string",
+                    required: true,
+                    width: 24,
+                    fluid: true,
+                    styling: "semantic",
+                    order: 1,
+                    disabled: false,
+                    customComponent: false,
+                    supportedEvents: [
+                      "onChange",
+                    ],
+                    size: "large",
+                    errorMessage: "This field is required!",
+                  }],
+              },
+              {
                 cols: [
                   {
                     id: "post-comments-label",
@@ -453,24 +328,16 @@ export default {
                     primitive: true,
                     dynamicTab: false,
                     type: "div",
-                    width: 4,
-                    style: {
-                      backgroundColor: "white",
-                      textAlign: "left",
-                      color: "#333333",
-                      lineHeight: "24px",
-                      fontSize: "14px",
-                      fontFamily: "open-sans",
-                      fontStyle: "normal",
-                    },
-                    offset: 0,
+                    width: 11,
                     onlyDisplay: true,
-                    colStyle: {
-                      flex: 1,
-                    },
-                  },
+                  }],
+              },
+              {
+                rowClassName: "wechat-richmedia-row",
+                cols: [
                   {
                     id: "post-comments-value",
+                    label: "Who can post comments on this content",
                     type: "radioGroup",
                     metaType: "text",
                     datatype: "string",

package/v2Containers/WeChat/RichmediaTemplates/Create/sagas.js

@@ -18,13 +18,16 @@ export function* uploadAsset({file, assetType, fileParams, mode, wechatParams, c
     yield put({ type: types.UPLOAD_ASSET_FAILURE, error });
   }
 }
-export function* saveTemplate(template) {
+export function* saveTemplate({template, callback}) {
   try {
     let errorMsg;
-    const result = yield call(Api.createWeChatTemplate, template);
+    const result = yield call(Api.createWeChatTemplate, {template});
     if (!result.success || result.status.code === 500) {
       errorMsg = result.message;
     }
+    if (callback) {
+      yield call(callback, result.response);
+    }
     yield put({ type: types.SAVE_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg});
   } catch (error) {
     yield put({ type: types.SAVE_TEMPLATE_FAILURE, error });

package/v2Containers/WeChat/RichmediaTemplates/Create/selectors.js

@@ -3,7 +3,7 @@ import { createSelector } from 'reselect';
 /**
  * Direct selector to the create state domain
  */
-const selectCreateDomain = () => (state) => state.get('create');
+const selectCreateDomain = () => (state) => state.get('weChatRichmediaCreate');
 const selectTemplatesDomain = (state) => state.get('templates');
 /**
  * Other specific selectors

package/v2Containers/WeChat/RichmediaTemplates/Edit/actions.js

@@ -12,9 +12,9 @@ export function defaultAction() {
   };
 }
 
-export function getTemplateDetails(id, channel) {
+export function getTemplateDetails(id, channel, callback) {
   console.log('getting template', id);
   return {
-    type: types.GET_TEMPLATE_DETAILS_REQUEST, id, channel,
+    type: types.GET_TEMPLATE_DETAILS_REQUEST, id, channel, callback,
   };
 }

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 /*
  *
  * Edit
@@ -10,10 +11,12 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import _ from 'lodash';
+import { CapSpin } from '@capillarytech/cap-ui-library';
 import { createStructuredSelector } from 'reselect';
 import makeSelectEdit, { makeSelectTemplates } from './selectors';
 import * as actions from './actions';
 import Create from '../Create';
+import { getCommonProps } from '../../helper';
 
 export class Edit extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -24,7 +27,7 @@ export class Edit extends React.PureComponent { // eslint-disable-line react/pre
     };
     this.setTemplateData = this.setTemplateData.bind(this);
   }
-  componentWillMount = () => {
+  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;
@@ -34,14 +37,11 @@ export class Edit extends React.PureComponent { // eslint-disable-line react/pre
       });
     }
   }
-  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);
+  componentDidMount() {
+    this.props.actions.getTemplateDetails(this.props.params.id, "wechat", (templateDetails) => {
+      const templateData = this.setTemplateData(templateDetails);
       this.setState({templateData});
-    }
+    });
   }
   setTemplateData = (templateDetails) => {
     const templateData = {};
@@ -63,7 +63,7 @@ export class Edit extends React.PureComponent { // eslint-disable-line react/pre
         };
         contentId += 1;
       });
-      if (this.props.location.query.type === "embedded" && this.props.location.query.module === "outbound") {
+      if (this.props.location.query.type === "embedded") {
         templateData.templateDetails = templateDetails;
       }
     }
@@ -83,12 +83,13 @@ export class Edit extends React.PureComponent { // eslint-disable-line react/pre
             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}
+            {...getCommonProps(this.props)}
           />
         </div>
       );
     }
     return (
-      <div></div>
+      <CapSpin spinning></CapSpin>
     );
   }
 }

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

@@ -7,7 +7,7 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'creatives.containersV2.Edit.header',
+    id: 'app.containers.Edit.header',
     defaultMessage: 'This is Edit container !',
   },
 });

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

@@ -10,6 +10,7 @@ import * as types from './constants';
 const initialState = fromJS({});
 
 function editReducer(state = initialState, action) {
+  console.log("inside editReducer", action)
   switch (action.type) {
     case types.DEFAULT_ACTION:
       return state;

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

@@ -7,14 +7,16 @@ import * as types from './constants';
 export function* defaultSaga() {
   // See example in v2Containers/HomePage/sagas.js
 }
-export function* getTemplateDetails({id, channel}) {
+export function* getTemplateDetails({id, channel, callback}) {
   try {
     const params = {
       id, channel,
     };
     console.log('saga get Template details', id);
     const result = yield call(Api.getTemplateDetails, params);
-    // const sidebar = result.response.sidebar;
+    if (callback) {
+      yield call(callback, result.response);
+    }
     yield put({ type: types.GET_TEMPLATE_DETAILS_SUCCESS, data: result.response });
   } catch (error) {
     yield put({ type: types.GET_TEMPLATE_DETAILS_FAILURE, error });

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

@@ -3,7 +3,7 @@ import { createSelector } from 'reselect';
 /**
  * Direct selector to the edit state domain
  */
-const selectEditDomain = () => (state) => state.get('edit');
+const selectEditDomain = () => (state) => state.get('weChatRichmediaEdit');
 const selectTemplatesDomain = (state) => state.get('templates');
 
 /**

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

@@ -7,15 +7,7 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'creatives.containersV2.View.header',
+    id: 'app.containers.View.header',
     defaultMessage: 'This is View container !',
   },
-  view: {
-    id: 'creatives.containersV2.View.view',
-    defaultMessage: 'View',
-  },
-  descriptionView: {
-    id: 'creatives.containersV2.View.descriptionView',
-    defaultMessage: 'Description of View',
-  },
 });