# Component: Edit Plan (Beta) \| 🎉 This component will receive a major update in Release 111 (Q3 2025). | ## Component: Edit Base Plan This component allows subscribers to change their base subscription plan via **Limio Self-Service**. It's typically used in the Self-Service journey to offer customers the ability to upgrade or downgrade to a different product, rate plan, or billing frequency. The component also enables customers to change the quantity of their subscription and see a visual comparison of their current and new plans. This extends the functionality previously available in [Component: Switch Subscription](/components/component-library/standard-components/component-switch-subscription.md) ### What does this component do? The **Edit Base Plan** component provides a self-service UI where users can: * Select a new base product. * Change the billing plan and billing frequency. * Adjust the quantity (if [multibuy](https://docs.limio.com/product/pricing/what-are-offers-and-how-to-configure-them/how-to-activate-the-quantity-field-to-sell-multiple-subscriptionsitems-at-once) is enabled). * View a dynamic preview of the new plan and cost comparison. * Submit changes, which updates their subscription in Zuora via Limio's Event ([Update Subscription](https://docs.limio.com/integrations/keeping-zuora-and-limio-in-sync/how-limio-events-updates-zuora-for-commerce)). This is ideal for letting customers move from monthly to annual billing, upgrade their subscription tier from Basic to Pro, or increase the number of licenses or seats. ### How does it work? When embedded in a Manage My Account flow and loaded with a subscription ID (`?subId=` or `?subRef=`), the component: 1. Retrieves the subscriber’s current plan 2. Displays available offers grouped by product using Limio Offer data. 3. Enables the customer to select a new offer (product + rate plan + term). 4. Provides real-time updates on their selection with a side-by-side preview of current and new plans. 5. Processes the update with Limio when the customer clicks **Continue**. A successful submission can redirect the user or refresh the page, depending on the `successLink` prop. ### Component props | Prop | Type | Description | Default | | -------------------------- | -------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | **themeColor** | picklist | Sets the colour theme of the component (orange, blue, red, green, black, grey). | `orange` | | **defaultToBase** | boolean | If `true`, default selection shows the base plan first in the list. | `true` | | **titleText** | string | Main heading displayed at the top of the component. | `Change your plan` | | **productSelectLabel** | string | Label above the product selection dropdown. | `Choose a plan` | | **ratePlanSelectLabel** | string | Label above the billing frequency selection. | `Billing frequency` | | **billingTermSelectLabel** | string | Label above the billing term selection. | `Billing plan` | | **quantityFieldLabel** | string | Label next to the quantity field. | `Quantity` | | **manageText** | richtext | Optional helper text for managing add-ons. | **Need to manage your subscription add-ons? Please visit your subscription page and choose ‘Edit Add-ons’ to make your changes.** | | **yourPlanTitle** | string | Title shown on the right-hand summary section. | `Your Plan` | | **toPayText** | richtext | Label displayed above the cost in the summary panel. | `To pay today` | | **longTexts** | richtext | Additional copy beneath the continue button. | `Lorem Ipsum` | | **continueButtonText** | string | Text for the primary action button. | `Continue` | | **yourNewPlanCopy** | string | Label shown above the new plan preview. | `Your new plan` | | **yourOldPlanCopy** | string | Label shown above the current plan preview. | `Credit for your old plan` | | **onlyIncrease** | boolean | If `true`, only allows quantity increases. | `false` | | **hideBillingFrequency** | boolean | If `true`, hides the billing frequency selector. | `false` | | **hideBillingPlan** | boolean | If `true`, hides the billing plan selector. | `false` | | **compareLink** | string | URL to navigate to a plan comparison page. | `#` | | **successLink** | string | URL to redirect to on successful submission. | `/updateSuccess` | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.limio.com/components/component-library/legacy-configuration-components/component-edit-plan-beta.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.