Merge branch 'main' into heat/grow-668-additional-metadata-headers-for-keyless-app-creation-post

Author: heatlikeheatwave

.changeset/easy-parrots-slide.md

@@ -0,0 +1,13 @@
+---
+'@clerk/testing': minor
+---
+
+Introduce new helper to allow signing a user in via email address:
+
+```ts
+import { clerk } from '@clerk/testing/playwright'
+
+test('sign in', async ({ page }) => {
+  await clerk.signIn({ emailAddress: '[email protected]', page })
+})
+```

.changeset/few-eagles-grab.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Remove flickers from PricingTable when signed in.

.changeset/fresh-breads-fall.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Display trial subscriptions in UserProfile and OrganizationProfile.

packages/clerk-js/sandbox/integration/helpers.ts

@@ -19,3 +19,19 @@ export async function signInWithEmailCode(page: Page): Promise<void> {
     signInParams: { strategy: 'email_code', identifier: '[email protected]' },
   });
 }
+
+/**
+ * Signs in a user using the new email-based ticket strategy for integration tests.
+ * Finds the user by email, creates a sign-in token, and uses the ticket strategy.
+ * @param page - The Playwright page instance
+ * @param emailAddress - The email address of the user to sign in (defaults to sandbox test user)
+ * @example
+ * ```ts
+ * await signInWithEmail(page);
+ * await page.goto('/protected-page');
+ * ```
+ */
+export async function signInWithEmail(page: Page, emailAddress = '[email protected]'): Promise<void> {
+  await page.goto('/sign-in');
+  await clerk.signIn({ emailAddress, page });
+}

packages/clerk-js/sandbox/integration/sign-in.spec.ts

@@ -18,3 +18,26 @@ test('sign in', async ({ page }) => {
   await page.locator(actionLinkElement).hover();
   await expect(page.locator(rootElement)).toHaveScreenshot('sign-in-action-link-hover.png');
 });
+
+test('sign in with email', async ({ page }) => {
+  await page.goto('/sign-in');
+
+  await clerk.signIn({
+    emailAddress: '[email protected]',
+    page,
+  });
+
+  await page.waitForFunction(() => window.Clerk?.user !== null);
+
+  const userInfo = await page.evaluate(() => ({
+    isSignedIn: window.Clerk?.user !== null && window.Clerk?.user !== undefined,
+    email: window.Clerk?.user?.primaryEmailAddress?.emailAddress,
+    userId: window.Clerk?.user?.id,
+    isLoaded: window.Clerk?.loaded,
+  }));
+
+  expect(userInfo.isSignedIn).toBe(true);
+  expect(userInfo.email).toBe('[email protected]');
+  expect(userInfo.userId).toBeTruthy();
+  expect(userInfo.isLoaded).toBe(true);
+});

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

@@ -12,10 +12,18 @@ const PricingTableRoot = (props: PricingTableProps) => {
   const clerk = useClerk();
   const { mode = 'mounted', signInMode = 'redirect' } = usePricingTableContext();
   const isCompact = mode === 'modal';
-  const { subscriptionItems } = useSubscription();
+  const { data: subscription, subscriptionItems } = useSubscription();
   const { data: plans } = usePlans();
   const { handleSelectPlan } = usePlansContext();
 
+  const plansToRender = useMemo(() => {
+    return clerk.isSignedIn
+      ? subscription // All users in billing-enabled applications have a subscription
+        ? plans
+        : []
+      : plans;
+  }, [clerk.isSignedIn, plans, subscription]);
+
   const defaultPlanPeriod = useMemo(() => {
     if (isCompact) {
       const upcomingSubscription = subscriptionItems?.find(sub => sub.status === 'upcoming');
@@ -72,15 +80,15 @@ const PricingTableRoot = (props: PricingTableProps) => {
     >
       {mode !== 'modal' && (props as any).layout === 'matrix' ? (
         <PricingTableMatrix
-          plans={plans}
+          plans={plansToRender}
           planPeriod={planPeriod}
           setPlanPeriod={setPlanPeriod}
           onSelect={selectPlan}
           highlightedPlan={(props as any).highlightPlan}
         />
       ) : (
         <PricingTableDefault
-          plans={plans}
+          plans={plansToRender}
           planPeriod={planPeriod}
           setPlanPeriod={setPlanPeriod}
           onSelect={selectPlan}

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

@@ -240,7 +240,7 @@ function Card(props: CardProps) {
                     ? localizationKeys('badge__trialEndsAt', {
                         date: subscription.periodEnd,
                       })
-                    : localizationKeys('badge__startsAt', { date: subscription?.periodStart })
+                    : localizationKeys('badge__startsAt', { date: subscription.periodStart })
                 }
                 colorScheme='secondary'
                 sx={t => ({