@capillarytech/creatives-library 7.10.51 → 7.10.53

package/v2Containers/SmsTrai/Create/index.js

@@ -77,7 +77,8 @@ export const SmsTraiCreate = (props) => {
   const [traiFileMeta, setTraiFileMeta] = useState(null);
   const [validatedData, setValidatedData] = useState([]);
   const [files, setFiles] = useState([]);
-  const [templateRegistrationIndex, setTemplateRegistrationIndex] = useState(null);
+  const [templateRegistrationIndex, setTemplateRegistrationIndex] =
+    useState(null);
   const [errorText, setErrorText] = useState('');
   const [dropZone, setDropZone] = useState(true);
   const [previewFileIndex, setPreviewFileIndex] = useState(null);
@@ -110,7 +111,10 @@ export const SmsTraiCreate = (props) => {
         const colCounts = {};
         const traiFileDataCopy = cloneDeep(traiFileData);
         //removing last empty row if each cell is empty
-        if (traiFileDataCopy?.data[traiFileDataCopy?.data?.length - 1]?.every((cell) => !cell)) {
+        const removeLastEmptyRow = traiFileDataCopy?.data[
+          traiFileDataCopy?.data?.length - 1
+        ]?.every((cell) => !cell);
+        if (removeLastEmptyRow) {
           traiFileDataCopy.data.pop();
         }
         const fileLen = traiFileDataCopy?.data?.length || 0;
@@ -259,14 +263,27 @@ export const SmsTraiCreate = (props) => {
     } else if (uploadValidated && duplicateDetailsStatus === FAILURE) {
       deleteOrCancelCSV();
       CapNotification.error({ message: duplicateDetailsError || FAILURE });
-    } else if (uploadValidated && duplicateDetailsStatus === SUCCESS && !isEmpty(validatedData)) {
-      if (!isEmpty(duplicateDetails) && count > 0 && templateRegistrationIndex !== null) {
+    } else if (
+      uploadValidated &&
+      duplicateDetailsStatus === SUCCESS &&
+      !isEmpty(validatedData)
+    ) {
+      if (
+        !isEmpty(duplicateDetails) &&
+        count > 0 &&
+        templateRegistrationIndex !== null
+      ) {
         const clonedValidatedData = cloneDeep(validatedData);
         let duplicateTemplateNameCounts = 0;
         const apiResponseIds = [...new Set(template_ids)];
-        
+
         for (let i = 1; i < clonedValidatedData.length; i += 1) {
-          const duplicatePresent = apiResponseIds?.includes(clonedValidatedData[i][templateRegistrationIndex]?.replace(/[“”"'‘’`´]/g, ''));
+          const duplicatePresent = apiResponseIds?.includes(
+            clonedValidatedData[i][templateRegistrationIndex]?.replace(
+              /[“”"'‘’`´]/g,
+              '',
+            ),
+          );
           if (duplicatePresent) {
             //if rejection reason for this row is empty, consider as new error
             if (!clonedValidatedData[i][clonedValidatedData[i]?.length - 1]) {
@@ -291,7 +308,10 @@ export const SmsTraiCreate = (props) => {
       const selectedFiles = cloneDeep(files);
       const traiFileDataCopy = cloneDeep(traiFileData);
       //removing last empty row if each cell is empty
-      if (traiFileDataCopy?.data[traiFileDataCopy?.data?.length - 1]?.every((cell) => !cell)) {
+      const removeLastEmptyRow = traiFileDataCopy?.data[
+        traiFileDataCopy?.data?.length - 1
+      ]?.every((cell) => !cell);
+      if (removeLastEmptyRow) {
         traiFileDataCopy.data.pop();
       }
       //remove capillary rejection reason column if already present on reupload
@@ -340,8 +360,8 @@ export const SmsTraiCreate = (props) => {
   const headerValidationHandler = (senderIdString) => {
     //each row must contain atleast 1 header
     //each header can be either 6 letters or 6 numbers, no mixing
-    //it cannot contain special characters.
-    //eg: valid: "123456" "abcdef" invalid: "abc123" "abc$ef" "1234567"
+    //it cannot contain special characters except {}
+    //eg: valid: "123456" "abcdef" "{123456}" invalid: "abc123" "abc$ef" "1234567"
     if (senderIdString.length < 6) {
       return true;
     }
@@ -349,7 +369,7 @@ export const SmsTraiCreate = (props) => {
     const numbersOnly = /^\d+$/;
     let isError = false;
     senderIdString.split(',').forEach((value) => {
-      const _value = value.trim();
+      const _value = value.trim()?.replace(/[{}]/g, '');
       if (_value) {
         if (_value.length !== 6) {
           isError = true;
@@ -363,6 +383,19 @@ export const SmsTraiCreate = (props) => {
     return isError;
   };
 
+  const statusValidationHandler = (columnName, value) => {
+    //Approval status should be Approved or Status/Template status should be Active/Registered.
+    switch (columnName) {
+      case STATUS_ALIASES[0]:
+      case STATUS_ALIASES[1]:
+        return ![ACTIVE, REGISTERED].includes(value);
+      case STATUS_ALIASES[2]:
+        return value !== APPROVED;
+      default:
+        return true;
+    }
+  };
+
   const templateIdValidation = (templateId) => {
     let isError = false;
     const _templateId = templateId?.replace(/[“”"'‘’`´]/g, '');
@@ -389,7 +422,9 @@ export const SmsTraiCreate = (props) => {
           };
         }
       })
-      ?.filter((obj) => obj && obj.template_name !== '' && obj.template_id !== '');
+      ?.filter(
+        (obj) => obj && obj.template_name !== '' && obj.template_id !== '',
+      );
     setUploadValidated(true);
     setValidatedData(transformedResults);
     setTemplateRegistrationIndex(templateIdIndex);
@@ -458,20 +493,26 @@ export const SmsTraiCreate = (props) => {
       const errorArray = [];
       const columnErrorArray = [];
       let rejectionReasons = '';
-      let statusErrorIndicator = true;
+      let statusErrorIndicator = false;
       //adding rejection reasons
       transformedResults[row].forEach((cell, index) => {
         if (index === headerIndex && headerValidationHandler(cell)) {
           columnErrorArray.push(
             `${selectedHeaderAlias.toUpperCase()} is mandatory and each ${selectedHeaderAlias.toUpperCase()} must contain either 6 letters or 6 digits. It cannot contain special characters. `,
           );
-        } else if (statusIndexes.includes(index) && [ACTIVE, REGISTERED, APPROVED].includes(cell.toLowerCase())) {
-          statusErrorIndicator = false;
+        } else if (statusIndexes.includes(index) && !statusErrorIndicator) {
+          statusErrorIndicator = statusValidationHandler(
+            transformedResults[0][index].toLowerCase(),
+            cell.toLowerCase(),
+          );
         } else if (index === templateIdIndex && templateIdValidation(cell)) {
           columnErrorArray.push(
             `${selectedTemplateIdAlias.toUpperCase()} is mandatory and ${selectedTemplateIdAlias.toUpperCase()} must be numeric.`,
           );
-        } else if (!cell && ![headerIndex, templateIdIndex, ...statusIndexes].includes(index)) {
+        } else if (
+          !cell &&
+          ![headerIndex, templateIdIndex, ...statusIndexes].includes(index)
+        ) {
           errorArray.push(`"${transformedResults[0][index]}"`);
         } else if (index === templateNameIndex && cell) {
           if (templateNameObj[cell]) {
@@ -485,7 +526,7 @@ export const SmsTraiCreate = (props) => {
 
       if (statusErrorIndicator) {
         columnErrorArray.push(
-          `Only templates with active/registered/approved status will be created.`,
+          `Approval status should be Approved or Status/Template status should be Active/Registered.`,
         );
       }
       if (errorArray.length !== 0) {
@@ -671,7 +712,7 @@ export const SmsTraiCreate = (props) => {
         obj['unicode-validity'] = true;
         obj['updated-sms-editor'] = '';
         obj['var-mapped'] = {};
-        obj.header = obj.header?.replace(/\s/g, '')?.split(',');
+        obj.header = obj.header?.replace(/[\s{}]/g, '')?.split(',');
         const history = obj;
         history.tabKey = 1;
         savedData.push({
@@ -745,7 +786,10 @@ export const SmsTraiCreate = (props) => {
           {previewFileIndex === null && dropZone && (
             <>
               <CapSpin spinning={isFileDropped}>
-                <Dropzone onDrop={onDrop} onFileDialogCancel={deleteOrCancelCSV}>
+                <Dropzone
+                  onDrop={onDrop}
+                  onFileDialogCancel={deleteOrCancelCSV}
+                >
                   {({ getRootProps, getInputProps }) => (
                     <div {...getRootProps()} className="file-drop-zone">
                       <input {...getInputProps()} />
@@ -789,16 +833,18 @@ export const SmsTraiCreate = (props) => {
                       <CapLabel.CapLabelInline type="label9">
                         {fileMeta.name}
                       </CapLabel.CapLabelInline>
-                      {saveTemplate && <CapLabel.CapLabelInline
-                        type="label1"
-                        className="number-of-records"
-                      >
-                        (
-                        {formatMessage(messages.numberOfRecords, {
-                          value: fileData.data.length - 1,
-                        })}
-                        )
-                      </CapLabel.CapLabelInline>}
+                      {saveTemplate && (
+                        <CapLabel.CapLabelInline
+                          type="label1"
+                          className="number-of-records"
+                        >
+                          (
+                          {formatMessage(messages.numberOfRecords, {
+                            value: fileData.data.length - 1,
+                          })}
+                          )
+                        </CapLabel.CapLabelInline>
+                      )}
                     </CapColumn>
                     {errorText && (
                       <>

package/v2Containers/SmsTrai/Edit/constants.js

@@ -4,7 +4,6 @@
  *
  */
 
-export const DEFAULT_ACTION = 'app/SmsTrai/DEFAULT_ACTION';
 export const CHARLIMIT = 30;
 export const SMS = 'SMS';
 export const SMS_TRAI_VAR = '{#var#}';

package/v2Containers/Templates/_templates.scss

@@ -19,6 +19,25 @@
 }
 
 .creatives-templates-list {
+
+  .delete-template-confirm {
+    .ant-modal-footer {
+      padding: $CAP_SPACE_16 $CAP_SPACE_24 $CAP_SPACE_24 $CAP_SPACE_24;
+    }
+
+    .ant-modal-header {
+      padding: $CAP_SPACE_24 $CAP_SPACE_24 $CAP_SPACE_08 $CAP_SPACE_24;
+    }
+
+    .ant-modal-body {
+      padding: 0 $CAP_SPACE_24;
+    }
+
+    .ant-modal-close-x {
+      padding: $CAP_SPACE_12;
+    }
+  }
+
   .pagination-container {
     .FACEBOOK {
       .ant-card-body {
@@ -524,40 +543,9 @@
   }
 }
 
-.whatsapp-card-title {
-
-  .whatsapp-status-container {
-    margin-top: 12px;
-    width: 150%;
-    height: 20px;
-
-    .cap-colored-tag-v2 {
-      font-weight: normal;
-    }
-  }
-}
-
 .whatsapp-illustration-desc {
   font-size: 14px;
   color: rgba(0, 0, 0, 0.87);
   margin: 8px 0;
   white-space: pre-wrap;
 }
-
-.delete-template-confirm {
-  .ant-modal-footer {
-    padding: $CAP_SPACE_16 $CAP_SPACE_24 $CAP_SPACE_24 $CAP_SPACE_24;
-  }
-
-  .ant-modal-header {
-    padding: $CAP_SPACE_24 $CAP_SPACE_24 $CAP_SPACE_08 $CAP_SPACE_24;
-  }
-
-  .ant-modal-body {
-    padding: 0 $CAP_SPACE_24;
-  }
-
-  .ant-modal-close-x {
-    padding: $CAP_SPACE_12;
-  }
-}

package/v2Containers/Templates/actions.js

@@ -55,24 +55,18 @@ export function setWeChatAccount(weChatAccount) {
     weChatAccount,
   };
 }
-
 export function setChannelAccount(channel, account) {
-  switch (channel) {
-    case LINE: {
-      return {
-        type: types.SET_LINE_ACCOUNT,
-        account,
-      };
-    }
-    case WHATSAPP: {
-      return {
-        type: types.SET_WHATSAPP_ACCOUNT,
-        account,
-      };
-    }
-    default:
-      return {};
+  const channelTypeMapping = {
+    LINE: types.SET_LINE_ACCOUNT,
+    WHATSAPP: types.SET_WHATSAPP_ACCOUNT,
+  };
+  if (channelTypeMapping[channel]) {
+    return {
+      type: channelTypeMapping[channel],
+      account,
+    };
   }
+  return {};
 }
 
 export function setViberAccount(viberAccount) {

package/v2Containers/Templates/index.js

@@ -22,7 +22,31 @@ import find from 'lodash/find';
 import map from 'lodash/map';
 import { bindActionCreators } from 'redux';
 import { Modal, Form} from 'antd';
-import {CapMenu, CapDropdown, CapButton, CapInput, CapIcon, CapRadioCard, CapPopover, CapSpin, CapCustomCard, CapRow, CapSlideBox, CapLink, CapHeading, CapNotification, CapIllustration, CapHeader, CapLabel, CapRadio, CapSelectFilter, CapTag, CapTooltip, CapAlert, CapModal } from '@capillarytech/cap-ui-library';
+import {
+  CapMenu,
+  CapDropdown,
+  CapButton,
+  CapInput,
+  CapIcon,
+  CapRadioCard,
+  CapPopover,
+  CapSpin,
+  CapCustomCard,
+  CapRow,
+  CapSlideBox,
+  CapLink,
+  CapHeading,
+  CapNotification,
+  CapIllustration,
+  CapHeader,
+  CapLabel,
+  CapRadio,
+  CapSelectFilter,
+  CapTag,
+  CapTooltip,
+  CapAlert,
+  CapModal,
+} 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';
@@ -53,6 +77,7 @@ import * as commonUtil from '../../utils/common';
 import Pagination from '../../v2Components/Pagination';
 import EmailPreview from '../../v2Components/EmailPreview';
 import CreativesContainer from '../CreativesContainer';
+import WhatsappStatusContainer from '../../v2Components/WhatsappStatusContainer';
 import WechatRichmediaTemplatePreview from '../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
 import {
   CHANNEL_CREATE_TRACK_MAPPING,
@@ -68,7 +93,7 @@ import {
   STATUS as WHATSAPP_STATUS,
   WHATSAPP_STATUSES,
 } from '../Whatsapp/constants';
-import { getWhatsappContent, getWhatsappStatusContainer, getWhatsappStatus, getWhatsappCategory } from '../Whatsapp/utils';
+import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory } from '../Whatsapp/utils';
 import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK, WHATSAPP } from '../CreativesContainer/constants';
 
 import {CREATIVE} from '../Facebook/constants';
@@ -933,10 +958,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         }
         case WHATSAPP:
           templateData.title = (
-            <div className="whatsapp-card-title">
-              <span title={template.name} >{template.name}</span>
-              {getWhatsappStatusContainer(template)}
-            </div>
+            <CapRow className="whatsapp-card-title">
+              <CapLabel>{template.name}</CapLabel>
+              <WhatsappStatusContainer template={template} />
+            </CapRow>
           );
 
           templateData.content = getWhatsappContent(template);
@@ -2146,16 +2171,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         formatMessage,
       },
     } = this.props;
-    switch (channel?.toUpperCase()) {
-      case MOBILE_PUSH:
-        return formatMessage(messages.mobilepushAccount);
-      case WECHAT:
-        return formatMessage(messages.wechatAccount);
-      case WHATSAPP:
-        return formatMessage(messages.whatsappAccount);
-      default:
-        return '';
+
+    const channelObj = {
+      [MOBILE_PUSH]: 'mobilepushAccount',
+      [WECHAT]: 'wechatAccount',
+      [WHATSAPP]: 'whatsappAccount',
     }
+    return formatMessage(messages[channelObj[channel?.toUpperCase()]]);
   }
 
   showAccountName = () => {

package/v2Containers/Whatsapp/index.js

@@ -47,6 +47,7 @@ import {
 } from './constants';
 import { DATE_DISPLAY_FORMAT, TIME_DISPLAY_FORMAT } from '../App/constants';
 import messages from './messages';
+import globalMessages from '../Cap/messages'
 import withCreatives from '../../hoc/withCreatives';
 import TemplatePreview from '../../v2Components/TemplatePreview';
 import TagList from '../TagList';
@@ -540,7 +541,7 @@ export const Whatsapp = (props) => {
       <CapHeader
         title={
           <CapHeading type="h4">
-            {formatMessage(messages.templateNameLabel)}
+            {formatMessage(globalMessages.templateNameLabel)}
             <CapTooltipWithInfo
               infoIconProps={{
                 style: { marginLeft: CAP_SPACE_04 },
@@ -560,7 +561,7 @@ export const Whatsapp = (props) => {
         id={`whatsapp_template_name_input`}
         onChange={onTemplateNameChange}
         errorMessage={templateNameError}
-        placeholder={formatMessage(messages.templateNamePlaceholder)}
+        placeholder={formatMessage(globalMessages.templateNamePlaceholder)}
         defaultValue={templateName || ''}
         value={templateName || ''}
         size="default"
@@ -842,7 +843,7 @@ export const Whatsapp = (props) => {
 
   return (
     <CapSpin spinning={spin}>
-      <CapRow>
+      <CapRow className='cap-whatsapp-creatives'>
         <CapColumn span={14}>
           {isEditFlow ? editModeContent : createModeContent}
           <div className="whatsapp-scroll-div" />

package/v2Containers/Whatsapp/index.scss

@@ -1,56 +1,55 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables';
+@import "~@capillarytech/cap-ui-library/styles/_variables";
 
-.whatsapp-render-heading {
-  margin-top: $CAP_SPACE_16;
-  margin-bottom: 6px;
-}
-.whatsapp-template-name-desc {
-  margin-bottom: 6px;
-}
-.whatsapp-create-render-unsubscribe-text {
-  color: $FONT_COLOR_02;
-  margin: $CAP_SPACE_08 0px $CAP_SPACE_08 16px;
-}
-.whatsapp-edit-render-unsubscribe-text {
-  color: $FONT_COLOR_02;
-}
-.whatsapp-render-message-length {
-  text-align: right;
-}
-.whatsapp-create-template-message-input {
-  background-color: $CAP_G10;
-  padding-top: $CAP_SPACE_16;
-}
-.whatsapp-template-message-error {
-  margin-left: $CAP_SPACE_16;
-  margin-right: $CAP_SPACE_16;
-}
-.whatsapp-scroll-div {
-  margin-bottom: 250px;
-}
-.whatsapp-category-tag {
-  margin-left: 8px;
-}
-.whatsapp-edit-alert-margin {
-  margin-top: 46px;
-}
-.whatsapp-edit-template-message-input {
-  background-color: $CAP_G10;
-  padding: 0 $CAP_SPACE_16;
-}
-.whatsapp-edit-template-message-heading {
-  margin-top: $CAP_SPACE_16;
-  margin-bottom: $CAP_SPACE_08;
-}
-.whatsapp-edit-disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-#whatsapp-create-template-message-input {
-  margin-left: $CAP_SPACE_16;
-  margin-right: $CAP_SPACE_16;
-  width: 95%;
-}
-#select-whatsapp-category {
-  width: 100%;
+.cap-whatsapp-creatives {
+  .whatsapp-render-heading {
+    margin-top: $CAP_SPACE_16;
+    margin-bottom: 6px;
+  }
+  .whatsapp-template-name-desc {
+    margin-bottom: 6px;
+  }
+  .whatsapp-create-render-unsubscribe-text {
+    color: $FONT_COLOR_02;
+    margin: $CAP_SPACE_08 0px $CAP_SPACE_08 16px;
+  }
+  .whatsapp-edit-render-unsubscribe-text {
+    color: $FONT_COLOR_02;
+  }
+  .whatsapp-render-message-length {
+    text-align: right;
+  }
+  .whatsapp-create-template-message-input {
+    background-color: $CAP_G10;
+    padding-top: $CAP_SPACE_16;
+  }
+  .whatsapp-template-message-error {
+    margin-left: $CAP_SPACE_16;
+    margin-right: $CAP_SPACE_16;
+  }
+  .whatsapp-scroll-div {
+    margin-bottom: 250px;
+  }
+  .whatsapp-edit-alert-margin {
+    margin-top: 46px;
+  }
+  .whatsapp-edit-template-message-input {
+    background-color: $CAP_G10;
+    padding: 0 $CAP_SPACE_16;
+  }
+  .whatsapp-edit-template-message-heading {
+    margin-top: $CAP_SPACE_16;
+    margin-bottom: $CAP_SPACE_08;
+  }
+  .whatsapp-edit-disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+  #whatsapp-create-template-message-input {
+    margin-left: $CAP_SPACE_16;
+    margin-right: $CAP_SPACE_16;
+    width: 95%;
+  }
+  #select-whatsapp-category {
+    width: 100%;
+  }
 }

package/v2Containers/Whatsapp/messages.js

@@ -1,19 +1,11 @@
 import { defineMessages } from 'react-intl';
 const prefix = `creatives.containersV2.Whatsapp`;
 export default defineMessages({
-  templateNameLabel: {
-    id: `${prefix}.templateNameLabel`,
-    defaultMessage: 'Template name',
-  },
   templateNameDesc: {
     id: `${prefix}.templateNameDesc`,
     defaultMessage:
       'Must be a unique name and can only contain lowercase alphanumeric characters and underscores.',
   },
-  templateNamePlaceholder: {
-    id: `${prefix}.templateNamePlaceholder`,
-    defaultMessage: 'Enter template name',
-  },
   templateNameTooltip: {
     id: `${prefix}.templateNameTooltip`,
     defaultMessage: `Tip : Use a name that helps WhatsApp's reviewer understand the purpose of your message, for example "order_delivery" rather than "template_1"`,