After entering their account details, new admins land on an **Inbox setup** screen that shows what we've already set up for them and lets them connect their conversation channels without leaving onboarding. It surfaces the auto-created live chat widget (and Help Center on Enterprise), highlights channels detected from their website, and offers a **View all** dialog to connect any supported channel inline. ### Channel status | Channel | How it connects | Status | PR | |---|---|---|---| | Live chat (Website) | Auto-created during setup | ✅ Done | https://github.com/chatwoot/chatwoot/pull/14314 | | WhatsApp | Meta embedded signup | ✅ Done | https://github.com/chatwoot/chatwoot/pull/14619 | | Facebook | Login + page picker | ✅ Done | https://github.com/chatwoot/chatwoot/pull/14619 | | Instagram | OAuth redirect | ✅ Done | https://github.com/chatwoot/chatwoot/pull/14568 | | TikTok | OAuth redirect | ✅ Done | https://github.com/chatwoot/chatwoot/pull/14569 | | LINE | Inline credential form | ✅ Done | — | | Telegram | Inline credential form | ✅ Done | — | | Gmail / Outlook | OAuth (email) | ⚠️ Disabled — coming in a follow-up | https://github.com/chatwoot/chatwoot/pull/14567 | | SMS / API / Voice / Other email | — | ⛔ Unavailable | — | --------- Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
206 lines
5.1 KiB
JavaScript
206 lines
5.1 KiB
JavaScript
export const INBOX_TYPES = {
|
|
WEB: 'Channel::WebWidget',
|
|
FB: 'Channel::FacebookPage',
|
|
TWITTER: 'Channel::TwitterProfile',
|
|
TWILIO: 'Channel::TwilioSms',
|
|
WHATSAPP: 'Channel::Whatsapp',
|
|
API: 'Channel::Api',
|
|
EMAIL: 'Channel::Email',
|
|
TELEGRAM: 'Channel::Telegram',
|
|
LINE: 'Channel::Line',
|
|
SMS: 'Channel::Sms',
|
|
INSTAGRAM: 'Channel::Instagram',
|
|
TIKTOK: 'Channel::Tiktok',
|
|
};
|
|
|
|
// Short channel-type slugs used to identify a channel without leaning on its
|
|
// Channel:: class name — e.g. onboarding channel cards and OAuth provider maps.
|
|
export const CHANNEL_TYPES = {
|
|
WEBSITE: 'website',
|
|
WHATSAPP: 'whatsapp',
|
|
FACEBOOK: 'facebook',
|
|
INSTAGRAM: 'instagram',
|
|
TIKTOK: 'tiktok',
|
|
TELEGRAM: 'telegram',
|
|
LINE: 'line',
|
|
GMAIL: 'gmail',
|
|
OUTLOOK: 'outlook',
|
|
SMS: 'sms',
|
|
API: 'api',
|
|
VOICE: 'voice',
|
|
EMAIL: 'email',
|
|
};
|
|
|
|
// Add providers here as they gain voice capability (e.g., WhatsApp Cloud, Twilio WhatsApp)
|
|
export const VOICE_CALL_PROVIDERS = {
|
|
TWILIO: 'twilio',
|
|
WHATSAPP: 'whatsapp',
|
|
};
|
|
|
|
export const getVoiceCallProvider = inbox => {
|
|
if (!inbox) return null;
|
|
|
|
// Callers pass either snake_case (raw API) or camelCase (after camelcaseKeys) shapes.
|
|
const channelType = inbox.channel_type || inbox.channelType;
|
|
const voiceEnabled = inbox.voice_enabled || inbox.voiceEnabled;
|
|
|
|
if (!voiceEnabled) return null;
|
|
|
|
if (channelType === INBOX_TYPES.TWILIO) return VOICE_CALL_PROVIDERS.TWILIO;
|
|
if (channelType === INBOX_TYPES.WHATSAPP)
|
|
return VOICE_CALL_PROVIDERS.WHATSAPP;
|
|
|
|
return null;
|
|
};
|
|
|
|
export const isVoiceCallEnabled = inbox => getVoiceCallProvider(inbox) !== null;
|
|
|
|
export const TWILIO_CHANNEL_MEDIUM = {
|
|
WHATSAPP: 'whatsapp',
|
|
SMS: 'sms',
|
|
};
|
|
|
|
const INBOX_ICON_MAP_FILL = {
|
|
[INBOX_TYPES.WEB]: 'i-ri-global-fill',
|
|
[INBOX_TYPES.FB]: 'i-ri-messenger-fill',
|
|
[INBOX_TYPES.TWITTER]: 'i-ri-twitter-x-fill',
|
|
[INBOX_TYPES.WHATSAPP]: 'i-ri-whatsapp-fill',
|
|
[INBOX_TYPES.API]: 'i-ri-cloudy-fill',
|
|
[INBOX_TYPES.EMAIL]: 'i-ri-mail-fill',
|
|
[INBOX_TYPES.TELEGRAM]: 'i-ri-telegram-fill',
|
|
[INBOX_TYPES.LINE]: 'i-ri-line-fill',
|
|
[INBOX_TYPES.INSTAGRAM]: 'i-ri-instagram-fill',
|
|
[INBOX_TYPES.TIKTOK]: 'i-ri-tiktok-fill',
|
|
};
|
|
|
|
const DEFAULT_ICON_FILL = 'i-ri-chat-1-fill';
|
|
|
|
const INBOX_ICON_MAP_LINE = {
|
|
[INBOX_TYPES.WEB]: 'i-woot-website',
|
|
[INBOX_TYPES.FB]: 'i-woot-messenger',
|
|
[INBOX_TYPES.TWITTER]: 'i-woot-x',
|
|
[INBOX_TYPES.WHATSAPP]: 'i-woot-whatsapp',
|
|
[INBOX_TYPES.API]: 'i-woot-api',
|
|
[INBOX_TYPES.EMAIL]: 'i-woot-mail',
|
|
[INBOX_TYPES.TELEGRAM]: 'i-woot-telegram',
|
|
[INBOX_TYPES.LINE]: 'i-woot-line',
|
|
[INBOX_TYPES.INSTAGRAM]: 'i-woot-instagram',
|
|
[INBOX_TYPES.TIKTOK]: 'i-woot-tiktok',
|
|
};
|
|
|
|
const DEFAULT_ICON_LINE = 'i-ri-chat-1-line';
|
|
|
|
export const getInboxSource = (type, phoneNumber, inbox) => {
|
|
switch (type) {
|
|
case INBOX_TYPES.WEB:
|
|
return inbox.website_url || '';
|
|
|
|
case INBOX_TYPES.TWILIO:
|
|
case INBOX_TYPES.WHATSAPP:
|
|
return phoneNumber || '';
|
|
|
|
case INBOX_TYPES.EMAIL:
|
|
return inbox.email || '';
|
|
|
|
default:
|
|
return '';
|
|
}
|
|
};
|
|
export const getReadableInboxByType = (type, phoneNumber) => {
|
|
switch (type) {
|
|
case INBOX_TYPES.WEB:
|
|
return 'livechat';
|
|
|
|
case INBOX_TYPES.FB:
|
|
return 'facebook';
|
|
|
|
case INBOX_TYPES.TWITTER:
|
|
return 'twitter';
|
|
|
|
case INBOX_TYPES.TWILIO:
|
|
return phoneNumber?.startsWith('whatsapp') ? 'whatsapp' : 'sms';
|
|
|
|
case INBOX_TYPES.WHATSAPP:
|
|
return 'whatsapp';
|
|
|
|
case INBOX_TYPES.API:
|
|
return 'api';
|
|
|
|
case INBOX_TYPES.EMAIL:
|
|
return 'email';
|
|
|
|
case INBOX_TYPES.TELEGRAM:
|
|
return 'telegram';
|
|
|
|
case INBOX_TYPES.LINE:
|
|
return 'line';
|
|
|
|
default:
|
|
return 'chat';
|
|
}
|
|
};
|
|
|
|
export const getInboxClassByType = (type, phoneNumber) => {
|
|
switch (type) {
|
|
case INBOX_TYPES.WEB:
|
|
return 'globe-desktop';
|
|
|
|
case INBOX_TYPES.FB:
|
|
return 'brand-facebook';
|
|
|
|
case INBOX_TYPES.TWITTER:
|
|
return 'brand-twitter';
|
|
|
|
case INBOX_TYPES.TWILIO:
|
|
return phoneNumber?.startsWith('whatsapp')
|
|
? 'brand-whatsapp'
|
|
: 'brand-sms';
|
|
|
|
case INBOX_TYPES.WHATSAPP:
|
|
return 'brand-whatsapp';
|
|
|
|
case INBOX_TYPES.API:
|
|
return 'cloud';
|
|
|
|
case INBOX_TYPES.EMAIL:
|
|
return 'mail';
|
|
|
|
case INBOX_TYPES.TELEGRAM:
|
|
return 'brand-telegram';
|
|
|
|
case INBOX_TYPES.LINE:
|
|
return 'brand-line';
|
|
|
|
case INBOX_TYPES.INSTAGRAM:
|
|
return 'brand-instagram';
|
|
|
|
case INBOX_TYPES.TIKTOK:
|
|
return 'brand-tiktok';
|
|
|
|
default:
|
|
return 'chat';
|
|
}
|
|
};
|
|
|
|
export const getInboxIconByType = (type, medium, variant = 'fill') => {
|
|
const iconMap =
|
|
variant === 'fill' ? INBOX_ICON_MAP_FILL : INBOX_ICON_MAP_LINE;
|
|
const defaultIcon =
|
|
variant === 'fill' ? DEFAULT_ICON_FILL : DEFAULT_ICON_LINE;
|
|
|
|
// Special case for Twilio (whatsapp and sms)
|
|
if (type === INBOX_TYPES.TWILIO && medium === 'whatsapp') {
|
|
return iconMap[INBOX_TYPES.WHATSAPP];
|
|
}
|
|
|
|
return iconMap[type] ?? defaultIcon;
|
|
};
|
|
|
|
export const getInboxWarningIconClass = (type, reauthorizationRequired) => {
|
|
const allowedInboxTypes = [INBOX_TYPES.FB, INBOX_TYPES.EMAIL];
|
|
if (allowedInboxTypes.includes(type) && reauthorizationRequired) {
|
|
return 'warning';
|
|
}
|
|
return '';
|
|
};
|