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

package/package.json

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

package/v2Components/FormBuilder/_formBuilder.scss

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

package/v2Containers/Templates/index.js

@@ -110,7 +110,7 @@ import {
   HOST_GUPSHUP,
 } from '../Whatsapp/constants';
 import { INAPP_LAYOUT_DETAILS } from '../InApp/constants';
-import { ZALO_STATUS_OPTIONS, ZALO_STATUSES } from '../Zalo/constants';
+import { VIET_GUYS, ZALO_STATUS_OPTIONS, ZALO_STATUSES } from '../Zalo/constants';
 import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory, getWhatsappCta, getWhatsappQuickReply, getWhatsappAutoFill } from '../Whatsapp/utils';
 import { getRCSContent } from '../Rcs/utils';
 import zaloMessages from '../Zalo/messages';
@@ -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;
         }
       }
 
@@ -853,10 +860,12 @@ 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.setState({ page, templatesCount }, () => {
         queryParams.page = page;
@@ -2103,14 +2112,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         sourceAccountIdentifier = "",
         configs: { token = "" } = {},
       } = get(this.props, "Templates.selectedZaloAccount", {});
-      this.props.zaloActions.getTemplateInfoById({
+      this.state.hostName === VIET_GUYS ? this.props.zaloActions.getTemplateInfoById({
         username: name,
         oa_id: sourceAccountIdentifier,
         token: token,
         id: template?._id,
         preview: true,
         actionCallback: this.actionCallback,
-      });
+      }) : window.open(template?.versions?.base?.content?.zalo?.previewUrl, '_blank');
     }
   }
 

package/v2Containers/Templates/sagas.js

