@capillarytech/creatives-library 7.1.6 → 7.1.10

package/v2Components/TemplatePreview/index.js

@@ -16,19 +16,15 @@ import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
 import { WECHAT } from '../../v2Containers/CreativesContainer/constants';
 import Carousel from '../Carousel';
-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 lineImgPlaceholder = require('../../assets/line-image-placeholder.svg');
 const lineStickerPlaceholder = require('../../assets/smiley-placeholder.svg');
 const lineVideoPlaceholder = require('../../assets/rich-video-placeholder.svg');
 const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
 const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
-
-import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08, CAP_G06, CAP_G15, CAP_PURPLE01, CAP_G16 } from '@capillarytech/cap-ui-library/styled/variables';
+import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08, CAP_G06 } from '@capillarytech/cap-ui-library/styled/variables';
 import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from '../../v2Containers/Line/Container/constants';
 
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -131,8 +127,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 { buttonText, imageURL, messageContent: viberMessageContent } = content || {};
+    const { channel, showTestAndPreviewIcon, module} = this.props;
     let smsDetails = {};
     // let smsText = '';
     if (this.props.content && this.props.charCounterEnabled) {
@@ -160,11 +155,11 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
       });
     }
     const disablePreviewAndTest = this.props.channel === 'MOBILEPUSH' ? !this.props.content.header : (this.props.channel === 'SMS' ? !this.props.content : false);
-    const showTestAndPreview = showTestAndPreviewIcon &&
+    const showTestAndPreview = showTestAndPreviewIcon && 
         channel !== WECHAT &&
         ['outbound', 'library'].includes(module);
 
-    const renderLineMultiText = (content) => {
+    const renderLineMultiText = (content)  => {
       let textCount = 0;
       return content.map((item) => {
         const { type, messageContent = '' } = item || {};
@@ -175,17 +170,12 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
               {this.props.intl.formatMessage(messages.textMessageLabel)}
               {textCount}: ({messageContent.length}/{1600} {this.props.intl.formatMessage(messages.textMessageCharacter)})
             </p>
-          );
+          )
         }
-        return null;
+        return null
       });
-    };
-    const viberSectionStyle = {
-      "padding": '3.5px 0 0',
-      'border-radius': '8px',
-      'background-color': CAP_G15,
-      'width': '81%',
-    };
+    }
+    
     const getVideoContent = ({
       video,
       actionUrl,
@@ -255,7 +245,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             />
           )
         }
-      </div>
+      </div>  
     );
 
     return (
@@ -403,8 +393,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                   marginLeft: 40,
                 }}
               >
-                <div
-                  className="sms-icon"
+                <div className="sms-icon"
                   style={{
                     left: 0,
                     top: 8,
@@ -412,7 +401,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                     width: 20,
                     height: 20,
                     background: CAP_COLOR_03,
-                    paddingRight: 5,
+                    paddingRight: 5
                   }}
                 >
                   {this.props.LineAccountName}
@@ -475,7 +464,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                                 },
                               }}
                             />
-                          </div>
+                          </div>  
                         );
                       }
                       if (type === VIDEO) {
@@ -506,7 +495,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                                 },
                               }}
                             />
-                          </div>
+                          </div>  
                         );
                       }
                       if (type === STICKER && selectedSticker) {
@@ -521,7 +510,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                               alignItems: 'center',
                             }}
                           >
-                            <CapImage
+                            <CapImage 
                               src={selectedSticker.stickerUrl}
                               style={{maxWidth: '100%', marginBottom: 5 }}
                               rest={{
@@ -530,11 +519,11 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                                   marginBottom: 5,
                                 },
                                 height: 70,
-                                onMouseOut: (e) => (e.currentTarget.src = selectedSticker.stickerUrl),
-                                onMouseOver: (e) => (e.currentTarget.src = selectedSticker.animatedStickerUrl || selectedSticker.stickerUrl),
+                                onMouseOut: e => (e.currentTarget.src = selectedSticker.stickerUrl),
+                                onMouseOver: e => (e.currentTarget.src = selectedSticker.animatedStickerUrl ||  selectedSticker.stickerUrl),
                               }}
                             />
-                          </div>
+                          </div>  
                         );
                       }
                       if ((type === IMAGE_CAROUSEL || type === TEMPLATE) && imageCarousel) {
@@ -546,7 +535,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                           >
                             <Carousel imageCarousel={imageCarousel}/>
                           </div>
-                        );
+                        )
                       }
                       return null;
                     })
@@ -557,86 +546,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             </div>
           ) : ''
         }
