@capillarytech/creatives-library 8.0.71 → 8.0.73-alpha.0

package/package.json

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

package/services/api.js

@@ -2,12 +2,12 @@
  * Created by vivek on 3/5/17.
  */
 import 'whatwg-fetch';
+import { GA, decompressJsonObject } from '@capillarytech/cap-ui-utils';
 import { loadItem, clearItem } from './localStorageApi';
 import config from '../config/app';
 import pathConfig from '../config/path';
 import getSchema from './getSchema';
 import * as API from '../utils/ApiCaller';
-import { GA, decompressJsonObject } from '@capillarytech/cap-ui-utils';
 import { addBaseToTemplate } from '../utils/commonUtils';
 import { EMAIL, SMS } from '../v2Containers/CreativesContainer/constants';
 let API_ENDPOINT = config.development.api_endpoint;
@@ -403,14 +403,20 @@ export const getCmsData = (cmsType, projectId, langId) => {
   return API.get(url);
 };
 
-export const getEdmTemplates = () => {
+export const getEdmTemplates = async () => {
   const url = `${API_ENDPOINT}/templates/email/default`;
-  return request(url, getAPICallObject('GET'));
+  const compressedEdmTemplates = await request(url, getAPICallObject('GET'));
+  const { response = '' } = compressedEdmTemplates || {};
+  const decompressedEdmTemplates = decompressJsonObject(response);
+  return { ...compressedEdmTemplates, response: addBaseToTemplate(decompressedEdmTemplates)};
 };
 
-export const getDefaultBeeTemplates = () => {
+export const getDefaultBeeTemplates = async () => {
   const url = `${API_ENDPOINT}/templates/v2/email/default`;
-  return request(url, getAPICallObject('GET'));
+  const compressedDefaultBeeTemplates = await request(url, getAPICallObject('GET'));
+  const { response = '' } = compressedDefaultBeeTemplates || {};
+  const decompressedEdmTemplates = decompressJsonObject(response);
+  return { ...compressedDefaultBeeTemplates, response: addBaseToTemplate(decompressedEdmTemplates)};
 };
 
 // All about line

package/v2Containers/Email/index.js

@@ -199,9 +199,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         this.setState({isDragDrop: true});
       }
       if (this.props.params.id) {
-        this.props.actions.getCmsSetting(BEE_PLUGIN, this.props.Templates.BEETemplate._id, 'open', undefined, isBEESupport, isBEEAppEnable);
+        this.props.actions.getCmsSetting(BEE_PLUGIN, this.props.Templates.BEETemplate.versions.base.drag_drop_id, 'open', undefined, isBEESupport, isBEEAppEnable);
       } else if (this.props.location.query.module !== "library" || (this.props.location.query.module === "library" && !this.props.templateData)) {
-        this.props.actions.getCmsSetting(BEE_PLUGIN, this.props.Templates.BEETemplate._id, 'create', undefined, isBEESupport, isBEEAppEnable);
+        this.props.actions.getCmsSetting(BEE_PLUGIN, this.props.Templates.BEETemplate.versions.base.drag_drop_id, 'create', undefined, isBEESupport, isBEEAppEnable);
       }
     }
     this.setState({ content: (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''), formData});

package/v2Containers/Templates/index.js

@@ -22,7 +22,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,
@@ -102,15 +101,18 @@ import {
 import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES , ACCOUNT_MAPPING_ON_CHANNEL} 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,
+  HOST_TWILIO,
+  TWILIO_CATEGORY_OPTIONS,
+  KARIX_GUPSHUP_CATEGORY_OPTIONS,
+  ICS_CATEGORY_OPTIONS,
+  HOST_ICS,
 } from '../Whatsapp/constants';
 import { INAPP_LAYOUT_DETAILS } from '../InApp/constants';
 import { ZALO_STATUS_OPTIONS, ZALO_STATUSES } from '../Zalo/constants';
@@ -2967,6 +2969,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
 
+    const getCategoryOptions = (hostName) => {
+      return CATEGORY_OPTIONS_MAP[hostName];
+    };
+
     const cmsTemplateSelectionContent = (
       <CardGrid
         className={""}
@@ -3074,9 +3080,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           {this.state?.hostName ? (
             <CapSelectFilter
               placement="bottomLeft"
-              data={this.state.hostName === HOST_TWILIO
-                ? TWILIO_CATEGORY_OPTIONS
-                : KARIX_GUPSHUP_CATEGORY_OPTIONS}
+              data = {CATEGORY_OPTIONS_MAP[this.state.hostName]}
               onSelect={this.setWhatsappCategory}
               selectedValue={this.state.selectedWhatsappCategory}
               placeholder="Category"

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

@@ -560,6 +560,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"
@@ -943,6 +961,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"
@@ -1422,6 +1458,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"
@@ -1883,6 +1937,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',
+  },
 });