As a User I want to be able to subscribe to streameth.

[Mario-SO]

User Story

As a user, I want to be able to view pricing options, subscribe to a plan, and manage my subscription, so that I can access premium features and monitor my usage.

Acceptance Criteria

• [ ] Given I am on the main application page, when I click on the "Pricing" option in the sidebar, then I should see a pricing page with different subscription tiers and their features.
• [ ] Given I am not subscribed or have run out of hours, when I look at the navbar, then I should see a "Get more hours" button.
• [ ] Given I am on the pricing page, when I select a subscription tier, then I should be able to complete the payment process using Stripe.
• [ ] Given I have successfully subscribed, when I use the application, then my subscription tier and consumed hours should be accurately reflected in real-time.
• [ ] Given I am not subscribed or have no more hours, when I click on a premium feature, then I should see a dialog prompting me to upgrade or purchase more hours.
• [ ] Given I am a subscribed user, when I look at the navbar, then I should see an "Hours Consumed/x" badge showing my remaining hours.

Non-functional Criteria (if applicable)

• [ ] Real-time updates of consumed hours.

Dependencies (if any)

• [ ] Requires Stripe API integration to be set up and configured. Docs
• [ ] Depends on the creation of a new Org model with subscriptionTier and consumedHours fields.
• [ ] Requires implementation of Stripe webhooks for handling successful payments.

Notes (Optional)

• Consider implementing a global context to manage the user's subscription state across the entire application.
• Ensure proper error handling for all possible scenarios in the Stripe API integration.

Mockups & Examples (Optional)

• Pricing page mockup:
• Button placements:

Tasks Breakdown (Optional)

• [ ] Create the Pricing page component and add it to the sidebar navigation
• [ ] Implement the "Get more hours" button in the navbar
• [ ] Design and implement pricing cards for different subscription tiers
• [ ] Create a dialog component for prompting non-subscribed users to upgrade
• [ ] Implement the "Hours Consumed/x" badge in the navbar
• [ ] Set up Stripe API integration for handling payments
• [ ] Create and configure Stripe webhooks for successful payment handling
• [ ] Update the Org model with new subscription-related fields
• [ ] Implement real-time updating of consumed hours in the UI
• [ ] Create a global context for managing subscription state (if decided)
• [ ] Thoroughly test all subscription-related functionality and error handling