feat(inboxes): add app store reviews channel

2026-05-21 08:21:35 +04:00
parent 27f2c2b392
commit 572d6d2e40
30 changed files with 833 additions and 9 deletions
@@ -15,6 +15,7 @@ export function useChannelIcon(inbox) {
    'Channel::Whatsapp': 'i-woot-whatsapp',
    'Channel::Instagram': 'i-woot-instagram',
    'Channel::Tiktok': 'i-woot-tiktok',
+    'Channel::AppStore': 'i-ri-app-store-fill',
  };

  const providerIconMap = {
@@ -20,6 +20,7 @@ const {
  isAWhatsAppChannel,
  isAnEmailChannel,
  isAnInstagramChannel,
+  isAnAppStoreChannel,
  isATiktokChannel,
 } = useInbox();

@@ -62,7 +63,8 @@ const isSent = computed(() => {
    isASmsInbox.value ||
    isATelegramChannel.value ||
    isAnInstagramChannel.value ||
-    isATiktokChannel.value
+    isATiktokChannel.value ||
+    isAnAppStoreChannel.value
  ) {
    return sourceId.value && status.value === MESSAGE_STATUS.SENT;
  }
@@ -85,7 +87,8 @@ const isDelivered = computed(() => {
    isASmsInbox.value ||
    isAFacebookInbox.value ||
    isAnInstagramChannel.value ||
-    isATiktokChannel.value
+    isATiktokChannel.value ||
+    isAnAppStoreChannel.value
  ) {
    return sourceId.value && status.value === MESSAGE_STATUS.DELIVERED;
  }
@@ -110,7 +113,8 @@ const isRead = computed(() => {
    isATwilioChannel.value ||
    isAFacebookInbox.value ||
    isAnInstagramChannel.value ||
-    isATiktokChannel.value
+    isATiktokChannel.value ||
+    isAnAppStoreChannel.value
  ) {
    return sourceId.value && status.value === MESSAGE_STATUS.READ;
  }
@@ -66,6 +66,7 @@ const isActive = computed(() => {
    'line',
    'instagram',
    'tiktok',
+    'app_store',
    'voice',
  ].includes(key);
 });
@@ -78,7 +79,7 @@ const isComingSoon = computed(() => {
 });

 const isBeta = computed(() => {
-  return ['tiktok', 'voice'].includes(props.channel.key);
+  return ['tiktok', 'app_store', 'voice'].includes(props.channel.key);
 });

 const onItemClick = () => {
@@ -22,6 +22,7 @@ export const INBOX_FEATURE_MAP = {
    INBOX_TYPES.WHATSAPP,
    INBOX_TYPES.TELEGRAM,
    INBOX_TYPES.TIKTOK,
+    INBOX_TYPES.APP_STORE,
    INBOX_TYPES.API,
  ],
  [INBOX_FEATURES.REPLY_TO_OUTGOING]: [
@@ -30,6 +31,7 @@ export const INBOX_FEATURE_MAP = {
    INBOX_TYPES.WHATSAPP,
    INBOX_TYPES.TELEGRAM,
    INBOX_TYPES.TIKTOK,
+    INBOX_TYPES.APP_STORE,
    INBOX_TYPES.API,
  ],
 };
@@ -138,6 +140,10 @@ export const useInbox = (inboxId = null) => {
    return channelType.value === INBOX_TYPES.TIKTOK;
  });

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

  const voiceCallProvider = computed(() => getVoiceCallProvider(inbox.value));
@@ -160,6 +166,7 @@ export const useInbox = (inboxId = null) => {
    isAnEmailChannel,
    isAnInstagramChannel,
    isATiktokChannel,
+    isAnAppStoreChannel,
    voiceCallEnabled,
    voiceCallProvider,
  };
@@ -114,6 +114,11 @@ export const FORMATTING = {
    nodes: [],
    menu: [],
  },
+  'Channel::AppStore': {
+    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',
+  APP_STORE: 'Channel::AppStore',
 };

 // 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.APP_STORE]: 'i-ri-app-store-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.APP_STORE]: 'i-ri-app-store-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.APP_STORE:
+      return 'app_store';
+
    default:
      return 'chat';
  }
@@ -382,6 +382,39 @@
          "ERROR_MESSAGE": "We were not able to save the api channel"
        }
      },
