# 画面設計書 48-インボックス新規作成画面

## 概要

本ドキュメントは、Chatwootのインボックス新規作成画面（チャネル選択画面）の設計仕様を定義するものである。

### 本画面の処理概要

新しいインボックスを作成する際に、利用可能なチャネルタイプを一覧表示し、選択できる画面。Website、Facebook、WhatsApp、SMS、Email、API、Telegram、LINE、Instagram、TikTok、Voiceなど様々なチャネルタイプから選択できる。

**業務上の目的・背景**：インボックスは顧客からの問い合わせを受け付けるチャネルである。組織のビジネスニーズに応じて、Webサイトチャット、SNS連携、メール、SMSなど最適なチャネルを追加できる。この画面はインボックス作成フローの最初のステップであり、ユーザーはここでチャネルタイプを選択し、その後チャネル固有の設定画面に進む。

**画面へのアクセス方法**：インボックス一覧画面から「新規作成」ボタンをクリック、またはサイドメニューの「設定」>「インボックス」>「新規」から直接アクセス。管理者権限を持つユーザーのみがアクセス可能。

**主要な操作・処理内容**：
1. 利用可能なチャネルタイプの一覧表示
2. チャネルタイプの選択
3. 選択したチャネルの設定画面（ChannelFactory）への遷移

**画面遷移**：
- 遷移元：インボックス一覧画面
- 遷移先：チャネル設定画面（ChannelFactory）

**権限による表示制御**：管理者（administrator）のみがアクセス可能。一部のチャネルはアカウントの機能フラグによって表示/非表示が制御される。

## 関連機能

| 機能No | 機能名 | 関連種別 | 関連する操作・処理 |
|--------|--------|----------|------------------|
| 17 | インボックス基本管理 | 主機能 | 新しいインボックスのチャネル選択 |
| 18 | マルチチャネル対応 | 補助機能 | 利用可能なチャネルの表示 |

## 画面種別

選択

## URL/ルーティング

```
/app/accounts/:accountId/settings/inboxes/new
```

- ルート名: `settings_inbox_new`
- パラメータ:
  - `accountId`: アカウントID

## 入出力項目

なし（チャネル選択のみ）

## 表示項目

### チャネルリスト

| チャネルキー | タイトル | 説明 | アイコン | 備考 |
|-------------|---------|------|---------|------|
| website | Website | Webサイトにチャットウィジェットを追加 | i-woot-website | 常に表示 |
| facebook | Facebook | Facebookメッセンジャー連携 | i-woot-messenger | 常に表示 |
| whatsapp | WhatsApp | WhatsApp連携 | i-woot-whatsapp | 常に表示 |
| sms | SMS | SMS/テキストメッセージ連携 | i-woot-sms | 常に表示 |
| email | Email | メールチャネル | i-woot-mail | 常に表示 |
| api | API | APIチャネル（カスタム連携） | i-woot-api | 常に表示、名前はapiChannelNameで上書き可能 |
| telegram | Telegram | Telegram連携 | i-woot-telegram | 常に表示 |
| line | LINE | LINE連携 | i-woot-line | 常に表示 |
| instagram | Instagram | Instagram連携 | i-woot-instagram | 常に表示 |
| tiktok | TikTok | TikTok連携 | i-woot-tiktok | tiktokAppIdが設定されている場合のみ |
| voice | Voice | 音声チャネル | i-ri-phone-fill | 常に表示 |

## イベント仕様

### 1-チャネル選択イベント

**トリガー**: チャネルアイテムクリック

**処理フロー**:
1. ユーザーがチャネルアイテムをクリック
2. `initChannelAuth`メソッドが呼び出される
3. Vue Routerで`settings_inboxes_page_channel`ルートに遷移
4. パラメータにsub_page（チャネルキー）とaccountIdを設定
5. ChannelFactory.vueが選択されたチャネルに応じたコンポーネントを表示

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

