@capillarytech/creatives-library 8.0.69-alpha.8 → 8.0.69

package/package.json

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

package/v2Containers/CreativesContainer/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Bugsnag from "@bugsnag/js";
 import {
   CapSlideBox,
   CapHeader,
@@ -140,27 +139,21 @@ export class Creatives extends React.Component {
       templateData.updatedByName = commonUtil.getUserNameById(userId, usersList);
       this.setState({ slidBoxContent: constants.PREVIEW, templateData });
     } else {
-      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,
-        });
-      }
+      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,
+      });
     }
   };
 
@@ -810,6 +803,7 @@ export class Creatives extends React.Component {
           templateData = {
             channel,
             accountId,
+            sourceAccountIdentifier: selectedWhatsappAccount?.sourceAccountIdentifier || '',
             accountName: accountDetails?.name || '',
             messageBody: languages[0].content,
             templateConfigs: {

package/v2Containers/Templates/index.js

@@ -12,7 +12,6 @@ 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';
@@ -51,8 +50,7 @@ import {
   CapImage,
   CapStatus,
   CapColoredTag,
-  CapSpin
-} from "@capillarytech/cap-ui-library";
+} 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';
@@ -229,7 +227,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       hostName: '',
       searchedZaloTemplates: [],
       searchingZaloTemplate: false,
-      zaloPreviewItemId: {},
     };
 
     this.handleOnHoverItem = this.handleOnHoverItem.bind(this);
@@ -536,8 +533,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)}`;
@@ -663,7 +660,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       const isSingleAccount = weCrmAccountsList?.length === 1;
       const selectedAccount = this.props.Templates[ACCOUNT_MAPPING_ON_CHANNEL[selectedChannel]] || {};
       const hostName = this.getHostName(isSingleAccount ? weCrmAccountsList[0]?.sourceAccountIdentifier : selectedAccount?.sourceAccountIdentifier, senderDetails?.domainProperties);
-    
        if (!isEmpty(hostName)) {
         const paramsDefault = {};
         const {name, sourceAccountIdentifier, configs } = weCrmAccountsList?.[0] || {};
@@ -697,7 +693,6 @@ 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();
     }
@@ -831,6 +826,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.state.previewOpen) {
       creativesParams.mode = 'preview';
       creativesParams = {...creativesParams, ...this.state.previewTemplate};
+      
     }
     return creativesParams;
   }
@@ -924,7 +920,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 {
@@ -986,7 +982,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         default:
           return selectedWhatsappCategory === category;
       }
-    }
+    } 
     return true;
   }
   filterWhatsappTemplates = (templates) => {
@@ -1076,7 +1072,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     ) : <>{children}</>
   };
 
-  getTemplateDataForGrid = ({templates = [], handlers, filterContent, channel, isLoading, loadingTip, previewTemplateId }) => {
+  getTemplateDataForGrid = ({templates = [], handlers, filterContent, channel, isLoading, loadingTip}) => {
     const currentChannel = channel.toUpperCase();
     const {channel: stateChannel} = this.state;
     const channelLowerCase = stateChannel.toLowerCase();
@@ -1108,12 +1104,11 @@ 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: (
@@ -1136,27 +1131,20 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           </span>
         ),
         extra: [
-          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);
-                  }
-                }}
-              />
-            )
-          )
+          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);
+                }
+              }}
+            />
+          ),
         ],
         hoverOption: (
           <CapButton
@@ -1165,15 +1153,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: {
@@ -1232,7 +1220,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:
@@ -1656,7 +1644,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   prepareWeChatPreviewData(template) {
     if (template && template.versions && template.versions.base && !isEmpty(template.versions.base)) {
       if (template.definition && template.definition.msgcontent && template.definition.msgcontent === "RICH_MEDIA_WECHAT") {
-        console.log("prepareWeChatPreviewData", template, JSON.stringify(template), template.versions.base.mediaList, JSON.stringify(template.versions.base.mediaList));
         return template.versions.base.mediaList;
       }
       return this.prepareWeChatMappedPreviewData(template.versions.base.content, template.versions.base.Tag, template.versions.base.data);
@@ -2201,26 +2188,21 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         this.setState({ previewTemplate: templateInfo });
       }
     } else {
-      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
-        });
-      }
+      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,
+      });
     }
   }
 
@@ -2913,6 +2895,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     window.open(`/creatives/ui/v2?channel=${WHATSAPP_LOWERCASE}&mode=${CREATE}`, "_blank");
   }
 
+
   render() {
     const isFullMode = this.isFullMode();
     const { activeMode, channel, wechatFilter, lineFilter, smsFilter, templatesCount } = this.state;
@@ -3199,130 +3182,70 @@ 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 })
-            }
-          />
+        <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}
+          {
+            channel.toLowerCase() === WHATSAPP_LOWERCASE && showWhatsappCountWarning ? (
+              <CapAlert message={whatsappCountExceedText} type="info" />
+            ) : null
+          }
 
-          {channel.toLowerCase() === WHATSAPP_LOWERCASE && !isFullMode ? (
-            <CapInfoNote
-              message={formatMessage(messages.whatsappOnlyApprovedTemplates)}
-            />
-          ) : null}
+          {
+            channel.toLowerCase() === WHATSAPP_LOWERCASE && !isFullMode ? (
+              <CapInfoNote message={formatMessage(messages.whatsappOnlyApprovedTemplates)} />
+            ) : null
+          }
+
+          {
+            channel.toLowerCase() === ZALO_LOWERCASE && !isFullMode ? (
+              <CapInfoNote message={formatMessage(messages.zaloOnlyApprovedTemplates)} />
+            ) : 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({
-                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 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>
-            {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}
@@ -3332,6 +3255,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             />
             {this.renderDeleteConfirmationModal()}
           </CapRow>
+
         </div>
       </>
     );

package/v2Containers/Templates/sagas.js

@@ -7,8 +7,6 @@ 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 {
@@ -223,10 +221,6 @@ export function* watchGetCdnTransformationConfig() {
   );
 }
 
-export function* watchForGetTemplateInfoById() {
-  yield takeLatest(ZALO_TEMPLATE_INFO_REQUEST, getTemplateInfoById);
-}
-
 // All sagas to be loaded
 export default [
   watchGetAllTemplates,
@@ -251,7 +245,6 @@ export function* v2TemplateSaga() {
     watchGetCdnTransformationConfig(),
     watchFetchWeCrmAccounts(),
     watchGetSenderDetails(),
-    watchForGetTemplateInfoById(),
   ]);
 }