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

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>