@lancom/shared 0.0.193 → 0.0.195

package/assets/js/api/admin.js

@@ -362,6 +362,36 @@ export default {
   removeWebhook(id) {
     return _delete(`admin/webhooks/${id}`);
   },
+  async fetchCurrencies(params) {
+    return sortByName(await _get('admin/currencies', params));
+  },
+  fetchCurrencyById(id) {
+    return _get(`admin/currencies/${id}`);
+  },
+  saveCurrency(currency) {
+    return currency._id ? _put(`admin/currencies/${currency._id}`, currency) : _post('admin/currencies', currency);
+  },
+  removeCurrency(id) {
+    return _delete(`admin/currencies/${id}`);
+  },
+  async fetchCurrencies(params) {
+    return sortByName(await _get('admin/currencies', params));
+  },
+  async fetchCountries(params) {
+    return sortByName(await _get('admin/countries', params));
+  },
+  fetchCountryById(id) {
+    return _get(`admin/countries/${id}`);
+  },
+  saveCountry(country) {
+    return country._id ? _put(`admin/countries/${country._id}`, country) : _post('admin/countries', country);
+  },
+  removeCountry(id) {
+    return _delete(`admin/countries/${id}`);
+  },
+  async fetchCountries(params) {
+    return sortByName(await _get('admin/countries', params));
+  },
   async fetchWarehouses(params) {
     return sortByName(await _get('admin/warehouse', params));
   },

package/assets/js/api/index.js

@@ -3,6 +3,9 @@ import { _get, _post, _put, _delete, _patch } from './helpers';
 import adminApi from './admin';
 
 const api = {
+  fetchClientSettings(shop, params) {
+    return _get(`shop/${shop}/client-settings`, params);
+  },
   fetchCartById(shop, cart) {
     return _get(`shop/${shop}/cart/${cart}`);
   },

package/components/common/client_settings/client-settings.scss

@@ -0,0 +1,54 @@
+@import "@/assets/scss/variables";
+.ClientSettings {
+  &__wrapper {
+    position: relative;
+  }
+  &__field {
+    padding: 6px !important;
+    height: 50px;
+    display: flex !important;
+    align-items: center;
+    cursor: pointer;
+  }
+  &__inner {
+    min-width: 72px;
+    width: 33%;
+    height: 100%;
+    border-radius: 2px;
+    box-shadow: $elevation1;
+  }
+  &__value {
+    color: $grey_1;
+    text-transform: uppercase;
+    margin-left: 20px;
+    flex-grow: 1;
+  }
+  &__caret {
+    color: $grey_5;
+    font-size: 18px;
+    cursor: pointer;
+  }
+  &__dropdown {
+    position: absolute;
+    z-index: 101;
+    top: 40px;
+    width: 250px;
+    // transform: translateY(-50%);
+    padding: 10px;
+    box-shadow: 0 0 2px grey;
+    background-color: white;
+  }
+  &__field {
+    padding: 10px 0;
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+    &-item {
+      padding: 7px 10px;
+      cursor: pointer;
+      &:hover {
+        background-color: $grey_3;
+      }
+    }
+  }
+}

package/components/common/client_settings/client-settings.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="ClientSettings__wrapper">
+    <div
+      class="ClientSettings__field"
+      @click="isOpen = !isOpen">
+      <div class="lc_regular16 ClientSettings__value">
+        <div class="d-flex">
+          <span v-if="country">
+            {{ country.isoCode }}
+          </span>
+          <span v-if="currency">
+            / {{ currency.symbol }}
+          </span>
+        </div>
+      </div>
+      <i class="icon-angle-down ClientSettings__caret"></i>
+    </div>
+    <div
+      v-if="isOpen"
+      v-click-outside="close"
+      class="ClientSettings__dropdown">
+      <div>
+        <div
+          class="ClientSettings__field"
+          @click="toggleVisibleCountries()">
+          <span>{{ country.name }}</span>
+          <i class="icon-angle-down"></i>
+        </div>
+        <div v-if="visibleCountries">
+          <div
+            v-for="item of countries"
+            :key="item._id"
+            class="ClientSettings__field-item"
+            @click="selectCountry(item)">
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          class="ClientSettings__field"
+          @click="toggleVisibleCurrencies()">
+          <span>{{ currency.name }}, {{ currency.symbol }}</span>
+          <i class="icon-angle-down"></i>
+        </div>
+        <div v-if="visibleCurrencies">
+          <div
+            v-for="item of currencies"
+            :key="item._id"
+            class="ClientSettings__field-item"
+            @click="selectCurrency(item)">
+            {{ item.symbol }}, {{ item.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+<script>
+import { mapGetters } from 'vuex';
+const Cookie = process.client ? require('js-cookie') : undefined;
+
+export default {
+  name: 'ClientSettings',
+  data() {
+    return {
+      isOpen: false,
+      visibleCountries: false,
+      visibleCurrencies: false
+    };
+  },
+  computed: {
+    ...mapGetters([
+      'country',
+      'currency',
+      'countries',
+      'currencies'
+    ]),
+  },
+  methods: {
+    close() {
+      this.isOpen = false;
+    },
+    toggleVisibleCountries() {
+      this.visibleCountries = !this.visibleCountries;
+    },
+    toggleVisibleCurrencies() {
+      this.visibleCurrencies = !this.visibleCurrencies;
+    },
+    selectCountry(country) {
+      Cookie.set('country', country._id);
+      window.location.reload();
+    },
+    selectCurrency(currency) {
+      Cookie.set('currency', currency._id);
+      window.location.reload();
+    }
+  }
+};
+</script>
+  
+<style lang="scss">
+@import 'client-settings';
+</style>
+  

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lancom/shared",
-  "version": "0.0.193",
+  "version": "0.0.195",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {

package/store/index.js

@@ -4,6 +4,8 @@ const cookieparser = process.server ? require('cookieparser') : undefined;
 const CLOSED_NOTIFICATION = 'lancom-closed-notification-1.0';
 
 export const state = () => ({
+  country: null,
+  currency: null,
   shop: {},
   menus: [],
   contacts: {},
@@ -16,6 +18,10 @@ export const state = () => ({
 });
 
 export const getters = {
+  country: ({ country }) => country,
+  countries: ({ shop }) => (shop.countries || []).map(({ country }) => country).filter(c => !!c),
+  currency: ({ currency }) => currency,
+  currencies: ({ shop }) => (shop.countries || []).reduce((currencies, { country }) => [...currencies, country?.currency], []).filter(c => !!c),
   shop: ({ shop }) => shop || {},
   menus: ({ menus }) => menus || [],
   topMenu: ({ menus }) => (menus || []).find(({ type }) => type === 'top'),
@@ -39,7 +45,13 @@ export const actions = {
     commit('setMenus', menus);
     commit('setShop', shop);
     commit('setSettings', shop.settings);
-
+    if (req.headers.cookie) {
+      const { country, currency } = cookieparser.parse(req.headers.cookie);
+      const params = { country, currency, ip: req.ip };
+      const settings = await api.fetchClientSettings(shop._id, params);
+      commit('setCountry', settings.country);
+      commit('setCurrency', settings.currency);
+    }
     try {
       if (req.headers.cookie) {
         const { auth } = cookieparser.parse(req.headers.cookie);
@@ -82,6 +94,12 @@ export const actions = {
 };
 
 export const mutations = {
+  setCountry(state, country) {
+    state.country = country;
+  },
+  setCurrency(state, currency) {
+    state.currency = currency;
+  },
   setSettings(state, { contacts, pricing, notificationBar, discountPopup, order, depositInfo }) {
     state.contacts = contacts;
     state.pricing = pricing;