fix(clerk-js): Correctly pass newSubscriptionRedirectUrl to checkout drawer (#5909)

Author: alexcarpenter

.changeset/tangy-facts-poke.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fixes `newSubscriptionRedirectUrl` usage on `PricingTable`.

integration/templates/astro-node/src/pages/pricing-table.astro

@@ -1,10 +1,12 @@
 ---
-import { PricingTable } from "@clerk/astro/components";
-import Layout from "../layouts/Layout.astro";
+import { PricingTable } from '@clerk/astro/components';
+import Layout from '../layouts/Layout.astro';
+
+const newSubscriptionRedirectUrl = Astro.url.searchParams.get('newSubscriptionRedirectUrl');
 ---
 
-<Layout title="Pricing Table">
-  <div class="w-full flex justify-center">
-    <PricingTable />
+<Layout title='Pricing Table'>
+  <div class='w-full flex justify-center'>
+    <PricingTable newSubscriptionRedirectUrl={newSubscriptionRedirectUrl} />
   </div>
 </Layout>

integration/templates/next-app-router/src/app/pricing-table/page.tsx

@@ -1,5 +1,10 @@
 import { PricingTable } from '@clerk/nextjs';
 
-export default function PricingTablePage() {
-  return <PricingTable />;
+export default async function PricingTablePage({
+  searchParams,
+}: {
+  searchParams: Promise<{ newSubscriptionRedirectUrl: string }>;
+}) {
+  const newSubscriptionRedirectUrl = (await searchParams).newSubscriptionRedirectUrl;
+  return <PricingTable newSubscriptionRedirectUrl={newSubscriptionRedirectUrl} />;
 }

integration/templates/nuxt-node/pages/pricing-table.vue

@@ -1,3 +1,10 @@
 <template>
-  <PricingTable />
+  <PricingTable :newSubscriptionRedirectUrl="newSubscriptionRedirectUrl" />
 </template>
+
+<script setup>
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+const newSubscriptionRedirectUrl = route.query.newSubscriptionRedirectUrl;
+</script>

integration/templates/vue-vite/src/views/PricingTable.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { PricingTable } from '@clerk/vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+const newSubscriptionRedirectUrl = route.query.newSubscriptionRedirectUrl as string;
 </script>
 
 <template>
-  <PricingTable />
+  <PricingTable :newSubscriptionRedirectUrl="newSubscriptionRedirectUrl" />
 </template>

integration/tests/pricing-table.test.ts

@@ -104,6 +104,42 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
   //   await expect(u.po.page.getByRole('button', { name: /resubscribe|re-subscribe/i }).first()).toBeVisible();
   // });
 
+  test.describe('redirects', () => {
+    test('default navigates to afterSignInUrl', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+      await u.po.signIn.goTo();
+      await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+      await u.po.page.goToRelative('/pricing-table');
+      await u.po.pricingTable.waitForMounted();
+      await u.po.pricingTable.startCheckout({ planSlug: 'pro' });
+      await u.po.checkout.waitForMounted();
+      await u.po.checkout.clickPayOrSubscribe();
+      await expect(u.po.page.getByText('Success!')).toBeVisible();
+      await page
+        .locator('.cl-checkout-root')
+        .getByRole('button', { name: /^continue$/i })
+        .click();
+      await u.page.waitForAppUrl('/');
+    });
+
+    test('navigates to supplied newSubscriptionRedirectUrl', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+      await u.po.signIn.goTo();
+      await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email, password: fakeUser.password });
+      await u.po.page.goToRelative('/pricing-table?newSubscriptionRedirectUrl=/success');
+      await u.po.pricingTable.waitForMounted();
+      await u.po.pricingTable.startCheckout({ planSlug: 'plus' });
+      await u.po.checkout.waitForMounted();
+      await u.po.checkout.clickPayOrSubscribe();
+      await expect(u.po.page.getByText('Success!')).toBeVisible();
+      await page
+        .locator('.cl-checkout-root')
+        .getByRole('button', { name: /^continue$/i })
+        .click();
+      await u.page.waitForAppUrl('/success');
+    });
+  });
+
   test.describe('in UserProfile', () => {
     test('renders pricing table with plans', async ({ page, context }) => {
       const u = createTestUtils({ app, page, context });

packages/clerk-js/bundlewatch.config.json

@@ -1,6 +1,6 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "594.1kB" },
+    { "path": "./dist/clerk.js", "maxSize": "594.2kB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "68.3KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "110KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },

packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx

@@ -56,6 +56,7 @@ const PricingTableRoot = (props: PricingTableProps) => {
       planPeriod,
       event,
       appearance: props.checkoutProps?.appearance,
+      newSubscriptionRedirectUrl: props.newSubscriptionRedirectUrl,
     });
     return;
   };

packages/clerk-js/src/ui/contexts/components/Plans.tsx

@@ -137,6 +137,7 @@ type HandleSelectPlanProps = {
   mode?: 'modal' | 'mounted';
   event?: React.MouseEvent<HTMLElement>;
   appearance?: Appearance;
+  newSubscriptionRedirectUrl?: string;
 };
 
 export const usePlansContext = () => {
@@ -318,7 +319,15 @@ export const usePlansContext = () => {
 
   // handle the selection of a plan, either by opening the subscription details or checkout
   const handleSelectPlan = useCallback(
-    ({ plan, planPeriod, onSubscriptionChange, mode = 'mounted', event, appearance }: HandleSelectPlanProps) => {
+    ({
+      plan,
+      planPeriod,
+      onSubscriptionChange,
+      mode = 'mounted',
+      event,
+      appearance,
+      newSubscriptionRedirectUrl,
+    }: HandleSelectPlanProps) => {
       const subscription = activeOrUpcomingSubscription(plan);
 
       const portalRoot = getClosestProfileScrollBox(mode, event);
@@ -351,6 +360,7 @@ export const usePlansContext = () => {
           },
           appearance,
           portalRoot,
+          newSubscriptionRedirectUrl,
         });
       }
     },

packages/clerk-js/src/ui/lazyModules/MountedCheckoutDrawer.tsx

@@ -44,6 +44,7 @@ export function MountedCheckoutDrawer({
           onSubscriptionComplete={checkoutDrawer.props.onSubscriptionComplete}
           portalRoot={checkoutDrawer.props.portalRoot}
           appearance={checkoutDrawer.props.appearance}
+          newSubscriptionRedirectUrl={checkoutDrawer.props.newSubscriptionRedirectUrl}
         />
       )}
     </LazyDrawerRenderer>