fix(app-store): address review feedback

app/javascript/dashboard/constants/globals.js

@@ -40,6 +40,8 @@ export default {
   DOCS_URL: 'https://www.chatwoot.com/docs/product/',
   HELP_CENTER_DOCS_URL:
     'https://www.chatwoot.com/docs/product/others/help-center',
+  APP_STORE_REVIEWS_INBOX_DOCS_URL:
+    'https://www.chatwoot.com/hc/user-guide/articles/app-store-reviews-inbox',
   TESTIMONIAL_URL:
     'https://testimonials.cdn.chatwoot.com/testimonial-content.json',
   WHATSAPP_EMBEDDED_SIGNUP_DOCS_URL:

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

@@ -387,6 +387,7 @@
       "APP_STORE": {
         "TITLE": "App Store Reviews",
         "DESC": "Manage and reply to your App Store reviews from Chatwoot.",
+        "LEARN_MORE": "Learn how to create App Store Connect credentials",
         "CHANNEL_NAME": {
           "LABEL": "Inbox Name",
           "PLACEHOLDER": "Please enter an inbox name",

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/AppStore.vue

@@ -1,75 +1,71 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { computed, ref } from 'vue';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
 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';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import globalConstants from 'dashboard/constants/globals';
 
-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;
+const store = useStore();
+const { t } = useI18n();
 
-      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(),
-            },
-          }
-        );
+const channelName = ref('');
+const appId = ref('');
+const issuerId = ref('');
+const keyId = ref('');
+const privateKey = ref('');
+const appStoreReviewsInboxDocsUrl =
+  globalConstants.APP_STORE_REVIEWS_INBOX_DOCS_URL;
 
-        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')
-        );
-      }
-    },
-  },
+const uiFlags = computed(() => store.getters['inboxes/getUIFlags']);
+
+const rules = {
+  channelName: { required },
+  appId: { required },
+  issuerId: { required },
+  keyId: { required },
+  privateKey: { required },
+};
+
+const v$ = useVuelidate(rules, {
+  channelName,
+  appId,
+  issuerId,
+  keyId,
+  privateKey,
+});
+
+const createChannel = async () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+
+  try {
+    const appStoreChannel = await store.dispatch('inboxes/createChannel', {
+      name: channelName.value?.trim(),
+      channel: {
+        type: 'app_store',
+        app_id: appId.value.trim(),
+        issuer_id: issuerId.value.trim(),
+        key_id: keyId.value.trim(),
+        private_key: privateKey.value.trim(),
+      },
+    });
+
+    router.replace({
+      name: 'settings_inboxes_add_agents',
+      params: {
+        page: 'new',
+        inbox_id: appStoreChannel.id,
+      },
+    });
+  } catch (error) {
+    useAlert(error.message || t('INBOX_MGMT.ADD.APP_STORE.API.ERROR_MESSAGE'));
+  }
 };
 </script>
 
@@ -79,6 +75,15 @@ export default {
       :header-title="$t('INBOX_MGMT.ADD.APP_STORE.TITLE')"
       :header-content="$t('INBOX_MGMT.ADD.APP_STORE.DESC')"
     />
+    <a
+      :href="appStoreReviewsInboxDocsUrl"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="inline-flex items-center gap-1 mb-5 text-sm font-medium text-n-brand"
+    >
+      {{ $t('INBOX_MGMT.ADD.APP_STORE.LEARN_MORE') }}
+      <Icon icon="i-lucide-external-link" class="size-4" />
+    </a>
     <form
       class="flex flex-wrap flex-col mx-0"
       @submit.prevent="createChannel()"