feat: use composition API

app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Google.vue

@@ -1,3 +1,49 @@
+<script setup>
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'dashboard/composables/useI18n';
+import googleClient from 'dashboard/api/channel/googleClient';
+import SettingsSubPageHeader from '../../../SettingsSubPageHeader.vue';
+import { useVuelidate } from '@vuelidate/core';
+import { required, email } from '@vuelidate/validators';
+import { reactive, ref } from 'vue';
+
+const { t } = useI18n();
+
+const state = reactive({
+  email: '',
+});
+
+const rules = {
+  email: {
+    required,
+    email,
+  },
+};
+
+const v$ = useVuelidate(rules, state);
+const isRequestingAuthorization = ref(false);
+
+async function requestAuthorization() {
+  try {
+    v$.$touch();
+    if (v$.$invalid) return;
+
+    isRequestingAuthorization.value = true;
+    const response = await googleClient.generateAuthorization({
+      email: state.email,
+    });
+    const {
+      data: { url },
+    } = response;
+    window.location.href = url;
+  } catch (error) {
+    useAlert(t('INBOX_MGMT.ADD.GOOGLE.ERROR_MESSAGE'));
+  } finally {
+    isRequestingAuthorization.value = false;
+  }
+}
+</script>
+
 <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"
@@ -8,10 +54,10 @@
     />
     <form class="mt-6" @submit.prevent="requestAuthorization">
       <woot-input
-        v-model="email"
+        v-model="state.email"
         type="text"
         :placeholder="$t('INBOX_MGMT.ADD.GOOGLE.EMAIL_PLACEHOLDER')"
-        @blur="$v.email.$touch"
+        @blur="v$.email.$touch"
       />
       <woot-submit-button
         icon="brand-twitter"
@@ -22,41 +68,3 @@
     </form>
   </div>
 </template>
-<script>
-import alertMixin from 'shared/mixins/alertMixin';
-import googleClient from 'dashboard/api/channel/googleClient';
-import SettingsSubPageHeader from '../../../SettingsSubPageHeader.vue';
-import { required, email } from 'vuelidate/lib/validators';
-
-export default {
-  components: { SettingsSubPageHeader },
-  mixins: [alertMixin],
-  data() {
-    return { email: '', isRequestingAuthorization: false };
-  },
-  validations: {
-    email: { required, email },
-  },
-  methods: {
-    async requestAuthorization() {
-      try {
-        this.$v.$touch();
-        if (this.$v.$invalid) return;
-
-        this.isRequestingAuthorization = true;
-        const response = await googleClient.generateAuthorization({
-          email: this.email,
-        });
-        const {
-          data: { url },
-        } = response;
-        window.location.href = url;
-      } catch (error) {
-        this.showAlert(this.$t('INBOX_MGMT.ADD.GOOGLE.ERROR_MESSAGE'));
-      } finally {
-        this.isRequestingAuthorization = false;
-      }
-    },
-  },
-};
-</script>