@capillarytech/creatives-library 7.12.50 → 7.12.53

package/v2Containers/Templates/_templates.scss

@@ -588,3 +588,8 @@
   text-align: center;
   margin-top: $CAP_SPACE_44;
 }
+.whatsapp-image{
+  width: 100%;
+  max-height: 123px;
+  margin-bottom: 4px;
+}

package/v2Containers/Templates/actions.js

@@ -143,3 +143,10 @@ export function resetTemplateStoreData() {
     type: types.CLEAR_TEMPLATE_STORE_DATA,
   };
 }
+
+export function getSenderDetails(data = {}) {
+  return {
+    type: types.GET_SENDER_DETAILS_REQUEST,
+    ...data,
+  };
+}

package/v2Containers/Templates/constants.js

@@ -59,4 +59,12 @@ export const GET_ORG_LEVEL_CAMPAIGN_SETTINGS_SUCCESS =
 export const GET_ORG_LEVEL_CAMPAIGN_SETTINGS_FAILURE =
   'app/v2Containers/Templates/GET_ORG_LEVEL_CAMPAIGN_SETTINGS_FAILURE';
 
-export const MAX_WHATSAPP_TEMPLATES = 250;
+export const MAX_WHATSAPP_TEMPLATES = 1500;
+export const WARNING_WHATSAPP_TEMPLATES = 1400;
+
+export const GET_SENDER_DETAILS_REQUEST =
+  'app/v2Containers/Templates/GET_SENDER_DETAILS_REQUEST';
+export const GET_SENDER_DETAILS_SUCCESS =
+  'app/v2Containers/Templates/GET_SENDER_DETAILS_SUCCESS';
+export const GET_SENDER_DETAILS_FAILURE =
+  'app/v2Containers/Templates/GET_SENDER_DETAILS_FAILURE';

package/v2Containers/Templates/index.js

@@ -47,6 +47,7 @@ import {
   CapAlert,
   CapModal,
   CapInfoNote,
+  CapImage,
 } from '@capillarytech/cap-ui-library';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
@@ -91,11 +92,13 @@ import {
 } from '../App/constants';
 import { MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES } from './constants';
 import {
-  CATEGORY_OPTIONS,
+  TWILIO_CATEGORY_OPTIONS,
+  KARIX_CATEGORY_OPTIONS,
   STATUS_OPTIONS,
   CATEGORY as WHATSAPP_CATEGORY,
   STATUS as WHATSAPP_STATUS,
   WHATSAPP_STATUSES,
+  HOST_KARIX,
 } from '../Whatsapp/constants';
 import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory, getWhatsappCta } from '../Whatsapp/utils';
 import { getRCSContent } from '../Rcs/utils';
@@ -191,6 +194,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       smsFilter: SMS_FILTERS.ALL,
       selectedWhatsappStatus: '',
       selectedWhatsappCategory: '',
+      hostName: '',
     };
 
     this.handleOnHoverItem = this.handleOnHoverItem.bind(this);
@@ -259,7 +263,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         case WHATSAPP:
           channel = 'Whatsapp';
           activeMode = ACCOUNT_SELECTION_MODE;
-          this.props.actions.getWeCrmAccounts(channel);
+          this.props.actions.getSenderDetails({
+            channel: WHATSAPP,
+            orgUnitId: -1,
+          });
           break;
         case RCS:
           channel = 'Rcs';
@@ -294,7 +301,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.props.location.query.type === 'embedded') {
       this.props.actions.resetAccount();
     }
