@capillarytech/creatives-library 7.17.169 → 7.17.171-alpha.0

package/index.js

@@ -3,9 +3,6 @@ import capReducer from './v2Containers/Cap/reducer';
 import capSaga from './v2Containers/Cap/sagas';
 import Cap from './v2Containers/Cap/index';
 
-
-
-
 import LanguageProvider from './v2Containers/LanguageProvider';
 import LanguageProviderReducer from './v2Containers/LanguageProvider/reducer';
 import LanguageProviderSaga from './v2Containers/LanguageProvider/sagas';
@@ -19,9 +16,6 @@ import smsCreateReducer from './v2Containers/Sms/Create/reducer';
 import smsCreateSaga from './v2Containers/Sms/Create/sagas';
 
 import SmsEdit from './v2Containers/Sms/Edit/index';
-
-
-
 import smsEditReducer from './v2Containers/Sms/Edit/reducer';
 import smsEditSaga from './v2Containers/Sms/Edit/sagas';
 

package/package.json

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

package/services/api.js

@@ -525,8 +525,8 @@ export const getS3UrlFileSizes = (data) => {
   return request(url, getAPICallObject('POST', data));
 };
 
-export const getTemplateInfoById = ({id, username, oa_id, token}) => {
-  const url = `${API_ENDPOINT}/templates/v1/${id}/Zalo?username=${username}&oa_id=${oa_id}&token=${token}`;
+export const getTemplateInfoById = ({id, username, oa_id, token, host}) => {
+  const url = `${API_ENDPOINT}/templates/v1/${id}/Zalo?username=${username}&oa_id=${oa_id}&token=${token}&host=${host}`;
   const compressedTemplatesData = request(url, getAPICallObject('GET'));
   return compressedTemplatesData.then((data) => {
     const { response = '' } = data || {};

package/v2Components/FormBuilder/_formBuilder.scss

@@ -77,6 +77,7 @@
   }
 }
 
+
 .form-builder-dragger  {
   .ant-upload-drag {
     background-color: white;

package/v2Containers/CreativesContainer/index.js

@@ -124,10 +124,12 @@ export class Creatives extends React.Component {
         sourceAccountIdentifier = "",
         configs: { token = "" } = {},
       } = get(this.props, "Templates.selectedZaloAccount", {});
+      const { hostName = ''} = get(this.props, "Templates.senderDetails", {});
       this.props.zaloActions.getTemplateInfoById({
         username: name,
         oa_id: sourceAccountIdentifier,
         token,
+        host: hostName,
         id: template?._id,
         preview: true,
         actionCallback: this.actionCallback,

package/v2Containers/Templates/index.js

@@ -305,6 +305,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           channel = 'Zalo';
           activeMode = ACCOUNT_SELECTION_MODE;
           this.props.actions.getWeCrmAccounts(channel);
+          this.props.actions.getSenderDetails({
+            channel: ZALO,
+            orgUnitId: -1,
+          });
           break;
         default:
           channel = '';
@@ -631,6 +635,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             paramsDefault.username = name;
             paramsDefault.oa_id = sourceAccountIdentifier;
             paramsDefault.token = token;
+            paramsDefault.host = hostName;
           } else {
             paramsDefault.wecrmId = wecrm_app_id;
             paramsDefault.wecrmToken = wecrm_token;
@@ -695,11 +700,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               name = "",
               sourceAccountIdentifier = "",
               configs: { token = "" } = {},
+              hostName = "",
             } = setAcc || {};
             params.username = name;
             params.oa_id = sourceAccountIdentifier;
             params.token = token;
             params.isAccountSelection = true;
+            params.host = hostName || this.state.hostName;
         }
       }
 
@@ -799,6 +806,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if(this.state.channel.toLowerCase() !== ZALO_LOWERCASE) {
         queryParams.name = this.state.searchText;
         queryParams.sortBy = this.state.sortBy;
+      } else {
+        queryParams.host = this.props.Templates?.senderDetails?.hostName;
       }
       queryParams.page = this.state.page;
       queryParams.perPage = this.state.perPageLimit;
@@ -853,14 +862,17 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           name = "",
           sourceAccountIdentifier = "",
           configs: { token = "" } = {},
+          hostName = "",
         } = get(this.props, "Templates.selectedZaloAccount", {});
         queryParams.username = name;
         queryParams.oa_id = sourceAccountIdentifier;
         queryParams.token = token;
+        queryParams.host = hostName || this.state.hostName;
       }
       this.setState({ page, templatesCount }, () => {
         queryParams.page = page;
         queryParams.perPage = this.state.perPageLimit;
+        queryParams.host = this.state.hostName;
         const channel = this.state.channel;
         this.props.actions.getAllTemplates(channel, queryParams, `${copyOf}`);
       });
@@ -2107,6 +2119,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         username: name,
         oa_id: sourceAccountIdentifier,
         token: token,
+        host: this.state.hostName,
         id: template?._id,
         preview: true,
         actionCallback: this.actionCallback,

package/v2Containers/Templates/sagas.js

@@ -1,3 +1,4 @@
+import get from 'lodash/get';
 import { call, put, takeLatest, take, cancel, select } from 'redux-saga/effects';
 import { LOCATION_CHANGE } from 'react-router-redux';
 // import { schema, normalize } from 'normalizr';
@@ -176,7 +177,7 @@ export function* getSenderDetails({
     if (!apiResponse?.errors?.length) {
       yield put({
         type: types.GET_SENDER_DETAILS_SUCCESS,
-        payload: apiResponse?.entity?.WHATSAPP[0]?.domainProperties?.hostName || '',
+        payload: get(apiResponse, `entity.${channel}[0].domainProperties.hostName`, ''),
       });
     } else {
       yield put({

package/v2Containers/Templates/tests/index.test.js

@@ -69,6 +69,7 @@ describe('Test Templates container', () => {
           setChannelAccount,
           getAllTemplates,
           getUserList,
+          getSenderDetails,
         }}
         location={{
           pathname: '/Zalo',

package/v2Containers/Templates/tests/sagas.test.js

@@ -1,5 +1,5 @@
 import { expectSaga } from 'redux-saga-test-plan';
-import { take, call, takeLatest, takeEvery } from 'redux-saga/effects';
+import { take, call, takeLatest, takeEvery, put } from 'redux-saga/effects';
 import * as matchers from 'redux-saga-test-plan/matchers';
 import * as api from '../../../services/api';
 import * as types from '../constants';
@@ -10,9 +10,12 @@ import {
   getAllTemplates,
   watchGetCdnTransformationConfig,
   watchGetAllTemplates,
+  getSenderDetails,
 } from '../sagas';
 
 import * as mockData from './mockData';
+import { ZALO } from '../../CreativesContainer/constants';
+import { VIET_GUYS } from '../../Zalo/constants';
 
 describe('getCdnTransformationConfig saga', () => {
   it("handle valid response from api", () => {
@@ -134,3 +137,53 @@ describe('watchForTemplates saga', () => {
     );
   });
 });
+
+describe('getSenderDetails Saga', () => {
+  const channel = 'someChannel';
+  const orgUnitId = 'someOrgUnitId';
+  const action = { channel, orgUnitId };
+
+  it('should handle apiResponse with hostName', () => {
+    const apiResponse = {
+      entity: {
+        [channel]: [
+          {
+            domainProperties: {
+              hostName: 'example.com',
+            },
+          },
+        ],
+      },
+    };
+
+    const generator = getSenderDetails(action);
+    expect(generator.next().value).toEqual(call(api.getSenderDetails, channel, orgUnitId));
+    expect(generator.next(apiResponse).value).toEqual(
+      put({
+        type: types.GET_SENDER_DETAILS_SUCCESS,
+        payload: 'example.com',
+      })
+    );
+  });
+
+  it('should handle apiResponse without hostName', () => {
+    const apiResponse = {
+      entity: {
+        [channel]: [
+          {
+            domainProperties: {},
+          },
+        ],
+      },
+    };
+
+    const generator = getSenderDetails(action);
+    expect(generator.next().value).toEqual(call(api.getSenderDetails, channel, orgUnitId));
+    expect(generator.next(apiResponse).value).toEqual(
+      put({
+        type: types.GET_SENDER_DETAILS_SUCCESS,
+        payload: '',
+      })
+    );
+  });
+});

package/v2Containers/Whatsapp/index.js

@@ -839,7 +839,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     setUnsubscribeRequired(checked);
     if (isAuthenticationTemplate) {
       if (checked && !templateMessage?.includes(formatMessage(messages.securitySuffix))) {
-        setTemplateMessage(`${templateMessage}${formatMessage(messages.securitySuffix)}`);
+        setTemplateMessage(`${templateMessage} ${formatMessage(messages.securitySuffix)}`);
       } else {
         setTemplateMessage(formatMessage(messages.authenticationMsg));
       }
@@ -1088,14 +1088,21 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     setTemplateNameError(errorMessage);
   };
 
+  const resetCategoryRelatedStates = () => {
+    setTemplateHeader('');
+    setTemplateFooter('');
+    setExpiryMinutes(0);
+    setUnsubscribeRequired(false);
+    setCtadata({});
+    setQuickReplyData({});
+    setTemplateMediaType(WHATSAPP_MEDIA_TYPES.TEXT)
+    setGupshupMediaFile();
+    setKarixFileHandle('');
+  };
+
   const onTemplateCategoryChange = (value) => {
     if (value === WHATSAPP_CATEGORIES.authentication) {
-      setTemplateHeader('');
-      setTemplateFooter('');
-      setExpiryMinutes(0);
-      setUnsubscribeRequired(false);
-      setCtadata({});
-      setQuickReplyData({});
+      resetCategoryRelatedStates();
       setTemplateMessage(formatMessage(messages.authenticationMsg));
     } else {
       setTemplateMessage('');

package/v2Containers/Zalo/index.js

@@ -56,7 +56,7 @@ export const Zalo = (props) => {
     isFullMode,
     templateData = {},
     editData = {},
-    accountData: { selectedZaloAccount = {} } = {},
+    accountData: { selectedZaloAccount = {}, senderDetails = {} } = {},
     globalActions,
     location,
     getDefaultTags,
@@ -66,6 +66,7 @@ export const Zalo = (props) => {
     getFormData,
     selectedOfferDetails,
   } = props || {};
+  const {hostName = ''} = senderDetails;
   const { formatMessage } = intl;
   const [oa_id, setOaId] = useState('');
   const [token, setToken] = useState('');
@@ -121,11 +122,12 @@ export const Zalo = (props) => {
 
   //gets template details
   useEffect(() => {
-    if (zaloTempId && oa_id && token && username) {
+    if (zaloTempId && oa_id && token && username && hostName) {
       actions.getTemplateInfoById({
         username,
         oa_id,
         token,
+        host: hostName,
         id: zaloTempId,
         actionCallback,
       });
@@ -134,10 +136,10 @@ export const Zalo = (props) => {
     return () => {
       actions.resetTemplateInfoData();
     };
-  }, [zaloTempId, oa_id, token, username]);
+  }, [zaloTempId, oa_id, token, username, hostName]);
 
   const handleSetValues = (paramsData = []) =>
-    paramsData.map((paramData) => {
+    paramsData?.map((paramData) => {
       for (const key in varMapped) {
         if (paramData?.name === key) {
           paramData.value = varMapped[key];
@@ -339,7 +341,7 @@ export const Zalo = (props) => {
 
   const isEditDoneDisabled = () => {
     let disableCheck = false;
-    templateListParams.forEach((listParams) => {
+    templateListParams?.forEach((listParams) => {
       const { error, value } = listParams;
       const errorMessage = !error
         ? handleErrorValidation(value, listParams)
@@ -352,10 +354,11 @@ export const Zalo = (props) => {
   };
   const createPayload = () => {
     const varMap = {};
-    templateListParams.forEach((listParam) => {
-      const { name, value } = listParam;
+    templateListParams?.forEach((listParam) => {
+      const { name = '', value = '' } = listParam;
       varMap[name] = value;
-    });
+    }
+    );
     const payload = {
       channel: ZALO,
       accountId: oa_id,

package/v2Containers/Zalo/selectors.js

@@ -9,4 +9,4 @@ const makeSelectZalo = () =>
 const makeSelectAccount = () =>
   createSelector(selectAccountDomain(), (substate) => substate && substate.toJS());
 
-export { makeSelectZalo, makeSelectAccount };
+export { makeSelectZalo, makeSelectAccount};

package/v2Containers/Zalo/tests/mockData.js

@@ -11462,6 +11462,9 @@ export const accountData = {
       modifiedDate: '2023-10-16T00:00:00+05:30',
     },
   },
+  senderDetails: {
+    hostName: 'vietguyszalotrans',
+  },
 };
 
 export const templateData = {
@@ -11479,3 +11482,46 @@ export const templateConfigs = {
     ma_so1: '4',
   },
 };
+
+export const mockGapItTemplateData = [
+  {
+    _id: '354701',
+    versions: {
+      base: {
+        content: {
+          zalo: {
+            templateName: 'Test',
+            listParams: [
+              {
+                name: "Name",
+                type: "STRING",
+                require: true,
+                maxLength: 80,
+                minLength: 0,
+                acceptNull: false,
+              },
+              {
+                name: "So_dien_thoai",
+                type: "STRING",
+                require: true,
+                maxLength: 30,
+                minLength: 0,
+                acceptNull: false,
+              },
+              {
+                name: "so_du",
+                type: "STRING",
+                require: true,
+                maxLength: 30,
+                minLength: 0,
+                acceptNull: false,
+              },
+            ],
+            previewUrl: 'https://account.zalo.cloud/znspreview/h84m64E6ST_owPQVFzTilg==',
+            status: 'ENABLE',
+          },
+        },
+      },
+    },
+  },
+];

package/v2Containers/Zalo/tests/selector.test.js

@@ -5,7 +5,7 @@ describe("makeSelectZalo", () => {
   it("returns the expected object with default values when substate is empty", () => {
     // Arrange
     const state = fromJS({ zalo: {} });
-    const expected = {}
+    const expected = {};
     const selector = makeSelectZalo();
 
     // Act
@@ -17,7 +17,7 @@ describe("makeSelectZalo", () => {
   it("returns the expected object with default values when substate is empty for makeSelectAccount", () => {
     // Arrange
     const state = fromJS({ templates: {} });
-    const expected = {}
+    const expected = {};
     const selector = makeSelectAccount();
 
     // Act
@@ -25,4 +25,4 @@ describe("makeSelectZalo", () => {
     // Assert
     expect(result).toEqual(expected);
   });
-});
+});