feat: hide email forwarding address if INBOUND_EMAIL_DOMAIN is not configured (#12768)

#### Summary

- Improved email inbox setup flow to handle cases where inbound email
forwarding is not configured on the installation
- Added conditional display of email forwarding address based on
MAILER_INBOUND_EMAIL_DOMAIN environment variable availability
- Enhanced user messaging to guide users toward configuring SMTP/IMAP
settings when forwarding is unavailable

#### Changes

**Backend (app/views/api/v1/models/_inbox.json.jbuilder)**
- Added forwarding_enabled boolean flag to inbox API response based on
MAILER_INBOUND_EMAIL_DOMAIN presence
- Made forward_to_email conditional - only included when forwarding is
enabled

  **Frontend - Inbox Creation Flow**
- Created new EmailInboxFinish.vue component to handle email inbox setup
completion
  - Shows different messages based on whether forwarding is enabled:
- With forwarding: displays forwarding address and encourages SMTP/IMAP
configuration
- Without forwarding: warns that SMTP/IMAP configuration is required for
emails to be processed
- Added link to configuration page for easy access to SMTP/IMAP settings

<img width="988" height="312" alt="Screenshot 2025-11-18 at 3 27 27 PM"
src="https://github.com/user-attachments/assets/928aff78-df73-49fa-9a26-dbbd1297b26a"
/>

<img width="765" height="489" alt="Screenshot 2025-11-18 at 3 24 46 PM"
src="https://github.com/user-attachments/assets/6a182c7d-087f-4e88-92a5-30f147a567a7"
/>


Fixes
https://linear.app/chatwoot/issue/CW-5881/hide-forwaring-email-section-if-inbound-email-domain-is-not-configured


## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

- Tested locally

## Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
This commit is contained in:
Vishnu Narayanan
2025-11-19 07:35:12 +05:30
committed by GitHub
parent 6c07f62cfc
commit 70c183ea6e
5 changed files with 89 additions and 14 deletions

View File

@@ -381,7 +381,11 @@
"API": {
"ERROR_MESSAGE": "We were not able to save the email channel"
},
"FINISH_MESSAGE": "Start forwarding your emails to the following email address."
"FINISH_MESSAGE": "Your email inbox has been created successfully! You can start forwarding your emails to the address below, or configure SMTP and IMAP credentials to send and receive emails directly.",
"FINISH_MESSAGE_NO_FORWARDING": "Your email inbox has been created successfully! You need to configure SMTP and IMAP credentials to send and receive emails. Without these settings, no emails will be processed.",
"FORWARDING_ADDRESS_LABEL": "Forward emails to this address:",
"CONFIGURE_SMTP_IMAP_LINK": "Click here",
"CONFIGURE_SMTP_IMAP_TEXT": " to configure IMAP and SMTP settings"
},
"LINE_CHANNEL": {
"TITLE": "LINE Channel",
@@ -707,6 +711,7 @@
"INBOX_IDENTIFIER_SUB_TEXT": "Use the `inbox_identifier` token shown here to authentication your API clients.",
"FORWARD_EMAIL_TITLE": "Forward to Email",
"FORWARD_EMAIL_SUB_TEXT": "Start forwarding your emails to the following email address.",
"FORWARD_EMAIL_NOT_CONFIGURED": "Forwarding emails to your inbox is currently disabled on this installation. To use this feature, it must be enabled by your administrator. Please get in touch with them to proceed.",
"ALLOW_MESSAGES_AFTER_RESOLVED": "Allow messages after conversation resolved",
"ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT": "Allow the end-users to send messages even after the conversation is resolved.",
"WHATSAPP_SECTION_SUBHEADER": "This API Key is used for the integration with the WhatsApp APIs.",

View File

@@ -7,6 +7,7 @@ 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 EmailInboxFinish from './channels/emailChannels/EmailInboxFinish.vue';
import { useInbox } from 'dashboard/composables/useInbox';
import { INBOX_TYPES } from 'dashboard/helper/inbox';
@@ -86,10 +87,6 @@ const message = computed(() => {
)}`;
}
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');
}
@@ -176,7 +173,7 @@ onMounted(() => {
/>
<EmptyState
:title="$t('INBOX_MGMT.FINISH.TITLE')"
:message="message"
:message="isAnEmailChannel && !currentInbox.provider ? '' : message"
:button-text="$t('INBOX_MGMT.FINISH.BUTTON_TEXT')"
>
<div class="w-full text-center">
@@ -227,12 +224,11 @@ onMounted(() => {
:script="currentInbox.callback_webhook_url"
/>
</div>
<div
<EmailInboxFinish
v-if="isAnEmailChannel && !currentInbox.provider"
class="w-[50%] max-w-[50%] ml-[25%]"
>
<woot-code lang="html" :script="currentInbox.forward_to_email" />
</div>
:inbox="currentInbox"
:inbox-id="$route.params.inbox_id"
/>
<div
v-if="isAWhatsAppChannel && qrCodes.whatsapp"
class="flex flex-col gap-3 items-center mt-8"

View File

@@ -0,0 +1,55 @@
<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
const props = defineProps({
inbox: {
type: Object,
required: true,
},
inboxId: {
type: [String, Number],
required: true,
},
});
const { t } = useI18n();
const message = computed(() => {
return props.inbox.forwarding_enabled
? t('INBOX_MGMT.ADD.EMAIL_CHANNEL.FINISH_MESSAGE')
: t('INBOX_MGMT.ADD.EMAIL_CHANNEL.FINISH_MESSAGE_NO_FORWARDING');
});
const showForwardingAddress = computed(() => {
return props.inbox.forwarding_enabled;
});
</script>
<template>
<div class="w-full text-center">
<p class="text-base text-n-slate-11 mt-4 w-4/5 mx-auto leading-7">
{{ message }}
</p>
<div v-if="showForwardingAddress" class="w-[50%] max-w-[50%] mx-auto">
<p class="mt-8 mb-4 font-medium text-n-slate-11">
{{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.FORWARDING_ADDRESS_LABEL') }}
</p>
<woot-code lang="html" :script="inbox.forward_to_email" />
</div>
<p class="mt-8 text-sm text-n-slate-11 pb-4">
<router-link
:to="{
name: 'settings_inbox_show',
params: { inboxId: inboxId, tab: 'configuration' },
}"
class="text-n-woot-600 hover:text-n-woot-700 underline"
>
{{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CONFIGURE_SMTP_IMAP_LINK') }}
</router-link>
{{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CONFIGURE_SMTP_IMAP_TEXT') }}
</p>
</div>
</template>

View File

@@ -50,6 +50,9 @@ export default {
whatsappAppId() {
return window.chatwootConfig?.whatsappAppId;
},
isForwardingEnabled() {
return !!this.inbox.forwarding_enabled;
},
},
watch: {
inbox() {
@@ -300,9 +303,24 @@ export default {
<div class="mx-8">
<SettingsSection
:title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_TITLE')"
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_SUB_TEXT')"
:sub-title="
isForwardingEnabled
? $t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_SUB_TEXT')
: ''
"
>
<woot-code :script="inbox.forward_to_email" />
<woot-code
v-if="isForwardingEnabled"
:script="inbox.forward_to_email"
/>
<div
v-else
class="p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg"
>
<p class="text-sm text-yellow-800 dark:text-yellow-200 mb-0">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_NOT_CONFIGURED') }}
</p>
</div>
</SettingsSection>
</div>
<ImapSettings :inbox="inbox" />

View File

@@ -74,8 +74,9 @@ end
if resource.email?
## Email Channel Attributes
json.forward_to_email resource.channel.try(:forward_to_email)
json.email resource.channel.try(:email)
json.forwarding_enabled ENV.fetch('MAILER_INBOUND_EMAIL_DOMAIN', '').present?
json.forward_to_email resource.channel.try(:forward_to_email) if ENV.fetch('MAILER_INBOUND_EMAIL_DOMAIN', '').present?
## IMAP
if Current.account_user&.administrator?