# 通知設計書 7-チーム招待

## 概要

本ドキュメントは、Giselleプラットフォームにおけるチーム招待メール通知の設計仕様を定義するものである。ユーザーがチームに招待された際に送信されるメールの送信仕様、テンプレート構造、処理フローを記載する。

### 本通知の処理概要

本通知は、既存のGiselleユーザーまたは新規ユーザーをチームに招待した際に、招待情報とチーム参加リンクを送信する機能である。

**業務上の目的・背景**：Giselleではチーム単位でワークスペースを共有し、AIエージェントの構築・管理を協力して行うことができる。チーム招待機能により、組織内外のメンバーをチームに追加し、共同作業を開始できる。招待元のメンバー情報を含めることで、招待の正当性を受信者が確認できる。

**通知の送信タイミング**：チームオーナーまたは管理者がチーム管理画面から新しいメンバーを招待した際に自動送信される。アプリケーション側の招待機能がトリガーとなる。

**通知の受信者**：チームに招待されたユーザー。指定されたメールアドレス宛に送信される。既存のGiselleアカウントを持つユーザーでも、新規ユーザーでも招待可能。

**通知内容の概要**：招待先のチーム名、招待者のメールアドレス、チーム参加用のリンク、リクエストしていない場合の対応方法、Giselleチームからの署名が含まれる。

**期待されるアクション**：受信者はメール内の「Join the Team」ボタンをクリックし、チームへの参加を完了する。既存ユーザーはログイン後にチームに追加され、新規ユーザーはアカウント作成後にチームに追加される。

## 通知種別

メール（トランザクションメール）

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 非同期 |
| 優先度 | 高 |
| リトライ | アプリケーション設定に依存 |

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

チーム招待時に指定されたメールアドレスが送信先となる。招待者（inviter）の情報はセッションから取得される。

## 通知テンプレート

### メール通知の場合

| 項目 | 内容 |
|-----|------|
| 送信元アドレス | noreply@giselles.ai（アプリケーション設定に依存） |
| 送信元名称 | Giselle |
| 件名 | Invitation to join {チーム名} on Giselle |
| 形式 | HTML |

### 本文テンプレート

```
[Giselleロゴ]
You've been invited to collaborate in Giselle.
Join your team and start building together.
---
Team Invitation

You've been invited to join the team {チーム名} by {招待者メールアドレス}.

Click the button below to accept and access your shared workspace.

[Join the Team ボタン]

If you didn't expect this invitation, you can safely ignore this email.

—
The Giselle Team
https://giselles.ai
---
[フッター：Product / Blog / Documentation リンク、SNSアイコン、著作権表示]
```

### 添付ファイル

| ファイル名 | 形式 | 条件 | 説明 |
|----------|------|------|------|
| なし | - | - | 本通知には添付ファイルなし |

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| teamName | 招待先チーム名 | teamsテーブル.name | Yes |
| inviterEmail | 招待者のメールアドレス | セッションから取得 | Yes |
| joinUrl | チーム参加用URL | アプリケーション生成 | Yes |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| 画面操作 | チーム招待フォーム送信 | 有効なメールアドレスが入力されている | チームオーナー/管理者がメンバー招待を実行 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| 既存メンバー | 既にチームのメンバーである場合 |
| 無効なメールアドレス | メールアドレス形式が不正な場合 |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[チームオーナーがメンバー招待を実行] --> B[招待情報のバリデーション]
    B --> C{バリデーション結果}
    C -->|成功| D[招待レコード作成]
    C -->|失敗| E[エラーを管理者に通知]
    D --> F[参加URLを生成]
    F --> G[メールテンプレート展開]
    G --> H[メール送信実行]
    H --> I{送信結果}
    I -->|成功| J[招待ステータスを更新]
    I -->|失敗| K[エラーログ記録]
    J --> L[招待ユーザーがリンクをクリック]
    L --> M{既存アカウント?}
    M -->|はい| N[ログイン後チームに追加]
    M -->|いいえ| O[アカウント作成後チームに追加]
    N --> P[チーム参加完了]
    O --> P
    K --> Q[終了]
    E --> Q
    P --> Q
