# 通知設計書 12-招待キャンセル成功

## 概要

本ドキュメントは、組織へのメンバー招待をキャンセルした際に表示される成功通知（トースト）の設計書である。

### 本通知の処理概要

組織管理画面で保留中の招待をキャンセルする操作を実行し、サーバー側の処理が成功した際に成功通知をトースト形式で表示する機能である。

**業務上の目的・背景**：組織管理者が誤って送信した招待や、不要になった招待を取り消す必要がある場合がある。この通知は、招待キャンセル操作が正常に完了したことをユーザーに即座に伝え、操作の完了を確認させるために必要である。明確なフィードバックにより、ユーザーは次のアクションに移ることができる。

**通知の送信タイミング**：DeleteInvitationModalコンポーネントでremoveInvitation Server Actionを呼び出した際に、結果オブジェクトのsuccessフィールドがtrueを返した時点で即座にトースト通知が表示される。

**通知の受信者**：キャンセル操作を実行した組織管理者。操作を実行しているブラウザセッション上にのみ表示される。

**通知内容の概要**：タイトル「Invitation canceled」とステータス「success」で緑色のトースト通知が表示される。説明文には「The invitation to {email} has been canceled.」の形式でキャンセル対象のメールアドレスが含まれる。

**期待されるアクション**：ユーザーは通知を確認後、メンバー管理画面で招待一覧が更新されていることを確認できる。必要に応じて新しい招待を送信することが可能。

## 通知種別

UI通知（トースト）

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 同期（クライアントサイド即時表示） |
| 優先度 | 中（成功通知） |
| リトライ | なし（UI通知のため再送は不要） |

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

操作を実行したユーザーのブラウザセッションに対して即座に表示される。ToastContextを通じて管理されるグローバルなトースト表示機能により、現在アクティブなウィンドウに通知が表示される。

## 通知テンプレート

### UI通知の場合

| 項目 | 内容 |
|-----|------|
| タイトル | Invitation canceled |
| 説明 | The invitation to {email} has been canceled. |
| ステータス | success |
| 表示位置 | header（画面上部） |

### 本文テンプレート

```
タイトル: Invitation canceled
説明: The invitation to {email} has been canceled.
ステータス: success
```

### 添付ファイル

該当なし（UI通知のため添付ファイルは存在しない）

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| email | キャンセル対象の招待メールアドレス | DeleteInvitationModalのprops | Yes |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| 画面操作 | DeleteInvitationModalのSubmitボタンクリック | removeInvitation Server Actionがsuccess: trueを返した場合 | 招待キャンセル処理の成功時 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| キャンセル失敗時 | result.success === falseの場合は本通知は表示されない（エラー通知が代わりに表示） |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[Submitボタンクリック] --> B[FormData作成]
    B --> C[removeInvitation Server Action呼び出し]
    C --> D{result.success?}
    D -->|true| E[toast関数呼び出し]
    E --> F[成功トースト通知表示]
    F --> G[モーダルクローズ]
    D -->|false| H[エラー通知表示]
    H --> I[モーダル維持]
