Detect Site Visitor's Geoloaction

functions.js

/* ====================================================================================================
   ========================================== Backend Code ============================================
   ====================================================================================================
*/

// Backend module: functions.jsw
import { getJSON, fetch } from 'wix-fetch';
import wixSecretsBackend from 'wix-secrets-backend';

export async function getCountries() {
    const token = await wixSecretsBackend.getSecret('nasriya_API_Token');
    const options = {
        "method": "get",
        "headers": {
            'Accept': 'application/json',
            "Authorization": `Bearer ${token}`
        }
    }

    return getJSON('https://www.nasriya.net/_functions/getCountries?lang=en&includeFlags=true&includeDialingCodes=true', options).then((json) => {
        return Promise.resolve(json);
    }).catch(err => {
        return Promise.reject(err);
    })
}

export function getBaseUrl() {
    return Promise.resolve('https://extreme-ip-lookup.com/json');
}

export function fetchRes(url, options) {
    return fetch(url, options).then(async (httpResponse) => {
        let json = await httpResponse.json().catch(err => { return null })
        return Promise.resolve({ response: httpResponse, json: json });
    }).catch(err => {
        return Promise.reject(err);
    })
}

page.js

/* ====================================================================================================
   ========================================== Frontend Code ===========================================
   ====================================================================================================
*/

import { getJSON } from 'wix-fetch';
import { getCountries, getBaseUrl } from 'backend/functions.jsw';

let countries;
let baseUrl;

$w.onReady(async () => {
    await getCountries().then(async (results) => {
        countries = results.result;
        let mapped = countries.map(items => items.country);
        let countriesOptions = [];
        mapped.forEach(country => {
            countriesOptions.push({ label: country, value: country })
        })

        $w('#countries').options = countriesOptions;

        baseUrl = await getBaseUrl();
        detectIp().then(() => {
            $w('#countries').onChange((event) => {
                setCountry(event.target.value);
            })

            $w('#app').changeState('ready');
        }).catch(err => {
            console.error(err);
        })
    })
});

function detectIp() {
    return getJSON(baseUrl).then(async(json) => {
        if (json.status === 'success') {
            await setCountry(json.country);
            return Promise.resolve(json);
        } else {
            console.error(json);
            return Promise.reject(json);
        }
    }).catch(err => {
        return Promise.reject(err);
    })
}

function setCountry(country) {
    let index = countries.map(items => items.country).indexOf(country);
    $w('#countries').selectedIndex = index;
    $w('#countryFlag').src = countries[index].flag;
    $w('#dialingCode').value = countries[index].dialingCode;
    return Promise.resolve();
}