Updated widget usage

dimagi · Feb 12, 2025 · 5d903af · 5d903af
1 parent 2b60aa9
commit 5d903af
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 22 deletions.
diff --git a/corehq/apps/analytics/static/analytix/js/cta_forms.js b/corehq/apps/analytics/static/analytix/js/cta_forms.js
@@ -5,14 +5,15 @@ hqDefine('analytix/js/cta_forms', [
     'underscore',
     'hqwebapp/js/initial_page_data',
     'hqwebapp/js/assert_properties',
-    'hqwebapp/js/bootstrap3/validators.ko',        // needed for validation of startDate and endDate
     'intl-tel-input/build/js/intlTelInput.min',
+    'hqwebapp/js/bootstrap3/validators.ko',        // needed for validation of startDate and endDate
 ], function (
     $,
     ko,
     _,
     initialPageData,
     assertProperties,
+    intlTelInput,
 ) {
     let hubspotCtaForm = function (config) {
         let self = {};
@@ -126,9 +127,10 @@ hqDefine('analytix/js/cta_forms', [
             return !!self.errorMessage();
         });
 
-        config.phoneNumberSelector.intlTelInput({
+        var phoneNumberWidget = intlTelInput(document.querySelector(config.phoneNumberSelector), {
+            containerClass: "w-100",
             separateDialCode: true,
-            utilsScript: initialPageData.get('number_utils_script'),
+            loadUtils: () => import("intl-tel-input/utils"),
             initialCountry: "auto",
             geoIpLookup: function (success) {
                 $.get("https://ipinfo.io", function () {}, "jsonp").always(function (resp) {
@@ -142,7 +144,7 @@ hqDefine('analytix/js/cta_forms', [
         });
 
         self.getFullPhoneNumber = function () {
-            return config.phoneNumberSelector.intlTelInput("getNumber");
+            return phoneNumberWidget.getNumber();
         };
 
         self.submitForm = function () {

diff --git a/corehq/apps/hqwebapp/static/hqwebapp/less/b5-compatibility.less b/corehq/apps/hqwebapp/static/hqwebapp/less/b5-compatibility.less
@@ -0,0 +1,3 @@
+.w-100 {
+    width: 100%;
+}
diff --git a/corehq/apps/hqwebapp/static/hqwebapp/less/style.less b/corehq/apps/hqwebapp/static/hqwebapp/less/style.less
@@ -2,3 +2,4 @@
 @b3-import-mixins: '../../../../../../../../node_modules/bootstrap/less/mixins';
 
 @import 'style-imports';
+@import 'b5-compatibility';
diff --git a/corehq/apps/hqwebapp/templates/hqwebapp/base.html b/corehq/apps/hqwebapp/templates/hqwebapp/base.html
@@ -256,7 +256,6 @@
 
 
     {# for get demo and get trial forms #}
-    {% initial_page_data 'number_utils_script' 'intl-tel-input/build/js/utils.js'|static %}
     {% initial_page_data 'ace_base_path' 'ace-builds/src-min-noconflict'|static %}
 
     {% if demo_workflow_ab_v2 %}

diff --git a/corehq/apps/registration/static/registration/js/new_user.ko.js b/corehq/apps/registration/static/registration/js/new_user.ko.js
@@ -6,9 +6,9 @@ hqDefine('registration/js/new_user.ko', [
     'analytix/js/kissmetrix',
     'analytix/js/appcues',
     'hqwebapp/js/initial_page_data',
+    'intl-tel-input/build/js/intlTelInput.min',
     'jquery-ui/ui/effect',
     'jquery-ui/ui/effects/effect-slide',
-    'intl-tel-input/build/js/intlTelInput.min',
     'hqwebapp/js/password_validators.ko',
 ], function (
     $,
@@ -18,6 +18,7 @@ hqDefine('registration/js/new_user.ko', [
     kissmetrics,
     appcues,
     initialPageData,
+    intlTelInput,
 ) {
     var module = {};
 
@@ -430,21 +431,22 @@ hqDefine('registration/js/new_user.ko', [
             module.submitAttemptFn = callback;
         },
         setPhoneNumberInput: function (inputSelector) {
-            var $number = $(inputSelector);
-            $number.intlTelInput({
-                separateDialCode: true,
-                utilsScript: initialPageData.get('number_utils_script'),
-                initialCountry: "auto",
-                geoIpLookup: function (success) {
-                    $.get("https://ipinfo.io", function () {}, "jsonp").always(function (resp) {
-                        var countryCode = (resp && resp.country) ? resp.country : "";
-                        if (!countryCode) {
-                            countryCode = "us";
-                        }
-                        success(countryCode);
-                    });
-                },
-            });
+            var $number = $(inputSelector),
+                numberWidget = intlTelInput($number[0], {
+                    containerClass: "w-100",
+                    separateDialCode: true,
+                    loadUtils: () => import("intl-tel-input/utils"),
+                    initialCountry: "auto",
+                    geoIpLookup: function (success) {
+                        $.get("https://ipinfo.io", function () {}, "jsonp").always(function (resp) {
+                            var countryCode = (resp && resp.country) ? resp.country : "";
+                            if (!countryCode) {
+                                countryCode = "us";
+                            }
+                            success(countryCode);
+                        });
+                    },
+                });
             $number.keydown(function (e) {
                 // prevents non-numeric numbers from being entered.
                 // from http://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery
@@ -465,7 +467,7 @@ hqDefine('registration/js/new_user.ko', [
                 }
             });
             module.getPhoneNumberFn = function () {
-                return $number.intlTelInput("getNumber");
+                return numberWidget.getNumber();
             };
         },
         initRMI: function (rmiUrl) {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,4 @@
		@b3-import-mixins: '../../../../../../../../node_modules/bootstrap/less/mixins';

		@import 'style-imports';
		@import 'b5-compatibility';