@capillarytech/creatives-library 8.0.69 → 8.0.71

package/package.json

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

package/v2Containers/CreativesContainer/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Bugsnag from "@bugsnag/js";
 import {
   CapSlideBox,
   CapHeader,
@@ -139,21 +140,27 @@ export class Creatives extends React.Component {
       templateData.updatedByName = commonUtil.getUserNameById(userId, usersList);
       this.setState({ slidBoxContent: constants.PREVIEW, templateData });
     } else {
-      const {
-        name = "",
-        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,
-      });
+      if (get(template, 'versions.base.content.zalo.previewUrl')) {
+        commonUtil.handlePreviewInNewTab(
+          template.versions.base.content.zalo.previewUrl
+        );
+      } else {
+        const {
+          name = "",
+          sourceAccountIdentifier = "",
+          configs: { token = "" } = {},
+          hostName = ""
+        } = get(this.props, "Templates.selectedZaloAccount", {});
+        this.props.zaloActions.getTemplateInfoById({
+          username: name,
+          oa_id: sourceAccountIdentifier,
+          token,
+          host: hostName || this.props?.hostName || this.props.Templates?.senderDetails?.hostName,
+          id: template?._id,
+          preview: true,
+          actionCallback: this.actionCallback,
+        });
+      }
     }
   };
 

package/v2Containers/Templates/index.js

@@ -12,6 +12,7 @@ import styled from 'styled-components';
 import {injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import moment from "moment";
+import Bugsnag from "@bugsnag/js";
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
 import isEqual from 'lodash/isEqual';
@@ -50,7 +51,8 @@ import {
   CapImage,
   CapStatus,
   CapColoredTag,
-} from '@capillarytech/cap-ui-library';
+  CapSpin
+} from "@capillarytech/cap-ui-library";
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
 import { makeSelectCreate as makeSelectCreateMobilePush } from '../MobilePush/Create/selectors';
@@ -227,6 +229,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       hostName: '',
       searchedZaloTemplates: [],
       searchingZaloTemplate: false,
+      zaloPreviewItemId: {},
     };
 
     this.handleOnHoverItem = this.handleOnHoverItem.bind(this);
@@ -533,8 +536,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         params.accountId = Number(query.account_id);
         this.getAllTemplates({params});
       }
-    }  
-  
+    }
+
 
     if (selectedChannel === "ebill" && nextProps.CreateEbill && nextProps.CreateEbill.createResponse && nextProps.CreateEbill.createResponse.templateId && nextProps.CreateEbill.createResponse.templateId !== '') {
       const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
@@ -693,6 +696,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
     const zaloPreviewUrl = get(nextProps, 'Zalo.zaloTemplatePreviewData.versions.base.content.zalo.previewUrl', '');
     if (zaloPreviewUrl && this.state.channel.toLowerCase() === ZALO_LOWERCASE) {
+        this.setState({ zaloPreviewItemId: {} });
         handlePreviewInNewTab(zaloPreviewUrl);
         this.props.zaloActions.resetTemplatePreviewData();
     }
@@ -920,7 +924,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
       if (
         this.state.channel.toLowerCase() === ZALO_LOWERCASE &&
-        !isEmpty(this.props.Templates?.selectedZaloAccount) && 
+        !isEmpty(this.props.Templates?.selectedZaloAccount) &&
         !params?.isAccountSelection && !isEmpty(this.props.Templates?.selectedZaloAccount?.hostName)
       ) {
         const {
@@ -982,7 +986,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         default:
           return selectedWhatsappCategory === category;
       }
-    } 
+    }
     return true;
   }
   filterWhatsappTemplates = (templates) => {
@@ -1072,7 +1076,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     ) : <>{children}</>
   };
 
