mirror of
				https://github.com/lingble/chatwoot.git
				synced 2025-11-04 04:57:51 +00:00 
			
		
		
		
	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>
		
			
				
	
	
		
			155 lines
		
	
	
		
			4.1 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			155 lines
		
	
	
		
			4.1 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.API,
 | 
						|
  ],
 | 
						|
  [INBOX_FEATURES.REPLY_TO_OUTGOING]: [
 | 
						|
    INBOX_TYPES.WEB,
 | 
						|
    INBOX_TYPES.TWITTER,
 | 
						|
    INBOX_TYPES.WHATSAPP,
 | 
						|
    INBOX_TYPES.TELEGRAM,
 | 
						|
    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 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,
 | 
						|
    isAVoiceChannel,
 | 
						|
  };
 | 
						|
};
 |