+      "APP_STORE": {
+        "TITLE": "App Store Reviews",
+        "DESC": "Manage and reply to your App Store reviews from Chatwoot.",
+        "CHANNEL_NAME": {
+          "LABEL": "Inbox Name",
+          "PLACEHOLDER": "Please enter an inbox name",
+          "ERROR": "This field is required"
+        },
+        "APP_ID": {
+          "LABEL": "App Store Connect app ID",
+          "PLACEHOLDER": "Enter your App Store Connect app ID",
+          "ERROR": "This field is required"
+        },
+        "ISSUER_ID": {
+          "LABEL": "Issuer ID",
+          "PLACEHOLDER": "Enter your App Store Connect issuer ID",
+          "ERROR": "This field is required"
+        },
+        "KEY_ID": {
+          "LABEL": "Key ID",
+          "PLACEHOLDER": "Enter your App Store Connect key ID",
+          "ERROR": "This field is required"
+        },
+        "PRIVATE_KEY": {
+          "LABEL": "Private key",
+          "PLACEHOLDER": "Paste the contents of your .p8 private key",
+          "ERROR": "This field is required"
+        },
+        "SUBMIT_BUTTON": "Create App Store Channel",
+        "API": {
+          "ERROR_MESSAGE": "We were not able to save the App Store channel"
+        }
+      },
      "EMAIL_CHANNEL": {
        "TITLE": "Email Channel",
        "DESC": "Integrate your email inbox.",
@@ -493,6 +526,10 @@
            "TITLE": "TikTok",
            "DESCRIPTION": "Connect your TikTok account"
          },
