@capillarytech/creatives-library 7.0.7 → 7.1.0

package/v2Components/TemplatePreview/index.js

@@ -20,7 +20,7 @@ import { VIBER } from '../../v2Containers/App/constants';
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
 const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
 const lineMobileAndroid = require('../../assets/line.png');
-const viberMobileAndroid = require('./assets/images/viberMobile.svg');
+const viberMobileAndroid = require('../../assets/viber.png');
 
 const lineImgPlaceholder = require('../../assets/line-image-placeholder.svg');
 const lineStickerPlaceholder = require('../../assets/smiley-placeholder.svg');
@@ -131,7 +131,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
 
   render() {
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
-    const { channel, showTestAndPreviewIcon, module, viberBrandName, viberAccountName } = this.props;
+    const { channel, showTestAndPreviewIcon, module } = this.props;
     const { buttonText, imageURL, messageContent: viberMessageContent } = content || {};
     let smsDetails = {};
     // let smsText = '';
@@ -561,7 +561,6 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           channel && channel.toLowerCase() === VIBER ? (
             <div className="shell-v2 align-center" id="sms-preview">
               <CapImage className="preview-image" src={viberMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
-              <div style={{ position: 'absolute', top: '12%', left: '36%'}}>{viberBrandName}</div>
               <div
                 className="msgContainer viber-preview"
                 style={{
@@ -575,14 +574,15 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                     "width": 20,
                     "height": 20,
                     "margin": '0 4px 277px 0',
+                    "padding": '6px 2px 7px 3px',
                     'border-radius': '4px',
                     'background-color': CAP_PURPLE01,
-                    'font-size': '12px',
+                    'font-size': '6px',
                     'font-weight': 900,
                     "color": CAP_WHITE,
                   }}
                 >
-                  {viberAccountName}
+                  {this.props.viberAccountName}
                 </div>
                 <div
                   className="message-pop align-left"
@@ -614,17 +614,13 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                       'background-color': CAP_PURPLE01,
                       "margin-top": '14px',
                       'text-align': 'center',
-                      "width": '143px',
+                      "width": '132px',
                       "height": '20px',
                       "margin-left": "5px",
                     }}>
                     <p
                       style={{ 'font-size': '12px',
                         'font-weight': '500',
-                        "display": '-webkit-box',
-                        '-webkit-line-clamp': '1',
-                        '-webkit-box-orient': 'vertical',
-                        'overflow': 'hidden',
                         "color": CAP_WHITE }}
                       >
                       {buttonText || ''}</p>

package/v2Containers/App/constants.js

@@ -47,5 +47,5 @@ export const CHANNEL_EDIT_TRACK_MAPPING = {
 };
 export const GTM_TRACKING_ID = 'UA-110024621-2';
 export const BEE_PLUGIN = 'BEE_PLUGIN';
-
+export const NO_COMMUNICATION = 'NO_COMMUNICATION';
 export const CREATIVES_UI_VIEW = 'CREATIVES_UI_VIEW';

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -19,6 +19,7 @@ import CallTask from '../CallTask';
 import MobliPushEdit from '../MobilePush/Edit';
 import * as constants from './constants';
 import LineContainer from '../Line/Container';
+import FTP from '../FTP';
 import Viber from '../Viber';
 const CreativesWrapper = styled.div`
   .ant-popover,
@@ -134,6 +135,7 @@ function SlideBoxContent(props) {
       selectedAccount,
       onShowTemplates,
       handleClose,
+      onFTPSubmit,
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -173,6 +175,7 @@ function SlideBoxContent(props) {
   let isEditCallTask = false;
   let isEditMPush = false;
   let isEditFacebook = false;
+  let isEditFTP = false;
   const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL;
   if (templateData && channel) {
     channel = templateData.type;// for edit mode with template data
@@ -185,6 +188,7 @@ function SlideBoxContent(props) {
     isPreview = slidBoxContent === 'preview' && (channel === constants.SMS || channel === constants.LINE || channel === constants.VIBER);
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
     isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
+    isEditFTP = slidBoxContent === 'editTemplate' && [constants.NO_COMMUNICATION, constants.FTP].includes(channel);
   }
 
   const getChannelPreviewContent = (templateDataObject) => {
@@ -263,7 +267,6 @@ function SlideBoxContent(props) {
         return get(templateDataObject, `versions.base.content`);
     }
   };
-
   return (
     <CreativesWrapper>
       {!isFullMode && slidBoxContent === 'templates' && (
@@ -286,13 +289,15 @@ function SlideBoxContent(props) {
         onCreateComplete={onCreateComplete}
         getFormSubscriptionData={getFormData}
         handleClose={handleClose}
+        onFTPSubmit={onFTPSubmit}
+        slidBoxContent={slidBoxContent}
+        FTPMode="create"
+        selectedOfferDetails={selectedOfferDetails}
         />
       )}
       {isPreview && (
       <TemplatePreview
         content={getChannelPreviewContent(templateData)}
-        viberBrandName={selectedAccount || ""}
-        viberAccountName={(selectedAccount || "")[0]}
         unicodeEnabled={get(templateData, `versions.base['unicode-validity']`)}
         channel={(templateData.type || '').toLowerCase()}
         charCounterEnabled={channel === constants.SMS}
@@ -354,6 +359,14 @@ function SlideBoxContent(props) {
           onTestContentClicked={onTestContentClicked}
         />
       )}
+      {isEditFTP && (
+        <FTP
+          mode="edit"
+          onFTPSubmit={onFTPSubmit}
+          messageDetails={messageDetails}
+          selectedOfferDetails={selectedOfferDetails}
+        />
+      )}
       {
         isEditCallTask &&
           <CallTask
@@ -608,5 +621,6 @@ SlideBoxContent.propTypes = {
   onCreateComplete: PropTypes.func,
   saveMessage: PropTypes.func,
   selectedAccount: PropTypes.object,
+  onFTPSubmit: PropTypes.func,
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -15,6 +15,8 @@ function getChannelLabel(channel = '') {
     email: 'Email',
     mobilepush: 'Push notification',
     wechat: 'Wechat',
+    no_communication: 'NO_COMMUNICATION',
+    ftp: 'FTP',
   };
   return labels[channel.toLowerCase()];
 }

package/v2Containers/CreativesContainer/constants.js

@@ -13,6 +13,8 @@ export const CALL_TASK = "CALL_TASK";
 export const MOBILE_PUSH = "MOBILEPUSH";
 export const WECHAT = "WECHAT";
 export const FACEBOOK = "FACEBOOK";
+export const FTP = "FTP";
+export const NO_COMMUNICATION = "NO_COMMUNICATION";
 export const VIBER = "VIBER";
 
 export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";

package/v2Containers/CreativesContainer/index.js

@@ -5,7 +5,7 @@ import {
 } from '@capillarytech/cap-ui-library';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import classnames from 'classnames';
-import {isEmpty, get, forEach, cloneDeep} from 'lodash';
+import {isEmpty, get, forEach} from 'lodash';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
@@ -18,6 +18,7 @@ import SlideBoxHeader from './SlideBoxHeader';
 import SlideBoxFooter from './SlideBoxFooter';
 import * as constants from './constants';
 import * as commonUtil from '../../utils/common';
+
 import './index.scss';
 import * as templateActions from '../Templates/actions';
 import * as globalActions from '../Cap/actions';
@@ -142,6 +143,13 @@ class Creatives extends React.Component {
       const {channel} = templateData;
       let creativesTemplateData = {type: channel };
       switch (channel) {
+        case constants.NO_COMMUNICATION: {
+          creativesTemplateData = {
+            type: channel,
+            ...templateData,
+          };
+          break;
+        }
         case constants.SMS: {
           const formData = {
             "sms-editor": templateData.messageBody,
@@ -248,7 +256,7 @@ class Creatives extends React.Component {
         }
         case constants.VIBER: {
           const { messageBody, isDefault } = templateData;
-          const viber = JSON.parse(messageBody || '{}');
+          const viberContent = JSON.parse(messageBody || '{}').messages || [{}];
           creativesTemplateData = {
             type: constants.VIBER,
             isDefault,
@@ -257,7 +265,7 @@ class Creatives extends React.Component {
             versions: {
               base: {
                 content: {
-                  ...viber,
+                  viber: viberContent,
                 },
               },
             },
@@ -351,19 +359,10 @@ class Creatives extends React.Component {
         break;
       case constants.VIBER:
         if (template.value) {
-          const { Templates, templateData: templateDataProps } = this.props;
-          const { accountDetails: selectedAccountDetails, accountId: selectedAccountId } = templateDataProps || {};
-          const selectedViberAccount = Templates && Templates.selectedViberAccount;
-          const accountDetails = selectedAccountDetails || (selectedViberAccount ? JSON.stringify(selectedViberAccount) : '');
-          const accountId = selectedAccountId || (selectedViberAccount ? selectedViberAccount.id : '');
           const { versions } = template.value;
-          const content = cloneDeep(versions.base.content);
-          content.scenarioKey = get(accountDetails, 'configs.scenario_key');
           templateData = {
             channel,
-            accountId,
-            accountDetails,
-            messageBody: JSON.stringify(content),
+            messageBody: JSON.stringify(versions.base.content),
           };
         }
         break;
@@ -641,6 +640,7 @@ class Creatives extends React.Component {
               selectedAccount={this.props.selectedAccount}
               onShowTemplates={this.onShowTemplates}
               handleClose={this.handleCloseSlideBox}
+              onFTPSubmit={getCreativesData}
               editor={editor}
           />
           }
@@ -710,4 +710,4 @@ function mapDispatchToProps(dispatch) {
     actions: bindActionCreators(actions, dispatch),
   };
 }
-export default connect(mapStatesToProps, mapDispatchToProps)(injectIntl(Creatives));
+export default connect(mapStatesToProps, mapDispatchToProps)(injectIntl(Creatives));

package/v2Containers/FTP/_FTP.scss

@@ -0,0 +1,103 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.selected-server-name{
+	display: flex;
+	align-items: center;
+	margin-top: $CAP_SPACE_16;
+	.server-avtar, .server-name, .server-change{
+		display: inline-block;
+	}
+	.server-change{
+		margin-left: $CAP_SPACE_24;
+	}
+}
+.select-server{
+	display: inline-block;
+}
+.configure-csv-container{
+	margin-top: $CAP_SPACE_32;
+	.configure-csv, .add-column{
+		display: inline-block;
+	}
+}
+.column-selection-container{
+	width: 200px;
+	display: inline-block;
+	margin: $CAP_SPACE_04;
+}
+.column-selection-container-cid{
+	width: 120px;
+	display: inline-block;
+}
+.select-csv-column{
+	width: 80%;
+	border: 1px solid #d9d9d9 !important;
+	border-radius: 4px !important;
+	display: inline-block;
+}
+.select-csv-col-dropdown ul{
+	padding: 0 $CAP_SPACE_04;
+}
+.select-csv-col-dropdown ul li{
+	margin: $CAP_SPACE_08 0 !important;
+    padding: 0;
+    white-space: nowrap;
+    list-style: none;
+    outline: 0;
+}
+.select-csv-col-dropdown {
+	.ant-select-tree-switcher-noop, .ant-select-tree-node-content-wrapper{
+		display: inline-block !important;
+		margin: 0 !important;
+	}
+	.ant-select-tree-child-tree-open {
+		display: block !important;
+		padding: 0 0 0 $CAP_SPACE_16 !important;
+	}
+}
+.remove-csv-column{
+	display: inline-block;
+	margin-left: $CAP_SPACE_08;
+}
+.scrollable-section{
+	height: calc(100vh - 220px);
+    overflow-y: auto;
+}
+.FTP-tagList {
+	position: absolute;
+	right: 0;
+	top: -10px;
+  }
+.ftp-message-container{
+	margin-top: $CAP_SPACE_32;
+	.message-content-title{
+		margin-top: $CAP_SPACE_24;
+		position: relative;
+	}
+}
+
+.ftp-preview-container{
+	.ftp-preview-message-title{
+		margin-top: $CAP_SPACE_16;
+	}
+	.ftp-preview-message-content{
+		max-width: 450px;
+    margin-top: 4px;
+    color: $FONT_COLOR_02;
+	}
+	.ftp-preview-data-title{
+		margin-top: $CAP_SPACE_40;
+	}
+	.ftp-preview-data-col-container{
+		margin-top: $CAP_SPACE_16;
+		.ant-tag.cap-tag-v2{
+			background-color: $CAP_WHITE;
+			font-weight: 500;
+		}
+	}
+}
+
+.manage-ftp-setting-div{
+	display: flex;
+	align-items: baseline;
+}

package/v2Containers/FTP/actions.js

@@ -0,0 +1,7 @@
+import * as types from './constants';
+
+export function getFTPServers() {
+  return {
+    type: types.GET_FTP_SERVERS_REQUEST,
+  };
+}

package/v2Containers/FTP/constants.js

@@ -0,0 +1,3 @@
+export const GET_FTP_SERVERS_REQUEST = 'app/v2Containers/FTP/GET_FTP_SERVERS_REQUEST';
+export const GET_FTP_SERVERS_SUCCESS = 'app/v2Containers/FTP/GET_FTP_SERVERS_SUCCESS';
+export const GET_FTP_SERVERS_FAILURE = 'app/v2Containers/FTP/GET_FTP_SERVERS_FAILURE';