From 87245e458971b51982bfc7e47e111d2434773791 Mon Sep 17 00:00:00 2001
From: Jarsen <31397967+Jarsen136@users.noreply.github.com>
Date: Tue, 30 Jul 2024 13:14:45 +0200
Subject: [PATCH] feat: Profiles: Popup to create profile

---
 .../carousel/CarouselTypeGenerative.vue       | 23 +++++++++----
 components/landing/LandingPage.vue            | 15 +++++++++
 components/navbar/ProfileDropdown.vue         |  2 ++
 components/profile/ProfileDetail.vue          | 20 ++++++------
 components/profile/create/Modal.vue           | 14 +++++---
 components/profile/create/openProfileModal.ts |  5 ++-
 components/profile/create/stages/Success.vue  |  7 +++-
 composables/useFetchProfile.ts                |  2 +-
 composables/useProfile.ts                     |  2 +-
 stores/profileOnboarding.ts                   | 32 +++++++++++++++++++
 10 files changed, 94 insertions(+), 28 deletions(-)
 create mode 100644 stores/profileOnboarding.ts

diff --git a/components/carousel/CarouselTypeGenerative.vue b/components/carousel/CarouselTypeGenerative.vue
index 66cb0db519..9218825bdc 100644
--- a/components/carousel/CarouselTypeGenerative.vue
+++ b/components/carousel/CarouselTypeGenerative.vue
@@ -1,14 +1,25 @@
 <template>
-  <CarouselIndex
-    data-testid="generative-activity"
-    :title="$t('general.generativeArt')"
-    :nfts="nfts.value"
-    action-type="pagination"
-  />
+  <div ref="carouselDrop">
+    <CarouselIndex
+      data-testid="generative-activity"
+      :title="$t('general.generativeArt')"
+      :nfts="nfts.value"
+      action-type="pagination"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>
+import { useElementVisibility } from '@vueuse/core'
 import { useCarouselGenerativeNftEvents } from './utils/useCarouselEvents'
+import { useProfileOnboardingStore } from '@/stores/profileOnboarding'
 
 const nfts = useCarouselGenerativeNftEvents()
+const carouselDrop = ref()
+
+watch([useElementVisibility(carouselDrop)], ([isVisible]) => {
+  if (isVisible) {
+    useProfileOnboardingStore().setCarouselVisited()
+  }
+})
 </script>
diff --git a/components/landing/LandingPage.vue b/components/landing/LandingPage.vue
index 4de8379a1e..4530f2d0a8 100644
--- a/components/landing/LandingPage.vue
+++ b/components/landing/LandingPage.vue
@@ -37,11 +37,15 @@
 
 <script lang="ts" setup>
 import type { Prefix } from '@kodadot1/static'
+import { openProfileCreateModal } from '@/components/profile/create/openProfileModal'
+import { useProfileOnboardingStore } from '@/stores/profileOnboarding'
 
 const hiddenCarrouselPrefixes: Prefix[] = ['dot']
 const forbiddenPrefixesForTopCollections: Prefix[] = ['ksm', 'dot', 'imx']
 
 const { urlPrefix } = usePrefix()
