Introduce Plan Sorting on Platform & UI

Problem Statement

Currently, plans are displayed in a fixed or creation-order sequence on both the Platform UI and Plan Selection Modal (Elements UI).

Admins have no control over the display order, which leads to inconsistent or unintuitive plan presentation for end-users — especially when multiple tiers or region-specific plans exist.

User Story

As an admin, I want to reorder and prioritize subscription plans directly from the platform UI so that I can control how plans appear to customers in the plan selection modal.

Definition of Done (DoD)

1. Upgrade Plans page to the new UI.

2. Add a drag-and-drop plan sorting interface using the new preline templates within the Platform Admin → Products → Plans section.

3. The saved sort order should be stored at the plan level and automatically reflected wherever plans are displayed in the frontend (plan selection modal).

Platform UI

1. Add sortable list (drag-and-drop) under the Plans section.

2. Allow admin to manually reorder plans and persist the order.

3. The Drag and drop should be saved automatically on the UI (no need for extra Save button click).

Frontend / SDK / Plan Modal

1. Modify Plan Modal component to respect backend sort_order when fetching plans.

2. Ensure consistent plan ordering across:

3. Subscription selection modals

4. Change plan flow

5. Checkout plan selector

6. Verify order updates dynamically upon API refresh (no caching conflicts).

QA / Validation

1. Confirm sorting updates immediately reflect in plan modal.

2. Test across multiple products and environments (staging, production).

3. Backward compatibility check: plans without sort_order default to creation order.

Affected Components

Platform UI / API / SDK / UI