# 画面設計書 52-インボックス設定完了

## 概要

本ドキュメントは、Chatwootのインボックス設定完了画面の設計書です。インボックス作成ウィザードの最終ステップとして、設定完了を確認し、必要に応じてウィジェットコードやWebhook情報を表示します。

### 本画面の処理概要

インボックス作成フローの完了画面です。チャネルタイプに応じた設定情報（ウィジェットスクリプト、Webhook URL、QRコードなど）を表示し、次のステップへの案内を行います。

**業務上の目的・背景**：インボックス作成完了後、実際にチャネルを運用開始するために必要な設定情報（埋め込みコード、Webhook設定など）をユーザーに提供します。これにより、ユーザーは自分のWebサイトやサービスにChatwootを統合できます。

**画面へのアクセス方法**：インボックス作成ウィザードでエージェント追加後に自動遷移

**主要な操作・処理内容**：
1. インボックス設定完了メッセージの表示
2. チャネルタイプに応じた設定情報の表示（ウィジェットスクリプト、Webhook URL、QRコードなど）
3. 「詳細設定」ボタンでインボックス設定画面へ遷移
4. 「会話を始める」ボタンでインボックスダッシュボードへ遷移

**画面遷移**：
- 遷移元: インボックスエージェント追加画面（AddAgents）
- 遷移先: インボックス設定画面（Settings）、インボックスダッシュボード（inbox_dashboard）

**権限による表示制御**：管理者（administrator）のみがこの画面にアクセス可能

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 17 | インボックス基本管理 | 主機能 | インボックス設定の完了確認 |

## 画面種別

完了（ウィザード形式の最終ステップ）

## URL/ルーティング

- パス: `/app/accounts/:accountId/settings/inboxes/new/:inbox_id/finish`
- ルート名: `settings_inbox_finish`
- 権限: administrator

## 入出力項目

なし（読み取り専用画面）

## 表示項目

| 項目名 | 型 | 説明 | 表示条件 |
|--------|------|------|----------|
| title | String | 完了タイトル | 常時 |
| message | String | チャネルタイプに応じた完了メッセージ | 常時 |
| web_widget_script | String | Webウィジェット埋め込みコード | Webチャネルの場合 |
| callback_webhook_url | String | Webhook URL | Twilio/SMS/Line/WhatsApp Cloudの場合 |
| webhook_verify_token | String | Webhook検証トークン | WhatsApp Cloud（非embedded_signup）の場合 |
| qrCodes.whatsapp | String | WhatsApp QRコード | WhatsAppチャネルの場合 |
| qrCodes.messenger | String | Messenger QRコード | Facebookチャネルの場合 |
| qrCodes.telegram | String | Telegram QRコード | Telegramチャネルの場合 |
| DuplicateInboxBanner | Component | 重複インボックス警告 | Instagram + 既存Facebookインボックスがある場合 |

## イベント仕様

### 1-詳細設定ボタン押下

**トリガー**: 「詳細設定」ボタン押下

**処理フロー**:
1. `router-link`により`settings_inbox_show`へ遷移
2. パラメータとして`inboxId`を渡す

### 2-会話を始めるボタン押下

**トリガー**: 「会話を始める」ボタン押下

**処理フロー**:
1. `router-link`により`inbox_dashboard`へ遷移
2. パラメータとして`inboxId`を渡す

### 3-QRコード生成

**トリガー**: コンポーネントマウント時、currentInbox変更時

**処理フロー**:
1. `generateQRCodes()`が呼び出される
2. チャネルタイプに応じたQRコードを生成
   - WhatsApp: `https://wa.me/{phone_number}`
   - Messenger: `https://m.me/{page_id}`
   - Telegram: `https://t.me/{bot_name}`
3. `qrcode`ライブラリでData URLを生成
4. `qrCodes`リアクティブオブジェクトに格納

## データベース更新仕様

### 操作別データベース影響一覧

| 操作（イベント） | 対象テーブル | 操作種別 | 概要 |
|----------------|-------------|---------|------|
| なし | - | SELECT | 読み取り専用画面のためデータ更新なし |

## メッセージ仕様

| 種別 | キー | 表示条件 | メッセージ内容 |
|------|------|----------|--------------|
| 成功 | INBOX_MGMT.FINISH.TITLE | 常時 | 設定完了タイトル |
| 情報 | INBOX_MGMT.FINISH.MESSAGE | 通常チャネル | 標準完了メッセージ |
| 情報 | INBOX_MGMT.FINISH.WEBSITE_SUCCESS | Webウィジェット | ウィジェット設定完了メッセージ |
| 情報 | INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE | Twilioチャネル | Twilioコールバック設定案内 |
| 情報 | INBOX_MGMT.ADD.SMS.BANDWIDTH.API_CALLBACK.SUBTITLE | SMSチャネル | SMSコールバック設定案内 |
| 情報 | INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE | Lineチャネル | Lineコールバック設定案内 |
| 情報 | INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.SUBTITLE | WhatsApp Cloud | WhatsAppコールバック設定案内 |
| 情報 | INBOX_MGMT.FINISH.WHATSAPP_QR_INSTRUCTION | WhatsApp | QRコード使用案内 |
| 情報 | INBOX_MGMT.FINISH.MESSENGER_QR_INSTRUCTION | Messenger | QRコード使用案内 |
| 情報 | INBOX_MGMT.FINISH.TELEGRAM_QR_INSTRUCTION | Telegram | QRコード使用案内 |
| 警告 | INBOX_MGMT.ADD.INSTAGRAM.NEW_INBOX_SUGGESTION | Instagram重複時 | 重複インボックス警告 |

