Subscription Plan Simulator

Калькулятор тарифов: места, месяц или год, НДС и точная разбивка цены. Pro · Магазин и платежи › Подписки и тарифы

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add subscription-plan-simulator

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { SubscriptionPlanSimulator } from 'valyro-ui-pro';

Пропсы

Prop	Type	Default
`plans` *	`SubscriptionPlan[]`		Plans with their pricing model: flat, per seat, graduated or volume tiers.
`seats`	`number`		Number of seats to price.
`defaultSeats`	`number`	`5`	Initial seats when uncontrolled. Default 5.
`onSeatsChange`	`(seats: number) => void`		Called when the reader changes the seat count.
`period`	`'month' \| 'year'`		Billing period.
`defaultPeriod`	`'month' \| 'year'`	`'month'`	Initial period when uncontrolled. Default `month`.
`onPeriodChange`	`(period: BillingPeriod) => void`		Called when the reader switches monthly / yearly.
`currency` *	`string`		ISO 4217 code of every price. Minor units follow the currency (2 for USD, 0 for JPY).
`taxMode`	`'exclusive' \| 'inclusive' \| 'none'`	`'exclusive'`	`exclusive` (default) adds tax on top; `inclusive` shows the tax inside the price; `none` hides it.
`taxRate`	`number`	`0`	Tax rate as a fraction, e.g. 0.2 for 20% VAT. Default 0.
`seatRange`	`[min: number, max: number]`	`[1, 100]`	Range of the seat slider. Default 1–100.
`onSelect`	`(plan: SubscriptionPlan, quote: Quote) => void`		Called by a plan's button with the plan and its exact quote.
`loading`	`boolean`	`false`	Plans are loading: skeleton cards.
`error`	`ReactNode`		Loading failed: shown instead of the plans.
`title`	`ReactNode`		Heading. Default: `labels.title`.
`headingLevel`	`2 \| 3 \| 4 \| 5`	`3`	Level of the heading (default 3); plan names take the next level.
`locale`	`string`		BCP 47 locale for prices; defaults to the ThemeProvider's.
`labels`	`Partial<SubscriptionPlanSimulatorLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Subscription Plan Simulator

Установка

Пропсы

Похожие компоненты