feat(l10n): change OFF url depending on user locale (#445)

src/components/Footer.vue

@@ -5,7 +5,7 @@
         <i18n-t keypath="Footer.TagLine" tag="span">
           <template #name>{{ APP_NAME }}</template>
           <template #url>
-            <a href="https://world.openfoodfacts.org" target="_blank">{{ OFF_NAME }}</a>
+            <OpenFoodFactsLink display="link"></OpenFoodFactsLink>
           </template>
         </i18n-t>
       </v-col>
@@ -19,9 +19,13 @@
 </template>
 
 <script>
+import { defineAsyncComponent } from 'vue'
 import constants from '../constants'
 
 export default {
+  components: {
+    'OpenFoodFactsLink': defineAsyncComponent(() => import('../components/OpenFoodFactsLink.vue')),
+  },
   data() {
     return {
       APP_NAME: constants.APP_NAME,

src/components/OpenFoodFactsLink.vue

@@ -1,5 +1,5 @@
 <template>
-  <a v-if="display === 'link'" href="https://world.openfoodfacts.org" target="_blank">
+  <a v-if="display === 'link'" :href="getOFFUrl()" target="_blank">
     {{ getOFFName() }}
   </a>
   <v-btn v-if="display === 'button'" size="small" append-icon="mdi-open-in-new" :href="getOFFUrl()" target="_blank">
@@ -8,6 +8,8 @@
 </template>
 
 <script>
+import { mapStores } from 'pinia'
+import { useAppStore } from '../store'
 import constants from '../constants'
 
 export default {
@@ -29,12 +31,18 @@ export default {
       OFF_URL: constants.OFF_URL,
     }
   },
+  computed: {
+    ...mapStores(useAppStore),
+    getOFFUrlWithLocale() {
+      return this.OFF_URL.replace('world', this.appStore.user.language)
+    }
+  },
   methods: {
     getOFFUrl() {
       if (this.facet && this.value) {
-        return `${this.OFF_URL}/${this.facet}/${this.value}`
+        return `${this.getOFFUrlWithLocale}/${this.facet}/${this.value}`
       }
-      return this.OFF_URL
+      return this.getOFFUrlWithLocale
     },
     getOFFName() {
       if (this.action === 'add') {