@capillarytech/creatives-library 8.0.56 → 8.0.58-alpha.0

package/components/FormBuilder/index.js

@@ -2241,7 +2241,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   errorMessage={val.errorMessage ? val.errorMessage : ''}
                   className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
                   // fluid={val.fluid}
-                  style={val.style ? val.style : {}}
+                  style={val?.style ? { 
+                    ...val?.style, 
+                    display: ((this.props?.location?.query?.module).toLowerCase() === 'dvs') ? 'block' : val?.style?.display
+                  } : {}}
                   placeholder={val.placeholder}
                   onChange={(e) => this.updateFormData(e.target.value, val)}
                   defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
@@ -2581,7 +2584,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     errorMessage={val.errorMessage ? val.errorMessage : ''}
                     className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
                     // fluid={val.fluid}
-                    style={val.style ? val.style : {}}
+                    style={val?.style ? { 
+                      ...val?.style, 
+                      display: ((this.props?.location?.query?.module).toLowerCase() === 'dvs') ? 'block' : val?.style?.display
+                    } : {}}
                     placeholder={val.placeholder}
                     onChange={(e) => this.updateFormData(e.target.value, val)}
                     value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}

package/config/app.js

@@ -17,7 +17,8 @@ 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: '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/package.json

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

package/v2Containers/Templates/actions.js

@@ -57,7 +57,8 @@ export function setWeChatAccount(weChatAccount) {
     weChatAccount,
   };
 }
