From 2dd2cfeb8730c73035b02fc9cc12e776b67da9d7 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 30 May 2024 13:47:09 +0530
Subject: [PATCH] feat: enable google

---
 .../dashboard/i18n/locale/en/inboxMgmt.json   |  9 +++-
 .../settings/inbox/channels/Email.vue         |  3 ++
 .../inbox/channels/emailChannels/Google.vue   | 49 +++++++++++++++++++
 3 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue

diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
index 5b2ffcfc1..d3f83ae64 100644
--- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
@@ -368,6 +368,13 @@
         "EMAIL_PLACEHOLDER": "Enter email address",
         "HELP": "To add your Microsoft account as a channel, you need to authenticate your Microsoft account by clicking on 'Sign in with Microsoft' ",
         "ERROR_MESSAGE": "There was an error connecting to Microsoft, please try again"
+      },
+      "GOOGLE": {
+        "TITLE": "Google Email",
+        "DESCRIPTION": "Click on the Sign in with Google button to get started. You will redirected to the email sign in page. Once you accept the requested permissions, you would be redirected back to the inbox creation step.",
+        "SIGN_IN": "Sign in with Google",
+        "HELP": "To add your Google account as a channel, you need to authenticate your Google account by clicking on 'Sign in with Google' ",
+        "ERROR_MESSAGE": "There was an error connecting to Google, please try again"
       }
     },
     "DETAILS": {
@@ -739,4 +746,4 @@
       "OTHER_PROVIDERS": "Other Providers"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
index 64b799939..632f188af 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue
@@ -20,11 +20,13 @@
     </div>
   </div>
   <microsoft v-else-if="provider === 'microsoft'" />
+  <google v-else-if="provider === 'google'" />
   <forward-to-option v-else-if="provider === 'other_provider'" />
 </template>
 <script>
 import ForwardToOption from './emailChannels/ForwardToOption.vue';
 import Microsoft from './emailChannels/Microsoft.vue';
+import Google from './emailChannels/Google.vue';
 import { mapGetters } from 'vuex';
 import ChannelSelector from 'dashboard/components/ChannelSelector.vue';
 import PageHeader from '../../SettingsSubPageHeader.vue';
@@ -34,6 +36,7 @@ export default {
     ChannelSelector,
     ForwardToOption,
     Microsoft,
+    Google,
     PageHeader,
   },
   data() {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue
new file mode 100644
index 000000000..538f953c4
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue
@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+  >
+    <settings-sub-page-header
+      :header-title="$t('INBOX_MGMT.ADD.GOOGLE.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.GOOGLE.DESCRIPTION')"
+    />
+    <a
+      :href="getGoogleAuthUrl()"
+      class="inline-flex justify-center rounded-md mt-5 bg-white py-3 px-4 shadow-sm ring-1 ring-inset ring-slate-200 dark:ring-slate-600 hover:bg-slate-50 focus:outline-offset-0 dark:bg-slate-700 dark:hover:bg-slate-700"
+    >
+      <img src="/assets/images/auth/google.svg" alt="Google Logo" class="h-6" />
+      <span class="text-base font-medium ml-2 text-slate-600 dark:text-white">
+        {{ $t('INBOX_MGMT.ADD.GOOGLE.SIGN_IN') }}
+      </span>
+    </a>
+  </div>
+</template>
+<script setup>
+import { joinUrl } from 'shared/helpers/joinUrl';
+import SettingsSubPageHeader from '../../../SettingsSubPageHeader.vue';
+
+function getRedirectUrl() {
+  const baseUrl = window.chatwootConfig.hostURL;
+  const path = '/google/callback';
+  return joinUrl(baseUrl, path);
+}
+
+function getGoogleAuthUrl() {
+  const baseUrl =
+    'https://accounts.google.com/o/oauth2/auth/oauthchooseaccount';
+  const clientId = window.chatwootConfig.googleOAuthClientId;
+  const redirectUrl = getRedirectUrl();
+  const responseType = 'code';
+  const scope = 'email profile https://mail.google.com/';
+
+  // Build the query string
+  const queryString = new URLSearchParams({
+    client_id: clientId,
+    redirect_uri: redirectUrl,
+    response_type: responseType,
+    scope: scope,
+  }).toString();
+
+  // Construct the full URL
+  return `${baseUrl}?${queryString}`;
+}
+</script>