@nebulr-group/bridge-svelte 0.4.0-beta.9 → 0.4.1

package/dist/client/components/subscription/PlanSelector.svelte

@@ -91,12 +91,44 @@
       : (availableIntervals[0] ?? defaultInterval);
   });
 
-  // Prices to show for a plan under the active tab: the matching interval, plus
-  // any free (amount-0) prices which apply regardless of interval.
+  // Prices to show for a plan under the active tab — at most ONE, because each
+  // price renders its own select button.
+  //
+  // The previous filter was `p.amount === 0 || p.recurrenceInterval === selected`,
+  // where the zero-amount test short-circuited the interval test. A free plan
+  // defining both `0/month` and `0/year` therefore matched twice and rendered two
+  // identical "Select free plan" buttons — visible on The Bridge's own /plan page,
+  // whose free plan ("Startup") carries a zero price per interval.
+  //
+  // The intent behind that clause was that a free plan stays selectable under
+  // every tab, which is preserved below: prefer the active interval's price, and
+  // fall back to a free price from any interval so a free-on-yearly-only plan
+  // doesn't render as "Not available monthly".
   function pricesForInterval(plan: Plan): PriceOfferSdk[] {
-    return plan.prices.filter(
-      (p) => p.amount === 0 || p.recurrenceInterval === selectedInterval,
-    );
+    const exact = plan.prices.filter((p) => p.recurrenceInterval === selectedInterval);
+    if (exact.length > 0) return exact;
+
+    const free = plan.prices.find((p) => p.amount === 0);
+    return free ? [free] : [];
+  }
+
+  // Cheapest first. The API returns plans in catalog insertion order, which on
+  // prod is growth → starter → free — putting the free plan last, below the most
+  // expensive one.
+  //
+  // The sort key is each plan's cheapest price across ALL intervals, not the
+  // active interval's, so the order stays put when the user toggles
+  // Monthly/Yearly. A plan's tier is a property of the plan; cards reshuffling
+  // under the cursor on a tab switch is worse than the edge case it would fix
+  // (a catalog whose yearly ranking inverts its monthly one). Plans with no
+  // price sort last rather than being treated as free.
+  const sortedPlans = $derived(
+    [...(plans ?? [])].sort((a, b) => minAmount(a) - minAmount(b)),
+  );
+
+  function minAmount(plan: Plan): number {
+    const amounts = (plan.prices ?? []).map((p) => p.amount);
+    return amounts.length > 0 ? Math.min(...amounts) : Number.POSITIVE_INFINITY;
   }
 
   type UiState = 'idle' | 'payment-failed' | 'setup-payments' | 'select-plan' | 'active' | 'trial';
@@ -292,7 +324,7 @@
       {/if}
 
       <div class="bridge-plan-cards" data-bridge-plan-cards>
