feat: open upgrade wizard with href

package.json

@@ -24,7 +24,7 @@
         "@popperjs/core": "^2.11.8",
         "@sentry/svelte": "^7.66.0",
         "@sentry/tracing": "^7.66.0",
-        "@stripe/stripe-js": "^2.2.0",
+        "@stripe/stripe-js": "^3.4.0",
         "ai": "^2.2.11",
         "analytics": "^0.8.9",
         "dayjs": "^1.11.9",

src/lib/components/billing/alerts/limitReached.svelte

@@ -5,10 +5,8 @@
     import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
     import { HeaderAlert } from '$lib/layout';
-    import { readOnly, tierToPlan } from '$lib/stores/billing';
+    import { readOnly, tierToPlan, upgradeURL } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
-    import { wizard } from '$lib/stores/wizard';
-    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
 </script>
 
 {#if $organization?.$id && $organization?.billingPlan === BillingPlan.STARTER && $readOnly && !$page.url.pathname.includes('/console/account')}
@@ -21,14 +19,14 @@
         </svelte:fragment>
         <svelte:fragment slot="buttons">
             <Button
-                href={`${base}/console/organization-${$organization?.$id}/usage`}
+                href={`${base}/console/organization-${$organization.$id}/usage`}
                 text
                 fullWidthMobile>
                 <span class="text">View usage</span>
             </Button>
             <Button
+                href={$upgradeURL}
                 on:click={() => {
-                    wizard.start(ChangeOrganizationTierCloud);
                     trackEvent('click_organization_upgrade', {
                         from: 'button',
                         source: 'limit_reached_banner'

src/lib/components/cardPlanLimit.svelte

@@ -1,16 +1,13 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import { wizard } from '$lib/stores/wizard';
-    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
+    import { upgradeURL } from '$lib/stores/billing';
 
     export let service: string;
 </script>
 
 <article class="card u-grid u-cross-center u-width-full-line">
     <div class="u-flex u-flex-vertical u-gap-24 u-main-center u-cross-center">
         <p class="text u-text-center">Upgrade your plan to add more {service}</p>
-        <Button secondary on:click={() => wizard.start(ChangeOrganizationTierCloud)}>
-            Change plan
-        </Button>
+        <Button secondary href={$upgradeURL}>Change plan</Button>
     </div>
 </article>

src/lib/components/support.svelte

@@ -7,9 +7,9 @@
     import { isCloud } from '$lib/system';
     import { organization } from '$lib/stores/organization';
     import { BillingPlan } from '$lib/constants';
-    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
     import { trackEvent } from '$lib/actions/analytics';
     import { localeTimezoneName, utcHourToLocaleHour } from '$lib/helpers/date';
+    import { upgradeURL } from '$lib/stores/billing';
 
     export let show = false;
 
@@ -33,9 +33,8 @@
         {#if $organization?.billingPlan === BillingPlan.STARTER}
             <Button
                 fullWidth
-                external
+                href={$upgradeURL}
                 on:click={() => {
-                    wizard.start(ChangeOrganizationTierCloud);
                     trackEvent('click_organization_upgrade', {
                         from: 'button',
                         source: 'support_menu'

src/lib/elements/table/body.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
+    import { goto } from '$app/navigation';
     import { trackEvent } from '$lib/actions/analytics';
-    import { getServiceLimit, type PlanServices } from '$lib/stores/billing';
-    import { wizard } from '$lib/stores/wizard';
+    import { getServiceLimit, upgradeURL, type PlanServices } from '$lib/stores/billing';
     import { isCloud } from '$lib/system';
-    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
     import { Button } from '../forms';
 
     let tableBody: HTMLDivElement;
@@ -16,8 +15,10 @@
     let columns = 0;
 
     const limit = getServiceLimit(service) || Infinity;
+
+    // TODO: refactor this to be a string
     const upgradeMethod = () => {
-        wizard.start(ChangeOrganizationTierCloud);
+        goto($upgradeURL);
     };
 
     $: limitReached = limit !== 0 && limit < Infinity && total >= limit;
@@ -38,7 +39,7 @@
                     <span class="text">Upgrade your plan to add {name} to your organization</span>
                     <Button
                         secondary
-                        on:click={upgradeMethod}
+                        href={$upgradeURL}
                         on:click={() =>
                             trackEvent('click_organization_upgrade', {
                                 from: 'button',

src/lib/layout/containerHeader.svelte

@@ -10,15 +10,15 @@
         readOnly,
         showUsageRatesModal,
         tierToPlan,
+        upgradeURL,
         type PlanServices
     } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
-    import { wizard } from '$lib/stores/wizard';
     import { GRACE_PERIOD_OVERRIDE, isCloud } from '$lib/system';
-    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
     import { createEventDispatcher, onMount } from 'svelte';
     import { ContainerButton } from '.';
     import { trackEvent } from '$lib/actions/analytics';
+    import { goto } from '$app/navigation';
 
     export let isFlex = true;
     export let title: string;
@@ -53,9 +53,11 @@
     ];
 
     const limit = getServiceLimit(serviceId) || Infinity;
+
+    //TODO: refactor this to be a string
     const upgradeMethod = () => {
         showDropdown = false;
-        wizard.start(ChangeOrganizationTierCloud);
+        goto($upgradeURL);
     };
     const dispatch = createEventDispatcher();
 
@@ -100,7 +102,7 @@
                     <span class="text">
                         You've reached the {services} limit for the {tier} plan. <Button
                             link
-                            on:click={upgradeMethod}
+                            href={$upgradeURL}
                             on:click={() =>
                                 trackEvent('click_organization_upgrade', {
                                     from: 'button',
@@ -135,7 +137,7 @@
                                 {title.toLocaleLowerCase()} per project on the {tier} plan.
                                 {#if $organization?.billingPlan === BillingPlan.STARTER}<Button
                                         link
-                                        on:click={upgradeMethod}
+                                        href={$upgradeURL}
                                         on:click={() =>
                                             trackEvent('click_organization_upgrade', {
                                                 from: 'button',
@@ -157,7 +159,7 @@
                                 You are limited to {limit}
                                 {title.toLocaleLowerCase()} per organization on the {tier} plan.
                                 {#if $organization?.billingPlan === BillingPlan.STARTER}
-                                    <Button link on:click={upgradeMethod}>Upgrade</Button>
+                                    <Button link href={$upgradeURL}>Upgrade</Button>
                                     for additional {title.toLocaleLowerCase()}.
                                 {/if}
                             </p>

src/lib/layout/header.svelte

@@ -20,10 +20,9 @@
     import { slide } from 'svelte/transition';
     import { sdk } from '$lib/stores/sdk';
     import { isCloud } from '$lib/system';
-    import { wizard } from '$lib/stores/wizard';
     import { Feedback } from '$lib/components/feedback';
-    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
     import { BillingPlan } from '$lib/constants';
+    import { upgradeURL } from '$lib/stores/billing';
 
     let showDropdown = false;
     let showSupport = false;
@@ -106,8 +105,8 @@
         {#if isCloud && $organization?.billingPlan === BillingPlan.STARTER && !$page.url.pathname.startsWith('/console/account')}
             <Button
                 disabled={$organization?.markedForDeletion}
+                href={$upgradeURL}
                 on:click={() => {
-                    wizard.start(ChangeOrganizationTierCloud);
                     trackEvent('click_organization_upgrade', {
                         from: 'button',
                         source: 'top_nav'

src/lib/layout/logs.svelte

@@ -14,9 +14,7 @@
     import { beforeNavigate } from '$app/navigation';
     import { Pill } from '$lib/elements';
     import { isCloud } from '$lib/system';
-    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
-    import { wizard } from '$lib/stores/wizard';
-    import { getServiceLimit, tierToPlan } from '$lib/stores/billing';
+    import { getServiceLimit, tierToPlan, upgradeURL } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { app } from '$lib/stores/app';
     import { Button } from '$lib/elements/forms';
@@ -313,12 +311,8 @@
                                             Logs are retained in rolling {hoursToDays(limit)} intervals
                                             with the {tier} plan.
                                             {#if $organization.billingPlan === BillingPlan.STARTER}
-                                                <Button
-                                                    link
-                                                    on:click={() =>
-                                                        wizard.start(ChangeOrganizationTierCloud)}
-                                                    >Upgrade</Button> to increase your log retention
-                                                for a longer period.
+                                                <Button link href={$upgradeURL}>Upgrade</Button> to increase
+                                                your log retention for a longer period.
                                             {/if}
                                         </Alert>
                                     {/if}

src/lib/layout/navigation.svelte

@@ -6,10 +6,10 @@
     import { BillingPlan } from '$lib/constants';
     import { isMac } from '$lib/helpers/platform';
     import { slide } from '$lib/helpers/transition';
+    import { upgradeURL } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { wizard } from '$lib/stores/wizard';
     import { isCloud } from '$lib/system';
-    import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
     import Create from '$routes/console/feedbackWizard.svelte';
     import { showSupportModal } from '$routes/console/wizard/support/store';
 
@@ -200,11 +200,9 @@
                     <ul class="drop-list is-only-mobile">
                         {#if isCloud && $organization?.billingPlan !== BillingPlan.SCALE}
                             <li class="drop-list-item">
-                                <button
-                                    class="drop-button"
-                                    on:click={() => wizard.start(ChangeOrganizationTierCloud)}>
+                                <a class="drop-button" href={$upgradeURL}>
                                     <span class="text">Upgrade</span>
-                                </button>
+                                </a>
                             </li>
                         {/if}
                         <li class="drop-list-item">

src/lib/stores/billing.ts

@@ -24,8 +24,6 @@ import { BillingPlan } from '$lib/constants';
 import PaymentMandate from '$lib/components/billing/alerts/paymentMandate.svelte';
 import MissingPaymentMethod from '$lib/components/billing/alerts/missingPaymentMethod.svelte';
 import LimitReached from '$lib/components/billing/alerts/limitReached.svelte';
-import { wizard } from './wizard';
-import ChangeOrganizationTierCloud from '$routes/console/changeOrganizationTierCloud.svelte';
 import { trackEvent } from '$lib/actions/analytics';
 
 export type Tier = 'tier-0' | 'tier-1' | 'tier-2';
@@ -239,7 +237,7 @@ export async function checkForUsageLimit(org: Organization) {
                 {
                     name: 'Upgrade plan',
                     method: () => {
-                        wizard.start(ChangeOrganizationTierCloud);
+                        goto(`${base}/console/organization-${org.$id}/change-plan`);
                         trackEvent('click_organization_upgrade', {
                             from: 'button',
                             source: 'limit_reached_notification'
@@ -364,3 +362,8 @@ export async function checkForMissingPaymentMethod() {
         });
     }
 }
+
+export const upgradeURL = derived(
+    page,
+    ($page) => `${base}/console/organization-${$page.data?.organization?.$id}/change-plan`
+);