-  getTemplateDataForGrid = ({templates = [], handlers, filterContent, channel, isLoading, loadingTip}) => {
+  getTemplateDataForGrid = ({templates = [], handlers, filterContent, channel, isLoading, loadingTip, previewTemplateId }) => {
     const currentChannel = channel.toUpperCase();
     const {channel: stateChannel} = this.state;
     const channelLowerCase = stateChannel.toLowerCase();
@@ -1104,11 +1108,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         ? this.getCreativesEditText(channelLowerCase)
         : messages.selectButton
       );
-
+    
     const cardDataList = filteredTemplates && filteredTemplates.length ? map(filteredTemplates, (template) => {
       const androidBodyType = get(template, 'versions.base.content.ANDROID.bodyType');
       const iosBodyType = get(template, 'versions.base.content.IOS.bodyType');
       const inappBodyType = androidBodyType || iosBodyType;
+      const isZaloPreviewLoading = previewTemplateId === template?._id;
       const templateData = {
         key: `${currentChannel}-card-${template?.name}`,
         title: (
@@ -1131,20 +1136,27 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           </span>
         ),
         extra: [
-          this.getHoverComponent(
-            <CapIcon
-              className={`view-${channelLowerCase}`}
-              style={{ marginRight: "16px" }}
-              type="eye"
-              onClick={() => {
-                if (!this.props.isFullMode || this.props.isDltFromRcs) {
-                  this.props.handlePeviewTemplate(template);
-                } else {
-                  handlers.handlePreviewClick(template);
-                }
-              }}
-            />
-          ),
+          currentChannel === ZALO && isZaloPreviewLoading ? (
+            <CapSpin style={{ marginRight: "16px", position: "static", display: "inline" }} spinning />
+          ) : (
+            this.getHoverComponent(
+              <CapIcon
+                className={`view-${channelLowerCase}`}
+                style={{ marginRight: "16px" }}
+                type="eye"
+                onClick={() => {
+                  if (!this.props.isFullMode || this.props.isDltFromRcs) {
+                    if (!get(template, "versions.base.content.zalo.previewUrl", "")) {
+                      this.setState({ zaloPreviewItemId: template?._id });
+                    }
+                    this.props.handlePeviewTemplate(template);
+                  } else {
+                    handlers.handlePreviewClick(template);
+                  }
+                }}
+              />
+            )
+          )
         ],
         hoverOption: (
           <CapButton
@@ -1153,15 +1165,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 ? `edit-${channelLowerCase}`
                 : `select-${channelLowerCase}`
             }
-            onClick={(e) =>
+            onClick={e =>
               handlers.handleEditClick(e, template, undefined, undefined, {
-                account: this.state.selectedAccount,
+                account: this.state.selectedAccount
               })
             }
           >
             {hoverButtonText}
           </CapButton>
-        ),
+        )
       };
       const {
         versions: {
@@ -1220,7 +1232,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           break;
         }
         case MOBILE_PUSH:
-        case INAPP: 
+        case INAPP:
           templateData.content = template;
           break;
         case WECHAT:
@@ -2188,21 +2200,26 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         this.setState({ previewTemplate: templateInfo });
       }
     } else {
-      const {
-        name = "",
-        sourceAccountIdentifier = "",
-        configs: { token = "" } = {},
-        hostName = "",
-      } = get(this.props, "Templates.selectedZaloAccount", {});
-      this.props.zaloActions.getTemplateInfoById({
-        username: name,
-        oa_id: sourceAccountIdentifier,
-        token: token,
-        host: hostName || this.state.hostName || this.props.Templates?.senderDetails?.hostName,
-        id: template?._id,
-        preview: true,
-        actionCallback: this.actionCallback,
-      });
+      if (get(template, "versions.base.content.zalo.previewUrl", "")) {
+        handlePreviewInNewTab(template.versions.base.content.zalo.previewUrl);
+      } else {
+        this.setState({ zaloPreviewItemId: template._id });
+        const {
+          name = "",
+          sourceAccountIdentifier = "",
+          configs: { token = "" } = {},
+          hostName = ""
+        } = get(this.props, "Templates.selectedZaloAccount", {});
+        this.props.zaloActions.getTemplateInfoById({
+          username: name,
+          oa_id: sourceAccountIdentifier,
+          token,
+          host: hostName || this.state.hostName || this.props.Templates?.senderDetails?.hostName,
+          id: template?._id,
+          preview: true,
+          actionCallback: this.actionCallback
+        });
+      }
     }
   }
 
