Pricing Upgrade Flow changes (#514)

* Pricing Upgrade Flow changes

* remove extra code

* Refactor subscription plan selection and billing management

* Polish the new pricing modal

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/pages/subscriptions/error.vue

@@ -1,34 +1,14 @@
-<template />
+<script setup>
+import { useBroadcastChannel } from '@vueuse/core'
 
-<script>
-import { computed } from "vue"
-import { useAuthStore } from "../../stores/auth"
+definePageMeta({
+  middleware: 'auth'
+})
 
-export default {
-  components: {},
-  layout: "default",
-  middleware: "auth",
+const subscribeBroadcast = useBroadcastChannel('subscribe')
 
-  setup() {
-    useOpnSeoMeta({
-      title: "Error",
-    })
-
-    const authStore = useAuthStore()
-    return {
-      authenticated: computed(() => authStore.check),
-    }
-  },
-
-  data: () => ({}),
-
-  computed: {},
-
-  mounted() {
-    this.$router.push({ name: "pricing" })
-    useAlert().error(
-      "Unfortunately we could not confirm your subscription. Please try again and contact us if the issue persists.",
-    )
-  },
-}
-</script>
+onMounted(() => {
+  subscribeBroadcast.post({ 'type': 'error' })
+  window.close()
+})
+</script>

client/pages/subscriptions/success.vue

@@ -17,86 +17,55 @@
   </div>
 </template>
 
-<script>
-import {computed} from "vue"
-import {useAuthStore} from "../../stores/auth"
 
-export default {
-  layout: "default",
-  middleware: "auth",
+<script setup>
+import { useBroadcastChannel } from '@vueuse/core'
 
-  setup() {
-    useOpnSeoMeta({
-      title: "Subscription Success",
-    })
+definePageMeta({
+  middleware: 'auth'
+})
 
-    const authStore = useAuthStore()
-    const confetti = useConfetti()
-    return {
-      authStore,
-      confetti,
-      authenticated: computed(() => authStore.check),
-      user: computed(() => authStore.user),
-      crisp: useCrisp(),
-    }
-  },
+useOpnSeoMeta({
+  title: 'Subscription Success'
+})
 
-  data: () => ({
-    interval: null,
-  }),
+const authStore = useAuthStore()
+const confetti = useConfetti()
+const user = computed(() => authStore.user)
+const subscribeBroadcast = useBroadcastChannel('subscribe')
 
-  computed: {},
+const interval = ref(null)
 
-  mounted() {
-    this.redirectIfSubscribed()
-    this.interval = setInterval(() => this.checkSubscription(), 5000)
-  },
-
-  beforeUnmount() {
-    clearInterval(this.interval)
-  },
-  unmounted() {
-    // stop confettis after 2 sec
-    setTimeout(() => {
-      this.confetti.stop()
-    }, 2000)
-  },
-
-  methods: {
-    async checkSubscription() {
-      // Fetch the user.
-      await this.authStore.fetchUser()
-      this.redirectIfSubscribed()
-    },
-    redirectIfSubscribed() {
-      if (this.user.is_subscribed) {
-        useAmplitude().logEvent("subscribed", {
-          plan: "pro",
-        })
-        this.crisp.pushEvent("subscribed", {
-          plan: "pro",
-        })
-        try {
-          useGtm().trackEvent({event: 'subscribed'})
-        } catch (error) {
-          console.error(error)
-        }
-        this.confetti.play()
-        this.$router.push({name: "home"})
-
-        if (this.user.has_enterprise_subscription) {
-          useAlert().success(
-            "Awesome! Your subscription to OpnForm is now confirmed! You now have access to all Enterprise " +
-            "features. No need to invite your teammates, just ask them to create a OpnForm account and to connect the same Notion workspace. Feel free to contact us if you have any question 🙌",
-          )
-        } else {
-          useAlert().success(
-            "Awesome! Your subscription to OpnForm is now confirmed! You now have access to all Pro " +
-            "features. Feel free to contact us if you have any question 🙌",
-          )
-        }
-      }
-    },
+const redirectIfSubscribed = () => {
+  if (user.value.is_subscribed) {
+    subscribeBroadcast.post({ 'type': 'success' })
+    window.close()
   }
 }
-</script>
+const checkSubscription = () => {
+  // Fetch the user.
+  return noteFormsFetch('user').then((data) => {
+    authStore.setUser(data)
+    redirectIfSubscribed()
+  }).catch((error) => {
+    console.error(error)
+    clearInterval(interval.value)
+  })
+}
+
+onMounted(() => {
+  redirectIfSubscribed()
+  interval.value = setInterval(() => checkSubscription(), 5000)
+})
+
+onBeforeUnmount(() => {
+  clearInterval(interval.value)
+})
+
+onUnmounted(() => {
+  // stop confettis after 2 sec
+  setTimeout(() => {
+    confetti.stop()
+  }, 2000)
+})
+</script>