Implementation:FlowiseAI Flowise PricingDialog

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, Subscription, Billing
Last Updated	2026-02-12 07:00 GMT

Overview

PricingDialog is a React dialog component that displays available subscription pricing plans, handles plan selection with proration previews, and manages subscription upgrades through the Stripe billing integration.

Description

This component fetches pricing plans from the API, renders them in a grid layout with feature lists and pricing details, and allows organization administrators to change their subscription plan. It integrates with the Stripe billing portal for payment management, calculates proration information for mid-cycle plan changes, and tracks workspace counts, seat quantities, and pro API key counts to validate plan transitions. The dialog enforces permission checks so only organization admins can modify plans.

Usage

Use this component when displaying the subscription plan selection UI to users, typically accessed from the account settings page or when prompting users to upgrade their plan.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/subscription/PricingDialog.jsx
• Lines: 1-705

Signature

const PricingDialog = ({ open, onClose }) => { ... }

PricingDialog.propTypes = {
    open: PropTypes.bool,
    onClose: PropTypes.func
}

export default PricingDialog

Import

import PricingDialog from '@/ui-component/subscription/PricingDialog'

I/O Contract

Inputs

Name	Type	Required	Description
open	bool	Yes	Controls the visibility of the pricing dialog
onClose	func	Yes	Callback invoked when the dialog is closed; receives true on successful plan update

Outputs

Name	Type	Description
Rendered UI	JSX.Element	A Material-UI Dialog displaying pricing plan cards with upgrade/downgrade functionality

Key Internal State

• selectedPlan -- The plan object the user has clicked to review
• prorationInfo -- Proration preview data fetched from the server for mid-cycle plan changes
• purchasedSeats / occupiedSeats -- Tracks the number of additional seats purchased and currently occupied
• workspaceCount / proAPIKeysCount -- Current workspace and pro API key counts used for validation during plan downgrades
• isUpdatingPlan -- Loading state during the subscription update API call

Key Internal Functions

• handlePlanClick(plan) -- Initiates plan selection; for Enterprise plans, redirects to contact email; otherwise opens the proration preview sub-dialog.
• handleUpdatePlan() -- Sends the subscription update request to userApi.updateSubscriptionPlan, dispatches upgradePlanSuccess on success.
• handleBillingPortalClick() -- Opens the Stripe billing portal in a new tab via accountApi.getBillingData.
• pricingPlans (useMemo) -- Derives the display plan list from API data, annotating each plan with button text, variant, and disabled state based on current subscription.

Usage Examples

Basic Usage

import PricingDialog from '@/ui-component/subscription/PricingDialog'

const [openPricing, setOpenPricing] = useState(false)

<PricingDialog
    open={openPricing}
    onClose={(updated) => {
        setOpenPricing(false)
        if (updated) refreshAccountData()
    }}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Subscription_Management