@@ -3182,70 +3199,130 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     return (
       <>
         {activeMode === ACCOUNT_CHANGE_MODE && this.renderAccountSelection()}
-        <div className={`creatives-templates-list ${this.props.isFullMode ? 'full-mode' : 'library-mode'}`}>
-          <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
-
-          {
-            channel.toLowerCase() === WHATSAPP_LOWERCASE && showWhatsappCountWarning ? (
-              <CapAlert message={whatsappCountExceedText} type="info" />
-            ) : null
-          }
+        <div
+          className={`creatives-templates-list ${
+            this.props.isFullMode ? "full-mode" : "library-mode"
+          }`}
+        >
+          <input
+            type="file"
+            id="filename"
+            style={{ display: "none" }}
+            accept=".zip, .html, .htm"
+            onChange={event =>
+              this.handleFileUpload(event, { files: event.target.files })
+            }
+          />
 
-          {
-            channel.toLowerCase() === WHATSAPP_LOWERCASE && !isFullMode ? (
-              <CapInfoNote message={formatMessage(messages.whatsappOnlyApprovedTemplates)} />
-            ) : null
-          }
+          {channel.toLowerCase() === WHATSAPP_LOWERCASE &&
+          showWhatsappCountWarning ? (
+            <CapAlert message={whatsappCountExceedText} type="info" />
+          ) : null}
 
-          {
-            channel.toLowerCase() === ZALO_LOWERCASE && !isFullMode ? (
-              <CapInfoNote message={formatMessage(messages.zaloOnlyApprovedTemplates)} />
-            ) : null
-          }
+          {channel.toLowerCase() === WHATSAPP_LOWERCASE && !isFullMode ? (
+            <CapInfoNote
+              message={formatMessage(messages.whatsappOnlyApprovedTemplates)}
+            />
+          ) : null}
 
+          {channel.toLowerCase() === ZALO_LOWERCASE && !isFullMode ? (
+            <CapInfoNote
+              message={formatMessage(messages.zaloOnlyApprovedTemplates)}
+            />
+          ) : null}
           <CapRow>
-            <Pagination templateInProgress={this.props.Templates.getAllTemplatesInProgress} onPageChange={templates.length ? this.onPaginationChange : () => {}} paginationSelector="pagination-container">
-              {this.getTemplateDataForGrid({ isLoading, loadingTip, channel: this.state.channel, templates: this.state.searchingZaloTemplate ? this.state.searchedZaloTemplates : this.props.TemplatesList, filterContent, handlers: { handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
+            <Pagination
+              templateInProgress={
+                this.props.Templates.getAllTemplatesInProgress
+              }
+              onPageChange={
+                templates.length ? this.onPaginationChange : () => {}
+              }
+              paginationSelector="pagination-container"
+            >
+              {this.getTemplateDataForGrid({
+                previewTemplateId: this.state.zaloPreviewItemId,
+                isLoading,
+                loadingTip,
+                channel: this.state.channel,
+                templates: this.state.searchingZaloTemplate
+                  ? this.state.searchedZaloTemplates
+                  : this.props.TemplatesList,
+                filterContent,
+                handlers: {
+                  handlePreviewClick: this.handlePreviewClick,
+                  handleEditClick: this.handleEditClick
+                }
+              })}
             </Pagination>
-            {showNoTemplatesFound &&
-            <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
-              <CapHeading type="h6">{this.props.intl.formatMessage(messages.noTemplatesFound)}</CapHeading>
-            </div>}
+            {showNoTemplatesFound && (
+              <div
+                style={{
+                  height: "65vh",
+                  textAlign: "center",
+                  lineHeight: "65vh"
+                }}
+              >
+                <CapHeading type="h6">
+                  {this.props.intl.formatMessage(messages.noTemplatesFound)}
+                </CapHeading>
+              </div>
+            )}
           </CapRow>
 
-
           <CapRow>
-            {!isEmpty(creativesParams.mode) && isFullMode && //creatives container for fullmode
-            <CreativesContainer
-              key={creativesParams.mode}
-              messageDetails={{type: "default"}}
-              creativesMode={creativesParams.mode}
-              messages={messages}
-              isFullMode={isFullMode}
-              templateData={creativesParams}
-              getCreativesData={() => { this.onCreateComplete(true); }}
-              channel={route.name.toUpperCase()}
-              handleCloseCreatives={this.onCreateComplete}
-              selectedWeChatAccount={get(this.props, 'Templates.selectedWeChatAccount', {})}
-              selectedAccount={this.state.selectedAccount}
-            />
-            }
+            {!isEmpty(creativesParams.mode) &&
+            isFullMode && ( //creatives container for fullmode
+                <CreativesContainer
+                  key={creativesParams.mode}
+                  messageDetails={{ type: "default" }}
+                  creativesMode={creativesParams.mode}
+                  messages={messages}
+                  isFullMode={isFullMode}
+                  templateData={creativesParams}
+                  getCreativesData={() => {
+                    this.onCreateComplete(true);
+                  }}
+                  channel={route.name.toUpperCase()}
+                  handleCloseCreatives={this.onCreateComplete}
+                  selectedWeChatAccount={get(
+                    this.props,
+                    "Templates.selectedWeChatAccount",
+                    {}
+                  )}
+                  selectedAccount={this.state.selectedAccount}
+                />
+              )}
           </CapRow>
           <CapRow>
-
-            {(this.state.channel.toLowerCase() === 'ebill' || this.state.channel.toLowerCase() === 'email') && htmlPreviewContent && <EmailPreview
-              header={previewHeader}
-              content={htmlPreviewContent}
-              show={this.state.showHtmlPreview}
-              device={this.state.device}
-              handleClose={this.toggleEmailPreview}
-              changePreviewDevice={this.changePreviewDevice}
-              versions={get(this.state, 'previewTemplate.versions', {})}
-              lastModified={this.state.previewTemplate ? this.state.previewTemplate.updatedAt : ''}
-              updatedByName={commonUtil.getUserNameById(parseInt(this.state.previewTemplate.updatedBy, 10), commonUtil.getMergedUserList(this.props.Templates.userList))}
-          />}
+            {(this.state.channel.toLowerCase() === "ebill" ||
+              this.state.channel.toLowerCase() === "email") &&
+              htmlPreviewContent && (
+                <EmailPreview
+                  header={previewHeader}
+                  content={htmlPreviewContent}
+                  show={this.state.showHtmlPreview}
+                  device={this.state.device}
+                  handleClose={this.toggleEmailPreview}
+                  changePreviewDevice={this.changePreviewDevice}
+                  versions={get(this.state, "previewTemplate.versions", {})}
+                  lastModified={
+                    this.state.previewTemplate
+                      ? this.state.previewTemplate.updatedAt
+                      : ""
+                  }
+                  updatedByName={commonUtil.getUserNameById(
+                    parseInt(this.state.previewTemplate.updatedBy, 10),
+                    commonUtil.getMergedUserList(this.props.Templates.userList)
+                  )}
+                />
+              )}
             <CapSlideBox
-              header={(<h3>{this.props.intl.formatMessage(messages.layoutSelection)}</h3>)}
+              header={
+                <h3>
+                  {this.props.intl.formatMessage(messages.layoutSelection)}
+                </h3>
+              }
               width={60}
               content={cmsTemplateSelectionContent}
               show={this.state.showEdmEmailTemplates}
@@ -3255,7 +3332,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             />
             {this.renderDeleteConfirmationModal()}
           </CapRow>
-
         </div>
       </>
     );

package/v2Containers/Templates/sagas.js

@@ -7,6 +7,8 @@ import * as Api from '../../services/api';
 import * as types from './constants';
 import { saveCdnConfigs, removeAllCdnLocalStorageItems } from '../../utils/cdnTransformation';
 import { COPY_OF } from '../../containers/App/constants';
+import { ZALO_TEMPLATE_INFO_REQUEST } from '../Zalo/constants';
+import { getTemplateInfoById } from '../Zalo/saga';
 // Individual exports for testing
 export function* getAllTemplates(channel, queryParams) {
   try {
@@ -221,6 +223,10 @@ export function* watchGetCdnTransformationConfig() {
   );
 }
 
+export function* watchForGetTemplateInfoById() {
+  yield takeLatest(ZALO_TEMPLATE_INFO_REQUEST, getTemplateInfoById);
+}
+
 // All sagas to be loaded
 export default [
   watchGetAllTemplates,
@@ -245,6 +251,7 @@ export function* v2TemplateSaga() {
     watchGetCdnTransformationConfig(),
     watchFetchWeCrmAccounts(),
     watchGetSenderDetails(),
+    watchForGetTemplateInfoById(),
   ]);
 }