+const profileOnboardingStore = useProfileOnboardingStore()
+const { hasProfile } = useProfile()
 
 // currently only supported on rmrk
 const showCarousel = computed(
@@ -50,4 +54,15 @@ const showCarousel = computed(
 const showTopCollections = computed(
   () => !forbiddenPrefixesForTopCollections.includes(urlPrefix.value),
 )
+
+watchEffect(() => {
+  if (!hasProfile.value && profileOnboardingStore.getShouldShowOnboarding) {
+    profileOnboardingStore.setOnboardingShown()
+
+    // delay to show onboarding modal to avoid disturbing the user
+    setTimeout(() => {
+      openProfileCreateModal()
+    }, 2000)
+  }
+})
 </script>
diff --git a/components/navbar/ProfileDropdown.vue b/components/navbar/ProfileDropdown.vue
index f707657b7c..868eb72ed0 100644
--- a/components/navbar/ProfileDropdown.vue
+++ b/components/navbar/ProfileDropdown.vue
@@ -98,6 +98,7 @@ import {
 } from '@/utils/config/i18n'
 import { ConnectWalletModalConfig } from '@/components/common/ConnectWallet/useConnectWallet'
 import ConnectWalletButton from '@/components/shared/ConnectWalletButton.vue'
+import { useProfileOnboardingStore } from '@/stores/profileOnboarding'
 
 const identityStore = useIdentityStore()
 const { isDarkMode } = useTheme()
@@ -113,6 +114,7 @@ const profileIcon = computed(() =>
 const langsFlags = computed(() => langsFlagsList)
 
 const toggleWalletConnectModal = () => {
+  useProfileOnboardingStore().setSidebarToggled()
   neoModal.closeAll()
 
   if (!document.querySelector('.connect-wallet-modal')) {
diff --git a/components/profile/ProfileDetail.vue b/components/profile/ProfileDetail.vue
index 11e421ccf5..549d7caa90 100644
--- a/components/profile/ProfileDetail.vue
+++ b/components/profile/ProfileDetail.vue
@@ -1,10 +1,5 @@
 <template>
   <div>
-    <ProfileCreateModal
-      v-model="isModalActive"
-      @success="fetchProfile"
-      @deleted="fetchProfile"
-    />
     <ProfileFollowModal
       :key="`${followersCount}-${followingCount}`"
       v-model="isFollowModalActive"
@@ -500,11 +495,9 @@ const { isRemark, isSub } = useIsChain(urlPrefix)
 const listingCartStore = useListingCartStore()
 const { vm } = useChain()
 
-const { hasProfile, userProfile, fetchProfile, isFetchingProfile }
+const { hasProfile, userProfile, isFetchingProfile }
   = useProfile()
 
-provide('userProfile', { hasProfile, userProfile })
-
 const { data: followers, refresh: refreshFollowers } = useAsyncData(
   `followersof${route.params.id}`,
   () =>
@@ -529,14 +522,14 @@ const followingCount = computed(() => following.value?.totalCount ?? 0)
 const editProfileConfig: ButtonConfig = {
   label: $i18n.t('profile.editProfile'),
   icon: 'pen',
-  onClick: () => (isModalActive.value = true),
+  onClick: () => openProfileCreateModal(true),
   classes: 'hover:!bg-transparent',
 }
 
 const createProfileConfig: ButtonConfig = {
   label: $i18n.t('profile.createProfile'),
   icon: 'sparkles',
-  onClick: () => (isModalActive.value = true),
+  onClick: () => openProfileCreateModal(true),
   variant: 'primary',
 }
 
@@ -555,7 +548,6 @@ const displayName = ref('')
 const web = ref('')
 const legal = ref('')
 const riot = ref('')
-const isModalActive = ref(false)
 const isFollowModalActive = ref(false)
 const followModalTab = ref<'followers' | 'following'>('followers')
 const collections = ref(
@@ -791,6 +783,12 @@ watch(collections, (value) => {
     collections: value.length ? value.toString() : undefined,
   })
 })
+
+onMounted(() => {
+  if (!hasProfile.value && isOwner.value) {
+    openProfileCreateModal()
+  }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/components/profile/create/Modal.vue b/components/profile/create/Modal.vue
index 5bfadd0bf4..8676f6b47c 100644
--- a/components/profile/create/Modal.vue
+++ b/components/profile/create/Modal.vue
@@ -63,21 +63,22 @@ import { appClient, createChannel } from '@/services/farcaster'
 
 const emit = defineEmits(['close', 'success', 'deleted'])
 const props = defineProps<{
-  modelValue: boolean
+  skipIntro?: boolean
 }>()
 
 const documentVisibility = useDocumentVisibility()
 const { $i18n } = useNuxtApp()
 const { accountId } = useAuth()
+const { fetchProfile } = useProfile()
 
-const profile = inject<{ hasProfile: Ref<boolean> }>('userProfile')
+const { hasProfile, userProfile } = useProfile()
 
-const hasProfile = computed(() => profile?.hasProfile.value)
+provide('userProfile', { hasProfile, userProfile })
 
-const initialStep = computed(() => (hasProfile.value ? 2 : 1))
+const initialStep = computed(() => (props.skipIntro || hasProfile.value ? 2 : 1))
 
 const { getSignaturePair } = useVerifyAccount()
-const vOpen = useVModel(props, 'modelValue')
+const vOpen = ref(true)
 const stage = ref(initialStep.value)
 const farcasterUserData = ref<StatusAPIResponse>()
 const useFarcaster = ref(false)
@@ -165,6 +166,7 @@ const handleProfileDelete = async (address: string) => {
       title: $i18n.t('profiles.profileReset'),
     })
     emit('deleted')
+    fetchProfile()
     close()
   }
   catch (error) {
@@ -178,6 +180,8 @@ const handleFormSubmition = async (profileData: ProfileFormData) => {
   try {
     await processProfile(profileData)
     emit('success')
+
+    fetchProfile()
     stage.value = 5 // Go to success stage
   }
   catch (error) {
diff --git a/components/profile/create/openProfileModal.ts b/components/profile/create/openProfileModal.ts
index f6b1069bfd..9997426817 100644
--- a/components/profile/create/openProfileModal.ts
+++ b/components/profile/create/openProfileModal.ts
@@ -7,16 +7,15 @@ export const ProfileCreateModalConfig = {
   trapFocus: false,
 }
 
-export const openProfileCreateModal = (config = {}) => {
+export const openProfileCreateModal = (skipIntro: boolean = false) => {
   const { neoModal } = useProgrammatic()
 
   neoModal.closeAll()
 
   return neoModal.open({
     ...ProfileCreateModalConfig,
-    ...config,
     innerProps: {
-      value: true,
+      skipIntro,
     },
   })
 }
diff --git a/components/profile/create/stages/Success.vue b/components/profile/create/stages/Success.vue
index 81ebd5f1b1..ee535136d8 100644
--- a/components/profile/create/stages/Success.vue
+++ b/components/profile/create/stages/Success.vue
@@ -33,6 +33,8 @@
       <NeoButton
         class="min-[400px]:!w-[150px] !w-full"
         variant="primary-rounded"
+        :tag="NuxtLink"
+        :to="profileUrl"
         :label="'Go To Profile'"
         @click="emit('close')"
       />
@@ -43,7 +45,10 @@
 <script setup lang="ts">
 import { NeoButton, NeoIcon } from '@kodadot1/brick'
 
+const NuxtLink = resolveComponent('NuxtLink')
+const { urlPrefix } = usePrefix()
+const { accountId } = useAuth()
 const emit = defineEmits(['close'])
 
-const profileUrl = window.location.href
+const profileUrl = computed(() => `/${urlPrefix.value}/u/${accountId.value}`)
 </script>
diff --git a/composables/useFetchProfile.ts b/composables/useFetchProfile.ts
index 204fa33272..c4f1cbe0ae 100644
--- a/composables/useFetchProfile.ts
+++ b/composables/useFetchProfile.ts
@@ -14,7 +14,7 @@ export default function useFetchProfile(address?: string) {
       computed(() => address && toSubstrateAddress(address)),
     ],
     queryFn: () => (address ? fetchProfileByAddress(address!) : null),
-    staleTime: 1000 * 60 * 5,
+    staleTime: 1000 * 10,
   })
 
   return {
diff --git a/composables/useProfile.ts b/composables/useProfile.ts
index dcc85d4309..f0146acb88 100644
--- a/composables/useProfile.ts
+++ b/composables/useProfile.ts
@@ -14,7 +14,7 @@ export default function useUserProfile() {
   } = useFetchProfile(params?.id as string)
 
   return {
-    hasProfile: computed(() => !!profile.value),
+    hasProfile: computed(() => isLoading.value || !!profile.value),
     userProfile: profile,
     fetchProfile,
     isFetchingProfile: isLoading,
diff --git a/stores/profileOnboarding.ts b/stores/profileOnboarding.ts
new file mode 100644
index 0000000000..e1da0d8244
--- /dev/null
+++ b/stores/profileOnboarding.ts
@@ -0,0 +1,32 @@
+import { defineStore } from 'pinia'
+
+export interface ProfileOnboardingState {
+  onboardingShown: boolean
+  sidebarToggled: boolean
+  carouselVisited: boolean
+}
+
+export const useProfileOnboardingStore = defineStore('profileOnboarding', {
+  state: (): ProfileOnboardingState => ({
+    onboardingShown: false,
+    sidebarToggled: false,
+    carouselVisited: false,
+  }),
+  getters: {
+    getShouldShowOnboarding: (state) => {
+      const { accountId } = useAuth()
+      return accountId.value && !state.onboardingShown && state.sidebarToggled && state.carouselVisited
+    },
+  },
+  actions: {
+    setOnboardingShown() {
+      this.onboardingShown = true
+    },
+    setSidebarToggled() {
+      this.sidebarToggled = true
+    },
+    setCarouselVisited() {
+      this.carouselVisited = true
+    },
+  },
+})