@capillarytech/creatives-library 7.10.46 → 7.10.47

package/v2Containers/CreativesContainer/index.js

@@ -660,11 +660,13 @@ class Creatives extends React.Component {
     });
   }
   handleCloseSlideBox = () => {
+    const { currentChannel = '', slidBoxContent = '' } = this.state;
+    const reloadTemplates = currentChannel === constants.WHATSAPP && slidBoxContent === 'editTemplate';
     this.setState((prevState) => ({
       ...prevState,
       templateData: undefined,
       showSlideBox: false,
-    }), this.props.handleCloseCreatives);
+    }), () => this.props.handleCloseCreatives(reloadTemplates));
   };
   saveMessage = () => {
     this.setState({ isGetFormData: true });

package/v2Containers/Templates/index.js

@@ -77,7 +77,7 @@ import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
 import whatsappIllustration from '../Assets/images/whatsappIllustration.png';
-import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
+import { CAP_SPACE_16, CAP_SPACE_44 } from '@capillarytech/cap-ui-library/styled/variables';
 import { GA } from '@capillarytech/cap-ui-utils';
 const { timeTracker } = GA;
 const {CapCustomCardList} = CapCustomCard;
@@ -568,9 +568,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.getAllTemplates({getNextPage: true});
   }
   onCreateComplete = (isReloadTemplates) => {
-    const isWhatsappEdit = this.state.routeParams?.pathname?.includes(`${WHATSAPP_LOWERCASE}/edit`);
     this.setState({routeParams: null, previewOpen: false}, () => {
-      if (this.isFullMode() && (isReloadTemplates || isWhatsappEdit)) {
+      if (this.isFullMode() && isReloadTemplates) {
         this.getAllTemplates({params: {}}, true);
       }
     });
@@ -706,16 +705,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   isStatusMatching = (status, selectedWhatsappStatus) => {
-    if(this.props.isFullMode && selectedWhatsappStatus) {
-      if ( [WHATSAPP_STATUSES.unsubmitted, WHATSAPP_STATUSES.pending].includes(status) ) {
-        return selectedWhatsappStatus === WHATSAPP_STATUSES.awaitingApproval;
-      }
-        return selectedWhatsappStatus === status;
-    }
-    else if (!this.props.isFullMode){
-      return status === WHATSAPP_STATUSES.approved;
+    if ( [WHATSAPP_STATUSES.unsubmitted, WHATSAPP_STATUSES.pending].includes(status) ) {
+      return selectedWhatsappStatus === WHATSAPP_STATUSES.awaitingApproval;
     }
-    return true;
+      return selectedWhatsappStatus === status;
   }
 
   filterWhatsappTemplates = (templates) => {
@@ -725,7 +718,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
       // if status or category filter is applied, filter templates which match these filters
       return (
-        this.isStatusMatching(status, selectedWhatsappStatus)
+        selectedWhatsappStatus
+        ? this.isStatusMatching(status, selectedWhatsappStatus)
+        : true
       ) && (
         selectedWhatsappCategory
         ? category === selectedWhatsappCategory
@@ -755,7 +750,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const channelLowerCase = stateChannel.toLowerCase();
     let filteredTemplates = templates;
     let isTraiDltFeature = false;
-    console.log("getTemplateDataForGrid", currentChannel);
     switch (currentChannel) {
       case WECHAT:
         filteredTemplates = this.filterWechatTemplates(templates);
@@ -1006,11 +1000,22 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               </CapHeading>
             </div> : (
               [WHATSAPP_LOWERCASE].includes(this.state.channel.toLowerCase()) &&
-              isEmpty(filteredTemplates) &&
               isEmpty(this.state.searchText) &&
               !isLoading &&
-              <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto'} : {}}>
-                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+              <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
+                {isEmpty(templates) && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />}
+                {!isEmpty(templates) && isEmpty(filteredTemplates) && <CapHeader
+                  title={
+                    <CapHeading type="h3" style={{ textAlign: "center", marginTop: CAP_SPACE_44 }}>
+                      {this.props.intl.formatMessage(messages.noFilteredWhatsappTemplatesTitle)}
+                    </CapHeading>
+                  }
+                  description={
+                    <CapLabel style={{ textAlign: "center" }}>
+                      {this.props.intl.formatMessage(messages.noFilteredWhatsappTemplatesDesc)}
+                    </CapLabel>
+                  }
+                />}
               </div>
             )
           }
@@ -2300,9 +2305,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       type={"primary"}
       disabled={this.isCreateDisabled()}
       style={{marginLeft: '8px', marginBottom: '12px'}}
-      onClick={this.createTemplate}
-      target={channelLowerCase === WHATSAPP_LOWERCASE && !this.props.isFullMode ? "_blank" : null}
-      >
+      onClick={this.createTemplate} >
       { this.props.intl.formatMessage((isTraiDltFeature && channel.toUpperCase() === SMS ) ? messages.uploadTemplate : messages.createNewActionButton) }
     </CapButton>);
 
@@ -2336,19 +2339,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       {
         channel.toUpperCase() === WHATSAPP && (
           <div className="whatsapp-filters">
-            {
-              this.props.isFullMode ? (
-                <CapSelectFilter
-                  placement="bottomLeft"
-                  data={STATUS_OPTIONS}
-                  onSelect={this.setWhatsappStatus}
-                  selectedValue={this.state.selectedWhatsappStatus}
-                  placeholder="Status"
-                  showBadge={true}
-                  width="90px"
-                />
-              ) : null
-            }
+            <CapSelectFilter
+              placement="bottomLeft"
+              data={STATUS_OPTIONS}
+              onSelect={this.setWhatsappStatus}
+              selectedValue={this.state.selectedWhatsappStatus}
+              placeholder="Status"
+              showBadge={true}
+              width="90px"
+              overlayStyle={{ overflowY: "hidden" }}
+            />
             <CapSelectFilter
               placement="bottomLeft"
               data={CATEGORY_OPTIONS}
@@ -2357,6 +2357,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               placeholder="Category"
               showBadge={true}
               width="105px"
+              overlayStyle={{ overflowY: "hidden" }}
             />
           </div>
           
@@ -2480,21 +2481,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
           <CapRow>
             <Pagination onPageChange={templates.length ? this.onPaginationChange : () => {}} paginationSelector="pagination-container">
-
-          {
-            channel.toLowerCase() === WHATSAPP_LOWERCASE ? (
-              <CapAlert message={whatsappCountExceedText} type="info" />
-            ) : null
-          }
               {this.getTemplateDataForGrid({isLoading, loadingTip, channel: this.state.channel, templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
             </Pagination>
             {(((this.state.selectedAccount !== '' && !isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress && !isEmpty(this.state.searchText) &&
             <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
-                        {
-            channel.toLowerCase() === WHATSAPP_LOWERCASE ? (
-              <CapAlert message={whatsappCountExceedText} type="info" />
-            ) : null
-          }
               <CapHeading type="h6">{this.props.intl.formatMessage(messages.noTemplatesFound)}</CapHeading>
             </div>}
           </CapRow>

package/v2Containers/Templates/messages.js

@@ -342,6 +342,14 @@ export default defineMessages({
     id: `${scope}.whatsappDescIllustration`,
     defaultMessage: 'These templates can be reused when creating a\nnew message content.',
   },
+  "noFilteredWhatsappTemplatesTitle": {
+    id: `${scope}.noFilteredWhatsappTemplatesTitle`,
+    defaultMessage: 'Sorry, we couldn’t find any matches',
+  },
+  "noFilteredWhatsappTemplatesDesc": {
+    id: `${scope}.noFilteredWhatsappTemplatesDesc`,
+    defaultMessage: 'Please try searching with another term or apply different filter',
+  },
   "smsTitleIllustartion": {
     id: `${scope}.smsTitleIllustartion`,
     defaultMessage: 'Create an SMS {template}',

package/v2Containers/Whatsapp/index.js

@@ -91,9 +91,7 @@ export const Whatsapp = (props) => {
   //for edit only
   const [isEditFlow, setEditFlow] = useState(false);
   const [templateDate, setTemplateDate] = useState('');
-  const [templateStatus, setTemplateStatus] = useState(
-    WHATSAPP_STATUSES.unsubmitted,
-  );
+  const [templateStatus, setTemplateStatus] = useState();
   const [templateRejectionReason, setTemplateRejectionReason] = useState(null);
   const [tempMsgArray, updateTempMsgArray] = useState([]);
   const [updatedSmsEditor, setUpdatedSmsEditor] = useState([]);
@@ -110,8 +108,7 @@ export const Whatsapp = (props) => {
     width: 100%;
     margin-left: -32px;
     padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
-    z-index: 1;
-    
+
     .ant-btn {
       margin-right: ${CAP_SPACE_16};
     }
@@ -778,10 +775,12 @@ export const Whatsapp = (props) => {
 
   const editModeContent = (
     <>
-      <CapAlert
-        message={getTemplateStatusMessage()}
-        type={getTemplateStatusType()}
-      />
+      {templateStatus && (
+        <CapAlert
+          message={getTemplateStatusMessage()}
+          type={getTemplateStatusType()}
+        />
+      )}
       <CapRow className="whatsapp-render-heading">
         <CapHeader
           title={