@capillarytech/creatives-library 3.9.21 → 3.10.0

package/v2Components/MobilePushPreviewV2/index.js

@@ -7,10 +7,16 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import { CapTab, CapIcon } from '@capillarytech/cap-ui-library';
+import { CapButton } from '@capillarytech/cap-ui-library';
+// import styled from 'styled-components';
+
+import { FormattedMessage } from 'react-intl';
+import { Button } from 'antd';
 import { get, map, isEmpty} from 'lodash';
 import TemplatePreview from '../TemplatePreview';
 import '../PreviewSideBar/_previewsidebar.scss';
+import messages from './messages';
+const ButtonGroup = Button.Group;
 
 class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -18,11 +24,8 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     this.goToEdit = this.goToEdit.bind(this);
     this.goToDuplicate = this.goToDuplicate.bind(this);
     this.changeDevice = this.changeDevice.bind(this);
-    this.getPreview = this.getPreview.bind(this);
-    this.setContent = this.setContent.bind(this);
-    this.goToDuplicate = this.goToDuplicate.bind(this);
-    const hasAndroid = get(props, 'templateData.versions.base.ANDROID') || get(props, 'templateData.androidContent.title');
-    const hasIos = get(props, 'templateData.versions.base.IOS') || get(props, 'templateData.iosContent.title');
+    const hasAndroid = get(props, 'templateData.versions.base.ANDROID') || get(props, 'templateData.androidContent');
+    const hasIos = get(props, 'templateData.versions.base.IOS') || get(props, 'templateData.iosContent');
     let device = "android";
     if (hasAndroid) {
       device = 'android';
@@ -35,7 +38,7 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     };
   }
 
-  setContent(templateData, device) {
+  setContent = (templateData, device) => {
     const androidContent = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent');
     const iosContent = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent');
 
@@ -56,21 +59,12 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     }
     return content;
   }
-  getPreview(device) {
-    return (
-      <TemplatePreview
-        device={device}
-        channel={this.props.channel}
-        content={this.state.content || ''}
-        templateData={this.props.templateData}
-      />
-    );
-  }
   goToDuplicate() {
     this.props.onDuplicateClick(this.props.templateData);
     this.props.handleClose();
   }
-  changeDevice(device) {
+  changeDevice(ev) {
+    const device = ev.target.value;
     const content = this.setContent(this.props.templateData, device);
     this.setState({device, content });
   }
@@ -78,40 +72,38 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     this.props.onEditClick(e, this.props.templateData._id, this.props.templateData.modeType, path);
   }
   render() {
-    const {templateData} = this.props;
-    const hasAndroid = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent.title');
-    const hasIos = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent.title');
-    const hasBothAndroidAndIos = hasAndroid && hasIos;
+    const {templateData, channel} = this.props;
+
+    const hasAndroid = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent');
+    const hasIos = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent');
+
+    const {device, content} = this.state;
 
     return (
+
       <div>
         <div className="devices">
-          {!isEmpty(templateData) &&
-            ( hasBothAndroidAndIos ? (
-              <CapTab
-                panes={[
-                  {
-                    content: this.getPreview('android'),
-                    tab: <CapIcon type="android" size="m" />,
-                    key: 'android',
-                  },
-                  {
-                    content: this.getPreview('iphone'),
-                    tab: <CapIcon type="ios" size="m" />,
-                    key: 'iphone',
-                  },
-                ]}
-                onChange={(activeKey) => this.changeDevice(activeKey)}
-                tabBarStyle={{margin: 'auto', width: '38%'}}
-              />
-            ) : (
-              (hasAndroid || hasIos) && this.getPreview(hasAndroid ? 'android' : 'ios')
-            ))
-          }
+          {!isEmpty(templateData) && hasAndroid && hasIos &&
+          <ButtonGroup onClick={this.changeDevice}>
+            <CapButton type={device === "android" ? "primary" : "secondary"} value={"android"}><FormattedMessage {...messages.android} /></CapButton>
+            <CapButton type={device === "iphone" ? "primary" : "secondary"} value={"iphone"}><FormattedMessage {...messages.ios} /></CapButton>
+          </ButtonGroup>}
         </div>
+        <TemplatePreview
+          device={device === "android" ? "android" : "iphone"}
+          channel={channel}
+          content={content || ''}
+          templateData={templateData}
+              >
+        </TemplatePreview>
+
+
       </div>
+
+
     );
   }