@@ -176,7 +176,7 @@ export function* getSenderDetails({
     if (!apiResponse?.errors?.length) {
       yield put({
         type: types.GET_SENDER_DETAILS_SUCCESS,
-        payload: apiResponse?.entity?.WHATSAPP[0]?.domainProperties?.hostName || '',
+        payload: 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/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/constants.js

@@ -18,6 +18,7 @@ export const LIBRARY = 'library';
 export const FULL = 'full';
 export const ALL = 'all';
 export const OUTBOUND = 'outbound';
+export const VIET_GUYS = 'vietguyszalotrans';
 
 const prefix = 'app/v2Containers/Zalo';
 export const ZALO_TEMPLATE_INFO_REQUEST = `${prefix}/ZALO_TEMPLATE_INFO_REQUEST`;

package/v2Containers/Zalo/index.js

@@ -23,7 +23,7 @@ import {
   CAP_SPACE_32,
   CAP_WHITE,
 } from '@capillarytech/cap-ui-library/styled/variables';
-import { makeSelectZalo, makeSelectAccount } from './selectors';
+import { makeSelectZalo, makeSelectAccount, makeSelectGapitTemplates } from './selectors';
 import { makeSelectMetaEntities, setInjectedTags } from '../Cap/selectors';
 import * as zaloActions from './actions';
 import './index.scss';
@@ -40,6 +40,7 @@ import {
   ERROR_ALERT,
   WARNING_ALERT,
   ZALO_STATUSES,
+  VIET_GUYS,
 } from './constants';
 import { SMS, ZALO } from '../CreativesContainer/constants';
 import messages from './messages';
@@ -56,7 +57,7 @@ export const Zalo = (props) => {
     isFullMode,
     templateData = {},
     editData = {},
-    accountData: { selectedZaloAccount = {} } = {},
+    accountData: { selectedZaloAccount = {}, senderDetails = {} } = {},
     globalActions,
     location,
     getDefaultTags,
@@ -79,6 +80,7 @@ export const Zalo = (props) => {
   );
   const [tags, updateTags] = useState([]);
   const [textAreaId, updateTextAreaId] = useState('');
+  const [host, setHost] = useState('');
   const { zaloTemplateInfoValue = {}, zaloTemplateInfoStatus = REQUEST } =
     editData;
   const {
@@ -112,16 +114,18 @@ export const Zalo = (props) => {
         configs: { token: accessToken = '' } = {},
         name = '',
       } = selectedZaloAccount;
+      const {hostName = ''} = senderDetails;
       const oaId = getDefaultTags === OUTBOUND ? zaloAccountId : accountId;
       setOaId(sourceAccountIdentifier || oaId);
       setToken(accessToken || zaloToken);
       setUsername(name || accountName);
+      setHost(hostName);
     }
   }, [selectedZaloAccount, templateData]);
 
   //gets template details
   useEffect(() => {
-    if (zaloTempId && oa_id && token && username) {
+    if (zaloTempId && oa_id && token && username && host === VIET_GUYS) {
       actions.getTemplateInfoById({
         username,
         oa_id,
@@ -129,12 +133,23 @@ export const Zalo = (props) => {
         id: zaloTempId,
         actionCallback,
       });
+    } else {
+      makeSelectGapitTemplates();
+      const {_id : gapitTemplateId = ''} = templateData;
+      const data = props.gapItTemplateData.find(template => template._id == gapitTemplateId);
+      const { templateName = "", listParams = [], previewUrl = "", status = ""} = data?.versions?.base?.content?.zalo || {};
+      setTemplateName(templateName);
+      setTemplateId(gapitTemplateId);
+      setTemplateListParams(listParams);
+      setTemplatePreviewUrl(previewUrl);
+      setZaloTemplateStatus(status);
+      updateTextAreaId(listParams[0]?.name);
     }
     //cleanup code
     return () => {
       actions.resetTemplateInfoData();
     };
-  }, [zaloTempId, oa_id, token, username]);
+  }, [zaloTempId, oa_id, token, username, host]);
 
   const handleSetValues = (paramsData = []) =>
     paramsData.map((paramData) => {
@@ -147,27 +162,39 @@ export const Zalo = (props) => {
     });
 
   const setDataForEdit = (setValues) => {
-    const {
-      name = '',
-      _id: zaloId = '',
-      versions: {
-        base: {
-          content: {
-            zalo: {
-              listParams: paramsData = [],
-              previewUrl = '',
-              status = '',
+    if(host === VIET_GUYS) {
+      const {
+        name = '',
+        _id: zaloId = '',
+        versions: {
+          base: {
+            content: {
+              zalo: {
+                listParams: paramsData = [],
+                previewUrl = '',
+                status = '',
+              } = {},
             } = {},
           } = {},
         } = {},
-      } = {},
-    } = zaloTemplateInfoValue;
-    setTemplateName(name);
-    setTemplateId(zaloId);
-    setTemplateListParams(setValues ? handleSetValues(paramsData) : paramsData);
-    setTemplatePreviewUrl(previewUrl);
-    setZaloTemplateStatus(status);
-    updateTextAreaId(paramsData[0]?.name);
+      } = zaloTemplateInfoValue;
+      setTemplateName(name);
+      setTemplateId(zaloId);
+      setTemplateListParams(setValues ? handleSetValues(paramsData) : paramsData);
+      setTemplatePreviewUrl(previewUrl);
+      setZaloTemplateStatus(status);
+      updateTextAreaId(paramsData[0]?.name);
+    } else {
+      const {_id : gapitTemplateId = ''} = templateData;
+      const data = props.gapItTemplateData.find(template => template._id == gapitTemplateId);
+      const { templateName = "", listParams = [], previewUrl = "", status = ""} = data?.versions?.base?.content?.zalo || {};
+      setTemplateName(templateName);
+      setTemplateId(gapitTemplateId);
+      setTemplateListParams(listParams);
+      setTemplatePreviewUrl(previewUrl);
+      setZaloTemplateStatus(status);
+      updateTextAreaId(listParams[0]?.name);
+    }
   };
 
   useEffect(() => {
@@ -370,6 +397,7 @@ export const Zalo = (props) => {
         varMapped: varMap,
       },
       token,
+      host,
     };
     return payload;
   };
@@ -407,7 +435,7 @@ export const Zalo = (props) => {
     });
 
   return (
-    <CapSpin spinning={zaloTemplateInfoStatus === REQUEST}>
+    <CapSpin spinning={zaloTemplateInfoStatus === REQUEST && host === VIET_GUYS}>
       <CapRow type="flex" className="cap-zalo-creatives">
         <CapColumn span={14}>
           {templateStatus && (
@@ -485,6 +513,7 @@ const mapStateToProps = createStructuredSelector({
   accountData: makeSelectAccount(),
   metaEntities: makeSelectMetaEntities(),
   injectedTags: setInjectedTags(),
+  gapItTemplateData: makeSelectGapitTemplates(),
 });
 
 const mapDispatchToProps = (dispatch) => ({

package/v2Containers/Zalo/selectors.js

@@ -9,4 +9,11 @@ const makeSelectZalo = () =>
 const makeSelectAccount = () =>
   createSelector(selectAccountDomain(), (substate) => substate && substate.toJS());
 
-export { makeSelectZalo, makeSelectAccount };
+const makeSelectGapitTemplates = () =>
+  createSelector(selectAccountDomain(), (substate) => {
+    const getAllTemplates = substate && substate.toJS();
+    const { templates = []} = getAllTemplates;
+    return templates;
+  });
+
+export { makeSelectZalo, makeSelectAccount, makeSelectGapitTemplates };