# 通知設計書 15-メンバー招待失敗

## 概要

本ドキュメントは、組織へのメンバー招待処理が失敗した際に表示されるUI通知（トースト）の設計書である。

### 本通知の処理概要

組織管理画面でメンバー招待メールを送信しようとした際に、サーバー側の処理（バリデーション、データベース登録、またはメール送信）が失敗した場合にエラー通知をトースト形式で表示する機能である。

**業務上の目的・背景**：組織管理者がメンバーを招待しようとした際に、様々な理由（既存メンバー、重複招待、メールアドレス不正、サーバーエラーなど）で処理が失敗することがある。この通知は、ユーザーに操作が失敗したことを即座に伝え、エラー内容に応じた対処を促すために必要である。エラーが発生したことを明確に伝えることで、ユーザーが操作結果を誤解することを防ぎ、適切な対応を取れるようにする。

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

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

**通知内容の概要**：タイトル「Invitation failed」とステータス「error」で赤色のトースト通知が表示される。説明文には「We couldn't send an invite to {email}. Please try again.」の形式で招待先のメールアドレスが含まれる。

**期待されるアクション**：ユーザーは通知を確認後、入力内容を確認して再度招待操作を試みるか、問題が継続する場合はシステム管理者に連絡することが期待される。

## 通知種別

UI通知（トースト）

## 送信仕様

### 基本情報

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

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

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

## 通知テンプレート

### UI通知の場合

| 項目 | 内容 |
|-----|------|
| タイトル | Invitation failed |
| 説明 | We couldn't send an invite to {email}. Please try again. |
| ステータス | error |
| 表示位置 | header（画面上部） |

### 本文テンプレート

```
タイトル: Invitation failed
説明: We couldn't send an invite to {email}. Please try again.
ステータス: error
```

### 添付ファイル

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

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| email | 招待先のメールアドレス | InviteMemberModalのフォーム入力値 | Yes |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| 画面操作 | InviteMemberModalのInviteボタンクリック | inviteMember Server Actionがsuccess: falseを返した場合 | メンバー招待処理の失敗時 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| 招待成功時 | result.success === trueの場合は本通知は表示されない |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[Inviteボタンクリック] --> B[フォームバリデーション]
    B -->|OK| C[FormData作成]
    B -->|NG| D[バリデーションエラー表示]
    C --> E[inviteMember Server Action呼び出し]
    E --> F{result.success?}
    F -->|false| G[エラー状態をセット]
    G --> H[toast関数呼び出し]
    H --> I[エラートースト通知表示]
    I --> J[処理終了・モーダル維持]
    F -->|true| K[成功通知表示]
    K --> L[モーダルクローズ]
