@capillarytech/creatives-library 7.10.39 → 7.10.41

package/v2Containers/Templates/messages.js

@@ -94,6 +94,10 @@ export default defineMessages({
     id: `${scope}.editButton`,
     defaultMessage: "Edit",
   },
+  "whatsappOverview": {
+    id: `${scope}.whatsappOverview`,
+    defaultMessage: "Overview",
+  },
   "duplicateButton": {
     id: `${scope}.duplicateButton`,
     defaultMessage: "Duplicate",
@@ -130,6 +134,10 @@ export default defineMessages({
     id: `${scope}.noAccountsPresentLine`,
     defaultMessage: "Line accounts are not setup for your brand",
   },
+  "noAccountsPresentWhatsapp": {
+    id: `${scope}.noAccountsPresentWhatsapp`,
+    defaultMessage: "Whatsapp accounts are not setup for your brand",
+  },
   "noTemplatesMessage": {
     id: `${scope}.noTemplatesMessage`,
     defaultMessage: "No templates available",
@@ -306,6 +314,10 @@ export default defineMessages({
     id: `${scope}.newEmailTemplate`,
     defaultMessage: 'New email {template}',
   },
+  "newWhatsappTemplate": {
+    id: `${scope}.newWhatsappTemplate`,
+    defaultMessage: 'Add new Whatsapp {template}',
+  },
   "newNotificationTemplate": {
     id: `${scope}.newNotificationTemplate`,
     defaultMessage: 'New notification {template}',
@@ -318,6 +330,14 @@ export default defineMessages({
     id: `${scope}.emailTitleIllustartion`,
     defaultMessage: 'Create an email {template}',
   },
+  "whatsappTitleIllustration": {
+    id: `${scope}.whatsappTitleIllustration`,
+    defaultMessage: 'Add a new Whatsapp creative {template}',
+  },
+  "whatsappDescIllustration": {
+    id: `${scope}.whatsappDescIllustration`,
+    defaultMessage: 'These templates can be reused when creating a\nnew message content.',
+  },
   "smsTitleIllustartion": {
     id: `${scope}.smsTitleIllustartion`,
     defaultMessage: 'Create an SMS {template}',
@@ -346,6 +366,10 @@ export default defineMessages({
     id: `${scope}.lineAccount`,
     defaultMessage: 'Line account',
   },
+  "whatsappAccount": {
+    id: `${scope}.whatsappAccount`,
+    defaultMessage: 'Whatsapp account',
+  },
   "all": {
     id: `${scope}.all`,
     defaultMessage: 'All',
@@ -390,4 +414,12 @@ export default defineMessages({
     id: `${scope}.uploadTemplate`,
     defaultMessage: 'Upload template',
   },
+  "clearAll": {
+    id: `${scope}.clearAll`,
+    defaultMessage: 'Clear all',
+  },
+  "whatsappMaxTemplates": {
+    id: `${scope}.whatsappMaxTemplates`,
+    defaultMessage: 'WhatsApp allows {maxCount} approved templates. To accommodate new approved templates either delete the existing one or reach out to Capillary POC to increase the limit.',
+  },
 });

package/v2Containers/Templates/reducer.js

@@ -82,9 +82,11 @@ function templatesReducer(state = initialState, action) {
       return state
         .set('selectedWeChatAccount', fromJS(action.weChatAccount));
     case types.SET_LINE_ACCOUNT:
-      return state.set('selectedLineAccount', fromJS(action.lineAccount));
+      return state.set('selectedLineAccount', fromJS(action.account));
     case types.SET_VIBER_ACCOUNT:
       return state.set('selectedViberAccount', fromJS(action.viberAccount));
+    case types.SET_WHATSAPP_ACCOUNT:
+      return state.set('selectedWhatsappAccount', fromJS(action.account));
     case types.SET_FACEBOOK_ACCOUNT:
       return state.set('selectedFacebookAccount', fromJS(action.faceBookAccount));
     case types.RESET_ACCOUNT:

package/v2Containers/TemplatesV2/index.js

@@ -23,6 +23,7 @@ import Templates from '../Templates';
 import CallTask from '../CallTask';
 import Facebook from '../Facebook';
 import Viber from '../Viber';
+import Whatsapp from '../Whatsapp';
 import Line from '../Line/Container';
 import FTP from '../FTP';
 import Gallery from '../Assets/Gallery';
@@ -60,6 +61,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       line: {content: <></>, tab: intl.formatMessage(messages.line), key: 'line'},
       viber: {content: <></>, tab: intl.formatMessage(messages.viber), key: 'viber'},
       facebook: {content: <div></div>, tab: intl.formatMessage(messages.facebook), key: 'facebook'},
+      whatsapp: { content: <></>, tab: intl.formatMessage(messages.whatsapp), key: 'whatsapp' },
     };
     let filteredPanes = Object.keys(defaultPanes)
       .filter((key) => !channelsToHide.includes(key)).reduce((obj = [], key) => {

package/v2Containers/TemplatesV2/messages.js

@@ -54,6 +54,10 @@ export default defineMessages({
     id: 'creatives.containersV2.TemplatesV2.viber',
     defaultMessage: 'Viber',
   },
+  whatsapp: {
+    id: 'creatives.containersV2.TemplatesV2.whatsapp',
+    defaultMessage: 'WhatsApp',
+  },
   gallery: {
     id: 'creatives.containersV2.TemplatesV2.gallery',
     defaultMessage: 'Gallery',

package/v2Containers/Whatsapp/actions.js

@@ -0,0 +1,34 @@
+import {
+  TEMPLATE_CREATE_REQUEST,
+  CLEAR_CREATE_RESPONSE_REQUEST,
+  GET_TEMPLATE_DETAILS_REQUEST,
+  RESET_EDIT_TEMPLATE,
+  WHATSAPP,
+} from './constants';
+
+export function createWhatsappTemplate(payload, callback) {
+  return {
+    type: TEMPLATE_CREATE_REQUEST,
+    payload,
+    callback,
+  };
+}
+export function clearCreateResponse() {
+  return {
+    type: CLEAR_CREATE_RESPONSE_REQUEST,
+  };
+}
+// FOR EDIT
+export function getTemplateDetails(id, callback) {
+  return {
+    type: GET_TEMPLATE_DETAILS_REQUEST,
+    id,
+    channel: WHATSAPP,
+    callback,
+  };
+}
+export function resetEditTemplate() {
+  return {
+    type: RESET_EDIT_TEMPLATE,
+  };
+}

package/v2Containers/Whatsapp/constants.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import messages from './messages';
+import {
+  CAP_ORANGE,
+  CAP_PURPLE02,
+  CAP_PURPLE03,
+  CAP_ORANGE01,
+  CAP_GREEN01,
+  CAP_GREEN02,
+} from '@capillarytech/cap-ui-library/styled/variables';
+
+export const UNSUBSCRIBE_TEXT_LENGTH = 36;
+export const TEMPLATE_MESSAGE_MAX_LENGTH = 1024;
+export const WHATSAPP = 'WHATSAPP';
+
+export const TEMPLATE_CREATE_REQUEST =
+  'app/v2Containers/Whatsapp/TEMPLATE_CREATE_REQUEST';
+export const TEMPLATE_CREATE_SUCCESS =
+  'app/v2Containers/Whatsapp/TEMPLATE_CREATE_SUCCESS';
+export const TEMPLATE_CREATE_FAILURE =
+  'app/v2Containers/Whatsapp/TEMPLATE_CREATE_FAILURE';
+export const CLEAR_CREATE_RESPONSE_REQUEST =
+  'app/v2Containers/Whatsapp/CLEAR_CREATE_RESPONSE_REQUEST';
+// FOR EDIT
+export const GET_TEMPLATE_DETAILS_REQUEST =
+  'app/v2Containers/Whatsapp/Edit/GET_TEMPLATE_DETAILS_REQUEST';
+export const GET_TEMPLATE_DETAILS_SUCCESS =
+  'app/v2Containers/Whatsapp/Edit/GET_TEMPLATE_DETAILS_SUCCESS';
+export const GET_TEMPLATE_DETAILS_FAILURE =
+  'app/v2Containers/Whatsapp/Edit/GET_TEMPLATE_DETAILS_FAILURE';
+export const RESET_EDIT_TEMPLATE =
+  'app/v2Containers/Whatsapp/Edit//RESET_EDIT_TEMPLATE';
+
+export const STATUS = 'status';
+export const CATEGORY = 'category';
+const tooltip = 'Tooltip';
+
+export const WHATSAPP_CATEGORIES = {
+  alertUpdate: 'ALERT_UPDATE',
+  accountUpdate: 'ACCOUNT_UPDATE',
+  appointmentUpdate: 'APPOINTMENT_UPDATE',
+  paymentUpdate: 'PAYMENT_UPDATE',
+  reservationUpdate: 'RESERVATION_UPDATE',
+};
+
+export const CATEGORY_OPTIONS = [
+  {
+    key: 'alertUpdate',
+    value: WHATSAPP_CATEGORIES.alertUpdate,
+    label: <FormattedMessage {...messages.alertUpdate} />,
+    tooltipLabel: <FormattedMessage {...messages[`alertUpdate${tooltip}`]} />,
+    tagColor: CAP_PURPLE03,
+    tagTextColor: CAP_PURPLE02,
+  },
+  {
+    key: 'accountUpdate',
+    label: <FormattedMessage {...messages.accountUpdate} />,
+    tooltipLabel: <FormattedMessage {...messages[`accountUpdate${tooltip}`]} />,
+    value: WHATSAPP_CATEGORIES.accountUpdate,
+    tagColor: CAP_ORANGE01,
+    tagTextColor: CAP_ORANGE,
+  },
+  {
+    key: 'appointmentUpdate',
+    value: WHATSAPP_CATEGORIES.appointmentUpdate,
+    label: <FormattedMessage {...messages.appointmentUpdate} />,
+    tooltipLabel: (
+      <FormattedMessage {...messages[`appointmentUpdate${tooltip}`]} />
+    ),
+    tagColor: CAP_GREEN02,
+    tagTextColor: CAP_GREEN01,
+  },
+  {
+    key: 'paymentUpdate',
+    value: WHATSAPP_CATEGORIES.paymentUpdate,
+    label: <FormattedMessage {...messages.paymentUpdate} />,
+    tooltipLabel: <FormattedMessage {...messages[`paymentUpdate${tooltip}`]} />,
+    tagColor: CAP_ORANGE01,
+    tagTextColor: CAP_ORANGE,
+  },
+  {
+    key: 'reservationUpdate',
+    value: WHATSAPP_CATEGORIES.reservationUpdate,
+    label: <FormattedMessage {...messages.reservationUpdate} />,
+    tooltipLabel: (
+      <FormattedMessage {...messages[`reservationUpdate${tooltip}`]} />
+    ),
+    tagColor: CAP_ORANGE01,
+    tagTextColor: CAP_ORANGE,
+  },
+];
+
+export const WHATSAPP_STATUSES = {
+  awaitingApproval: 'awaitingApproval',
+  approved: 'approved',
+  rejected: 'rejected',
+  pending: 'pending',
+  unsubmitted: 'unsubmitted',
+};
+
+export const STATUS_OPTIONS = [
+  {
+    key: 'awaitingApproval',
+    value: WHATSAPP_STATUSES.awaitingApproval,
+    label: <FormattedMessage {...messages.awaitingApproval} />,
+  },
+  {
+    key: 'approved',
+    value: WHATSAPP_STATUSES.approved,
+    label: <FormattedMessage {...messages.approved} />,
+  },
+  {
+    key: 'rejected',
+    value: WHATSAPP_STATUSES.rejected,
+    label: <FormattedMessage {...messages.rejected} />,
+  },
+];
+
+export const TAG = 'TAG';
+export const EMBEDDED = 'embedded';
+export const DEFAULT = 'default';
+export const FULL = 'full';
+export const ALL = 'all';
+export const LIBRARY = 'library';