```

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

### 参照テーブル一覧

| テーブル名 | 用途 | 備考 |
|-----------|------|------|
| teams | チーム情報取得 | チーム名の取得 |
| team_members | 既存メンバー確認 | 重複招待防止 |
| auth.users | 招待者情報取得 | 招待者メールアドレスの取得 |

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

#### teams

| 参照項目（カラム名） | 用途 | 取得条件 |
|-------------------|------|---------|
| name | チーム名表示 | team_id で指定 |
| id | チーム識別 | 招待対象チーム |

#### team_members

| 参照項目（カラム名） | 用途 | 取得条件 |
|-------------------|------|---------|
| user_id | 既存メンバー確認 | team_id と email で検索 |

### 更新テーブル一覧

| テーブル名 | 操作 | 概要 |
|-----------|------|------|
| team_invitations | INSERT | 招待レコード作成 |
| team_members | INSERT | 招待承認時にメンバー追加 |

#### 送信ログテーブル

| 操作 | 項目（カラム名） | 更新値 | 備考 |
|-----|-----------------|-------|------|
| INSERT | status | sent | 送信成功時 |
| UPDATE | status | accepted | 招待承認時 |

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| 送信失敗 | SMTPサーバー接続エラー | リトライ処理を実行 |
| テンプレートエラー | テンプレート変数の展開失敗 | エラーログに記録、管理者に通知 |
| 宛先不正 | 無効なメールアドレス形式 | バリデーションエラーとして招待者に通知 |
| 既存メンバー | 既にチームのメンバー | エラーとして招待者に通知 |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | アプリケーション設定に依存 |
| リトライ間隔 | アプリケーション設定に依存 |
| リトライ対象エラー | 一時的な送信エラー |

## 配信設定

### レート制限

| 項目 | 内容 |
|-----|------|
| 1分あたり上限 | アプリケーション設定に依存 |
| 1日あたり上限 | アプリケーション設定に依存 |

### 配信時間帯

制限なし（24時間送信可能）

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

- 参加リンクにはトークンが含まれ、推測困難な文字列で構成される
- 招待リンクの有効期限はアプリケーション設定に依存
- TLS暗号化によりメール送信時のデータ保護を実施
- 招待者のメールアドレスが表示されるため、招待の正当性を受信者が確認可能

## 備考

- 本通知はアプリケーション側の招待機能と連携して動作する（Supabase招待とは別）
- テンプレートはReact Emailを使用して実装されている
- チーム名と招待者メールアドレスはhighlightTextスタイルで強調表示される

---

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

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

### 推奨読解順序

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

メールテンプレートに渡されるPropsの構造を理解することで、通知に必要なデータを把握できる。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | team-invitation.tsx | `apps/studio.giselles.ai/emails/transactional/team-invitation.tsx` | TeamInvitationEmailPropsインターフェース（31-35行目）でteamName、inviterEmail、joinUrlプロパティを確認 |

**読解のコツ**: プレースホルダー値がどのように設定されているか確認する。このテンプレートはSupabase変数ではなく、アプリケーション側から渡される変数を使用。

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

メールテンプレートコンポーネントの構造を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | team-invitation.tsx | `apps/studio.giselles.ai/emails/transactional/team-invitation.tsx` | TeamInvitationEmailコンポーネント（41-99行目）の構造 |

**主要処理フロー**:
1. **46-48行目**: teamName、inviterEmail、joinUrlを受け取り、未指定の場合はプレースホルダーを使用
2. **55行目**: Previewにチーム名を動的に含める
3. **58-61行目**: EmailHeaderに見出しとサブ見出しを設定
4. **66行目**: Headingコンポーネントで「Team Invitation」見出しを表示
5. **67-71行目**: 招待説明テキスト（チーム名と招待者メールを強調表示）
6. **75-77行目**: Join the Teamボタンの配置

#### Step 3: 共通コンポーネントを理解する

メールの共通レイアウトとスタイルを理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | email-header.tsx | `apps/studio.giselles.ai/emails/components/email-header.tsx` | ヘッダーコンポーネント（見出し・サブ見出し表示） |
| 3-2 | email-footer.tsx | `apps/studio.giselles.ai/emails/components/email-footer.tsx` | フッターコンポーネント |
| 3-3 | email-styles.ts | `apps/studio.giselles.ai/emails/components/email-styles.ts` | h1スタイル、buttonスタイル、highlightTextスタイル（111-120行目） |

**主要処理フロー**:
- **email-styles.ts 111-120行目**: highlightTextスタイル（背景色#C3DCF8、太字）

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

```
TeamInvitationEmail (team-invitation.tsx)
    │
    ├─ EmailFonts (email-fonts.tsx)
    │      └─ フォント読み込み設定
    │
    ├─ EmailHeader (email-header.tsx)
    │      ├─ ロゴ表示
    │      ├─ 見出し: "You've been invited to collaborate in Giselle."
    │      └─ サブ見出し: "Join your team and start building together."
    │
    ├─ 本文セクション
    │      ├─ Heading: "Team Invitation"（h1スタイル適用）
    │      ├─ 説明テキスト（チーム名・招待者メール強調、highlightTextスタイル適用）
    │      ├─ Join the Teamボタン（buttonスタイル適用）
    │      ├─ 不正招待時の案内
    │      └─ 署名セクション（signatureTextスタイル適用）
    │
    └─ EmailFooter (email-footer.tsx)
           └─ リンク、SNSアイコン、著作権表示
```

### データフロー図

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

アプリケーションからの
teamName + inviterEmail ───▶ TeamInvitationEmail ───▶ HTMLメール
+ joinUrl                    コンポーネント               （招待先メールアドレス宛に
                                                           アプリ経由で送信）
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| team-invitation.tsx | `apps/studio.giselles.ai/emails/transactional/team-invitation.tsx` | ソース | チーム招待メールテンプレート |
| email-header.tsx | `apps/studio.giselles.ai/emails/components/email-header.tsx` | ソース | メールヘッダーコンポーネント |
| email-footer.tsx | `apps/studio.giselles.ai/emails/components/email-footer.tsx` | ソース | メールフッターコンポーネント |
| email-fonts.tsx | `apps/studio.giselles.ai/emails/components/email-fonts.tsx` | ソース | フォント設定コンポーネント |
| email-styles.ts | `apps/studio.giselles.ai/emails/components/email-styles.ts` | ソース | 共通スタイル定義 |
