feat: add index to choose locale

pages/pix-pro/index.vue

@@ -1,65 +1,114 @@
 <template>
-  <div>
-    <div v-if="type === FORM_PAGE">
-      <form-page :content="document.data" />
-    </div>
-    <div v-if="type === SIMPLE_PAGE">
-      <simple-page :content="document.data" />
-    </div>
-    <div v-if="type === SLICES_PAGE">
-      <prismic-custom-slice-zone :slices="document.data.body" />
-    </div>
-  </div>
+  <client-only v-if="shouldDisplayLocaleChoice">
+    <main class="home">
+      <div class="locale-choice">
+        <h1>
+          <pix-image
+            class="logo-pix"
+            :field="{ url: '/images/logo-pix-blanc.svg', alt: 'Pix' }"
+          />
+        </h1>
+        <locale-link
+          v-for="locale in locales"
+          :key="locale.code"
+          class="locale-choice__link"
+          :locale="locale"
+        />
+        <pix-image class="planet" :field="{ url: '/images/planet.svg' }" />
+      </div>
+    </main>
+  </client-only>
 </template>
 
 <script>
-import { documentFetcher, DOCUMENTS } from '~/services/document-fetcher'
+import { localization } from '~/config/localization'
 
 export default {
-  name: 'Index',
-  nuxtI18n: {
-    paths: {
-      fr: '/',
-      'fr-fr': '/',
-      'en-gb': '/',
-    },
-  },
-  async asyncData({ app, req, error, currentPagePath }) {
-    try {
-      const document = await documentFetcher(
-        app.$prismic,
-        app.i18n,
-        req
-      ).getPageByUid('decouvrir-pix-pro')
-      const meta = document.data.meta
-
-      return { currentPagePath, meta, document }
-    } catch (e) {
-      error({ statusCode: 404, message: 'Page not found' })
-    }
-  },
+  layout: 'empty',
+  nuxtI18n: false,
   data() {
     return {
-      FORM_PAGE: DOCUMENTS.FORM_PAGE,
-      SIMPLE_PAGE: DOCUMENTS.SIMPLE_PAGE,
-      SLICES_PAGE: DOCUMENTS.SLICES_PAGE,
+      locales: localization.locales,
+      shouldDisplayLocaleChoice: false,
     }
   },
-  head() {
-    const meta = this.$getMeta(this.meta, this.currentPagePath, this.$prismic)
-
-    return {
-      meta,
-      title: `${this.title} | Pix Pro`,
+  mounted() {
+    const chosenLocale = this.getLocaleFromCookie()
+    if (chosenLocale) {
+      return this.$router.replace(`/${chosenLocale}/`)
     }
+    this.shouldDisplayLocaleChoice = true
   },
-  computed: {
-    type() {
-      return this.document.type
-    },
-    title() {
-      return this.document.data.title[0].text
+  methods: {
+    getLocaleFromCookie() {
+      const localeCookie = document.cookie
+        .split('; ')
+        .find((item) => item.startsWith('locale'))
+      if (!localeCookie) return null
+
+      const chosenLocale = localeCookie.split('=')[1]
+
+      const currentLocales = localization.localesForCurrentSite.map(
+        ({ code }) => code
+      )
+      if (!currentLocales.includes(chosenLocale)) return null
+
+      return chosenLocale
     },
   },
 }
 </script>
+
+<style lang="scss" scoped>
+.home {
+  width: 100%;
+  min-width: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 5rem 1rem 0;
+  background: url('/images/stars.svg') repeat, $default-gradient;
+
+  @include device-is('large-mobile') {
+    padding: 0;
+  }
+}
+
+.locale-choice {
+  padding: 3rem 0;
+}
+
+.logo-pix {
+  margin: 0 auto 5vh;
+  display: block;
+  width: 11rem;
+  max-width: 100%;
+}
+
+.locale-choice__link + .locale-choice__link {
+  margin-top: 1rem;
+}
+
+.planet {
+  margin: 5vh auto 0;
+  display: block;
+  width: max(16vw, 90%);
+}
+
+@include device-is('large-mobile') {
+  .locale-choice {
+    position: relative;
+  }
+
+  .planet {
+    position: absolute;
+    top: 50%;
+    right: calc(100% + 4vw);
+    max-width: unset;
+    margin: 0;
+    transform: translateY(-50%);
+  }
+}
+</style>

services/filter-nuxt-pages.js

@@ -1,5 +1,5 @@
 export function filterNuxtPages(routes, config) {
-  if (config.isPixSite && config.isFrenchDomain) {
+  if (config.isFrenchDomain) {
     return routes.filter(
       (route) => !(route.name === 'index' && route.path === '/')
     )

tests/pages/pix-pro/index.test.js

@@ -0,0 +1,115 @@
+import { shallowMount } from '@vue/test-utils'
+import Vue from 'vue'
+import Index from '@/pages/pix-pro/index.vue'
+
+describe('Index Page', () => {
+  let $router
+
+  beforeEach(() => {
+    $router = {
+      replace: jest.fn(),
+    }
+
+    let cookieJar = ''
+
+    jest.spyOn(document, 'cookie', 'set').mockImplementation((cookie) => {
+      cookieJar = cookie
+    })
+    jest.spyOn(document, 'cookie', 'get').mockImplementation(() => cookieJar)
+  })
+
+  describe('#mounted', () => {
+    describe('when there is no cookie', () => {
+      test('do not redirect', async () => {
+        // given
+        document.cookie = ''
+
+        // when
+        const wrapper = shallowMount(Index, {
+          mocks: { $router },
+          stubs: ['client-only', 'pix-image', 'locale-link'],
+        })
+        await Vue.nextTick()
+
+        // then
+        expect($router.replace).not.toHaveBeenCalled()
+        const localeLinks = wrapper.findAll('locale-link-stub')
+        expect(localeLinks.length).toBe(4)
+      })
+    })
+
+    describe('when there is a cookie', () => {
+      test('redirects to locale page', async () => {
+        // given
+        document.cookie = 'foo=bar; locale=fr'
+
+        // when
+        const wrapper = shallowMount(Index, {
+          mocks: { $router },
+          stubs: ['client-only', 'pix-image', 'locale-link'],
+        })
+        await Vue.nextTick()
+
+        // then
+        expect($router.replace).toHaveBeenCalledWith('/fr/')
+        const localeLinks = wrapper.findAll('locale-link-stub')
+        expect(localeLinks.length).toBe(0)
+      })
+    })
+  })
+
+  describe('#methods', () => {
+    describe('#getLocaleFromCookie', () => {
+      describe('when there is no cookie', () => {
+        test('returns no locale', () => {
+          // given
+          document.cookie = ''
+          const wrapper = shallowMount(Index, {
+            mocks: { $router },
+            stubs: ['client-only', 'pix-image', 'locale-link'],
+          })
+
+          // when
+          const chosenLocale = wrapper.vm.getLocaleFromCookie()
+
+          // then
+          expect(chosenLocale).toBe(null)
+        })
+      })
+
+      describe('when there is a cookie', () => {
+        test('returns the proper locale', () => {
+          // given
+          document.cookie = 'foo=bar; locale=fr'
+          const wrapper = shallowMount(Index, {
+            mocks: { $router },
+            stubs: ['client-only', 'pix-image', 'locale-link'],
+          })
+
+          // when
+          const chosenLocale = wrapper.vm.getLocaleFromCookie()
+
+          // then
+          expect(chosenLocale).toBe('fr')
+        })
+      })
+
+      describe('with a crafted cookie', () => {
+        test('cookie value is ignored', () => {
+          // given
+          document.cookie = 'foo=bar; locale=1234-crafted-cookie'
+          const wrapper = shallowMount(Index, {
+            mocks: { $router },
+            stubs: ['client-only', 'pix-image', 'locale-link'],
+          })
+
+          // when
+          const chosenLocale = wrapper.vm.getLocaleFromCookie()
+
+          // then
+          expect(chosenLocale).toBe(null)
+        })
+      })
+    })
+  })
+})

tests/services/filter-nuxt-pages.test.js

@@ -5,7 +5,6 @@ describe('FilterNuxtPages', () => {
     it('should return only locale home at root path', function () {
       // given
       const config = {
-        isPixSite: true,
         isFrenchDomain: true,
       }
       const routes = [
@@ -29,7 +28,6 @@ describe('FilterNuxtPages', () => {
     it('should return routes as is', function () {
       // given
       const config = {
-        isPixSite: true,
         isFrenchDomain: false,
       }
       const routes = [