ロイヤリティ要約カードLoyaltySummaryCardExperimental
The points/balance/tier hero every consumer loyalty screen opens with: a prominent balance, a tier/rank badge, optional secondary values (IC残高/当年実績), a higher-is-better progress-to-next-tier with a remaining label (『プラチナまであと ¥13,800』 — never auto-reds like a capacity Meter), an expiry-warning slot and a primary action. The brand tone is a filled gradient surface so the hero has shine without reaching for arbitrary brand-token classes. For airline マイル, 鉄道 IC/ポイント, retail/EC rewards, membership tiers. For the back-office KPI strip use StatGroup; for a money breakdown use AmountBreakdown; for the points/coupon/history list under the hero use ListCard. Presentational (the action slot owns interactivity) — RSC-safe.
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| balance | ReactNode | - | ヒーローの残高（大きな数字）。 |
| balanceLabel | ReactNode | - | 残高の上の小ラベル（ポイント残高 など）。 |
| unit | ReactNode | - | 残高の後ろの単位（P / マイル / 円）。 |
| meta | ReactNode | - | プログラム名 / 会員名 / 番号（左上）。 |
| tier | ReactNode | - | ランクバッジ（右上）。Badge 等を渡す。 |
| secondary | { label, value }[] | - | ヒーロー下の副次値（IC残高 / 当年実績 など）。 |
| progress | { value, max, label?, caption? } | - | 次ランクまでの進捗（higher-is-better・容量Meterのように赤反転しない）。label は残り（『あと ¥13,800』）。 |
| alert | ReactNode | - | 失効予定などの警告行。 |
| action | ReactNode | - | 主アクション（Button ノード）。 |
| tone | "brand" | "default" | "brand" | brand = 塗りつぶしグラデーションのヒーロー、default = 素のカード。 |
Usage
import { LoyaltySummaryCard, Badge, Button } from "@gunjo/ui"
<LoyaltySummaryCard
tone="brand" // filled gradient hero (or "default" card)
meta="ハッピーズドラッグ メンバーズ"
tier={<Badge variant="outline">ゴールド会員</Badge>}
balanceLabel="ポイント残高"
balance="3,480"
unit="P"
secondary={[{ label: "当年購入額", value: "¥86,200" }]}
progress={{ value: 86200, max: 100000,
label: "プラチナ会員まで あと ¥13,800", caption: "¥86,200 / ¥100,000" }}
alert="200 P が 2026/06/30 に失効予定です"
action={<Button size="lg" variant="secondary" className="w-full">会員バーコードを表示</Button>}
/>