@capillarytech/creatives-library 8.0.62 → 8.0.64-alpha.0

package/package.json

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

package/v2Containers/Templates/index.js

@@ -21,7 +21,6 @@ import cloneDeep from 'lodash/cloneDeep';
 import find from 'lodash/find';
 import map from 'lodash/map';
 import { bindActionCreators } from 'redux';
-import { Modal, Form} from 'antd';
 import {
   CapMenu,
   CapDropdown,
@@ -100,15 +99,13 @@ import {
 import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES } from './constants';
 import { COPY_OF } from '../../containers/App/constants';
 import {
-  TWILIO_CATEGORY_OPTIONS,
-  KARIX_GUPSHUP_CATEGORY_OPTIONS,
   STATUS_OPTIONS,
   CATEGORY,
   WHATSAPP_CATEGORIES,
   STATUS as WHATSAPP_STATUS,
   WHATSAPP_STATUSES,
-  HOST_TWILIO,
   HOST_GUPSHUP,
+  CATEGORY_OPTIONS_MAP,
 } from '../Whatsapp/constants';
 import { INAPP_LAYOUT_DETAILS } from '../InApp/constants';
 import { ZALO_STATUS_OPTIONS, ZALO_STATUSES } from '../Zalo/constants';
@@ -1580,7 +1577,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   prepareWeChatPreviewData(template) {
     if (template && template.versions && template.versions.base && !isEmpty(template.versions.base)) {
       if (template.definition && template.definition.msgcontent && template.definition.msgcontent === "RICH_MEDIA_WECHAT") {
-        console.log("prepareWeChatPreviewData", template, JSON.stringify(template), template.versions.base.mediaList, JSON.stringify(template.versions.base.mediaList));
         return template.versions.base.mediaList;
       }
       return this.prepareWeChatMappedPreviewData(template.versions.base.content, template.versions.base.Tag, template.versions.base.data);
@@ -2861,6 +2857,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
 
+    const getCategoryOptions = (hostName) => {
+      return CATEGORY_OPTIONS_MAP[hostName];
+    };
+
     const cmsTemplateSelectionContent = (
       <CardGrid
         className={""}
@@ -2965,9 +2965,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           }
           <CapSelectFilter
             placement="bottomLeft"
-            data={this.state.hostName === HOST_TWILIO
-              ? TWILIO_CATEGORY_OPTIONS
-              : KARIX_GUPSHUP_CATEGORY_OPTIONS}
+            data={getCategoryOptions(this.state.hostName)}
             onSelect={this.setWhatsappCategory}
             selectedValue={this.state.selectedWhatsappCategory}
             placeholder="Category"

package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap

@@ -474,6 +474,24 @@ exports[`Test Templates container Should render temlates when whatsapp templates
                       />,
                       "value": "rejected",
                     },
+                    Object {
+                      "key": "pending",
+                      "label": <FormattedMessage
+                        defaultMessage="Pending"
+                        id="creatives.containersV2.Whatsapp.pending"
+                        values={Object {}}
+                      />,
+                      "value": "pending",
+                    },
+                    Object {
+                      "key": "paused",
+                      "label": <FormattedMessage
+                        defaultMessage="Paused"
+                        id="creatives.containersV2.Whatsapp.paused"
+                        values={Object {}}
+                      />,
+                      "value": "paused",
+                    },
                   ]
                 }
                 dropdownMaxHeight="320px"
@@ -833,6 +851,24 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
                       />,
                       "value": "rejected",
                     },
+                    Object {
+                      "key": "pending",
+                      "label": <FormattedMessage
+                        defaultMessage="Pending"
+                        id="creatives.containersV2.Whatsapp.pending"
+                        values={Object {}}
+                      />,
+                      "value": "pending",
+                    },
+                    Object {
+                      "key": "paused",
+                      "label": <FormattedMessage
+                        defaultMessage="Paused"
+                        id="creatives.containersV2.Whatsapp.paused"
+                        values={Object {}}
+                      />,
+                      "value": "paused",
+                    },
                   ]
                 }
                 dropdownMaxHeight="320px"
@@ -1288,6 +1324,24 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
                       />,
                       "value": "rejected",
                     },
+                    Object {
+                      "key": "pending",
+                      "label": <FormattedMessage
+                        defaultMessage="Pending"
+                        id="creatives.containersV2.Whatsapp.pending"
+                        values={Object {}}
+                      />,
+                      "value": "pending",
+                    },
+                    Object {
+                      "key": "paused",
+                      "label": <FormattedMessage
+                        defaultMessage="Paused"
+                        id="creatives.containersV2.Whatsapp.paused"
+                        values={Object {}}
+                      />,
+                      "value": "paused",
+                    },
                   ]
                 }
                 dropdownMaxHeight="320px"
@@ -1725,6 +1779,24 @@ exports[`Test Templates container Test max templates warning 1`] = `
                       />,
                       "value": "rejected",
                     },
+                    Object {
+                      "key": "pending",
+                      "label": <FormattedMessage
+                        defaultMessage="Pending"
+                        id="creatives.containersV2.Whatsapp.pending"
+                        values={Object {}}
+                      />,
+                      "value": "pending",
+                    },
+                    Object {
+                      "key": "paused",
+                      "label": <FormattedMessage
+                        defaultMessage="Paused"
+                        id="creatives.containersV2.Whatsapp.paused"
+                        values={Object {}}
+                      />,
+                      "value": "paused",
+                    },
                   ]
                 }
                 dropdownMaxHeight="320px"

package/v2Containers/Whatsapp/constants.js

@@ -144,12 +144,32 @@ export const TWILIO_CATEGORY_OPTIONS = [
   },
 ];
 
