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/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>