From 1f6603475042372ca062ec30f265d52faed4d21a Mon Sep 17 00:00:00 2001 From: Sojan Jose Date: Fri, 13 Feb 2026 16:43:13 -0800 Subject: [PATCH] feat(inboxes): improve channel finish setup guidance --- .../channels/twilio_channels_controller.rb | 2 +- .../dashboard/i18n/locale/en/inboxMgmt.json | 23 +++--- .../dashboard/settings/inbox/FinishSetup.vue | 81 +++++++++++++++---- .../inbox/settingsPage/ConfigurationPage.vue | 6 -- app/services/twilio/webhook_setup_service.rb | 6 +- 5 files changed, 82 insertions(+), 36 deletions(-) diff --git a/app/controllers/api/v1/accounts/channels/twilio_channels_controller.rb b/app/controllers/api/v1/accounts/channels/twilio_channels_controller.rb index f3b14d49f..5881b375a 100644 --- a/app/controllers/api/v1/accounts/channels/twilio_channels_controller.rb +++ b/app/controllers/api/v1/accounts/channels/twilio_channels_controller.rb @@ -20,7 +20,7 @@ class Api::V1::Accounts::Channels::TwilioChannelsController < Api::V1::Accounts: ActiveRecord::Base.transaction do authenticate_twilio build_inbox - setup_webhooks if @twilio_channel.sms? + setup_webhooks end end diff --git a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json index f45e7b4df..ebe919be1 100644 --- a/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json +++ b/app/javascript/dashboard/i18n/locale/en/inboxMgmt.json @@ -123,7 +123,7 @@ }, "TWILIO": { "TITLE": "Twilio SMS/WhatsApp Channel", - "DESC": "Integrate Twilio and start supporting your customers via SMS or WhatsApp.", + "DESC": "Integrate Twilio and start supporting your customers via SMS or WhatsApp. Chatwoot automatically configures the required callback URLs for you.", "ACCOUNT_SID": { "LABEL": "Account SID", "PLACEHOLDER": "Please enter your Twilio Account SID", @@ -165,10 +165,6 @@ "PLACEHOLDER": "Please enter the phone number from which message will be sent.", "ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces." }, - "API_CALLBACK": { - "TITLE": "Callback URL", - "SUBTITLE": "You have to configure the message callback URL in Twilio with the URL mentioned here." - }, "SUBMIT_BUTTON": "Create Twilio Channel", "API": { "ERROR_MESSAGE": "We were not able to authenticate Twilio credentials, please try again" @@ -216,15 +212,15 @@ "PLACEHOLDER": "Please enter the phone number from which message will be sent.", "ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces." }, - "SUBMIT_BUTTON": "Create Bandwidth Channel", - "API": { - "ERROR_MESSAGE": "We were not able to authenticate Bandwidth credentials, please try again" - }, - "API_CALLBACK": { - "TITLE": "Callback URL", - "SUBTITLE": "You have to configure the message callback URL in Bandwidth with the URL mentioned here." - } + "SUBMIT_BUTTON": "Create Bandwidth Channel", + "API": { + "ERROR_MESSAGE": "We were not able to authenticate Bandwidth credentials, please try again" + }, + "API_CALLBACK": { + "TITLE": "Callback URL", + "SUBTITLE": "You have to configure the message callback URL in Bandwidth with the URL mentioned here." } + } }, "WHATSAPP": { "TITLE": "WhatsApp Channel", @@ -542,6 +538,7 @@ "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.", "WHATSAPP_QR_INSTRUCTION": "Scan the QR code above to quickly test your WhatsApp inbox", + "SMS_QR_INSTRUCTION": "Scan the QR code above to quickly test your SMS 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" }, diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue index ec89ec930..9239949ca 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/FinishSetup.vue @@ -16,6 +16,7 @@ const route = useRoute(); const store = useStore(); const qrCodes = reactive({ + sms: '', whatsapp: '', messenger: '', telegram: '', @@ -36,6 +37,7 @@ const { isAFacebookInbox, isATelegramChannel, isATwilioWhatsAppChannel, + isATwilioSMSChannel, } = useInbox(route.params.inbox_id); const hasDuplicateInstagramInbox = computed(() => { @@ -62,17 +64,44 @@ const isWhatsAppEmbeddedSignup = computed(() => { ); }); +const isTwilioSmsInbox = computed(() => { + const phoneNumber = currentInbox.value?.phone_number; + const callbackUrl = currentInbox.value?.callback_webhook_url; + + return ( + (phoneNumber || '').startsWith('+') && + Boolean(callbackUrl && callbackUrl.includes('/twilio/callback')) + ); +}); + +const isTwilioWhatsAppChannel = computed(() => { + const phoneNumber = currentInbox.value?.phone_number; + + return ( + isATwilioWhatsAppChannel.value || + (isATwilioChannel.value && (phoneNumber || '').startsWith('whatsapp:')) + ); +}); + const message = computed(() => { - if (isATwilioChannel.value) { + if (isTwilioWhatsAppChannel.value) { return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t( - 'INBOX_MGMT.ADD.TWILIO.API_CALLBACK.SUBTITLE' + 'INBOX_MGMT.FINISH.WHATSAPP_QR_INSTRUCTION' + )}`; + } + + if (isTwilioSmsInbox.value) { + return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t( + 'INBOX_MGMT.FINISH.SMS_QR_INSTRUCTION' )}`; } if (isASmsInbox.value) { - return `${t('INBOX_MGMT.FINISH.MESSAGE')}. ${t( - 'INBOX_MGMT.ADD.SMS.BANDWIDTH.API_CALLBACK.SUBTITLE' - )}`; + return t('INBOX_MGMT.FINISH.MESSAGE'); + } + + if (isATwilioChannel.value) { + return t('INBOX_MGMT.FINISH.MESSAGE'); } if (isALineChannel.value) { @@ -109,6 +138,7 @@ async function generateQRCode(platform, identifier) { try { const platformUrls = { + sms: id => `sms:${id}`, whatsapp: id => `https://wa.me/${id}`, messenger: id => `https://m.me/${id}`, telegram: id => `https://t.me/${id}`, @@ -128,7 +158,7 @@ async function generateQRCodes() { if (!currentInbox.value) return; // WhatsApp (both Cloud and Twilio) - if (currentInbox.value.phone_number && isAWhatsAppChannel.value) { + if (currentInbox.value.phone_number && isTwilioWhatsAppChannel.value) { // 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( @@ -138,6 +168,10 @@ async function generateQRCodes() { await generateQRCode('whatsapp', phoneNumber); } + if (isTwilioSmsInbox.value && currentInbox.value.phone_number) { + await generateQRCode('sms', currentInbox.value.phone_number); + } + // Facebook Messenger if (currentInbox.value.page_id && isAFacebookInbox.value) { await generateQRCode('messenger', currentInbox.value.page_id); @@ -183,13 +217,6 @@ onMounted(() => { :script="currentInbox.web_widget_script" /> -
- -
{ :script="currentInbox.callback_webhook_url" />
-
+
+

+ {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_CALLBACK.TITLE') }} +

+

+ {{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_CALLBACK.SUBTITLE') }} +

+
+

+ {{ $t('INBOX_MGMT.FINISH.SMS_QR_INSTRUCTION') }} +

+
+ SMS QR Code +
+
- - -