Enable Self-Serve Plan Upgrades in default UI

📝 Problem Statement

Currently, subscribers do not have a streamlined way to upgrade their plans or explore additional products within a self-serve interface. This creates friction, increases dependency on support teams, and limits upsell opportunities.

👤 User Story

As a subscriber,

I want the ability to upgrade my plan and explore new products through a modern self-serve interface,

so that I can manage my subscriptions independently and access new offerings without needing manual assistance.

🎯 Definition of Done (DoD)

1. A self-serve UI is implemented in the new React Elements for upgrading plans and browsing products.

2. A Change Plan button is available in the new UI for subscribers.

3. When clicked, the user can view available upgrade products.

4. A proration invoice should be created with the new amount after selecting the new plan.

5. The plan selection flow in the new UI mirrors the existing platform behavior (e.g., eligibility checks, upgrade rules, proration).

6. User receives a confirmation message of the plan change (e.g., “You’ve successfully upgraded to Plan X”).

7. The subscriber’s account reflects the updated plan in real time.

8. The system validates and confirms the change before applying it to the subscriber’s account.

9. UI is tested across supported devices/browsers to ensure a smooth self-serve experience.

10. Documentation and developer guides are updated to cover new React Elements implementation.