refactor: new link to show what data is being shared

packages/hoppscotch-sh-admin/src/pages/data.vue

@@ -8,7 +8,7 @@
       class="bg-primaryLight mt-10 p-10 border-2 border-dividerLight rounded-lg"
     >
       <div>
-        <div class="">
+        <div class="flex flex-col">
           <p class="text-lg font-bold text-white">Make Hoppscotch Better</p>
           <p class="text-sm font-light">
             Share anonymous data usage to improve Hoppscotch
@@ -16,10 +16,18 @@
           <HoppSmartToggle
             :on="shareData"
             @change="shareData = !shareData"
-            class="my-5 text-white"
+            class="my-5 text-white w-min justify-start"
           >
             Share data and make Hoppscotch better
           </HoppSmartToggle>
+          <HoppButtonSecondary
+            outline
+            filled
+            :icon="IconShieldQuestion"
+            label="See what is shared"
+            to="http://docs.hoppscotch.io"
+            class="w-min mx-auto mb-2"
+          />
         </div>
 
         <div class="mt-5">
@@ -39,7 +47,7 @@
         <HoppButtonPrimary
           :icon="IconMoveUpRight"
           label="Continue to Dashboard"
-          @click="router.push('/')"
+          @click="submitSelection"
         />
         <a href="http://docs.hoppscotch.io">
           <HoppButtonSecondary
@@ -56,19 +64,65 @@
 </template>
 
 <script setup lang="ts">
-import { HoppButtonPrimary } from '@hoppscotch/ui';
+import {
-import IconMoveUpRight from '~icons/lucide/move-up-right';
+  HoppButtonPrimary,
-import IconBookOpenText from '~icons/lucide/book-open-text';
+  HoppButtonSecondary,
-import { useRouter } from 'vue-router';
+  HoppSmartLink,
+} from '@hoppscotch/ui';
+import { useMutation } from '@urql/vue';
 import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useToast } from '~/composables/toast';
+import { auth } from '~/helpers/auth';
+import {
+  ToggleAnalyticsCollectionDocument,
+  ToggleAnalyticsCollectionMutationVariables,
+} from '~/helpers/backend/graphql';
+import { addSubscriberNewsletterList } from '~/helpers/listmonk';
+import IconBookOpenText from '~icons/lucide/book-open-text';
+import IconMoveUpRight from '~icons/lucide/move-up-right';
+import IconShieldQuestion from '~icons/lucide/shield-question';
 
+const toast = useToast();
 const router = useRouter();
+const user = auth.getCurrentUser();
 
 const shareData = ref(true);
 const shareEmail = ref(true);
-</script>
 
-<style scoped></style>
+const submitSelection = async () => {
+  if (shareData.value) {
+    await toggleDataSharing();
+  }
+  if (shareEmail.value) {
+    await toggleNewsletter();
+  }
+  router.push('/');
+};
+
+const dataSharingMutation = useMutation(ToggleAnalyticsCollectionDocument);
+
+const toggleDataSharing = async () => {
+  const status = shareData.value ? 'ENABLE' : 'DISABLE';
+  const variables = { status };
+  const result = await dataSharingMutation.executeMutation(
+    variables as ToggleAnalyticsCollectionMutationVariables
+  );
+  if (result.error) {
+    toast.error('Failed to update data sharing settings');
+  } else {
+    toast.success('Data sharing settings updated');
+  }
+};
+
+const toggleNewsletter = async () => {
+  shareData.value = !shareData.value;
+  await addSubscriberNewsletterList(
+    user?.email as string,
+    user?.displayName as string
+  );
+};
+</script>
 
 <route lang="yaml">
 meta: