@capillarytech/creatives-library 8.0.128 → 8.0.129-alpha.5

package/config/app.js

@@ -20,7 +20,7 @@ const config = {
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
-    api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
+    api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',
     auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',

package/containers/Templates/index.js

@@ -112,7 +112,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   componentWillMount() {
     if (this.state.channel === '') {
       let channel = '';
-      
+
       switch (this.props.route.name.toLowerCase()) {
         case "sms":
           channel = 'Sms';
@@ -134,6 +134,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         case "line":
           channel = "Line";
           break;
+        case "whatsapp":
+          channel = "whatsapp";
+          this.props.actions.getWeCrmAccounts();
+          break;
         default:
           channel = '';
       }
@@ -146,7 +150,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.props.location.query.type === 'embedded' && this.isEnabledInLibraryModule("setLocale")) {
       this.setLocale();
     }
-    if (this.state.channel.toLowerCase() === 'line' || this.state.channel.toLowerCase() === 'sms' || this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill' || ((this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === 'mobilepush') && !_.isEmpty(this.props.Templates.selectedWeChatAccount))) {
+    if (this.state.channel.toLowerCase() === 'line' || this.state.channel.toLowerCase() === 'sms' || this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill' || ((this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === 'mobilepush' || this.state.channel.toLowerCase() === 'whatsapp') && !_.isEmpty(this.props.Templates.selectedWeChatAccount))) {
       const queryParams = {
         // name: this.state.searchText,
         // sortBy: this.state.sortBy,
@@ -156,6 +160,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         queryParams.wecrmToken = this.props.Templates.selectedWeChatAccount.configs.wecrm_token;
         queryParams.originalId = this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier;
       }
+      if (this.state.channel.toLowerCase() === 'whatsapp' && !_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
+        const { configs = {}, sourceAccountIdentifier = '' } = this.props.Templates.selectedWeChatAccount;
+        queryParams.hostName = this.props.Templates.selectedWeChatAccount.hostName;
+        queryParams.wabaId = sourceAccountIdentifier;
+        queryParams.accessToken = configs.accessToken;
+        queryParams.phoneId = configs.promotionalMessagingSSID;
+      }
       if (this.state.channel.toLowerCase() === "mobilepush" && !_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
         queryParams.accountId = this.props.Templates.selectedWeChatAccount.id;
       }
@@ -168,11 +179,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       //   this.props.actions.getEdmDefaultTemplates();
       // }
     }
-    
+
     window.addEventListener("message", this.handleFrameTasks);
   }
   componentWillReceiveProps(nextProps) {
-    
+
     const params = {
       name: this.state.searchText,
       sortBy: this.state.sortBy,
@@ -202,14 +213,21 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       } else if (nextProps.route.name.toLowerCase() === 'line') {
         channel = 'Line';
       }
-      // 
+      //
       this.setState({ channel }, () => {
-        if (this.state.channel.toLowerCase() === 'line' || this.state.channel.toLowerCase() === 'sms' || this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill' || (this.state.channel.toLowerCase() === 'wechat' && !_.isEmpty(nextProps.Templates.selectedWeChatAccount))) {
+        if (this.state.channel.toLowerCase() === 'line' || this.state.channel.toLowerCase() === 'sms' || this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill' || (this.state.channel.toLowerCase() === 'wechat' && !_.isEmpty(nextProps.Templates.selectedWeChatAccount)) || (this.state.channel.toLowerCase() === 'whatsapp' && !_.isEmpty(nextProps.Templates.selectedWeChatAccount))) {
           if (this.state.channel.toLowerCase() === 'wechat' && !_.isEmpty(nextProps.Templates.selectedWeChatAccount)) {
             params.wecrmId = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_app_id;
             params.wecrmToken = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_token;
             params.originalId = nextProps.Templates.selectedWeChatAccount.sourceAccountIdentifier;
           }
+          if (this.state.channel.toLowerCase() === 'whatsapp' && !_.isEmpty(nextProps.Templates.selectedWeChatAccount)) {
+            const { configs = {}, sourceAccountIdentifier = '' } = nextProps.Templates.selectedWeChatAccount;
+            params.hostName = nextProps.Templates.selectedWeChatAccount.hostName;
+            params.wabaId = sourceAccountIdentifier;
+            params.accessToken = configs.accessToken;
+            params.phoneId = configs.promotionalMessagingSSID;
+          }
           if (this.state.channel.toLowerCase() === "mobilepush" && !_.isEmpty(nextProps.Templates.selectedWeChatAccount)) {
             params.accountId = nextProps.Templates.selectedWeChatAccount.id;
           }
@@ -314,14 +332,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
     if (!nextProps.Templates.deleteTemplateInProgress && !_.isEqual(nextProps.Templates.deleteTemplateInProgress, this.props.Templates.deleteTemplateInProgress) &&
     nextProps.Templates.deleteResponse) {
-      
+
       const message = getMessageObject('success', `${this.state.channel.toUpperCase()} ${this.props.intl.formatMessage(messages['Template deleted successfully'])}`, true);
       nextProps.globalActions.addMessageToQueue(message);
       this.getAllTemplates({params, resetPage: true});
     }
 
     if (!nextProps.Templates.sendingFile && !_.isEqual(this.props.Templates.sendingFile, nextProps.Templates.sendingFile) && !nextProps.Templates.errorSendingFile) {
-      
+
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       const isLanguageSupport = (this.props.location.query.isLanguageSupport) ? this.props.location.query.isLanguageSupport : true;
       const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
@@ -369,14 +387,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   componentWillUnmount() {
-    
+
     window.removeEventListener("message", this.handleFrameTasks);
     this.props.actions.resetTemplateStoreData();
     // this.setState({defaultAccount: false});
   }
 
   onAccountSelect(value, option) {
-    
+
     this.setState({selectedAccount: value}, () => {
       const params = {
         name: this.state.searchText,
@@ -391,7 +409,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         this.props.actions.setWeChatAccount(this.props.Templates.weCrmAccounts[_.findIndex(this.props.Templates.weCrmAccounts, { name: value})]);
         params.accountId = this.props.Templates.weCrmAccounts[_.findIndex(this.props.Templates.weCrmAccounts, { name: value})].id;
       }
-      
+
       this.getAllTemplates({params, resetPage: true});
     });
   }
@@ -404,7 +422,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
     locale = this.getMappedLocale(locale);
     //locale = 'zh';
-    
+
     moment.locale(locale);
   };
 
@@ -419,7 +437,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   getAllTemplates = ({params, getNextPage, resetPage}, resetTemplates) => {
     let queryParams = params;
     let page = this.state.page;
-    
+
     if (resetTemplates) {
       queryParams.name = this.state.searchText;
       queryParams.sortBy = this.state.sortBy;
@@ -446,6 +464,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           queryParams.wecrmToken = this.props.Templates.selectedWeChatAccount.configs.wecrm_token;
           queryParams.originalId = this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier;
         }
+        if (this.state.channel.toLowerCase() === 'whatsapp' && !_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
+          const { configs = {}, sourceAccountIdentifier = '' } = this.props.Templates.selectedWeChatAccount;
+          queryParams.hostName = this.props.Templates.selectedWeChatAccount.hostName;
+          queryParams.wabaId = sourceAccountIdentifier;
+          queryParams.accessToken = configs.accessToken;
+          queryParams.phoneId = configs.promotionalMessagingSSID;
+        }
         if (this.state.channel.toLowerCase() === "mobilepush" && !_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
           queryParams.accountId = this.props.Templates.selectedWeChatAccount.id;
           if (this.state.mode) {
@@ -463,7 +488,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   };
 
   getCurrentWindow(e) {
-    
+
     const response = {
       action: e.action,
       value: 'templates',
@@ -471,9 +496,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     };
     parent.postMessage(JSON.stringify(response), '*');
   }
- 
+
   skipTemplateSelection = (e) => {
-    
+
     const type = this.props.location.query.type;
     const module = (type === 'embedded') ? this.props.location.query.module : 'default';
     if (this.state.channel.toLowerCase() === 'email') {
@@ -514,12 +539,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   handleMenuAction = (item = {}, key) => {
-    
+
     if ((item.key || '').toLowerCase() === 'uploadfile') {
       document.getElementById('filename').click();
-      
+
     } else if ((item.key || '').toLowerCase() === 'useeditor') {
-      
+
       this.toggleEdmEmailTemplateSelection();
     }
   };
@@ -688,17 +713,17 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     return result;
   }
   startLoading(ifEdit) {
-    
+
     if (ifEdit) {
       this.setState({loading: true});
     }
   }
 
   startTemplateCreation(data) {
-    
+
     if (data.edit) {
       const ifUnicode = checkUnicode(data.content);
-      
+
       const content = data.content;
       const tempData = {
         'sms-editor': content,
@@ -713,10 +738,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   handleFrameTasks = (e) => {
-    
+
     const type = e.data;
     if (typeof type === 'object') {
-      
+
       const action = type.action;
       switch (action) {
         case "startTemplateCreation":
@@ -737,11 +762,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
     switch (type) {
       case "startTemplateCreation":
-        
+
         //this.getFormData(e);
         break;
       case "validateContent":
-        
+
         this.validateContent(e);
         break;
       default:
@@ -801,7 +826,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   searchTemplate(data) {
-    
+
     this.setState({searchText: data}, () => {
       const params = {
         name: this.state.searchText,
@@ -812,6 +837,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         params.wecrmToken = this.props.Templates.selectedWeChatAccount.configs.wecrm_token;
         params.originalId = this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier;
       }
+      if (this.state.channel.toLowerCase() === 'whatsapp') {
+        const { configs = {}, sourceAccountIdentifier = '' } = this.props.Templates.selectedWeChatAccount;
+        params.hostName = this.props.Templates.selectedWeChatAccount.hostName;
+        params.wabaId = sourceAccountIdentifier;
+        params.accessToken = configs.accessToken;
+        params.phoneId = configs.promotionalMessagingSSID;
+      }
       if (this.state.channel.toLowerCase() === "mobilepush") {
         params.accountId = this.props.Templates.selectedWeChatAccount.id;
       }
@@ -830,6 +862,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         params.wecrmToken = this.props.Templates.selectedWeChatAccount.configs.wecrm_token;
         params.originalId = this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier;
       }
+      if (this.state.channel.toLowerCase() === 'whatsapp') {
+        const { configs = {}, sourceAccountIdentifier = '' } = this.props.Templates.selectedWeChatAccount;
+        params.hostName = this.props.Templates.selectedWeChatAccount.hostName;
+        params.wabaId = sourceAccountIdentifier;
+        params.accessToken = configs.accessToken;
+        params.phoneId = configs.promotionalMessagingSSID;
+      }
       if (this.state.channel.toLowerCase() === "mobilepush") {
         params.accountId = this.props.Templates.selectedWeChatAccount.id;
       }
@@ -855,14 +894,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.state.channel.toLowerCase() === 'ebill' || this.state.channel.toLowerCase() === 'email') {
       this.toggleEmailPreview();
     } else {
-      
+
       this.setState( (prevState) => ({
         previewOpen: !prevState.previewOpen}));
     }
   }
 
   toggleEdmEmailTemplateSelection = () => {
-    
+
     this.setState( (prevState) => ({
       showEdmEmailTemplates: !prevState.showEdmEmailTemplates}), () => {
       this.props.actions.getEdmDefaultTemplates();
@@ -870,13 +909,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   };
 
   deleteTemplate(template) {
-    
+
     this.props.actions.deleteTemplate(this.state.channel.toUpperCase(), template._id);
     this.setState({actionTemplate: {}});
   }
 
   duplicateTemplate(template) {
-    
+
     const duplicateObj = _.cloneDeep(template);
     duplicateObj.name = `${this.props.intl.formatMessage(messages.copyOf)} ${template.name} ${moment().format('MM-DD-YYYY HH:mm:ss')}`;
     delete duplicateObj._id;
@@ -901,7 +940,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   handleOnHoverItem(isHovering, id) {
-    
+
     if (isHovering) {
       this.setState({hoveredItem: id});
     } else {
@@ -910,7 +949,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   handleOnItemClick(isClicked, id) {
-    
+
     this.setState({clickedItem: id});
   }
 
@@ -923,7 +962,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const isLanguageSupport = this.props?.location?.query?.isLanguageSupport === TRUE;
     const isEdmSupport = this.props?.location?.query?.isEdmSupport !== FALSE;
       let getQuery = '';
-    
+
       if (template) {
     this.props.actions.setEdmTemplate({
       ...template,
@@ -934,7 +973,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
         if (this.state.channel && this.state.channel.toLowerCase() === EMAIL) {
           getQuery = (type === TYPE_EMBEDDED) ? {
-            type: TYPE_EMBEDDED, 
+            type: TYPE_EMBEDDED,
       module,
       isLanguageSupport: isLanguageSupport ? 1 : 0,
       isEdmSupport: isEdmSupport ? 1 : 0,
@@ -963,7 +1002,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   };
 
   handleEditClick(e, id, modeType, path) {
-    
+
     if (modeType && modeType !== undefined) {
       this.setState({modeType});
     }
@@ -973,9 +1012,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
     let getQuery = "";
     let pathName = path;
-    
+
     e.stopPropagation();
-    
+
     this.props.actions.resetTemplateData();
     if (this.state.channel.toLowerCase() === 'sms') {
       pathName = `/sms/edit/${id}`;
@@ -1024,7 +1063,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       templateInfo.content = template.versions.base;
       templateInfo.appName = this.props.Templates.selectedWeChatAccount.name;
     } else if (this.state.channel.toLowerCase() === "email") {
-      
+
       this.props.actions.getTemplateDetails(template._id, EMAIL);
     } else if (this.state.channel.toLowerCase() === 'ebill') {
       this.props.actions.getTemplateDetails(template._id);
@@ -1115,9 +1154,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       });
     }*/
     data.map( (template = {}) => {
-      // 
+      //
       const temp = {};
-      // 
+      //
       const updateDateTime = (moment().format('DD-MM-YYYY') === moment(template.updatedAt).format('DD-MM-YYYY')) ? moment(template.updatedAt).format('hh:mma') : moment(template.updatedAt).format('DD MMM YYYY');
       let content = '';
       temp.id = template._id;
@@ -1143,8 +1182,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           );
         }
       } else if (this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill') {
-        // 
-        
+        //
+
         const imgSrc = template && template.versions && template.versions.base ? template.versions.base.preview_http_url : '';
         const ifPreviewGenerated = template && template.versions && template.versions.base ? template.versions.base.isPreviewGenerated : 0;
         content = <img src={imgSrc || ''} alt={this.props.intl.formatMessage(messages.previewGenerateText)} width="100%" height="100%"/>;
@@ -1753,4 +1792,4 @@ export default compose(
   withMPushCreateReducer,
   withLineCreateReducer,
   withConnect,
-)(injectIntl(Templates));
+)(injectIntl(Templates));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.128",
+  "version": "8.0.129-alpha.5",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/services/api.js

@@ -381,10 +381,12 @@ export const uploadFile = ({
     data.append('appSecret', wechatParams.appSecret);
   }
   if (whatsappParams) {
-    data.append('source', whatsappParams.source);
-    data.append('wabaId', whatsappParams.wabaId);
-    data.append('accessToken', whatsappParams.accessToken);
-    data.append('hostName', whatsappParams.hostName);
+    const { source, wabaId, accessToken, access_token, phoneId, hostName } = whatsappParams;
+    data.append('source', source);
+    data.append('wabaId', wabaId);
+    data.append('accessToken', accessToken || access_token);
+    data.append('phoneId', phoneId);
+    data.append('hostName', hostName);
   }
   const url = `${API_ENDPOINT}/assets/${assetType}`;
   // return API.post(url, data, true);
@@ -400,7 +402,7 @@ export const fetchSchemaForEntity = async ({queryParams}) => {
   if (queryParams.version === "v2" && queryParams.type === "LAYOUT") {
     const schema = getSchema(queryParams.layout);
     // Added async/await to ensure the schema object is resolved before returning it
-    return await schema.then((layout) => layout).catch((err) => {
+    return schema.then((layout) => layout).catch((err) => {
       console.error(err);
     });
   }
@@ -617,7 +619,7 @@ export const getSupportVideosConfig = () => {
 
 export const getNavigationConfigApi = async () => {
   const url = `${ARYA_ENDPOINT}/navigations`;
-  return await request(url, getAPICallObject('GET'));
+  return request(url, getAPICallObject('GET'));
 };
 
 export const getLiquidTags = (content) => {