## 例外処理

| 例外状況 | 対応処理 |
|----------|----------|
| インボックスデータ未取得 | currentInboxが空の場合、QRコード生成をスキップ |
| QRコード生成エラー | コンソールにエラーログ出力、qrCodesを空文字に設定 |
| 識別子が無効 | コンソールに警告ログ出力、QRコード生成をスキップ |

## 備考

- チャネルタイプに応じて表示内容が動的に変化
- QRコードはqrcodeライブラリを使用してクライアントサイドで生成
- EmailチャネルでプロバイダーがないはEmailInboxFinishコンポーネントで追加設定を表示
- useInboxコンポーザブルでチャネルタイプを判定

---

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

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

### 推奨読解順序

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

インボックスのデータ構造とチャネルタイプの判定方法を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | useInbox.js | `app/javascript/dashboard/composables/useInbox.js` | チャネルタイプ判定ロジック |
| 1-2 | inbox.js | `app/javascript/dashboard/helper/inbox.js` | INBOX_TYPES定数定義 |

**読解のコツ**: Composables APIパターンで、インボックスIDを受け取りチャネルタイプに応じたフラグを返す。

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

Vueコンポーネントの構造とリアクティブな表示制御を理解する。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | FinishSetup.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue` | コンポーネント構造、条件付きレンダリング |

**主要処理フロー**:
1. **L24-26**: `currentInbox`をVuexストアから取得
2. **L29-39**: `useInbox`コンポーザブルでチャネルタイプフラグを取得
3. **L65-101**: `message` computed propertyでチャネルタイプに応じたメッセージを決定
4. **L103-125**: `generateQRCode()`でQRコード生成
5. **L127-150**: `generateQRCodes()`でチャネルタイプに応じたQRコード生成
6. **L153-161**: `watch`でcurrentInbox変更時にQRコード再生成

#### Step 3: ルーティング設定を理解する

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | inbox.routes.js | `app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js` | ルート定義、権限設定 |

**主要処理フロー**:
- **L65-72**: `settings_inbox_finish`ルートの定義

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

```
FinishSetup.vue (コンポーネント)
    │
    ├─ setup()
    │      ├─ useInbox(inbox_id)
    │      │      └─ チャネルタイプフラグ取得
    │      │
    │      └─ computed: currentInbox
    │             └─ store.getters['inboxes/getInbox'](inbox_id)
    │
    ├─ onMounted() / watch(currentInbox)
    │      └─ generateQRCodes()
    │             ├─ generateQRCode('whatsapp', phoneNumber)
    │             ├─ generateQRCode('messenger', pageId)
    │             └─ generateQRCode('telegram', botName)
    │                    └─ QRCode.toDataURL(url)
    │
    └─ template
           ├─ EmptyState
           ├─ woot-code (条件付き)
           ├─ EmailInboxFinish (条件付き)
           ├─ QRコード表示 (条件付き)
           └─ router-link (設定/会話ボタン)
```

### データフロー図

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

route.params.inbox_id ──▶ store.getters ───────────────▶ currentInbox
                          ['inboxes/getInbox']            (インボックスデータ)
                                │
                                ▼
                          useInbox(inbox_id)
                                │
                                ▼
                          isAWhatsAppChannel ────────────▶ 条件付きレンダリング
                          isAFacebookInbox                (表示内容決定)
                          isATelegramChannel
                          etc.
                                │
                                ▼
currentInbox.phone_number ─▶ generateQRCode() ──────────▶ qrCodes.whatsapp
currentInbox.page_id ──────▶ generateQRCode() ──────────▶ qrCodes.messenger
currentInbox.bot_name ─────▶ generateQRCode() ──────────▶ qrCodes.telegram
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| FinishSetup.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue` | ソース | メインコンポーネント |
| inbox.routes.js | `app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js` | ソース | ルーティング定義 |
| useInbox.js | `app/javascript/dashboard/composables/useInbox.js` | ソース | チャネルタイプ判定コンポーザブル |
| EmptyState.vue | `app/javascript/dashboard/components/widgets/EmptyState.vue` | ソース | 空状態表示コンポーネント |
| DuplicateInboxBanner.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/channels/instagram/DuplicateInboxBanner.vue` | ソース | 重複警告バナー |
| EmailInboxFinish.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/EmailInboxFinish.vue` | ソース | メール設定完了コンポーネント |
| Button.vue | `app/javascript/dashboard/components-next/button/Button.vue` | ソース | ボタンコンポーネント |
| qrcode | `node_modules/qrcode` | ライブラリ | QRコード生成 |
