Keep in store locale, country and currency

package.json

@@ -31,6 +31,7 @@
     "vue-router": "^3.0.3",
     "vuelidate": "^0.7.4",
     "vuex": "^3.0.1",
+    "vuex-persistedstate": "^2.5.4",
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {

src/auth.js

@@ -2,48 +2,29 @@ import SdkAuth, { TokenProvider } from '@commercetools/sdk-auth';
 import store from './store';
 import config from '../sunrise.config';
 
-const tokenInfoStorageName = 'token';
-const isAuthenticatedStorageName = 'auth';
-let storedTokenInfo;
-
-try {
-  storedTokenInfo = JSON.parse(localStorage.getItem(tokenInfoStorageName));
-  const isAuthenticated = localStorage.getItem(isAuthenticatedStorageName);
-  if (storedTokenInfo && isAuthenticated) {
-    store.dispatch('setAuthenticated', true);
-  }
-} catch (error) {
-  // eslint-disable-next-line no-console
-  console.error('Could not retrieve token from local storage', error);
-}
-
 const tokenProvider = new TokenProvider({
   sdkAuth: new SdkAuth(config.ct.auth),
   fetchTokenInfo: sdkAuth => sdkAuth.anonymousFlow(),
-  onTokenInfoChanged: tokenInfo => localStorage.setItem(tokenInfoStorageName, JSON.stringify(tokenInfo)),
-}, storedTokenInfo);
+  onTokenInfoChanged: tokenInfo => store.dispatch('setTokenInfo', tokenInfo),
+}, store.state.tokenInfo);
 
 export function cleanUpSession() {
   tokenProvider.invalidateTokenInfo();
-  localStorage.removeItem(tokenInfoStorageName);
-  localStorage.removeItem(isAuthenticatedStorageName);
-  return store.dispatch('setAuthenticated', false);
+  return store.dispatch('clearAuthentication');
 }
 
 export function clientLogin(apolloClient, credentials) {
-  localStorage.removeItem(tokenInfoStorageName);
-  tokenProvider.fetchTokenInfo = sdkAuth => sdkAuth.customerPasswordFlow(credentials);
-  tokenProvider.invalidateTokenInfo();
-  return apolloClient.resetStore()
-    .then(() => {
-      localStorage.setItem(isAuthenticatedStorageName, true);
-      return store.dispatch('setAuthenticated', true);
-    })
-    .catch((error) => {
-      // eslint-disable-next-line no-console
-      console.error('Error on cache reset during login', error);
-      return cleanUpSession();
-    });
+  return store.dispatch('clearAuthentication').then(() => {
+    tokenProvider.fetchTokenInfo = sdkAuth => sdkAuth.customerPasswordFlow(credentials);
+    tokenProvider.invalidateTokenInfo();
+    return apolloClient.resetStore()
+      .then(() => store.dispatch('setAuthenticated', true))
+      .catch((error) => {
+        // eslint-disable-next-line no-console
+        console.error('Error on cache reset during login', error);
+        return cleanUpSession();
+      });
+  });
 }
 
 export function clientLogout(apolloClient, redirect) {

src/components/cartdetail/PageCartDetail.vue

@@ -144,7 +144,7 @@ export default {
         ${DisplayableMoneyFragment}`,
       variables() {
         return {
-          locale: this.$i18n.locale,
+          locale: this.$store.state.locale,
         };
       },
     },

src/components/common/Breadcrumb.vue

@@ -61,8 +61,8 @@ export default {
         }`,
       variables() {
         return {
-          locale: this.$i18n.locale,
-          where: `slug(${this.$i18n.locale}="${this.categorySlug}")`,
+          locale: this.$store.state.locale,
+          where: `slug(${this.$store.state.locale}="${this.categorySlug}")`,
         };
       },
       skip: vm => !vm.categorySlug,

src/components/common/ProductThumbnail.vue

@@ -86,22 +86,23 @@
 </template>
 
 <script>
-import priceMixin from '@/mixins/priceMixin';
 import productMixin from '@/mixins/productMixin';
 import BasePrice from './BasePrice.vue';
 
 export default {
-  components: {
-    BasePrice,
-  },
-
   props: {
     product: {
       type: Object,
       required: true,
     },
   },
 
+  components: {
+    BasePrice,
+  },
+
+  mixins: [productMixin],
+
   computed: {
     matchingVariant() {
       // with query endpoint we cannot really determine
@@ -121,8 +122,6 @@ export default {
       return Array.isArray(this.matchingVariant.images) && this.matchingVariant.images.length > 0;
     },
   },
-
-  mixins: [priceMixin, productMixin],
 };
 </script>
 

src/components/header/CategoriesMenu.vue

@@ -117,7 +117,7 @@ export default {
         }`,
       variables() {
         return {
-          locale: this.$i18n.locale,
+          locale: this.$store.state.locale,
         };
       },
     },

src/components/header/LocationSelector.vue

@@ -1,28 +1,29 @@
 <template>
   <li v-if="languages.length"
-      @mouseleave="setCloseTimer"
-      @mouseenter="clearCloseTimer"
+      @mouseleave="open"
+      @mouseenter="close"
       data-test="location-selector"
       class="list-item-location clearfix">
-    <button @click="show = !show"
+    <button @click="toggle"
             data-test="location-selector-open-button">
       <img class="pull-right"
            src="../../assets/img/globe-2.png"
-           :alt="$t('main.header.location')">
+           :alt="$t('location')">
     </button>
     <transition name="fade">
       <div v-if="show"
            class="location-dropdown">
-        <!--{{#if location.language}}-->
-        <span class="location-dropdown-label">
-        {{ $t("main.header.language") }}
-        </span>
-        <SelectBoxIt v-model="$i18n.locale"
-                     :options="languages"
-                     id="language"
-                     data-test="location-selector-dropdown"
-                     class="select location-select"/>
-        <!--{{/if}}-->
+        <div v-if="languages.length">
+          <span class="location-dropdown-label">
+            {{ $t('language') }}
+          </span>
+          <SelectBoxIt v-model="language"
+                       :options="languages"
+                       id="language"
+                       data-test="location-selector-dropdown"
+                       class="select location-select"
+                       @input="toggle"/>
+        </div>
         <!--{{#if location.country}}-->
         <!--<form id="form-select-country" action="{{@root.meta._links.selectCountry.href}}" method="POST">-->
         <!--<input type="hidden" name="csrfToken" value="{{@root.meta.csrfToken}}"/>-->
@@ -52,6 +53,15 @@ export default {
   }),
 
   computed: {
+    language: {
+      get() {
+        return this.$store.state.locale;
+      },
+      set(value) {
+        this.$store.dispatch('setLocale', value);
+      },
+    },
+
     languages() {
       const configLangs = this.$sunrise.languages;
       const langs = configLangs ? Object.entries(configLangs) : [];
@@ -60,15 +70,30 @@ export default {
   },
 
   methods: {
-    setCloseTimer() {
+    toggle() {
+      this.show = !this.show;
+    },
+
+    open() {
       this.closeTimer = setTimeout(() => {
         this.show = false;
       }, 300);
     },
 
-    clearCloseTimer() {
+    close() {
       clearTimeout(this.closeTimer);
     },
   },
 };
 </script>
+
+<i18n>
+en:
+  location: "Location"
+  language: "Language"
+  country: "Country"
+de:
+  location: "Ort"
+  language: "Sprache"
+  country: "Land"
+</i18n>

src/components/header/MiniCart.vue

@@ -62,7 +62,6 @@ import Vue from 'vue';
 import gql from 'graphql-tag';
 import VuePerfectScrollbar from 'vue-perfect-scrollbar';
 import cartMixin from '@/mixins/cartMixin';
-import priceMixin from '@/mixins/priceMixin';
 import productMixin from '@/mixins/productMixin';
 import DisplayableMoneyFragment from '@/components/DisplayableMoney.gql';
 import BaseMoney from '../common/BaseMoney.vue';
@@ -77,7 +76,7 @@ export default {
     VuePerfectScrollbar,
   },
 
-  mixins: [cartMixin, priceMixin, productMixin],
+  mixins: [cartMixin, productMixin],
 
   data: () => ({
     me: null,
@@ -142,7 +141,7 @@ export default {
         ${DisplayableMoneyFragment}`,
       variables() {
         return {
-          locale: this.$i18n.locale,
+          locale: this.$store.state.locale,
         };
       },
     },

src/components/home/BannerPicture.vue

@@ -14,7 +14,7 @@ export default {
     src() {
       try {
         // eslint-disable-next-line import/no-dynamic-require, global-require
-        return require(`@/assets/img/banners/${this.$i18n.locale}/${this.file}`);
+        return require(`@/assets/img/banners/${this.$store.state.locale}/${this.file}`);
       } catch (e) {
         // eslint-disable-next-line import/no-dynamic-require, global-require
         return require(`@/assets/img/banners/${this.file}`);

src/components/productdetail/AddToCartForm.vue

@@ -41,7 +41,6 @@
 <script>
 import { required, numeric, between } from 'vuelidate/lib/validators';
 import cartMixin from '../../mixins/cartMixin';
-import priceMixin from '../../mixins/priceMixin';
 import ServerError from '../common/form/ServerError.vue';
 import LoadingButton from '../common/form/LoadingButton.vue';
 import BaseSelect from '../common/form/BaseSelect.vue';
@@ -64,7 +63,7 @@ export default {
     ServerError,
   },
 
-  mixins: [cartMixin, priceMixin],
+  mixins: [cartMixin],
 
   data: () => ({
     form: {
@@ -82,7 +81,9 @@ export default {
     async addLineItem() {
       if (!this.cartExists) {
         await this.createMyCart({
-          currency: this.currency,
+          currency: this.$store.state.currency,
+          country: this.$store.state.country,
+          shippingAddress: { country: this.$store.state.country },
         });
       }
       return this.updateMyCart({

src/components/productdetail/DetailsSection.vue

@@ -177,7 +177,7 @@ export default {
         }`,
       variables() {
         return {
-          locale: this.$i18n.locale,
+          locale: this.$store.state.locale,
           sku: this.sku,
         };
       },

src/components/productdetail/ProductInfo.vue

@@ -57,7 +57,6 @@
 
 <script>
 import gql from 'graphql-tag';
-import priceMixin from '@/mixins/priceMixin';
 import productMixin from '@/mixins/productMixin';
 import ProductGallery from './ProductGallery.vue';
 import SocialMediaLinks from './SocialMediaLinks.vue';
@@ -91,7 +90,7 @@ export default {
     },
   },
 
-  mixins: [priceMixin, productMixin],
+  mixins: [productMixin],
 
   apollo: {
     product: {
@@ -126,8 +125,8 @@ export default {
         }`,
       variables() {
         return {
-          locale: this.$i18n.locale,
-          currency: this.currency,
+          locale: this.$store.state.locale,
+          currency: this.$store.state.currency,
           sku: this.sku,
         };
       },

src/components/productoverview/ProductList.vue

@@ -98,7 +98,7 @@ export default {
         }`,
       variables() {
         return {
-          where: `slug(${this.$i18n.locale}="${this.categorySlug}")`,
+          where: `slug(${this.$store.state.locale}="${this.categorySlug}")`,
         };
       },
       skip: vm => !vm.categorySlug,
@@ -142,7 +142,7 @@ export default {
         }`,
       variables() {
         return {
-          locale: this.$i18n.locale,
+          locale: this.$store.state.locale,
           currency: this.$i18n.numberFormats[this.$store.state.country].currency.currency,
           where: `masterData(current(categories(id="${this.category.id}")))`,
           sort: this.sort,

src/components/useraccount/myorders/TabOrderDetail.vue

@@ -132,7 +132,7 @@ export default {
       variables() {
         return {
           orderNumber: this.orderNumber,
-          locale: this.$i18n.locale,
+          locale: this.$store.state.locale,
         };
       },
     },