fixes: #11834 This pull request introduces TikTok channel integration, enabling users to connect and manage TikTok business accounts similarly to other supported social channels. The changes span backend API endpoints, authentication helpers, webhook handling, configuration, and frontend components to support TikTok as a first-class channel. **Key Notes** * This integration is only compatible with TikTok Business Accounts * Special permissions are required to access the TikTok [Business Messaging API](https://business-api.tiktok.com/portal/docs?id=1832183871604753). * The Business Messaging API is region-restricted and is currently unavailable to users in the EU. * Only TEXT, IMAGE, and POST_SHARE messages are currently supported due to limitations in the TikTok Business Messaging API * A message will be successfully sent only if it contains text alone or one image attachment. Messages with multiple attachments or those combining text and attachments will fail and receive a descriptive error status. * Messages sent directly from the TikTok App will be synced into the system * Initiating a new conversation from the system is not permitted due to limitations from the TikTok Business Messaging API. **Backend: TikTok Channel Integration** * Added `Api::V1::Accounts::Tiktok::AuthorizationsController` to handle TikTok OAuth authorization initiation, returning the TikTok authorization URL. * Implemented `Tiktok::CallbacksController` to handle TikTok OAuth callback, process authorization results, create or update channel/inbox, and handle errors or denied scopes. * Added `Webhooks::TiktokController` to receive and verify TikTok webhook events, including signature verification and event dispatching. * Created `Tiktok::IntegrationHelper` module for JWT-based token generation and verification for secure TikTok OAuth state management. **Configuration and Feature Flags** * Added TikTok app credentials (`TIKTOK_APP_ID`, `TIKTOK_APP_SECRET`) to allowed configs and app config, and registered TikTok as a feature in the super admin features YAML. [[1]](diffhunk://#diff-5e46e1d248631a1147521477d84a54f8ba6846ea21c61eca5f70042d960467f4R43) [[2]](diffhunk://#diff-8bf37a019cab1dedea458c437bd93e34af1d6e22b1672b1d43ef6eaa4dcb7732R69) [[3]](diffhunk://#diff-123164bea29f3c096b0d018702b090d5ae670760c729141bd4169a36f5f5c1caR74-R79) **Frontend: TikTok Channel UI and Messaging Support** * Added `TiktokChannel` API client for frontend TikTok authorization requests. * Updated channel icon mappings and tests to include TikTok (`Channel::Tiktok`). [[1]](diffhunk://#diff-b852739ed45def61218d581d0de1ba73f213f55570aa5eec52aaa08f380d0e16R16) [[2]](diffhunk://#diff-3cd3ae32e94ef85f1f2c4435abf0775cc0614fb37ee25d97945cd51573ef199eR64-R69) * Enabled TikTok as a supported channel in contact forms, channel widgets, and feature toggles. [[1]](diffhunk://#diff-ec59c85e1403aaed1a7de35971fe16b7033d5cd763be590903ebf8f1ca25a010R47) [[2]](diffhunk://#diff-ec59c85e1403aaed1a7de35971fe16b7033d5cd763be590903ebf8f1ca25a010R69) [[3]](diffhunk://#diff-725b90ca7e3a6837ec8291e9f57094f6a46b3ee00e598d16564f77f32cf354b0R26-R29) [[4]](diffhunk://#diff-725b90ca7e3a6837ec8291e9f57094f6a46b3ee00e598d16564f77f32cf354b0R51-R54) [[5]](diffhunk://#diff-725b90ca7e3a6837ec8291e9f57094f6a46b3ee00e598d16564f77f32cf354b0R68) * Updated message meta logic to support TikTok-specific message statuses (sent, delivered, read). [[1]](diffhunk://#diff-e41239cf8dda36c1bd1066dbb17588ae8868e56289072c74b3a6d7ef5abdd696R23) [[2]](diffhunk://#diff-e41239cf8dda36c1bd1066dbb17588ae8868e56289072c74b3a6d7ef5abdd696L63-R65) [[3]](diffhunk://#diff-e41239cf8dda36c1bd1066dbb17588ae8868e56289072c74b3a6d7ef5abdd696L81-R84) [[4]](diffhunk://#diff-e41239cf8dda36c1bd1066dbb17588ae8868e56289072c74b3a6d7ef5abdd696L103-R107) * Added support for embedded message attachments (e.g., TikTok embeds) with a new `EmbedBubble` component and updated message rendering logic. [[1]](diffhunk://#diff-c3d701caf27d9c31e200c6143c11a11b9d8826f78aa2ce5aa107470e6fdb9d7fR31) [[2]](diffhunk://#diff-047859f9368a46d6d20177df7d6d623768488ecc38a5b1e284f958fad49add68R1-R19) [[3]](diffhunk://#diff-c3d701caf27d9c31e200c6143c11a11b9d8826f78aa2ce5aa107470e6fdb9d7fR316) [[4]](diffhunk://#diff-cbc85e7c4c8d56f2a847d0b01cd48ef36e5f87b43023bff0520fdfc707283085R52) * Adjusted reply policy and UI messaging for TikTok's 48-hour reply window. [[1]](diffhunk://#diff-0d691f6a983bd89502f91253ecf22e871314545d1e3d3b106fbfc76bf6d8e1c7R208-R210) [[2]](diffhunk://#diff-0d691f6a983bd89502f91253ecf22e871314545d1e3d3b106fbfc76bf6d8e1c7R224-R226) These changes collectively enable end-to-end TikTok channel support, from configuration and OAuth flow to webhook processing and frontend message handling. ------------ # TikTok App Setup & Configuration 1. Grant access to the Business Messaging API ([Documentation](https://business-api.tiktok.com/portal/docs?id=1832184145137922)) 2. Set the app authorization redirect URL to `https://FRONTEND_URL/tiktok/callback` 3. Update the installation config with TikTok App ID and Secret 4. Create a Business Messaging Webhook configuration and set the callback url to `https://FRONTEND_URL/webhooks/tiktok` ([Documentation](https://business-api.tiktok.com/portal/docs?id=1832190670631937)) . You can do this by calling `Tiktok::AuthClient.update_webhook_callback` from rails console once you finish Tiktok channel configuration in super admin ( will be automated in future ) 5. Enable TikTok channel feature in an account --------- Co-authored-by: Sojan Jose <sojan@pepalo.com> Co-authored-by: iamsivin <iamsivin@gmail.com>
162 lines
4.3 KiB
JavaScript
162 lines
4.3 KiB
JavaScript
import { computed } from 'vue';
|
|
import { useMapGetter } from 'dashboard/composables/store';
|
|
import { useCamelCase } from 'dashboard/composables/useTransformKeys';
|
|
import { INBOX_TYPES } from 'dashboard/helper/inbox';
|
|
|
|
export const INBOX_FEATURES = {
|
|
REPLY_TO: 'replyTo',
|
|
REPLY_TO_OUTGOING: 'replyToOutgoing',
|
|
};
|
|
|
|
// This is a single source of truth for inbox features
|
|
// This is used to check if a feature is available for a particular inbox or not
|
|
export const INBOX_FEATURE_MAP = {
|
|
[INBOX_FEATURES.REPLY_TO]: [
|
|
INBOX_TYPES.FB,
|
|
INBOX_TYPES.WEB,
|
|
INBOX_TYPES.TWITTER,
|
|
INBOX_TYPES.WHATSAPP,
|
|
INBOX_TYPES.TELEGRAM,
|
|
INBOX_TYPES.TIKTOK,
|
|
INBOX_TYPES.API,
|
|
],
|
|
[INBOX_FEATURES.REPLY_TO_OUTGOING]: [
|
|
INBOX_TYPES.WEB,
|
|
INBOX_TYPES.TWITTER,
|
|
INBOX_TYPES.WHATSAPP,
|
|
INBOX_TYPES.TELEGRAM,
|
|
INBOX_TYPES.TIKTOK,
|
|
INBOX_TYPES.API,
|
|
],
|
|
};
|
|
|
|
/**
|
|
* Composable for handling inbox-related functionality
|
|
* @param {string|null} inboxId - Optional inbox ID. If not provided, uses current chat's inbox
|
|
* @returns {Object} An object containing inbox type checking functions
|
|
*/
|
|
export const useInbox = (inboxId = null) => {
|
|
const currentChat = useMapGetter('getSelectedChat');
|
|
const inboxGetter = useMapGetter('inboxes/getInboxById');
|
|
|
|
const inbox = computed(() => {
|
|
const targetInboxId = inboxId || currentChat.value?.inbox_id;
|
|
|
|
if (!targetInboxId) return null;
|
|
|
|
return useCamelCase(inboxGetter.value(targetInboxId), { deep: true });
|
|
});
|
|
|
|
const channelType = computed(() => {
|
|
return inbox.value?.channelType;
|
|
});
|
|
|
|
const isAPIInbox = computed(() => {
|
|
return channelType.value === INBOX_TYPES.API;
|
|
});
|
|
|
|
const isAFacebookInbox = computed(() => {
|
|
return channelType.value === INBOX_TYPES.FB;
|
|
});
|
|
|
|
const isAWebWidgetInbox = computed(() => {
|
|
return channelType.value === INBOX_TYPES.WEB;
|
|
});
|
|
|
|
const isATwilioChannel = computed(() => {
|
|
return channelType.value === INBOX_TYPES.TWILIO;
|
|
});
|
|
|
|
const isALineChannel = computed(() => {
|
|
return channelType.value === INBOX_TYPES.LINE;
|
|
});
|
|
|
|
const isAnEmailChannel = computed(() => {
|
|
return channelType.value === INBOX_TYPES.EMAIL;
|
|
});
|
|
|
|
const isATelegramChannel = computed(() => {
|
|
return channelType.value === INBOX_TYPES.TELEGRAM;
|
|
});
|
|
|
|
const whatsAppAPIProvider = computed(() => {
|
|
return inbox.value?.provider || '';
|
|
});
|
|
|
|
const isAMicrosoftInbox = computed(() => {
|
|
return isAnEmailChannel.value && inbox.value?.provider === 'microsoft';
|
|
});
|
|
|
|
const isAGoogleInbox = computed(() => {
|
|
return isAnEmailChannel.value && inbox.value?.provider === 'google';
|
|
});
|
|
|
|
const isATwilioSMSChannel = computed(() => {
|
|
const { medium: medium = '' } = inbox.value || {};
|
|
return isATwilioChannel.value && medium === 'sms';
|
|
});
|
|
|
|
const isASmsInbox = computed(() => {
|
|
return channelType.value === INBOX_TYPES.SMS || isATwilioSMSChannel.value;
|
|
});
|
|
|
|
const isATwilioWhatsAppChannel = computed(() => {
|
|
const { medium: medium = '' } = inbox.value || {};
|
|
return isATwilioChannel.value && medium === 'whatsapp';
|
|
});
|
|
|
|
const isAWhatsAppCloudChannel = computed(() => {
|
|
return (
|
|
channelType.value === INBOX_TYPES.WHATSAPP &&
|
|
whatsAppAPIProvider.value === 'whatsapp_cloud'
|
|
);
|
|
});
|
|
|
|
const is360DialogWhatsAppChannel = computed(() => {
|
|
return (
|
|
channelType.value === INBOX_TYPES.WHATSAPP &&
|
|
whatsAppAPIProvider.value === 'default'
|
|
);
|
|
});
|
|
|
|
const isAWhatsAppChannel = computed(() => {
|
|
return (
|
|
channelType.value === INBOX_TYPES.WHATSAPP ||
|
|
isATwilioWhatsAppChannel.value
|
|
);
|
|
});
|
|
|
|
const isAnInstagramChannel = computed(() => {
|
|
return channelType.value === INBOX_TYPES.INSTAGRAM;
|
|
});
|
|
|
|
const isATiktokChannel = computed(() => {
|
|
return channelType.value === INBOX_TYPES.TIKTOK;
|
|
});
|
|
|
|
const isAVoiceChannel = computed(() => {
|
|
return channelType.value === INBOX_TYPES.VOICE;
|
|
});
|
|
|
|
return {
|
|
inbox,
|
|
isAFacebookInbox,
|
|
isALineChannel,
|
|
isAPIInbox,
|
|
isASmsInbox,
|
|
isATelegramChannel,
|
|
isATwilioChannel,
|
|
isAWebWidgetInbox,
|
|
isAWhatsAppChannel,
|
|
isAMicrosoftInbox,
|
|
isAGoogleInbox,
|
|
isATwilioWhatsAppChannel,
|
|
isAWhatsAppCloudChannel,
|
|
is360DialogWhatsAppChannel,
|
|
isAnEmailChannel,
|
|
isAnInstagramChannel,
|
|
isATiktokChannel,
|
|
isAVoiceChannel,
|
|
};
|
|
};
|