@capillarytech/creatives-library 3.0.35 → 3.1.0

package/v2Containers/WeChat/Wrapper/constants.js

@@ -0,0 +1,5 @@
+export const CREATE = "createTemplate";
+export const RICH_MEDIA = "richMedia";
+export const MAP_TEMPLATE = "mapTemplate";
+export const PREVIEW = "preview";
+export const EDIT = "editTemplate";

package/v2Containers/WeChat/Wrapper/index.js

@@ -0,0 +1,194 @@
+/*
+ *
+ * MobilepushWrapper
+ *
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import {CapRadioCard} from '@capillarytech/cap-ui-library';
+import ComponentWithLabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
+import {isEmpty} from 'lodash';
+import styled from 'styled-components';
+// import MobilepushCreate from '../MobilePush/Create';
+import MapTemplate from '../MapTemplates';
+import RichMediaCreate from '../RichmediaTemplates/Create';
+import RichMediaEdit from '../RichmediaTemplates/Edit';
+import WechatRichmediaTemplatePreview from '../../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
+import TemplatePreview from '../../../v2Components/TemplatePreview';
+import WithImage from '../../../assets/WithImage1';
+import WithNoImage from '../../../assets/NoImage1';
+import {
+    CREATE,
+    RICH_MEDIA,
+    MAP_TEMPLATE,
+    PREVIEW,
+    EDIT,
+} from './constants';
+import { getCommonProps } from '../helper';
+import messages from './messages';
+import './_wrapper.scss';
+
+const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
+const CardContainer = styled.div`
+  margin-top: 16px;
+  .component-with-label-label{
+    margin-bottom: unset;
+  }
+  .ant-radio-group{
+    .ant-radio-button-wrapper{
+      &:first-child{
+        margin-left: unset;
+        margin-top: unset;
+      }
+    }
+    
+  }
+`;
+export class Wrapper extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.modes = [
+      {
+        title: <FormattedMessage {...messages.mapTemplate}/>,
+        content: <WithNoImage height="124px" width={"224px"}/>,
+        value: MAP_TEMPLATE,
+      },
+      {
+        title: <FormattedMessage {...messages.richMedia}/>,
+        content: <WithImage height="216px" width={"224px"}/>,
+        value: RICH_MEDIA,
+      },
+    ];
+    this.state = {
+      templateName: "",
+    };
+  }
+  onChange = (e) => {
+    this.props.onWechatTemplateChange( e.target.value );
+  };
+  getCreateContent() {
+    let { templateType } = this.props;
+    const { templateStep, query, selectedWeChatAccount } = this.props;
+    if (templateStep !== "createTemplateContent") {
+      templateType = '';
+    }
+    switch (templateType) {
+      case RICH_MEDIA:
+        return (<RichMediaCreate
+          location={{
+            pathname: '/wechat/richmedia/create',
+            query,
+          }}
+          {...getCommonProps(this.props)}
+        />);
+      case MAP_TEMPLATE:
+        return (<MapTemplate
+          location={{
+            pathname: '/wechat/create',
+            query,
+          }}
+          Templates={{
+            selectedWeChatAccount,
+          }}
+          params={{}}
+          {...getCommonProps(this.props)}
+          />);
+      default:
+        return (<CardContainer>
+          <CapRadioCardWithLabel
+            label={<FormattedMessage {...messages.templateType}/>}
+            panes={this.modes}
+            cardHeight={"286px"}
+            onChange={this.onChange}
+            selected={templateType}
+          />
+        </CardContainer>);
+    }
+  }
+  getPreviewContent() {
+    const { templateType, templateData } = this.props;
+    switch (templateType) {
+      case RICH_MEDIA:
+        return (<WechatRichmediaTemplatePreview
+          contentForSlideBox
+          templateId={templateData._id}
+          path={`/wechat/richmedia/edit/${templateData._id}`}
+          content={templateData.versions.base.mediaList}
+        />);
+      case MAP_TEMPLATE:
+      default:
+        return (<TemplatePreview
+          channel={templateData.type.toLowerCase()}
+          content={templateData.content}
+      />);
+    }
+  }
+  getEditContent() {
+    const { templateType, templateData, query, selectedWeChatAccount } = this.props;
+    const { _id: id } = templateData;
+    switch (templateType) {
+      case RICH_MEDIA:
+        // return "richmedia edit";
+        return (<RichMediaEdit
+          params={{id}}
+          location={{
+            pathname: `/wechat/richmedia/edit/${id}`,
+            query,
+          }}
+          {...getCommonProps(this.props)}
+        />);
+      case MAP_TEMPLATE:
+      default:
+        return (<MapTemplate
+          location={{
+            pathname: `/wechat/edit/${id}`,
+            query,
+          }}
+          Templates={{
+            selectedWeChatAccount,
+          }}
+          params={{
+            id,
+          }}
+          {...getCommonProps(this.props)}
+          />);
+    }
+  }
+  render() {
+    const {mode} = this.props;
+    // const {templateName} = this.state;
+    return (
+      <div>
+        {
+            mode === CREATE && this.getCreateContent()
+        }
+        {
+            mode === PREVIEW && this.getPreviewContent()
+        }
+        {
+            mode === EDIT && this.getEditContent()
+        }
+      </div>
+    );
+  }
+}
+
+Wrapper.propTypes = {
+  mode: PropTypes.string,
+  templateType: PropTypes.string,
+  templateStep: PropTypes.string,
+  templateData: PropTypes.object,
+  onWechatTemplateChange: PropTypes.func,
+  query: PropTypes.object,
+  selectedWeChatAccount: PropTypes.object,
+};
+
+function mapDispatchToProps(dispatch) {
+  return {
+    dispatch,
+  };
+}
+
+export default connect(null, mapDispatchToProps)(Wrapper);

package/v2Containers/WeChat/Wrapper/messages.js

@@ -0,0 +1,21 @@
+/*
+ * Wrapper Messages
+ *
+ * This contains all the text for the Wechat Wrapper component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  richMedia: {
+    id: 'app.containers.WechatWrapper.richMedia',
+    defaultMessage: 'Richmedia template',
+  },
+  mapTemplate: {
+    id: 'app.containers.WechatWrapper.mapTemplate',
+    defaultMessage: 'Map template',
+  },
+  templateType: {
+    id: 'app.containers.WechatWrapper.templateType',
+    defaultMessage: 'Which type of template you want to create?',
+  },
+});

package/v2Containers/WeChat/helper.js

@@ -0,0 +1,12 @@
+import pick from 'lodash/pick';
+
+export function getCommonProps(props) {
+  return pick(props, [
+    'getFormData',
+    'isGetFormData',
+    'isFullMode',
+    'onValidationFail',
+    'weChatMaptemplateStep',
+    'onWeChatMaptemplateStepChange',
+  ]);
+}

package/containers/Cap/messages.js

@@ -1,75 +0,0 @@
-import { defineMessages } from 'react-intl';
-export default defineMessages({
-  "sms": {
-    id: 'reon.components.Cap.sms',
-    defaultMessage: 'SMS',
-  },
-  "wechat": {
-    id: 'reon.components.Cap.wechat',
-    defaultMessage: 'WeChat',
-  },
-  "gallery": {
-    id: 'reon.components.Cap.gallery',
-    defaultMessage: 'Gallery',
-  },
-  "creativesDashboard": {
-    id: 'reon.components.Cap.creativesDashboard',
-    defaultMessage: 'Creatives',
-  },
-  "creatives": {
-    id: 'reon.components.Cap.creatives',
-    defaultMessage: 'Creatives',
-  },
-  "campaigns": {
-    id: 'reon.components.Cap.campaigns',
-    defaultMessage: 'Campaigns',
-  },
-  "loyalty": {
-    id: 'reon.components.Cap.loyalty',
-    defaultMessage: 'Loyalty',
-  },
-  "member care": {
-    id: 'reon.components.Cap.memberCare',
-    defaultMessage: 'Member Care',
-  },
-  "workbench": {
-    id: 'reon.components.Cap.Workbench',
-    defaultMessage: 'WorkBench',
-  },
-  "store care": {
-    id: 'reon.components.Cap.storeCare',
-    defaultMessage: 'Store Care',
-  },
-  "store performance": {
-    id: 'reon.components.Cap.storePerformance',
-    defaultMessage: 'Store Performance',
-  },
-  "email": {
-    id: 'reon.components.Cap.email',
-    defaultMessage: 'Email',
-  },
-  "ebill": {
-    id: 'reon.components.Cap.ebill',
-    defaultMessage: 'Ebill',
-  },
-  "campaignsDashboard": {
-    id: 'reon.components.campaignsDashboard',
-    defaultMessage: 'Campaigns',
-  },
-  "campaignsHome": {
-    id: 'reon.components.campaignsHome',
-    defaultMessage: "Campaigns Home",
-  },
-  "line": {
-    id: 'reon.components.Cap.line',
-    defaultMessage: 'Line',
-  },
-  "mobilepush": {
-    id: 'reon.components.Cap.mobilepush',
-    defaultMessage: 'Mobile Push',
-  },
-  "appName": {
-    id: 'reon.components.Cap.appName',
-    defaultMessage: 'App Name',
-  },
-});

package/v2Containers/Cap/messages.js

@@ -1,75 +0,0 @@
-import { defineMessages } from 'react-intl';
-export default defineMessages({
-  "sms": {
-    id: 'creatives.containersV2.Cap.sms',
-    defaultMessage: 'SMS',
-  },
-  "wechat": {
-    id: 'creatives.containersV2.Cap.wechat',
-    defaultMessage: 'WeChat',
-  },
-  "gallery": {
-    id: 'creatives.containersV2.Cap.gallery',
-    defaultMessage: 'Gallery',
-  },
-  "creativesDashboard": {
-    id: 'creatives.containersV2.Cap.creativesDashboard',
-    defaultMessage: 'Creatives',
-  },
-  "creatives": {
-    id: 'creatives.containersV2.Cap.creatives',
-    defaultMessage: 'Creatives',
-  },
-  "campaigns": {
-    id: 'creatives.containersV2.Cap.campaigns',
-    defaultMessage: 'Campaigns',
-  },
-  "loyalty": {
-    id: 'creatives.containersV2.Cap.loyalty',
-    defaultMessage: 'Loyalty',
-  },
-  "member care": {
-    id: 'creatives.containersV2.Cap.memberCare',
-    defaultMessage: 'Member Care',
-  },
-  "workbench": {
-    id: 'creatives.containersV2.Cap.Workbench',
-    defaultMessage: 'WorkBench',
-  },
-  "store care": {
-    id: 'creatives.containersV2.Cap.storeCare',
-    defaultMessage: 'Store Care',
-  },
-  "store performance": {
-    id: 'creatives.containersV2.Cap.storePerformance',
-    defaultMessage: 'Store Performance',
-  },
-  "email": {
-    id: 'creatives.containersV2.Cap.email',
-    defaultMessage: 'Email',
-  },
-  "ebill": {
-    id: 'creatives.containersV2.Cap.ebill',
-    defaultMessage: 'Ebill',
-  },
-  "campaignsDashboard": {
-    id: 'creatives.containersV2.campaignsDashboard',
-    defaultMessage: 'Campaigns',
-  },
-  "campaignsHome": {
-    id: 'creatives.containersV2.campaignsHome',
-    defaultMessage: "Campaigns Home",
-  },
-  "appName": {
-    id: 'creatives.containersV2.appName',
-    defaultMessage: "App Name",
-  },
-  "audience": {
-    id: 'creatives.containersV2.audience',
-    defaultMessage: 'Audience',
-  },
-  "incentive": {
-    id: 'creatives.containersV2.incentive',
-    defaultMessage: 'Incentive',
-  },
-});