商流ルールシミュレーター価格遷移フロー仕様¶
背景¶
Dashboard の商流ルールシミュレーターでは、価格決定ロジックのプレビューをツリー構造で表示していた。しかし運用上この画面で確認したいのは、どのルールが親子関係にあるかではなく、基準価格から最終価格までどの順序で価格が変化したかである。
このため、価格決定ロジックのプレビューはツリーではなく、価格遷移フローとして表示する。
対象画面¶
- React Dashboard
/commercial-rules/simulator
要件¶
1. 表示形式¶
- 価格決定ロジックは親子ツリーではなく、縦方向のフローで表示する。
- 基準価格から最終価格までの遷移をステップバイステップで示す。
2. 表示項目¶
各ステップで以下の情報を表示する：
- ステップ名（ルール名、または「基準価格」「最終価格」）
- 変化後の価格
- 変動額（オプション）
- 適用されたルールの詳細リンク（オプション）
3. ビジュアルデザイン¶
- フローの各ステップは視覚的に連結される（矢印やラインを使用）。
- 価格が増加したか減少したかを色分け（例：増加は赤、減少は青）で表現する。
4. カート全体合計の表示¶
multi-line + order-level 調整 + 直送加算が混在する場合、focus line の 3 段モデル （上代 / SMILE 後 / 最終）だけでは cart 全体の最終金額を読み取れない。そのため 行別結果と注文効果セクションの間に カート合計セクション を必ず表示する。
表示項目は engine 出力 CommercialSimulationState の cart-level 4 値を 4-card grid
で並べる:
| カード | engine field | 補足 |
|---|---|---|
| 値引前合計 | cartOriginalTotal |
Σ listUnitPrice × quantity (preview/gift 除く) |
| 行値引合計 | lineDiscountTotal |
SMILE + commercial rule の per-line 値引 |
| 注文調整合計 | orderAdjustmentTotal |
add_order_amount の cart 全体調整 |
| 最終合計（強調表示） | cartFinalTotal |
行合計 + 注文調整 (直送加算込み) |
直送加算 (direct_shipping_surcharge) は per-line で finalUnitPrice に既に
組み込まれているため、最終合計には自動的に内包される（別カード化はしない）。
実装方針¶
コンポーネント構成¶
PriceTransitionFlow: 全体のコンテナPriceTransitionStep: 各ステップの表示コンポーネントCartTotalsSection: カート全体合計の 4-card セクション （SimulationPage.tsx内、LineResultsSectionとOrderEffectsSectionの間に配置）
データ構造¶
シミュレーション結果から遷移フロー表示用のフラットな配列を生成するロジックを実装する。
カート合計は simulateCommercialRules の戻り値 (cartOriginalTotal /
lineDiscountTotal / orderAdjustmentTotal / cartFinalTotal) をそのまま使用する
（GraphQL クエリで取得済み、追加 fetch 不要）。