@viur/shop-components 0.9.3 → 0.9.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viur/shop-components",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "description": "Frontend Vue components for the shop module of ViUR",
   "repository": {
     "type": "git",

package/src/Shop.vue

@@ -61,100 +61,129 @@
 
 
 <script setup>
-import { onBeforeMount, watch, reactive } from 'vue';
-import ShopOrderStepper from './ShopOrderStepper.vue'
-import ShopSummary from "./ShopSummary.vue"
-import {useViurShopStore} from './shop'
-import { useUrlSearchParams } from '@vueuse/core'
-import { useOrder } from './composables/order';
-import { useCart } from './composables/cart';
-import {getTranslations} from './utils'
-
-
-const shopStore = useViurShopStore()
-const {fetchOrder} = useOrder()
-const {fetchCart} = useCart()
-
-const emit = defineEmits('change')
+import {useTranslations} from '@viur/vue-utils/utils/translations.js';
+import {useUrlSearchParams} from '@vueuse/core';
+import {onBeforeMount, reactive, watch} from 'vue';
+import {useI18n} from 'vue-i18n';
+import {useCart} from './composables/cart';
+import {useOrder} from './composables/order';
+import {useViurShopStore} from './shop';
+import ShopOrderStepper from './ShopOrderStepper.vue';
+import ShopSummary from './ShopSummary.vue';
+import {getTranslations} from './utils';
+
+const {fetchTranslations, updateLocaleMessages} = useTranslations();
+const i18n = useI18n();
+const shopStore = useViurShopStore();
+const {fetchOrder} = useOrder();
+const {fetchCart} = useCart();
+
+const emit = defineEmits('change');
 
 
 const props = defineProps({
-    summary:{
-      default:false
-    }, // bottom, sidebar
-    initTab:{
-      default:'cart'
-    },
-    modulename:{
-      default:'shop'
-    },
-    debug:{
-      default:false
-    },
-    showCartNodes:{
-      default:false
-    },
-    topActions:{
-      default:false
-    },
-    language:{
-      default:"de"
-    },
-    locale: {
-      default: 'de-DE',
-    },
-})
+  summary: {
+    default: false,
+  }, // bottom, sidebar
+  initTab: {
+    default: 'cart',
+  },
+  modulename: {
+    default: 'shop',
+  },
+  debug: {
+    default: false,
+  },
+  showCartNodes: {
+    default: false,
+  },
+  topActions: {
+    default: false,
+  },
+  language: {
+    default: 'de',
+  },
+  locale: {
+    default: 'de-DE',
+  },
+});
 
 const state = reactive({
-  translationsLoaded:false
-})
-
-
-onBeforeMount(()=>{
-    getTranslations([props.language], "viur.shop.*").then((resp)=>{
-      state.translationsLoaded = true
-    })
-    shopStore.state.language = props.language
-    shopStore.state.locale = props.locale
-    shopStore.state.showNodes = props.showCartNodes
-    shopStore.state.debug = props.debug
-    shopStore.state.topActions = props.topActions
-    if(props.tabs){
-        shopStore.state.tabs = props.tabs
-    }
-
-    shopStore.state.moduleName= props.modulename
-    shopStore.fetchMetaData()
-    const params = useUrlSearchParams('hash')
-    if (Object.keys(params).includes('order')){
-        shopStore.state.orderKey = params['order']
-        fetchOrder(shopStore.state.orderKey).then(()=>{
-          fetchCart();  // load after cartKey has been loaded from order
-          shopStore.state.orderReady = true
-          // navigate to order state
-          if(shopStore.state.order?.['is_ordered']){
-            shopStore.navigateToTab('complete')
-          } else if (shopStore.state.order?.['is_checkout_in_progress']){
-            shopStore.navigateToTab('confirm')
+  translationsLoaded: false,
+});
+
+
+onBeforeMount(() => {
+  getTranslations([props.language], 'viur.shop.*').then((resp) => {
+    // convert 'dot.seperated.translation.keys' to a {nested: {translation: 'object'} to overwrite the default object.
+    const nested = {};
+    Object.entries(resp).forEach(([lang, translations]) => {
+      nested[lang] = {};
+      Object.entries(translations).forEach(([key, value]) => {
+        const path = key.split('.');
+        let segment;
+        let current = nested[lang];
+        while (segment = path.shift()) {
+          if (path.length === 0) {
+            if (typeof current === 'string' || current instanceof String) {
+              console.warn(`The prefix of ${key} (before .${segment}) is another translation key and can't be nested`);
+            } else {
+              current[segment] = value;
+            }
+          } else {
+            if (!(segment in current)) {
+              current[segment] = {};
+            }
+            current = current[segment];
           }
-        })
-    }else{
-      fetchCart()
-      shopStore.state.orderReady = true
-    }
+        }
+      });
+      i18n.mergeLocaleMessage(lang, nested[lang]);
+    });
+    // console.debug(nested);
+    state.translationsLoaded = true;
+  });
+  shopStore.state.language = props.language;
+  shopStore.state.locale = props.locale;
+  shopStore.state.showNodes = props.showCartNodes;
+  shopStore.state.debug = props.debug;
+  shopStore.state.topActions = props.topActions;
+  if (props.tabs) {
+    shopStore.state.tabs = props.tabs;
+  }
+
+  shopStore.state.moduleName = props.modulename;
+  shopStore.fetchMetaData();
+  const params = useUrlSearchParams('hash');
+  if (Object.keys(params).includes('order')) {
+    shopStore.state.orderKey = params['order'];
+    fetchOrder(shopStore.state.orderKey).then(() => {
+      fetchCart();  // load after cartKey has been loaded from order
+      shopStore.state.orderReady = true;
+      // navigate to order state
+      if (shopStore.state.order?.['is_ordered']) {
+        shopStore.navigateToTab('complete');
+      } else if (shopStore.state.order?.['is_checkout_in_progress']) {
+        shopStore.navigateToTab('confirm');
+      }
+    });
+  } else {
+    fetchCart();
+    shopStore.state.orderReady = true;
+  }
 
 
-    if (Object.keys(params).includes('step')){
-        shopStore.navigateToTab(params['step'])
-    }else{
-        shopStore.navigateToTab('cart')
-    }
-})
+  if (Object.keys(params).includes('step')) {
+    shopStore.navigateToTab(params['step']);
+  } else {
+    shopStore.navigateToTab('cart');
+  }
+});
 
 
-watch(()=>shopStore.state.currentTab, (newVal,oldVal)=>{
-  emit('change', newVal)
-})
+watch(() => shopStore.state.currentTab, (newVal, oldVal) => {
+  emit('change', newVal);
+});
 
 
 </script>
@@ -185,9 +214,10 @@ watch(()=>shopStore.state.currentTab, (newVal,oldVal)=>{
 }
 
 @layer foundation.shop {
-  :root{
-    --viur-shop-sidebar-height-offset:0;
+  :root {
+    --viur-shop-sidebar-height-offset: 0;
   }
+
   .viur-shop-sidebar-wrap {
     --padding: var(--sl-spacing-large);
 
@@ -201,9 +231,11 @@ watch(()=>shopStore.state.currentTab, (newVal,oldVal)=>{
     height: min-content;
     grid-column: auto / span 12;
     order: -1;
+
     & > * + * {
       margin-top: var(--sl-spacing-small);
     }
+
     @media (min-width: 1024px) {
       position: sticky;
       max-height: calc(100vh - var(--viur-shop-sidebar-height-offset) - 2 * var(--padding));
@@ -262,5 +294,4 @@ watch(()=>shopStore.state.currentTab, (newVal,oldVal)=>{
 }
 
 
-
 </style>