@capillarytech/creatives-library 3.6.4 → 3.6.6

package/v2Components/TemplatePreview/index.js

@@ -10,17 +10,114 @@ import React from 'react';
 import _ from 'lodash';
 import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
 // import styled from 'styled-components';
-import {CapColumn, CapRow, CapHeading} from '@capillarytech/cap-ui-library';
+import {CapColumn, CapRow, CapHeading, CapIcon, CapButton, 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 wechatBody = require('./assets/images/WECHAT_5x.png');
-const smsBody = require('./assets/images/mobile.svg');
+import { WECHAT } from '../../v2Containers/CreativesContainer/constants';
+const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
+const smsMobileAndroid = require('./assets/images/sms_mobile_android.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
+  onPreviewContentClicked = (channel) => {
+    const IOSContent = (this.props.templateDataRaw && this.props.templateDataRaw.versions.base.IOS) ||
+      ((this.props.device === 'iphone' || this.props.device === 'ios') && this.props.content);
+    const ANDROIDContent = (this.props.templateDataRaw && this.props.templateDataRaw.versions.base.ANDROID) ||
+      (this.props.device === 'android' && this.props.content);
+    const mobilePushPreviewContent = [];
+    if (this.props.channel === 'MOBILEPUSH') {
+      const previewObj = {
+        channel: this.props.channel,
+        accountId: this.props.templateDataRaw && this.props.templateDataRaw.definition.accountId,
+        messageSubject: this.props.templateDataRaw && this.props.templateDataRaw.name,
+        id: 'message_content_id_1',
+      };
+      if (IOSContent) {
+        previewObj.iosContent = {
+          title: IOSContent.title || IOSContent.header,
+          message: IOSContent.message || IOSContent.bodyText,
+          deviceType: "IOS",
+          expandableDetails: IOSContent.expandableDetails ||
+            {
+              style: "BIG_PICTURE",
+              image: this.props.content.bodyImage,
+              message: this.props.content.bodyText,
+            },
+        };
+      }
+      if (ANDROIDContent) {
+        previewObj.androidContent = {
+          title: ANDROIDContent.title || ANDROIDContent.header,
+          message: ANDROIDContent.message || ANDROIDContent.bodyText,
+          deviceType: "ANDROID",
+          expandableDetails: ANDROIDContent.expandableDetails ||
+            {
+              style: "BIG_PICTURE",
+              image: this.props.content.bodyImage,
+              message: this.props.content.bodyText,
+            },
+        };
+      }
+      mobilePushPreviewContent.push(previewObj);
+    }
+    const previewContent = this.props.channel === 'MOBILEPUSH' ? mobilePushPreviewContent : this.props.content;
+    const params = {
+      content: previewContent,
+      channel,
+    };
+    this.props.onPreviewContentClicked(params);
+  };
+
+  onTestContentClicked = (channel) => {
+    let mobilePushPreviewContent = {};
+    const IOSContent = (this.props.templateDataRaw && this.props.templateDataRaw.versions.base.IOS) ||
+      ((this.props.device === 'iphone' || this.props.device === 'ios') && this.props.content);
+    const ANDROIDContent = (this.props.templateDataRaw && this.props.templateDataRaw.versions.base.ANDROID) ||
+      (this.props.device === 'android' && this.props.content);
+    if (this.props.channel === 'MOBILEPUSH') {
+      mobilePushPreviewContent = {
+        channel: this.props.channel,
+        accountId: this.props.templateDataRaw && this.props.templateDataRaw.definition.accountId,
+        messageSubject: this.props.templateDataRaw && this.props.templateDataRaw.name,
+        id: 'message_content_id_1',
+      };
+      if (ANDROIDContent) {
+        mobilePushPreviewContent.androidContent = {
+          title: ANDROIDContent.title || ANDROIDContent.header,
+          message: ANDROIDContent.message || ANDROIDContent.bodyText,
+          deviceType: "ANDROID",
+          expandableDetails: ANDROIDContent.expandableDetails ||
+            {
+              style: "BIG_PICTURE",
+              image: this.props.content.bodyImage,
+              message: this.props.content.bodyText,
+            },
+        };
+      }
+      if (IOSContent) {
+        mobilePushPreviewContent.iosContent = {
+          title: IOSContent.title || IOSContent.header,
+          message: IOSContent.message || IOSContent.bodyText,
+          deviceType: "IOS",
+          expandableDetails: IOSContent.expandableDetails ||
+            {
+              style: "BIG_PICTURE",
+              image: this.props.content.bodyImage,
+              message: this.props.content.bodyText,
+            },
+        };
+      }
+    }
+    const previewContent = this.props.channel === 'MOBILEPUSH' ? mobilePushPreviewContent : this.props.content;
+    const params = {
+      content: previewContent,
+      channel,
+    };
+    this.props.onTestContentClicked(params);
+  };
+
   render() {
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
     const channel = this.props.channel;
@@ -64,16 +161,43 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           </CapHeading>}
         </CapColumn>}
         <CapColumn span={this.props.showCount ? 8 : 24}>
+          {this.props.showTestAndPreviewIcon && this.props.channel !== WECHAT && (
+            <div className="test-and-preview-container">
+              <CapButton
+                style={{
+                  color: '#2466ea',
+                  display: 'inline-block',
+                  padding: '0 6px',
+                  marginTop: '12px',
+                }}
+                type="flat"
+                onClick={() => this.onPreviewContentClicked(this.props.channel)}
+              >
+                <CapIcon type="eye"/><FormattedMessage {...messages.preview} />
+              </CapButton>
+              <CapButton
+                style={{
+                  color: '#2466ea',
+                  display: 'inline-block',
+                  padding: '0 6px',
+                  marginTop: '12px',
+                }}
+                type="flat"
+                onClick={() => this.onTestContentClicked(this.props.channel)}
+              >
+                <CapIcon type="lab"/><FormattedMessage {...messages.testMessage} />
+              </CapButton>
+            </div>
+          )}
           <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
             { channel && channel.toLowerCase() === 'sms' &&
               <div>
-                <div className="shell align-center" id="sms-preview">
-                  <img className="preview-image sms" src={smsBody} alt="Preview is being generated"/>
+                <div className="shell-v2 align-center" id="sms-preview">
+                  <CapImage className="preview-image sms" src={smsMobileAndroid} alt="Preview is being generated"/>
                   <div className="msgContainer sms">
-                    <img className="sms-icon" src={smsIcon} alt="Sms icon" />
                     <div className={"message-pop sms"}>
                       {content && content.length && content.map((msg, index) =>
-                        <CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#3F51B5', color: '#ffffff'}}>
+                        <CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#FFFFFF', color: '#091e42'}}>
                           {msg}
                         </CapColumn>)
                   }
@@ -96,10 +220,9 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
               </div>
             }
             {channel && channel.toLowerCase() === 'wechat' ?
-            ( <div className="shell align-center" id="sms-preview">
-              <img className="preview-image" src={channel.toLowerCase() === 'wechat' ? wechatBody : smsBody} alt="Preview is being generated"/>
-              <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="shell-v2 align-center" id="sms-preview">
+              <CapImage className="preview-image" src={channel.toLowerCase() === 'wechat' ? wechatBodyNew : smsMobileAndroid} alt="Preview is being generated"/>
+              <div className="msgContainer wechat">
                 <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>
@@ -107,10 +230,10 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           ) : ''
         }
             { 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)}/>
