@viur/shop-components 0.14.6 → 0.14.8

package/package.json

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

package/src/ShopOrderStepper.vue

@@ -3,10 +3,11 @@
         ref="stepper"
         class="viur-shop-order-tabgroup"
         no-scroll-controls
+        :data-steppervisible="shopStore.state.stepperVisible"
     >
         <template v-for="(tab,name) in shopStore.state.tabs">
             <StepperTab
-v-show="shopStore.state.currentTab!=='complete'"
+                v-show="shopStore.state.stepperVisible"
                 :tab="name"
             >
             </StepperTab>
@@ -106,4 +107,8 @@ sl-tab-panel {
   }
 }
 
+.viur-shop-order-tabgroup[data-steppervisible='false']::part(nav){
+  visibility: hidden;
+}
+
 </style>

package/src/Steps/ShopCart.vue

@@ -5,7 +5,7 @@
         :nextfunction="nextStep"
     >
     </slot>
-    <loading-handler :isLoading="cartState.isLoading" :isUpdating="cartState.isUpdating">
+    <loading-handler :isLoading="shopStore.state.cartIsLoading" :isUpdating="shopStore.state.cartIsLoading">
         <div class="viur-shop-item-wrapper" v-if="state.items.length>0">
             <cart-item v-for="item in state.items" :item="item"
             :edit="!shopStore.state.order?.['is_checkout_in_progress']"

package/src/components/CartItem.vue

@@ -85,7 +85,7 @@
 
 
   </sl-card>
-  <div class="loading" v-if="cartState.isUpdating">
+  <div class="loading" v-if="shopStore.state.cartIsUpdating">
       <sl-spinner></sl-spinner>
     </div>
   </div>
@@ -96,7 +96,8 @@ import { getImage } from '../utils';
 import { useCart } from '../composables/cart';
 import dialogButton from './dialogButton.vue';
 import PriceBox from "./PriceBox.vue";
-
+import { useViurShopStore } from "../shop";
+const shopStore = useViurShopStore()
 const {addItem, removeItem, state:cartState, getValue} = useCart()
 
 const changeAmount = useDebounceFn((amount) => {

package/src/components/CartItemSmall.vue

@@ -61,7 +61,7 @@
         <price-box :item="item" :amount="item.quantity" :retail="false"></price-box>
       </div>
   </sl-card>
-  <div class="loading" v-if="cartState.isUpdating">
+  <div class="loading" v-if="shopStore.state.cartIsUpdating">
       <sl-spinner></sl-spinner>
     </div>
   </div>
@@ -72,7 +72,8 @@ import { getImage } from '../utils';
 import { useCart } from '../composables/cart';
 import dialogButton from './dialogButton.vue';
 import PriceBox from "./PriceBox.vue";
-
+import { useViurShopStore } from "../shop";
+const shopStore = useViurShopStore()
 const {addItem, removeItem, state:cartState, getValue} = useCart()
 
 const changeAmount = useDebounceFn((amount) => {

package/src/composables/address.js

@@ -96,7 +96,12 @@ export const useAddress = defineStore('useAddressStore', () => {
         // The address skel is the same, we just need to reload the relation
         fetchCart();
       } else {
-        await updateCart({shipping_address_key: key});
+        let resp = await updateCart({shipping_address_key: key});
+        const data = await resp.json()
+        shopStore.state.cartRoot['shipping_address'] = data['shipping_address']
+        if (shopStore.state.cartRoot.discount){
+          shopStore.state.discounts = {[shopStore.state.cartRoot.discount.dest.key]:shopStore.state.cartRoot.discount}
+        }
       }
     } else if (type === 'billing') {
       const {addOrUpdateOrder, fetchOrder, billingAddressKey} = useOrder();

package/src/composables/cart.js

@@ -1,4 +1,4 @@
-import {computed, reactive} from 'vue';
+import {computed, reactive, watch} from 'vue';
 import {Request} from '@viur/vue-utils'
 import { removeUndefinedValues} from '../utils'
 
@@ -7,8 +7,8 @@ import { useViurShopStore } from '../shop'
 export function useCart() {
     const shopStore = useViurShopStore()
     const state = reactive({
-        isLoading:false,
-        isUpdating:false
+        isLoading:computed(()=>shopStore.state.cartIsLoading), // not used anymore
+        isUpdating:computed(()=>shopStore.state.cartIsUpdating)// not used anymore
     })
 
     function getValue(value){
@@ -37,14 +37,13 @@ export function useCart() {
 
     function fetchCart() {
       //first fetch root then fetchItems for this root
-      state.isLoading = true;
-
+      shopStore.state.cartIsLoading = true;
       if (shopStore.state.order != null && shopStore.state.order?.cart?.dest.key) {
         // shopStore.state.cartRoot = {};
         shopStore.state.cartRoot = shopStore.state.order.cart.dest;
 
         return fetchCartItems(shopStore.state.cartRoot["key"]).then(() => {  // TODO: duplicate code
-          state.isLoading = false;
+          shopStore.state.cartIsLoading = false;
           shopStore.state.cartReady = true;
         });
       }
@@ -52,7 +51,7 @@ export function useCart() {
       return fetchCartRoot().then(() => {
         if (!shopStore.state.cartRoot?.["key"]) return 0;
         fetchCartItems(shopStore.state.cartRoot["key"]).then(() => {  // TODO: duplicate code
-          state.isLoading = false;
+          shopStore.state.cartIsLoading = false;
           shopStore.state.cartReady = true;
         });
       });
@@ -136,25 +135,25 @@ export function useCart() {
 
     function addItem(key, quantity=1, cart=null, quantity_mode='replace'){
         //add Item to cart
-        state.isUpdating = true
+        shopStore.state.cartIsUpdating = true
         return Request.post(`${shopStore.state.shopApiUrl}/article_add`, {dataObj:{
             article_key: key,
             parent_cart_key:cart?cart:shopStore.state.cartRoot['key'],
             quantity:quantity,
             quantity_mode:quantity_mode
         }}).then(async (resp)=>{
-            state.isUpdating=false
+            shopStore.state.cartIsUpdating=false
             fetchCart()
         })
 
     }
     function removeItem(key, cart=null){
-        state.isUpdating = true
+        shopStore.state.cartIsUpdating = true
         return Request.post(`${shopStore.state.shopApiUrl}/article_remove`, {dataObj:{
             article_key: key,
             parent_cart_key:cart?cart:shopStore.state.cartRoot['key']
         }}).then(async (resp)=>{
-            state.isUpdating=false
+            shopStore.state.cartIsUpdating=false
             fetchCart()
         })
     }

package/src/shop.js

@@ -103,7 +103,8 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
         stepperLength:computed(()=>{
             return Object.keys(state.tabs).length
         }),
-
+        cartIsUpdating:false,
+        cartIsLoading:false,
         // SHOP DATA
         cartList:[], //articles in cart
         cartRoot:null, //actual cart rootnode entry ( used for shipping etc)
@@ -125,7 +126,13 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
         paymentProviderData:null,
         UserDataLayout: shallowRef(AddressFormLayout),
         discounts:{},
-        stepperActionComponent:shallowRef(ShopOrderStepperAction)
+        stepperActionComponent:shallowRef(ShopOrderStepperAction),
+
+        //stepper rules:
+        stepperVisible: computed(()=>{
+          return state.currentTab!=='complete'
+        })
+
     })
 
     function addTab({name, component, displayname, iconname, iconlibrary,active})