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/components/open/forms/components/FormStats.vue

@@ -9,7 +9,10 @@
       <div class="absolute inset-0 z-10">
         <div class="p-5 max-w-md mx-auto mt-5">
           <p class="text-center">
-            You need a <pro-tag class="mx-1" /> subscription to access your form
+            You need a <pro-tag
+              upgrade-modal-title="Upgrade today to access form analytics"
+              class="mx-1"
+            /> subscription to access your form
             analytics.
           </p>
           <p class="mt-5 text-center">

client/components/open/forms/components/form-components/FormCustomization.vue

@@ -149,12 +149,16 @@
     <toggle-switch-input
       name="no_branding"
       :form="form"
+      @update:model-value="onChangeNoBranding"
     >
       <template #label>
         <span class="text-sm">
           Remove OpnForm Branding
         </span>
-        <pro-tag class="-mt-1" />
+        <pro-tag
+          upgrade-modal-title="Upgrade today to remove OpnForm branding"
+          class="-mt-1"
+        />
       </template>
     </toggle-switch-input>
     <toggle-switch-input
@@ -200,22 +204,44 @@ import GoogleFontPicker from "../../../editors/GoogleFontPicker.vue"
 import ProTag from "~/components/global/ProTag.vue"
 
 const workingFormStore = useWorkingFormStore()
+const subscriptionModalStore = useSubscriptionModalStore()
+const authStore = useAuthStore()
+const workspacesStore = useWorkspacesStore()
 const form = storeToRefs(workingFormStore).content
 const isMounted = ref(false)
 const confetti = useConfetti()
 const showGoogleFontPicker = ref(false)
 
+const user = computed(() => authStore.user)
+const workspace = computed(() => workspacesStore.getCurrent)
+
+const isPro = computed(() => {
+  if (!useRuntimeConfig().public.paidPlansEnabled) return true
+  if (!user.value || !workspace.value) return false
+  return workspace.value.is_pro
+})
+
 onMounted(() => {
   isMounted.value = true
 })
 
 const onChangeConfettiOnSubmission = (val) => {
-  form.confetti_on_submission = val
   if (isMounted.value && val) {
     confetti.play()
   }
 }
 
+const onChangeNoBranding = (val) => {
+  if (!isPro.value && val) {
+    subscriptionModalStore.setModalContent("Upgrade today to remove OpnForm branding")
+    subscriptionModalStore.openModal()
+    setTimeout(() => {
+      form.value.no_branding = false
+      console.log("form.value.no_branding", form.value.no_branding)
+    }, 300)
+  } 
+}
+
 const onApplyFont = (val) => {
   form.value.font_family = val
   showGoogleFontPicker.value = false

client/components/open/integrations/components/IntegrationListOption.vue

@@ -8,7 +8,7 @@
       role="button"
       :class="{
         'hover:bg-blue-50 group cursor-pointer': !unavailable,
-        'cursor-not-allowed': unavailable,
+        'cursor-not-allowed': integration.coming_soon,
       }"
       class="bg-gray-50 border border-gray-200 rounded-md transition-colors p-4 pb-2 items-center justify-center w-[170px] h-[110px] flex flex-col relative"
       @click="onClick"
@@ -49,8 +49,9 @@
 <script setup>
 import { computed } from 'vue'
 import { useWorkspacesStore } from '@/stores/workspaces'
-
 const emit = defineEmits(["select"])
+const subscriptionModalStore = useSubscriptionModalStore()
+
 const props = defineProps({
   integration: {
     type: Object,
@@ -76,7 +77,15 @@ const tooltipText = computed(() => {
 })
 
 const onClick = () => {
-  if (unavailable.value) return
+  if (props.integration.coming_soon) return
+  if (props.integration.requires_subscription && !currentWorkspace.value.is_pro ) {
+    subscriptionModalStore.setModalContent(
+      'Upgrade today to use this integration',
+      `Upgrade your account to use "${props.integration.name}" and unlock all of our Pro features.`
+    )
+    subscriptionModalStore.openModal()
+    return
+  }
   emit("select", props.integration.id)
 }
 </script>