@capillarytech/creatives-library 7.10.52 → 7.10.54

package/package.json

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

package/v2Components/TemplatePreview/index.js

@@ -683,7 +683,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           ) : ''
         }
             {
-              channel && channel?.toUpperCase() === WHATSAPP ? (
+              channel?.toUpperCase() === WHATSAPP ? (
                 <>
                   <div className='shell-v2 align-center'>
                     <CapImage

package/v2Components/WhatsappStatusContainer/_whatsappStatusContainer.scss

@@ -1,5 +1,7 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
 .whatsapp-status-container {
-  margin-top: 12px;
+  margin-top: $CAP_SPACE_12;
   width: 150%;
   height: 20px;
   
@@ -8,6 +10,6 @@
   }
 
   .whatsapp-category-tag {
-    margin-left: 8px;
+    margin-left: $CAP_SPACE_08;
   }
 }

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -22,24 +22,15 @@ const StyledLabel = styled(CapLabelInline)`
 const PrefixWrapper = styled.div`
   margin-right: 16px;
 `;
-function getChannelLabel(channel = '') {
-  const labels = {
-    sms: 'SMS',
-    email: 'Email',
-    mobilepush: 'Push notification',
-    wechat: 'Wechat',
-    no_communication: 'NO_COMMUNICATION',
-    ftp: 'FTP',
-    whatsapp: 'WhatsApp template',
-  };
-  return labels[channel.toLowerCase()];
-}
+
 const renderWhatsappData = (type, value) => (
   <StyledLabel type={type}>
     {value}
   </StyledLabel>
 )
 function SlideBoxHeader(props) {
+
+
   const { slidBoxContent, templateData, onShowTemplates, creativesMode, isFullMode, showPrefix, shouldShowTemplateName, channel, templateNameRenderProp, weChatTemplateType, onWeChatMaptemplateStepChange, weChatMaptemplateStep, templateStep, smsRegister } = props;
   const showTemplateNameHeader = isFullMode && shouldShowTemplateName;
   const mapTemplateCreate = !showTemplateNameHeader && slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
@@ -55,6 +46,20 @@ function SlideBoxHeader(props) {
   const whatsappName = whatsappTemplateName || templateData?.name;
   const whatsappCategory = whatsappTemplateCategory || get(templateData, `versions.base.content.whatsapp.category`, '');
 
+
+  const getChannelLabel = (currentChannel = '') => {
+    const labels = {
+      sms: 'SMS',
+      email: 'Email',
+      mobilepush: 'Push notification',
+      wechat: 'Wechat',
+      no_communication: 'NO_COMMUNICATION',
+      ftp: 'FTP',
+      whatsapp: <FormattedMessage {...messages.whatsappTemplate} />,
+    };
+    return labels[currentChannel.toLowerCase()];
+  };
+
   return (
     <div key="creatives-container-slidebox-header-content">
       {slidBoxContent === 'templates' && !showTemplateNameHeader && (

package/v2Containers/CreativesContainer/messages.js

@@ -310,4 +310,8 @@ export default defineMessages({
     id: `${scope}.whatsappOverview`,
     defaultMessage: `WhatsApp template overview`,
   },
+  "whatsappTemplate": {
+    id: `${scope}.whatsappTemplate`,
+    defaultMessage: `WhatsApp template`,
+  },
 });

package/v2Containers/SmsTrai/Create/constants.js

@@ -1,8 +1,4 @@
-export const DEFAULT_ACTION = 'app/SmsTrai/DEFAULT_ACTION';
-export const STATUS = 'status';
 export const TEMPLATE_NAME = 'template name';
-export const HEADER = 'header';
-export const TEMPLATE_ID = 'template id';
 export const SMS = 'SMS';
 export const MAPPED_SAVED_COLUMN = {
   'TEMPLATE ID': 'template_id',
@@ -22,12 +18,12 @@ export const MAPPED_SAVED_COLUMN = {
   'CONSENT TYPE': 'consent-type',
 };
 export const HEADER_ALIASES = [
-  HEADER,
+  'header',
   'sender id',
   'senders',
   'header id',
   'headers',
-  'linked headers'
+  'linked headers',
 ];
 export const TEMPLATE_ID_ALIASES = [
   'template id',
@@ -76,4 +72,4 @@ export const CHECK_TRAI_SMS_DUPLICATE_TEMPLATE_NAME_FAILURE =
 export const REQUEST = 'REQUEST';
 export const SUCCESS = 'SUCCESS';
 export const FAILURE = 'FAILURE';
-export const DUPLICATE = 'Duplicate';
+export const DUPLICATE = 'Duplicate';

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/TemplatesV2/index.js

@@ -50,7 +50,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       isFullMode,
       onChannelChange,
       showDisabledFBInfo,
-      enableNewChannels,
+      enableNewChannels = [],
     } = props;
 
     const defaultPanes = {