-            {
-          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={{
-                  maxHeight: 292,
-                  marginLeft: 28,
-                }}
-              >
-                <div
-                  className="sms-icon"
-                  style={{
-                    "width": 20,
-                    "height": 20,
-                    "margin": '0 4px 277px 0',
-                    'border-radius': '4px',
-                    'background-color': CAP_PURPLE01,
-                    'font-size': '12px',
-                    'font-weight': 900,
-                    "color": CAP_WHITE,
-                  }}
-                >
-                  {viberAccountName}
-                </div>
-                <div
-                  className="message-pop align-left"
-                  style={viberSectionStyle}>
-                  {/* Text Viber preview */}
-                  <p
-                    style={{
-                      'font-size': '10px',
-                      "color": CAP_G16,
-                      "margin": '1.5px 6px 1px 7px',
-                    }}>{viberMessageContent || ''}
-                  </p>
-                  {/* Image Viber preview */}
-                  {imageURL && <CapImage
-                    src={imageURL}
-                    alt="brand-name"
-                    rest={{
-                      style: {
-                        maxWidth: '100%',
-                        marginBottom: 5,
-                      },
-                    }}
-                    />
-                  }
-                  {/* button viber preview */}
-                  {buttonText && <div
-                    style={{
-                      'border-radius': '16px',
-                      'background-color': CAP_PURPLE01,
-                      "margin-top": '14px',
-                      'text-align': 'center',
-                      "width": '140px',
-                      "height": '20px',
-                      "margin-left": "8px",
-                    }}>
-                    <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>
-                  </div>
-                  }
-                  <div style={{ paddingBottom: 32}}></div>
-                </div>
 
-              </div>
-            </div>
-          ) : ''
-        }
           </div>
 
         </CapColumn>

package/v2Containers/App/constants.js

@@ -19,10 +19,8 @@ export const TRACK_CREATE_MPUSH = 'createMpush';
 export const TRACK_CREATE_WECHAT = 'createWeChat';
 export const TRACK_CREATE_IMAGE = 'createImage';
 export const TRACK_CREATE_LINE = 'createLine';
-export const CREATE = 'create';
-export const EDIT = 'edit';
-export const PREVIEW = 'preview';
-export const VIBER = 'viber';
+
+
 export const TRACK_EDIT_SMS = 'editSms';
 export const TRACK_EDIT_EMAIL = 'editEmail';
 export const TRACK_EDIT_MPUSH = 'editMpush';
@@ -49,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

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import get from 'lodash/get';
-import cloneDeep from 'lodash/cloneDeep';
 import TemplatesV2 from '../TemplatesV2';
 import TemplatePreview from '../../v2Components/TemplatePreview';
 import SmsCreate from '../Sms/Create';
@@ -19,8 +18,6 @@ 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,
   .ant-notification,
@@ -35,6 +32,7 @@ function getWechatTemplateType(mode, templateData, weChatTemplateType = '') {
   }
   return weChatTemplateType;
 }
+
 const getLineType = ({
   slidBoxContent,
   channel,
@@ -72,22 +70,6 @@ const getLineType = ({
   }
   return {};
 };
-const getViber = ({
-  slidBoxContent,
-  channel,
-  isFullMode,
-  templateData,
-}) => {
-  if ((channel === constants.VIBER || (slidBoxContent === 'editTemplate' && templateData && templateData.type === constants.VIBER)) && slidBoxContent !== 'templates') {
-    const isCreate = slidBoxContent === 'createTemplate';
-    const isEdit = slidBoxContent === 'editTemplate';
-    return {
-      isCreate,
-      isEdit,
-    };
-  }
-  return {};
-};
 
 function SlideBoxContent(props) {
   const {
@@ -135,7 +117,6 @@ 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};
@@ -154,15 +135,6 @@ function SlideBoxContent(props) {
     isFullMode,
     templateData,
   });
-  const {isCreate: isCreateViber = false,
-    isEdit: isEditViber = false } = getViber({
-      slidBoxContent,
-      channel,
-      isFullMode,
-      templateData,
-    });
-
-
   const isCreateSms = slidBoxContent === 'createTemplate' && channel === constants.SMS;
   const isCreateMPush = slidBoxContent === 'createTemplate' && channel === constants.MOBILE_PUSH;
   const isCreateCallTask = slidBoxContent === 'createTemplate' && channel === constants.CALL_TASK;
@@ -175,7 +147,6 @@ 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,10 +156,9 @@ function SlideBoxContent(props) {
     isEditEmailWithId = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && templateData._id;
     isEmailEditWithContent = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && !templateData._id;
     isEditFacebook = slidBoxContent === 'editTemplate' && channel === constants.FACEBOOK;
-    isPreview = slidBoxContent === 'preview' && (channel === constants.SMS || channel === constants.LINE || channel === constants.VIBER);
+    isPreview = slidBoxContent === 'preview' && (channel === constants.SMS || channel === constants.LINE);
     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) => {
@@ -253,20 +223,11 @@ function SlideBoxContent(props) {
           return previewContent;
         });
       }
-      case constants.VIBER: {
-        const template = cloneDeep(templateDataObject);
-        const { text = "", imageURL = "", buttonText = "" } = get(template, 'versions.base.content.viber', {});
-        template.content = {
-          messageContent: text,
-          imageURL,
-          buttonText,
-        };
-        return template.content;
-      }
       default:
         return get(templateDataObject, `versions.base.content`);
     }
   };