+export const ICS_CATEGORY_OPTIONS = [
+  {
+    key: 'utility',
+    value: WHATSAPP_CATEGORIES.utility,
+    label: <FormattedMessage {...messages.utility} />,
+    tooltipLabel: <FormattedMessage {...messages.utilityTooltip} />,
+    tagColor: CAP_PURPLE03,
+    tagTextColor: CAP_PURPLE02,
+  },
+  {
+    key: 'marketing',
+    value: WHATSAPP_CATEGORIES.marketing,
+    label: <FormattedMessage {...messages.marketing} />,
+    tooltipLabel: <FormattedMessage {...messages.marketingTooltip} />,
+    tagColor: CAP_ORANGE01,
+    tagTextColor: CAP_ORANGE,
+  },
+];
+
 export const WHATSAPP_STATUSES = {
   awaitingApproval: 'awaitingApproval',
   approved: 'approved',
   rejected: 'rejected',
   pending: 'pending',
   unsubmitted: 'unsubmitted',
+  paused: 'paused',
 };
 
 export const STATUS_OPTIONS = [
@@ -168,6 +188,16 @@ export const STATUS_OPTIONS = [
     value: WHATSAPP_STATUSES.rejected,
     label: <FormattedMessage {...messages.rejected} />,
   },
+  {
+    key: 'pending',
+    value: WHATSAPP_STATUSES.pending,
+    label: <FormattedMessage {...messages.pending} />,
+  },
+  {
+    key: 'paused',
+    value: WHATSAPP_STATUSES.paused,
+    label: <FormattedMessage {...messages.paused} />,
+  },
 ];
 
 export const TAG = 'TAG';
@@ -228,6 +258,7 @@ export const WHATSAPP_DOCUMENT_SIZE = 16000000; // 16MB
 export const HOST_TWILIO = 'twiliowhatsapptrans';
 export const HOST_KARIX = 'karixwhatsappbulk';
 export const HOST_GUPSHUP = 'gupshupwhatsappbulk';
+export const HOST_ICS = 'icswababulk';
 export const SIZE_UNITS = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
 export const DOCUMENT_FORMAT = 'PDF';
 export const DOCUMENT_SIZE = '16 MB';
@@ -528,4 +559,11 @@ export const LANGUAGE_OPTIONS = [
 ];
 
 export const OTP_CONFIG_URI = "/org/setup/configurations/OTPConfigurations";
