@capillarytech/creatives-library 8.0.65-alpha.6 → 8.0.65

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',
+  },
 });