[FEATURE] Fluidifier la navigation de l'utilisateur (PIX-6705)

components/FooterSliceZone.vue

@@ -57,7 +57,7 @@ export default {
   data() {
     return {
       socialMediasHoverMap: {},
-      usedMainFooter: null,
+      usedMainFooter: [],
     }
   },
   async fetch() {
@@ -75,6 +75,9 @@ export default {
       )
     },
   },
+  watch: {
+    '$i18n.locale': '$fetch',
+  },
 }
 </script>
 

components/HotNewsBanner.vue

@@ -29,6 +29,9 @@ export default {
 
     this.hotNews = hotNews?.data?.description
   },
+  watch: {
+    '$i18n.locale': '$fetch',
+  },
   methods: {
     closeBanner() {
       this.isOpen = false

components/LanguageSwitcher/LanguageSwitcher.vue

@@ -53,7 +53,7 @@
               :selected-menu="selectedMenu"
             />
           </template>
-          <a v-else-if="!option.children" :href="getIndexUrl(option)">
+          <pix-link v-else-if="!option.children" :href="getIndexUrl(option)">
             <img
               class="language-switcher__img"
               :src="'/images/' + option.icon"
@@ -65,7 +65,7 @@
                 {{ $t(option.subtitle) }}
               </div>
             </div>
-          </a>
+          </pix-link>
         </div>
       </li>
     </ul>
@@ -84,9 +84,9 @@
                 child.lang === currentLocaleCode,
             }"
           >
-            <a :href="getIndexUrl(child)">
+            <pix-link :href="getIndexUrl(child)">
               {{ $t(option.name) }} - {{ $t(child.name) }}
-            </a>
+            </pix-link>
             <br />
           </span>
         </template>
@@ -98,9 +98,9 @@
                 option.lang === currentLocaleCode,
             }"
           >
-            <a :href="getIndexUrl(option)">
+            <pix-link :href="getIndexUrl(option)">
               {{ $t(option.name) }}
-            </a>
+            </pix-link>
           </span>
         </template>
       </li>

components/LanguageSwitcher/LanguageSwitcherSubMenu.vue

@@ -9,9 +9,9 @@
       }"
     >
       <div class="language-switcher__lang">
-        <a :href="getIndexUrl(availableLanguage)">
+        <pix-link :href="getIndexUrl(availableLanguage)">
           {{ $t(availableLanguage.name) }}
-        </a>
+        </pix-link>
       </div>
     </li>
   </ul>

components/LocaleLink.vue

@@ -1,8 +1,8 @@
 <template>
-  <a class="locale-link" :href="indexForGivenLocale()">
+  <pix-link class="locale-link" :href="indexForGivenLocale()">
     <img :src="'/images/' + locale.icon" alt="" />
     <span class="locale-link__text">{{ locale.name }}</span>
-  </a>
+  </pix-link>
 </template>
 
 <script>

components/NavigationSliceZone.vue

@@ -35,7 +35,7 @@ export default {
   name: 'NavigationSliceZone',
   data() {
     return {
-      usedMainNavigation: null,
+      usedMainNavigation: [],
     }
   },
   async fetch() {
@@ -67,16 +67,19 @@ export default {
     burgerMenuLinks() {
       const navigationZone = this.usedMainNavigation.find(
         (slice) => slice.slice_type === 'navigation_zone'
-      )
+      ) || { items: [] }
       const actionsZone = this.usedMainNavigation.find(
         (slice) => slice.slice_type === 'actions_zone'
-      )
+      ) || { items: [] }
       return {
         navigationZone: navigationZone.items,
         actionsZone: actionsZone.items,
       }
     },
   },
+  watch: {
+    '$i18n.locale': '$fetch',
+  },
 }
 </script>
 

components/PixLink.vue

