@capillarytech/creatives-library 7.10.45 → 7.10.47

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -50,7 +50,7 @@ function SlideBoxHeader(props) {
   const {
     whatsappTemplateName,
     whatsappTemplateCategory,
-  } = templateData;
+  } = templateData || {};
   const whatsappName = whatsappTemplateName || templateData?.name;
   const whatsappCategory = whatsappTemplateCategory || get(templateData, `versions.base.content.whatsapp.category`, '');
 

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/_templates.scss

@@ -516,6 +516,7 @@
   .cap-tag-v2{
     font-size: 12px;
     color: $CAP_G04;
+    white-space: pre-wrap;
   }
 
   .ant-anchor-link-title {

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);
       }
     });
@@ -1001,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>
             )
           }
@@ -2175,19 +2185,24 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
   selectedFilters = () => {
     const { selectedWhatsappStatus, selectedWhatsappCategory } = this.state;
+    const {
+      intl: {
+        formatMessage,
+      },
+    } = this.props;
     return (
       <CapRow type="flex" align="middle" className="selected-whatsapp-filters">
         {
           selectedWhatsappStatus ? (
             <CapTag closable onClose={() => this.removeWhatsappFilter(WHATSAPP_STATUS)}>
-              Status: {getWhatsappStatus(selectedWhatsappStatus)?.label || selectedWhatsappStatus}
+              {formatMessage(messages.status)}: {getWhatsappStatus(selectedWhatsappStatus)?.label || selectedWhatsappStatus}
             </CapTag>
           ) : null
         }
         {
           selectedWhatsappCategory ? (
             <CapTag closable onClose={() => this.removeWhatsappFilter(WHATSAPP_CATEGORY)}>
-              Category: {getWhatsappCategory(selectedWhatsappCategory)?.label || selectedWhatsappCategory}
+              {formatMessage(messages.category)}: {getWhatsappCategory(selectedWhatsappCategory)?.label || selectedWhatsappCategory}
             </CapTag>
           ) : null
         }
@@ -2332,6 +2347,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               placeholder="Status"
               showBadge={true}
               width="90px"
+              overlayStyle={{ overflowY: "hidden" }}
             />
             <CapSelectFilter
               placement="bottomLeft"
@@ -2341,6 +2357,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               placeholder="Category"
               showBadge={true}
               width="105px"
+              overlayStyle={{ overflowY: "hidden" }}
             />
           </div>
           

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}',
@@ -426,4 +434,12 @@ export default defineMessages({
     id: `${scope}.whatsappMaxTemplates`,
     defaultMessage: 'WhatsApp allows {maxCount} approved templates. To accommodate new approved templates either delete the existing one or reach out to Capillary POC to increase the limit.',
   },
+  "status": {
+    id: `${scope}.status`,
+    defaultMessage: 'Status',
+  },
+  "category": {
+    id: `${scope}.category`,
+    defaultMessage: 'Category',
+  },
 });

package/v2Containers/Whatsapp/index.js

@@ -29,6 +29,7 @@ import {
   CAP_WHITE,
 } from '@capillarytech/cap-ui-library/styled/variables';
 import { makeSelectWhatsapp, makeSelectAccount } from './selectors';
+import { isLoadingMetaEntities } from '../Cap/selectors';
 import * as WhatsappActions from './actions';
 import './index.scss';
 import {
@@ -53,7 +54,6 @@ import { makeSelectMetaEntities, setInjectedTags } from '../Cap/selectors';
 
 let varMap = {};
 let editContent = {};
-let timerid;
 
 export const Whatsapp = (props) => {
   const {
@@ -72,6 +72,7 @@ export const Whatsapp = (props) => {
     supportedTags,
     metaEntities,
     injectedTags,
+    loadingTags,
   } = props || {};
   const { formatMessage } = intl;
   const { TextArea } = CapInput;
@@ -90,9 +91,8 @@ 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([]);
   //for tag only
@@ -146,9 +146,6 @@ export const Whatsapp = (props) => {
     return () => {
       actions.resetEditTemplate();
       varMap = {};
-      if (timerid) {
-        clearTimeout(timerid);
-      }
     };
   }, [paramObj.id]);
 
@@ -162,10 +159,14 @@ export const Whatsapp = (props) => {
     if (editContent && !isEmpty(editContent)) {
       setTemplateName(name);
       setTemplateDate(createdAt);
-      const { category = '', status = WHATSAPP_STATUSES.unsubmitted } =
-        editContent;
+      const {
+        category = '',
+        status = WHATSAPP_STATUSES.unsubmitted,
+        rejection_reason = null,
+      } = editContent;
       setTemplateCategory(category);
       setTemplateStatus(status);
+      setTemplateRejectionReason(rejection_reason);
       computeTempMsgArray();
     }
   }, [editData.templateDetails || templateData]);
@@ -220,13 +221,15 @@ export const Whatsapp = (props) => {
         }
       }
       setUpdatedSmsEditor(arr);
