# 通知設計書 21-ウィッシュリスト追加成功/失敗通知

## 概要

本ドキュメントは、商品詳細画面において商品をウィッシュリストに追加した際に表示される成功/失敗通知の設計について記載する。

### 本通知の処理概要

本通知は、ユーザーが商品詳細画面から商品をウィッシュリストに追加する操作を行った際に、その操作結果をユーザーにフィードバックするためのアプリ内通知機能である。

**業務上の目的・背景**：ECアプリにおいて、ウィッシュリスト機能は顧客が気になる商品を保存し、後日購入を検討するための重要な機能である。ウィッシュリストへの追加操作が成功したか失敗したかをユーザーに即座にフィードバックすることで、操作の確実性を担保し、ユーザー体験を向上させる。また、ログイン状態やネットワーク状態によって操作が失敗する可能性があるため、エラー時の適切な通知が必要となる。

**通知の送信タイミング**：ユーザーが商品詳細画面でウィッシュリスト追加ボタン（ハートアイコン）をタップし、BLoCがAddToWishListProductEventを処理してAPIレスポンスを受信した直後に通知が表示される。

**通知の受信者**：操作を実行したユーザー本人のみがアプリ内通知を受信する。

**通知内容の概要**：成功時は緑色の背景でチェックマークアイコン付きの成功通知、失敗時は赤色の背景でキャンセルアイコン付きのエラー通知が表示される。メッセージはAPIからのレスポンスメッセージが使用される。

**期待されるアクション**：成功通知を受け取った場合、ユーザーは商品がウィッシュリストに保存されたことを確認できる。失敗通知を受け取った場合、ユーザーはログイン状態やネットワーク接続を確認し、再度操作を試みることが期待される。

## 通知種別

アプリ内通知（オーバーレイ通知）

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 同期（API応答後即時表示） |
| 優先度 | 中 |
| リトライ | なし |

### 送信先決定ロジック

操作を実行したユーザーのデバイス上のみに表示される。ユーザー特定やプッシュ通知のような外部送信は行わない。

## 通知テンプレート

### アプリ内通知の場合

| 項目 | 内容 |
|-----|------|
| タイトル（成功時） | "Success"（ローカライズ対応） |
| タイトル（失敗時） | "Failed"（ローカライズ対応） |
| 背景色（成功時） | Colors.green.shade400 |
| 背景色（失敗時） | Colors.red |
| アイコン（成功時） | Icons.check_circle_outline |
| アイコン（失敗時） | Icons.cancel_outlined |

### 本文テンプレート

```
成功時: {APIレスポンスのmessageフィールド}
失敗時: {APIレスポンスのerrorフィールドまたはgraphqlErrorsフィールド}
```

### 添付ファイル

該当なし（アプリ内通知のため）

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| successMsg | 成功時のメッセージ | AddWishListModel.message | Yes |
| error | 失敗時のメッセージ | AddWishListModel.graphqlErrors | Yes |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| 画面操作 | AddToWishListProductEvent発行 | API処理完了後 | ユーザーがウィッシュリスト追加ボタンをタップ |
| BLoC状態変化 | AddToWishListProductState.success | status == ProductStatus.success | API成功時 |
| BLoC状態変化 | AddToWishListProductState.fail | status == ProductStatus.fail | API失敗時 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| ネットワーク未接続 | checkInternetConnection()がfalseの場合、別途インターネット接続エラー通知が表示される |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[ユーザーがウィッシュリスト追加ボタンをタップ] --> B[checkInternetConnection実行]
    B -->|接続あり| C[AddToWishListProductEvent発行]
    B -->|接続なし| D[インターネットエラー通知表示]
    C --> E[ProductScreenBLoC処理]
    E --> F[repository.callWishListDeleteItem API呼び出し]
    F --> G{APIレスポンス}
    G -->|success == true| H[AddToWishListProductState.success発行]
    G -->|success == false| I[AddToWishListProductState.fail発行]
    H --> J[ShowMessage.successNotification表示]
    I --> K[ShowMessage.errorNotification表示]
    J --> L[終了]
    K --> L
    D --> L
