From 583a533494d3a0f006f56c915113daf25885de1a Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Wed, 27 Aug 2025 21:27:47 +0530
Subject: [PATCH] fix: Remove whatsapp prefix from twilio phone number for QR
 code (#12314)

---
 .../dashboard/settings/inbox/FinishSetup.vue  | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
index 2d88703af..94ba601e3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue
@@ -131,7 +131,13 @@ async function generateQRCodes() {
 
   // WhatsApp (both Cloud and Twilio)
   if (currentInbox.value.phone_number && isAWhatsAppChannel.value) {
-    await generateQRCode('whatsapp', currentInbox.value.phone_number);
+    // For Twilio WhatsApp, phone_number format is "whatsapp:+1234567890"
+    // Extract just the phone number part for QR code generation
+    const phoneNumber = currentInbox.value.phone_number.replace(
+      'whatsapp:',
+      ''
+    );
+    await generateQRCode('whatsapp', phoneNumber);
   }
 
   // Facebook Messenger
@@ -230,47 +236,47 @@ onMounted(() => {
         </div>
         <div
           v-if="isAWhatsAppChannel && qrCodes.whatsapp"
-          class="flex flex-col items-center mt-8 gap-3"
+          class="flex flex-col gap-3 items-center mt-8"
         >
           <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">
+          <div class="rounded-lg shadow outline-1 outline-n-strong outline">
             <img
               :src="qrCodes.whatsapp"
               alt="WhatsApp QR Code"
-              class="size-48 dark:invert rounded-lg"
+              class="rounded-lg size-48 dark:invert"
             />
           </div>
         </div>
         <div
           v-if="isAFacebookInbox && qrCodes.messenger"
-          class="flex flex-col items-center mt-8 gap-3"
+          class="flex flex-col gap-3 items-center mt-8"
         >
           <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">
+          <div class="rounded-lg shadow outline-1 outline-n-strong outline">
             <img
               :src="qrCodes.messenger"
               alt="Messenger QR Code"
-              class="size-48 dark:invert rounded-lg"
+              class="rounded-lg size-48 dark:invert"
             />
           </div>
         </div>
         <div
           v-if="isATelegramChannel && qrCodes.telegram"
-          class="flex flex-col items-center mt-8 gap-4"
+          class="flex flex-col gap-4 items-center mt-8"
         >
           <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">
+          <div class="rounded-lg shadow outline-1 outline-n-strong outline">
             <img
               :src="qrCodes.telegram"
               alt="Telegram QR Code"
-              class="size-48 dark:invert rounded-lg"
+              class="rounded-lg size-48 dark:invert"
             />
           </div>
         </div>