Add app signup geo logic (#21609)

* update logic

* update package

* add test

* update jest config

Author: stanleegoodspeed

.babelrc

@@ -1,33 +1,37 @@
 import { DOMReady } from '../helpers/documentReady';
 import { isMobile } from '../utils/isMobile';
+import { getGeoloc, getAppBaseUrl } from 'geo-locate';
 
 const doOnLoad = () => {
     const signupModal = document.getElementById('signupModal');
 
     signupModal.addEventListener('show.bs.modal', () => {
-        var regURL = 'https://app.datadoghq.com/signup_corp';
-        var mobileURL = 'https://app.datadoghq.com/signup_corp?mobile=true';
-        var lang_param = '';
-        var lang = '';
-
-        if (document.documentElement.lang) {
-            lang = document.documentElement.lang;
-        } else {
-            lang = ddc.lang;
-        }
+      
+        getGeoloc().then((loc) => {
+            const baseUrl = `https://${getAppBaseUrl(loc.appRegion)}/signup_corp`;
+        
+            var lang_param = '';
+            var lang = '';
+
+            if (document.documentElement.lang) {
+                lang = document.documentElement.lang;
+            } else {
+                lang = ddc.lang;
+            }
 
-        if (lang === 'fr' || lang === 'ja') {
-            lang_param = `?lang=${lang}`;
-        } else {
-            lang_param = '';
-        }
+            if (lang === 'fr' || lang === 'ja') {
+                lang_param = `?lang=${lang}`;
+            } else {
+                lang_param = '';
+            }
 
-        // Trigger conditional URL
-        if (isMobile()) {
-            document.querySelector('#signUpIframe').setAttribute('src', mobileURL);
-        } else {
-            document.querySelector('#signUpIframe').setAttribute('src', regURL + lang_param);
-        }
+            // Trigger conditional URL
+            if (isMobile()) {
+                document.querySelector('#signUpIframe').setAttribute('src', `${baseUrl}?mobile=true`);
+            } else {
+                document.querySelector('#signUpIframe').setAttribute('src', baseUrl + lang_param);
+            }
+        });
     });
 
     signupModal.addEventListener('hide.bs.modal', () => {

assets/scripts/components/global-modals.js

@@ -0,0 +1,38 @@
+/**
+ * @jest-environment jsdom
+ */
+import { getGeoloc } from 'geo-locate';
+
+describe('getGeoLoc runs as expected', () => {
+
+    beforeEach(() => {
+
+        global.fetch = jest.fn(() =>
+            Promise.resolve({
+                json: () => Promise.resolve( {"country": "US", "is_eu": false, "app_region": "us1"} ),
+            })
+        );
+
+        // set up window, localStorage mock
+        window.document.url = 'localhost';
+        window.Storage = true;
+        window.localStorage.__proto__.getItem = jest.fn();
+        window.localStorage.__proto__.setItem = jest.fn();
+    });
+
+    it('Should default US as the country and us1 as the region', () => {
+        // run geo function 
+        getGeoloc().then((loc) => {
+          expect(loc.country).toBe('US');
+          expect(loc.appRegion).toBe('us1');
+          
+          // make sure setItem is called
+          expect(localStorage.setItem).toHaveBeenCalled();
+        });
+
+        // fetch was executed as well
+        expect(fetch).toHaveBeenCalledWith(
+            "https://corpsite-staging.datadoghq.com/locate"
+        );
+    });
+});

assets/scripts/tests/geo.test.js

@@ -0,0 +1,12 @@
+module.exports = {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          targets: {
+            node: 'current'
+          }
+        }
+      ]
+    ]
+  }

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    transformIgnorePatterns: ['<rootDir>/node_modules/(?!geo-locate)'],
+}

jest.config.js

@@ -48,6 +48,7 @@
         "bootstrap": "^5.2",
         "del": "4.1.1",
         "fancy-log": "^1.3.3",
+        "geo-locate": "https://s3.amazonaws.com/origin-static-assets/corp-node-packages/master/geo-locate-v1.0.1.tgz",
         "hugo-bin": "0.108.0",
         "instantsearch.js": "^4.53.0",
         "js-cookie": "^2.2.1",

package.json

@@ -4327,6 +4327,7 @@ __metadata:
     eslint-plugin-react-hooks: ^2.5.0
     eslint-plugin-standard: ^4.0.0
     fancy-log: ^1.3.3
+    geo-locate: "https://s3.amazonaws.com/origin-static-assets/corp-node-packages/master/geo-locate-v1.0.1.tgz"
     hugo-bin: 0.108.0
     instantsearch.js: ^4.53.0
     jest: ^25.3.0
@@ -5562,6 +5563,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"geo-locate@https://s3.amazonaws.com/origin-static-assets/corp-node-packages/master/geo-locate-v1.0.1.tgz":
+  version: 1.0.1
+  resolution: "geo-locate@https://s3.amazonaws.com/origin-static-assets/corp-node-packages/master/geo-locate-v1.0.1.tgz"
+  checksum: 85c4c20ded085cdc515c72e77a291d2f456402e76e6acb58b373ee8be1bf7c4430e780881c6157a1687299d29e10fcfd95f6b3972cb934a9f42c3be7e40af40e
+  languageName: node
+  linkType: hard
+
 "get-caller-file@npm:^2.0.1":
   version: 2.0.5
   resolution: "get-caller-file@npm:2.0.5"