From e4b2e83a83d7d44a8f8106c167fd3669b83a726a Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Sun, 24 Nov 2024 13:19:01 +0800
Subject: [PATCH] fix: improve types

---
 apps/ui/src/types.ts                          |  9 ++-
 .../src/views/Settings/EmailNotifications.vue | 65 ++++++++-----------
 2 files changed, 35 insertions(+), 39 deletions(-)

diff --git a/apps/ui/src/types.ts b/apps/ui/src/types.ts
index 450162d03..34d969652 100644
--- a/apps/ui/src/types.ts
+++ b/apps/ui/src/types.ts
@@ -4,6 +4,11 @@ import { ApiSpace as OffchainApiSpace } from '@/networks/offchain/api/types';
 // UI
 export type NotificationType = 'error' | 'warning' | 'success';
 
+export type EmailSubscriptionType =
+  | 'summary'
+  | 'newProposal'
+  | 'closedProposal';
+
 export type ProposalState =
   | 'pending'
   | 'active'
@@ -306,8 +311,8 @@ export type User = {
 } & Partial<UserProfile>;
 
 export type EmailSubscription = {
-  status: string;
-  subscriptions: string[];
+  status: 'NOT_SUBSCRIBED' | 'UNVERIFIED' | 'VERIFIED';
+  subscriptions: EmailSubscriptionType[];
 };
 
 export type UserActivity = {
diff --git a/apps/ui/src/views/Settings/EmailNotifications.vue b/apps/ui/src/views/Settings/EmailNotifications.vue
index c56f04342..077f3592f 100644
--- a/apps/ui/src/views/Settings/EmailNotifications.vue
+++ b/apps/ui/src/views/Settings/EmailNotifications.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { clone } from '@/helpers/utils';
 import { getValidator } from '@/helpers/validation';
+import { EmailSubscriptionType } from '@/types';
 
 useTitle('Email notifications');
 
@@ -56,7 +57,6 @@ const SUBSCRIPTIONS_TYPE = [
 ];
 
 const usersStore = useUsersStore();
-const { modalAccountWithoutDismissOpen } = useModal();
 const { web3 } = useWeb3();
 
 const user = computed(() => usersStore.getUser(web3.value.account));
@@ -66,9 +66,9 @@ const loading = computed(
 
 const form: Ref<{
   email: string;
-  subscriptions: string[];
+  subscriptions: EmailSubscriptionType[];
 }> = ref(clone(CREATE_SUBSCRIBE_FORM_STATE));
-const subscriptions = reactive({
+const subscriptions = reactive<Record<EmailSubscriptionType, boolean>>({
   summary: true,
   newProposal: true,
   closedProposal: true
@@ -94,40 +94,47 @@ watch(
     if (user.value?.emailSubscription?.subscriptions) {
       Object.keys(subscriptions).forEach(key => {
         subscriptions[key] =
-          user.value?.emailSubscription?.subscriptions.includes(key);
+          user.value?.emailSubscription?.subscriptions.includes(
+            key as EmailSubscriptionType
+          );
       });
     }
   },
   { immediate: true }
 );
 
-watch(
-  [() => web3.value.account, () => web3.value.authLoading],
-  ([account, authLoading]) => {
-    if (!account && !authLoading) {
-      modalAccountWithoutDismissOpen.value = true;
-    }
-  },
-  { immediate: true }
-);
-
 watchEffect(async () => {
   formValidated.value = false;
 
   formErrors.value = await formValidator.validateAsync(form);
   formValidated.value = true;
 });
-
-onUnmounted(() => {
-  modalAccountWithoutDismissOpen.value = false;
-});
 </script>
 
 <template>
   <UiLabel label="Email notifications" />
-  <UiLoading v-if="loading" class="p-4 block" />
-  <div v-else-if="user" class="p-4 max-w-[640px]">
-    <template v-if="user.emailSubscription?.status === 'UNVERIFIED'">
+  <div class="p-4 max-w-[640px]">
+    <UiLoading v-if="loading" class="block" />
+    <template
+      v-else-if="!user || user.emailSubscription?.status === 'NOT_SUBSCRIBED'"
+    >
+      <h3 class="text-md leading-6">Receive email notifications</h3>
+      <div class="mb-3">
+        Stay updated with the latest and important updates directly on your
+        inbox.
+      </div>
+
+      <div class="s-box">
+        <UiForm
+          :error="formErrors"
+          :model-value="form"
+          :definition="DEFINITION"
+        />
+        <UiButton @click="handleCreateSubscribeClick">Subscribe now</UiButton>
+      </div>
+    </template>
+
+    <template v-else-if="user.emailSubscription?.status === 'UNVERIFIED'">
       <h3 class="text-md leading-6">Confirm your email</h3>
       <div class="mb-3">
         We've sent an email to your email address.
@@ -163,21 +170,5 @@ onUnmounted(() => {
         </UiButton>
       </div>
     </template>
-    <template v-else>
-      <h3 class="text-md leading-6">Receive email notifications</h3>
-      <div class="mb-3">
-        Stay updated with the latest and important updates directly on your
-        inbox.
-      </div>
-
-      <div class="s-box">
-        <UiForm
-          :error="formErrors"
-          :model-value="form"
-          :definition="DEFINITION"
-        />
-        <UiButton @click="handleCreateSubscribeClick">Subscribe now</UiButton>
-      </div>
-    </template>
   </div>
 </template>