@capillarytech/creatives-library 7.10.44 → 7.10.46

package/package.json

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

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/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

@@ -706,10 +706,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   isStatusMatching = (status, selectedWhatsappStatus) => {
-    if ( [WHATSAPP_STATUSES.unsubmitted, WHATSAPP_STATUSES.pending].includes(status) ) {
-      return selectedWhatsappStatus === WHATSAPP_STATUSES.awaitingApproval;
+    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;
     }
-      return selectedWhatsappStatus === status;
+    return true;
   }
 
   filterWhatsappTemplates = (templates) => {
@@ -719,9 +725,7 @@ 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 (
-        selectedWhatsappStatus
-        ? this.isStatusMatching(status, selectedWhatsappStatus)
-        : true
+        this.isStatusMatching(status, selectedWhatsappStatus)
       ) && (
         selectedWhatsappCategory
         ? category === selectedWhatsappCategory
@@ -751,6 +755,7 @@ 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);
@@ -2175,19 +2180,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
         }
@@ -2290,7 +2300,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       type={"primary"}
       disabled={this.isCreateDisabled()}
       style={{marginLeft: '8px', marginBottom: '12px'}}
-      onClick={this.createTemplate} >
+      onClick={this.createTemplate}
+      target={channelLowerCase === WHATSAPP_LOWERCASE && !this.props.isFullMode ? "_blank" : null}
+      >
       { this.props.intl.formatMessage((isTraiDltFeature && channel.toUpperCase() === SMS ) ? messages.uploadTemplate : messages.createNewActionButton) }
     </CapButton>);
 
@@ -2324,15 +2336,19 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       {
         channel.toUpperCase() === WHATSAPP && (
           <div className="whatsapp-filters">
-            <CapSelectFilter
-              placement="bottomLeft"
-              data={STATUS_OPTIONS}
-              onSelect={this.setWhatsappStatus}
-              selectedValue={this.state.selectedWhatsappStatus}
-              placeholder="Status"
-              showBadge={true}
-              width="90px"
-            />
+            {
+              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={CATEGORY_OPTIONS}
@@ -2464,10 +2480,21 @@ 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

@@ -426,4 +426,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;
@@ -93,6 +94,7 @@ export const Whatsapp = (props) => {
   const [templateStatus, setTemplateStatus] = useState(
     WHATSAPP_STATUSES.unsubmitted,
   );
+  const [templateRejectionReason, setTemplateRejectionReason] = useState(null);
   const [tempMsgArray, updateTempMsgArray] = useState([]);
   const [updatedSmsEditor, setUpdatedSmsEditor] = useState([]);
   //for tag only
@@ -108,7 +110,8 @@ 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};
     }
@@ -135,18 +138,17 @@ export const Whatsapp = (props) => {
   const paramObj = params || {};
   useEffect(() => {
     const { id } = paramObj;
-    if (id && !get(templateData, `versions.base.content`)) {
-      setSpin(true);
-      actions.getTemplateDetails(id);
+    if (id) {
+      if (isFullMode) {
+        setSpin(true);
+        actions.getTemplateDetails(id);
+      }
       setEditFlow(true);
     }
     //cleanup code
     return () => {
       actions.resetEditTemplate();
       varMap = {};
-      if (timerid) {
-        clearTimeout(timerid);
-      }
     };
   }, [paramObj.id]);
 
@@ -160,10 +162,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]);
@@ -218,13 +224,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
@@ -622,6 +630,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:
@@ -643,9 +662,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
@@ -656,7 +683,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),
@@ -856,6 +883,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',

package/v2Containers/Whatsapp/utils.js

@@ -16,37 +16,20 @@ export const getWhatsappContent = (template) => {
                 content: {
                     [WHATSAPP.toLowerCase()]: {
                         languages = [{}],
-                        'var-mapped': varMapped = {},
                     } = {},
                 } = {},
             } = {},
         } = {},
     } = template;
+    //removing $'' which was added for twilio enter handling
     let text = languages[0]?.content?.slice(2, -1) || '';
-    let searchStartIndex = 0;
-    
-    while (true) {
-        // starting position of {{x}}
-        const openIndex = text.indexOf("{{", searchStartIndex);
-        // closing position of {{x}}
-        const closeIndex = text.indexOf("}}", searchStartIndex);
-        if (openIndex > -1) {
-            // Number inside the current braces
-            const varDigit = text.substring(openIndex + 2, closeIndex);
-            // Var mapped value corresponding to current digit inside braces
-            const mappedValue = varMapped[varDigit];
-            let lengthDifference = 0;
-            if(mappedValue) {
-                // repacing the number inside braces with mapped value
-                text = text.slice(0, openIndex) + mappedValue + text.slice(closeIndex + 2);
-                lengthDifference = (mappedValue?.length - (varDigit?.length + 4));
-            }
-            // incrementing the searchStartIndex by difference between the length of mapped value and length of braces {{xx}}
-            searchStartIndex = closeIndex + lengthDifference + 2;
-        } else {
-            break;
-        }
-    }
+    const validVarRegex = /{{([1-9]|1[0-9])}}/g;
+    const validVarArr = text.match(validVarRegex) || [];
+    //removing Click {{unsubscribe}} to unsubscribe
+    text = text.replace(
+        `${validVarArr[validVarArr.length - 1]}`,
+        '{{unsubscribe}}',
+    );
     return text;
 }