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.

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.

Logic Rules

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

2. If multiple active subscriptions exist:

3. Display the most recently created active subscription.

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 includes:

3. “You are already subscribed to: {Plan Name}”

4. Styling should follow Pelcro’s general UI guidelines.

5. No interactive elements are added.

Functional Behavior

1. Banner is informational only.

2. Checkout behavior for selecting plans remains unchanged.

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