feat: more of the flow and fixes

src/platform/cloud/subscription/components/SubscriptionPanelContent.vue

@@ -16,7 +16,7 @@
             <Button
               variant="primary"
               class="ml-auto rounded-lg px-4 py-2 text-sm font-normal"
-              @click="showSubscriptionDialog"
+              @click="handleSubscribeWorkspace"
             >
               {{ $t('subscription.subscribeNow') }}
             </Button>
@@ -259,7 +259,12 @@ import { useWorkspace } from '@/platform/workspace/composables/useWorkspace'
 import { cn } from '@/utils/tailwindUtil'
 
 const authActions = useFirebaseAuthActions()
-const { permissions, isWorkspaceSubscribed, workspaceRole } = useWorkspace()
+const {
+  permissions,
+  isWorkspaceSubscribed,
+  workspaceRole,
+  subscribeWorkspace
+} = useWorkspace()
 const { t, n } = useI18n()
 
 // OWNER with unsubscribed workspace
@@ -267,6 +272,11 @@ const isOwnerUnsubscribed = computed(
   () => workspaceRole.value === 'OWNER' && !isWorkspaceSubscribed.value
 )
 
+// Demo: Subscribe workspace to PRO monthly plan
+function handleSubscribeWorkspace() {
+  subscribeWorkspace('PRO_MONTHLY')
+}
+
 const {
   isActiveSubscription,
   isCancelled,