@capillarytech/creatives-library 3.9.0 → 3.9.2

package/components/TemplatePreview/index.js

@@ -8,18 +8,145 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import _ from 'lodash';
-import { injectIntl, intlShape} from 'react-intl';
-import {CapColumn} from '@capillarytech/cap-react-ui-library';
+import { injectIntl, intlShape, FormattedMessage} from 'react-intl';
+import {CapColumn, CapTab, CapIcon, CapLabel, CapImage} from '@capillarytech/cap-ui-library';
 import './_templatePreview.scss';
 import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
 const smsIcon = require('./assets/images/user-icon.svg');
+const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
+const wechatMobileAndroid = require('./assets/images/wechat_mobile_android.svg');
+const smsMobileIos = require('./assets/images/sms_mobile_ios.svg');
+const smsAndroidHomeScreen = require('./assets/images/home-screen-android.svg');
+const smsIosHomeScreen = require('./assets/images/home-screen-ios.svg');
 const wechatBody = require('./assets/images/WECHAT_5x.png');
 const smsBody = require('./assets/images/mobile.svg');
 const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
 const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
 
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  getWechatAndroidPreview = (content) => (
+    <div className="shell-lock-screen-android align-center" id="sms-preview">
+      <div className="lock-screen-preview">
+        <CapImage className="preview-image sms" src={smsAndroidHomeScreen} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="lock-msgContainer wechat">
+          <div className="sender-id-text">
+            {this.props.intl.formatMessage(messages.senderId)}
+          </div>
+          <div className="message-text-container">
+            <CapLabel type="label1" style={{ height: '15px' }} >{content}</CapLabel>
+          </div>
+        </div>
+        <div className="action-text">
+          <FormattedMessage {...messages.markAsRead}/> <FormattedMessage {...messages.reply}/>
+        </div>
+      </div>
+      <div className="main-screen-preview">
+        <CapImage className="preview-image" src={wechatMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="msgContainer wechat">
+          <div className="message-pop wechat align-left" style={{ background: '#ffffff', color: '#333333' }}>
+            {content}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  getWechatIosPreview = (content) => (
+    <div className="shell-lock-screen-ios align-center" id="sms-preview">
+      <div className="lock-screen-preview">
+        <CapImage className="preview-image sms" src={smsIosHomeScreen} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="lock-msgContainer wechat">
+          <div className="sender-id-text">
+            {this.props.intl.formatMessage(messages.senderId)}
+          </div>
+          <div className="message-text-container">
+            <CapLabel type="label1" style={{ height: '15px' }} >{content}</CapLabel>
+          </div>
+        </div>
+        <div className="action-text-reply">
+          <FormattedMessage {...messages.reply}/>
+        </div>
+        <div className="action-text-cancel">
+          <FormattedMessage {...messages.cancel}/>
+        </div>
+      </div>
+      <div className="main-screen-preview">
+        <CapImage className="preview-image" src={wechatMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="msgContainer wechat">
+          <div className="message-pop wechat align-left" style={{ background: '#ffffff', color: '#333333' }}>
+            {content}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  getSmsAndroidPreview = (content) => (
+    <div className="shell-lock-screen-android align-center" id="sms-preview">
+      <div className="lock-screen-preview">
+        <CapImage className="preview-image sms" src={smsAndroidHomeScreen} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="lock-msgContainer sms">
+          <div className="sender-id-text">
+          {this.props.intl.formatMessage(messages.senderId)}
+          </div>
+          <div className="message-text-container">
+            <CapLabel type="label1" style={{ height: '15px' }} >{content}</CapLabel>
+          </div>
+        </div>
+        <div className="action-text">
+          <FormattedMessage {...messages.markAsRead}/> <FormattedMessage {...messages.reply}/>
+        </div>
+      </div>
+      <div className="main-screen-preview">
+        <CapImage className="preview-image sms" src={smsMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="msgContainer sms">
+          <div className={"message-pop sms"}>
+            {content && content.length && content.map((msg) =>
+              <CapColumn className="message-pop-item align-left" style={{ background: '#FFFFFF', color: '#091e42'}}>
+                {msg}
+              </CapColumn>)
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  getSmsIosPreview = (content) => (
+    <div className="shell-lock-screen-ios align-center" id="sms-preview">
+      <div className="lock-screen-preview">
+        <CapImage className="preview-image sms" src={smsIosHomeScreen} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="lock-msgContainer sms">
+          <div className="sender-id-text">
+          {this.props.intl.formatMessage(messages.senderId)}
+          </div>
+          <div className="message-text-container">
+            <CapLabel type="label1" style={{ height: '15px' }} >{content}</CapLabel>
+          </div>
+        </div>
+        <div className="action-text-reply">
+          <FormattedMessage {...messages.reply}/>
+        </div>
+        <div className="action-text-cancel">
+          <FormattedMessage {...messages.cancel}/>
+        </div>
+      </div>
+      <div className="main-screen-preview">
+        <CapImage className="preview-image sms" src={smsMobileIos} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        <div className="msgContainer sms">
+          <div className={"message-pop sms"}>
+            {content && content.length && content.map((msg) =>
+              <CapColumn className="message-pop-item align-left" style={{ background: '#ebecf0', color: '#091e42'}}>
+                {msg}
+              </CapColumn>)
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
   render() {
     console.log('preview props', this.props);
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
@@ -38,6 +165,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
       //smsText = this.props.intl.formatMessage(messages.previewGenerationMessage);
       //console.log('message text', smsText);
     }
+    const showLockScreenPreview = !!this.props.showLockScreenPreview;
     const type = this.props.location && this.props.location.query.type ? this.props.location.query.type : '';
     let iosActions = [];
     if (channel.toLowerCase() === "mobilepush") {
@@ -52,35 +180,67 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
     }
     return (
       <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
-        { channel && channel.toLowerCase() === 'sms' &&
-          <div className="shell align-center" id="sms-preview">
-            <img className="preview-image sms" src={smsBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        { channel && channel.toLowerCase() === 'sms' && 
+            (showLockScreenPreview ? (
+              <CapTab
+                panes={[
+                  {
+                    content: this.getSmsAndroidPreview(content),
+                    tab: <CapIcon type="android" size='m' />,
+                    key: 'android',
+                  },
+                  {
+                    content: this.getSmsIosPreview(content),
+                    tab: <CapIcon type="ios" size='m' />,
+                    key: 'ios',
+                  },
+                ]}
+                tabBarStyle={{margin: 'auto', width: '14%'}}
+              /> 
+            ) : (
+            <div className="shell align-center" id="sms-preview">
+            <CapImage className="preview-image sms" src={smsMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
             <div className="msgContainer sms">
-              <img className="sms-icon" src={smsIcon} alt={this.props.intl.formatMessage(messages.smsIcon)} />
               <div className={"message-pop sms"}>
                 {content && content.length && content.map((msg) =>
-                  <CapColumn className="message-pop-item align-left" style={{ background: '#3F51B5', color: '#ffffff'}}>
+                  <CapColumn className="message-pop-item align-left" style={{ background: '#FFFFFF', color: '#091e42'}}>
                     {msg}
                   </CapColumn>)
                 }
               </div>
             </div>
-          </div>
-        }
-        {channel && channel.toLowerCase() === 'wechat' ?
-          ( <div className="shell align-center" id="sms-preview">
-            <img className="preview-image" src={channel.toLowerCase() === 'wechat' ? wechatBody : smsBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+          </div>)
+            )}
+        {channel && channel.toLowerCase() === 'wechat' &&
+          (showLockScreenPreview ? (
+            <CapTab
+              panes={[
+                {
+                  content: this.getWechatAndroidPreview(content),
+                  tab: <CapIcon type="android" size='m' />,
+                  key: 'android',
+                },
+                {
+                  content: this.getWechatIosPreview(content),
+                  tab: <CapIcon type="ios" size='m' />,
+                  key: 'ios',
+                },
+              ]}
+              tabBarStyle={{margin: 'auto', width: '14%'}}
+            />
+          ) : ( 
+          <div className="shell align-center" id="sms-preview">
+            <CapImage className="preview-image" src={channel.toLowerCase() === 'wechat' ? wechatMobileAndroid : smsBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
             <div className="msgContainer">
-              {this.props.channel.toLowerCase() === 'wechat' ? <div className="sms-icon" style={{ width: '25px', height: '25px', background: '#2E89DF' }}></div> : <img className="sms-icon" src={smsIcon} alt={this.props.intl.formatMessage(messages.smsIcon)} />}
               <div className="message-pop align-left" style={{ background: `${this.props.channel.toLowerCase() === 'wechat' ? '#ffffff' : '#3F51B5'}`, color: `${this.props.channel.toLowerCase() === 'wechat' ? '#333333' : '#ffffff'}`}}>{content}
               </div>
             </div>
           </div>
-          ) : ''
-        }
+          )
+        )}
         { channel && (channel.toLowerCase() === 'mobilepush') &&
           (<div className="shell align-center" id="mobilepush-preview">
-            <img className="preview-image" src={this.props.device === "android" ? androidPushMessagePhone : iPhonePushMessagePhone} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+            <CapImage className="preview-image" src={this.props.device === "android" ? androidPushMessagePhone : iPhonePushMessagePhone} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
               {(!!content.header || !!content.bodyText || !!content.bodyImage) &&
                 <div className={`${this.props.device}-push-message-Container`}>
                   {this.props.device === "android" ?
@@ -95,7 +255,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                         {content.bodyText}
                       </div>
                       {content.bodyImage && <div className="body-image">
-                        <img src={content.bodyImage} alt="" />
+                        <CapImage src={content.bodyImage} alt="" />
                       </div>}
                       {content.actions.filter((action) => action.label).length ?
                         <div className="actions">
@@ -111,7 +271,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                         <span className="app-icon"></span>{content.appName ? content.appName : "App name"} <i className="material-icons">{this.props.intl.formatMessage(messages.close)}</i>
                       </div>
                       {content.bodyImage && <div className="body-image">
-                        <img src={content.bodyImage} alt=""/>
+                        <CapImage src={content.bodyImage} alt=""/>
                       </div>}
                       <div className="title">
                         {content.header}
@@ -130,11 +290,11 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
         {
           channel && channel.toLowerCase() === 'line' ? (
             <div className="shell align-center" id="sms-preview">
-              <img className="preview-image" src={wechatBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+              <CapImage className="preview-image" src={wechatBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
               <div className="msgContainer">
                 <div className="sms-icon" style={{ width: '25px', height: '25px', background: '#2E89DF' }}></div>
                 <div className="message-pop align-left" style={{ background: '#ffffff', color: '#333333' }}>
-                  { (content && content.bodyImage) ? <img src={content.bodyImage} alt="ddd" style={{maxWidth: '100%'}}/> : '' }
+                  { (content && content.bodyImage) ? <CapImage src={content.bodyImage} alt="ddd" style={{maxWidth: '100%'}}/> : '' }
                   { (content && content.bodyText) ? content.bodyText : ''}
                 </div>
               </div>

package/components/TemplatePreview/messages.js

@@ -10,6 +10,10 @@ export default defineMessages({
     id: 'creatives.components.TemplatePreview.previewGenerationMessage',
     defaultMessage: "Preview is being generated",
   },
+  senderId: {
+    id: 'creatives.components.TemplatePreview.senderId',
+    defaultMessage: "Sender ID",
+  },
   sms: {
     id: 'creatives.components.TemplatePreview.sms',
     defaultMessage: "SMS",
@@ -46,4 +50,16 @@ export default defineMessages({
     id: 'creatives.components.TemplatePreview.smsIcon',
     defaultMessage: 'Sms Icon',
   },
+  markAsRead: {
+    id: 'creatives.components.TemplatePreview.markAsRead',
+    defaultMessage: 'Mark as read',
+  },
+  reply: {
+    id: 'creatives.components.TemplatePreview.reply',
+    defaultMessage: 'Reply',
+  },
+  cancel: {
+    id: 'creatives.components.TemplatePreview.cancel',
+    defaultMessage: 'Cancel',
+  },
 });