Venia Localization w/ i18n

package.json

@@ -101,5 +101,9 @@
       "path": "./packages/venia-concept/dist/+([0-9]).*.js",
       "maxSize": "100 kB"
     }
-  ]
+  ],
+  "dependencies": {
+    "i18next": "~19.1.0",
+    "react-i18next": "~11.3.3"
+  }
 }

packages/peregrine/lib/Router/resolveUnknownRoute.js

@@ -5,7 +5,14 @@ import BrowserPersistence from '../util/simplePersistence';
  * @param {{ route: string, apiBase: string, __tmp_webpack_public_path__: string}} opts
  */
 const persistence = new BrowserPersistence();
-const routeCacheKey = 'urlResolver';
+
+/** Get and Set current store view */
+if (typeof persistence.getItem('store_view') === 'undefined' || typeof persistence.getItem('locale') === 'undefined') {
+    persistence.setItem('store_view', DEFAULT_STORE_VIEW.code);
+    persistence.setItem('locale', DEFAULT_STORE_VIEW.locale);
+}
+
+const routeCacheKey = 'urlResolver_' + persistence.getItem('store_view');
 
 // Some M2.3.0 GraphQL node IDs are numbers and some are strings, so explicitly
 // cast numbers if they appear to be numbers
@@ -89,17 +96,33 @@ function remotelyResolveRoute(opts) {
  * @returns {Promise<{type: "PRODUCT" | "CATEGORY" | "CMS_PAGE"}>}
  */
 function fetchRoute(opts) {
+    // String lang path from url resolver
+    const availableStoreViews = AVAILABLE_STORE_VIEWS;
+    const langs = availableStoreViews.map(item => {
+        return item.locale;
+    });
+    let route = opts.route;
+
+    langs.forEach(function(lang) {
+        const path = '/' + lang.toLowerCase();
+        if (route.startsWith(path) || route == path) {
+            route = route.substring(path.length, route.length);
+        }
+    });
+    route = route === '' ? '/' : route;
+
     const url = new URL('/graphql', opts.apiBase);
     return fetch(url, {
         method: 'POST',
         credentials: 'include',
         headers: new Headers({
-            'Content-Type': 'application/json'
+            'Content-Type': 'application/json',
+            STORE: persistence.getItem('store_view')
         }),
         body: JSON.stringify({
             query: `
                 {
-                    urlResolver(url: "${opts.route}") {
+                    urlResolver(url: "${route}") {
                         type
                         id
                     }

packages/peregrine/lib/hooks/useLocalization.js

@@ -0,0 +1,95 @@
+import { useMemo, useState, useCallback } from 'react';
+import { Util, useToasts } from '@magento/peregrine';
+import i18n from 'i18next';
+const { BrowserPersistence } = Util;
+const storage = new BrowserPersistence();
+
+export const useLocalization = () => {
+    const [, { addToast }] = useToasts();
+
+    const availableStoreViews = AVAILABLE_STORE_VIEWS;
+    const availableLangs = availableStoreViews.map(item => {
+        return item.locale.toLowerCase();
+    });
+
+    const [currentLocale, setCurrentLocale] = useState(
+        storage.getItem('locale')
+    );
+    const [currentStoreView, setCurrentStoreView] = useState(
+        storage.getItem('store_view')
+    );
+    const localizationState = {
+        currentLocale,
+        currentStoreView,
+        availableLangs,
+        availableStoreViews
+    };
+
+    const _t = useCallback(phrase => {
+        return i18n.t(phrase);
+    }, []);
+
+    /**
+     * Handling switch store via redirect / refresh for now
+     * @TODO Find a more elegant solution to refresh all graphql queries with new header store code
+     */
+    const changeLanguage = useCallback((item) => {
+        storage.setItem('store_view', item.code);
+        storage.setItem('locale', item.locale);
+
+        setCurrentLocale(item.locale);
+        setCurrentStoreView(item.code);
+        i18n.changeLanguage(item.locale.toLowerCase());
+
+        addToast({
+            type: 'info',
+            message: _t(
+                `Switching Store View to ${item.name}, the page will reload briefly`
+            ),
+            timeout: 3000
+        });
+
+        window.location.replace(
+            `/${storage.getItem('locale').toLowerCase()}`
+        );
+    }, [addToast, _t])
+
+    /**
+     * Handles switching store by store code (in switcher component)
+     */
+    const handleSwitchStore = useCallback(
+        code => {
+            const newStoreView = availableStoreViews.reduce(function(acc, item) {
+                return acc !== false ? acc: (item.code == code ? item : false);
+            }, false);
+
+            changeLanguage(newStoreView);
+        },
+        [availableStoreViews, changeLanguage]
+    );
+
+    /**
+     * Handles switching store by locale (eg: in route)
+     */
+    const handleSwitchStoreByLocale = useCallback(
+        locale => {
+            const newStoreView = availableStoreViews.reduce(function(acc, item) {
+                return acc !== false ? acc: (item.locale == locale ? item : false);
+            }, false);
+
+            changeLanguage(newStoreView);
+        },
+        [availableStoreViews, changeLanguage]
+    );
+
+    const api = useMemo(
+        () => ({
+            handleSwitchStore,
+            handleSwitchStoreByLocale,
+            _t
+        }),
+        [handleSwitchStore, handleSwitchStoreByLocale, _t]
+    );
+
+    return [localizationState, api];
+};

packages/peregrine/lib/index.js

@@ -10,6 +10,7 @@ export { useRestApi } from './hooks/useRestApi';
 export { useRestResponse } from './hooks/useRestResponse';
 export { useScrollLock } from './hooks/useScrollLock';
 export { useSearchParam } from './hooks/useSearchParam';
+export { useLocalization } from './hooks/useLocalization';
 export {
     WindowSizeContextProvider,
     useWindowSize

packages/peregrine/lib/store/reducers/app.js

@@ -10,6 +10,7 @@ const initialState = {
     isOnline: navigator.onLine,
     overlay: false,
     searchOpen: false,
+    query: '',
     pending: {}
 };
 

packages/peregrine/lib/talons/Navigation/useNavigation.js

@@ -9,6 +9,7 @@ const ancestors = {
     FORGOT_PASSWORD: 'SIGN_IN',
     MY_ACCOUNT: 'MENU',
     SIGN_IN: 'MENU',
+    SWITCH_STORE: 'MENU',
     MENU: null
 };
 
@@ -72,6 +73,9 @@ export const useNavigation = props => {
     const showSignIn = useCallback(() => {
         setView('SIGN_IN');
     }, [setView]);
+    const showSwitchStore = useCallback(() => {
+        setView('SWITCH_STORE');
+    }, [setView]);
 
     return {
         catalogActions,
@@ -88,6 +92,7 @@ export const useNavigation = props => {
         showMainMenu,
         showMyAccount,
         showSignIn,
+        showSwitchStore,
         view
     };
 };

packages/peregrine/lib/talons/SwitchStore/useSwitchStore.js

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+
+/**
+ * Returns props necessary to render an SwitchStore component.
+ *
+ * @param {object} props
+ * @param {function} props.showSwitchStore - callback that displays sign in view
+ * @return {{
+ *   handleSwitchStore: function
+ * }}
+ */
+export const useSwitchStore = props => {
+    const { showSwitchStore } = props;
+
+    const handleSwitchStore = useCallback(() => {
+        showSwitchStore();
+    }, [showSwitchStore]);
+
+    return { handleSwitchStore };
+};

packages/pwa-buildpack/lib/Utilities/graphQL.js

@@ -14,7 +14,7 @@ const fetchQuery = query => {
                 'Content-Type': 'application/json',
                 'Accept-Encoding': 'gzip'
             },
-            body: JSON.stringify({ query }),
+            body: query,
             agent: fetchAgent
         }
     )
@@ -33,7 +33,8 @@ const fetchQuery = query => {
  * @returns Promise that will resolve to the media backend url.
  */
 const getMediaURL = () => {
-    return fetchQuery(graphQLQueries.getMediaUrl).then(
+    const query = graphQLQueries.getMediaUrl;
+    return fetchQuery(JSON.stringify({ query })).then(
         data => data.storeConfig.secure_base_media_url
     );
 };
@@ -42,7 +43,40 @@ const getMediaURL = () => {
  * Get the schema's types.
  */
 const getSchemaTypes = () => {
-    return fetchQuery(graphQLQueries.getSchemaTypes);
+    const query = graphQLQueries.getSchemaTypes;
+    return fetchQuery(JSON.stringify({ query }));
+};
+
+/**
+ * Get translations
+ */
+const getTranslations = (local, phrases) => {
+    const variables = { locale: local, phrases: phrases };
+    const query = graphQLQueries.getTranslations;
+    return fetchQuery(JSON.stringify({ query, variables })).then(
+        data => data.translate.items
+    );
+};
+
+/**
+ * Get Available Locales
+ */
+const getAvailableLocales = () => {
+    const query = graphQLQueries.getAvailableLocales;
+    return fetchQuery(JSON.stringify({ query })).then(
+        data => data.availableLocales.items
+    );
+};
+
+/**
+ * Get Available Store Views
+ */
+const getAvailableStoreViews = () => {
+    console.log('Fetching available store views');
+    const query = graphQLQueries.getAvailableStoreViews;
+    return fetchQuery(JSON.stringify({ query })).then(
+        data => data.availableStoreViews.items
+    );
 };
 
 /**
@@ -64,5 +98,8 @@ const getUnionAndInterfaceTypes = () => {
 module.exports = {
     getMediaURL,
     getSchemaTypes,
-    getUnionAndInterfaceTypes
+    getTranslations,
+    getAvailableLocales,
+    getUnionAndInterfaceTypes,
+    getAvailableStoreViews
 };