-export function setChannelAccount(channel, account) {
+export function setChannelAccount(channel, account, caller) {
+  console.log('### setChannelAccount', {channel, account, caller});
   const channelTypeMapping = {
     [LINE]: types.SET_LINE_ACCOUNT,
     [WHATSAPP]: types.SET_WHATSAPP_ACCOUNT,

package/v2Containers/Templates/index.js

@@ -366,6 +366,25 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
     window.addEventListener("message", this.handleFrameTasks);
   }
+
+  getHostName(accountHostName, whatsappAccounts) {
+    // const whatsappAccounts = domainProperties?.entity?.WHATSAPP || [];
+  
+    for (const account of whatsappAccounts) {
+        const { domainName, connectionProperties, hostName } = account.domainProperties || {};
+        // if (
+        //     configs === name ||
+        //     connectionProperties?.wabaId === sourceAccountIdentifier ||
+        //     connectionProperties?.userid === sourceAccountIdentifier
+        // )
+        if (accountHostName === hostName) {
+          console.log("### getHostName domainProperties", {domainName, connectionProperties, hostName});
+            return hostName;
+        }
+    }
+    return whatsappAccounts[0]?.domainProperties?.hostName || null;
+  };
+  
   componentWillReceiveProps(nextProps = {}) {
     const params = {
       name: this.state.searchText,
@@ -382,6 +401,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (nextPropsTotalTemplatesCount && nextPropsTotalTemplatesCount !== propsTotalTemplatesCount) {
       this.setState({ templatesCount: nextPropsTotalTemplatesCount });
     }
+    console.log("### weCrmAccountsList componentWillReceiveProps 1", {selectedChannel: this.state.channel, wecrm: nextProps.Templates});
     if (!isEqual(nextProps.route.name, this.props.route.name)) {
       let channel = '';
       this.props.actions.resetTemplate();
@@ -614,9 +634,22 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
     const { weCrmAccounts: weCrmAccountsList = [], senderDetails: { hostName = '' } = {} } = get(nextProps, 'Templates', {});
     const weCrmChannels = ['wechat', WHATSAPP_LOWERCASE, ZALO_LOWERCASE];
-
+    let paramsDefault = {};
+    if (weCrmAccountsList?.length > 1 && this.state.defaultAccount && (selectedChannel === WHATSAPP_LOWERCASE) && !isEmpty(hostName)) {
+      // 2 matching fields are present between domainProperties and wecrm data
+      // sourceAccountIdentifier in wecrm data is present in domainProperties inside the connectionProperties either as wabaId or userId
+      // domainName of domainProperties data is present in wecrm as name
+      const selectedAccount = this.props.Templates.selectedWhatsappAccount;
+      // const whatsappHostName = this.getHostName(selectedAccount.name, selectedAccount.sourceAccountIdentifier, this.props.Templates.senderDetails.hostName);
+      // selectedAccount.hostName = whatsappHostName;
+      // this.props.actions.setChannelAccount(selectedChannel.toUpperCase(), selectedAccount, 'call2');
+      // const account = selectedAccount;
+      paramsDefault.accountId = selectedAccount?.sourceAccountIdentifier;
+
+      console.log("### weCrmAccountsList componentWillReceiveProps length2", {selectedChannel, hostName, selectedAccount, wecrm: weCrmAccountsList, senderDetails: nextProps.Templates.senderDetails});
+    }
     if (weCrmAccountsList.length === 1 && this.state.defaultAccount && (weCrmChannels.indexOf(selectedChannel) > -1) && !isEmpty(hostName)) {
-      let paramsDefault = {};
+      // let paramsDefault = {};
       if (this.state.channel.toLowerCase() !== ZALO_LOWERCASE) {
         paramsDefault = {
           name: this.state.searchText,
@@ -637,7 +670,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             }
 
             weCrmAccountsList[0].hostName = hostName;
-            nextProps.actions.setChannelAccount(selectedChannel.toUpperCase(), weCrmAccountsList[0]);
+            console.log("### weCrmAccountsList componentWillReceiveProps length1", {selectedChannel, hostName, wecrm: weCrmAccountsList});
+            nextProps.actions.setChannelAccount(selectedChannel.toUpperCase(), weCrmAccountsList[0], 'call1');
             if (selectedChannel === ZALO_LOWERCASE) {
               paramsDefault.username = name;
               paramsDefault.oa_id = sourceAccountIdentifier;
@@ -715,8 +749,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             params.isAccountSelection = true;
             params.host = this.props.Templates?.senderDetails?.hostName || this.props.Templates?.selectedZaloAccount?.hostName || this.state.hostName;
         }
+      } else if (selectedChannel === WHATSAPP_LOWERCASE) {
+        const selectedAccount = this.props.Templates.weCrmAccounts[findIndex(this.props.Templates.weCrmAccounts, { name: value})];
+        // const whatsappHostName = this.getHostName(selectedAccount.configs?.hostName, this.props.Templates.senderDetails.hostName);
+        // selectedAccount.hostName = whatsappHostName;
+        selectedAccount.hostName = selectedAccount.configs?.hostName;
+        this.props.actions.setChannelAccount(selectedChannel.toUpperCase(), selectedAccount, 'call2');
+        params.accountId = selectedAccount?.sourceAccountIdentifier;
+        
+        console.log("### onAccountSelect", {params, selectedChannel, value, templ: this.props.Templates});
       }
-
       this.setState({activeMode: TEMPLATES_MODE});
 
       this.getAllTemplates({params, resetPage: true});
@@ -800,6 +842,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;
+    // console.log('### getAllTemplates', {params, resetTemplates, resetPage, getNextPage});
     const { activeMode } = this.state;
     if (activeMode === ACCOUNT_SELECTION_MODE) {
       this.setTemplatesMode();
@@ -823,8 +866,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
       const channel = this.state.channel;
       if (([MOBILE_PUSH_LOWERCASE, INAPP_LOWERCASE].includes(channel.toLowerCase())) && !isEmpty(this.props.Templates.selectedWeChatAccount)) {
+        console.log('### this.props.Templates.selectedWeChatAccount', channel);
         queryParams.accountId = this.props.Templates?.selectedWeChatAccount?.id;
       }
+      if (channel?.toLowerCase() === WHATSAPP_LOWERCASE) {
+        queryParams.accountId = this.props.Templates?.selectedWeChatAccount?.sourceAccountIdentifier;
+      }
+      console.log('### getAllTemplates whatsapp if', {queryParams, resetTemplates, copyOf, templates: this.props.Templates});
       this.props.actions.getAllTemplates(channel, queryParams,`${copyOf}`);
     } else if ((resetPage || (page === 1 && this.state.templatesCount === 0) || page <= (this.state.templatesCount / this.state.perPageLimit))) {
       if (getNextPage) {
@@ -850,6 +898,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         }
         if (([MOBILE_PUSH_LOWERCASE, INAPP_LOWERCASE].includes(this.state.channel.toLowerCase())) && !isEmpty(this.props.Templates.selectedWeChatAccount)) {
           queryParams.accountId = this.props.Templates.selectedWeChatAccount.id;
+          console.log('### queryParams.accountId', {channel, queryParams});
           if (this.state.mode) {
             queryParams.mode = this.state.mode.toLowerCase();
           }
@@ -874,6 +923,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         queryParams.token = token;
         queryParams.host = hostName || this.props.Templates?.senderDetails?.hostName ||this.state.hostName;
       }
+      if (this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE) { 
+        console.log('### getAllTemplates whatsapp', {queryParams, temp: this.props.Templates});
+      }
+      console.log('### getAllTemplates whatsapp else', {queryParams, resetTemplates, copyOf});
       this.setState({ page, templatesCount }, () => {
         queryParams.page = page;
         queryParams.perPage = this.state.perPageLimit;
@@ -1390,7 +1443,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const showInAppIllustration = channelLowerCase === INAPP_LOWERCASE && isEmpty(templates);
     const noLoaderAndSearchText = isEmpty(this.state.searchText) && !isLoading;
     return (<div>
-      {[WECHAT, MOBILE_PUSH, INAPP].includes(currentChannel) && this.showAccountName()}
+      {[WECHAT, MOBILE_PUSH, INAPP, WHATSAPP].includes(currentChannel) && this.showAccountName()}
       {filterContent}
       {[WHATSAPP, ZALO].includes(currentChannel) && this.selectedFilters()}
       <CapCustomSkeleton loader={isLoading}>
@@ -2565,10 +2618,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const isInAppChannel = channel === INAPP;
     const isFacebookChannel = channel === FACEBOOK;
 
-    if ([WECHAT, MOBILE_PUSH, INAPP, LINE, ZALO].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
+    if ([WECHAT, MOBILE_PUSH, INAPP, LINE, ZALO, WHATSAPP].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
       forEach(weCrmAccounts, (account) => {
-        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || [MOBILE_PUSH, INAPP, LINE, ZALO].includes(channel)) {
+        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || [MOBILE_PUSH, INAPP, LINE, ZALO, WHATSAPP].includes(channel)) {
           if (query.type === 'embedded' && (!query.module || (query.module && query.module !== 'library'))) {
+            console.log('### Test renderAccountSelection if', {weCrmAccounts, account, query, channel});
             if (query.source_account_id && account.sourceAccountIdentifier === query.source_account_id) {
               accountOptions.push(
                 { key: isMobilePushChannel || isInAppChannel ? account.id : account.uuid,
@@ -2588,6 +2642,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               );
             }
           } else {
+            console.log('### Test renderAccountSelection else', {weCrmAccounts, account, query, channel});
             accountOptions.push(
               {
                 key: isMobilePushChannel || isInAppChannel ? account.id : account.uuid,
@@ -2650,9 +2705,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         break;
     }
     let showNoAccountHeader = isEmpty(weCrmAccounts) && !fetchingWeCrmAccounts;
-    if (channel === WHATSAPP && this.state.hostName === '') {
-      showNoAccountHeader = true;
-    }
+    // Test start
+    // if (channel === WHATSAPP && this.state.hostName === '') {
+    //   showNoAccountHeader = true;
+    // }
     if (channel === FACEBOOK && !isEmpty(campaignSettings) ) {
       const fbSetting = get(campaignSettings, 'accountSettings.socialAccountSettings.facebookAccountSettings', []);
       const { orgUnitFacebookPageSettingsMap } = fbSetting[0] || {};

package/v2Containers/Templates/sagas.js

@@ -62,7 +62,124 @@ export function* fetchUserList() {
 
 export function* fetchWeCrmAccounts(action) {
   try {
-    const result = yield call(Api.fetchWeCrmAccounts, action.source);
+    // const result = yield call(Api.fetchWeCrmAccounts, action.source);
+    const result = {
+      "success": true,
+      "status": {
+          "isError": false,
+          "code": 200,
+          "message": "success"
+      },
+      "message": "WeCRM Account details fetched",
+      "response": [
+          {
+              "id": 13694,
+              "uuid": "c41edad79aab48dcb1030722509ab322",
+              "name": "CapillaryWABA",
+              "sourceAccountIdentifier": "107499611940863",
+              "toMirror": true,
+              "sourceTypeId": 19,
+              "sourceTypeName": "WHATSAPP",
+              "isActive": true,
+              "commChannels": [
+                  "whatsapp"
+              ],
+              "configs": {
+                  "accessToken": "Bearer gDwEuRIm9icV6phixociSw==",
+                  "promotionalMessagingSSID": "919611759663",
+                  "transactionalMessagingSSID": "919611759663",
+                  hostName: "karixwhatsappbulk"
+              },
+              "attribution": {
+                  "createDate": "2025-01-10T00:00:00+05:30",
+                  "createdBy": {
+                      "id": 50716406,
+                      "code": "1724755070_",
+                      "description": "",
+                      "name": "1724755070_Aneel",
+                      "type": "ADMIN_USER",
+                      "referenceId": -1,
+                      "adminType": "GENERAL",
+                      "isActive": true,
+                      "isOuEnabled": false,
+                      "timeZoneId": 0,
+                      "currencyId": 0,
+                      "languageId": 0,
+                      "default": false
+                  },
+                  "modifiedBy": {
+                      "id": 50716406,
+                      "code": "1724755070_",
+                      "description": "",
+                      "name": "1724755070_Aneel",
+                      "type": "ADMIN_USER",
+                      "referenceId": -1,
+                      "adminType": "GENERAL",
+                      "isActive": true,
+                      "isOuEnabled": false,
+                      "timeZoneId": 0,
+                      "currencyId": 0,
+                      "languageId": 0,
+                      "default": false
+                  },
+                  "modifiedDate": "2025-01-10T00:00:00+05:30"
+              }
+          },
+          {
+              "id": 13695,
+              "uuid": "e0cd92248fc54b7eb04c470e7434f8c3",
+              "name": "gupshup_otp_nightly",
+              "sourceAccountIdentifier": "2000239981",
+              "toMirror": true,
+              "sourceTypeId": 19,
+              "sourceTypeName": "WHATSAPP",
+              "isActive": true,
+              "commChannels": [
+                  "whatsapp"
+              ],
+              "configs": {
+                  "accessToken": "qrtCAJCz",
+                  "promotionalMessagingSSID": "919289221771",
+                  "transactionalMessagingSSID": "919289221771",
+                  hostName: "gupshupwhatsappbulk"
+              },
+              "attribution": {
+                  "createDate": "2025-01-13T00:00:00+05:30",
+                  "createdBy": {
+                      "id": 50716406,
+                      "code": "1724755070_",
+                      "description": "",
+                      "name": "1724755070_Aneel",
+                      "type": "ADMIN_USER",
+                      "referenceId": -1,
+                      "adminType": "GENERAL",
+                      "isActive": true,
+                      "isOuEnabled": false,
+                      "timeZoneId": 0,
+                      "currencyId": 0,
+                      "languageId": 0,
+                      "default": false
+                  },
+                  "modifiedBy": {
+                      "id": 50716406,
+                      "code": "1724755070_",
+                      "description": "",
+                      "name": "1724755070_Aneel",
+                      "type": "ADMIN_USER",
+                      "referenceId": -1,
+                      "adminType": "GENERAL",
+                      "isActive": true,
+                      "isOuEnabled": false,
+                      "timeZoneId": 0,
+                      "currencyId": 0,
+                      "languageId": 0,
+                      "default": false
+                  },
+                  "modifiedDate": "2025-01-13T00:00:00+05:30"
+              }
+          }
+      ]
+    }
     yield put({
       type: types.GET_WECRM_ACCOUNTS_SUCCESS,
       data: result.response,
@@ -155,13 +272,15 @@ export function* getTemplateDetails(id, channel) {
 export function* getSenderDetails({
   channel,
   orgUnitId,
+  identifiers: { name, sourceAccountIdentifier } = {},
 } = {}) {
   try {
-    const apiResponse = yield call(Api.getSenderDetails, channel, orgUnitId);
+  const apiResponse = yield call(Api.getSenderDetails, channel, orgUnitId);
+  console.log("### domainProperties apiResponse", {channel, apiResponse, orgUnitId, name, sourceAccountIdentifier});
     if (!apiResponse?.errors?.length) {
       yield put({
         type: types.GET_SENDER_DETAILS_SUCCESS,
-        payload: get(apiResponse, `entity.${channel}[0].domainProperties.hostName`, ''),
+        payload: channel === 'WHATSAPP' ? get(apiResponse, `entity.${channel}`, '') : get(apiResponse, `entity.${channel}[0].domainProperties.hostName`, ''),
       });
     } else {
       yield put({

package/v2Containers/Whatsapp/index.js

@@ -232,7 +232,8 @@ export const Whatsapp = (props) => {
   //edit
   //gets account details
   useEffect(() => {
-    const accountObj = accountData.selectedWhatsappAccount || {};
+    const accountObj = accountData.selectedWhatsappAccount || accountData.selectedWeChatAccount || {};
+    console.log("### useEff ", { accountData });
     if (!isEmpty(accountObj)) {
       const {
         sourceAccountIdentifier = '',
@@ -244,6 +245,7 @@ export const Whatsapp = (props) => {
       setAccessToken(configs.accessToken || '');
       setAccountName(name);
       setHost(hostName);
+      console.log("### useEff2", { sourceAccountIdentifier, configs, name, hostName });
     }
   }, [accountData.selectedWhatsappAccount]);