feat: Adds the ability to change WhatsApp API key (#6348)

This PR adds the ability to change the WhatsApp API key through the settings under the configuration section

Fixes: #6199

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Sojan <sojan@pepalo.com>

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -472,7 +472,11 @@
       "ALLOW_MESSAGES_AFTER_RESOLVED": "Allow messages after conversation resolved",
       "ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT": "Allow the end-users to send messages even after the conversation is resolved.",
       "WHATSAPP_SECTION_SUBHEADER": "This API Key is used for the integration with the WhatsApp APIs.",
-      "WHATSAPP_SECTION_TITLE": "API Key"
+      "WHATSAPP_SECTION_UPDATE_SUBHEADER": "Enter the updated key to be used for the integration with the WhatsApp APIs.",
+      "WHATSAPP_SECTION_TITLE": "API Key",
+      "WHATSAPP_SECTION_UPDATE_TITLE": "Update API Key",
+      "WHATSAPP_SECTION_UPDATE_PLACEHOLDER": "Enter the new API Key here",
+      "WHATSAPP_SECTION_UPDATE_BUTTON": "Update"
     },
     "AUTO_ASSIGNMENT": {
       "MAX_ASSIGNMENT_LIMIT": "Auto assignment limit",

app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue

@@ -103,6 +103,31 @@
       >
         <woot-code :script="inbox.provider_config.api_key" />
       </settings-section>
+      <settings-section
+        :title="$t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_TITLE')"
+        :sub-title="
+          $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_SUBHEADER')
+        "
+      >
+        <div class="whatsapp-settings--content">
+          <woot-input
+            v-model.trim="whatsAppInboxAPIKey"
+            type="text"
+            class="input"
+            :placeholder="
+              $t(
+                'INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_PLACEHOLDER'
+              )
+            "
+          />
+          <woot-button
+            :disabled="$v.whatsAppInboxAPIKey.$invalid"
+            @click="updateWhatsAppInboxAPIKey"
+          >
+            {{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
+          </woot-button>
+        </div>
+      </settings-section>
     </div>
   </div>
 </template>
@@ -114,6 +139,7 @@ import SettingsSection from '../../../../../components/SettingsSection';
 import ImapSettings from '../ImapSettings';
 import SmtpSettings from '../SmtpSettings';
 import MicrosoftReauthorize from '../channels/microsoft/Reauthorize';
+import { required } from 'vuelidate/lib/validators';
 
 export default {
   components: {
@@ -132,8 +158,12 @@ export default {
   data() {
     return {
       hmacMandatory: false,
+      whatsAppInboxAPIKey: '',
     };
   },
+  validations: {
+    whatsAppInboxAPIKey: { required },
+  },
   watch: {
     inbox() {
       this.setDefaults();
@@ -161,9 +191,45 @@ export default {
         await this.$store.dispatch('inboxes/updateInbox', payload);
         this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
       } catch (error) {
+        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
+      }
+    },
+    async updateWhatsAppInboxAPIKey() {
+      try {
+        const payload = {
+          id: this.inbox.id,
+          formData: false,
+          channel: {},
+        };
+
+        payload.channel.provider_config = {
+          ...this.inbox.provider_config,
+          api_key: this.whatsAppInboxAPIKey,
+        };
+
+        await this.$store.dispatch('inboxes/updateInbox', payload);
         this.showAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE'));
+      } catch (error) {
+        this.showAlert(this.$t('INBOX_MGMT.EDIT.API.ERROR_MESSAGE'));
       }
     },
   },
 };
 </script>
+<style lang="scss" scoped>
+.whatsapp-settings--content {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  margin-top: var(--space-small);
+
+  .input {
+    flex: 1;
+    margin-right: var(--space-small);
+    ::v-deep input {
+      margin-bottom: 0;
+    }
+  }
+}
+</style>