@startsimpli/billing 0.4.20 → 0.4.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/billing",
-  "version": "0.4.20",
+  "version": "0.4.21",
   "description": "Universal billing integration for StartSimpli Next.js apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/hooks/useSubscription.test.tsx

@@ -181,4 +181,24 @@ describe("useSubscription", () => {
       expect(result.current.subscription?.id).toBe("sub-2")
     );
   });
+
+  it("fetches again when refetchKey changes (the signed-in user arrives after the first fetch)", async () => {
+    // First call: the session isn't ready yet, so the API says 401. Second: signed in.
+    const mockFetch = vi.fn()
+      .mockResolvedValueOnce({ ok: false, status: 401, json: async () => ({ error: "Not authenticated" }) })
+      .mockResolvedValue({ ok: true, status: 200, json: async () => mockSubscription }) as unknown as typeof fetch;
+    const wrapper = createWrapper(mockFetch);
+
+    const { result, rerender } = renderHook(({ user }) => useSubscription(undefined, { refetchKey: user }), {
+      wrapper,
+      initialProps: { user: undefined as string | undefined },
+    });
+    await waitFor(() => expect(result.current.loading).toBe(false));
+    expect(result.current.subscription).toBeNull();
+
+    rerender({ user: "user-1" });
+    await waitFor(() => expect(result.current.subscription?.id).toBe("sub-123"));
+    expect(result.current.error).toBeNull();
+  });
 });
+

package/src/hooks/useSubscription.ts

@@ -3,6 +3,10 @@
  *
  * Pass the app's product slug so another app's plan is never returned
  * (startsim-oyr3a.2).
+ *
+ * Pass the signed-in user's id as `refetchKey`. The first fetch can run before
+ * the session is ready (straight back from sign-in it answers 401), and a plan
+ * read once and never again showed paying users as Free until they reloaded.
  */
 
 import { useCallback, useEffect, useState } from "react";
@@ -16,7 +20,13 @@ interface UseSubscriptionResult {
   refetch: () => void;
 }
 
-export function useSubscription(productId?: string): UseSubscriptionResult {
+export interface UseSubscriptionOptions {
+  /** Fetch again whenever this changes, e.g. the signed-in user's id. */
+  refetchKey?: unknown;
+}
+
+export function useSubscription(productId?: string, options: UseSubscriptionOptions = {}): UseSubscriptionResult {
+  const { refetchKey } = options;
   const { client } = useBillingContext();
   const [subscription, setSubscription] = useState<SubscriptionInfo | null>(null);
   const [loading, setLoading] = useState(true);
@@ -37,7 +47,7 @@ export function useSubscription(productId?: string): UseSubscriptionResult {
 
   useEffect(() => {
     fetchSubscription();
-  }, [fetchSubscription]);
+  }, [fetchSubscription, refetchKey]);
 
   return { subscription, loading, error, refetch: fetchSubscription };
 }