+
 }
 
 MobilePushPreviewV2.propTypes = {

package/v2Components/MobilePushPreviewV2/messages.js

@@ -10,4 +10,12 @@ export default defineMessages({
     id: 'creatives.componentsv2.MobilePushPreviewV2.header',
     defaultMessage: 'This is the MobilePushPreviewV2 component !',
   },
+  android: {
+    id: 'creatives.componentsv2.MobilePushPreviewV2.android',
+    defaultMessage: 'Android',
+  },
+  ios: {
+    id: 'creatives.componentsv2.MobilePushPreviewV2.ios',
+    defaultMessage: 'IOS',
+  },
 });

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/_wechatRichmediaTemplatePrev.scss

@@ -1,69 +1,5 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
-.shell-lock-screen-android .main-screen-preview .wechatMsgContainer{
-  position: absolute;
-  left: 53.5%;
-  top:28%;
-  background: white;
-  width: 19.5%;
-  text-align: left;
-  height: fit-content;
-  border-radius: 0.285rem;
-}
-
-.shell-lock-screen-android .lock-screen-preview{
-  .wechat-android-sender-id{
-    position: absolute;
-    top: 46%;
-    font-size: 10px;
-    left: 28%;
-  }
-  .wechat-android-title{
-    position: absolute;
-    top: 49%;
-    font-size: 10px;
-    left: 28%;
-    color: #5e6c84;
-  }
-  .wechat-android-action-buttons{
-    position: absolute;
-    left: 28%;
-    top: 53%;
-    font-size: 10px;
-    color: #3861ca;
-    font-weight: 500;
-  }
-  .wechat-ios-sender-id{
-    position: absolute;
-    top: 44%;
-    font-size: 10px;
-    left: 28.5%;
-  }
-  .wechat-ios-title{
-    position: absolute;
-    top: 47%;
-    font-size: 10px;
-    left: 28.5%;
-    color: #5e6c84;
-  }
-  .wechat-ios-action-reply{
-    position: absolute;
-    left: 35%;
-    top: 59%;
-    font-size: 12px;
-    color: #3861ca;
-    font-weight: 500;
-  }
-  .wechat-ios-action-cancel{
-    position: absolute;
-    left: 34.5%;
-    top: 66%;
-    font-size: 12px;
-    color: #3861ca;
-    font-weight: 500;
-  }
-}
-
 .wechatMsgContainer{
     position: absolute;
     left: 30%;

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/index.js

@@ -8,14 +8,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 // import { connect } from 'react-redux';
 import { CapRow, CapColumn, CapButton } from '@capillarytech/cap-react-ui-library/';
-import { CapHeading, CapLabel, CapTab, CapIcon, CapImage } from '@capillarytech/cap-ui-library/';
+import { CapHeading, CapLabel } from '@capillarytech/cap-ui-library/';
 import { FormattedMessage } from 'react-intl';
 import _ from 'lodash';
 import './_wechatRichmediaTemplatePrev.scss';
 import messages from './messages';
-const wechatBody = require('./../assets/images/wechat_mobile_android.svg');
-const wechatLockScreenAndroid = require('./../assets/images/wechat-home-screen-android.svg');
-const wechatLockScreenIos = require('./../assets/images/home-screen-ios.svg');
+const wechatBody = require('./../assets/images/WECHAT_5x.png');
+
 class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   preparePreviewData = (mediaList) => {
     const previewMsg = [];
@@ -24,7 +23,7 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
     const contentData = content[0];
     previewMsg.push(
       <div className="richmedia-image-container">
-        <CapImage alt="default" width="100%" height="102px" src={contentData.image_url} />
+        <img alt="default" width="100%" height="102px" src={contentData.image_url} />
         {mediaListLength !== 1 && (
           <div className="name-container">
             <CapHeading type="h4" style={{color: "white"}}>{contentData.title}</CapHeading>
@@ -44,7 +43,7 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
       previewMsg.push(
         <div className="additional-richmedia-container">
           <div><CapLabel type="label9" style={{width: '170px', top: '12px', position: 'relative'}}>{data.title}</CapLabel></div>
-          <CapImage alt="default" width="34px" height="34px" src={data.image_url} />
+          <img alt="default" width="34px" height="34px" src={data.image_url} />
         </div>
       );
     });
@@ -62,7 +61,7 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
         returnObj.push(
           <div style={{ width: "100%", height: 116, position: "relative" }}>
             <CapRow>
-              <CapImage alt="default" width="100%" height="110px" src={contentData.image_url} />
+              <img alt="default" width="100%" height="110px" src={contentData.image_url} />
               <div className="preview-overflow-wrap-fields" style={{ position: "absolute", bottom: "5%", left: "10%", width: "auto" }}>{contentData.title ? contentData.title : ""}</div>
             </CapRow>
             {Object.keys(mediaList).length === 1 ?
@@ -81,7 +80,7 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
               {contentData.title}
             </CapColumn>
             <CapColumn style={{ float: "right" }}>
-              <CapImage alt="default" width="60px" height="60px" src={contentData.image_url}/>
+              <img alt="default" width="60px" height="60px" src={contentData.image_url}/>
             </CapColumn>
           </CapRow>
         );
@@ -92,102 +91,21 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
   goToEdit(e, path) {
     this.props.onEditClick(e, this.props.templateId, this.props.modeType, path);
   }
-  getWechatRichMediaAndroidPreview = (content) => (
-    <div className="preview-container">
-      <div className="shell-lock-screen-android align-center">
-        <div className="lock-screen-preview">
-          <CapImage className="preview-image" src={wechatLockScreenAndroid} alt="Preview is being generated"/>
-          <div className="wechat-android-sender-id">
-            Muji India
-          </div>
-          <div className="wechat-android-title">
-            {content[0].title}
-          </div>
-          <div className="wechat-android-action-buttons">
-          <FormattedMessage {...messages.MarkAsRead} /> <FormattedMessage {...messages.reply} />
-          </div>
-        </div>
-        <div className="main-screen-preview">
-          <CapImage className="preview-image" src={wechatBody} alt="Preview is being generated"/>
-          <div className={this.props.type === 'embedded' ? "wechatMsgContainerOutbound" : "wechatMsgContainer"}>
-            <div className={this.props.type === 'embedded' ? "overflow-handle-preview-outbound" : "overflow-handle-preview"}>
-              {this.preparePreviewData(content)}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-
-  getWechatRIchMediaIosPreview = (content) => (
-    <div className="preview-container">
-      <div className="shell-lock-screen-android align-center">
-        <div className="lock-screen-preview">
-          <CapImage className="preview-image" src={wechatLockScreenIos} alt="Preview is being generated"/>
-          <div className="wechat-ios-sender-id">
-            Muji India
-          </div>
-          <div className="wechat-ios-title">
-            {content[0].title}
-          </div>
-          <div className="wechat-ios-action-reply">
-          <FormattedMessage {...messages.reply} />
-          </div>
-          <div className="wechat-ios-action-cancel">
-          <FormattedMessage {...messages.cancel} />
-          </div>
-        </div>
-        <div className="main-screen-preview">
-          <CapImage className="preview-image" src={wechatBody} alt="Preview is being generated"/>
-          <div className={this.props.type === 'embedded' ? "wechatMsgContainerOutbound" : "wechatMsgContainer"}>
-            <div className={this.props.type === 'embedded' ? "overflow-handle-preview-outbound" : "overflow-handle-preview"}>
-              {this.preparePreviewData(content)}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-
-  getContentForSlidebox = (content) => {
-    return (
-      !this.props.showLockScreenPreview ? (
-        <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
-          <div className="shell align-center" id="sms-preview">
-            <CapImage className="preview-image" src={wechatBody} alt="Preview is being generated"/>
-            <div className={this.props.type === 'embedded' ? "wechatMsgContainerOutbound" : "wechatMsgContainer"}>
-              <div className={this.props.type === 'embedded' ? "overflow-handle-preview-outbound" : "overflow-handle-preview"}>
-                {this.preparePreviewData(this.props.content)}
-              </div>
-            </div>
-          </div>
-          {this.props.showEdit ? <CapButton onClick={(e) => this.goToEdit(e, this.props.path)} className="preview-buttons" type="primary">{this.props.type === 'embedded' ? <FormattedMessage {...messages.select} /> : <FormattedMessage {...messages.edit} /> }</CapButton> : ""}
-        </div>
-      ) : (
-        <CapTab
-          panes={[
-            {
-              content: this.getWechatRichMediaAndroidPreview(this.props.content),
-              tab: <CapIcon type="android" size='m' />,
-              key: 'android',
-            },
-            {
-              content: this.getWechatRIchMediaIosPreview(this.props.content),
-              tab: <CapIcon type="ios" size='m' />,
-              key: 'ios',
-            },
-          ]}
-          tabBarStyle={{margin: 'auto', width: '14%'}}
-        />
-      )
-    );
-  };
-
   render() {
     return (
       <div>
         {this.props.contentForSlideBox ?
-          this.getContentForSlidebox(this.props.content)
+          <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
+            <div className="shell align-center" id="sms-preview">
+              <img className="preview-image" src={wechatBody} alt="Preview is being generated"/>
+              <div className={this.props.type === 'embedded' ? "wechatMsgContainerOutbound" : "wechatMsgContainer"}>
+                <div className={this.props.type === 'embedded' ? "overflow-handle-preview-outbound" : "overflow-handle-preview"}>
+                  {this.preparePreviewData(this.props.content)}
+                </div>
+              </div>
+            </div>
+            {this.props.showEdit ? <CapButton onClick={(e) => this.goToEdit(e, this.props.path)} className="preview-buttons" type="primary">{this.props.type === 'embedded' ? <FormattedMessage {...messages.select} /> : <FormattedMessage {...messages.edit} /> }</CapButton> : ""}
+          </div>
         :
           <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
             <div className="shell align-center" id="sms-preview">

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/messages.js

@@ -18,16 +18,4 @@ export default defineMessages({
     id: 'creatives.components.WechatRichmediaTemplatePreview.edit',
     defaultMessage: 'Edit',
   },
-  MarkAsRead: {
-    id: 'creatives.components.WechatRichmediaTemplatePreview.MarkAsRead',
-    defaultMessage: 'Mark as read',
-  },
-  reply: {
-    id: 'creatives.components.WechatRichmediaTemplatePreview.reply',
-    defaultMessage: 'Reply',
-  },
-  cancel: {
-    id: 'creatives.components.WechatRichmediaTemplatePreview.cancel',
-    defaultMessage: 'Cancel',
-  },
 });

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -1,6 +1,4 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
-
-.shell-v2 {
+.shell {
   position: relative;
   -webkit-transform: translate(-50%);
   transform: translate(-50%);
@@ -17,8 +15,8 @@
 
   .msgContainer {
     position: absolute;
-    top: 20%;
-    left: 23%;
+    top: 18%;
+    left: 28.8%;
     width: 42%;
     height: 336px;
     display: -webkit-box;
@@ -39,18 +37,6 @@
         left: 14px;
       }
     }
-    &.wechat{
-      width: 52%;
-    }
-    &.line-preview {
-      margin-left: $CAP_SPACE_16;
-
-      .message-pop {
-        width: 80%;
-        left: 36px;
-        margin-top: -6px;
-      }
-    }
 
     .message-pop{
       .unicode-disabled{
@@ -68,7 +54,7 @@
         line-height: 14px;
         padding: 0 8px 8px 8px;
         font-size: 10px;
-        width: 100%;
+        width: 80%;
         font-family: 'open-sans';
         .message-pop-item{
           padding: 4px;
@@ -373,9 +359,3 @@
     font-size: 12px;
   }
 }
-
-.test-and-preview-container{
-  display: flex;
-  margin-top: -12px;
-  margin-bottom: 12px;
-}