Loyalty Rewards

Программа лояльности: баллы, уровень, прогресс и каталог наград. Pro · Магазин и платежи › Оплата и кошелёк

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add loyalty-rewards

npm install valyro-ui-pro

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

Prop	Type
`points` *	`number`	Points the member can spend now.
`lifetimePoints`	`number`	Points earned all time (they decide the tier).
`tier` *	`LoyaltyTier`	The member's current tier.
`nextTier`	`LoyaltyNextTier`	The tier above, for the progress bar.
`rewards` *	`LoyaltyReward[]`	What points buy.
`claimed`	`string[]`	Ids of claimed rewards (controlled).
`defaultClaimed`	`string[]`	Initial `claimed` when uncontrolled.
`onClaimedChange`	`(claimed: string[]) => void`	Called with the new `claimed` when it changes.
`onClaim`	`(reward: LoyaltyReward) => void`	Called when a reward is claimed: deduct the points there. Until `points` changes, the balance shown already excludes it.
`howToEarn`	`ReactNode`	Content of the "How to earn" tab.
`tab`	`string`	Open tab (controlled): `rewards`, `claimed` or `earn`.
`defaultTab`	`string`	Initial `tab` when uncontrolled.
`onTabChange`	`(tab: string) => void`	Called with the new `tab` when it changes.
`locale`	`string`	BCP 47 locale for the numbers.
`labels`	`Partial<LoyaltyRewardsLabels>`	Overrides for the built-in English text; keys left out keep their defaults.

Credit Card — Банковская карта: градиент или две тональности, сеть по номеру, бесконтактная оплата
Card Input — Номер, срок и CVC в одном поле: маски, Луна, автопереход
Payment Methods — Сохранённые карты и кошельки карточками-переключателями
Transaction List — Список операций: списания, пополнения, возвраты и остаток
Wallet Balance — Баланс кошелька: скрытие суммы, действия, карта для пополнения
Purchase Card — Покупка продукта: баннер, разовая оплата или подписка, карта и адрес
Product Card — Карточка товара
Product Grid — Каталог товаров
Product Filters — Фильтры каталога
Product Spotlight — Рекомендованный товар: фото с пометкой, цена, рейтинг и действия
Reviews Summary — Отзывы: средняя оценка, гистограмма-фильтр, сортировка и полезность
Guided Product Finder — Мастер подбора товара: вопросы с ветвлением и объяснение, почему подошло