@capillarytech/creatives-library 7.0.7 → 7.1.0

package/v2Containers/Templates/_templates.scss

@@ -54,9 +54,9 @@
           .button-content {    
             .ant-card-meta-description {
                 min-width: 108px;
-                max-width: 215px;
+                max-width: 160px;
                 height: 24px;
-                padding: 2px 0px;
+                padding: 1px 23px 2px 22px;
                 border-radius: 16px;
                 font-size: 14px;
                 font-weight: 500;

package/v2Containers/Templates/actions.js

@@ -4,126 +4,119 @@
  *
  */
 
-import * as types from './constants';
-
-export function getAllTemplates(channel, queryParams) {
-  console.log('get all templates action trigereed', channel, queryParams);
-  return {
-    type: types.GET_ALL_TEMPLATES_REQUEST, channel, queryParams,
-  };
-}
-
-export function resetTemplate() {
-  return {
-    type: types.RESET_TEMPLATE,
-  };
-}
-
-export function resetAccount() {
-  return {
-    type: types.RESET_ACCOUNT,
-  };
-}
-
-export function deleteTemplate(channel, id) {
-  console.log('delete template action trigereed', channel, id);
-  return {
-    type: types.DELETE_TEMPLATE_REQUEST, channel, id,
-  };
-}
-
-export function getUserList() {
-  return {
-    type: types.GET_USER_LIST_REQUEST,
-  };
-}
-
-export function getWeCrmAccounts(source) {
-  return {
-    type: types.GET_WECRM_ACCOUNTS_REQUEST, source,
-  };
-}
-
-export function setWeChatAccount(weChatAccount) {
-  console.log('setting wechat account', weChatAccount);
-  return {
-    type: types.SET_WECHAT_ACCOUNT,
-    weChatAccount,
-  };
-}
-
-export function setLineAccount(lineAccount) {
+ import * as types from './constants';
+
+ export function getAllTemplates(channel, queryParams) {
+   console.log('get all templates action trigereed', channel, queryParams);
+   return {
+     type: types.GET_ALL_TEMPLATES_REQUEST, channel, queryParams,
+   };
+ }
+
+ export function resetTemplate() {
+   return {
+     type: types.RESET_TEMPLATE,
+   };
+ }
+
+ export function resetAccount() {
+   return {
+     type: types.RESET_ACCOUNT,
+   };
+ }
+
+ export function deleteTemplate(channel, id) {
+   console.log('delete template action trigereed', channel, id);
+   return {
+     type: types.DELETE_TEMPLATE_REQUEST, channel, id,
+   };
+ }
+
+ export function getUserList() {
+   return {
+     type: types.GET_USER_LIST_REQUEST,
+   };
+ }
+
+ export function getWeCrmAccounts(source) {
+   return {
+     type: types.GET_WECRM_ACCOUNTS_REQUEST, source,
+   };
+ }
+
+ export function setWeChatAccount(weChatAccount) {
+   console.log('setting wechat account', weChatAccount);
+   return {
+     type: types.SET_WECHAT_ACCOUNT,
+     weChatAccount,
+   };
+ }
+
+ export function setLineAccount(lineAccount) {
   return {
     type: types.SET_LINE_ACCOUNT,
     lineAccount,
   };
 }
 
-export function setViberAccount(viberAccount) {
-  return {
-    type: types.SET_VIBER_ACCOUNT,
-    viberAccount,
-  };
-}
-
-export function handleHtmlUpload(selectedTemplate) {
-  return {
-    type: types.SET_SELECTED_LAYOUT,
-    selectedTemplate,
-  };
-}
-
-export function handleZipUpload(selectedFile, successHandler, errorHandler) {
-  return {
-    type: types.SEND_ZIPPED_FILE_REQUEST,
-    selectedFile,
-    successHandler,
-    errorHandler,
-  };
-}
-
-export function getDefaultBeeTemplates() {
-  return {
-    type: types.GET_DEAFULT_BEE_TEMPLATES_REQUEST,
-  };
-}
-
-export function setEdmTemplate(template) {
-  return {
-    type: types.SET_EDM_TEMPLATE,
-    template,
-  };
-}
-export function setBEETemplate(template) {
-  return {
-    type: types.SET_BEE_TEMPLATE,
-    template,
-  };
-}
-export function getTemplateDetails(id, channel) {
-  console.log('getting template', id, channel);
-  return {
-    type: types.GET_TEMPLATE_DETAILS_REQUEST,
-    id,
-    channel,
-  };
-}
-
-export function resetTemplateData() {
-  return {
-    type: types.RESET_TEMPLATE_DATA,
-  };
-}
-
-export function resetUploadData() {
-  console.log('clearing upload data');
-  return {
-    type: types.RESET_UPLOAD_DATA,
-  };
-}
-
-export function resetTemplateStoreData() {
-  return {
-    type: types.CLEAR_TEMPLATE_STORE_DATA,
-  };
-}
+ export function handleHtmlUpload(selectedTemplate) {
+   return {
+     type: types.SET_SELECTED_LAYOUT,
+     selectedTemplate,
+   };
+ }
+
+ export function handleZipUpload(selectedFile, successHandler, errorHandler) {
+   return {
+     type: types.SEND_ZIPPED_FILE_REQUEST,
+     selectedFile,
+     successHandler,
+     errorHandler,
+   };
+ }
+
+ export function getDefaultBeeTemplates() {
+   return {
+     type: types.GET_DEAFULT_BEE_TEMPLATES_REQUEST,
+   };
+ }
+
+ export function setEdmTemplate(template) {
+   return {
+     type: types.SET_EDM_TEMPLATE,
+     template,
+   };
+ }
+ export function setBEETemplate(template) {
+   return {
+     type: types.SET_BEE_TEMPLATE,
+     template,
+   };
+ }
+ export function getTemplateDetails(id, channel) {
+   console.log('getting template', id, channel);
+   return {
+     type: types.GET_TEMPLATE_DETAILS_REQUEST,
+     id,
+     channel,
+   };
+ }
+
+ export function resetTemplateData() {
+   return {
+     type: types.RESET_TEMPLATE_DATA,
+   };
+ }
+
+ export function resetUploadData() {
+   console.log('clearing upload data');
+   return {
+     type: types.RESET_UPLOAD_DATA,
+   };
+ }
+
+ export function resetTemplateStoreData() {
+   return {
+     type: types.CLEAR_TEMPLATE_STORE_DATA,
+   };
+ }

package/v2Containers/Templates/constants.js

@@ -43,8 +43,6 @@ export const RESET_UPLOAD_DATA = "app/v2Containers/Templates/RESET_UPLOAD_DATA";
 export const CLEAR_TEMPLATE_STORE_DATA = "app/v2Containers/Templates/CLEAR_TEMPLATE_STORE_DATA";
 
 export const SET_LINE_ACCOUNT = "app/v2Containers/Templates/SET_LINE_ACCOUNT";
-export const SET_VIBER_ACCOUNT = "app/v2Containers/Templates/SET_VIBER_ACCOUNT";
-
 
 export const GET_DEAFULT_BEE_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_REQUEST';
 export const GET_DEAFULT_BEE_TEMPLATES_SUCCESS = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_SUCCESS';

package/v2Containers/Templates/index.js

@@ -171,8 +171,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           break;
         case VIBER:
           channel = 'Viber';
-          activeMode = ACCOUNT_SELECTION_MODE;
-          this.props.actions.getWeCrmAccounts(channel);
           break;
         case LINE:
           channel = "Line";
@@ -260,8 +258,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         }
       } else if (nextProps.route.name.toLowerCase() === VIBER_CHANNEL) {
         channel = 'Viber';
-        this.setState({defaultAccount: true});
-        nextProps.actions.getWeCrmAccounts(channel);
       }
 
       this.setState({ channel }, () => {
@@ -286,22 +282,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if ((this.state.channel || '').toLowerCase() === "mobilepush" && nextProps.Templates.selectedWeChatAccount) {
       params.accountId = nextProps.Templates.selectedWeChatAccount.id;
     }
-    if (this.state.channel.toLowerCase() === VIBER_CHANNEL && isEmpty(nextProps.Templates.selectedViberAccount)) {
-      let selectedAccount = '';
-      if (isEmpty(nextProps.Templates.weCrmAccounts)) {
-        return;
-      }
-      selectedAccount = nextProps.Templates.weCrmAccounts[0];
-      const { configs = {}, name = "" } = selectedAccount;
-      const { wecrm_app_id = "", wecrm_token = "", sourceAccountIdentifier = "" } = configs;
-      this.setState({selectedAccount: name}, () => {
-        params.wecrmId = wecrm_app_id;
-        params.wecrmToken = wecrm_token;
-        params.originalId = sourceAccountIdentifier;
-        this.props.actions.setViberAccount(nextProps.Templates.weCrmAccounts[0]);
-        this.getAllTemplates({params});
-      });
-    }
     if ((this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === 'mobilepush') && isEmpty(nextProps.Templates.selectedWeChatAccount) && (this.props.location.query.type === 'embedded') && !this.isEnabledInLibraryModule("showAccountSelection")) {
       let selectedAccount = '';
       if (isEmpty(nextProps.Templates.weCrmAccounts)) {
@@ -468,7 +448,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       } else if (this.state.channel.toLowerCase() === 'line') {
         this.props.actions.setLineAccount(this.props.Templates.weCrmAccounts.find((item) => item.name === this.state.selectedAccount));
       }
-
       this.setState({activeMode: TEMPLATES_MODE});
       console.log("getAllTemplates params: ", params);
       this.getAllTemplates({params, resetPage: true});
@@ -1719,7 +1698,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const isMobilePushChannel = channel === MOBILE_PUSH;
     const isLineChannel = channel === LINE;
 
-
     if ((isWechatChannel || isMobilePushChannel || isLineChannel) && !isEmpty(weCrmAccounts)) {
       forEach(weCrmAccounts, (account) => {
         if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || isMobilePushChannel || isLineChannel) {
@@ -1778,10 +1756,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         noAccountHeader = messages.noAccountsPresentLine;
         break;
       }
-      case VIBER: {
-        noAccountHeader = messages.noAccountsPresentViber;
-        break;
-      }
       default:
         break;
     }
@@ -1840,9 +1814,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   render() {
     const isFullMode = this.isFullMode();
     const { activeMode, channel, wechatFilter, lineFilter } = this.state;
-    const showForViber = (channel.toLowerCase() !== VIBER_CHANNEL ||
-      (channel.toLowerCase() === VIBER_CHANNEL && !this.props.isFullMode && isEmpty(get(this.props, 'Templates.selectedViberAccount', {}))));
-    if (activeMode === ACCOUNT_SELECTION_MODE && showForViber ) {
+    if (activeMode === ACCOUNT_SELECTION_MODE) {
       return this.renderAccountSelection();
     }
     const pageHeader = "";

package/v2Containers/Templates/messages.js

@@ -366,8 +366,4 @@ export default defineMessages({
     id: `${scope}.duplicatingTemplate`,
     defaultMessage: 'Duplicating template...'
   },
-  noAccountsPresentViber: {
-    id: `${scope}.noAccountsPresentViber`,
-    defaultMessage: "Viber accounts are not setup for your brand",
-  },
 });

package/v2Containers/Templates/reducer.js

@@ -73,8 +73,6 @@ function templatesReducer(state = initialState, action) {
         .set('selectedWeChatAccount', fromJS(action.weChatAccount));
     case types.SET_LINE_ACCOUNT:
       return state.set('selectedLineAccount', fromJS(action.lineAccount));
-    case types.SET_VIBER_ACCOUNT:
-      return state.set('selectedViberAccount', fromJS(action.viberAccount));
     case types.RESET_ACCOUNT:
       return state
         .remove('selectedWeChatAccount')

package/v2Containers/TemplatesV2/index.js

@@ -24,6 +24,7 @@ import CallTask from '../CallTask';
 import Facebook from '../Facebook';
 import Viber from '../Viber';
 import Line from '../Line/Container';
+import FTP from '../FTP';
 import Gallery from '../Assets/Gallery';
 import withStyles from '../../hoc/withStyles';
 import styles, { CapTabStyle } from './TemplatesV2.style';
@@ -72,6 +73,10 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       if (!channelsToHide.includes('facebook')) {
         filteredPanes.push({content: <div></div>, tab: intl.formatMessage(messages.facebook), key: 'facebook'});
       }
+      if (!channelsToHide.includes('FTP')) {
+        filteredPanes.push({content: <></>, tab: intl.formatMessage(messages.FTP), key: 'ftp'});
+        defaultChannel = 'FTP';
+      }
     }
 
     filteredPanes = filteredPanes.map( (pane) => {
@@ -168,6 +173,10 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       />
     )
 
+  getFTPComponent = () => (
+    <FTP mode={this.props.FTPMode} {...this.props} />
+  );
+
   getTemplatesComponent(channel) {
     // const templates = this.props.Templates[`${channel}Templates`];
     let query = {};
@@ -176,6 +185,9 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       if (channel === 'line') {
         return this.getLineComponent();
       }
+      if (channel === 'ftp') {
+        return this.getFTPComponent();
+      }
     }
     const location = {pathname: `/${channel}`, search: '', query};
     switch (channel) {
@@ -274,6 +286,7 @@ TemplatesV2.propTypes = {
   messageDetails: PropTypes.object,
   cap: PropTypes.object,
   authData: PropTypes.object,
+  FTPMode: PropTypes.string,
 };
 
 TemplatesV2.defaultProps = {

package/v2Containers/TemplatesV2/messages.js

@@ -34,6 +34,10 @@ export default defineMessages({
     id: 'creatives.containersV2.TemplatesV2.email',
     defaultMessage: 'Email',
   },
+  FTP: {
+    id: 'creatives.containersV2.TemplatesV2.FTP',
+    defaultMessage: 'FTP',
+  },
   pushNotification: {
     id: 'creatives.containersV2.TemplatesV2.pushNotification',
     defaultMessage: 'Push notification',

package/v2Containers/Viber/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
 import { injectIntl, FormattedMessage } from 'react-intl';
-import { isUrl } from '../Line/Container/Wrapper/utils';
+// import { connect } from 'react-redux';
 import { get } from 'lodash';
 import withCreatives from '../../hoc/withCreatives';
 import {
@@ -64,11 +64,10 @@ const Viber = (props) => {
     handleClose,
     onCreateComplete,
     params,
-    templateData = {},
+    templateData,
     actions,
     viber = {},
     getFormSubscriptionData,
-    viberData = {},
   } = props || {};
 
   const { formatMessage } = intl;
@@ -85,8 +84,6 @@ const Viber = (props) => {
   const [isEditFlow, checkEditFlow] = useState(false);
   const [messageTitle, updateTextMessageTitle] = useState('');
   const [errorMessageTitle, updateErrorMessageTitle] = useState(false);
-  const [buttonURLErrorMessage, updateButtonURLErrorMessage] = useState(false);
-  const [accountName, updateAccountName] = useState("");
 
   const StyledHeader = styled(CapHeader)`
   margin-bottom: 14px;
@@ -117,12 +114,7 @@ const Viber = (props) => {
   }, [paramObj.id]);
 
   useEffect(() => {
-    const { name = '' } = viberData.selectedViberAccount || {};
-    updateAccountName(name);
-  }, [viberData.selectedViberAccount]);
-
-  useEffect(() => {
-    if ((params && params.id) || templateData.edit) {
+    if (params && params.id) {
       const { viber: editViberContent = {} } = get(templateData, `versions.base.content`) || get(viber, `templateDetails.versions.base.content`) || {};
       const editMessageTitle = (templateData || {}).name || get(viber, 'templateDetails.name');
       updateTextMessageTitle(editMessageTitle);
@@ -138,7 +130,7 @@ const Viber = (props) => {
   }, [viber[`templateDetails`] || templateData]);
 
 // Common container for TEXT, IMAGE and Button
-  const container = (icon, message, data, showOptional) => (<CapRow
+  const container = (icon, message, data) => (<CapRow
     style={{
       border: `solid 1px ${CAP_G07}`,
       marginBottom: '20px',
@@ -146,8 +138,7 @@ const Viber = (props) => {
     <CapRow style={{ padding: `${CAP_SPACE_12} ${CAP_SPACE_24} 0px` }}>
       <CapIcon type={icon}/>
       <CapHeading type="h4" style={{position: 'absolute', display: 'inline-block', top: '13px', paddingLeft: '10px'}}>
-        {message} {" "}
-        {showOptional && <CapLabel.CapLabelInline type="label14">{formatMessage(messages.optional)}</CapLabel.CapLabelInline>}
+        {message}
       </CapHeading>
     </CapRow>
     <CapDivider className="cap-divider-margin"/>
@@ -490,12 +481,7 @@ const Viber = (props) => {
   };
 
   const onChangeButtonUrl = ({ target: { value } }) => {
-    let errorMessage = false;
     updateButtonUrl(value);
-    if (!isUrl(value)) {
-      errorMessage = formatMessage(messages.inValidUrliErrorMessage);
-    }
-    updateButtonURLErrorMessage(errorMessage);
   };
   const getPreviewSection = () =>
     // const accountName = get(lineData, 'selectedLineAccount.name', '');
@@ -503,8 +489,7 @@ const Viber = (props) => {
        <TemplatePreview
          channel="VIBER"
          content={{imageURL: imagePreview, buttonText, messageContent}}
-         viberAccountName={((accountName[0] || "")).toUpperCase()}
-         viberBrandName={accountName}
+         viberAccountName={"MUJI"}
         />
     );
 
@@ -516,7 +501,6 @@ const Viber = (props) => {
       defaultValue={buttonText}
       value={buttonText}
       style={{paddingBottom: '11px'}}
-      maxLength={20}
     />
     <CapInput
       id="viber-button-url"
@@ -525,7 +509,6 @@ const Viber = (props) => {
       defaultValue={buttonURL}
       value={buttonURL}
       label={formatMessage(messages.buttonUrl)}
-      errorMessage={buttonURLErrorMessage}
       />
   </>);
 
@@ -627,11 +610,7 @@ const Viber = (props) => {
       return true;
     }
     // if button is being added than button url and button Text both are mandatory
-    if (( trimedButtonText === '' && trimedButtonUrl !== '') || ( trimedButtonText !== '' && trimedButtonUrl === '')) {
-      return true;
-    }
-    // if button url is not valid url
-    if (buttonURLErrorMessage) {
+    if (( trimedButtonText === '' && trimedButtonUrl !== '') || ( trimedButtonUrl !== '' && trimedButtonUrl === '')) {
       return true;
     }
     return false;
@@ -644,6 +623,7 @@ const Viber = (props) => {
           <CapColumn span={14}>
             <StyledHeader
               title={formatMessage(messages.viberCreativeTitle)}
+              description={formatMessage(messages.viberCreativeDesc)}
               size="regular"
             />
             {
@@ -664,9 +644,9 @@ const Viber = (props) => {
               )
               : null
             }
-            {container("message", <FormattedMessage {...messages.message} />, TextAreaViber, false)}
-            {container("image", <FormattedMessage {...messages.image} />, ImageViber, true)}
-            {container("button", <FormattedMessage {...messages.button} />, ButtonViber, true)}
+            {container("message", <FormattedMessage {...messages.message} />, TextAreaViber)}
+            {container("image", <FormattedMessage {...messages.image} />, ImageViber)}
+            {container("button", <FormattedMessage {...messages.button} />, ButtonViber)}
             <div style={{marginBottom: '100px'}}/>
           </CapColumn>
           <CapColumn span={6}>

package/v2Containers/Viber/messages.js

@@ -14,6 +14,10 @@ export default defineMessages({
     id: `${scope}.viberCreativeTitle`,
     defaultMessage: "Viber creative",
   },
+  viberCreativeDesc: {
+    id: `${scope}.viberCreativeDesc`,
+    defaultMessage: "Select any of the existing templates or create new",
+  },
   message: {
     id: `${scope}.message`,
     defaultMessage: 'Message',
@@ -130,12 +134,4 @@ export default defineMessages({
     id: `${scope}.emptyTitleErrorMessage`,
     defaultMessage: 'Template title can not be empty',
   },
-  optional: {
-    id: `${scope}.optional`,
-    defaultMessage: '(optional)',
-  },
-  inValidUrliErrorMessage: {
-    id: `${scope}.inValidUrliErrorMessage`,
-    defaultMessage: 'Button URL is not valid',
-  },
 });