feat: Google Play Store Reviews

2026-05-19 15:32:49 -07:00
parent 1913ccadfa
commit 13a9f2591b
33 changed files with 603 additions and 39 deletions
@@ -0,0 +1,14 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+class GooglePlayClient extends ApiClient {
+  constructor() {
+    super('google_play', { accountScoped: true });
+  }
+
+  generateAuthorization(payload) {
+    return axios.post(`${this.url}/authorization`, payload);
+  }
+}
+
+export default new GooglePlayClient();
@@ -15,6 +15,7 @@ export function useChannelIcon(inbox) {
    'Channel::Whatsapp': 'i-woot-whatsapp',
    'Channel::Instagram': 'i-woot-instagram',
    'Channel::Tiktok': 'i-woot-tiktok',
+    'Channel::GooglePlay': 'i-ri-google-play-line',
  };

  const providerIconMap = {
@@ -21,6 +21,7 @@ const {
  isAnEmailChannel,
  isAnInstagramChannel,
  isATiktokChannel,
+  isAGooglePlayChannel,
 } = useInbox();

 const {
@@ -62,7 +63,8 @@ const isSent = computed(() => {
    isASmsInbox.value ||
    isATelegramChannel.value ||
    isAnInstagramChannel.value ||
-    isATiktokChannel.value
+    isATiktokChannel.value ||
+    isAGooglePlayChannel.value
  ) {
    return sourceId.value && status.value === MESSAGE_STATUS.SENT;
  }
@@ -67,6 +67,7 @@ const isActive = computed(() => {
    'instagram',
    'tiktok',
    'voice',
+    'google_play',
  ].includes(key);
 });

@@ -249,6 +249,9 @@ export default {
      if (this.isATiktokChannel) {
        return MESSAGE_MAX_LENGTH.TIKTOK;
      }
+      if (this.isAGooglePlayChannel) {
+        return MESSAGE_MAX_LENGTH.GOOGLE_PLAY;
+      }
      if (this.isATwilioWhatsAppChannel) {
        return MESSAGE_MAX_LENGTH.TWILIO_WHATSAPP;
      }
@@ -138,6 +138,10 @@ export const useInbox = (inboxId = null) => {
    return channelType.value === INBOX_TYPES.TIKTOK;
  });

+  const isAGooglePlayChannel = computed(() => {
+    return channelType.value === INBOX_TYPES.GOOGLE_PLAY;
+  });
+
  const voiceCallEnabled = computed(() => isVoiceCallEnabled(inbox.value));

  const voiceCallProvider = computed(() => getVoiceCallProvider(inbox.value));
@@ -160,6 +164,7 @@ export const useInbox = (inboxId = null) => {
    isAnEmailChannel,
    isAnInstagramChannel,
    isATiktokChannel,
+    isAGooglePlayChannel,
    voiceCallEnabled,
    voiceCallProvider,
  };
@@ -114,6 +114,12 @@ export const FORMATTING = {
    nodes: [],
    menu: [],
  },
+  'Channel::GooglePlay': {
+    // Google Play developer replies are plain text only — no formatting is supported.
+    marks: [],
+    nodes: [],
+    menu: [],
+  },
  // Special contexts (not actual channels)
  'Context::PrivateNote': {
    marks: ['strong', 'em', 'code', 'link', 'strike'],
@@ -11,6 +11,7 @@ export const INBOX_TYPES = {
  SMS: 'Channel::Sms',
  INSTAGRAM: 'Channel::Instagram',
  TIKTOK: 'Channel::Tiktok',
+  GOOGLE_PLAY: 'Channel::GooglePlay',
 };

 // Add providers here as they gain voice capability (e.g., WhatsApp Cloud, Twilio WhatsApp)
@@ -50,6 +51,7 @@ const INBOX_ICON_MAP_FILL = {
  [INBOX_TYPES.LINE]: 'i-ri-line-fill',
  [INBOX_TYPES.INSTAGRAM]: 'i-ri-instagram-fill',
  [INBOX_TYPES.TIKTOK]: 'i-ri-tiktok-fill',
+  [INBOX_TYPES.GOOGLE_PLAY]: 'i-ri-google-play-fill',
 };

 const DEFAULT_ICON_FILL = 'i-ri-chat-1-fill';
@@ -65,6 +67,7 @@ const INBOX_ICON_MAP_LINE = {
  [INBOX_TYPES.LINE]: 'i-woot-line',
  [INBOX_TYPES.INSTAGRAM]: 'i-woot-instagram',
  [INBOX_TYPES.TIKTOK]: 'i-woot-tiktok',
+  [INBOX_TYPES.GOOGLE_PLAY]: 'i-ri-google-play-line',
 };

 const DEFAULT_ICON_LINE = 'i-ri-chat-1-line';
@@ -114,6 +117,9 @@ export const getReadableInboxByType = (type, phoneNumber) => {
    case INBOX_TYPES.LINE:
      return 'line';

+    case INBOX_TYPES.GOOGLE_PLAY:
+      return 'google_play';
+
    default:
      return 'chat';
  }
@@ -447,6 +447,24 @@
          "ERROR_MESSAGE": "We were not able to save the telegram channel"
        }
      },
+      "GOOGLE_PLAY": {
+        "TITLE": "Google Play Reviews",
+        "DESC": "Manage and reply to your Google Play Store app reviews from Chatwoot.",
+        "INBOX_NAME": {
+          "LABEL": "Inbox Name",
+          "PLACEHOLDER": "Please enter an inbox name",
+          "ERROR": "This field is required"
+        },
+        "APP_ID": {
+          "LABEL": "App package name",
+          "PLACEHOLDER": "Please enter your app package name (eg: com.example.app)",
+          "ERROR": "Please enter a valid app package name"
+        },
+        "CONNECT_BUTTON": "Connect with Google",
+        "API": {
+          "ERROR_MESSAGE": "We were not able to connect your Google Play Reviews channel"
+        }
+      },
      "AUTH": {
        "TITLE": "Choose a channel",
        "DESC": "Chatwoot supports live-chat widgets, Facebook Messenger, WhatsApp, Emails, etc., as channels. If you want to build a custom channel, you can create it using the API channel. To get started, choose one of the channels below.",
@@ -496,6 +514,10 @@
          "VOICE": {
            "TITLE": "Voice",
            "DESCRIPTION": "Integrate with Twilio Voice"
+          },
+          "GOOGLE_PLAY": {
+            "TITLE": "Google Play Reviews",
+            "DESCRIPTION": "Manage your Google Play Store app reviews"
          }
        }
      },
