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:
@@ -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.",
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
@@ -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" />
|
||||
|
||||
@@ -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?
|
||||
|
||||
Reference in New Issue
Block a user