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

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>

app/javascript/dashboard/composables/spec/useInbox.spec.js

@@ -0,0 +1,277 @@
+import { describe, it, expect, vi } from 'vitest';
+import { defineComponent, h } from 'vue';
+import { createStore } from 'vuex';
+import { mount } from '@vue/test-utils';
+import { useInbox } from '../useInbox';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+
+vi.mock('dashboard/composables/store');
+vi.mock('dashboard/composables/useTransformKeys');
+
+// Mock the dependencies
+const mockStore = createStore({
+  modules: {
+    conversations: {
+      namespaced: false,
+      getters: {
+        getSelectedChat: () => ({ inbox_id: 1 }),
+      },
+    },
+    inboxes: {
+      namespaced: true,
+      getters: {
+        getInboxById: () => id => {
+          const inboxes = {
+            1: {
+              id: 1,
+              channel_type: INBOX_TYPES.WHATSAPP,
+              provider: 'whatsapp_cloud',
+            },
+            2: { id: 2, channel_type: INBOX_TYPES.FB },
+            3: { id: 3, channel_type: INBOX_TYPES.TWILIO, medium: 'sms' },
+            4: { id: 4, channel_type: INBOX_TYPES.TWILIO, medium: 'whatsapp' },
+            5: {
+              id: 5,
+              channel_type: INBOX_TYPES.EMAIL,
+              provider: 'microsoft',
+            },
+            6: { id: 6, channel_type: INBOX_TYPES.EMAIL, provider: 'google' },
+            7: {
+              id: 7,
+              channel_type: INBOX_TYPES.WHATSAPP,
+              provider: 'default',
+            },
+            8: { id: 8, channel_type: INBOX_TYPES.TELEGRAM },
+            9: { id: 9, channel_type: INBOX_TYPES.LINE },
+            10: { id: 10, channel_type: INBOX_TYPES.WEB },
+            11: { id: 11, channel_type: INBOX_TYPES.API },
+            12: { id: 12, channel_type: INBOX_TYPES.SMS },
+            13: { id: 13, channel_type: INBOX_TYPES.INSTAGRAM },
+            14: { id: 14, channel_type: INBOX_TYPES.VOICE },
+          };
+          return inboxes[id] || null;
+        },
+      },
+    },
+  },
+});
+
+// Mock useMapGetter to return mock store getters
+vi.mock('dashboard/composables/store', () => ({
+  useMapGetter: vi.fn(getter => {
+    if (getter === 'getSelectedChat') {
+      return { value: { inbox_id: 1 } };
+    }
+    if (getter === 'inboxes/getInboxById') {
+      return { value: mockStore.getters['inboxes/getInboxById'] };
+    }
+    return { value: null };
+  }),
+}));
+
+// Mock useCamelCase to return the data as-is for testing
+vi.mock('dashboard/composables/useTransformKeys', () => ({
+  useCamelCase: vi.fn(data => ({
+    ...data,
+    channelType: data?.channel_type,
+  })),
+}));
+
+describe('useInbox', () => {
+  const createTestComponent = inboxId =>
+    defineComponent({
+      setup() {
+        return useInbox(inboxId);
+      },
+      render() {
+        return h('div');
+      },
+    });
+
+  describe('with current chat context (no inboxId provided)', () => {
+    it('identifies WhatsApp Cloud channel correctly', () => {
+      const wrapper = mount(createTestComponent(), {
+        global: { plugins: [mockStore] },
+      });
+
+      expect(wrapper.vm.isAWhatsAppCloudChannel).toBe(true);
+      expect(wrapper.vm.isAWhatsAppChannel).toBe(true);
+    });
+
+    it('returns correct inbox object', () => {
+      const wrapper = mount(createTestComponent(), {
+        global: { plugins: [mockStore] },
+      });
+
+      expect(wrapper.vm.inbox).toEqual({
+        id: 1,
+        channel_type: INBOX_TYPES.WHATSAPP,
+        provider: 'whatsapp_cloud',
+        channelType: INBOX_TYPES.WHATSAPP,
+      });
+    });
+  });
+
+  describe('with explicit inboxId provided', () => {
+    it('identifies Facebook inbox correctly', () => {
+      const wrapper = mount(createTestComponent(2), {
+        global: { plugins: [mockStore] },
+      });
+
+      expect(wrapper.vm.isAFacebookInbox).toBe(true);
+      expect(wrapper.vm.isAWhatsAppChannel).toBe(false);
+    });
+
+    it('identifies Twilio SMS channel correctly', () => {
+      const wrapper = mount(createTestComponent(3), {
+        global: { plugins: [mockStore] },
+      });
+
+      expect(wrapper.vm.isATwilioChannel).toBe(true);
+      expect(wrapper.vm.isASmsInbox).toBe(true);
+      expect(wrapper.vm.isAWhatsAppChannel).toBe(false);
+    });
+
+    it('identifies Twilio WhatsApp channel correctly', () => {
+      const wrapper = mount(createTestComponent(4), {
+        global: { plugins: [mockStore] },
+      });
+
+      expect(wrapper.vm.isATwilioChannel).toBe(true);
+      expect(wrapper.vm.isAWhatsAppChannel).toBe(true);
+      expect(wrapper.vm.isATwilioWhatsAppChannel).toBe(true);
+      expect(wrapper.vm.isAWhatsAppCloudChannel).toBe(false);
+    });
+
+    it('identifies Microsoft email inbox correctly', () => {
+      const wrapper = mount(createTestComponent(5), {
+        global: { plugins: [mockStore] },
+      });
+
+      expect(wrapper.vm.isAnEmailChannel).toBe(true);
+      expect(wrapper.vm.isAMicrosoftInbox).toBe(true);
+      expect(wrapper.vm.isAGoogleInbox).toBe(false);
+    });
+
+    it('identifies Google email inbox correctly', () => {
+      const wrapper = mount(createTestComponent(6), {
+        global: { plugins: [mockStore] },
+      });
+
+      expect(wrapper.vm.isAnEmailChannel).toBe(true);
+      expect(wrapper.vm.isAGoogleInbox).toBe(true);
+      expect(wrapper.vm.isAMicrosoftInbox).toBe(false);
+    });
+
+    it('identifies 360Dialog WhatsApp channel correctly', () => {
+      const wrapper = mount(createTestComponent(7), {
+        global: { plugins: [mockStore] },
+      });
+
+      expect(wrapper.vm.is360DialogWhatsAppChannel).toBe(true);
+      expect(wrapper.vm.isAWhatsAppChannel).toBe(true);
+      expect(wrapper.vm.isAWhatsAppCloudChannel).toBe(false);
+    });
+
+    it('identifies all other channel types correctly', () => {
+      // Test Telegram
+      let wrapper = mount(createTestComponent(8), {
+        global: { plugins: [mockStore] },
+      });
+      expect(wrapper.vm.isATelegramChannel).toBe(true);
+
+      // Test Line
+      wrapper = mount(createTestComponent(9), {
+        global: { plugins: [mockStore] },
+      });
+      expect(wrapper.vm.isALineChannel).toBe(true);
+
+      // Test Web Widget
+      wrapper = mount(createTestComponent(10), {
+        global: { plugins: [mockStore] },
+      });
+      expect(wrapper.vm.isAWebWidgetInbox).toBe(true);
+
+      // Test API
+      wrapper = mount(createTestComponent(11), {
+        global: { plugins: [mockStore] },
+      });
+      expect(wrapper.vm.isAPIInbox).toBe(true);
+
+      // Test SMS
+      wrapper = mount(createTestComponent(12), {
+        global: { plugins: [mockStore] },
+      });
+      expect(wrapper.vm.isASmsInbox).toBe(true);
+
+      // Test Instagram
+      wrapper = mount(createTestComponent(13), {
+        global: { plugins: [mockStore] },
+      });
+      expect(wrapper.vm.isAnInstagramChannel).toBe(true);
+
+      // Test Voice
+      wrapper = mount(createTestComponent(14), {
+        global: { plugins: [mockStore] },
+      });
+      expect(wrapper.vm.isAVoiceChannel).toBe(true);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('handles non-existent inbox ID gracefully', () => {
+      const wrapper = mount(createTestComponent(999), {
+        global: { plugins: [mockStore] },
+      });
+
+      // useCamelCase still processes null data, so we get an object with channelType: undefined
+      expect(wrapper.vm.inbox).toEqual({ channelType: undefined });
+      expect(wrapper.vm.isAWhatsAppChannel).toBe(false);
+      expect(wrapper.vm.isAFacebookInbox).toBe(false);
+    });
+
+    it('handles inbox with no data correctly', () => {
+      // The mock will return null for non-existent IDs, but useCamelCase processes it
+      const wrapper = mount(createTestComponent(999), {
+        global: { plugins: [mockStore] },
+      });
+
+      expect(wrapper.vm.inbox.channelType).toBeUndefined();
+      expect(wrapper.vm.isAWhatsAppChannel).toBe(false);
+      expect(wrapper.vm.isAFacebookInbox).toBe(false);
+      expect(wrapper.vm.isATelegramChannel).toBe(false);
+    });
+  });
+
+  describe('return object completeness', () => {
+    it('returns all expected properties', () => {
+      const wrapper = mount(createTestComponent(1), {
+        global: { plugins: [mockStore] },
+      });
+
+      const expectedProperties = [
+        'inbox',
+        'isAFacebookInbox',
+        'isALineChannel',
+        'isAPIInbox',
+        'isASmsInbox',
+        'isATelegramChannel',
+        'isATwilioChannel',
+        'isAWebWidgetInbox',
+        'isAWhatsAppChannel',
+        'isAMicrosoftInbox',
+        'isAGoogleInbox',
+        'isATwilioWhatsAppChannel',
+        'isAWhatsAppCloudChannel',
+        'is360DialogWhatsAppChannel',
+        'isAnEmailChannel',
+        'isAnInstagramChannel',
+        'isAVoiceChannel',
+      ];
+
+      expectedProperties.forEach(prop => {
+        expect(wrapper.vm).toHaveProperty(prop);
+      });
+    });
+  });
+});

app/javascript/dashboard/composables/useInbox.js

@@ -29,21 +29,24 @@ export const INBOX_FEATURE_MAP = {
 };
 
 /**
- * Composable for handling macro-related functionality
+ * Composable for handling inbox-related functionality
- * @returns {Object} An object containing the getMacroDropdownValues function
+ * @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';
   });
 

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -478,7 +478,10 @@
       "MESSAGE": "You can now engage with your customers through your new Channel. Happy supporting",
       "BUTTON_TEXT": "Take me there",
       "MORE_SETTINGS": "More settings",
-      "WEBSITE_SUCCESS": "You have successfully finished creating a website channel. Copy the code shown below and paste it on your website. Next time a customer use the live chat, the conversation will automatically appear on your inbox."
+      "WEBSITE_SUCCESS": "You have successfully finished creating a website channel. Copy the code shown below and paste it on your website. Next time a customer use the live chat, the conversation will automatically appear on your inbox.",
+      "WHATSAPP_QR_INSTRUCTION": "Scan the QR code above to quickly test your WhatsApp inbox",
+      "MESSENGER_QR_INSTRUCTION": "Scan the QR code above to quickly test your Facebook Messenger inbox",
+      "TELEGRAM_QR_INSTRUCTION": "Scan the QR code above to quickly test your Telegram inbox"
     },
     "REAUTH": "Reauthorize",
     "VIEW": "View",

app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue

@@ -1,101 +1,169 @@
-<script>
+<script setup>
+import { computed, onMounted, reactive, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
+import QRCode from 'qrcode';
 import EmptyState from '../../../../components/widgets/EmptyState.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import DuplicateInboxBanner from './channels/instagram/DuplicateInboxBanner.vue';
+import { useInbox } from 'dashboard/composables/useInbox';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
-export default {
+
-  components: {
+const { t } = useI18n();
-    EmptyState,
+const route = useRoute();
-    NextButton,
+const store = useStore();
-    DuplicateInboxBanner,
+
+const qrCodes = reactive({
+  whatsapp: '',
+  messenger: '',
+  telegram: '',
+});
+
+const currentInbox = computed(() =>
+  store.getters['inboxes/getInbox'](route.params.inbox_id)
+);
+
+// Use useInbox composable with the inbox ID
+const {
+  isAWhatsAppCloudChannel,
+  isATwilioChannel,
+  isASmsInbox,
+  isALineChannel,
+  isAnEmailChannel,
+  isAWhatsAppChannel,
+  isAFacebookInbox,
+  isATelegramChannel,
+} = useInbox(route.params.inbox_id);
+
+const hasDuplicateInstagramInbox = computed(() => {
+  const instagramId = currentInbox.value.instagram_id;
+  const facebookInbox =
+    store.getters['inboxes/getFacebookInboxByInstagramId'](instagramId);
+
+  return (
+    currentInbox.value.channel_type === INBOX_TYPES.INSTAGRAM && facebookInbox
+  );
+});
+
+const shouldShowWhatsAppWebhookDetails = computed(() => {
+  return (
+    isAWhatsAppCloudChannel.value &&
+    currentInbox.value.provider_config?.source !== 'embedded_signup'
+  );
+});
+
+const isWhatsAppEmbeddedSignup = computed(() => {
+  return (
+    isAWhatsAppCloudChannel.value &&
+    currentInbox.value.provider_config?.source === 'embedded_signup'
+  );
+});
+
+const message = computed(() => {
+  if (isATwilioChannel.value) {
+    return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t(
+      'INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE'
+    )}`;
+  }
+
+  if (isASmsInbox.value) {
+    return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t(
+      'INBOX_MGMT.ADD.SMS.BANDWIDTH.API_CALLBACK.SUBTITLE'
+    )}`;
+  }
+
+  if (isALineChannel.value) {
+    return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t(
+      'INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE'
+    )}`;
+  }
+
+  if (isAWhatsAppCloudChannel.value && shouldShowWhatsAppWebhookDetails.value) {
+    return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t(
+      'INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.SUBTITLE'
+    )}`;
+  }
+
+  if (isAnEmailChannel.value && !currentInbox.value.provider) {
+    return t('INBOX_MGMT.ADD.EMAIL_CHANNEL.FINISH_MESSAGE');
+  }
+
+  if (currentInbox.value.web_widget_script) {
+    return t('INBOX_MGMT.FINISH.WEBSITE_SUCCESS');
+  }
+
+  if (isWhatsAppEmbeddedSignup.value) {
+    return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t(
+      'INBOX_MGMT.FINISH.WHATSAPP_QR_INSTRUCTION'
+    )}`;
+  }
+
+  return t('INBOX_MGMT.FINISH.MESSAGE');
+});
+
+async function generateQRCode(platform, identifier) {
+  if (!identifier || !identifier.trim()) {
+    // eslint-disable-next-line no-console
+    console.warn(`Invalid identifier for ${platform} QR code`);
+    return;
+  }
+
+  try {
+    const platformUrls = {
+      whatsapp: id => `https://wa.me/${id}`,
+      messenger: id => `https://m.me/${id}`,
+      telegram: id => `https://t.me/${id}`,
+    };
+
+    const url = platformUrls[platform](identifier);
+    const qrDataUrl = await QRCode.toDataURL(url);
+    qrCodes[platform] = qrDataUrl;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error(`Error generating ${platform} QR code:`, error);
+    qrCodes[platform] = '';
+  }
+}
+
+async function generateQRCodes() {
+  if (!currentInbox.value) return;
+
+  // WhatsApp (both Cloud and Twilio)
+  if (currentInbox.value.phone_number && isAWhatsAppChannel.value) {
+    await generateQRCode('whatsapp', currentInbox.value.phone_number);
+  }
+
+  // Facebook Messenger
+  if (currentInbox.value.page_id && isAFacebookInbox.value) {
+    await generateQRCode('messenger', currentInbox.value.page_id);
+  }
+
+  // Telegram
+  if (isATelegramChannel.value && currentInbox.value.bot_name) {
+    await generateQRCode('telegram', currentInbox.value.bot_name);
+  }
+}
+
+// Watch for currentInbox changes and regenerate QR codes when available
+watch(
+  currentInbox,
+  newInbox => {
+    if (newInbox) {
+      generateQRCodes();
+    }
   },
-  computed: {
+  { immediate: true }
-    currentInbox() {
+);
-      return this.$store.getters['inboxes/getInbox'](
-        this.$route.params.inbox_id
-      );
-    },
-    isATwilioInbox() {
-      return this.currentInbox.channel_type === 'Channel::TwilioSms';
-    },
-    // Check if a facebook inbox exists with the same instagram_id
-    hasDuplicateInstagramInbox() {
-      const instagramId = this.currentInbox.instagram_id;
-      const facebookInbox =
-        this.$store.getters['inboxes/getFacebookInboxByInstagramId'](
-          instagramId
-        );
 
-      return (
+onMounted(() => {
-        this.currentInbox.channel_type === INBOX_TYPES.INSTAGRAM &&
+  generateQRCodes();
-        facebookInbox
+});
-      );
-    },
-
-    isAEmailInbox() {
-      return this.currentInbox.channel_type === 'Channel::Email';
-    },
-    isALineInbox() {
-      return this.currentInbox.channel_type === 'Channel::Line';
-    },
-    isASmsInbox() {
-      return this.currentInbox.channel_type === 'Channel::Sms';
-    },
-    isWhatsAppCloudInbox() {
-      return (
-        this.currentInbox.channel_type === 'Channel::Whatsapp' &&
-        this.currentInbox.provider === 'whatsapp_cloud'
-      );
-    },
-    // If the inbox is a whatsapp cloud inbox and the source is not embedded signup, then show the webhook details
-    shouldShowWhatsAppWebhookDetails() {
-      return (
-        this.isWhatsAppCloudInbox &&
-        this.currentInbox.provider_config?.source !== 'embedded_signup'
-      );
-    },
-    message() {
-      if (this.isATwilioInbox) {
-        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
-          'INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE'
-        )}`;
-      }
-
-      if (this.isASmsInbox) {
-        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
-          'INBOX_MGMT.ADD.SMS.BANDWIDTH.API_CALLBACK.SUBTITLE'
-        )}`;
-      }
-
-      if (this.isALineInbox) {
-        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
-          'INBOX_MGMT.ADD.LINE_CHANNEL.API_CALLBACK.SUBTITLE'
-        )}`;
-      }
-
-      if (this.isWhatsAppCloudInbox && this.shouldShowWhatsAppWebhookDetails) {
-        return `${this.$t('INBOX_MGMT.FINISH.MESSAGE')}. ${this.$t(
-          'INBOX_MGMT.ADD.WHATSAPP.API_CALLBACK.SUBTITLE'
-        )}`;
-      }
-
-      if (this.isAEmailInbox && !this.currentInbox.provider) {
-        return this.$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.FINISH_MESSAGE');
-      }
-
-      if (this.currentInbox.web_widget_script) {
-        return this.$t('INBOX_MGMT.FINISH.WEBSITE_SUCCESS');
-      }
-
-      return this.$t('INBOX_MGMT.FINISH.MESSAGE');
-    },
-  },
-};
 </script>
 
 <template>
   <div
-    class="w-full h-full col-span-6 p-6 overflow-auto border border-b-0 rounded-t-lg border-n-weak bg-n-solid-1"
+    class="overflow-auto col-span-6 p-6 w-full h-full rounded-t-lg border border-b-0 border-n-weak bg-n-solid-1"
   >
     <DuplicateInboxBanner
       v-if="hasDuplicateInstagramInbox"
@@ -115,7 +183,7 @@ export default {
         </div>
         <div class="w-[50%] max-w-[50%] ml-[25%]">
           <woot-code
-            v-if="isATwilioInbox"
+            v-if="isATwilioChannel"
             lang="html"
             :script="currentInbox.callback_webhook_url"
           />
@@ -142,7 +210,7 @@ export default {
         </div>
         <div class="w-[50%] max-w-[50%] ml-[25%]">
           <woot-code
-            v-if="isALineInbox"
+            v-if="isALineChannel"
             lang="html"
             :script="currentInbox.callback_webhook_url"
           />
@@ -155,12 +223,58 @@ export default {
           />
         </div>
         <div
-          v-if="isAEmailInbox && !currentInbox.provider"
+          v-if="isAnEmailChannel && !currentInbox.provider"
           class="w-[50%] max-w-[50%] ml-[25%]"
         >
           <woot-code lang="html" :script="currentInbox.forward_to_email" />
         </div>
-        <div class="flex justify-center gap-2 mt-4">
+        <div
+          v-if="isAWhatsAppChannel && qrCodes.whatsapp"
+          class="flex flex-col items-center mt-8 gap-3"
+        >
+          <p class="mt-2 text-sm text-n-slate-9">
+            {{ $t('INBOX_MGMT.FINISH.WHATSAPP_QR_INSTRUCTION') }}
+          </p>
+          <div class="outline-1 outline-n-strong outline rounded-lg shadow">
+            <img
+              :src="qrCodes.whatsapp"
+              alt="WhatsApp QR Code"
+              class="size-48 dark:invert rounded-lg"
+            />
+          </div>
+        </div>
+        <div
+          v-if="isAFacebookInbox && qrCodes.messenger"
+          class="flex flex-col items-center mt-8 gap-3"
+        >
+          <p class="mt-2 text-sm text-n-slate-9">
+            {{ $t('INBOX_MGMT.FINISH.MESSENGER_QR_INSTRUCTION') }}
+          </p>
+          <div class="outline-1 outline-n-strong outline rounded-lg shadow">
+            <img
+              :src="qrCodes.messenger"
+              alt="Messenger QR Code"
+              class="size-48 dark:invert rounded-lg"
+            />
+          </div>
+        </div>
+        <div
+          v-if="isATelegramChannel && qrCodes.telegram"
+          class="flex flex-col items-center mt-8 gap-4"
+        >
+          <p class="mt-2 text-sm text-n-slate-9">
+            {{ $t('INBOX_MGMT.FINISH.TELEGRAM_QR_INSTRUCTION') }}
+          </p>
+
+          <div class="outline-1 outline-n-strong outline rounded-lg shadow">
+            <img
+              :src="qrCodes.telegram"
+              alt="Telegram QR Code"
+              class="size-48 dark:invert rounded-lg"
+            />
+          </div>
+        </div>
+        <div class="flex gap-2 justify-center mt-4">
           <router-link
             :to="{
               name: 'settings_inbox_show',

app/models/inbox.rb

@@ -145,6 +145,10 @@ class Inbox < ApplicationRecord
     channel_type == 'Channel::TwitterProfile'
   end
 
+  def telegram?
+    channel_type == 'Channel::Telegram'
+  end
+
   def whatsapp?
     channel_type == 'Channel::Whatsapp'
   end

app/views/api/v1/models/_inbox.json.jbuilder

@@ -115,6 +115,9 @@ end
 
 json.provider resource.channel.try(:provider)
 
+## Telegram Attributes
+json.bot_name resource.channel.try(:bot_name) if resource.telegram?
+
 ### WhatsApp Channel
 if resource.whatsapp?
   json.message_templates resource.channel.try(:message_templates)

package.json

@@ -79,6 +79,7 @@
     "md5": "^2.3.0",
     "mitt": "^3.0.1",
     "opus-recorder": "^8.0.5",
+    "qrcode": "^1.5.4",
     "posthog-js": "^1.260.2",
     "semver": "7.6.3",
     "snakecase-keys": "^8.0.1",

pnpm-lock.yaml

@@ -159,7 +159,10 @@ importers:
         version: 8.0.5
       posthog-js:
         specifier: ^1.260.2
-        version: 1.260.2
+        version: 1.260.3
+      qrcode:
+        specifier: ^1.5.4
+        version: 1.5.4
       semver:
         specifier: 7.6.3
         version: 7.6.3
@@ -1032,6 +1035,9 @@ packages:
   '@polka/url@1.0.0-next.28':
     resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
 
+  '@posthog/core@1.0.1':
+    resolution: {integrity: sha512-bwXUeHe+MLgENm8+/FxEbiNocOw1Vjewmm+HEUaYQe6frq8OhZnrvtnzZU3Q3DF6N0UbAmD/q+iNfNgyx8mozg==}
+
   '@radix-ui/colors@3.0.0':
     resolution: {integrity: sha512-FUOsGBkHrYJwCSEtWRCIfQbZG7q1e6DgxCIOe1SUQzDe/7rXXeA47s8yCn6fuTNQAj1Zq4oTFi9Yjp3wzElcxg==}
 
@@ -1671,6 +1677,10 @@ packages:
     resolution: {integrity: sha512-Rircqi9ch8AnZscQcsA1C47NFdaO3wukpmIRzYcDOrmvgt78hM/sj5pZhZNec2NM12uk5vTwRHZ4anGcrC4ZTg==}
     engines: {node: '>=16'}
 
+  camelcase@5.3.1:
+    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
+    engines: {node: '>=6'}
+
   camelcase@8.0.0:
     resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==}
     engines: {node: '>=16'}
@@ -1739,6 +1749,9 @@ packages:
     resolution: {integrity: sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  cliui@6.0.0:
+    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
+
   cliui@8.0.1:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
@@ -1943,6 +1956,10 @@ packages:
       supports-color:
         optional: true
 
+  decamelize@1.2.0:
+    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
+    engines: {node: '>=0.10.0'}
+
   decimal.js@10.4.3:
     resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
 
@@ -1978,6 +1995,9 @@ packages:
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
+  dijkstrajs@1.0.3:
+    resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
+
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -2340,6 +2360,10 @@ packages:
     resolution: {integrity: sha512-OuWNfjfP05JcpAP3JPgAKUhWefjMRfI5iAoSsvE24ANYWJaepAtlSgWECSVEuRgSXpyNEc9DJwG/TZpgcOqyig==}
     engines: {node: '>=16'}
 
+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -2974,6 +2998,10 @@ packages:
     resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
     engines: {node: '>=14'}
 
+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -3305,6 +3333,10 @@ packages:
   orderedmap@2.1.0:
     resolution: {integrity: sha512-/pIFexOm6S70EPdznemIz3BQZoJ4VTFrhqzu0ACBqBgeLsLxq8e6Jim63ImIfwW/zAD1AlXpRMlOv3aghmo4dA==}
 
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -3313,6 +3345,10 @@ packages:
     resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+
   p-locate@5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
@@ -3321,6 +3357,10 @@ packages:
     resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
   package-json-from-dist@1.0.0:
     resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==}
 
@@ -3425,6 +3465,10 @@ packages:
   pkg-types@1.2.0:
     resolution: {integrity: sha512-+ifYuSSqOQ8CqP4MbZA5hDpb97n3E8SVWdJe+Wms9kj745lmd3b7EZJiqvmLwAlmRfjrI7Hi5z3kdBJ93lFNPA==}
 
+  pngjs@5.0.0:
+    resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
+    engines: {node: '>=10.13.0'}
+
   possible-typed-array-names@1.0.0:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
@@ -3640,8 +3684,8 @@ packages:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
 
-  posthog-js@1.260.2:
+  posthog-js@1.260.3:
-    resolution: {integrity: sha512-2Q+QUz9j9+uG16wp0WcOEbezVsLZCobZyTX8NvWPMGKyPaf2lOsjbPjznsq5JiIt324B6NAqzpWYZTzvhn9k9Q==}
+    resolution: {integrity: sha512-FCtksk0GQn22Rk9P7x7dsmAO7a2aBxPeYb2O2KXSraxR8xd2G6lUOOthVDK+qgtmuhpUZuur/mHrXEslMUEtjg==}
     peerDependencies:
       '@rrweb/types': 2.0.0-alpha.17
       rrweb-snapshot: 2.0.0-alpha.17
@@ -3736,6 +3780,11 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
+  qrcode@1.5.4:
+    resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
   querystringify@2.2.0:
     resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
 
@@ -3779,6 +3828,9 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
+  require-main-filename@2.0.0:
+    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
+
   requires-port@1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
 
@@ -3888,6 +3940,9 @@ packages:
   sentence-case@3.0.4:
     resolution: {integrity: sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==}
 
+  set-blocking@2.0.0:
+    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -4529,6 +4584,9 @@ packages:
   which-boxed-primitive@1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
 
+  which-module@2.0.1:
+    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
+
   which-typed-array@1.1.11:
     resolution: {integrity: sha512-qe9UWWpkeG5yzZ0tNYxDmd7vo58HDBc39mZ0xWWpolAGADdFOzkfamWLDxkOWcvHQKVmdTyQdLD4NOfjLWTKew==}
     engines: {node: '>= 0.4'}
@@ -4551,6 +4609,10 @@ packages:
     resolution: {integrity: sha512-c9bZp7b5YtRj2wOe6dlj32MK+Bx/M/d+9VB2SHM1OtsUHR0aV0tdP6DWh/iMt0kWi1t5g1Iudu6hQRNd1A4PVA==}
     engines: {node: '>=18'}
 
+  wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+
   wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
@@ -4589,6 +4651,9 @@ packages:
   xmlchars@2.2.0:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
 
+  y18n@4.0.3:
+    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
+
   y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -4609,10 +4674,18 @@ packages:
     engines: {node: '>= 14'}
     hasBin: true
 
+  yargs-parser@18.1.3:
+    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
+    engines: {node: '>=6'}
+
   yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}
 
+  yargs@15.4.1:
+    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
+    engines: {node: '>=8'}
+
   yargs@17.7.2:
     resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
     engines: {node: '>=12'}
@@ -5375,6 +5448,8 @@ snapshots:
 
   '@polka/url@1.0.0-next.28': {}
 
+  '@posthog/core@1.0.1': {}
+
   '@radix-ui/colors@3.0.0': {}
 
   '@rails/actioncable@6.1.3': {}
@@ -6122,6 +6197,8 @@ snapshots:
       quick-lru: 6.1.2
       type-fest: 4.26.1
 
+  camelcase@5.3.1: {}
+
   camelcase@8.0.0: {}
 
   caniuse-lite@1.0.30001651: {}
@@ -6216,6 +6293,12 @@ snapshots:
       slice-ansi: 5.0.0
       string-width: 5.1.2
 
+  cliui@6.0.0:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 6.2.0
+
   cliui@8.0.1:
     dependencies:
       string-width: 4.2.3
@@ -6388,6 +6471,8 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  decamelize@1.2.0: {}
+
   decimal.js@10.4.3: {}
 
   deep-eql@5.0.2: {}
@@ -6419,6 +6504,8 @@ snapshots:
 
   didyoumean@1.2.2: {}
 
+  dijkstrajs@1.0.3: {}
+
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
@@ -6936,6 +7023,11 @@ snapshots:
       common-path-prefix: 3.0.0
       pkg-dir: 7.0.0
 
+  find-up@4.1.0:
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -7677,6 +7769,10 @@ snapshots:
       mlly: 1.7.1
       pkg-types: 1.2.0
 
+  locate-path@5.0.0:
+    dependencies:
+      p-locate: 4.1.0
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -8016,6 +8112,10 @@ snapshots:
 
   orderedmap@2.1.0: {}
 
+  p-limit@2.3.0:
+    dependencies:
+      p-try: 2.2.0
+
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
@@ -8024,6 +8124,10 @@ snapshots:
     dependencies:
       yocto-queue: 1.1.1
 
+  p-locate@4.1.0:
+    dependencies:
+      p-limit: 2.3.0
+
   p-locate@5.0.0:
     dependencies:
       p-limit: 3.1.0
@@ -8032,6 +8136,8 @@ snapshots:
     dependencies:
       p-limit: 4.0.0
 
+  p-try@2.2.0: {}
+
   package-json-from-dist@1.0.0: {}
 
   package-manager-detector@0.2.0: {}
@@ -8114,6 +8220,8 @@ snapshots:
       mlly: 1.7.1
       pathe: 1.1.2
 
+  pngjs@5.0.0: {}
+
   possible-typed-array-names@1.0.0: {}
 
   postcss-attribute-case-insensitive@6.0.2(postcss@8.4.47):
@@ -8368,8 +8476,9 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  posthog-js@1.260.2:
+  posthog-js@1.260.3:
     dependencies:
+      '@posthog/core': 1.0.1
       core-js: 3.38.1
       fflate: 0.4.8
       preact: 10.27.1
@@ -8484,6 +8593,12 @@ snapshots:
 
   punycode@2.3.1: {}
 
+  qrcode@1.5.4:
+    dependencies:
+      dijkstrajs: 1.0.3
+      pngjs: 5.0.0
+      yargs: 15.4.1
+
   querystringify@2.2.0: {}
 
   queue-microtask@1.2.3: {}
@@ -8522,6 +8637,8 @@ snapshots:
 
   require-from-string@2.0.2: {}
 
+  require-main-filename@2.0.0: {}
+
   requires-port@1.0.0: {}
 
   resolve-from@4.0.0: {}
@@ -8658,6 +8775,8 @@ snapshots:
       tslib: 2.8.1
       upper-case-first: 2.0.2
 
+  set-blocking@2.0.0: {}
+
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
@@ -9373,6 +9492,8 @@ snapshots:
       is-string: 1.0.7
       is-symbol: 1.0.4
 
+  which-module@2.0.1: {}
+
   which-typed-array@1.1.11:
     dependencies:
       available-typed-arrays: 1.0.5
@@ -9402,6 +9523,12 @@ snapshots:
     dependencies:
       string-width: 7.2.0
 
+  wrap-ansi@6.2.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
   wrap-ansi@7.0.0:
     dependencies:
       ansi-styles: 4.3.0
@@ -9430,6 +9557,8 @@ snapshots:
 
   xmlchars@2.2.0: {}
 
+  y18n@4.0.3: {}
+
   y18n@5.0.8: {}
 
   yallist@4.0.0: {}
@@ -9444,8 +9573,27 @@ snapshots:
 
   yaml@2.5.1: {}
 
+  yargs-parser@18.1.3:
+    dependencies:
+      camelcase: 5.3.1
+      decamelize: 1.2.0
+
   yargs-parser@21.1.1: {}
 
+  yargs@15.4.1:
+    dependencies:
+      cliui: 6.0.0
+      decamelize: 1.2.0
+      find-up: 4.1.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      require-main-filename: 2.0.0
+      set-blocking: 2.0.0
+      string-width: 4.2.3
+      which-module: 2.0.1
+      y18n: 4.0.3
+      yargs-parser: 18.1.3
+
   yargs@17.7.2:
     dependencies:
       cliui: 8.0.1