-      timerid = setTimeout(() => {
-        //stop spinner
-        setSpin(false);
-      }, 500);
     }
   }, [tempMsgArray]);
 
+  useEffect(() => {
+    if (tempMsgArray?.length && !loadingTags) {
+      setSpin(false);
+    }
+  }, [tempMsgArray, loadingTags]);
+
   // tag Code start from here
   useEffect(() => {
     //fetching tags
@@ -624,6 +627,17 @@ export const Whatsapp = (props) => {
   //create methods end
 
   //edit methods start
+  const computeTemplateRejectionReason = () => {
+    switch (templateRejectionReason) {
+      case 'TAG_CONTENT_MISMATCH':
+        return formatMessage(messages.tagContentMismatchError);
+      case 'INVALID_FORMAT':
+        return formatMessage(messages.invalidFormatError);
+      default:
+        return '';
+    }
+  };
+
   const getTemplateStatusType = () => {
     switch (templateStatus) {
       case WHATSAPP_STATUSES.approved:
@@ -645,9 +659,17 @@ export const Whatsapp = (props) => {
         );
       case WHATSAPP_STATUSES.rejected:
         return (
-          <CapLabel type="label2">
-            {formatMessage(messages.rejectedStatusMsg)}
-          </CapLabel>
+          <>
+            <CapLabel type="label2" style={{ fontWeight: 500 }}>
+              {formatMessage(messages.rejectedStatusMsg)}
+            </CapLabel>
+            <CapLabel
+              type="label2"
+              style={{ margin: `${CAP_SPACE_04} 0 ${CAP_SPACE_04}` }}
+            >
+              {computeTemplateRejectionReason()}
+            </CapLabel>
+          </>
         );
       default:
         //all cases except approved and rejected, return awaiting approval
@@ -658,7 +680,7 @@ export const Whatsapp = (props) => {
             </CapLabel>
             <CapLabel
               type="label2"
-              style={{ marginTop: CAP_SPACE_04, marginBottom: CAP_SPACE_04 }}
+              style={{ margin: `${CAP_SPACE_04} 0 ${CAP_SPACE_04}` }}
             >
               {formatMessage(messages.awaitingStatusDesc, {
                 date: moment(templateDate).format(DATE_DISPLAY_FORMAT),
@@ -753,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={
@@ -858,6 +882,7 @@ const mapStateToProps = createStructuredSelector({
   editData: makeSelectWhatsapp(),
   accountData: makeSelectAccount(),
   metaEntities: makeSelectMetaEntities(),
+  loadingTags: isLoadingMetaEntities(),
   injectedTags: setInjectedTags(),
 });
 

package/v2Containers/Whatsapp/messages.js

@@ -197,6 +197,16 @@ export default defineMessages({
     id: `${prefix}.rejectedStatusMsg`,
     defaultMessage: 'This template has been rejected',
   },
+  tagContentMismatchError: {
+    id: `${prefix}.tagContentMismatchError`,
+    defaultMessage:
+      'TAG CONTENT MISMATCH: The language and/or template category selected don’t match the template content.',
+  },
+  invalidFormatError: {
+    id: `${prefix}.invalidFormatError`,
+    defaultMessage:
+      'INVALID FORMAT: Placeholders or other elements were formatted incorrectly.',
+  },
   awaitingStatusMsg: {
     id: `${prefix}.awaitingStatusMsg`,
     defaultMessage: 'This template is awaiting approval',