Prevent Duplicate Subscriptions in Checkout Flow

Problem Statement

Pelcro's checkout flow currently allows logged-in subscribers with an active subscription to initiate the purchase of a new plan without being made aware that they already have an active subscription. This leads to accidental double-billing and subscriber confusion.

User Story

As a subscriber using the checkout flow,

I want to clearly see that I already have an active subscription,

so that I avoid purchasing duplicate or unnecessary plans.

Proposed Behavior

When a logged-in user with at least one active subscription opens the product or plan selection interface (React Elements):

Informational Banner

A visible informational banner appears at the top of the product/plan selection modal containing:

1. Text: "You are already subscribed to: {Active Plan Name}"

No actions, buttons, or links are included. The subscriber can still proceed if they intentionally want a second subscription.

Logic Rules

1. Banner displays only for logged-in users with active subscriptions.

2. If multiple active subscriptions exist, display the most recently created active subscription.

3. Checkout flow remains unblocked — the warning is informational only.

4. No backend or API changes required.

Definition of Done (DoD)

UI Implementation (React Elements)

1. Implement a simple informational banner at the top of the product/plan selection modal.

2. Banner text: "You are already subscribed to: {Plan Name}"

3. Styling follows Pelcro's general UI guidelines.

4. No interactive elements are added.

Functional Behavior

1. Banner is informational only — does not block checkout.

Edge Conditions

1. Banner is hidden when the user has no active subscription.

2. Banner dynamically loads based on the subscription status available in Elements.

Affected Components

1. UI: Pelcro React Elements (checkout flow)

2. API: None

3. SDK: None

4. Backend: None