✨ Add book user store and notification email setting

likecoin · May 17, 2024 · a6e0259 · a6e0259
1 parent 0983896
commit a6e0259
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 3 deletions.
diff --git a/components/SiteMenu.vue b/components/SiteMenu.vue
@@ -59,7 +59,7 @@ const items = [
         exact: true
       },
       {
-        label: 'Manage Stripe Account',
+        label: 'Manage User Setting',
         icon: 'i-heroicons-user-group',
         to: { name: 'nft-book-store-user' },
         exact: true

diff --git a/pages/nft-book-store/user/index.vue b/pages/nft-book-store/user/index.vue
@@ -101,7 +101,7 @@
             <UBadge v-else label="No" color="red" variant="outline" />
           </template>
           <template #completed-data="{ row }">
-            <UBadge v-if="row.completed" :label="connectStatus?.email || 'Yes'" color="green" variant="outline" />
+            <UBadge v-if="row.completed" :label="connectStatus?.notificationEmail || 'Yes'" color="green" variant="outline" />
             <UBadge v-else label="No" color="red" variant="outline" />
           </template>
         </UTable>
@@ -128,6 +128,61 @@
           />
         </template>
       </UCard>
+
+      <UCard
+        :ui="{
+          header: { base: 'flex justify-between items-center' },
+          body: { padding: '' },
+          footer: { base: 'text-center' },
+        }"
+      >
+        <template #header>
+          <h1 class="text-center font-bold font-mono">
+            User Setting
+          </h1>
+        </template>
+
+        <UFormGroup label="Liker ID Email">
+          <UInput
+            :value="bookUser?.notificationEmail"
+            label="Liker ID Email"
+            disabled
+            :ui="{ base: 'font-mono' }"
+          />
+        </UFormGroup>
+        <UFormGroup label="Is Liker ID Email verified">
+          <UCheckbox
+            :value="bookUser?.isEmailVerified"
+            label="Is Liker ID Email verified"
+            disabled
+            :ui="{ base: 'font-mono' }"
+          />
+        </UFormGroup>
+        <UFormGroup label="Email Notification Settings">
+          <UAlert
+            v-if="!(bookUser?.notificationEmail && bookUser?.isEmailVerified)"
+            icon="i-heroicons-exclamation-circle"
+            color="orange"
+            variant="soft"
+            title="Please setup email in Liker ID."
+            description="To enable email notifications, setup and verify your Liker ID email"
+          />
+
+          <UCheckbox
+            v-model="isEnableNotificationEmails"
+            name="isEnalbeNotificationEmails"
+            label="Enable email notifications about commissions"
+            :disabled="!(bookUser?.notificationEmail && bookUser?.isEmailVerified)"
+          />
+        </UFormGroup>
+        <template #footer>
+          <UButton
+            label="Update"
+            color="gray"
+            @click="updateUserProfile"
+          />
+        </template>
+      </UCard>
       <UCard
         :ui="{
           header: { base: 'flex justify-between items-center' },
@@ -183,6 +238,7 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
+import { useUserStore } from '~/stores/user'
 import { useBookStoreApiStore } from '~/stores/book-store-api'
 import { useWalletStore } from '~/stores/wallet'
 import { useNftStore } from '~/stores/nft'
@@ -193,14 +249,21 @@ const nftStore = useNftStore()
 const walletStore = useWalletStore()
 const bookStoreApiStore = useBookStoreApiStore()
 const collectionStore = useCollectionStore()
+const userStore = useUserStore()
 const { wallet } = storeToRefs(walletStore)
 const { token } = storeToRefs(bookStoreApiStore)
+const { bookUser } = storeToRefs(userStore)
 
 const error = ref('')
 const isLoading = ref(false)
 const connectStatus = ref<any>({})
 const likerIdInfo = ref<any>({})
 const commissionHistory = ref<any>([])
+const isEnableNotificationEmails = ref(true)
+
+watch(bookUser, (user) => {
+  isEnableNotificationEmails.value = user?.isEnableNotificationEmails || false
+})
 
 watch(isLoading, (newIsLoading) => {
   if (newIsLoading) { error.value = '' }
@@ -210,7 +273,8 @@ onMounted(async () => {
   await Promise.all([
     loadCommissionHistory(),
     loadLikerId(),
-    loadStripeConnectStatus()
+    loadStripeConnectStatus(),
+    userStore.lazyFetchBookUserProfile()
   ])
 })
 
@@ -349,4 +413,10 @@ async function onSetupStripe () {
   }
 }
 
+async function updateUserProfile () {
+  await userStore.updateBookUserProfile({
+    isEnableNotificationEmails: isEnableNotificationEmails.value
+  })
+}
+
 </script>
diff --git a/stores/user.ts b/stores/user.ts
@@ -0,0 +1,55 @@
+import { defineStore, storeToRefs } from 'pinia'
+import { useBookStoreApiStore } from './book-store-api'
+import { LIKE_CO_API } from '~/constant'
+
+export const useUserStore = defineStore('user', () => {
+  const bookStoreApiStore = useBookStoreApiStore()
+  const { token } = storeToRefs(bookStoreApiStore)
+
+  const bookUser = ref(null as any)
+
+  async function fetchBookUserProfile () {
+    const { error, data } = await useFetch(
+      `${LIKE_CO_API}/likernft/book/user/profile`,
+      {
+        headers: {
+          authorization: `Bearer ${token.value}`
+        }
+      }
+    )
+    if (error.value) {
+      throw error.value
+    }
+    bookUser.value = data.value
+    return bookUser.value
+  }
+
+  function lazyFetchBookUserProfile () {
+    if (bookUser.value) {
+      return bookUser.value
+    }
+    return fetchBookUserProfile()
+  }
+
+  async function updateBookUserProfile (payload: any) {
+    const { error } = await useFetch(`${LIKE_CO_API}/likernft/book/user/profile`, {
+      method: 'POST',
+      body: payload,
+      headers: {
+        authorization: `Bearer ${token.value}`
+      }
+    })
+    if (error.value) {
+      throw error.value
+    }
+    bookUser.value = { ...bookUser.value, ...payload }
+    return bookUser.value
+  }
+
+  return {
+    bookUser,
+    fetchBookUserProfile,
+    lazyFetchBookUserProfile,
+    updateBookUserProfile
+  }
+})