From a9d687565e5fdf16ae30226847355f7e5896642c Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Mon, 29 Aug 2022 12:40:15 +0530
Subject: [PATCH] chore: Displayed WhatsApp API provider name in inbox settings
 (#5346)

---
 .../widgets/WootWriter/ReplyBottomPanel.vue   |  2 +-
 .../widgets/conversation/MessagesView.vue     |  6 ++---
 .../widgets/conversation/ReplyBox.vue         | 10 ++++----
 .../widgets/conversation/bubble/Actions.vue   |  2 +-
 .../dashboard/i18n/locale/en/inboxMgmt.json   | 22 +++++++++---------
 .../dashboard/settings/inbox/Settings.vue     | 23 ++++++++++++++++---
 .../inbox/settingsPage/ConfigurationPage.vue  |  2 +-
 app/javascript/shared/mixins/inboxMixin.js    | 23 +++++++++++++++----
 .../shared/mixins/specs/inboxMixin.spec.js    |  4 ++--
 9 files changed, 63 insertions(+), 31 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index 3111070a6..5c288ed68 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -260,7 +260,7 @@ export default {
       return this.showAudioRecorder && this.isRecordingAudio;
     },
     allowedFileTypes() {
-      if (this.isATwilioWhatsappChannel) {
+      if (this.isATwilioWhatsAppChannel) {
         return ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP;
       }
       return ALLOWED_FILE_TYPES;
diff --git a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
index 50ca28b8f..6c04879b9 100644
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -240,7 +240,7 @@ export default {
     },
 
     replyWindowBannerMessage() {
-      if (this.isAWhatsappChannel) {
+      if (this.isAWhatsAppChannel) {
         return this.$t('CONVERSATION.TWILIO_WHATSAPP_CAN_REPLY');
       }
       if (this.isAPIInbox) {
@@ -256,7 +256,7 @@ export default {
       return this.$t('CONVERSATION.CANNOT_REPLY');
     },
     replyWindowLink() {
-      if (this.isAWhatsappChannel) {
+      if (this.isAWhatsAppChannel) {
         return REPLY_POLICY.FACEBOOK;
       }
       if (!this.isAPIInbox) {
@@ -265,7 +265,7 @@ export default {
       return '';
     },
     replyWindowLinkText() {
-      if (this.isAWhatsappChannel) {
+      if (this.isAWhatsAppChannel) {
         return this.$t('CONVERSATION.24_HOURS_WINDOW');
       }
       if (!this.isAPIInbox) {
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index c95c41335..aaf6244c6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -277,7 +277,7 @@ export default {
       return !!this.uiSettings.enter_to_send_enabled;
     },
     isPrivate() {
-      if (this.currentChat.can_reply || this.isAWhatsappChannel) {
+      if (this.currentChat.can_reply || this.isAWhatsAppChannel) {
         return this.isOnPrivateNote;
       }
       return true;
@@ -324,7 +324,7 @@ export default {
       if (this.isAFacebookInbox) {
         return MESSAGE_MAX_LENGTH.FACEBOOK;
       }
-      if (this.isAWhatsappChannel) {
+      if (this.isAWhatsAppChannel) {
         return MESSAGE_MAX_LENGTH.TWILIO_WHATSAPP;
       }
       if (this.isASmsInbox) {
@@ -341,7 +341,7 @@ export default {
       return (
         this.isAWebWidgetInbox ||
         this.isAFacebookInbox ||
-        this.isAWhatsappChannel ||
+        this.isAWhatsAppChannel ||
         this.isAPIInbox ||
         this.isAnEmailChannel ||
         this.isASmsInbox ||
@@ -430,7 +430,7 @@ export default {
         return;
       }
 
-      if (canReply || this.isAWhatsappChannel) {
+      if (canReply || this.isAWhatsAppChannel) {
         this.replyType = REPLY_EDITOR_MODES.REPLY;
       } else {
         this.replyType = REPLY_EDITOR_MODES.NOTE;
@@ -586,7 +586,7 @@ export default {
     setReplyMode(mode = REPLY_EDITOR_MODES.REPLY) {
       const { can_reply: canReply } = this.currentChat;
 
-      if (canReply || this.isAWhatsappChannel) this.replyType = mode;
+      if (canReply || this.isAWhatsAppChannel) this.replyType = mode;
       if (this.showRichContentEditor) {
         if (this.isRecordingAudio) {
           this.toggleAudioRecorder();
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
index 7f454fa20..e9df39f49 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue
@@ -168,7 +168,7 @@ export default {
       return (
         this.isOutgoing &&
         this.sourceId &&
-        (this.isAnEmailChannel || this.isAWhatsappChannel)
+        (this.isAnEmailChannel || this.isAWhatsAppChannel)
       );
     },
   },
diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index 629eac63e..09a6210da 100644
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -454,7 +454,7 @@
       "WHATSAPP_SECTION_SUBHEADER": "This API Key is used for the integration with the WhatsApp APIs.",
       "WHATSAPP_SECTION_TITLE": "API Key"
     },
-    "AUTO_ASSIGNMENT":{
+    "AUTO_ASSIGNMENT": {
       "MAX_ASSIGNMENT_LIMIT": "Auto assignment limit",
       "MAX_ASSIGNMENT_LIMIT_RANGE_ERROR": "Please enter a value greater than 0",
       "MAX_ASSIGNMENT_LIMIT_SUB_TEXT": "Limit the maximum number of conversations from this inbox that can be auto assigned to an agent"
@@ -471,7 +471,7 @@
       "SET_FIELDS_HEADER": {
         "FIELDS": "Fields",
         "LABEL": "Label",
-        "PLACE_HOLDER":"Placeholder",
+        "PLACE_HOLDER": "Placeholder",
         "KEY": "Key",
         "TYPE": "Type",
         "REQUIRED": "Required"
@@ -577,11 +577,11 @@
     },
     "NOTE": "Note: ",
     "WIDGET_BUILDER": {
-      "WIDGET_OPTIONS":{
-        "AVATAR":{
+      "WIDGET_OPTIONS": {
+        "AVATAR": {
           "LABEL": "Website Avatar",
-          "DELETE":{
-            "API":{
+          "DELETE": {
+            "API": {
               "SUCCESS_MESSAGE": "Avatar deleted successfully",
               "ERROR_MESSAGE": "There was an error, please try again"
             }
@@ -609,7 +609,7 @@
         "WIDGET_COLOR_LABEL": "Widget Color",
         "WIDGET_BUBBLE_POSITION_LABEL": "Widget Bubble Position",
         "WIDGET_BUBBLE_TYPE_LABEL": "Widget Bubble Type",
-        "WIDGET_BUBBLE_LAUNCHER_TITLE":{
+        "WIDGET_BUBBLE_LAUNCHER_TITLE": {
           "DEFAULT": "Chat with us",
           "LABEL": "Widget Bubble Launcher Title",
           "PLACE_HOLDER": "Chat with us"
@@ -621,15 +621,15 @@
             "ERROR_MESSAGE": "Unable to update widget settings"
           }
         },
-        "WIDGET_VIEW_OPTION":{
+        "WIDGET_VIEW_OPTION": {
           "PREVIEW": "Preview",
           "SCRIPT": "Script"
         },
-        "WIDGET_BUBBLE_POSITION":{
+        "WIDGET_BUBBLE_POSITION": {
           "LEFT": "Left",
           "RIGHT": "Right"
         },
-        "WIDGET_BUBBLE_TYPE":{
+        "WIDGET_BUBBLE_TYPE": {
           "STANDARD": "Standard",
           "EXPANDED_BUBBLE": "Expanded Bubble"
         }
@@ -648,7 +648,7 @@
         "CHAT_INPUT_PLACEHOLDER": "Type your message"
       },
       "BODY": {
-        "TEAM_AVAILABILITY":{
+        "TEAM_AVAILABILITY": {
           "ONLINE": "We are Online",
           "OFFLINE": "We are away at the moment"
         },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
index 283c05933..47862d6b1 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
@@ -116,6 +116,11 @@
           <woot-color-picker v-model="inbox.widget_color" />
         </label>
 
+        <label v-if="isAWhatsAppChannel" class="medium-9 columns settings-item">
+          {{ $t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.LABEL') }}
+          <input v-model="whatsAppAPIProviderName" type="text" disabled />
+        </label>
+
         <label class="medium-9 columns settings-item">
           {{
             $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_GREETING_TOGGLE.LABEL')
@@ -388,6 +393,18 @@ export default {
     selectedTabKey() {
       return this.tabs[this.selectedTabIndex]?.key;
     },
+    whatsAppAPIProviderName() {
+      if (this.isAWhatsAppCloudChannel) {
+        return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.WHATSAPP_CLOUD');
+      }
+      if (this.is360DialogWhatsAppChannel) {
+        return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.360_DIALOG');
+      }
+      if (this.isATwilioWhatsAppChannel) {
+        return this.$t('INBOX_MGMT.ADD.WHATSAPP.PROVIDERS.TWILIO');
+      }
+      return '';
+    },
     tabs() {
       const visibleToAllChannelTabs = [
         {
@@ -427,7 +444,7 @@ export default {
         this.isALineChannel ||
         this.isAPIInbox ||
         this.isAnEmailChannel ||
-        this.isAWhatsappChannel
+        this.isAWhatsAppChannel
       ) {
         return [
           ...visibleToAllChannelTabs,
@@ -447,11 +464,11 @@ export default {
       return this.$store.getters['inboxes/getInbox'](this.currentInboxId);
     },
     inboxName() {
-      if (this.isATwilioSMSChannel || this.isATwilioWhatsappChannel) {
+      if (this.isATwilioSMSChannel || this.isATwilioWhatsAppChannel) {
         return `${this.inbox.name} (${this.inbox.messaging_service_sid ||
           this.inbox.phone_number})`;
       }
-      if (this.isAWhatsappChannel) {
+      if (this.isAWhatsAppChannel) {
         return `${this.inbox.name} (${this.inbox.phone_number})`;
       }
       if (this.isAnEmailChannel) {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
index d3ac843cf..57498c5d8 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
@@ -91,7 +91,7 @@
     <imap-settings :inbox="inbox" />
     <smtp-settings v-if="inbox.imap_enabled" :inbox="inbox" />
   </div>
-  <div v-else-if="isAWhatsappChannel && !isATwilioChannel">
+  <div v-else-if="isAWhatsAppChannel && !isATwilioChannel">
     <div v-if="inbox.provider_config" class="settings--content">
       <settings-section
         :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_TITLE')"
diff --git a/app/javascript/shared/mixins/inboxMixin.js b/app/javascript/shared/mixins/inboxMixin.js
index f0417ae93..a8aa00aa4 100644
--- a/app/javascript/shared/mixins/inboxMixin.js
+++ b/app/javascript/shared/mixins/inboxMixin.js
@@ -16,6 +16,9 @@ export default {
     channelType() {
       return this.inbox.channel_type;
     },
+    whatsAppAPIProvider() {
+      return this.inbox.provider || '';
+    },
     isAPIInbox() {
       return this.channelType === INBOX_TYPES.API;
     },
@@ -47,10 +50,22 @@ export default {
     isASmsInbox() {
       return this.channelType === INBOX_TYPES.SMS || this.isATwilioSMSChannel;
     },
-    isATwilioWhatsappChannel() {
+    isATwilioWhatsAppChannel() {
       const { medium: medium = '' } = this.inbox;
       return this.isATwilioChannel && medium === 'whatsapp';
     },
+    isAWhatsAppCloudChannel() {
+      return (
+        this.channelType === INBOX_TYPES.WHATSAPP &&
+        this.whatsAppAPIProvider === 'whatsapp_cloud'
+      );
+    },
+    is360DialogWhatsAppChannel() {
+      return (
+        this.channelType === INBOX_TYPES.WHATSAPP &&
+        this.whatsAppAPIProvider === 'default'
+      );
+    },
     chatAdditionalAttributes() {
       const { additional_attributes: additionalAttributes } = this.chat || {};
       return additionalAttributes || {};
@@ -75,15 +90,15 @@ export default {
         badgeKey = this.facebookBadge;
       } else if (this.isATwilioChannel) {
         badgeKey = this.twilioBadge;
-      } else if (this.isAWhatsappChannel) {
+      } else if (this.isAWhatsAppChannel) {
         badgeKey = 'whatsapp';
       }
       return badgeKey || this.channelType;
     },
-    isAWhatsappChannel() {
+    isAWhatsAppChannel() {
       return (
         this.channelType === INBOX_TYPES.WHATSAPP ||
-        this.isATwilioWhatsappChannel
+        this.isATwilioWhatsAppChannel
       );
     },
   },
diff --git a/app/javascript/shared/mixins/specs/inboxMixin.spec.js b/app/javascript/shared/mixins/specs/inboxMixin.spec.js
index dc7cc38cc..4ab2a4028 100644
--- a/app/javascript/shared/mixins/specs/inboxMixin.spec.js
+++ b/app/javascript/shared/mixins/specs/inboxMixin.spec.js
@@ -109,7 +109,7 @@ describe('inboxMixin', () => {
     expect(wrapper.vm.isASmsInbox).toBe(true);
   });
 
-  it('isATwilioWhatsappChannel returns true if channel type is Twilio and medium is whatsapp', () => {
+  it('isATwilioWhatsAppChannel returns true if channel type is Twilio and medium is WhatsApp', () => {
     const Component = {
       render() {},
       mixins: [inboxMixin],
@@ -124,7 +124,7 @@ describe('inboxMixin', () => {
     };
     const wrapper = shallowMount(Component);
     expect(wrapper.vm.isATwilioChannel).toBe(true);
-    expect(wrapper.vm.isATwilioWhatsappChannel).toBe(true);
+    expect(wrapper.vm.isATwilioWhatsAppChannel).toBe(true);
   });
 
   it('isAnEmailChannel returns true if channel type is email', () => {