From 61f50617bf7fa03ddf8f0771b20470d4f255817e Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Sat, 13 Jan 2024 12:29:25 +0700
Subject: [PATCH 1/3] fix: defer email subscription state fetching

---
 src/components/MenuAccount.vue            | 24 +----------
 src/components/ModalEmail.vue             | 51 +++++++++++++++++++++++
 src/components/ModalEmailManagement.vue   | 26 ++++--------
 src/components/ModalEmailResend.vue       | 22 +++-------
 src/components/ModalEmailSubscription.vue | 49 +++++++++-------------
 src/composables/useEmailSubscription.ts   |  5 ++-
 6 files changed, 88 insertions(+), 89 deletions(-)
 create mode 100644 src/components/ModalEmail.vue

diff --git a/src/components/MenuAccount.vue b/src/components/MenuAccount.vue
index 63ff1dbf16c..5a04d72b020 100644
--- a/src/components/MenuAccount.vue
+++ b/src/components/MenuAccount.vue
@@ -7,17 +7,9 @@ const emit = defineEmits(['switchWallet']);
 const { domain } = useApp();
 const { logout } = useWeb3();
 const router = useRouter();
-const { userState, loadEmailSubscriptions } = useEmailSubscription();
 
 const showModalEmail = ref(false);
 
-onMounted(loadEmailSubscriptions);
-watch(showModalEmail, () => {
-  if (!showModalEmail.value) {
-    loadEmailSubscriptions();
-  }
-});
-
 function handleAction(e) {
   if (e === 'viewProfile')
     // Link to profile page, if on custom domain then the link is external
@@ -90,20 +82,6 @@ function handleAction(e) {
   </div>
 
   <teleport to="#modal">
-    <ModalEmailSubscription
-      v-if="userState === 'NOT_SUBSCRIBED'"
-      :open="showModalEmail"
-      @close="showModalEmail = false"
-    />
-    <ModalEmailResend
-      v-else-if="userState === 'UNVERIFIED'"
-      :open="showModalEmail"
-      @close="showModalEmail = false"
-    />
-    <ModalEmailManagement
-      v-else-if="userState === 'VERIFIED'"
-      :open="showModalEmail"
-      @close="showModalEmail = false"
-    />
+    <ModalEmail :open="showModalEmail" @close="showModalEmail = false" />
   </teleport>
 </template>
diff --git a/src/components/ModalEmail.vue b/src/components/ModalEmail.vue
new file mode 100644
index 00000000000..05d556d8261
--- /dev/null
+++ b/src/components/ModalEmail.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const props = defineProps<{
+  open: boolean;
+}>();
+const emit = defineEmits(['close']);
+
+const { initialized, userState, loadEmailSubscriptions } =
+  useEmailSubscription();
+
+watch(
+  () => props.open,
+  () => {
+    if (
+      (props.open && !initialized.value) ||
+      userState.value === 'UNVERIFIED'
+    ) {
+      loadEmailSubscriptions();
+    }
+  }
+);
+</script>
+
+<template>
+  <BaseModal max-height="510px" :open="open" @close="emit('close')">
+    <template #header>
+      <h3 v-if="userState === 'NOT_SUBSCRIBED'">
+        {{ $t('emailSubscription.title') }}
+      </h3>
+      <h3 v-else-if="userState === 'UNVERIFIED'">
+        {{ $t('emailResend.title') }}
+      </h3>
+      <h3 v-else-if="userState === 'VERIFIED'">
+        {{ $t('emailManagement.title') }}
+      </h3>
+    </template>
+
+    <LoadingRow v-if="!initialized" />
+    <ModalEmailSubscription
+      v-else-if="userState === 'NOT_SUBSCRIBED'"
+      @close="emit('close')"
+    />
+    <ModalEmailResend
+      v-else-if="userState === 'UNVERIFIED'"
+      @close="emit('close')"
+    />
+    <ModalEmailManagement
+      v-else-if="userState === 'VERIFIED'"
+      @close="emit('close')"
+    />
+  </BaseModal>
+</template>
diff --git a/src/components/ModalEmailManagement.vue b/src/components/ModalEmailManagement.vue
index 0a008ab5896..a7a4b831669 100644
--- a/src/components/ModalEmailManagement.vue
+++ b/src/components/ModalEmailManagement.vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-defineProps<{
-  open: boolean;
-}>();
-
 const emit = defineEmits(['close']);
 
 const { loading, error, clientSubscriptions, updateSubscriptions } =
@@ -32,20 +28,12 @@ const submit = async () => {
 </script>
 
 <template>
-  <BaseModal :open="open" max-height="510px" @close="emit('close')">
-    <template #header>
-      <div class="flex flex-row items-center justify-center">
-        <h3>{{ $t('emailManagement.title') }}</h3>
-      </div>
-    </template>
-
-    <div class="mx-4 mb-4 mt-2 text-center">
-      <p class="text-sm text-skin-text opacity-60">
-        {{ t('emailManagement.subtitle') }}
-      </p>
-    </div>
+  <div class="m-4 flex flex-col gap-4">
+    <p class="text-sm text-skin-text opacity-60">
+      {{ t('emailManagement.subtitle') }}
+    </p>
 
-    <form class="mx-6 my-4 flex flex-col space-y-4" @submit.prevent="submit">
+    <form class="flex flex-col space-y-4" @submit.prevent="submit">
       <TuneSwitch
         :model-value="clientSubscriptions.summary"
         :label="t('emailManagement.optionSummary')"
@@ -67,9 +55,9 @@ const submit = async () => {
         @update:model-value="updateSubscriptionKeys('closedProposal', $event)"
       />
 
-      <TuneButton class="mt-6 w-full" primary type="submit" :loading="loading">
+      <TuneButton class="w-full" primary type="submit" :loading="loading">
         {{ t('emailManagement.updatePreferences') }}
       </TuneButton>
     </form>
-  </BaseModal>
+  </div>
 </template>
diff --git a/src/components/ModalEmailResend.vue b/src/components/ModalEmailResend.vue
index 0c9369bd64c..b9f3dd4df62 100644
--- a/src/components/ModalEmailResend.vue
+++ b/src/components/ModalEmailResend.vue
@@ -1,23 +1,13 @@
 <script setup lang="ts">
-defineProps<{
-  open: boolean;
-}>();
 const emit = defineEmits(['close']);
 </script>
 
 <template>
-  <BaseModal :open="open" @close="emit('close')">
-    <template #header>
-      <div class="flex flex-row items-center justify-center">
-        <h3>{{ $t('emailResend.title') }}</h3>
-      </div>
-    </template>
-    <div class="m-4 mb-6 text-center">
-      {{ $t('emailResend.description') }}
+  <div class="m-4 flex flex-col gap-4 text-center">
+    {{ $t('emailResend.description') }}
 
-      <TuneButton class="mt-4 w-full" primary @click="emit('close')">
-        {{ $t('close') }}
-      </TuneButton>
-    </div>
-  </BaseModal>
+    <TuneButton class="w-full" primary @click="emit('close')">
+      {{ $t('close') }}
+    </TuneButton>
+  </div>
 </template>
diff --git a/src/components/ModalEmailSubscription.vue b/src/components/ModalEmailSubscription.vue
index eb4493b11c3..7be76dc906b 100644
--- a/src/components/ModalEmailSubscription.vue
+++ b/src/components/ModalEmailSubscription.vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-defineProps<{
-  open: boolean;
-}>();
-
 const emit = defineEmits(['close']);
 
 type ModalView = 'SUBSCRIBE' | 'SUCCESS';
@@ -40,19 +36,13 @@ async function submit() {
 </script>
 
 <template>
-  <BaseModal :open="open" @close="close">
-    <template #header>
-      <div class="flex flex-row items-center justify-center">
-        <h3>{{ $t('emailSubscription.title') }}</h3>
-      </div>
-    </template>
-
-    <template v-if="modalView === 'SUBSCRIBE'">
-      <div class="m-4">
+  <template v-if="modalView === 'SUBSCRIBE'">
+    <div class="m-4 flex flex-col gap-4">
+      <p>
         {{ $t('emailSubscription.description') }}
-      </div>
+      </p>
 
-      <form class="m-4" @submit.prevent="submit">
+      <form @submit.prevent="submit">
         <BaseInput
           v-model="email"
           :placeholder="$t('emailSubscription.inputPlaceholder')"
@@ -78,24 +68,23 @@ async function submit() {
           {{ $t('emailSubscription.subscribe') }}
         </TuneButton>
       </form>
-    </template>
-
-    <div v-if="modalView === 'SUCCESS'" class="m-4 text-center">
-      <i-ho-check-circle
-        class="mx-auto my-4 text-center text-[3em] text-green"
-      />
-      <h3>
-        {{ $t('emailSubscription.postSubscribeMessage.successThanks') }}
-      </h3>
-      <p class="mt-3 italic">
-        {{ $t('emailSubscription.postSubscribeMessage.successConfirmation') }}
-      </p>
     </div>
+  </template>
 
-    <template v-if="modalView === 'SUCCESS'" #footer>
+  <template v-if="modalView === 'SUCCESS'">
+    <div class="m-4 gap-4 flex flex-col text-center">
+      <i-ho-check-circle class="mx-auto text-center text-[3em] text-green" />
+      <div>
+        <h3>
+          {{ $t('emailSubscription.postSubscribeMessage.successThanks') }}
+        </h3>
+        <p class="mt-3 italic">
+          {{ $t('emailSubscription.postSubscribeMessage.successConfirmation') }}
+        </p>
+      </div>
       <TuneButton class="w-full" primary @click="close">
         {{ $t('close') }}
       </TuneButton>
-    </template>
-  </BaseModal>
+    </div>
+  </template>
 </template>
diff --git a/src/composables/useEmailSubscription.ts b/src/composables/useEmailSubscription.ts
index 171a1a3c663..087f2a9eab0 100644
--- a/src/composables/useEmailSubscription.ts
+++ b/src/composables/useEmailSubscription.ts
@@ -14,6 +14,7 @@ function useEmailSubscriptionComposable() {
 
   const userState = ref<SubscriptionStatus>('NOT_SUBSCRIBED');
   const error = ref('');
+  const initialized = ref(false);
   const loading = ref(false);
   const apiSubscriptions = ref<SubscriptionType[]>([]);
 
@@ -50,6 +51,7 @@ function useEmailSubscriptionComposable() {
     userState.value = usrState;
     apiSubscriptions.value = subscriptions || [];
     loading.value = false;
+    initialized.value = true;
   };
 
   const subscribe = async (email: string) => {
@@ -88,7 +90,8 @@ function useEmailSubscriptionComposable() {
     subscribe,
     updateSubscriptions,
     loadEmailSubscriptions,
-    loading
+    loading,
+    initialized
   };
 }
 

From 8c883b5a3146aa67c5bf9eaceb6a266c56082ee8 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Sat, 13 Jan 2024 16:25:41 +0700
Subject: [PATCH 2/3] fix: fix email subscription in post vote modal

---
 src/components/MenuAccount.vue       |  7 +++----
 src/components/ModalPostVote.vue     | 11 +++++++++--
 src/components/SpaceProposalPage.vue |  9 ++-------
 src/composables/useModal.ts          |  5 +++--
 4 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/MenuAccount.vue b/src/components/MenuAccount.vue
index 5a04d72b020..d62cd253838 100644
--- a/src/components/MenuAccount.vue
+++ b/src/components/MenuAccount.vue
@@ -6,10 +6,9 @@ const props = defineProps<{
 const emit = defineEmits(['switchWallet']);
 const { domain } = useApp();
 const { logout } = useWeb3();
+const { modalEmailOpen } = useModal();
 const router = useRouter();
 
-const showModalEmail = ref(false);
-
 function handleAction(e) {
   if (e === 'viewProfile')
     // Link to profile page, if on custom domain then the link is external
@@ -21,7 +20,7 @@ function handleAction(e) {
         });
   if (e === 'switchWallet') return emit('switchWallet');
   if (e === 'subscribeEmail') {
-    showModalEmail.value = true;
+    modalEmailOpen.value = true;
     return true;
   }
 
@@ -82,6 +81,6 @@ function handleAction(e) {
   </div>
 
   <teleport to="#modal">
-    <ModalEmail :open="showModalEmail" @close="showModalEmail = false" />
+    <ModalEmail :open="modalEmailOpen" @close="modalEmailOpen = false" />
   </teleport>
 </template>
diff --git a/src/components/ModalPostVote.vue b/src/components/ModalPostVote.vue
index 136d167e7c3..64f2e06a055 100644
--- a/src/components/ModalPostVote.vue
+++ b/src/components/ModalPostVote.vue
@@ -4,7 +4,8 @@ import { ExtendedSpace, Proposal } from '@/helpers/interfaces';
 
 const { shareVote, shareProposalTwitter, shareProposalHey } = useSharing();
 const { web3Account } = useWeb3();
-const { userState } = useEmailSubscription();
+const { userState, loadEmailSubscriptions, initialized } =
+  useEmailSubscription();
 
 const props = defineProps<{
   open: boolean;
@@ -34,6 +35,12 @@ function share(shareTo: 'twitter' | 'hey') {
     choices: getChoiceString(props.proposal, props.selectedChoices)
   });
 }
+
+onMounted(() => {
+  if (!initialized.value) {
+    loadEmailSubscriptions();
+  }
+});
 </script>
 
 <template>
@@ -87,7 +94,7 @@ function share(shareTo: 'twitter' | 'hey') {
         </TuneButton>
 
         <TuneButton
-          v-if="userState !== 'VERIFIED'"
+          v-if="userState !== 'VERIFIED' && initialized"
           class="flex !h-[42px] w-full items-center justify-center gap-2"
           @click="subscribeEmail"
         >
diff --git a/src/components/SpaceProposalPage.vue b/src/components/SpaceProposalPage.vue
index 83b89b2988a..28e9e79478e 100644
--- a/src/components/SpaceProposalPage.vue
+++ b/src/components/SpaceProposalPage.vue
@@ -23,6 +23,7 @@ useMeta({
 
 const route = useRoute();
 const { web3, web3Account } = useWeb3();
+const { modalEmailOpen } = useModal();
 const { isMessageVisible, setMessageVisibility } = useFlaggedMessageStatus(
   route.params.id as string
 );
@@ -30,7 +31,6 @@ const { isMessageVisible, setMessageVisibility } = useFlaggedMessageStatus(
 const proposalId: string = route.params.id as string;
 
 const modalOpen = ref(false);
-const modalEmailSubscriptionOpen = ref(false);
 const selectedChoices = ref<any>(null);
 const loadedResults = ref(false);
 const results = ref<Results | null>(null);
@@ -240,12 +240,7 @@ onMounted(() => setMessageVisibility(props.proposal.flagged));
       :selected-choices="selectedChoices"
       :waiting-for-signers="waitingForSigners"
       @close="isModalPostVoteOpen = false"
-      @subscribe-email="modalEmailSubscriptionOpen = true"
-    />
-    <ModalEmailSubscription
-      :open="modalEmailSubscriptionOpen"
-      :address="web3Account"
-      @close="modalEmailSubscriptionOpen = false"
+      @subscribe-email="modalEmailOpen = true"
     />
   </teleport>
 </template>
diff --git a/src/composables/useModal.ts b/src/composables/useModal.ts
index aa5686ea0b8..ce9a69cf547 100644
--- a/src/composables/useModal.ts
+++ b/src/composables/useModal.ts
@@ -1,6 +1,7 @@
 const modalAccountOpen = ref(false);
-const isModalPostVoteOpen = ref(false);
+const isModalPostVoteOpen = ref(true);
+const modalEmailOpen = ref(false);
 
 export function useModal() {
-  return { modalAccountOpen, isModalPostVoteOpen };
+  return { modalAccountOpen, isModalPostVoteOpen, modalEmailOpen };
 }

From 7d598b7c498be6b7e92ad2a668bd419e86ea9eed Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Sat, 13 Jan 2024 22:09:45 +0700
Subject: [PATCH 3/3] fix: remove debug value

---
 src/composables/useModal.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/composables/useModal.ts b/src/composables/useModal.ts
index ce9a69cf547..88edd058b65 100644
--- a/src/composables/useModal.ts
+++ b/src/composables/useModal.ts
@@ -1,5 +1,5 @@
 const modalAccountOpen = ref(false);
-const isModalPostVoteOpen = ref(true);
+const isModalPostVoteOpen = ref(false);
 const modalEmailOpen = ref(false);
 
 export function useModal() {