✨ Updated geolocation check

src/app/app.vue

@@ -33,13 +33,14 @@
   import { GA_COOKIE_NAME } from '@/config/analytics'
   import { SUPPORTED_LOCALES } from '@/config'
   import { setCookie, getCookie } from '@/helper/cookies'
-  import { getTranslatedUrl } from '@/i18n/helper'
+  import { getUserLanguage, getTranslatedUrl } from '@/i18n/helper'
 
   export default {
     name: 'App',
 
     data () {
       return {
+        userCountry: null,
         showConsentLayer: getCookie(GA_COOKIE_NAME) === null,
         euromatLogo: require('@/assets/svg/euromat-logo.svg'),
         logoSize: 220,
@@ -118,6 +119,11 @@
       }
     },
 
+    async created () {
+      const { country } = await getUserLanguage()
+      this.userCountry = country
+    },
+
     methods: {
       updateConsent (consent) {
         setCookie(GA_COOKIE_NAME, consent)

src/app/euromat/components/results.vue

@@ -11,7 +11,7 @@
 
     <ul class="party-results">
       <li v-for="party of parties" :key="party.token">
-        <router-link :to="{ path: getPartyPath(party.token.toLowerCase()) }">
+        <router-link :to="{ path: getPartyPath(party.token) }">
           <div class="result-party-info">
             <div class="result-party-logo">
               <img
@@ -39,7 +39,7 @@
         <div v-if="party.nationalParty" class="party-results-national">
           <feather-corner-down-right />
           <span>
-            {{ $t('results.nationalParty') }}:
+            {{ $t('results.nationalParty') }}
             <a
               class="party-results-national-logo"
               :href="party.nationalParty.program"
@@ -83,7 +83,7 @@
 </template>
 
 <script>
-  import { getUserLanguage, getTranslatedUrl } from '@/i18n/helper'
+  import { getTranslatedUrl } from '@/i18n/helper'
   import {
     MAX_POINTS,
     BASE_POINTS,
@@ -109,6 +109,7 @@
 
     data () {
       return {
+        userCountry: this.$root.$children[0].userCountry.toLowerCase(),
         scoringGrid: [],
         answers: [],
         emphasized: [],
@@ -155,6 +156,7 @@
         .map(this.getScorePerParty)
         .sort((a, b) => a.score - b.score)
         .reverse()
+      console.log(parties)
       this.totalScoredPoints = this.scores
         .map(s => s.highestScore)
         .reduce(addUp, 0)
@@ -162,22 +164,31 @@
 
     methods: {
       getPartyPath (token) {
-        return `${getTranslatedUrl('party')}/${token}`
+        return `${getTranslatedUrl('party')}/${token.toLowerCase()}`
       },
       getPartyLogo (token) {
         try {
           return require(`@/assets/svg/${token.toLowerCase().replace(/\s/g, '-')}-logo.svg`)
-        } catch (error) {
-          console.warn(`No logo found for party "${token}", falling back to initials.`, error.message)
-          return false
+        } catch (e) {
+          try {
+            return require(`@/assets/${token.toLowerCase().replace(/\s/g, '-')}-logo.png`)
+          } catch (error) {
+            console.warn(`No logo found for party "${token}", falling back to initials.`, error.message)
+            return false
+          }
         }
       },
       hasPartyLogo (token) {
         try {
           require(`@/assets/svg/${token.toLowerCase().replace(/\s/g, '-')}-logo.svg`)
           return true
-        } catch (error) {
-          return false
+        } catch (e) {
+          try {
+            require(`@/assets/${token.toLowerCase().replace(/\s/g, '-')}-logo.png`)
+            return true
+          } catch (error) {
+            return false
+          }
         }
       },
       getScorePercentage (score) {
@@ -242,7 +253,7 @@
           score: this.scores
             .map(t => t.scores.find(s => s.party === party.id).score)
             .reduce(addUp, 0),
-          nationalParty: party['national_parties'][getUserLanguage().country]
+          nationalParty: party['national_parties'][this.userCountry]
         }
       }
     }

src/data/parties.json

@@ -3285,12 +3285,12 @@
     },
     "national_parties": {
       "de": {
-        "token": "VOLT-D",
+        "token": "VOLT",
         "name": "VOLT Deutschland",
         "program": "https://d3n8a8pro7vhmx.cloudfront.net/volt/pages/3202/attachments/original/1554969359/2019_02_28_Amsterdam_Deklaration_A4.pdf?1554969359"
       },
       "fr": {
-        "token": "VOLT-FR",
+        "token": "VOLT",
         "name": "VOLT France",
         "program": "https://d3n8a8pro7vhmx.cloudfront.net/volteuropadev/pages/359/attachments/original/1556830400/FRENCH-Amsterdam-Declaration.pdf?1556830400"
       }

src/i18n/helper.js

@@ -1,6 +1,11 @@
 import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from '@/config'
 import i18n from './index'
 
+export const getCountryByIP = async () => {
+  const response = await fetch('https://api.ipdata.co/?api-key=test')
+  return response.json()
+}
+
 export const isLangSupported = lang =>
   SUPPORTED_LOCALES.some(([locale]) => locale === lang)
 
@@ -12,15 +17,16 @@ export const setCurrentLocale = (locale) => {
   }
 }
 
-export function getUserLanguage () {
+export async function getUserLanguage () {
   const lang = (
     window.navigator.language ||
     window.navigator.userLanguage ||
     DEFAULT_LOCALE
   )
+  const ipData = await getCountryByIP()
   return {
     language: lang.split('-')[0],
-    country: lang.split('-')[1].toLowerCase()
+    country: ipData.country_code || lang.split('-')[1].toLowerCase()
   }
 }
 

src/router/helper.js

@@ -8,10 +8,11 @@ export function getPageTitle (data = {}) {
     : title
 }
 
-export function beforeEnter (to, from, next) {
+export async function beforeEnter (to, from, next) {
   const lang = to.params.locale
   if (!i18n.isLangSupported(lang)) {
-    return next(i18n.getUserLanguage().language)
+    const { language } = await i18n.getUserLanguage()
+    return next(language)
   }
 
   i18n.setCurrentLocale(lang)