+          "APP_STORE": {
+            "TITLE": "App Store Reviews",
+            "DESCRIPTION": "Manage your App Store app reviews"
+          },
          "VOICE": {
            "TITLE": "Voice",
            "DESCRIPTION": "Integrate with Twilio Voice"
@@ -1165,6 +1202,7 @@
      "API": "API Channel",
      "INSTAGRAM": "Instagram",
      "TIKTOK": "TikTok",
+      "APP_STORE": "App Store 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 AppStore from './channels/AppStore.vue';

 const channelViewList = {
  facebook: Facebook,
@@ -25,6 +26,7 @@ const channelViewList = {
  telegram: Telegram,
  instagram: Instagram,
  tiktok: Tiktok,
+  app_store: AppStore,
  voice: Voice,
 };

@@ -77,6 +77,12 @@ const channelList = computed(() => {
      description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.INSTAGRAM.DESCRIPTION'),
      icon: 'i-woot-instagram',
    },
+    {
+      key: 'app_store',
+      title: t('INBOX_MGMT.ADD.AUTH.CHANNEL.APP_STORE.TITLE'),
+      description: t('INBOX_MGMT.ADD.AUTH.CHANNEL.APP_STORE.DESCRIPTION'),
+      icon: 'i-ri-app-store-line',
+    },
  ];

  if (hasTiktokConfigured.value) {
@@ -249,6 +249,13 @@ export default {
        ];
      }

+      if (this.isAnAppStoreChannel) {
+        const unsupportedKeys = ['business-hours', 'csat', 'bot-configuration'];
+        visibleToAllChannelTabs = visibleToAllChannelTabs.filter(
+          tab => !unsupportedKeys.includes(tab.key)
+        );
+      }
+
      return visibleToAllChannelTabs;
    },
    currentInboxId() {
@@ -282,6 +289,9 @@ export default {
      if (this.isAnEmailChannel) {
        return `${this.inbox.name} (${this.inbox.email})`;
      }
+      if (this.isAnAppStoreChannel && this.inbox.app_id) {
+        return `${this.inbox.name} (${this.inbox.app_id})`;
+      }
      return this.inbox.name;
    },
    canLocktoSingleConversation() {
@@ -293,6 +303,7 @@ export default {
        this.isAnInstagramChannel ||
        this.isALineChannel ||
        this.isATiktokChannel ||
+        this.isAnAppStoreChannel ||
        this.isATelegramChannel
      );
    },
@@ -829,6 +840,7 @@ export default {
            </SettingsFieldSection>

            <SettingsFieldSection
+              v-if="!isAnAppStoreChannel"
              :label="$t('INBOX_MGMT.HELP_CENTER.LABEL')"
              :help-text="$t('INBOX_MGMT.HELP_CENTER.SUB_TEXT')"
            >
@@ -1128,6 +1140,7 @@ export default {
            </SettingsAccordion>

            <SettingsAccordion
+              v-if="!isAnAppStoreChannel"
              :title="$t('INBOX_MGMT.CHANNEL_PREFERENCES')"
              class="mt-6"
            >
@@ -0,0 +1,176 @@
+<script>
+import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { useAlert } from 'dashboard/composables';
+import router from '../../../../index';
+import PageHeader from '../../SettingsSubPageHeader.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+export default {
+  components: {
+    PageHeader,
+    NextButton,
+  },
+  setup() {
+    return { v$: useVuelidate() };
+  },
+  data() {
+    return {
+      channelName: '',
+      appId: '',
+      issuerId: '',
+      keyId: '',
+      privateKey: '',
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'inboxes/getUIFlags',
+    }),
+  },
+  validations: {
+    channelName: { required },
+    appId: { required },
+    issuerId: { required },
+    keyId: { required },
+    privateKey: { required },
+  },
+  methods: {
+    async createChannel() {
+      this.v$.$touch();
+      if (this.v$.$invalid) return;
+
+      try {
+        const appStoreChannel = await this.$store.dispatch(
+          'inboxes/createChannel',
+          {
+            name: this.channelName?.trim(),
+            channel: {
+              type: 'app_store',
+              app_id: this.appId.trim(),
+              issuer_id: this.issuerId.trim(),
+              key_id: this.keyId.trim(),
+              private_key: this.privateKey.trim(),
+            },
+          }
+        );
+
+        router.replace({
+          name: 'settings_inboxes_add_agents',
+          params: {
+            page: 'new',
+            inbox_id: appStoreChannel.id,
+          },
+        });
+      } catch (error) {
+        useAlert(
+          error.message || this.$t('INBOX_MGMT.ADD.APP_STORE.API.ERROR_MESSAGE')
+        );
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="h-full w-full p-6 col-span-6">
+    <PageHeader
+      :header-title="$t('INBOX_MGMT.ADD.APP_STORE.TITLE')"
+      :header-content="$t('INBOX_MGMT.ADD.APP_STORE.DESC')"
+    />
+    <form
+      class="flex flex-wrap flex-col mx-0"
+      @submit.prevent="createChannel()"
+    >
+      <div class="flex-shrink-0 flex-grow-0">
+        <label :class="{ error: v$.channelName.$error }">
+          {{ $t('INBOX_MGMT.ADD.APP_STORE.CHANNEL_NAME.LABEL') }}
+          <input
+            v-model="channelName"
+            type="text"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.APP_STORE.CHANNEL_NAME.PLACEHOLDER')
+            "
+            @blur="v$.channelName.$touch"
+          />
+          <span v-if="v$.channelName.$error" class="message">
+            {{ $t('INBOX_MGMT.ADD.APP_STORE.CHANNEL_NAME.ERROR') }}
+          </span>
+        </label>
+      </div>
+
+      <div class="flex-shrink-0 flex-grow-0">
+        <label :class="{ error: v$.appId.$error }">
+          {{ $t('INBOX_MGMT.ADD.APP_STORE.APP_ID.LABEL') }}
+          <input
+            v-model="appId"
+            type="text"
+            :placeholder="$t('INBOX_MGMT.ADD.APP_STORE.APP_ID.PLACEHOLDER')"
+            @blur="v$.appId.$touch"
+          />
+          <span v-if="v$.appId.$error" class="message">
+            {{ $t('INBOX_MGMT.ADD.APP_STORE.APP_ID.ERROR') }}
+          </span>
+        </label>
+      </div>
+
+      <div class="flex-shrink-0 flex-grow-0">
+        <label :class="{ error: v$.issuerId.$error }">
+          {{ $t('INBOX_MGMT.ADD.APP_STORE.ISSUER_ID.LABEL') }}
+          <input
+            v-model="issuerId"
+            type="text"
+            :placeholder="$t('INBOX_MGMT.ADD.APP_STORE.ISSUER_ID.PLACEHOLDER')"
+            @blur="v$.issuerId.$touch"
+          />
+          <span v-if="v$.issuerId.$error" class="message">
+            {{ $t('INBOX_MGMT.ADD.APP_STORE.ISSUER_ID.ERROR') }}
+          </span>
+        </label>
+      </div>
+
+      <div class="flex-shrink-0 flex-grow-0">
+        <label :class="{ error: v$.keyId.$error }">
+          {{ $t('INBOX_MGMT.ADD.APP_STORE.KEY_ID.LABEL') }}
+          <input
+            v-model="keyId"
+            type="text"
+            :placeholder="$t('INBOX_MGMT.ADD.APP_STORE.KEY_ID.PLACEHOLDER')"
+            @blur="v$.keyId.$touch"
+          />
+          <span v-if="v$.keyId.$error" class="message">
+            {{ $t('INBOX_MGMT.ADD.APP_STORE.KEY_ID.ERROR') }}
+          </span>
+        </label>
+      </div>
+
+      <div class="flex-shrink-0 flex-grow-0">
+        <label :class="{ error: v$.privateKey.$error }">
+          {{ $t('INBOX_MGMT.ADD.APP_STORE.PRIVATE_KEY.LABEL') }}
+          <textarea
+            v-model="privateKey"
+            rows="8"
+            :placeholder="
+              $t('INBOX_MGMT.ADD.APP_STORE.PRIVATE_KEY.PLACEHOLDER')
+            "
+            @blur="v$.privateKey.$touch"
+          />
+          <span v-if="v$.privateKey.$error" class="message">
+            {{ $t('INBOX_MGMT.ADD.APP_STORE.PRIVATE_KEY.ERROR') }}
+          </span>
+        </label>
+      </div>
+
+      <div class="w-full mt-4">
+        <NextButton
+          :is-loading="uiFlags.isCreating"
+          type="submit"
+          solid
+          blue
+          :label="$t('INBOX_MGMT.ADD.APP_STORE.SUBMIT_BUTTON')"
+        />
+      </div>
+    </form>
+  </div>
+</template>
@@ -34,6 +34,7 @@ const i18nMap = {
  'Channel::Api': 'API',
  'Channel::Instagram': 'INSTAGRAM',
  'Channel::Tiktok': 'TIKTOK',
+  'Channel::AppStore': 'APP_STORE',
 };

 const twilioChannelName = () => {
@@ -156,7 +156,8 @@ export const getters = {
  },
  dialogFlowEnabledInboxes($state) {
    return $state.records.filter(
-      item => item.channel_type !== INBOX_TYPES.EMAIL
+      item =>
+        ![INBOX_TYPES.EMAIL, INBOX_TYPES.APP_STORE].includes(item.channel_type)
    );
  },
  getFacebookInboxByInstagramId: $state => instagramId => {
@@ -15,6 +15,7 @@ export const INBOX_FEATURE_MAP = {
    INBOX_TYPES.WHATSAPP,
    INBOX_TYPES.TELEGRAM,
    INBOX_TYPES.TIKTOK,
+    INBOX_TYPES.APP_STORE,
    INBOX_TYPES.API,
  ],
  [INBOX_FEATURES.REPLY_TO_OUTGOING]: [
@@ -23,6 +24,7 @@ export const INBOX_FEATURE_MAP = {
    INBOX_TYPES.WHATSAPP,
    INBOX_TYPES.TELEGRAM,
    INBOX_TYPES.TIKTOK,
+    INBOX_TYPES.APP_STORE,
    INBOX_TYPES.API,
  ],
 };
@@ -119,6 +121,8 @@ export default {
        badgeKey = 'whatsapp';
      } else if (this.isATiktokChannel) {
        badgeKey = 'tiktok';
+      } else if (this.isAnAppStoreChannel) {
+        badgeKey = 'app_store';
      }
      return badgeKey || this.channelType;
    },
@@ -134,6 +138,9 @@ export default {
    isATiktokChannel() {
      return this.channelType === INBOX_TYPES.TIKTOK;
    },
+    isAnAppStoreChannel() {
+      return this.channelType === INBOX_TYPES.APP_STORE;
+    },
  },
  methods: {
    inboxHasFeature(feature) {