@@ -0,0 +1,42 @@
+<template>
+  <component :is="linkComponent">
+    <slot />
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'PixLink',
+  props: {
+    href: {
+      required: true,
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    linkComponent() {
+      let template = ''
+      if (this.isOnCurrentDomain(this.href)) {
+        template = `
+          <nuxt-link to="${this.href}">
+            <slot />
+          </nuxt-link>
+         `
+      } else {
+        template = `
+          <a href="${this.href}">
+            <slot />
+          </a>
+        `
+      }
+      return { template }
+    },
+  },
+  methods: {
+    isOnCurrentDomain(targetDomain) {
+      return targetDomain.startsWith('/') && !targetDomain.startsWith('//')
+    },
+  },
+}
+</script>

components/slices/NavigationZone.vue

@@ -51,7 +51,7 @@ export default {
   props: {
     navigationZoneItems: {
       type: Array,
-      default: null,
+      default: () => [],
     },
   },
   data() {
@@ -62,6 +62,10 @@ export default {
   },
   computed: {
     navigationLinks() {
+      if (this.navigationZoneItems.length === 0) {
+        return null
+      }
+
       return this.navigationZoneItems
         .map(({ items: navItems }) =>
           navItems.reduce((navGroup, navItem) => {

nuxt.config.js

@@ -18,8 +18,7 @@ const i18nConfigurationForInternationalDomain = {
   vueI18n: {
     fallbackLocale: 'fr',
   },
-  rootRedirect:
-    config.isPixSite && !config.isFrenchDomain ? 'locale-choice' : undefined,
+  rootRedirect: config.isPixSite && !config.isFrenchDomain && 'locale-choice',
 }
 
 const nuxtConfig = {

tests/components/LanguageSwitcher.test.js

@@ -1,5 +1,6 @@
 import { shallowMount, mount } from '@vue/test-utils'
 import { config } from '~/config/environment'
+import PixLink from '~/components/PixLink'
 import LanguageSwitcher from '~/components/LanguageSwitcher/LanguageSwitcher'
 import LanguageSwitcherSubMenu from '~/components/LanguageSwitcher/LanguageSwitcherSubMenu.vue'
 
@@ -14,6 +15,8 @@ jest.mock('~/config/environment', () => ({
   },
 }))
 
+LanguageSwitcherSubMenu.components = { 'pix-link': PixLink }
+
 describe('Component: LanguageSwitcher', () => {
   describe('when site is pix-pro', () => {
     beforeEach(() => {
@@ -51,7 +54,7 @@ describe('Component: LanguageSwitcher', () => {
 
       // when
       const wrapper = mount(LanguageSwitcher, {
-        components: { LanguageSwitcherSubMenu },
+        components: { LanguageSwitcherSubMenu, PixLink },
         mocks: { $t, $i18n },
         stubs: { fa: true },
       })
@@ -76,7 +79,7 @@ describe('Component: LanguageSwitcher', () => {
 
       // when
       const wrapper = mount(LanguageSwitcher, {
-        components: { LanguageSwitcherSubMenu },
+        components: { LanguageSwitcherSubMenu, PixLink },
         mocks: { $t, $i18n },
         stubs: { fa: true },
       })

tests/components/PixLink.test.js

@@ -0,0 +1,47 @@
+import { mount } from '@vue/test-utils'
+import PixLink from '~/components/PixLink'
+
+describe('Component: PixLink', () => {
+  let component
+
+  beforeEach(() => {
+    component = mount(PixLink, {
+      shallow: true,
+      propsData: { href: '' },
+      slots: { default: '<h1>Dummy</h1>' },
+      stubs: ['nuxt-link'],
+    })
+  })
+
+  describe('href is in domain', () => {
+    it('displays the component', async () => {
+      // given
+      await component.setProps({ href: '/fr-be' })
+
+      // when
+      const result = component.html()
+
+      // then
+      expect(result).toEqual(
+        `<nuxt-link-stub to="/fr-be">
+  <h1>Dummy</h1>
+</nuxt-link-stub>`
+      )
+    })
+  })
+
+  describe('href is not in domain', () => {
+    it('displays the component', async () => {
+      // given
+      await component.setProps({ href: 'https://example.net/' })
+
+      // when
+      const result = component.html()
+
+      // then
+      expect(result).toEqual(`<a href="https://example.net/">
+  <h1>Dummy</h1>
+</a>`)
+    })
+  })
+})