+            (<div className="shell-v2 align-center" id="mobilepush-preview">
+              <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`}>
+                <div className={`${this.props.device === 'ios' ? 'iphone' : this.props.device}-push-message-Container`}>
                   {this.props.device === "android" ?
                     <div className="message-pop align-left">
                       <div className="app-name">
@@ -123,7 +246,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">
@@ -138,7 +261,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}
@@ -156,12 +279,12 @@ 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)}/>
+            <div className="shell-v2 align-center" id="sms-preview">
+              <CapImage className="preview-image" src={wechatBodyNew} 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>
@@ -189,6 +312,10 @@ TemplatePreview.propTypes = {
   unicodeEnabled: PropTypes.bool,
   showCount: PropTypes.bool,
   intl: intlShape.isRequired,
+  templateDataRaw: PropTypes.object,
+  onPreviewContentClicked: PropTypes.func,
+  onTestContentClicked: PropTypes.func,
+  showTestAndPreviewIcon: PropTypes.bool,
 };
 
 export default (injectIntl(TemplatePreview));

package/v2Components/TemplatePreview/messages.js

@@ -50,4 +50,12 @@ export default defineMessages({
     id: 'creatives.componentsV2.TemplatePreview.smsIcon',
     defaultMessage: 'Sms Icon',
   },
+  preview: {
+    id: 'creatives.componentsV2.TemplatePreview.preview',
+    defaultMessage: 'Preview',
+  },
+  testMessage: {
+    id: 'creatives.componentsV2.TemplatePreview.testMessage',
+    defaultMessage: 'Test Message',
+  },
 });

package/v2Containers/Assets/Gallery/index.js

@@ -251,6 +251,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
     }
   }
   getIllustrationProps={
+    buttonClassName: 'upload-image-gallery',
     buttonLabel: <FormattedMessage {...messages.upload} />,
     onClick: (e) => this.openFileDialog(e),
     illustrationImage: imageGalleryIllustration,
@@ -317,6 +318,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
           title: <span title={template.name} >{template.name}</span>,
           extra: [
             <CapIcon
+              className="view-gallery"
               style={{marginRight: '16px'}}
               type="eye"
               onClick={() => { this.openPreviewMode(template); }}
@@ -324,7 +326,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
             <CapDropdown
               overlay={
                 <CapMenu>
-                  <CapMenu.Item onClick={() => this.deleteAsset(template)}>
+                  <CapMenu.Item className="delete-gallery" onClick={() => this.deleteAsset(template)}>
                     <FormattedMessage {...messages.delete} />
                   </CapMenu.Item>
                 </CapMenu>
@@ -429,7 +431,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
         <div style={{ textAlign: 'right', marginTop: '16px', width: '50%'}}>
           <form encType="multipart/form-data" id="myForm">
             <input style={{ display: 'none'}} id="fileName" type="file" onChange={(e) => this.uploadImages(e, {files: e.target.files})} accept="image/*" multiple/>
-            <CapButton type={this.props.location.query.type !== 'embedded' ? 'primary' : 'secondary'} onClick={(e) => this.openFileDialog(e)} style={{float: 'right'}}>
+            <CapButton className="upload-image-gallery" type={this.props.location.query.type !== 'embedded' ? 'primary' : 'secondary'} onClick={(e) => this.openFileDialog(e)} style={{float: 'right'}}>
               <FormattedMessage {...messages.upload} />
             </CapButton>
           </form>

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -69,6 +69,8 @@ function SlideBoxContent(props) {
       selectedWeChatAccount,
       weChatMaptemplateStep,
       onWeChatMaptemplateStepChange,
+      onTestContentClicked,
+      onPreviewContentClicked
       onFacebookSubmit,
     } = props;
   const type = messageDetails.type.toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
@@ -104,7 +106,6 @@ function SlideBoxContent(props) {
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
     isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
   }
-
   return (
     <CreativesWrapper>
       {!isFullMode && slidBoxContent === 'templates' && (
@@ -185,6 +186,8 @@ function SlideBoxContent(props) {
           templateData={templateData}
           forwardedTags={forwardedTags}
           selectedOfferDetails={selectedOfferDetails}
+          onPreviewContentClicked={onPreviewContentClicked}
+          onTestContentClicked={onTestContentClicked}
         />
       )}
       {
@@ -218,6 +221,8 @@ function SlideBoxContent(props) {
         isFullMode={isFullMode}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
+        onPreviewContentClicked={onPreviewContentClicked}
+        onTestContentClicked={onTestContentClicked}
       />
         )}
       {isEmailCreate && (
@@ -240,6 +245,8 @@ function SlideBoxContent(props) {
         onValidationFail={onValidationFail}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
+        onPreviewContentClicked={onPreviewContentClicked}
+        onTestContentClicked={onTestContentClicked}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -263,6 +270,8 @@ function SlideBoxContent(props) {
         onValidationFail={onValidationFail}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
+        onPreviewContentClicked={onPreviewContentClicked}
+        onTestContentClicked={onTestContentClicked}
       />
         )}
       {isEditMPush &&
@@ -283,6 +292,8 @@ function SlideBoxContent(props) {
           onValidationFail={onValidationFail}
           forwardedTags={forwardedTags}
           selectedOfferDetails={selectedOfferDetails}
+          onPreviewContentClicked={onPreviewContentClicked}
+          onTestContentClicked={onTestContentClicked}
         />
         }
       {isCreateMPush &&
@@ -307,7 +318,9 @@ function SlideBoxContent(props) {
         query={query}
         forwardedTags={forwardedTags}
         onValidationFail={onValidationFail}
-        selectedOfferDetails={selectedOfferDetails}/>
+        selectedOfferDetails={selectedOfferDetails}
+        onPreviewContentClicked={onPreviewContentClicked}
+        onTestContentClicked={onTestContentClicked}/>
         }
       {
         isEditFacebook && (

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -48,7 +48,7 @@ function SlideBoxHeader(props) {
         )}
       {!showTemplateNameHeader && slidBoxContent === 'editTemplate' && (
       <CapHeader
-        title={<FormattedMessage {...messages.editMessageContent} />}
+        title={<FormattedMessage {...messages.editMessageContent} values={{channel: getChannelLabel(channel)}}/>}
         prefix={creativesMode !== 'edit' && !isFullMode && showPrefix &&
           <PrefixWrapper>
             <CapIcons.backIcon onClick={onShowTemplates} />

package/v2Containers/CreativesContainer/index.js

@@ -473,7 +473,7 @@ class Creatives extends React.Component {
   }
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage, weChatTemplateType, weChatMaptemplateStep} = this.state;
-    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, getCreativesData} = this.props;
+    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, onTestContentClicked, onPreviewContentClicked, getCreativesData} = this.props;
     const mapTemplateCreate = slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
     /* TODO: Instead of passing down same props separately to each component down, write common function to these props and pass it accordingly */
     return (
@@ -538,6 +538,8 @@ class Creatives extends React.Component {
               weChatMaptemplateStep={weChatMaptemplateStep}
               selectedWeChatAccount={selectedWeChatAccount}
               onWeChatMaptemplateStepChange={this.onWeChatMaptemplateStepChange}
+              onPreviewContentClicked={onPreviewContentClicked}
+              onTestContentClicked={onTestContentClicked}
               onFacebookSubmit={getCreativesData}
             />
           }

package/v2Containers/CreativesContainer/messages.js

@@ -256,11 +256,11 @@ export default defineMessages({
   },
   "editMessageContent": {
     id: `${scope}.editMessageContent`,
-    defaultMessage: `Edit message content`,
+    defaultMessage: `Edit {channel}`,
   },
   "createMessageContent": {
     id: `${scope}.createMessageContent`,
-    defaultMessage: `New {channel} message`,
+    defaultMessage: `New {channel}`,
   },
   "creativeTemplatesDesc": {
     id: `${scope}.creativeTemplatesDesc`,

package/v2Containers/Email/_email.scss

@@ -123,7 +123,13 @@
       margin-right: 0 !important;
     }
   }
-
+  .test-and-preview-container{
+    position: absolute;
+    left: 70%;
+    top: 4%;
+    margin-top: 0;
+    z-index: 999;
+  }
 }
 
 .version-popover {