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

feat: Custom phone input in pre-chat form (#7275)

Browse Source 
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Sojan Jose <sojan@pepalo.com>
This commit is contained in:
Sivin Varghese
2023-06-26 10:26:06 +05:30
committed by GitHub
parent 996325f35b
commit 1176e5eb8a
7 changed files with 436 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

310
app/javascript/widget/components/Form/PhoneInput.vue Normal file
View File

@@ -0,0 +1,310 @@
<template>
<div class="phone-input--wrap relative mt-2">
<div
class="phone-input rounded w-full flex items-center justify-start outline-none border border-solid"
:class="inputHasError"
>
<div
class="country-emoji--wrap h-full cursor-pointer flex items-center justify-between px-2 py-2"
:class="dropdownClass"
@click="toggleCountryDropdown"
>
<h5 v-if="activeCountry.emoji" class="text-xl mb-0">
{{ activeCountry.emoji }}
</h5>
<fluent-icon v-else icon="globe" class="fluent-icon" size="20" />
<fluent-icon icon="chevron-down" class="fluent-icon" size="12" />
</div>
<span
v-if="activeDialCode"
class="py-2 pr-0 pl-2 text-base"
:class="$dm('text-slate-700', 'dark:text-slate-50')"
>
{{ activeDialCode }}
</span>
<input
:value="phoneNumber"
type="phoneInput"
class="border-0 w-full py-2 pl-2 pr-3 leading-tight outline-none h-full rounded-r"
name="phoneNumber"
:placeholder="placeholder"
:class="inputLightAndDarkModeColor"
@input="onChange"
@blur="context.blurHandler"
/>
</div>
<div
v-if="showDropdown"
ref="dropdown"
v-on-clickaway="closeDropdown"
:class="dropdownBackgroundClass"
class="country-dropdown h-48 overflow-y-auto z-10 absolute top-12 px-0 pt-0 pl-1 pr-1 pb-1 rounded shadow-lg"
>
<div class="sticky top-0" :class="dropdownBackgroundClass">
<input
ref="searchbar"
v-model="searchCountry"
type="text"
placeholder="Search country"
class="dropdown-search h-8 text-sm mb-1 mt-1 w-full rounded py-2 px-3 outline-none border border-solid"
:class="[$dm('bg-slate-50', 'dark:bg-slate-600'), inputBorderColor]"
/>
</div>
<div
v-for="(country, index) in items"
ref="dropdownItem"
:key="index"
class="country-dropdown--item h-8 flex items-center cursor-pointer rounded py-2 px-2"
:class="[
dropdownItemClass,
country.id === activeCountryCode ? activeDropdownItemClass : '',
index === selectedIndex ? focusedDropdownItemClass : '',
]"
@click="onSelectCountry(country)"
>
<span v-if="country.emoji" class="mr-2 text-xl">{{
country.emoji
}}</span>
<span class="truncate text-sm leading-5">
{{ country.name }}
</span>
<span class="ml-2 text-xs">{{ country.dial_code }}</span>
</div>
<div v-if="items.length === 0">
<span
class="text-sm mt-4 justify-center text-center flex"
:class="$dm('text-slate-700', 'dark:text-slate-50')"
>
{{ this.$t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_EMPTY') }}
</span>
</div>
</div>
</div>
</template>
<script>
import { mixin as clickaway } from 'vue-clickaway';
import countries from 'shared/constants/countries.js';
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
import mentionSelectionKeyboardMixin from 'dashboard/components/widgets/mentions/mentionSelectionKeyboardMixin.js';
import FormulateInputMixin from '@braid/vue-formulate/src/FormulateInputMixin';
import darkModeMixin from 'widget/mixins/darkModeMixin';
export default {
components: {
FluentIcon,
},
mixins: [
mentionSelectionKeyboardMixin,
FormulateInputMixin,
darkModeMixin,
clickaway,
],
props: {
placeholder: {
type: String,
default: '',
},
hasErrorInPhoneInput: {
type: Boolean,
default: false,
},
},
data() {
return {
selectedIndex: -1,
showDropdown: false,
searchCountry: '',
activeCountryCode: '',
activeDialCode: '',
phoneNumber: '',
};
},
computed: {
countries() {
return [
{
name: this.dropdownFirstItemName,
dial_code: '',
emoji: '',
id: '',
},
...countries,
];
},
dropdownFirstItemName() {
return this.activeCountryCode ? 'Clear selection' : 'Select Country';
},
dropdownClass() {
return `${this.$dm('bg-slate-100', 'dark:bg-slate-700')} ${this.$dm(
'text-slate-700',
'dark:text-slate-50'
)}`;
},
dropdownBackgroundClass() {
return `${this.$dm('bg-white', 'dark:bg-slate-700')} ${this.$dm(
'text-slate-700',
'dark:text-slate-50'
)}`;
},
dropdownItemClass() {
return `${this.$dm('text-slate-700', 'dark:text-slate-50')} ${this.$dm(
'hover:bg-slate-50',
'dark:hover:bg-slate-600'
)}`;
},
activeDropdownItemClass() {
return `active ${this.$dm('bg-slate-100', 'dark:bg-slate-800')}`;
},
focusedDropdownItemClass() {
return `focus ${this.$dm('bg-slate-50', 'dark:bg-slate-600')}`;
},
inputHasError() {
return this.hasErrorInPhoneInput
? `border-red-200 hover:border-red-300 focus:border-red-300 ${this.inputLightAndDarkModeColor}`
: `hover:border-black-300 focus:border-black-300 ${this.inputLightAndDarkModeColor} ${this.inputBorderColor}`;
},
inputBorderColor() {
return `${this.$dm('border-black-200', 'dark:border-black-500')}`;
},
inputLightAndDarkModeColor() {
return `${this.$dm('bg-white', 'dark:bg-slate-600')} ${this.$dm(
'text-slate-700',
'dark:text-slate-50'
)}`;
},
items() {
return this.countries.filter(country => {
const { name, dial_code, id } = country;
const search = this.searchCountry.toLowerCase();
return (
name.toLowerCase().includes(search) ||
dial_code.toLowerCase().includes(search) ||
id.toLowerCase().includes(search)
);
});
},
activeCountry() {
return (
this.countries.find(country => country.id === this.activeCountryCode) ||
''
);
},
},
methods: {
setContextValue(code) {
// This function is used to set the context value.
// The context value is used to set the value of the phone number field in the pre-chat form.
this.context.model = `${code}${this.phoneNumber}`;
},
dynamicallySetCountryCode(value) {
// This function is used to set the country code dynamically.
// The country and dial code is used to set from the value of the phone number field in the pre-chat form.
if (!value) return;
// check the number first four digit and check weather it is available in the countries array or not.
const country = countries.find(code => value.startsWith(code.dial_code));
if (country) {
// if it is available then set the country code and dial code.
this.activeCountryCode = country.id;
this.activeDialCode = country.dial_code;
// set the phone number without dial code.
this.phoneNumber = value.replace(country.dial_code, '');
}
},
onChange(e) {
this.phoneNumber = e.target.value;
this.dynamicallySetCountryCode(this.phoneNumber);
// This function is used to set the context value when the user types in the phone number field.
this.setContextValue(this.activeDialCode);
},
dropdownItem() {
// This function is used to get all the items in the dropdown.
return Array.from(
this.$refs.dropdown.querySelectorAll(
'div.country-dropdown div.country-dropdown--item'
)
);
},
focusedOrActiveItem(className) {
// This function is used to get the focused or active item in the dropdown.
return Array.from(
this.$refs.dropdown.querySelectorAll(
`div.country-dropdown div.country-dropdown--item.${className}`
)
);
},
handleKeyboardEvent(e) {
if (this.showDropdown) {
this.processKeyDownEvent(e);
this.scrollToFocusedOrActiveItem(this.focusedOrActiveItem('focus'));
}
},
onSelect() {
this.onSelectCountry(this.items[this.selectedIndex]);
},
scrollToFocusedOrActiveItem(item) {
// This function is used to scroll the dropdown to the focused or active item.
const focusedOrActiveItem = item;
if (focusedOrActiveItem.length > 0) {
const dropdown = this.$refs.dropdown;
const dropdownHeight = dropdown.clientHeight;
const itemTop = focusedOrActiveItem[0].offsetTop;
const itemHeight = focusedOrActiveItem[0].offsetHeight;
const scrollPosition = itemTop - dropdownHeight / 2 + itemHeight / 2;
dropdown.scrollTo({
top: scrollPosition,
behavior: 'auto',
});
}
},
onSelectCountry(country) {
this.activeCountryCode = country.id;
this.searchCountry = '';
this.activeDialCode = country.dial_code ? country.dial_code : '';
this.setContextValue(country.dial_code);
this.closeDropdown();
},
toggleCountryDropdown() {
this.showDropdown = !this.showDropdown;
this.selectedIndex = -1;
if (this.showDropdown) {
this.$nextTick(() => {
this.$refs.searchbar.focus();
// This is used to scroll the dropdown to the active item.
this.scrollToFocusedOrActiveItem(this.focusedOrActiveItem('active'));
});
}
},
closeDropdown() {
this.selectedIndex = -1;
this.showDropdown = false;
},
},
};
</script>
<style lang="scss" scoped>
@import '~widget/assets/scss/variables.scss';
.phone-input--wrap {
.phone-input {
height: 2.8rem;
input:placeholder-shown {
text-overflow: ellipsis;
}
}
.country-emoji--wrap {
border-bottom-left-radius: 0.18rem;
border-top-left-radius: 0.18rem;
min-width: 3.6rem;
width: 3.6rem;
}
.country-dropdown {
min-width: 6rem;
max-width: 14.8rem;
width: 100%;
}
}
</style>

31
app/javascript/widget/components/PreChat/Form.vue
View File

@@ -22,10 +22,14 @@
:label-class="context => labelClass(context)"
:input-class="context => inputClass(context)"
:validation-messages="{
isPhoneE164OrEmpty: $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.VALID_ERROR'),
startsWithPlus: $t(
'PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DIAL_CODE_VALID_ERROR'
),
isValidPhoneNumber: $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.VALID_ERROR'),
email: $t('PRE_CHAT_FORM.FIELDS.EMAIL_ADDRESS.VALID_ERROR'),
required: $t('PRE_CHAT_FORM.REQUIRED'),
}"
:has-error-in-phone-input="hasErrorInPhoneInput"
/>
<FormulateInput
v-if="!hasActiveCampaign"
@@ -64,6 +68,7 @@ import { isEmptyObject } from 'widget/helpers/utils';
import routerMixin from 'widget/mixins/routerMixin';
import darkModeMixin from 'widget/mixins/darkModeMixin';
import configMixin from 'widget/mixins/configMixin';
export default {
components: {
CustomButton,
@@ -79,6 +84,7 @@ export default {
data() {
return {
locale: this.$root.$i18n.locale,
hasErrorInPhoneInput: false,
message: '',
formValues: {},
labels: {
@@ -143,7 +149,10 @@ export default {
.filter(field => field.enabled)
.map(field => ({
...field,
type: this.findFieldType(field.type),
type:
field.name === 'phoneNumber'
? 'phoneInput'
: this.findFieldType(field.type),
}));
},
conversationCustomAttributes() {
@@ -202,6 +211,9 @@ export default {
if (classification === 'box' && type === 'checkbox') {
return '';
}
if (type === 'phoneInput') {
this.hasErrorInPhoneInput = hasErrors;
}
if (!hasErrors) {
return `${this.inputStyles} hover:border-black-300 focus:border-black-300 ${this.isInputDarkOrLightMode} ${this.inputBorderColor}`;
}
@@ -224,12 +236,9 @@ export default {
return this.formValues[name] || null;
},
getValidation({ type, name }) {
if (!this.isContactFieldRequired(name)) {
return '';
}
const validations = {
emailAddress: 'email',
phoneNumber: 'isPhoneE164OrEmpty',
phoneNumber: 'startsWithPlus|isValidPhoneNumber',
url: 'url',
date: 'date',
text: null,
@@ -238,11 +247,17 @@ export default {
checkbox: false,
};
const validationKeys = Object.keys(validations);
const validation = 'bail|required';
const isRequired = this.isContactFieldRequired(name);
const validation = isRequired ? 'bail|required' : 'bail|optional';
if (validationKeys.includes(name) || validationKeys.includes(type)) {
const validationType = validations[type] || validations[name];
return validationType ? `${validation}|${validationType}` : validation;
const validationString = validationType
? `${validation}|${validationType}`
: validation;
return validationString;
}
return '';
},
findFieldType(type) {

4
app/javascript/widget/i18n/locale/en.json
View File

@@ -66,7 +66,9 @@
"LABEL": "Phone Number",
"PLACEHOLDER": "Please enter your phone number",
"REQUIRED_ERROR": "Phone Number is required",
"VALID_ERROR": "Phone number should be of E.164 format eg: +1415555555"
"DIAL_CODE_VALID_ERROR": "Please select a country code",
"VALID_ERROR": "Please enter a valid phone number",
"DROPDOWN_EMPTY": "No results found"
},
"MESSAGE": {
"LABEL": "Message",