```

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

### 参照テーブル一覧

| テーブル名 | 用途 | 備考 |
|-----------|------|------|
| invitations | 削除対象招待の確認 | 削除処理自体はServer Actionで実行 |

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

#### invitations

| 参照項目（カラム名） | 用途 | 取得条件 |
|-------------------|------|---------|
| id | 削除対象招待の識別 | invitationId === id |

### 更新テーブル一覧

| テーブル名 | 操作 | 概要 |
|-----------|------|------|
| invitations | DELETE | 指定された招待レコードの削除 |

#### invitationsテーブル

| 操作 | 項目（カラム名） | 更新値 | 備考 |
|-----|-----------------|-------|------|
| DELETE | - | - | invitationIdに一致するレコードを削除 |

## エラー処理

### エラーケース一覧

本通知は成功時のみ表示されるため、エラーケースは該当なし。

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | 該当なし（成功通知のため） |
| リトライ間隔 | なし |
| リトライ対象エラー | なし |

## 配信設定

### レート制限

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

### 配信時間帯

24時間対応（UI通知のため時間帯制限なし）

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

- メールアドレスは通知メッセージに含まれるが、操作者本人のセッションにのみ表示
- 認証・認可はServer Action側で実施済み
- キャンセル操作の権限確認は組織メンバー権限による

## 備考

- 本通知はRadix UI Toastコンポーネントを使用して実装されている
- トーストは一定時間後に自動的に非表示となる
- 成功後、モーダルは自動的にクローズされる
- revalidatePathによりメンバー一覧ページがリフレッシュされる

---

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

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

### 推奨読解順序

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

トースト通知のオプション型定義と招待モーダルのProps型を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | types.ts | `frontend/packages/ui/src/components/Toast/types.ts` | ToastOptions型（title, description, status）の定義を確認 |

**読解のコツ**: ToastOptionsのstatusフィールドが'success'の場合に成功スタイルが適用される。

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

招待キャンセルモーダルコンポーネントから通知が発火する流れを把握する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | DeleteInvitationModal.tsx | `frontend/apps/app/components/OrganizationMembersPage/components/DeleteInvitationModal/DeleteInvitationModal.tsx` | handleDelete関数でのtoast呼び出し（行56-60） |

**主要処理フロー**:
1. **行35-65**: handleDelete関数の定義
2. **行43**: removeInvitation Server Actionの呼び出し
3. **行45-53**: エラー時の分岐処理
4. **行56-60**: 成功時のトースト表示
5. **行63**: モーダルクローズ

#### Step 3: Server Actionを理解する

サーバー側の招待削除処理と成功レスポンスの形式を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | removeInvitation.ts | `frontend/apps/app/components/OrganizationMembersPage/components/DeleteInvitationModal/actions/removeInvitation.ts` | 成功時のレスポンス形式（行45-47）とrevalidatePath（行43） |

**主要処理フロー**:
- **行30-33**: Supabaseでの招待レコード削除
- **行43**: パスの再検証（ページリフレッシュ）
- **行45-47**: 成功レスポンスの返却

#### Step 4: トースト表示機構を理解する

トースト通知の表示ロジックを確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | Toast.tsx | `frontend/packages/ui/src/components/Toast/Toast.tsx` | ToastProvider、success状態のスタイル適用（行31） |
| 4-2 | useToast.tsx | `frontend/packages/ui/src/components/Toast/useToast.tsx` | useToastフックの実装 |

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

```
DeleteInvitationModal (handleDelete)
    |
    +-- removeInvitation (Server Action)
    |       |
    |       +-- supabase.from('invitations').delete()
    |       |
    |       +-- revalidatePath()
    |       |
    |       +-- return { success: true }
    |
    +-- toast({ title, description, status: 'success' })
    |       |
    |       +-- ToastContext.createHeaderToastItem()
    |               |
    |               +-- Toast (Radix UI Toast)
    |
    +-- onClose()
```

### データフロー図

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

FormData              removeInvitation            Result Object
(invitationId,  --->  Server Action     --->    { success: true }
organizationId)             |
                           |
                    supabase.delete()
                           |
                           v
                    revalidatePath()
                           |
                           v
                    [成功レスポンス]
                           |
                           v
                    toast() 関数呼び出し
                           |
                           v
                    [トースト通知表示]
                    title: "Invitation canceled"
                    status: "success"
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| DeleteInvitationModal.tsx | `frontend/apps/app/components/OrganizationMembersPage/components/DeleteInvitationModal/DeleteInvitationModal.tsx` | ソース | 招待キャンセルモーダルUI |
| removeInvitation.ts | `frontend/apps/app/components/OrganizationMembersPage/components/DeleteInvitationModal/actions/removeInvitation.ts` | ソース | 招待削除Server Action |
| Toast.tsx | `frontend/packages/ui/src/components/Toast/Toast.tsx` | ソース | トースト通知コンポーネント |
| useToast.tsx | `frontend/packages/ui/src/components/Toast/useToast.tsx` | ソース | トースト表示フック |
| Toast.module.css | `frontend/packages/ui/src/components/Toast/Toast.module.css` | スタイル | トースト通知のスタイル定義 |