```

## データベース参照・更新仕様

### 参照テーブル一覧

| テーブル名 | 用途 | 備考 |
|-----------|------|------|
| wishlist_items | ウィッシュリストアイテム | サーバー側で管理 |
| products | 商品情報 | 商品ID参照 |

### テーブル別参照項目詳細

#### wishlist_items（サーバー側）

| 参照項目（カラム名） | 用途 | 取得条件 |
|-------------------|------|---------|
| product_id | 追加対象商品 | イベントから取得 |
| customer_id | ユーザー識別 | ログイン情報から取得 |

### 更新テーブル一覧

| テーブル名 | 操作 | 概要 |
|-----------|------|------|
| wishlist_items | INSERT | ウィッシュリストに商品を追加 |

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| ネットワークエラー | インターネット接続なし | インターネット接続エラー通知を表示 |
| API失敗 | サーバーエラー等 | エラー通知を表示、graphqlErrorsメッセージを使用 |
| 未ログイン | ログインしていない状態 | ログイン要求またはエラー通知 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | なし（手動再操作） |
| リトライ間隔 | - |
| リトライ対象エラー | - |

## 配信設定

### レート制限

| 項目 | 内容 |
|-----|------|
| 1分あたり上限 | 制限なし |
| 1日あたり上限 | 制限なし |

### 配信時間帯

24時間対応（アプリ内通知のため制限なし）

## セキュリティ考慮事項

- ユーザー認証状態の確認：ウィッシュリスト機能はログインユーザーのみ利用可能
- 通知内容にはセンシティブな個人情報は含まれない
- API通信はHTTPSで暗号化

## 備考

- overlay_supportパッケージを使用してオーバーレイ通知を実装
- 通知は自動的に消去される（スワイプで手動消去も可能）
- isInWishlistフラグがトグルされ、UIにも反映される

---

## コードリーディングガイド

本通知を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示す。

### 推奨読解順序

#### Step 1: データ構造を理解する

まず、通知表示に使用されるデータ構造を理解することが重要。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | add_wishlist_model.dart | `lib/data_model/add_to_wishlist_model/add_wishlist_model.dart` | AddWishListModelクラスの構造、message/successフィールドの理解 |
| 1-2 | product_page_state.dart | `lib/screens/product_screen/bloc/product_page_state.dart` | AddToWishListProductStateクラス（行41-51）の状態管理 |

**読解のコツ**: Flutter BLoCパターンでは、Stateクラスがビジネスロジックの結果を保持する。success/failコンストラクタの使い分けに注目。

#### Step 2: エントリーポイントを理解する

処理の起点となるファイル・関数を特定。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | product_screen.dart | `lib/screens/product_screen/view/product_screen.dart` | BlocConsumerのlistener部分（行170-175）で通知表示処理を確認 |

**主要処理フロー**:
1. **行170**: `if (state is AddToWishListProductState)` - 状態判定
2. **行171-172**: `if (state.status == ProductStatus.fail)` - 失敗時のエラー通知
3. **行173-175**: `else if (state.status == ProductStatus.success)` - 成功時の成功通知

#### Step 3: BLoC処理層を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | product_page_bloc.dart | `lib/screens/product_screen/bloc/product_page_bloc.dart` | AddToWishListProductEvent処理（行76-103）のロジック |
| 3-2 | product_page_event.dart | `lib/screens/product_screen/bloc/product_page_event.dart` | AddToWishListProductEventクラス（行26-31）の定義 |

**主要処理フロー**:
- **行76-103**: イベント処理、API呼び出し、状態発行

#### Step 4: 通知表示処理を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | show_message.dart | `lib/widgets/show_message.dart` | successNotification（行18-36）、errorNotification（行38-56）メソッド |

**主要処理フロー**:
- **行18-36**: showSimpleNotificationで緑色の成功通知を表示
- **行38-56**: showSimpleNotificationで赤色のエラー通知を表示

### プログラム呼び出し階層図

```
ProductScreen (product_screen.dart)
    │
    ├─ BlocConsumer<ProductScreenBLoc, ProductBaseState>
    │      │
    │      └─ listener (行154-196)
    │             │
    │             ├─ AddToWishListProductState判定 (行170)
    │             │      ├─ ProductStatus.fail → ShowMessage.errorNotification
    │             │      └─ ProductStatus.success → ShowMessage.successNotification
    │             │
    │             └─ ShowMessage (show_message.dart)
    │                    ├─ successNotification (行18-36)
    │                    └─ errorNotification (行38-56)
    │
    └─ ProductScreenBLoc (product_page_bloc.dart)
           │
           └─ mapEventToState
                  │
                  └─ AddToWishListProductEvent処理 (行76-103)
                         │
                         └─ repository.callWishListDeleteItem
```

### データフロー図

```
[入力]               [処理]                    [出力]

ユーザー操作 ───▶ AddToWishListProductEvent ───▶ ProductScreenBLoc
(ハートタップ)              │                         │
                           │                         ▼
                           │              repository.callWishListDeleteItem
                           │                         │
                           │                         ▼
                           │               AddWishListModel (API Response)
                           │                         │
                           │                         ▼
                           │              AddToWishListProductState
                           │                         │
                           ▼                         ▼
              ShowMessage.successNotification / errorNotification
                           │
                           ▼
              オーバーレイ通知表示 (overlay_support)
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| product_screen.dart | `lib/screens/product_screen/view/product_screen.dart` | ソース | 商品詳細画面、通知トリガー |
| product_page_bloc.dart | `lib/screens/product_screen/bloc/product_page_bloc.dart` | ソース | BLoC処理、API呼び出し |
| product_page_state.dart | `lib/screens/product_screen/bloc/product_page_state.dart` | ソース | 状態定義 |
| product_page_event.dart | `lib/screens/product_screen/bloc/product_page_event.dart` | ソース | イベント定義 |
| show_message.dart | `lib/widgets/show_message.dart` | ソース | 通知表示ユーティリティ |
| add_wishlist_model.dart | `lib/data_model/add_to_wishlist_model/add_wishlist_model.dart` | ソース | APIレスポンスモデル |
| string_constants.dart | `lib/utils/string_constants.dart` | ソース | 文字列定数（success, failed等） |
