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": {
|
"API": {
|
||||||
"ERROR_MESSAGE": "We were not able to save the email channel"
|
"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": {
|
"LINE_CHANNEL": {
|
||||||
"TITLE": "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.",
|
"INBOX_IDENTIFIER_SUB_TEXT": "Use the `inbox_identifier` token shown here to authentication your API clients.",
|
||||||
"FORWARD_EMAIL_TITLE": "Forward to Email",
|
"FORWARD_EMAIL_TITLE": "Forward to Email",
|
||||||
"FORWARD_EMAIL_SUB_TEXT": "Start forwarding your emails to the following email address.",
|
"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": "Allow messages after conversation resolved",
|
||||||
"ALLOW_MESSAGES_AFTER_RESOLVED_SUB_TEXT": "Allow the end-users to send messages even after the conversation is 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.",
|
"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 EmptyState from '../../../../components/widgets/EmptyState.vue';
|
||||||
import NextButton from 'dashboard/components-next/button/Button.vue';
|
import NextButton from 'dashboard/components-next/button/Button.vue';
|
||||||
import DuplicateInboxBanner from './channels/instagram/DuplicateInboxBanner.vue';
|
import DuplicateInboxBanner from './channels/instagram/DuplicateInboxBanner.vue';
|
||||||
|
import EmailInboxFinish from './channels/emailChannels/EmailInboxFinish.vue';
|
||||||
import { useInbox } from 'dashboard/composables/useInbox';
|
import { useInbox } from 'dashboard/composables/useInbox';
|
||||||
import { INBOX_TYPES } from 'dashboard/helper/inbox';
|
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) {
|
if (currentInbox.value.web_widget_script) {
|
||||||
return t('INBOX_MGMT.FINISH.WEBSITE_SUCCESS');
|
return t('INBOX_MGMT.FINISH.WEBSITE_SUCCESS');
|
||||||
}
|
}
|
||||||
@@ -176,7 +173,7 @@ onMounted(() => {
|
|||||||
/>
|
/>
|
||||||
<EmptyState
|
<EmptyState
|
||||||
:title="$t('INBOX_MGMT.FINISH.TITLE')"
|
:title="$t('INBOX_MGMT.FINISH.TITLE')"
|
||||||
:message="message"
|
:message="isAnEmailChannel && !currentInbox.provider ? '' : message"
|
||||||
:button-text="$t('INBOX_MGMT.FINISH.BUTTON_TEXT')"
|
:button-text="$t('INBOX_MGMT.FINISH.BUTTON_TEXT')"
|
||||||
>
|
>
|
||||||
<div class="w-full text-center">
|
<div class="w-full text-center">
|
||||||
@@ -227,12 +224,11 @@ onMounted(() => {
|
|||||||
:script="currentInbox.callback_webhook_url"
|
:script="currentInbox.callback_webhook_url"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<EmailInboxFinish
|
||||||
v-if="isAnEmailChannel && !currentInbox.provider"
|
v-if="isAnEmailChannel && !currentInbox.provider"
|
||||||
class="w-[50%] max-w-[50%] ml-[25%]"
|
:inbox="currentInbox"
|
||||||
>
|
:inbox-id="$route.params.inbox_id"
|
||||||
<woot-code lang="html" :script="currentInbox.forward_to_email" />
|
/>
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
v-if="isAWhatsAppChannel && qrCodes.whatsapp"
|
v-if="isAWhatsAppChannel && qrCodes.whatsapp"
|
||||||
class="flex flex-col gap-3 items-center mt-8"
|
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() {
|
whatsappAppId() {
|
||||||
return window.chatwootConfig?.whatsappAppId;
|
return window.chatwootConfig?.whatsappAppId;
|
||||||
},
|
},
|
||||||
|
isForwardingEnabled() {
|
||||||
|
return !!this.inbox.forwarding_enabled;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
inbox() {
|
inbox() {
|
||||||
@@ -300,9 +303,24 @@ export default {
|
|||||||
<div class="mx-8">
|
<div class="mx-8">
|
||||||
<SettingsSection
|
<SettingsSection
|
||||||
:title="$t('INBOX_MGMT.SETTINGS_POPUP.FORWARD_EMAIL_TITLE')"
|
: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>
|
</SettingsSection>
|
||||||
</div>
|
</div>
|
||||||
<ImapSettings :inbox="inbox" />
|
<ImapSettings :inbox="inbox" />
|
||||||
|
|||||||
@@ -74,8 +74,9 @@ end
|
|||||||
|
|
||||||
if resource.email?
|
if resource.email?
|
||||||
## Email Channel Attributes
|
## Email Channel Attributes
|
||||||
json.forward_to_email resource.channel.try(:forward_to_email)
|
|
||||||
json.email resource.channel.try(: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
|
## IMAP
|
||||||
if Current.account_user&.administrator?
|
if Current.account_user&.administrator?
|
||||||
|
|||||||
Reference in New Issue
Block a user