feat(sh-admin): introducing data analytics and newsletter configurations (#3845)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com> Co-authored-by: nivedin <nivedinp@gmail.com>
2024-03-06 20:06:48 +05:30
parent 4798d7bbbd
commit 919579b1da
18 changed files with 575 additions and 156 deletions
--- a/packages/hoppscotch-sh-admin/src/components/setup/DataSharingAndNewsletter.vue
+++ b/packages/hoppscotch-sh-admin/src/components/setup/DataSharingAndNewsletter.vue
@@ -0,0 +1,141 @@
+<template>
+  <div
+    class="flex flex-col items-center justify-center min-h-screen space-y-10"
+  >
+    <div class="flex items-center justify-center flex-col space-y-2">
+      <h2 class="text-lg">{{ t('data_sharing.welcome') }}</h2>
+      <img
+        src="/assets/images/hoppscotch-title.svg"
+        alt="hoppscotch-title"
+        class="w-52"
+      />
+    </div>
+    <div
+      class="bg-primaryLight p-10 border-2 border-dividerLight rounded-lg flex flex-col space-y-8"
+    >
+      <div class="flex flex-col space-y-5 items-start">
+        <div>
+          <p class="text-lg font-bold text-white">
+            {{ t('data_sharing.title') }}
+          </p>
+          <p class="font-light">
+            {{ t('data_sharing.description') }}
+          </p>
+        </div>
+        <HoppSmartToggle
+          :on="dataSharingToggle"
+          @change="dataSharingToggle = !dataSharingToggle"
+        >
+          {{ t('data_sharing.toggle_description') }}
+        </HoppSmartToggle>
+        <!-- TODO: Update link -->
+        <HoppSmartAnchor
+          blank
+          to="http://docs.hoppscotch.io"
+          :label="t('data_sharing.see_shared')"
+          class="underline"
+        />
+      </div>
+      <div class="flex flex-col items-start space-y-5">
+        <div>
+          <p class="text-lg font-bold text-white">
+            {{ t('newsletter.title') }}
+          </p>
+          <p class="font-light">{{ t('newsletter.description') }}</p>
+        </div>
+        <HoppSmartToggle
+          :on="newsletterToggle"
+          @change="newsletterToggle = !newsletterToggle"
+        >
+          {{ t('newsletter.toggle_description') }}
+        </HoppSmartToggle>
+      </div>
+      <div class="flex flex-col items-center space-y-5">
+        <HoppButtonPrimary
+          :icon="IconLogIn"
+          :label="t('app.continue_to_dashboard')"
+          class="mx-10"
+          @click="submitSelection"
+        />
+        <HoppSmartAnchor
+          blank
+          to="http://docs.hoppscotch.io"
+          :icon="IconBookOpenText"
+          :label="t('app.read_documentation')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useMutation } from '@urql/vue';
+import { ref } from 'vue';
+import { useI18n } from '~/composables/i18n';
+import { useToast } from '~/composables/toast';
+import { auth } from '~/helpers/auth';
+import { listmonkApi } from '~/helpers/axiosConfig';
+import {
+  ServiceStatus,
+  ToggleAnalyticsCollectionDocument,
+} from '~/helpers/backend/graphql';
+import IconBookOpenText from '~icons/lucide/book-open-text';
+import IconLogIn from '~icons/lucide/log-in';
+
+const t = useI18n();
+const toast = useToast();
+const user = auth.getCurrentUser();
+
+const emit = defineEmits<{
+  (event: 'setupComplete', status: boolean): void;
+}>();
+
+const dataSharingToggle = ref(true);
+const newsletterToggle = ref(true);
+
+// Toggle data sharing
+const dataSharingMutation = useMutation(ToggleAnalyticsCollectionDocument);
+
+const toggleDataSharing = async () => {
+  const status = dataSharingToggle.value
+    ? ServiceStatus.Enable
+    : ServiceStatus.Disable;
+
+  const result = await dataSharingMutation.executeMutation({ status });
+
+  if (result.error) {
+    toast.error(t('state.data_sharing_failure'));
+    return false;
+  }
+  return true;
+};
+
+// Toggle subscription to newsletter
+const toggleNewsletter = async () => {
+  try {
+    await listmonkApi.post('/subscription', {
+      email: user?.email,
+      name: user?.displayName,
+      list_uuids: ['f5f0b457-44d0-4aa1-b6f9-165dc1efa56a'],
+    });
+
+    return true;
+  } catch (e) {
+    console.error(e);
+    toast.error(t('state.newsletter_failure'));
+    return false;
+  }
+};
+
+// Submit selections made
+const submitSelection = async () => {
+  const dataSharingResult =
+    dataSharingToggle.value && (await toggleDataSharing());
+  const newsletterResult = newsletterToggle.value && (await toggleNewsletter());
+
+  const setupDataComplete = !dataSharingToggle.value || dataSharingResult;
+  const setupNewsletterComplete = !newsletterToggle.value || newsletterResult;
+
+  emit('setupComplete', setupDataComplete && setupNewsletterComplete);
+};
+</script>