LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Ability to customise the email sender name [CW-1629] (#7345)

Browse Source
This commit is contained in:
Tejaswini Chile
2023-07-04 20:46:01 +05:30
committed by GitHub
parent 3c4514c9f7
commit 71837bedf9
16 changed files with 411 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/javascript/dashboard/components/SettingsSection.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="row settings--section">
<div class="row settings--section" :class="{ border: showBorder }">
<div class="medium-4 small-12 title--section">
<p class="sub-block-title">
<p v-if="title" class="sub-block-title">
{{ title }}
</p>
<p class="sub-head">
<slot name="subTitle">
<slot v-if="subTitle" name="subTitle">
{{ subTitle }}
</slot>
</p>
@@ -25,11 +25,15 @@ export default {
props: {
title: {
type: String,
required: true,
default: '',
},
subTitle: {
type: String,
required: true,
default: '',
},
showBorder: {
type: Boolean,
default: true,
},
note: {
type: String,
@@ -43,9 +47,13 @@ export default {
@import '~dashboard/assets/scss/variables';
.settings--section {
border-bottom: 1px solid $color-border;
display: flex;
padding: $space-normal $space-normal $space-normal 0;
padding: 0 $space-normal $space-normal 0;
&.border {
padding-top: $space-normal;
border-bottom: 1px solid $color-border;
}
.sub-block-title {
color: $color-woot;

3
app/javascript/dashboard/components/ui/PreviewCard.vue
View File

@@ -13,9 +13,10 @@
<div class="content-wrap">
{{ content }}
</div>
<div class="image-wrap">
<div v-if="src" class="image-wrap">
<img :src="src" class="image" :class="{ activeimage: active }" />
</div>
<slot v-else />
</div>
</template>

21
app/javascript/dashboard/i18n/locale/en/inboxMgmt.json
View File

@@ -391,6 +391,25 @@
"ENABLED": "Enabled",
"DISABLED": "Disabled"
},
"SENDER_NAME_SECTION": {
"TITLE": "Sender name",
"SUB_TEXT": "Select the name shown to the your customer when they receive emails from your agents.",
"FOR_EG": "For eg:",
"FRIENDLY": {
"TITLE": "Friendly",
"FROM": "from",
"SUBTITLE": "Add the name of the agent who sent the reply in the sender name to make it friendly."
},
"PROFESSIONAL": {
"TITLE": "Professional",
"SUBTITLE": "Use only the configured business name as the sender name in the email header."
},
"BUSINESS_NAME": {
"BUTTON_TEXT": "+ Configure your business name",
"PLACEHOLDER": "Enter your business name",
"SAVE_BUTTON_TEXT": "Save"
}
},
"ALLOW_MESSAGES_AFTER_RESOLVED": {
"ENABLED": "Enabled",
"DISABLED": "Disabled"
@@ -454,7 +473,9 @@
"ENABLE_EMAIL_COLLECT_BOX_SUB_TEXT": "Enable or disable email collect box on new conversation",
"AUTO_ASSIGNMENT": "Enable auto assignment",
"ENABLE_CSAT": "Enable CSAT",
"SENDER_NAME_SECTION": "Enable Agent Name in Email",
"ENABLE_CSAT_SUB_TEXT": "Enable/Disable CSAT(Customer satisfaction) survey after resolving a conversation",
"SENDER_NAME_SECTION_TEXT": "Enable/Disable showing Agent's name in email, if disabled it will show business name",
"ENABLE_CONTINUITY_VIA_EMAIL": "Enable conversation continuity via email",
"ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT": "Conversations will continue over email if the contact email address is available.",
"LOCK_TO_SINGLE_CONVERSATION": "Lock to single conversation",

102
app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
View File

@@ -23,6 +23,7 @@
<settings-section
:title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_TITLE')"
:sub-title="$t('INBOX_MGMT.SETTINGS_POPUP.INBOX_UPDATE_SUB_TEXT')"
:show-border="false"
>
<woot-avatar-uploader
:label="$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_AVATAR.LABEL')"
@@ -258,7 +259,7 @@
}}
</p>
</label>
<div class="medium-9 settings-item settings-item">
<div class="medium-9 settings-item">
<label>
{{ $t('INBOX_MGMT.HELP_CENTER.LABEL') }}
</label>
@@ -313,7 +314,7 @@
{{ $t('INBOX_MGMT.FEATURES.DISPLAY_FILE_PICKER') }}
</label>
</div>
<div v-if="isAWebWidgetInbox" class="settings-item settings-item">
<div v-if="isAWebWidgetInbox" class="settings-item">
<input
v-model="selectedFeatureFlags"
type="checkbox"
@@ -324,7 +325,7 @@
{{ $t('INBOX_MGMT.FEATURES.DISPLAY_EMOJI_PICKER') }}
</label>
</div>
<div v-if="isAWebWidgetInbox" class="settings-item settings-item">
<div v-if="isAWebWidgetInbox" class="settings-item">
<input
v-model="selectedFeatureFlags"
type="checkbox"
@@ -335,7 +336,7 @@
{{ $t('INBOX_MGMT.FEATURES.ALLOW_END_CONVERSATION') }}
</label>
</div>
<div v-if="isAWebWidgetInbox" class="settings-item settings-item">
<div v-if="isAWebWidgetInbox" class="settings-item">
<input
v-model="selectedFeatureFlags"
type="checkbox"
@@ -346,7 +347,54 @@
{{ $t('INBOX_MGMT.FEATURES.USE_INBOX_AVATAR_FOR_BOT') }}
</label>
</div>
</settings-section>
<settings-section
v-if="isAWebWidgetInbox || isAnEmailChannel"
:title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.TITLE')"
:sub-title="$t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.SUB_TEXT')"
:show-border="false"
>
<div class="medium-9 settings-item">
<sender-name-example-preview
:sender-name-type="senderNameType"
:business-name="businessName"
@update="toggleSenderNameType"
/>
<div class="business-section">
<woot-button
variant="clear"
color-scheme="primary"
@click="onClickShowBusinessNameInput"
>
{{
$t(
'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.BUTTON_TEXT'
)
}}
</woot-button>
<div v-if="showBusinessNameInput" class="business-name-input">
<input
ref="businessNameInput"
v-model="businessName"
:placeholder="
$t(
'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.PLACEHOLDER'
)
"
type="text"
/>
<woot-button color-scheme="primary" @click="updateInbox">
{{
$t(
'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.BUSINESS_NAME.SAVE_BUTTON_TEXT'
)
}}
</woot-button>
</div>
</div>
</div>
</settings-section>
<settings-section :show-border="false">
<woot-submit-button
v-if="isAPIInbox"
type="submit"
@@ -405,6 +453,7 @@ import CollaboratorsPage from './settingsPage/CollaboratorsPage';
import WidgetBuilder from './WidgetBuilder';
import BotConfiguration from './components/BotConfiguration';
import { FEATURE_FLAGS } from '../../../../featureFlags';
import SenderNameExamplePreview from './components/SenderNameExamplePreview';
export default {
components: {
@@ -418,6 +467,7 @@ export default {
SettingsSection,
WeeklyAvailability,
WidgetBuilder,
SenderNameExamplePreview,
},
mixins: [alertMixin, configMixin, inboxMixin],
data() {
@@ -429,6 +479,8 @@ export default {
greetingMessage: '',
emailCollectEnabled: false,
csatSurveyEnabled: false,
senderNameType: 'friendly',
businessName: '',
locktoSingleConversation: false,
allowMessagesAfterResolved: true,
continuityViaEmail: true,
@@ -441,6 +493,7 @@ export default {
replyTime: '',
selectedTabIndex: 0,
selectedPortalSlug: '',
showBusinessNameInput: false,
};
},
computed: {
@@ -621,6 +674,8 @@ export default {
this.greetingMessage = this.inbox.greeting_message || '';
this.emailCollectEnabled = this.inbox.enable_email_collect;
this.csatSurveyEnabled = this.inbox.csat_survey_enabled;
this.senderNameType = this.inbox.sender_name_type;
this.businessName = this.inbox.business_name;
this.allowMessagesAfterResolved = this.inbox.allow_messages_after_resolved;
this.continuityViaEmail = this.inbox.continuity_via_email;
this.channelWebsiteUrl = this.inbox.website_url;
@@ -650,6 +705,8 @@ export default {
).id
: null,
lock_to_single_conversation: this.locktoSingleConversation,
sender_name_type: this.senderNameType,
business_name: this.businessName || null,
channel: {
widget_color: this.inbox.widget_color,
website_url: this.channelWebsiteUrl,
@@ -694,6 +751,17 @@ export default {
);
}
},
toggleSenderNameType(key) {
this.senderNameType = key;
},
onClickShowBusinessNameInput() {
this.showBusinessNameInput = !this.showBusinessNameInput;
if (this.showBusinessNameInput) {
this.$nextTick(() => {
this.$refs.businessNameInput.focus();
});
}
},
},
validations: {
webhookUrl: {
@@ -717,12 +785,6 @@ export default {
}
}
.settings--content {
div:last-child {
border-bottom: 0;
}
}
.tabs {
padding: 0;
margin-bottom: -1px;
@@ -742,4 +804,22 @@ export default {
padding-bottom: var(--space-smaller);
}
}
.business-section {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-small);
margin-top: var(--space-small);
.business-name-input {
display: flex;
gap: var(--space-small);
width: 80%;
input {
margin-bottom: 0;
}
}
}
</style>

161
app/javascript/dashboard/routes/dashboard/settings/inbox/components/SenderNameExamplePreview.vue Normal file
View File

@@ -0,0 +1,161 @@
<template>
<div class="sender-name--preview-container">
<button
v-for="keyOption in senderNameKeyOptions"
:key="keyOption.key"
class="preview-button"
@click="toggleSenderNameType(keyOption.key)"
>
<preview-card
:heading="keyOption.heading"
:content="keyOption.content"
:active="keyOption.key === senderNameType"
>
<div class="sender-name--preview-content">
<span class="text">
{{ $t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FOR_EG') }}
</span>
<div class="sender-name--preview">
<thumbnail :username="userName(keyOption)" size="32px" />
<div class="preview-card--content">
<div class="sender-name--preview">
<span v-if="isKeyOptionFriendly(keyOption.key)" class="name">
{{ keyOption.preview.senderName }}
</span>
<span v-if="isKeyOptionFriendly(keyOption.key)" class="text">
{{ $t('INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FRIENDLY.FROM') }}
</span>
<span class="name text-truncate">
{{ businessName || keyOption.preview.businessName }}
</span>
</div>
<span class="text">{{ keyOption.preview.email }}</span>
</div>
</div>
</div>
</preview-card>
</button>
</div>
</template>
<script>
import PreviewCard from 'dashboard/components/ui/PreviewCard';
import Thumbnail from 'dashboard/components/widgets/Thumbnail';
export default {
components: {
PreviewCard,
Thumbnail,
},
props: {
senderNameType: {
type: String,
default: 'friendly',
},
businessName: {
type: String,
default: '',
},
},
data() {
return {
senderNameKeyOptions: [
{
key: 'friendly',
heading: this.$t(
'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FRIENDLY.TITLE'
),
content: this.$t(
'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.FRIENDLY.SUBTITLE'
),
preview: {
senderName: 'Smith',
businessName: 'Chatwoot',
email: '<support@yourbusiness.com>',
},
},
{
key: 'professional',
heading: this.$t(
'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.PROFESSIONAL.TITLE'
),
content: this.$t(
'INBOX_MGMT.EDIT.SENDER_NAME_SECTION.PROFESSIONAL.SUBTITLE'
),
preview: {
senderName: '',
businessName: 'Chatwoot',
email: '<support@yourbusiness.com>',
},
},
],
};
},
methods: {
isKeyOptionFriendly(key) {
return key === 'friendly';
},
userName(keyOption) {
return this.isKeyOptionFriendly(keyOption.key)
? keyOption.preview.senderName
: keyOption.preview.businessName;
},
toggleSenderNameType(key) {
this.$emit('update', key);
},
},
};
</script>
<style lang="scss" scoped>
.sender-name--preview-container {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-normal);
.sender-name--preview-content {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--space-slab);
gap: var(--space-small);
}
}
.preview-button {
color: var(--s-700);
.text {
font-size: var(--font-size-mini);
}
.sender-name--preview {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-small);
.preview-card--content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-smaller);
.sender-name--preview {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--space-micro);
max-width: 18rem;
.name {
font-size: var(--font-size-mini);
font-weight: var(--font-weight-bold);
line-height: 1.2;
}
}
}
}
}
</style>

1
app/javascript/shared/mixins/specs/automationFixtures.js
View File

@@ -390,6 +390,7 @@ export const inboxes = [
working_hours_enabled: false,
enable_email_collect: true,
csat_survey_enabled: true,
sender_name_type: 0,
enable_auto_assignment: true,
out_of_office_message:
'We are unavailable at the moment. Leave a message we will respond once we are back.',