なし（この画面での直接的なDB更新はなし）

## メッセージ仕様

なし（この画面での直接的なメッセージ表示はなし）

## 例外処理

| 例外状態 | 処理内容 |
|----------|---------|
| 権限不足 | 403エラー、アクセス拒否画面表示 |

## 備考

- TikTokチャネルはwindow.chatwootConfig.tiktokAppIdが設定されている場合のみ表示
- APIチャネルの表示名はglobalConfig.apiChannelNameで上書き可能
- 各チャネルの有効/無効はアカウントのenabledFeaturesで制御される可能性がある

---

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

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

### 推奨読解順序

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

まず、チャネルリストの構造を理解することが重要。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | ChannelList.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue` | channelList computed |

**読解のコツ**:
- channelList computedでチャネル定義を動的に生成
- 各チャネルにkey、title、description、iconを設定
- hasTiktokConfiguredでTikTokの表示制御

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

処理の起点となるVueコンポーネントを確認。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | ChannelList.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue` | メインコンポーネント |

**主要処理フロー**:
1. **L15-16**: useMapGetterでglobalConfig取得
2. **L18**: ref定義 - enabledFeatures
3. **L19-21**: hasTiktokConfigured computed
4. **L23-99**: channelList computed - チャネル定義
5. **L101-103**: initializeEnabledFeatures - 機能フラグ初期化
6. **L105-111**: initChannelAuth - チャネル選択時の遷移処理
7. **L113-115**: onMounted - 初期化処理

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

チャネルアイテム表示を担当するコンポーネント。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | ChannelItem.vue | `app/javascript/dashboard/components/widgets/ChannelItem.vue` | チャネルアイテム表示 |

#### Step 4: ルーティングを理解する

ルーティング設定を確認。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 4-1 | inbox.routes.js | `app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js` | ルーティング定義 |

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

```
ChannelList.vue
    │
    ├─ onMounted()
    │      └─ initializeEnabledFeatures()
    │             └─ currentAccount.features取得
    │
    ├─ channelList computed
    │      ├─ globalConfig.apiChannelName参照
    │      ├─ hasTiktokConfigured判定
    │      └─ チャネル定義配列生成
    │
    └─ ChannelItem (v-for)
           └─ @channel-item-click → initChannelAuth()
                  └─ router.push({ name: 'settings_inboxes_page_channel', params })
                         └─ ChannelFactory.vue
```

### データフロー図

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

初期化       ───▶  initializeEnabledFeatures()  ───▶  機能フラグ設定
                            │
globalConfig ───▶  channelList computed          ───▶  チャネル一覧表示
                            │
チャネル選択  ───▶  initChannelAuth()            ───▶  チャネル設定画面遷移
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| ChannelList.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue` | ソース | メイン画面コンポーネント |
| ChannelItem.vue | `app/javascript/dashboard/components/widgets/ChannelItem.vue` | ソース | チャネルアイテム表示 |
| ChannelFactory.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelFactory.vue` | ソース | チャネル設定ファクトリー |
| inbox.routes.js | `app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js` | 設定 | ルーティング定義 |
| Website.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Website.vue` | ソース | Websiteチャネル設定 |
| Facebook.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue` | ソース | Facebookチャネル設定 |
| Whatsapp.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Whatsapp.vue` | ソース | WhatsAppチャネル設定 |
| Email.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Email.vue` | ソース | Emailチャネル設定 |
| Sms.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Sms.vue` | ソース | SMSチャネル設定 |
| Api.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue` | ソース | APIチャネル設定 |
| Telegram.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue` | ソース | Telegramチャネル設定 |
| Line.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue` | ソース | LINEチャネル設定 |
| Instagram.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Instagram.vue` | ソース | Instagramチャネル設定 |
| Tiktok.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Tiktok.vue` | ソース | TikTokチャネル設定 |
| Voice.vue | `app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Voice.vue` | ソース | Voiceチャネル設定 |
