nextjs-subscription-payments icon indicating copy to clipboard operation
nextjs-subscription-payments copied to clipboard

Fix subscription button text for different billing intervals

Open skeleton1231 opened this issue 1 year ago • 1 comments

Fix subscription button text and enhance subscription handling

Problem:

  • When a user has a monthly subscription and switches to the yearly billing interval tab, the button still shows "Manage" instead of "Subscribe" for the yearly plan, even though the user does not have a yearly subscription. If clicked, the button redirects to the Stripe checkout URL, which seems incorrect.
  • The getSubscription function retrieves data without filtering by the user.

Solution:

  • Added getUserSubscriptions method in supabase/queries to fetch user subscriptions, ordered by creation time in descending order.
  • Updated Pricing component to handle user subscriptions:
    • Show "Manage" button for subscribed products and redirect to the account management page.
    • Show "Subscribe" button for unsubscribed products.
  • Modified PricingPage to fetch user and their subscriptions, and pass them to the Pricing component.
  • Adjusted Account page to display the user's latest subscription and personal information.
  • Ensured that the button text accurately reflects the user's subscription status for the selected billing interval.

These changes improve the overall user experience by accurately reflecting the user's subscription status and providing appropriate actions based on their subscriptions.

If I have misunderstood any aspects of the problem or solution, please forgive my oversight. I look forward to your feedback and hope these changes align with the project's goals. Thank you for your understanding and support.

skeleton1231 avatar Jul 10 '24 10:07 skeleton1231

@skeleton1231 is attempting to deploy a commit to the Vercel Solutions Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] avatar Jul 10 '24 10:07 vercel[bot]

Thank for you opening a PR to make this example better.

We are sunsetting this example in favor of a newer, more modern SaaS starter example.

You can check it out here -> https://github.com/nextjs/saas-starter

leerob avatar Jan 23 '25 15:01 leerob