+
+
+
+ `,
+ content: () => picker_wrapper,
+ html: true
+ }).on('show.bs.popover', () => {
+ setTimeout(() => {
+ this.country_code_picker.refresh();
+ this.country_code_picker.search_input.focus();
+ }, 10);
+ }).on('hidden.bs.popover', () => {
+ $('body').off('click.phone-popover');
+ $(window).off('hashchange.phone-popover');
+ });
+
+ // Default icon when nothing is selected.
+ this.selected_icon = this.$wrapper.find('.selected-phone');
+ let input_value = this.get_input_value();
+ if (!this.selected_icon.length) {
+ this.selected_icon = $(`${frappe.utils.icon("down", "sm")}
`);
+ this.selected_icon.insertAfter(this.$input);
+ this.selected_icon.append($(``));
+ this.$isd = this.selected_icon.find('.country');
+ if (input_value && input_value.split("-").length == 2) {
+ this.$isd.text(this.value.split("-")[0]);
+ }
+ }
+ }
+
+ refresh() {
+ super.refresh();
+ // Previously opened doc values showing up on a new doc
+
+ if (this.frm && this.frm.doc.__islocal && !this.get_value()) {
+ this.reset_input();
+ }
+ }
+
+ reset_input() {
+ this.$input.val("");
+ this.$wrapper.find('.country').text("");
+ if (this.selected_icon.find('svg').hasClass('hide')) {
+ this.selected_icon.find('svg').toggleClass('hide');
+ this.selected_icon.find('img').addClass('hide');
+ }
+ this.$input.css("padding-left", 30);
+ }
+
+ set_formatted_input(value) {
+ if (value && value.includes('-') && value.split('-').length == 2) {
+ let isd = this.value.split("-")[0];
+ this.get_country_code_and_change_flag(isd);
+ this.country_code_picker.set_country(isd);
+ this.country_code_picker.refresh();
+ if (this.country_code_picker.country && this.country_code_picker.country !== this.$isd.text()) {
+ this.$isd.length && this.$isd.text(isd);
+ }
+ this.update_padding();
+ this.$input.val(value.split('-').pop());
+
+ } else if (this.$isd.text().trim() && this.value) {
+ let code_number = this.$isd.text() + '-' + value;
+ this.set_value(code_number);
+ }
+ }
+
+ get_value() {
+ return this.value;
+ }
+
+ set_flag(country_code) {
+ this.selected_icon.find('img').attr('src', `https://flagcdn.com/${country_code}.svg`);
+ this.$icon = this.selected_icon.find('img');
+ this.$icon.hasClass('hide') && this.$icon.toggleClass('hide');
+ }
+
+ // country_code for India is 'in'
+ get_country_code_and_change_flag(isd) {
+ let country_data = frappe.boot.country_codes;
+ let flag = this.selected_icon.find('img');
+ for (const country in country_data) {
+ if (Object.values(country_data[country]).includes(isd)) {
+ let code = country_data[country].code;
+ flag = this.selected_icon.find('img');
+ if (!flag.length) {
+ this.selected_icon.prepend(this.get_country_flag(country));
+ this.selected_icon.find('svg').addClass('hide');
+ } else {
+ this.set_flag(code);
+ }
+ }
+ }
+ }
+
+ get_country(country) {
+ const country_codes = frappe.boot.country_codes;
+ return country_codes[country].isd;
+ }
+
+ get_country_flag(country) {
+ const country_codes = frappe.boot.country_codes;
+ let code = country_codes[country].code;
+ return frappe.utils.flag(code);
+ }
+
+ update_padding() {
+ let len = this.$isd.text().length;
+ let diff = len - 2;
+ if (len > 2) {
+ this.$input.css("padding-left", 60 + (diff * 7));
+ } else {
+ this.$input.css("padding-left", 60);
+ }
+ }
+};
diff --git a/frappe/public/js/frappe/phone_picker/phone_picker.js b/frappe/public/js/frappe/phone_picker/phone_picker.js
new file mode 100644
index 0000000000..e96d34b991
--- /dev/null
+++ b/frappe/public/js/frappe/phone_picker/phone_picker.js
@@ -0,0 +1,103 @@
+class PhonePicker {
+ constructor(opts) {
+ this.parent = opts.parent;
+ this.width = opts.width;
+ this.height = opts.height;
+ this.country = opts.country;
+ opts.country && this.set_country(opts.country);
+ this.countries = opts.countries;
+ this.setup_picker();
+ }
+
+ refresh() {
+ this.update_icon_selected(true);
+ }
+
+ setup_picker() {
+ this.phone_picker_wrapper = $(`
+
+
+ `);
+ this.parent.append(this.phone_picker_wrapper);
+ this.phone_wrapper = this.phone_picker_wrapper.find('.phones');
+ this.search_input = this.phone_picker_wrapper.find('.search-phones > input');
+ this.refresh();
+ this.setup_countries();
+ }
+
+ setup_countries() {
+ Object.entries(this.countries).forEach(([country, info]) => {
+ if (!info.isd) {
+ return;
+ }
+ let $country = $(`
+
+
+ ${frappe.utils.icon('search', "sm")}
+
+
+
+
+
+ ${frappe.utils.flag(info.code)}
+ ${country} (${info.isd})
+
+ `);
+ this.phone_wrapper.append($country);
+ const set_values = () => {
+ this.set_country(country);
+ this.update_icon_selected();
+ };
+ $country.on('click', () => {
+ set_values();
+ });
+ $country.hover(() => {
+ $country.toggleClass("bg-gray-100");
+ });
+ this.search_input.keydown((e) => {
+ const key_code = e.keyCode;
+ if ([13].includes(key_code)) {
+ e.preventDefault();
+ set_values();
+ }
+ });
+ this.search_input.keyup((e) => {
+ e.preventDefault();
+ this.filter_icons();
+ });
+
+ this.search_input.on('search', () => {
+ this.filter_icons();
+ });
+ });
+ }
+
+ filter_icons() {
+ let value = this.search_input.val();
+ if (!value) {
+ this.phone_wrapper.find(".phone-wrapper").removeClass('hidden');
+ } else {
+ this.phone_wrapper.find(".phone-wrapper").addClass('hidden');
+ this.phone_wrapper.find(`.phone-wrapper[id*='${value.toLowerCase()}']`).removeClass('hidden');
+ }
+ }
+
+ update_icon_selected(silent) {
+ !silent && this.on_change && this.on_change(this.get_country());
+ }
+
+ set_country(country) {
+ this.country = country || '';
+ }
+
+ get_country() {
+ return this.country;
+ }
+
+ reset() {
+ this.set_country();
+ this.update_icon_selected();
+ }
+}
+
+export default PhonePicker;
diff --git a/frappe/public/js/frappe/utils/utils.js b/frappe/public/js/frappe/utils/utils.js
index 0514576380..4690012dc2 100644
--- a/frappe/public/js/frappe/utils/utils.js
+++ b/frappe/public/js/frappe/utils/utils.js
@@ -1192,6 +1192,12 @@ Object.assign(frappe.utils, {
`;
},
+ flag(country_code) {
+ return `
`;
+ },
+
make_chart(wrapper, custom_options={}) {
let chart_args = {
type: 'bar',
diff --git a/frappe/public/scss/common/controls.scss b/frappe/public/scss/common/controls.scss
index 9df89f23e1..1135fbb23d 100644
--- a/frappe/public/scss/common/controls.scss
+++ b/frappe/public/scss/common/controls.scss
@@ -2,6 +2,7 @@
@import "color_picker";
@import "icon_picker";
@import "datepicker";
+@import "phone_picker";
// password
.form-control[data-fieldtype="Password"] {
diff --git a/frappe/public/scss/common/phone_picker.scss b/frappe/public/scss/common/phone_picker.scss
new file mode 100644
index 0000000000..f2131e8b84
--- /dev/null
+++ b/frappe/public/scss/common/phone_picker.scss
@@ -0,0 +1,144 @@
+.phone-picker {
+ font-size: var(--text-xs);
+ color: var(--text-muted);
+ --phone-picker-width: 290px;
+ width: var(--phone-picker-width);
+ .phones {
+ margin-top: 10px;
+ display: flex;
+ flex-wrap: wrap;
+ overflow-y: scroll;
+ max-height: 210px;
+ cursor: pointer;
+
+ /* Hide scrollbar for IE, Edge and Firefox */
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+
+ /* Hide scrollbar for Chrome, Safari and Opera */
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ .phone-wrapper {
+ display: flex;
+ width: 290px;
+ height: 30px;
+ text-align: center;
+ align-items: center;
+ border-radius: 0.375rem;
+ padding: 0.5rem;
+
+ img {
+ height: 15px;
+ }
+ .country {
+ display: flex;
+ margin-left: 0.6rem;
+ flex-grow: 1;
+ width: 290px;
+ }
+ }
+ }
+
+ .search-phones {
+ position: relative;
+
+ input[type='search'] {
+ height: inherit;
+ padding-left: 30px;
+ }
+
+ .search-phone {
+ position: absolute;
+ top: 7px;
+ left: 7px;
+ }
+ }
+}
+
+.phone-picker-popover {
+ max-width: 325px;
+ left: 29px !important;
+ .picker-arrow {
+ left: 15px !important;
+ }
+ @media (max-width: 992px) {
+ max-width: 325px;
+ left: 48px !important;
+ }
+}
+
+
+.frappe-control[data-fieldtype='Phone']
+{
+ input {
+ padding-left: 30px;
+ }
+ .selected-phone {
+ display: flex;
+ cursor: pointer;
+ height: 20px;
+ border-radius: 5px;
+ position: absolute;
+ top: calc(50% + 2px);
+ left: 8px;
+ content: ' ';
+ align-items: center;
+ z-index: 1;
+
+ .country {
+ display: flex;
+ margin-left: 0.6rem;
+ align-items: flex-end;
+ flex-grow: 1;
+ }
+
+ img {
+ height: 15px;
+ }
+
+ }
+ .like-disabled-input {
+ .phone-value {
+ padding-left: 25px;
+ }
+ .selected-phone {
+ top: 20%;
+ cursor: default;
+ }
+ }
+}
+
+.modal-body {
+ .frappe-control[data-fieldtype='Phone']
+ {
+ .selected-phone {
+ top: calc(50% - 0.5px);
+ }
+ }
+}
+
+.data-row.row {
+ .selected-phone {
+ top: calc(50% - 10.1px);
+ z-index: 2;
+ }
+}
+
+.bg-gray-100 {
+ --tw-bg-opacity: 1;
+ background-color: rgba(244,245,246,var(--tw-bg-opacity));
+}
+
+.dt-cell__content {
+ .selected-phone {
+ display: contents;
+ }
+}
+
+.dt-cell__edit, .filter-field {
+ .selected-phone {
+ top: 5.5px !important;
+ }
+}
diff --git a/frappe/utils/__init__.py b/frappe/utils/__init__.py
index 13e6911634..1af0ec6a39 100644
--- a/frappe/utils/__init__.py
+++ b/frappe/utils/__init__.py
@@ -83,6 +83,33 @@ def extract_email_id(email):
return email_id
+def validate_phone_number_with_country_code(phone_number, fieldname):
+ from phonenumbers import NumberParseException, is_valid_number, parse
+
+ from frappe import _
+
+ if not phone_number:
+ return
+
+ valid_number = False
+ error_message = _("Phone Number {0} set in field {1} is not valid.")
+ error_title = _("Invalid Phone Number")
+ try:
+ if valid_number := is_valid_number(parse(phone_number)):
+ return True
+ except NumberParseException as e:
+ if e.error_type == NumberParseException.INVALID_COUNTRY_CODE:
+ error_message = _("Please select a country code for field {1}.")
+ error_title = _("Country Code Required")
+ finally:
+ if not valid_number:
+ frappe.throw(
+ error_message.format(frappe.bold(phone_number), frappe.bold(fieldname)),
+ title=error_title,
+ exc=frappe.InvalidPhoneNumberError,
+ )
+
+
def validate_phone_number(phone_number, throw=False):
"""Returns True if valid phone number"""
if not phone_number:
diff --git a/requirements.txt b/requirements.txt
index e14c35157b..88ad0562b7 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -72,3 +72,5 @@ zxcvbn-python~=4.4.24
tenacity~=8.0.1
cairocffi==1.2.0
WeasyPrint==52.5
+phonenumbers==8.12.40
+