@capillarytech/creatives-library 7.0.1 → 7.0.4

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -2,6 +2,7 @@ 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';
@@ -18,6 +19,7 @@ import CallTask from '../CallTask';
 import MobliPushEdit from '../MobilePush/Edit';
 import * as constants from './constants';
 import LineContainer from '../Line/Container';
+import Viber from '../Viber';
 const CreativesWrapper = styled.div`
   .ant-popover,
   .ant-notification,
@@ -32,7 +34,6 @@ function getWechatTemplateType(mode, templateData, weChatTemplateType = '') {
   }
   return weChatTemplateType;
 }
-
 const getLineType = ({
   slidBoxContent,
   channel,
@@ -70,6 +71,22 @@ 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,6 +152,15 @@ 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;
@@ -156,7 +182,7 @@ 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);
+    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;
   }
@@ -223,6 +249,16 @@ 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`);
     }
@@ -500,6 +536,33 @@ 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>
   );
 }

package/v2Containers/CreativesContainer/constants.js

@@ -13,5 +13,7 @@ export const CALL_TASK = "CALL_TASK";
 export const MOBILE_PUSH = "MOBILEPUSH";
 export const WECHAT = "WECHAT";
 export const FACEBOOK = "FACEBOOK";
+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} from 'lodash';
+import {isEmpty, get, forEach, cloneDeep} from 'lodash';
 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
@@ -18,7 +18,6 @@ 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';
@@ -247,6 +246,24 @@ 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;
       }
@@ -332,6 +349,23 @@ class Creatives extends React.Component {
           };
         }
         break;
+      case constants.VIBER:
+        if (template.value) {
+          const { Templates = {} } = this.props || {};
+          const selectedViberAccount = Templates && Templates.selectedViberAccount;
+          const accountDetails = selectedViberAccount ? JSON.stringify(selectedViberAccount) : '';
+          const accountId = 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;
     }
@@ -446,8 +480,8 @@ class Creatives extends React.Component {
       }
     }
 
-    const isLineChannel = templateData && templateData.type === constants.LINE;
-    if (channel === constants.LINE || isLineChannel) {
+    const isLineViberChannel = templateData && [constants.LINE, constants.VIBER].includes(templateData);
+    if ([constants.LINE, constants.VIBER].includes(channel) || isLineViberChannel) {
       showFooter = false;
     }
 

package/v2Containers/Templates/_templates.scss

@@ -46,6 +46,63 @@
         }
       }
     }
+    .VIBER {
+      &.cap-custom-card{
+        height: 241px;
+        .ant-card-body {
+         padding:0px 24px 0px;
+          .button-content {    
+            .ant-card-meta-description {
+                min-width: 108px;
+                max-width: 160px;
+                height: 24px;
+                padding: 1px 23px 2px 22px;
+                border-radius: 16px;
+                font-size: 14px;
+                font-weight: 500;
+                background-color:$CAP_PURPLE01;
+                color:$CAP_WHITE;
+                text-align:center;
+            }
+          }
+          .truncate-text-viber{
+            .ant-card-meta-description{
+              display: -webkit-box;
+              -webkit-line-clamp: 9;
+              -webkit-box-orient: vertical; 
+            }
+          }
+          .truncate-text-with-button{
+            .ant-card-meta-description{
+            -webkit-line-clamp: 8;
+            }
+          }
+          .truncate-text-with-image{
+            .ant-card-meta-description{
+            -webkit-line-clamp: 2;
+            }
+          }
+        
+        }
+      
+        &.no-image .ant-card-meta {    
+          .ant-card-meta-description {
+            word-wrap: break-word;
+          }
+        }
+    
+  
+        &.carousel-img-section {
+          .ant-card-body {
+            padding: $CAP_SPACE_24 0;
+          }
+          .ant-card-meta {
+            padding: 0;
+          }
+        }
+    }
+
+    }
   }
 }
 

package/v2Containers/Templates/actions.js

@@ -4,119 +4,126 @@
  *
  */
 
- 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 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 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,
+  };
+}

package/v2Containers/Templates/constants.js

@@ -43,6 +43,8 @@ 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';