-export const AI_CONTENT_BOT_DISABLED = "AI_CONTENT_BOT_DISABLED";
+export const AI_CONTENT_BOT_DISABLED = "AI_CONTENT_BOT_DISABLED";
+export const CORRECT_TEMPLATE_FORMAT_URL = "https://developers.facebook.com/docs/whatsapp/updates-to-pricing/new-template-guidelines";
+export const CATEGORY_OPTIONS_MAP = {
+  [HOST_TWILIO]: TWILIO_CATEGORY_OPTIONS,
+  [HOST_KARIX]: KARIX_GUPSHUP_CATEGORY_OPTIONS,
+  [HOST_GUPSHUP]: KARIX_GUPSHUP_CATEGORY_OPTIONS,
+  [HOST_ICS]: ICS_CATEGORY_OPTIONS,
+};

package/v2Containers/Whatsapp/index.js

@@ -29,7 +29,6 @@ import  CapAskAira  from '@capillarytech/cap-ui-library/CapAskAira';
 import moment from 'moment';
 
 import {
-  CAP_SPACE_04,
   CAP_SPACE_16,
   CAP_SPACE_24,
   CAP_SPACE_32,
@@ -65,7 +64,6 @@ import {
   ALLOWED_IMAGE_EXTENSIONS_REGEX,
   WHATSAPP_IMG_SIZE,
   HOST_TWILIO,
-  HOST_KARIX,
   HOST_GUPSHUP,
   ALLOWED_EXTENSIONS_VIDEO_REGEX,
   ALLOWED_EXTENSIONS_DOCUMENT_REGEX,
@@ -81,7 +79,10 @@ import {
   BUTTON_TEXT,
   OTP_CONFIG_URI,
   WHATSAPP_CATEGORIES,
-  AI_CONTENT_BOT_DISABLED
+  AI_CONTENT_BOT_DISABLED,
+  ICS_CATEGORY_OPTIONS,
+  CORRECT_TEMPLATE_FORMAT_URL,
+  CATEGORY_OPTIONS_MAP,
 } from './constants';
 import { DATE_DISPLAY_FORMAT, TIME_DISPLAY_FORMAT } from '../App/constants';
 import messages from './messages';
@@ -672,6 +673,11 @@ export const Whatsapp = (props) => {
     label: renderTemplateCategoryLabel(option.tooltipLabel, option.label),
   }));
 