-    if (['line', VIBER_CHANNEL, FACEBOOK_CHANNEL, 'sms', 'email', 'ebill', RCS_LOWERCASE].includes((this.state.channel || '').toLowerCase())) {
+    if (['line', VIBER_CHANNEL, FACEBOOK_CHANNEL, 'sms', 'email', 'ebill', RCS_LOWERCASE, WHATSAPP_LOWERCASE].includes((this.state.channel || '').toLowerCase())) {
       const queryParams = {
         // name: this.state.searchText,
         // sortBy: this.state.sortBy,
@@ -421,6 +428,21 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
 
+    if (
+      selectedChannel === WHATSAPP_LOWERCASE &&
+      isEmpty(nextProps.Templates.selectedWhatsappAccount)
+    ) {
+      const { connectionProperties = {}, hostName = '' } = get(nextProps.Templates, 'senderDetails.data[0].domainProperties', {});
+      if (isEmpty(connectionProperties) || hostName === '') {
+        return;
+      }
+      this.setState({activeMode: TEMPLATES_MODE, hostName}, () => {
+        this.props.actions.setChannelAccount(WHATSAPP, { connectionProperties, hostName });
+        this.getAllTemplates({ params });
+      }
+      );
+    }
+
     if ((selectedChannel === 'wechat' || selectedChannel === 'mobilepush') && isEmpty(nextProps.Templates.selectedWeChatAccount) && (this.props.location.query.type === 'embedded') && !this.isEnabledInLibraryModule("showAccountSelection")) {
       let selectedAccount = '';
       if (isEmpty(nextProps.Templates.weCrmAccounts)) {
@@ -551,7 +573,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.setState({previewTemplate: nextProps.Templates.templateDetails});
     }
     const weCrmAccountsList = get(nextProps, `Templates.weCrmAccounts`, []);
-    const weCrmChannels = ['wechat', WHATSAPP_LOWERCASE];
+    const weCrmChannels = ['wechat'];
 
     if (weCrmAccountsList.length === 1 && this.state.defaultAccount && (weCrmChannels.indexOf(selectedChannel) > -1)) {
       const paramsDefault = {
@@ -562,16 +584,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         paramsDefault.wecrmId = weCrmAccountsList[0].configs.wecrm_app_id;
         paramsDefault.wecrmToken = weCrmAccountsList[0].configs.wecrm_token;
         paramsDefault.originalId = weCrmAccountsList[0].sourceAccountIdentifier;
-        if ([WHATSAPP_LOWERCASE].includes(selectedChannel)) {
-          nextProps.actions.setChannelAccount(
-            selectedChannel.toUpperCase(),
-            weCrmAccountsList[0],
-          );
-        } else {
           nextProps.actions.setWeChatAccount(
             weCrmAccountsList[0],
           );
-        }
       }
       this.setState({ defaultAccount: false, activeMode: TEMPLATES_MODE, selectedAccount: weCrmAccountsList[0].name });
       this.getAllTemplates({params: paramsDefault}, true);
@@ -612,7 +627,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         } else {
           this.setState({selectedAccountError: false});
         }
-      } else if ([LINE.toLowerCase(), WHATSAPP_LOWERCASE, RCS_LOWERCASE].includes(selectedChannel)) {
+      } else if ([LINE.toLowerCase(), RCS_LOWERCASE].includes(selectedChannel)) {
         this.props.actions.setChannelAccount(selectedChannel?.toUpperCase(), this.props.Templates.weCrmAccounts.find((item) => item.name === this.state.selectedAccount));
       }
 
@@ -1058,6 +1073,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           break;
         }
         case WHATSAPP: {
+          const { whatsappImageSrc = '', templateMsg} = getWhatsappContent(template);
           templateData.title = (
             <CapRow className="whatsapp-card-title">
               <CapLabel>{template.name}</CapLabel>
@@ -1066,7 +1082,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           );
           templateData.content = (
             <>
-              {getWhatsappContent(template).templateMsg}
+              {whatsappImageSrc && <CapImage src={whatsappImageSrc} className="whatsapp-image" />}
+              {templateMsg}
               {getWhatsappCta(template)}
             </>
           );
@@ -2034,7 +2051,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const rcsLoader = this.checkLoader(RCS_LOWERCASE);
 
     const wechatLoader = (((this.state.selectedAccount !== '' && getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'wechat');
-    const whatsappLoader = (((this.state.selectedAccount !== '' && getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE);
+    const whatsappLoader = this.checkLoader(WHATSAPP_LOWERCASE) || this.props.Templates?.senderDetails?.status === 'REQUEST';
     const mobilePushLoader = (((getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'mobilepush');
     const emailLoader = (
       (getAllTemplatesInProgress ||
@@ -2150,16 +2167,22 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const { selectedAccount } = this.state;
     let { channel = '' } = this.state;
     channel = channel.toUpperCase();
-    const { Templates: templates = {}, location = {} } = this.props;
+    const { Templates: templates = {}, location = {}, intl: {formatMessage}} = this.props;
     const { query = {} } = location;
-    const { weCrmAccounts = [], fetchingWeCrmAccounts = false, campaignSettings = {} } = templates;
+    const { weCrmAccounts = [], fetchingWeCrmAccounts = false, campaignSettings = {}, selectedWhatsappAccount = {} } = templates;
     const isWechatChannel = channel === WECHAT;
     const isMobilePushChannel = channel === MOBILE_PUSH;
     const isFacebookChannel = channel === FACEBOOK;
 
-    if ([WECHAT, MOBILE_PUSH, LINE, WHATSAPP].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
+    if (channel === WHATSAPP && isEmpty(selectedWhatsappAccount)) {
+      return <CapHeading>{formatMessage(messages.noAccountsPresentWhatsapp)}</CapHeading>;
+    } else if (channel === WHATSAPP && !isEmpty(selectedWhatsappAccount)) {
+      this.setTemplatesMode();
+    }
+    
+    if ([WECHAT, MOBILE_PUSH, LINE].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
       forEach(weCrmAccounts, (account) => {
-        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || [MOBILE_PUSH, LINE, WHATSAPP].includes(channel)) {
+        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || [MOBILE_PUSH, LINE].includes(channel)) {
           if (query.type === 'embedded' && (!query.module || (query.module && query.module !== 'library'))) {
             if (query.source_account_id && account.sourceAccountIdentifier === query.source_account_id) {
               accountOptions.push(
@@ -2192,11 +2215,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         }
       });
     }
-    const {
-      intl: {
-        formatMessage,
-      },
-    } = this.props;
     let accountHeader = formatMessage(messages.mobilepushAccount);
     let noAccountHeader = messages.noAccountsPresent;
     switch (channel) {
@@ -2223,11 +2241,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         noAccountHeader = messages.noAccountsPresentFacebook;
         break;
       }
-      case WHATSAPP: {
-        accountHeader = formatMessage(messages.whatsappAccount);
-        noAccountHeader = messages.noAccountsPresentWhatsapp;
-        break;
-      }
       default:
         break;
     }
@@ -2342,7 +2355,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         {
           selectedWhatsappCategory ? (
             <CapTag closable onClose={() => this.removeWhatsappFilter(WHATSAPP_CATEGORY)}>
-              {formatMessage(messages.category)}: {getWhatsappCategory(selectedWhatsappCategory)?.label || selectedWhatsappCategory}
+              {formatMessage(messages.category)}: {getWhatsappCategory(selectedWhatsappCategory, this.state.hostName)?.label || selectedWhatsappCategory}
             </CapTag>
           ) : null
         }
@@ -2510,7 +2523,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             }
             <CapSelectFilter
               placement="bottomLeft"
-              data={CATEGORY_OPTIONS}
+              data={this.state.hostName === HOST_KARIX
+                ? KARIX_CATEGORY_OPTIONS
+                : TWILIO_CATEGORY_OPTIONS}
               onSelect={this.setWhatsappCategory}
               selectedValue={this.state.selectedWhatsappCategory}
               placeholder="Category"

package/v2Containers/Templates/messages.js

@@ -124,7 +124,7 @@ export default defineMessages({
   },
   "noAccountsPresent": {
     id: `${scope}.noAccountsPresent`,
-    defaultMessage: "Push notifications are not setup for your brand",
+    defaultMessage: "Account not setup for your brand",
   },
   "noAccountsPresentWeChat": {
     id: `${scope}.noAccountsPresentWeChat`,

package/v2Containers/Templates/reducer.js

@@ -21,6 +21,7 @@ const initialState = fromJS({
     alertsSettings: {},
     reportsSettings: {},
   },
+  senderDetails: {},
 });
 
 function templatesReducer(state = initialState, action) {
@@ -175,6 +176,20 @@ function templatesReducer(state = initialState, action) {
         );
     case types.GET_ORG_LEVEL_CAMPAIGN_SETTINGS_FAILURE:
       return state.set('fetchedOrgLevelCampaignSettings', false);
+    case types.GET_SENDER_DETAILS_REQUEST:
+      return state.set('senderDetails', { status: 'REQUEST' });
+    case types.GET_SENDER_DETAILS_SUCCESS:
+      return state.set('senderDetails', {
+        status: 'SUCCESS',
+        data: action.payload,
+        errors: [],
+      });
+    case types.GET_SENDER_DETAILS_FAILURE:
+      return state.set('senderDetails', {
+        status: 'FAILURE',
+        data: [],
+        errors: action.payload,
+      });
     default:
       return state;
   }

package/v2Containers/Templates/sagas.js

@@ -148,6 +148,31 @@ export function* getTemplateDetails(id, channel) {
   }
 }
 
+export function* getSenderDetails({
+  channel,
+  orgUnitId,
+} = {}) {
+  try {
+    const apiResponse = yield call(Api.getSenderDetails, channel, orgUnitId);
+    if (!apiResponse?.errors?.length) {
+      yield put({
+        type: types.GET_SENDER_DETAILS_SUCCESS,
+        payload: apiResponse.entity.WHATSAPP,
+      });
+    } else {
+      yield put({
+        type: types.GET_SENDER_DETAILS_FAILURE,
+        payload: apiResponse.errors,
+      });
+    }
+  } catch (error) {
+    yield put({
+      type: types.GET_SENDER_DETAILS_FAILURE,
+      payload: [],
+    });
+  }
+}
+
 function* watchGetAllTemplates() {
   const watcher = yield takeLatest(types.GET_ALL_TEMPLATES_REQUEST, getAllTemplates);
   yield take(LOCATION_CHANGE);
@@ -191,6 +216,12 @@ function* watchGetTemplateDetails() {
   yield cancel(watcher);
 }
 
+function* watchGetSenderDetails() {
+  const watcher = yield takeLatest(types.GET_SENDER_DETAILS_REQUEST, getSenderDetails);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
 // All sagas to be loaded
 export default [
   watchGetAllTemplates,
@@ -201,4 +232,5 @@ export default [
   watchGetDefaultBeeTemplates,
   watchGetTemplateDetails,
   watchGetOrgLevelCampaignSettings,
+  watchGetSenderDetails,
 ];