scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-02 12:08:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add QR codes for WhatsApp, Messenger, and Telegram on inbox finish page (#12257)

Browse Source 
Added QR code generation for multiple messaging platforms on the inbox
finish setup page. So users can scan QR codes to instantly test their
newly created channels.

**Supported Platforms**

  - **WhatsApp**: QR code for `https://wa.me/{phone_number}`
    - Supports both WhatsApp Cloud and Twilio WhatsApp inboxes
  - **Facebook Messenger**: QR code for `https://m.me/{page_id}`
    - All Facebook page inboxes
  - **Telegram**: QR code for `https://t.me/{bot_name}`
    - All Telegram bot inboxes

**How to test the changes**
You can test these changes by navigating to this URL
`{BASE_URL}/app/accounts/{account_id}/settings/inboxes/new/{inbox_id}/finish`
and simply replacing the inbox ID with one you've already created.

**Preview**

<img width="2432" height="1474" alt="CleanShot 2025-08-21 at 15 40
59@2x"
src="https://github.com/user-attachments/assets/4226133b-9793-48ca-bf79-903b7e003ef3"
/>

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
This commit is contained in:
Muhsin Keloth
2025-08-27 11:53:03 +05:30
committed by GitHub
parent 068538e3d6
commit b18341ea6e
8 changed files with 661 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/javascript/dashboard/composables/useInbox.js
View File

@@ -29,21 +29,24 @@ export const INBOX_FEATURE_MAP = {
};
/**
* Composable for handling macro-related functionality
* @returns {Object} An object containing the getMacroDropdownValues function
* 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 = () => {
export const useInbox = (inboxId = null) => {
const currentChat = useMapGetter('getSelectedChat');
const inboxGetter = useMapGetter('inboxes/getInboxById');
const inbox = computed(() => {
const inboxId = currentChat.value.inbox_id;
const targetInboxId = inboxId || currentChat.value?.inbox_id;
return useCamelCase(inboxGetter.value(inboxId), { deep: true });
if (!targetInboxId) return null;
return useCamelCase(inboxGetter.value(targetInboxId), { deep: true });
});
const channelType = computed(() => {
return inbox.value.channelType;
return inbox.value?.channelType;
});
const isAPIInbox = computed(() => {
@@ -75,19 +78,19 @@ export const useInbox = () => {
});
const whatsAppAPIProvider = computed(() => {
return inbox.value.provider || '';
return inbox.value?.provider || '';
});
const isAMicrosoftInbox = computed(() => {
return isAnEmailChannel.value && inbox.value.provider === 'microsoft';
return isAnEmailChannel.value && inbox.value?.provider === 'microsoft';
});
const isAGoogleInbox = computed(() => {
return isAnEmailChannel.value && inbox.value.provider === 'google';
return isAnEmailChannel.value && inbox.value?.provider === 'google';
});
const isATwilioSMSChannel = computed(() => {
const { medium: medium = '' } = inbox.value;
const { medium: medium = '' } = inbox.value || {};
return isATwilioChannel.value && medium === 'sms';
});
@@ -96,7 +99,7 @@ export const useInbox = () => {
});
const isATwilioWhatsAppChannel = computed(() => {
const { medium: medium = '' } = inbox.value;
const { medium: medium = '' } = inbox.value || {};
return isATwilioChannel.value && medium === 'whatsapp';
});