refactor(clerk-js): Improve switching between plans flows

[octoper]

Description

Resubscribe button improvements

BEFORE:

• User is initially on the Free plan
• They subscribe to any paid annual plan
• Then they downgrade to Free
• And finally, they click on resubscribe back the paid plan they were before

Now they are subscribed to the monthly plan not the annual which would be the expected

CleanShot.2025-05-08.at.16.47.17.mp4

AFTER:

New flow

• User is initially on the Free plan
• They subscribe to any paid annual plan
• Then they downgrade to Free

Now if they move back to switch plans they will only see the resubscribe button only on the annual plan and not the monthly one

CleanShot.2025-05-08.at.16.49.46.mp4

---

Show Active or Upcoming badge based on selected plan period if the plan has subscriptions for both statuses

Steps to reproduce

• User is initially on the Free plan
• They subscribe to any paid annual plan
• Then they switch the the same plan but with the monthly interval

Now the card on the pricing table is confusing when switching between the plan periods, because on is active and one is upcoming but that's not reflected correctly on the badge

Before

CleanShot.2025-05-08.at.16.58.17.mp4

After

CleanShot.2025-05-08.at.17.01.52.mp4

---

No subscriptions

1 active subscription

1 active subscription & 1 upcoming subscription

1 annual active subscription & 1 upcoming subscription & trying to switch to monthly period of current's active plan

1 active subscription & 1 upcoming subscription on the same plan

Monthly plan period (Upcoming)	Annual plan period (Active)

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[changeset-bot]

🦋 Changeset detected

Latest commit: d5799c0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 11, 2025 3:45pm

[alexcarpenter]

@octoper and I reviewed the code together and handled the documented flows in the PR description, but would love to get both @aeliox and/or @brkalow eyes on this one.

[aeliox]

LGTM