-        {#each plans as plan (plan.key)}
+        {#each sortedPlans as plan (plan.key)}
           {@const isCurrent = plan.key === currentPlanKey}
           {@const onPick = (price: PriceOfferSdk) => handlePick(plan, price)}
           {@const visiblePrices = pricesForInterval(plan)}

package/dist/client/components/subscription/billing-manage-route.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/client/components/subscription/billing-manage-route.test.js

@@ -0,0 +1,258 @@
+// Billing CTA destination — config-driven manage route (TBP-451 / S1).
+//
+// Under test: the destination precedence shared by <BridgeBillingNotice> and
+// <BridgeQuotaBanner>:
+//
+//   onActionClick callback  (highest — short-circuits, no navigation at all)
+//     → `actionHref` prop
+//       → getConfig().billing?.manageRoute
+//         → '/billing'                                          (default)
+//
+// HARNESS NOTE: bridge-svelte's vitest config (vitest.config.ts) runs in a
+// `node` environment with no Svelte compiler plugin and no DOM (jsdom /
+// happy-dom / @testing-library/svelte are NOT installed anywhere in the
+// workspace), so neither component can be mounted here. Following the
+// established pattern in billing-notice-gate.test.ts and plan-selector.test.ts,
+// this file exercises an EXACT replica of the components' `handleAction()`
+// script-block logic, with the external singletons (`getConfig` from
+// config.store.js and `window.location`) injected as mocks instead of
+// module-mocking them.
+//
+// The replicas below mirror, line for line:
+//   - BridgeBillingNotice.svelte  `function handleAction()`
+//   - BridgeQuotaBanner.svelte    `function handleAction()`
+//
+// The two differ only in (a) the argument handed to `onActionClick`
+// (BillingNoticeState vs QuotaSnapshot) and (b) the quota banner's
+// `if (!snapshot) return;` guard. The destination resolution is byte-identical
+// and MUST stay that way — the "both components agree" block below is the
+// regression guard for that.
+//
+// If either component's handleAction changes, update the replica here to
+// match — a drift between the two is a test bug, not a component bug.
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+const configWith = (manageRoute) => () => manageRoute === undefined ? {} : { billing: { manageRoute } };
+const uninitializedConfig = () => {
+    throw new Error('Config has not been initialized. Call  initConfig(...) early in app startup.');
+};
+/** Config initialized, but the app never declared a `billing` block. */
+const configWithoutBillingBlock = () => ({});
+function makeNoticeHarness(opts = {}) {
+    const { getConfig = uninitializedConfig, actionHref, onActionClick, hasWindow = true, } = opts;
+    // Records every write to `window.location.href`.
+    const navigations = [];
+    const noticeState = 'past_due';
+    function handleAction() {
+        if (onActionClick) {
+            onActionClick(noticeState);
+            return;
+        }
+        // Default: open the app's billing surface. Destination priority:
+        // `actionHref` prop → `billing.manageRoute` config → '/billing'.
+        if (hasWindow) {
+            let manageRoute;
+            try {
+                manageRoute = getConfig().billing?.manageRoute;
+            }
+            catch {
+                // Config not initialized — fall through to the default.
+            }
+            navigations.push(actionHref ?? manageRoute ?? '/billing');
+        }
+    }
+    return { handleAction, navigations, noticeState };
+}
+function makeQuotaHarness(opts = {}) {
+    const { getConfig = uninitializedConfig, actionHref, onActionClick, hasWindow = true, snapshot = { metric: 'ai_completions' }, } = opts;
+    const navigations = [];
+    function handleAction() {
+        if (!snapshot)
+            return;
+        if (onActionClick) {
+            onActionClick(snapshot);
+            return;
+        }
+        // Destination priority: `actionHref` prop → `billing.manageRoute` config
+        // → '/billing'.
+        if (hasWindow) {
+            let manageRoute;
+            try {
+                manageRoute = getConfig().billing?.manageRoute;
+            }
+            catch {
+                // Config not initialized — fall through to the default.
+            }
+            navigations.push(actionHref ?? manageRoute ?? '/billing');
+        }
+    }
+    return { handleAction, navigations, snapshot };
+}
+/** The two harnesses, keyed by component, for the shared-behaviour table. */
+const HARNESSES = {
+    BridgeBillingNotice: makeNoticeHarness,
+    BridgeQuotaBanner: (opts) => makeQuotaHarness(opts),
+};
+const COMPONENTS = Object.keys(HARNESSES);
+// ── Tests ────────────────────────────────────────────────────────────────────
+describe('Billing CTA manage-route precedence (TBP-451)', () => {
+    beforeEach(() => {
+        vi.restoreAllMocks();
+    });
+    describe.each(COMPONENTS)('%s', (component) => {
+        const harness = HARNESSES[component];
+        describe("default — '/billing'", () => {
+            it('navigates to /billing when config is uninitialized and no props are given', () => {
+                const h = harness({ getConfig: uninitializedConfig });
+                h.handleAction();
+                expect(h.navigations).toEqual(['/billing']);
+            });
+            it('navigates to /billing when config is loaded but has no billing block', () => {
+                const h = harness({ getConfig: configWithoutBillingBlock });
+                h.handleAction();
+                expect(h.navigations).toEqual(['/billing']);
+            });
+            it('navigates to /billing when billing exists but manageRoute is unset', () => {
+                const h = harness({ getConfig: () => ({ billing: {} }) });
+                h.handleAction();
+                expect(h.navigations).toEqual(['/billing']);
+            });
+        });
+        describe('config — billing.manageRoute', () => {
+            it('honors the configured manageRoute over the built-in default', () => {
+                const h = harness({ getConfig: configWith('/settings/billing') });
+                h.handleAction();
+                expect(h.navigations).toEqual(['/settings/billing']);
+            });
+            it('honors an absolute manageRoute URL verbatim', () => {
+                const h = harness({ getConfig: configWith('https://billing.example.com/portal') });
+                h.handleAction();
+                expect(h.navigations).toEqual(['https://billing.example.com/portal']);
+            });
+            it('reads the config on every click, so a later initConfig is picked up', () => {
+                let manageRoute;
+                const h = harness({ getConfig: () => ({ billing: { manageRoute } }) });
+                h.handleAction(); // config not yet carrying a route
+                manageRoute = '/settings/billing';
+                h.handleAction(); // same component instance, config now set
+                expect(h.navigations).toEqual(['/billing', '/settings/billing']);
+            });
+        });
+        describe('actionHref prop', () => {
+            it('overrides the configured manageRoute', () => {
+                const h = harness({
+                    getConfig: configWith('/settings/billing'),
+                    actionHref: '/team/upgrade',
+                });
+                h.handleAction();
+                expect(h.navigations).toEqual(['/team/upgrade']);
+            });
+            it('overrides the default when no config is available at all', () => {
+                const h = harness({ getConfig: uninitializedConfig, actionHref: '/team/upgrade' });
+                h.handleAction();
+                expect(h.navigations).toEqual(['/team/upgrade']);
+            });
+        });
+        describe('onActionClick callback (highest precedence)', () => {
+            it('wins over both actionHref and config, and performs NO navigation', () => {
+                const onActionClick = vi.fn();
+                const h = harness({
+                    getConfig: configWith('/settings/billing'),
+                    actionHref: '/team/upgrade',
+                    onActionClick,
+                });
+                h.handleAction();
+                expect(onActionClick).toHaveBeenCalledOnce();
+                expect(h.navigations).toEqual([]);
+            });
+            it('wins even with no other destination configured', () => {
+                const onActionClick = vi.fn();
+                const h = harness({ getConfig: uninitializedConfig, onActionClick });
+                h.handleAction();
+                expect(onActionClick).toHaveBeenCalledOnce();
+                expect(h.navigations).toEqual([]);
+            });
+            it('never touches getConfig when the callback short-circuits', () => {
+                const getConfig = vi.fn(configWith('/settings/billing'));
+                const h = harness({ getConfig, onActionClick: vi.fn() });
+                h.handleAction();
+                expect(getConfig).not.toHaveBeenCalled();
+            });
+        });
+        describe('SSR guard', () => {
+            it('does not navigate when there is no window (typeof window === undefined)', () => {
+                const h = harness({ getConfig: configWith('/settings/billing'), hasWindow: false });
+                h.handleAction();
+                expect(h.navigations).toEqual([]);
+            });
+        });
+    });
+    // ── Cross-component agreement ──────────────────────────────────────────────
+    //
+    // The whole point of S1 is that an app configures `billing.manageRoute` ONCE
+    // and both CTAs obey it. This block fails the moment the two handlers drift.
+    describe('BridgeBillingNotice and BridgeQuotaBanner resolve identically', () => {
+        const cases = [
+            {
+                label: 'no config, no props → /billing',
+                opts: { getConfig: uninitializedConfig },
+                expected: ['/billing'],
+            },
+            {
+                label: 'config manageRoute only',
+                opts: { getConfig: configWith('/settings/billing') },
+                expected: ['/settings/billing'],
+            },
+            {
+                label: 'actionHref beats config',
+                opts: { getConfig: configWith('/settings/billing'), actionHref: '/team/upgrade' },
+                expected: ['/team/upgrade'],
+            },
+            {
+                label: 'actionHref with no config',
+                opts: { getConfig: uninitializedConfig, actionHref: '/team/upgrade' },
+                expected: ['/team/upgrade'],
+            },
+            {
+                label: 'no window → no navigation',
+                opts: { getConfig: configWith('/settings/billing'), hasWindow: false },
+                expected: [],
+            },
+        ];
+        it.each(cases)('$label', ({ opts, expected }) => {
+            const notice = makeNoticeHarness(opts);
+            const quota = makeQuotaHarness(opts);
+            notice.handleAction();
+            quota.handleAction();
+            expect(notice.navigations).toEqual(expected);
+            expect(quota.navigations).toEqual(expected);
+            expect(quota.navigations).toEqual(notice.navigations);
+        });
+        it('onActionClick suppresses navigation in both components', () => {
+            const noticeCb = vi.fn();
+            const quotaCb = vi.fn();
+            const shared = { getConfig: configWith('/settings/billing'), actionHref: '/team/upgrade' };
+            const notice = makeNoticeHarness({ ...shared, onActionClick: noticeCb });
+            const quota = makeQuotaHarness({ ...shared, onActionClick: quotaCb });
+            notice.handleAction();
+            quota.handleAction();
+            expect(noticeCb).toHaveBeenCalledOnce();
+            expect(quotaCb).toHaveBeenCalledOnce();
+            expect(notice.navigations).toEqual([]);
+            expect(quota.navigations).toEqual([]);
+        });
+    });
+    // ── Quota-banner-only guard ────────────────────────────────────────────────
+    describe('BridgeQuotaBanner snapshot guard', () => {
+        it('does nothing at all — no callback, no navigation — without a snapshot', () => {
+            const onActionClick = vi.fn();
+            const h = makeQuotaHarness({
+                getConfig: configWith('/settings/billing'),
+                snapshot: null,
+                onActionClick,
+            });
+            h.handleAction();
+            expect(onActionClick).not.toHaveBeenCalled();
+            expect(h.navigations).toEqual([]);
+        });
+    });
+});

package/dist/styles.css

@@ -936,7 +936,11 @@
 }
 
 .bridge-plan-interval-tabs {
-  display: inline-flex;
+  /* Centered above the plan cards; flex + fit-content (not inline-flex) so
+     auto margins can center it regardless of the host page's text alignment. */
+  display: flex;
+  width: fit-content;
+  margin-inline: auto;
   gap: 0.25rem;
   margin-bottom: 1.25rem;
   padding: 0.25rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nebulr-group/bridge-svelte",
-  "version": "0.4.0-beta.9",
+  "version": "0.4.1",
   "description": "Bridge Svelte library, This library helps you to add bridge authentication and feature flags, and payments to your svelte application.",
   "author": "Iman Pouya",
   "license": "MIT",
@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "@simplewebauthn/browser": "^13.0.0",
-    "@nebulr-group/bridge-auth-core": "0.4.0-beta.10"
+    "@nebulr-group/bridge-auth-core": "0.4.0"
   },
   "devDependencies": {
     "@sveltejs/kit": "^2.16.0",