@capillarytech/creatives-library 8.0.347 → 8.0.349

package/package.json

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

package/v2Containers/CreativesContainer/index.js

@@ -260,7 +260,7 @@ export class Creatives extends React.Component {
   };
 
   onEditTemplate = () => {
-    if (this.props.templateData && this.props.templateData.isArchived) {
+    if (this.props.templateData?.isArchived) {
       CapNotification.error({ message: this.props.intl.formatMessage(messages.cannotEditArchivedTemplate) });
       return;
     }

package/v2Containers/Templates/constants.js

@@ -114,3 +114,11 @@ export const TOGGLE_TEMPLATE_SELECTION = 'app/v2Containers/Templates/TOGGLE_TEMP
 export const SELECT_ALL_TEMPLATES = 'app/v2Containers/Templates/SELECT_ALL_TEMPLATES';
 export const CLEAR_TEMPLATE_SELECTION = 'app/v2Containers/Templates/CLEAR_TEMPLATE_SELECTION';
 export const SET_ARCHIVED_MODE = 'app/v2Containers/Templates/SET_ARCHIVED_MODE';
+
+// Archive status values
+export const ARCHIVE_STATUS_ACTIVE = 'active';
+export const ARCHIVE_STATUS_ARCHIVED = 'archived';
+
+// Archive listing refresh types
+export const ARCHIVE_REFRESH_TYPE_ARCHIVE = 'ARCHIVE';
+export const ARCHIVE_REFRESH_TYPE_UNARCHIVE = 'UNARCHIVE';

package/v2Containers/Templates/index.js

@@ -105,7 +105,7 @@ import {
   FACEBOOK as FACEBOOK_CHANNEL,
   CREATE,
 } from '../App/constants';
-import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES , ACCOUNT_MAPPING_ON_CHANNEL, noFilteredWhatsappZaloTemplatesTitle, noFilteredWhatsappZaloTemplatesDesc, noApprovedWhatsappZaloTemplatesTitle, noApprovedWhatsappTemplatesDesc, zaloDescIllustration, noApprovedRcsTemplatesTitle, noApprovedRcsTemplatesDesc} from './constants';
+import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES , ACCOUNT_MAPPING_ON_CHANNEL, noFilteredWhatsappZaloTemplatesTitle, noFilteredWhatsappZaloTemplatesDesc, noApprovedWhatsappZaloTemplatesTitle, noApprovedWhatsappTemplatesDesc, zaloDescIllustration, noApprovedRcsTemplatesTitle, noApprovedRcsTemplatesDesc, ARCHIVE_STATUS_ACTIVE, ARCHIVE_STATUS_ARCHIVED, ARCHIVE_REFRESH_TYPE_ARCHIVE, ARCHIVE_REFRESH_TYPE_UNARCHIVE} from './constants';
 import { COPY_OF, EMBEDDED } from '../../constants/unified';
 import {
   STATUS_OPTIONS,
@@ -839,18 +839,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const wasBulkArchiving = this.props.Templates.bulkArchiveInProgress;
     const isBulkArchiveDone = !nextProps.Templates.bulkArchiveInProgress && wasBulkArchiving;
     if (isBulkArchiveDone && !nextProps.Templates.bulkArchiveError) {
-      const { successMessage, count } = nextProps.Templates.bulkArchiveSuccessPayload || {};
-      const msg = successMessage ? successMessage(count) : `${count} templates archived successfully`;
-      CapNotification.success({ message: msg });
+      const { count } = nextProps.Templates.bulkArchiveSuccessPayload || {};
+      CapNotification.success({ message: this.props.intl.formatMessage(messages.bulkArchiveSuccess, { count }) });
       this.getAllTemplates({ params, resetPage: true });
     }
 
     const wasBulkUnarchiving = this.props.Templates.bulkUnarchiveInProgress;
     const isBulkUnarchiveDone = !nextProps.Templates.bulkUnarchiveInProgress && wasBulkUnarchiving;
     if (isBulkUnarchiveDone && !nextProps.Templates.bulkUnarchiveError) {
-      const { successMessage, count } = nextProps.Templates.bulkUnarchiveSuccessPayload || {};
-      const msg = successMessage ? successMessage(count) : `${count} templates unarchived successfully`;
-      CapNotification.success({ message: msg });
+      const { count } = nextProps.Templates.bulkUnarchiveSuccessPayload || {};
+      CapNotification.success({ message: this.props.intl.formatMessage(messages.bulkUnarchiveSuccess, { count }) });
       this.getAllTemplates({ params, resetPage: true });
     }
 
@@ -1947,14 +1945,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         key: `${currentChannel}-card-${template?.name}`,
         title: (
           <span className="template-card-title">
-            {this.props.isFullMode && this.props.location.query.type !== EMBEDDED && isCardArchiveEligible && (
-              <CapCheckbox
-                checked={selectedIdsArrayForCard.includes(template._id)}
-                onChange={() => !isAnyArchiveInProgress && this.props.actions.toggleTemplateSelection(template._id)}
-                onClick={(e) => e.stopPropagation()}
-                disabled={isAnyArchiveInProgress}
-              />
-            )}
+            {isCardArchiveEligible && this.renderCardSelectionCheckbox({ templateId: template._id, selectedIds: selectedIdsArrayForCard, isDisabled: isAnyArchiveInProgress })}
             <CapLabel.CapLabelInline type="label1" title={template?.name} className="template-card-name">
               {template?.name}
               {currentChannel === INAPP && (
@@ -1965,7 +1956,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                       INAPP_LAYOUT_DETAILS[inappBodyType]?.tagTextColor
                     }
                     tagHeight="1.25rem"
-                    tagFontSize="12px"
+                    tagFontSize="0.857rem"
                   >
                     {INAPP_LAYOUT_DETAILS[inappBodyType]?.text}
                   </CapColoredTag>
@@ -2089,7 +2080,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 {(() => {
                   const channelUp = this.state.channel.toUpperCase();
                   if (!this.isChannelArchiveEligible(channelUp, status, rcsStatus)) return null;
-                  return !template.isArchived ? (
+                  return !template?.isArchived ? (
                     <CapMenu.Item
                       className={`archive-${channelLowerCase}`}
                       onClick={() => this.handleTemplateArchiveAction({ templateId: template._id, templateName: template.name })}
@@ -2386,14 +2377,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           const { whatsappImageSrc = '', templateMsg, docPreview, whatsappVideoPreviewImg = '', templateHeaderPreview, templateFooterPreview, carouselData = [] } = getWhatsappContent(template);
           templateData.title = (
             <CapRow type="flex" align="middle">
-              {this.props.isFullMode && this.props.location.query.type !== EMBEDDED && isCardArchiveEligible && (
-                <CapCheckbox
-                  checked={selectedIdsArrayForCard.includes(template._id)}
-                  onChange={() => !isAnyArchiveInProgress && this.props.actions.toggleTemplateSelection(template._id)}
-                  onClick={(e) => e.stopPropagation()}
-                  disabled={isAnyArchiveInProgress}
-                  />
-              )}
+              {isCardArchiveEligible && this.renderCardSelectionCheckbox({ templateId: template._id, selectedIds: selectedIdsArrayForCard, isDisabled: isAnyArchiveInProgress })}
               <CapLabel className="whatsapp-rcs-template-name">{template?.name}</CapLabel>
               <WhatsappStatusContainer template={template} />
             </CapRow>
@@ -2487,14 +2471,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           const statusDisplay=getRcsStatusType(status);
           templateData.title = (
             <CapRow type="flex" align="middle">
-              {this.props.isFullMode && this.props.location.query.type !== EMBEDDED && isCardArchiveEligible && (
-                <CapCheckbox
-                  checked={selectedIdsArrayForCard.includes(template._id)}
-                  onChange={() => !isAnyArchiveInProgress && this.props.actions.toggleTemplateSelection(template._id)}
-                  onClick={(e) => e.stopPropagation()}
-                  disabled={isAnyArchiveInProgress}
-                  />
-              )}
+              {isCardArchiveEligible && this.renderCardSelectionCheckbox({ templateId: template._id, selectedIds: selectedIdsArrayForCard, isDisabled: isAnyArchiveInProgress })}
               <CapLabel className="whatsapp-rcs-template-name">{name}</CapLabel>
               <CapRow type="flex" align="middle" className="rcs-status-container zalo-status-color">
                 <CapStatus
@@ -2771,7 +2748,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             <div className="archive-listing-spinner">
               <CapSpin spinning />
               <CapLabel.CapLabelInline type="label1">
-                {archiveListingRefreshType === 'ARCHIVE' ? 'Archival in progress' : 'Unarchival in progress'}
+                {archiveListingRefreshType === ARCHIVE_REFRESH_TYPE_ARCHIVE ? this.props.intl.formatMessage(messages.archivalInProgress) : this.props.intl.formatMessage(messages.unarchivalInProgress)}
               </CapLabel.CapLabelInline>
             </div>
           ) : (
@@ -3603,6 +3580,18 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.setState({showModal: false});
   }
 
+  renderCardSelectionCheckbox = ({ templateId, selectedIds, isDisabled }) => {
+    if (!this.props.isFullMode || this.props.location.query.type === EMBEDDED) return null;
+    return (
+      <CapCheckbox
+        checked={selectedIds.includes(templateId)}
+        onChange={() => !isDisabled && this.props.actions.toggleTemplateSelection(templateId)}
+        onClick={(e) => e.stopPropagation()}
+        disabled={isDisabled}
+      />
+    );
+  }
+
   handleBulkArchiveAction = ({ ids, count, isUnarchive = false }) => {
     const { intl, actions } = this.props;
     const { channel } = this.state;
@@ -3946,17 +3935,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     !(channel === RCS && [RCS_STATUSES.awaitingApproval, RCS_STATUSES.pending].includes(rcsStatus))
   )
 
-  enterArchivedMode = () => {
-    this.props.actions.setArchivedMode(true);
-    this.setState({ searchText: '', page: 1 }, () => {
-      this.getAllTemplates({ params: { name: '', sortBy: this.state.sortBy, archiveStatus: 'archived' }, resetPage: true }, true);
-    });
-  }
-
-  exitArchivedMode = () => {
-    this.props.actions.setArchivedMode(false);
+  setArchivedMode = (isArchived) => {
+    this.props.actions.setArchivedMode(isArchived);
     this.setState({ searchText: '', page: 1 }, () => {
-      this.getAllTemplates({ params: { name: '', sortBy: this.state.sortBy, archiveStatus: 'active' }, resetPage: true }, true);
+      this.getAllTemplates({ params: { name: '', sortBy: this.state.sortBy, archiveStatus: isArchived ? ARCHIVE_STATUS_ARCHIVED : ARCHIVE_STATUS_ACTIVE }, resetPage: true }, true);
     });
   }
   isCreateDisabled = () => {
@@ -4676,7 +4658,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               <CapMenu>
                 <CapMenu.Item
                   key="archived"
-                  onClick={this.enterArchivedMode}
+                  onClick={() => this.setArchivedMode(true)}
                 >
                   <FormattedMessage {...messages.archivedTemplates} />
                 </CapMenu.Item>
@@ -4727,7 +4709,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           className={`creatives-templates-list ${
             this.props.isFullMode ? "full-mode" : "library-mode"
           }`}
-          style={{ position: 'relative' }}
         >
           <input
             type="file"
@@ -4745,7 +4726,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               <CapIcon
                 type="back"
                 className="archived-mode-back-icon"
-                onClick={this.exitArchivedMode}
+                onClick={() => this.setArchivedMode(false)}
               />
               <CapHeading type="h3"><FormattedMessage {...messages.archivedTemplates} /></CapHeading>
             </CapRow>

package/v2Containers/Templates/messages.js

@@ -706,4 +706,12 @@ export default defineMessages({
     id: `${scope}.bulkUnarchiveSuccess`,
     defaultMessage: '{count} {count, plural, one {template} other {templates}} unarchived successfully',
   },
+  "archivalInProgress": {
+    id: `${scope}.archivalInProgress`,
+    defaultMessage: 'Archival in progress',
+  },
+  "unarchivalInProgress": {
+    id: `${scope}.unarchivalInProgress`,
+    defaultMessage: 'Unarchival in progress',
+  },
 });

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

@@ -192,11 +192,6 @@ exports[`Test Templates container Should render sms illustration when no templat
 <Fragment>
   <div
     className="creatives-templates-list library-mode"
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
   >
     <input
       accept=".zip, .html, .htm"
@@ -381,11 +376,6 @@ exports[`Test Templates container Should render temlates when whatsapp templates
 <Fragment>
   <div
     className="creatives-templates-list library-mode"
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
   >
     <input
       accept=".zip, .html, .htm"
@@ -638,11 +628,6 @@ exports[`Test Templates container Should render temlates when whatsapp templates
 <Fragment>
   <div
     className="creatives-templates-list full-mode"
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
   >
     <input
       accept=".zip, .html, .htm"
@@ -1094,11 +1079,6 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
 <Fragment>
   <div
     className="creatives-templates-list full-mode"
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
   >
     <input
       accept=".zip, .html, .htm"
@@ -1603,11 +1583,6 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
 <Fragment>
   <div
     className="creatives-templates-list full-mode"
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
   >
     <input
       accept=".zip, .html, .htm"
@@ -2112,11 +2087,6 @@ exports[`Test Templates container Test max templates warning 1`] = `
 <Fragment>
   <div
     className="creatives-templates-list full-mode"
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
   >
     <input
       accept=".zip, .html, .htm"
@@ -2621,11 +2591,6 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
 <Fragment>
   <div
     className="creatives-templates-list library-mode"
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
   >
     <input
       accept=".zip, .html, .htm"
@@ -2904,11 +2869,6 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
 <Fragment>
   <div
     className="creatives-templates-list library-mode"
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
   >
     <input
       accept=".zip, .html, .htm"
@@ -3161,11 +3121,6 @@ exports[`Test Templates container Test removing single filter 1`] = `
 <Fragment>
   <div
     className="creatives-templates-list library-mode"
-    style={
-      Object {
-        "position": "relative",
-      }
-    }
   >
     <input
       accept=".zip, .html, .htm"