+
   return (
     <CreativesWrapper>
       {!isFullMode && slidBoxContent === 'templates' && (
@@ -289,17 +250,11 @@ 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}
@@ -361,14 +316,6 @@ function SlideBoxContent(props) {
           onTestContentClicked={onTestContentClicked}
         />
       )}
-      {isEditFTP && (
-        <FTP
-          mode="edit"
-          onFTPSubmit={onFTPSubmit}
-          messageDetails={messageDetails}
-          selectedOfferDetails={selectedOfferDetails}
-        />
-      )}
       {
         isEditCallTask &&
           <CallTask
@@ -553,33 +500,6 @@ function SlideBoxContent(props) {
           />
         )
       }
-      {isCreateViber && (
-        <Viber
-          location={creativesLocationProps}
-          onCreateComplete={onCreateComplete}
-          isFullMode={isFullMode}
-          handleClose={handleClose}
-          isGetFormData={isGetFormData}
-          getFormSubscriptionData={getFormData}
-          onShowTemplates={onShowTemplates}
-          templateData={templateData}
-          createNew/>
-      )}
-
-      {isEditViber && <Viber
-        location={creativesLocationProps}
-        params={{
-          id: templateData._id,
-        }}
-        onCreateComplete={onCreateComplete}
-        isFullMode={isFullMode}
-        handleClose={handleClose}
-        isGetFormData={isGetFormData}
-        getFormSubscriptionData={getFormData}
-        onShowTemplates={onShowTemplates}
-        templateData={templateData}
-        createNew/> }
-
     </CreativesWrapper>
   );
 }
@@ -623,6 +543,5 @@ SlideBoxContent.propTypes = {
   onCreateComplete: PropTypes.func,
   saveMessage: PropTypes.func,
   selectedAccount: PropTypes.object,
-  onFTPSubmit: PropTypes.func,
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -15,8 +15,6 @@ 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,9 +13,5 @@ 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";
 export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_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,13 +143,6 @@ 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,
@@ -253,24 +247,6 @@ class Creatives extends React.Component {
           };
           break;
         }
-        case constants.VIBER: {
-          const { messageBody, isDefault } = templateData;
-          const viber = JSON.parse(messageBody || '{}');
-          creativesTemplateData = {
-            type: constants.VIBER,
-            isDefault,
-            edit: true,
-            name: "",
-            versions: {
-              base: {
-                content: {
-                  ...viber,
-                },
-              },
-            },
-          };
-          break;
-        }
         default:
           break;
       }
@@ -356,24 +332,6 @@ 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),
-          };
-        }
-        break;
       default:
         break;
     }
@@ -488,8 +446,8 @@ class Creatives extends React.Component {
       }
     }
 
-    const isLineViberChannel = templateData && [constants.LINE, constants.VIBER].includes(templateData);
-    if ([constants.LINE, constants.VIBER].includes(channel) || isLineViberChannel) {
+    const isLineChannel = templateData && templateData.type === constants.LINE;
+    if (channel === constants.LINE || isLineChannel) {
       showFooter = false;
     }
 
@@ -648,7 +606,6 @@ class Creatives extends React.Component {
               selectedAccount={this.props.selectedAccount}
               onShowTemplates={this.onShowTemplates}
               handleClose={this.handleCloseSlideBox}
-              onFTPSubmit={getCreativesData}
               editor={editor}
           />
           }
@@ -718,4 +675,4 @@ function mapDispatchToProps(dispatch) {
     actions: bindActionCreators(actions, dispatch),
   };
 }
-export default connect(mapStatesToProps, mapDispatchToProps)(injectIntl(Creatives));
+export default connect(mapStatesToProps, mapDispatchToProps)(injectIntl(Creatives));

package/v2Containers/Email/index.js

@@ -2358,7 +2358,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const response = {
         action: "getFormData",
         postAction: this.state.getFormDataValue || 'next',
-        id : _.get(this.props, 'Email.templateDetails._id', ''),
         value: this.transformFormData(passedData),
         validity: this.state.isFormValid,
         type: 'EMAIL',

package/v2Containers/Line/Create/_lineCreate.scss

@@ -0,0 +1,64 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.line-row{
+  margin-bottom: 16px;
+}
+.slidebox-content-container {
+  overflow-x: hidden;
+}
+.line-image {
+  position: relative;
+}
+.image-container {
+  display: flex;
+  & > div {
+    min-width: 516px;
+  }
+  border-radius: 5px;
+  .image-placeholder{
+    line-height: 150px;
+  }
+  img {
+    object-fit: cover;
+    max-width: 100%;
+    max-height: 100%;
+    height: auto !important;
+    width: auto !important;
+  }
+}
+
+.pagination-container.gallery-upload {
+  height: calc(100vh - 60px);
+
+  .cap-custom-card-list-col {
+    max-width: 156px;
+    max-height: 156px;
+    display: inline-block;
+    margin-left: $CAP_SPACE_04;
+    margin-right: $CAP_SPACE_04;
+  }
+
+  .ant-card-body {
+    padding-top: 0;
+
+    .ant-card-meta-description img {
+      height: 80px;
+      width: auto;
+    }
+  }
+}
+
+.gallery-image {
+  height: 156px;
+  width: 156px;
+  border-radius: 4px;
+  margin: 3px;
+}
+
+.sms-text {
+  img {
+    display: block;
+    max-width: 100%;
+    object-fit: cover;
+  }
+}