@@ -1165,6 +1187,7 @@
      "API": "API Channel",
      "INSTAGRAM": "Instagram",
      "TIKTOK": "TikTok",
+      "GOOGLE_PLAY": "Google Play Reviews",
      "VOICE": "Voice"
    }
  }
@@ -12,6 +12,7 @@ import Telegram from './channels/Telegram.vue';
 import Instagram from './channels/Instagram.vue';
 import Tiktok from './channels/Tiktok.vue';
 import Voice from './channels/Voice.vue';
+import GooglePlay from './channels/GooglePlay.vue';

 const channelViewList = {
  facebook: Facebook,
@@ -26,6 +27,7 @@ const channelViewList = {
  instagram: Instagram,
  tiktok: Tiktok,
  voice: Voice,
+  google_play: GooglePlay,
 };

 export default defineComponent({
@@ -77,6 +77,12 @@ const channelList = computed(() => {
      description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.INSTAGRAM.DESCRIPTION'),
      icon: 'i-woot-instagram',
    },
+    {
+      key: 'google_play',
+      title: t('INBOX_MGMT.ADD.AUTH.CHANNEL.GOOGLE_PLAY.TITLE'),
+      description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.GOOGLE_PLAY.DESCRIPTION'),
+      icon: 'i-ri-google-play-line',
+    },
  ];

  if (hasTiktokConfigured.value) {
@@ -0,0 +1,109 @@
+<script setup>
+import { onMounted, reactive, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
+import googlePlayClient from 'dashboard/api/channel/googlePlayClient';
+import PageHeader from '../../SettingsSubPageHeader.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+
+// Surface any error the OAuth callback redirected back with
+onMounted(() => {
+  if (route.query.error) {
+    useAlert(String(route.query.error));
+  }
+});
+
+const state = reactive({
+  inboxName: '',
+  appId: '',
+});
+
+const isConnecting = ref(false);
+
+const rules = {
+  inboxName: { required },
+  appId: { required },
+};
+
+const v$ = useVuelidate(rules, state);
+
+const connectWithGoogle = async () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+
+  try {
+    isConnecting.value = true;
+    const {
+      data: { url },
+    } = await googlePlayClient.generateAuthorization({
+      app_id: state.appId.trim(),
+      inbox_name: state.inboxName.trim(),
+    });
+    window.location.href = url;
+  } catch (error) {
+    isConnecting.value = false;
+    useAlert(t('INBOX_MGMT.ADD.GOOGLE_PLAY.API.ERROR_MESSAGE'));
+  }
+};
+</script>
+
+<template>
+  <div class="h-full w-full p-6 col-span-6">
+    <PageHeader
+      :header-title="$t('INBOX_MGMT.ADD.GOOGLE_PLAY.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.GOOGLE_PLAY.DESC')"
+    />
+    <form
+      class="flex flex-wrap flex-col mx-0"
+      @submit.prevent="connectWithGoogle"
+    >
+      <div class="flex-shrink-0 flex-grow-0">
+        <label :class="{ error: v$.inboxName.$error }">
+          {{ $t('INBOX_MGMT.ADD.GOOGLE_PLAY.INBOX_NAME.LABEL') }}
+          <input
+            v-model="state.inboxName"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.GOOGLE_PLAY.INBOX_NAME.PLACEHOLDER')
+            "
+            @blur="v$.inboxName.$touch"
+          />
+          <span v-if="v$.inboxName.$error" class="message">
+            {{ $t('INBOX_MGMT.ADD.GOOGLE_PLAY.INBOX_NAME.ERROR') }}
+          </span>
+        </label>
+      </div>
+
+      <div class="flex-shrink-0 flex-grow-0">
+        <label :class="{ error: v$.appId.$error }">
+          {{ $t('INBOX_MGMT.ADD.GOOGLE_PLAY.APP_ID.LABEL') }}
+          <input
+            v-model="state.appId"
+            type="text"
+            :placeholder="$t('INBOX_MGMT.ADD.GOOGLE_PLAY.APP_ID.PLACEHOLDER')"
+            @blur="v$.appId.$touch"
+          />
+          <span v-if="v$.appId.$error" class="message">
+            {{ $t('INBOX_MGMT.ADD.GOOGLE_PLAY.APP_ID.ERROR') }}
+          </span>
+        </label>
+      </div>
+
+      <div class="w-full mt-4">
+        <NextButton
+          :is-loading="isConnecting"
+          type="submit"
+          solid
+          blue
+          :label="$t('INBOX_MGMT.ADD.GOOGLE_PLAY.CONNECT_BUTTON')"
+        />
+      </div>
+    </form>
+  </div>
+</template>
@@ -34,6 +34,7 @@ const i18nMap = {
  'Channel::Api': 'API',
  'Channel::Instagram': 'INSTAGRAM',
  'Channel::Tiktok': 'TIKTOK',
+  'Channel::GooglePlay': 'GOOGLE_PLAY',
 };

 const twilioChannelName = () => {
@@ -22,4 +22,6 @@ export const MESSAGE_MAX_LENGTH = {
  TELEGRAM: 4096,
  LINE: 2000,
  EMAIL: 25000,
+  // https://developers.google.com/android-publisher/reviews — developer replies are capped at 350 characters
+  GOOGLE_PLAY: 350,
 };
@@ -134,6 +134,9 @@ export default {
    isATiktokChannel() {
      return this.channelType === INBOX_TYPES.TIKTOK;
    },
+    isAGooglePlayChannel() {
+      return this.channelType === INBOX_TYPES.GOOGLE_PLAY;
+    },
  },
  methods: {
    inboxHasFeature(feature) {