+  const icsCategoryOptions = ICS_CATEGORY_OPTIONS.map((option) => ({
+    value: option.value,
+    label: renderTemplateCategoryLabel(option.tooltipLabel, option.label),
+  }));
+
   const mediaRadioOptions = [
     {
       value: WHATSAPP_MEDIA_TYPES.TEXT,
@@ -1126,6 +1132,10 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
     setTemplateCategory(value);
   };
 
+  const getCategoryOptions = (host) => {
+   return CATEGORY_OPTIONS_MAP[host] || [];
+  }
+
   const onTemplateLanguageChange = (value) => {
     setTemplateLanguage(value);
   };
@@ -1534,11 +1544,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       {renderLabel("templateCategoryLabel")}
       <CapSelect
         id="select-whatsapp-category"
-        options={
-          host === HOST_TWILIO
-            ? twilioCategoryOptions
-            : karixGupshupCategoryOptions
-        }
+        options={getCategoryOptions(host)}
         onChange={onTemplateCategoryChange}
         value={templateCategory}
       />
@@ -1815,7 +1821,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
   };
 
   const onClickIncorrectFormat = () => {
-    window.open('https://developers.facebook.com/docs/whatsapp/updates-to-pricing/new-template-guidelines', "_blank");
+    window.open(CORRECT_TEMPLATE_FORMAT_URL, "_blank");
   };
 
   const getTemplateStatusType = () => {
@@ -1840,27 +1846,58 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
       case WHATSAPP_STATUSES.rejected:
         return (
           <>
-            <CapLabel type="label2" style={{ fontWeight: 500 }}>
+            <CapLabel type="label2" className='template-status-font'>
               {formatMessage(messages.rejectedStatusMsg)}
             </CapLabel>
             <CapLabel
               type="label2"
-              style={{ margin: `${CAP_SPACE_04} 0 ${CAP_SPACE_04}` }}
+              className='template-status-margin'
+            >
+              {computeTemplateRejectionReason()}
+            </CapLabel>
+          </>
+        );
+      case WHATSAPP_STATUSES.paused:
+        return (
+          <>
+            <CapLabel type="label2" className='template-status-font'>
+              {formatMessage(messages.pausedStatusMsg)}
+            </CapLabel>
+            <CapLabel
+              type="label2"
+              className='template-status-margin'
             >
               {computeTemplateRejectionReason()}
             </CapLabel>
           </>
         );
+      case WHATSAPP_STATUSES.pending:
+        return (
+          <>
+            <CapLabel type="label2" className='template-status-font'>
+              {formatMessage(messages.pendingStatusMsg)}
+            </CapLabel>
+            <CapLabel
+              type="label2"
+              className='template-status-margin'
+            >
+              {formatMessage(messages.pendingStatusDesc, {
+                date: moment(templateDate).format(DATE_DISPLAY_FORMAT),
+                time: moment(templateDate).format(TIME_DISPLAY_FORMAT),
+              })}
+            </CapLabel>
+          </>
+        );
       default:
         //all cases except approved and rejected, return awaiting approval
         return (
           <>
-            <CapLabel type="label2" style={{ fontWeight: 500 }}>
+            <CapLabel type="label2" className='template-status-font'>
               {formatMessage(messages.awaitingStatusMsg)}
             </CapLabel>
             <CapLabel
               type="label2"
-              style={{ margin: `${CAP_SPACE_04} 0 ${CAP_SPACE_04}` }}
+              className='template-status-margin'
             >
               {formatMessage(messages.awaitingStatusDesc, {
                 date: moment(templateDate).format(DATE_DISPLAY_FORMAT),

package/v2Containers/Whatsapp/index.scss

@@ -247,4 +247,12 @@
 }
 .whatsapp-tooltip-header{
   color: $CAP_G10;
+}
+
+.template-status-font{
+  font-weight: 500;
+}
+
+.template-status-margin{
+  margin: $CAP_SPACE_04 0 $CAP_SPACE_04;
 }

package/v2Containers/Whatsapp/messages.js

@@ -251,6 +251,10 @@ export default defineMessages({
     id: `${prefix}.rejectedStatusMsg`,
     defaultMessage: 'This template has been rejected',
   },
+  pausedStatusMsg: {
+    id: `${prefix}.pausedStatusMsg`,
+    defaultMessage: 'This template has been paused',
+  },
   tagContentMismatchError: {
     id: `${prefix}.tagContentMismatchError`,
     defaultMessage:
@@ -270,6 +274,15 @@ export default defineMessages({
     id: `${prefix}.awaitingStatusMsg`,
     defaultMessage: 'This template is awaiting approval',
   },
+  pendingStatusMsg: {
+    id: `${prefix}.pendingStatusMsg`,
+    defaultMessage: 'This template has been pending for approval',
+  },
+  pendingStatusDesc: {
+    id: `${prefix}.pendingStatusDesc`,
+    defaultMessage:
+      'The template has been sent for approval at {date}, {time}. It takes up to 48 hrs to get approved.',
+  },
   here: {
     id: `${prefix}.here`,
     defaultMessage: 'here',
@@ -716,4 +729,12 @@ export default defineMessages({
     id: `${prefix}.checkExpiryTooltipDesc`,
     defaultMessage: 'To check the configured expiry time that is same for all OTPs',
   },
+  pending: {
+    id: `${prefix}.pending`,
+    defaultMessage: 'Pending',
+  },
+  paused: {
+    id: `${prefix}.paused`,
+    defaultMessage: 'Paused',
+  },
 });