diff --git a/app/javascript/dashboard/components/index.js b/app/javascript/dashboard/components/index.js index f5ce5d856..ee06ebc9a 100644 --- a/app/javascript/dashboard/components/index.js +++ b/app/javascript/dashboard/components/index.js @@ -13,6 +13,7 @@ import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu'; import FeatureToggle from './widgets/FeatureToggle'; import HorizontalBar from './widgets/chart/HorizontalBarChart'; import Input from './widgets/forms/Input.vue'; +import PhoneInput from './widgets/forms/PhoneInput.vue'; import Label from './ui/Label'; import LoadingState from './widgets/LoadingState'; import Modal from './Modal'; @@ -40,6 +41,7 @@ const WootUIKit = { FeatureToggle, HorizontalBar, Input, + PhoneInput, Label, LoadingState, Modal, diff --git a/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue new file mode 100644 index 000000000..6580ab83c --- /dev/null +++ b/app/javascript/dashboard/components/widgets/forms/PhoneInput.vue @@ -0,0 +1,361 @@ + + + + diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json index 9191698d8..bfeb2c4a9 100644 --- a/app/javascript/dashboard/i18n/locale/en/contact.json +++ b/app/javascript/dashboard/i18n/locale/en/contact.json @@ -120,8 +120,9 @@ "PHONE_NUMBER": { "PLACEHOLDER": "Enter the phone number of the contact", "LABEL": "Phone Number", - "HELP": "Phone number should be of E.164 format eg: +1415555555 [+][country code][area code][local phone number]", + "HELP": "Phone number should be of E.164 format eg: +1415555555 [+][country code][area code][local phone number]. You can select the dial code from the dropdown.", "ERROR": "Phone number should be either empty or of E.164 format", + "DIAL_CODE_ERROR": "Please select a dial code from the list", "DUPLICATE": "This phone number is in use for another contact." }, "LOCATION": { diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue index 630f1edcf..66e3a4a25 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue @@ -52,20 +52,27 @@
-