```

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

### 参照テーブル一覧

| テーブル名 | 用途 | 備考 |
|-----------|------|------|
| invitations | 重複招待の確認 | RPC関数で実行 |
| organization_members | 既存メンバーの確認 | RPC関数で実行 |

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

#### invitations

| 参照項目（カラム名） | 用途 | 取得条件 |
|-------------------|------|---------|
| email | 招待済みメールアドレスの確認 | 重複チェック |
| organization_id | 組織に対する招待の確認 | 組織IDで絞り込み |

### 更新テーブル一覧

本通知自体はデータベース更新を行わない。失敗時はロールバックされた状態となる。

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| バリデーションエラー | メールアドレス形式が不正 | "Please enter a valid email address"メッセージ表示 |
| 既存メンバーエラー | 既に組織メンバーのユーザー | RPC関数からのエラーメッセージ表示 |
| 重複招待エラー | 既に招待済みのメールアドレス | RPC関数からのエラーメッセージ表示 |
| RPC実行エラー | データベース処理でエラー発生 | "Failed to send invitation. Please try again."メッセージ表示 |
| メール送信エラー | 招待メール送信に失敗 | sendInvitationEmailからのエラーメッセージ表示 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | 0回（ユーザーによる手動再試行が必要） |
| リトライ間隔 | なし |
| リトライ対象エラー | なし |

## 配信設定

### レート制限

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

### 配信時間帯

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

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

- エラーメッセージには機密情報を含めない
- サーバーエラーの詳細はコンソールログにのみ出力し、ユーザー向けメッセージは汎用的なものとする
- 認証・認可はServer Action側で実施済み
- 招待対象のメールアドレスは通知に含まれるが、操作者のセッションにのみ表示

## 備考

- 本通知はRadix UI Toastコンポーネントを使用して実装されている
- トーストは一定時間後に自動的に非表示となる
- 失敗時、モーダルは開いたままユーザーが再試行可能
- フォーム内にもインラインエラーメッセージが表示される
- 複数の通知が連続して発生した場合、前の通知は閉じられ新しい通知が表示される

---

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

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

### 推奨読解順序

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

トースト通知のオプション型定義を理解する。

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

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

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

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

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

**主要処理フロー**:
1. **行56-110**: handleSubmit関数の定義
2. **行64-72**: クライアントサイドバリデーション
3. **行81**: inviteMember Server Actionの呼び出し
4. **行83-94**: エラー時の分岐処理
5. **行84**: エラー状態のセット（インラインエラー表示用）
6. **行87-91**: toast関数でエラー通知を生成
7. **行93**: return文で処理終了（モーダル維持）

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

サーバー側の招待処理とエラーレスポンスの形式を確認する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | inviteMember.ts | `frontend/apps/app/components/OrganizationMembersPage/components/InviteMemberModal/actions/inviteMember.ts` | エラー時のレスポンス形式（行43-47, 58-64, 67-72, 75-77, 86-91） |

**主要処理フロー**:
- **行43-47**: バリデーションエラー時のレスポンス
- **行58-64**: RPC実行エラー時のレスポンス
- **行67-72**: RPC結果のバリデーションエラー
- **行75-77**: RPC関数からのエラー（既存メンバー等）
- **行86-91**: メール送信エラー時のレスポンス

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

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

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | Toast.tsx | `frontend/packages/ui/src/components/Toast/Toast.tsx` | ToastProvider、ToastContextの実装 |
| 4-2 | useToast.tsx | `frontend/packages/ui/src/components/Toast/useToast.tsx` | useToastフックの実装 |

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

```
InviteMemberModal (handleSubmit)
    |
    +-- inviteMember (Server Action)
    |       |
    |       +-- v.safeParse() (バリデーション)
    |       |
    |       +-- supabase.rpc('invite_organization_member')
    |       |       |
    |       |       +-- エラー時: return { success: false, error }
    |       |
    |       +-- sendInvitationEmail()
    |               |
    |               +-- エラー時: return { success: false, error }
    |
    +-- setError() (インラインエラー表示)
    |
    +-- toast({ title, description, status: 'error' })
            |
            +-- ToastContext.createHeaderToastItem()
                    |
                    +-- Toast (Radix UI Toast)
```

### データフロー図

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

フォーム入力           inviteMember               Result Object
(email,         --->   Server Action    --->    { success: false,
organizationId)              |                    error: string }
                            |
              v.safeParse() / supabase.rpc()
              / sendInvitationEmail()
                            |
                    [いずれかでエラー発生]
                            |
                            v
                    setError() (インライン)
                            +
                    toast() 関数呼び出し
                            |
                            v
                    [トースト通知表示]
                    title: "Invitation failed"
                    status: "error"
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| InviteMemberModal.tsx | `frontend/apps/app/components/OrganizationMembersPage/components/InviteMemberModal/InviteMemberModal.tsx` | ソース | メンバー招待モーダルUI |
| inviteMember.ts | `frontend/apps/app/components/OrganizationMembersPage/components/InviteMemberModal/actions/inviteMember.ts` | ソース | メンバー招待Server Action |
| sendInvitationEmail.ts | `frontend/apps/app/components/OrganizationMembersPage/components/InviteMemberModal/actions/sendInvitationEmail.ts` | ソース | 招待メール送信処理 |
| 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` | スタイル | トースト通知のスタイル定義 |
| InviteMemberModal.module.css | `frontend/apps/app/components/OrganizationMembersPage/components/InviteMemberModal/InviteMemberModal.module.css` | スタイル | 招待モーダルのスタイル定義 |
