@viur/shop-components 0.1.21 → 0.2.1

package/package.json

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

package/src/Shop.vue

@@ -3,7 +3,7 @@
         <div class="viur-shop-stepper-wrap"
             :class="{ 'full-width': (!summary || summary==='bottom' || shopStore.state.currentTab==='complete') }"
         >
-            <shop-order-stepper>
+            <shop-order-stepper >
               <template #template_cart>
                 <slot name="template_cart"></slot>
               </template>
@@ -213,11 +213,6 @@ watch(()=>shopStore.state.currentTab, (newVal,oldVal)=>{
     display: flex;
     flex-direction: column;
     grid-column: auto / span 12;
-
-    &.full-width {
-      grid-column: auto / span 12;
-    }
-
     @media (min-width: 1024px) {
       grid-column: auto / span var(--shop-main-columns);
     }
@@ -252,7 +247,9 @@ watch(()=>shopStore.state.currentTab, (newVal,oldVal)=>{
     grid-row-start: 2;
   }
 
-
+  .full-width {
+    grid-column: auto / span 12;
+  }
 
   .last-row {
     grid-row-start: 3;

package/src/ShopOrderStepper.vue

@@ -5,7 +5,7 @@
         ref="stepper"
     >
         <template v-for="(tab,name) in shopStore.state.tabs">
-            <StepperTab
+            <StepperTab v-show="shopStore.state.currentTab!=='complete'"
                 :tab="name"
             >
             </StepperTab>
@@ -89,26 +89,7 @@ onMounted(()=>{
 })
 
 function nextStep(obj){
-  shopStore.state.tabs[shopStore.state.currentTab]['valid']=false
-  shopStore.state.tabs[shopStore.state.currentTab]['validating']=true
-  //validate step, like send forms or something like this
-  Promise.resolve(obj.nextfunction()).then((resp)=>{
-    if (resp){
-      shopStore.state.tabs[shopStore.state.currentTab]['valid']=true
-      shopStore.state.tabs[shopStore.state.currentTab]['validating']=false
-      useTimeoutFn(() => {
-        shopStore.navigateToNext()
-      }, 300)
-
-    }else{
-      shopStore.state.tabs[shopStore.state.currentTab]['valid']=false
-      shopStore.state.tabs[shopStore.state.currentTab]['validating']=false
-    }
-  }).catch(error=>{
-    shopStore.state.tabs[shopStore.state.currentTab]['valid']=false
-    shopStore.state.tabs[shopStore.state.currentTab]['validating']=false
-  })
-  console.log("----")
+  shopStore.tabValidation(obj.nextfunction, shopStore.navigateToNext)
 }
 
 function active(obj){
@@ -141,7 +122,6 @@ sl-tap-panel {
 .viur-shop-stepper-bar {
   margin-top: var(--shop-leaf-gap, var(--ignt-spacing-small));
   justify-self: flex-end;
-  margin-top: auto;
 }
 
 .hint{
@@ -154,7 +134,7 @@ sl-tap-panel {
   height: auto;
   min-height: var(--sl-input-height-large);
   font-size: var(--sl-button-font-size-large);
-  line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width)* 2);
+  line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
 }
 .action-button-hint::part(base){
   border-top-left-radius: 0;

package/src/ShopSummary.vue

@@ -55,7 +55,7 @@
           shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range ?
             shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range :
             0
-        }} {{ shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range === 1 ? "Tag" : "Tage" }}
+        }} {{ $t('viur.shop.day',state.shippingTime) }}
       </span>
     </div>
 
@@ -65,6 +65,7 @@
       </div>
     </slot>
   </LoadingHandler>
+
 </template>
 
 <script setup>
@@ -103,6 +104,14 @@ const state = reactive({
 
     return total
   }),
+  shippingTime:computed(()=>{
+    try{
+       let times = shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range.split(" - ").map(x=>parseInt(x))
+       return times[1] - times[0]
+    }catch(e){
+      return "-"
+    }
+  }),
   discount:computed(()=> (state.cartTotal - shopStore.state.cartRoot.total_discount_price)*-1),
   total: computed(() => {
     return shopStore.state.cartRoot.total

package/src/Steps/ShopShippingMethod.vue

@@ -14,11 +14,15 @@
     >
       <template v-slot="{option, index}">
           <!--<img slot="image">-->
-
-          <sl-format-number lang="de" type="currency" currency="EUR" :value=" option['dest']['shipping_cost']" v-if="option['dest']['shipping_cost']">
-          </sl-format-number>
-          <span v-else>{{ $t('viur.shop.free_shipping') }}</span>
-          {{ option['dest']['name'] }} - {{$t('viur.shop.deliverytime')}}: {{ option['dest']['delivery_time_range'] }} {{  $t('viur.shop.day',option['dest']['delivery_time_max'] - option['dest']['delivery_time_min']) }}
+          <sl-bar class="shipping-bar">
+            <div slot="left">
+              <sl-format-number lang="de" type="currency" currency="EUR" :value=" option['dest']['shipping_cost']" v-if="option['dest']['shipping_cost']">
+              </sl-format-number>
+              <span v-else>{{ $t('viur.shop.free_shipping') }}</span>
+            </div>
+            <span slot="right">{{$t('viur.shop.deliverytime')}}: {{ option['dest']['delivery_time_range'] }} {{  $t('viur.shop.day',option['dest']['delivery_time_max'] - option['dest']['delivery_time_min']) }}</span>
+          </sl-bar>
+        <!--{{ option['dest']['name'] }}-->
       </template>
     </card-selector>
   </loading-handler>
@@ -66,7 +70,7 @@ function updateShippingMethod(selection){
 }
 
 async function nextStep(){
-  await fetchOrder(shopStore.state.orderKey)
+  return await fetchOrder(shopStore.state.orderKey)
 }
 
 onBeforeMount(()=>{
@@ -77,5 +81,6 @@ onBeforeMount(()=>{
 
 
 <style scoped>
+  .shipping-bar {width: 100%; margin-right: var(--ignt-spacing-large)}
 
 </style>

package/src/components/CartItemSmall.vue

@@ -27,7 +27,7 @@
         :value="item.quantity"
         @sl-change="changeAmount($event.target.value)"
       >
-      <dialog-Button slot="prefix" class="decent" v-if="item.quantity===1" variant="danger" outline>
+      <dialog-Button slot="prefix" class="decent" v-if="item.quantity===1" variant="danger" outline :disabled="!edit">
         <sl-icon name="trash"></sl-icon>
         <template #dialog="{close}">
           {{ $t('messages.remove_article_from_cart') }}

package/src/components/PaymentProviderUnzer.vue

@@ -122,16 +122,14 @@ function initUnzerForm(){
 function paymentError(error){
   state.loading = false
   state.hasError = true
-  //reset session id
-  //state.paymentHandler[shopStore.state.order?.['payment_provider']].jsessionId = state.paymentHandler[shopStore.state.order?.['payment_provider']].requestJSessionId()
 }
 
 
 function submitFormToUnzer(){
     PaymentCheckPause()
     state.loading = true
+    state.hasError = false
     let paymenttarget = shopStore.state.order?.['payment_provider'].split("-")[1]
-    console.log(state.paymentHandler)
     //send to unzer
     state.paymentHandler[shopStore.state.order?.['payment_provider']].createResource().then((result)=>{
         Request.post(`${shopStore.state.shopUrl}/pp_unzer_${paymenttarget}/save_type`, {dataObj:{

package/src/components/StepperTab.vue

@@ -4,7 +4,7 @@
     slot="nav"
     :panel="tab"
     :disabled="!shopStore.state.tabs[tab]['active']"
-    @click="shopStore.navigateToTab(tab)"
+    @click="navigate"
   >
     <div class="viur-shop-order-step">
       <sl-icon
@@ -49,6 +49,12 @@ const props = defineProps({
     default:"-"
   }
 });
+
+function navigate(){
+  if (!shopStore.state.tabs[props.tab]['active']) return false
+  shopStore.navigateToTab(props.tab)
+}
+
 </script>
 
 <style scoped>

package/src/composables/address.js

@@ -1,98 +1,119 @@
-import {reactive,ref, computed} from 'vue'
-import { useOrder } from '../composables/order';
-import { useCart } from '../composables/cart';
-import { useViurShopStore } from '../shop'
-import { defineStore } from "pinia";
-export const useAddress = defineStore("useAddressStore", () => {
-    const shopStore = useViurShopStore()
+import {defineStore} from 'pinia';
+import {computed, reactive, ref} from 'vue';
+import {useCart} from '../composables/cart';
+import {useOrder} from '../composables/order';
+import {useViurShopStore} from '../shop';
+import {useShipping} from './shipping.js';
 
-    const state = reactive({
-        billingIsShipping:true,
-        shippingForm:ref(null),
-         // for shipping and both mode
-        shippingIsLoading:computed(()=>{
-            if (!state.shippingForm){
-              return true
-            }
-            return state.shippingForm.state.loading
-        }),
-        shippingIsUpdating:false, // for shipping and both mode
-        shippingData:{},
-        shippingValid:computed(()=>{
-            if(shopStore.state.cartRoot?.['shipping_address']){
-                return true
-            }
-            return false
-        }),
+export const useAddress = defineStore('useAddressStore', () => {
+  const shopStore = useViurShopStore();
+  const {fetchShippingData} = useShipping();
 
-        billingForm:ref(null),
-        billingIsLoading:computed(()=>{
-            if (!state.billingForm){
-              return true
-            }
-            return state.billingForm.state.loading
-        }),
-        billingIsUpdating:false,
-        billingData:{},
-        billingValid:computed(()=>{
-            if( shopStore.state.order?.['billing_address']){
-                return true
-            }
-            return false
-        })
+  const state = reactive({
+    billingIsShipping: true,
+    shippingForm: ref(null),
+    // for shipping and both mode
+    shippingIsLoading: computed(() => {
+      if (!state.shippingForm) {
+        return true;
+      }
+      return state.shippingForm.state.loading;
+    }),
+    shippingIsUpdating: false, // for shipping and both mode
+    shippingData: {},
+    shippingValid: computed(() => {
+      if (shopStore.state.cartRoot?.['shipping_address']) {
+        return true;
+      }
+      return false;
+    }),
 
-    })
+    billingForm: ref(null),
+    billingIsLoading: computed(() => {
+      if (!state.billingForm) {
+        return true;
+      }
+      return state.billingForm.state.loading;
+    }),
+    billingIsUpdating: false,
+    billingData: {},
+    billingValid: computed(() => {
+      if (shopStore.state.order?.['billing_address']) {
+        return true;
+      }
+      return false;
+    }),
 
-    function saveForm(type,billingIsShipping=false){
-      state[`${type}IsUpdating`] = true
-      return state[`${type}Form`].sendData().then(async (resp)=>{
-        let data = await resp.json()
+  });
 
-        if (['addSuccess','editSuccess'].includes(data['action'])){
-          state[`${type}Data`] = data['values']
-          await updateAddresses(type, billingIsShipping)
-        }
-        state[`${type}IsUpdating`] = undefined
-        return data
-      }).catch(error=>{
-        state[`${type}Form`].state.loading = false
-        return {'action':"error"}
-      })
-    }
+  function saveForm(type, billingIsShipping = false) {
+    state[`${type}IsUpdating`] = true;
+    return state[`${type}Form`].sendData().then(async (resp) => {
+      let data = await resp.json();
 
-    function saveAddresses(billingIsShipping=false){
+      if (['addSuccess', 'editSuccess'].includes(data['action'])) {
         if (billingIsShipping) {
-            return saveForm('billing',billingIsShipping)
-        }else{
-            return new Promise((resolve, reject) => {
-                saveForm('shipping').then(()=>{
-                    saveForm('billing').then(()=>{
-                        resolve({'action':'editSuccess'})
-                    }).catch((e)=>reject(e))
-                }).catch((e)=>reject(e))
-            })
+          state.billingData = state.shippingData = data['values'];
+        } else {
+          state[`${type}Data`] = data['values'];
         }
-    }
+        await updateAddresses(type, billingIsShipping);
+      }
+      state[`${type}IsUpdating`] = undefined;
+      return data;
+    }).catch(error => {
+      state[`${type}Form`].state.loading = false;
+      return {'action': 'error'};
+    });
+  }
 
-    async function updateAddresses(type, billingIsShipping=false) {
-        let key = state[`${type}Data`]['key']
-        if (type === 'shipping'){
-            const {updateCart} = useCart()
-            updateCart({shipping_address_key:key})
-        }else if (type === 'billing'){
-            const {addOrUpdateOrder} = useOrder()
-            await addOrUpdateOrder({billing_address_key:key})
-            if(billingIsShipping){
-                const {updateCart} = useCart()
-                updateCart({shipping_address_key:key})
-            }
-        }
-    }
+  function saveAddresses(billingIsShipping = false) {
+    return new Promise((resolve, reject) => {
+      if (billingIsShipping) {
+        saveForm('billing', billingIsShipping)
+          .then(async res => {
+            await fetchShippingData(); // different address --> other shipping
+            resolve(res);
+          })
+          .catch(reject);
+      } else {
+        saveForm('shipping').then(() => {
+          saveForm('billing').then(async () => {
+            await fetchShippingData(); // different address --> other shipping
+            resolve({'action': 'editSuccess'});
+          }).catch((e) => reject(e));
+        }).catch((e) => reject(e));
+      }
+    });
+  }
 
-    return {
-        state,
-        saveForm,
-        updateAddresses,
-        saveAddresses
+  async function updateAddresses(type, billingIsShipping = false) {
+    let key = state[`${type}Data`]['key'];
+    if (type === 'shipping') {
+      const {updateCart, fetchCart, shippingAddressKey} = useCart();
+      if (key === shippingAddressKey.value) {
+        // The address skel is the same, we just need to reload the relation
+        fetchCart();
+      } else {
+        await updateCart({shipping_address_key: key});
+      }
+    } else if (type === 'billing') {
+      const {addOrUpdateOrder, fetchOrder, billingAddressKey} = useOrder();
+      if (key === billingAddressKey.value) { // The address skel is the same, we just need to reload the relation
+        fetchOrder(shopStore.state.orderKey);
+      } else {
+        await addOrUpdateOrder({billing_address_key: key});
+      }
+      if (billingIsShipping) {
+        await updateAddresses('shipping', false);
+      }
     }
-})
+  }
+
+  return {
+    state,
+    saveForm,
+    updateAddresses,
+    saveAddresses,
+  };
+});

package/src/composables/cart.js

@@ -1,4 +1,4 @@
-import {reactive} from 'vue'
+import {computed, reactive} from 'vue';
 import {Request} from '@viur/vue-utils'
 import { removeUndefinedValues} from '../utils'
 
@@ -61,8 +61,9 @@ export function useCart() {
         // fetch list of Rootnodes and saves the first one
 
         return Request.get(`${shopStore.state.shopUrl}/cart/listRootNodes`).then(async (resp)=>{
-            let data = await resp.json()
+            let data = await resp.clone().json()
             shopStore.state.cartRoot = data.filter(i=>i['cart_type']==='basket')?.[0] ? data.filter(i=>i['cart_type']==='basket')[0]:[]
+            return resp
         })
     }
 
@@ -71,8 +72,9 @@ export function useCart() {
         return Request.get(`${shopStore.state.shopApiUrl}/cart_list`,{dataObj:{
             cart_key:key
         }}).then(async( resp) =>{
-            let data = await resp.json()
+            let data = await resp.clone().json()
             shopStore.state.cartList=data
+            return resp
         })
     }
 
@@ -91,7 +93,7 @@ export function useCart() {
             cart_type:cart_type?cart_type:shopStore.state.cartRoot['cart_type'],
             name:name?name:shopStore.state.cartRoot['name'],
             customer_comment:customer_comment?customer_comment:shopStore.state.cartRoot['customer_comment'],
-            shipping_address_key:shipping_address_key?shipping_address_key:shopStore.state.cartRoot?.['shipping_address']?.['dest']?.['key'],
+            shipping_address_key:shipping_address_key?shipping_address_key:shippingAddressKey.value,
             shipping_key:shipping_key?shipping_key:shopStore.state.cartRoot?.['shipping']?.['dest']?.['key'],
             discount_key:discount_key?discount_key:shopStore.state.cartRoot?.['discount']?.['dest']?.['key'],
             cart_key:cart_key ? cart_key : shopStore.state.cartRoot['key'],
@@ -105,6 +107,7 @@ export function useCart() {
             dataObj: removeUndefinedValues(data)
         }).then(async (resp)=>{
             fetchCart()
+            return resp
         })
     }
 
@@ -171,7 +174,7 @@ export function useCart() {
     });
     }
 
-
+    const shippingAddressKey = computed(() => shopStore.state.cartRoot?.['shipping_address']?.['dest']?.['key']);
 
     return {
         state,
@@ -184,6 +187,7 @@ export function useCart() {
         createCart,
         getValue,
         addDiscount,
-        removeDiscount
+        removeDiscount,
+        shippingAddressKey,
     }
 }

package/src/composables/order.js

@@ -1,8 +1,8 @@
-import {reactive} from 'vue'
-import {Request} from '@viur/vue-utils'
-import { useViurShopStore } from '../shop'
-import { removeUndefinedValues} from '../utils'
-import { useUrlSearchParams } from '@vueuse/core'
+import {Request} from '@viur/vue-utils';
+import {useUrlSearchParams} from '@vueuse/core';
+import {computed, reactive} from 'vue';
+import {useViurShopStore} from '../shop';
+import {removeUndefinedValues} from '../utils';
 
 export function useOrder() {
     const state = reactive({
@@ -20,14 +20,16 @@ export function useOrder() {
     }
     function fetchOrder(key){
         state.isLoading = true
+
         return Request.post(shopStore.state.shopApiUrl+"/order_view",{dataObj:{
             "order_key": key
         }}).then(async (resp)=>{
-            let data = await resp.json()
+            let data = await resp.clone().json()
             updateOrderState(data['skel']['key'], data['skel'])
             shopStore.state.canCheckout = data["can_checkout"]
             shopStore.state.canOrder = data["can_order"]
             state.isLoading = false
+            return resp
         }).catch((error)=>{
             shopStore.state.order = null
             shopStore.state.orderKey = null
@@ -49,7 +51,7 @@ export function useOrder() {
       let url = shopStore.state.shopApiUrl+"/order_add"
       let data = {
           payment_provider:payment_provider?payment_provider:shopStore.state.order?.['payment_provider'],
-          billing_address_key:billing_address_key?billing_address_key:shopStore.state.order?.['billing_address_key']?.['dest']?.['key'],
+          billing_address_key:billing_address_key?billing_address_key:billingAddressKey.value,
           customer_key:customer_key?customer_key:shopStore.state.order?.['customer_key']?.['dest']?.['key'],
           state_ordered:state_ordered?state_ordered:shopStore.state.order?.['state_ordered'],
           state_paid:state_paid?state_paid:shopStore.state.order?.['state_paid'],
@@ -64,19 +66,22 @@ export function useOrder() {
           data["cart_key"] = shopStore.state.cartRoot['key']
       }
       return Request.post(url,{dataObj:removeUndefinedValues(data)}).then(async(resp)=>{
-          let data = await resp.json()
+          let data = await resp.clone().json()
           updateOrderState(data['key'], data)
           state.isUpdating=false
+          return resp
       }).then(async ( resp)=>{
           fetchOrder(shopStore.state.orderKey)
           return resp
       })
   }
 
+  const billingAddressKey = computed(() => shopStore.state.order?.['billing_address']?.['dest']?.['key']);
 
-    return {
-        state,
-        fetchOrder,
-        addOrUpdateOrder
-    }
+  return {
+    state,
+    fetchOrder,
+    addOrUpdateOrder,
+    billingAddressKey,
+  };
 }

package/src/composables/payment.js

@@ -16,6 +16,7 @@ export const usePayment = defineStore("usePaymentStore", () => {
   }
 
   const simpleProviders = [
+    "invoice",
     'prepayment',
     'unzer-paypal',
     'unzer-sofort'
@@ -46,7 +47,7 @@ export const usePayment = defineStore("usePaymentStore", () => {
           currentOption.description = provider[1]['descr']
           currentOption.icon = iconMap[provider[0]]
           currentOption.widget = "simple"
-         // if (simpleProviders.includes(provider[0])){
+          //if (simpleProviders.includes(provider[0])){
           //  currentOption.widget = "simple"  // payment provider musst be initialized later
           //}
 
@@ -72,4 +73,4 @@ export const usePayment = defineStore("usePaymentStore", () => {
         fetchPaymentData
 
     }
-})
+})

package/src/composables/shipping.js

@@ -1,40 +1,46 @@
-import {reactive} from 'vue'
-import {Request} from '@viur/vue-utils'
-import { removeUndefinedValues} from '../utils'
-import { useI18n } from 'vue-i18n'
-import { useViurShopStore } from '../shop'
+import {Request} from '@viur/vue-utils';
+import {defineStore} from 'pinia';
+import {reactive} from 'vue';
+import {useI18n} from 'vue-i18n';
+import {useViurShopStore} from '../shop';
 
-export function useShipping() {
-    const i18n = useI18n()
-    const shopStore = useViurShopStore()
-    const defaultErrorMessage = i18n.t('viur.shop.error_message')
-    const state = reactive({
-        isLoading:false,
-        isUpdating:false,
-        hasError:false,
-        errorMessage: defaultErrorMessage,
-        shippingData:[]
-    })
+/**
+ * Store that holds available shipping options
+ */
+export const useShipping = defineStore('useShippingStore', () => {
+  const i18n = useI18n();
+  const shopStore = useViurShopStore();
+  const defaultErrorMessage = i18n.t('viur.shop.error_message');
+  const state = reactive({
+    isLoading: false,
+    isUpdating: false,
+    hasError: false,
+    errorMessage: defaultErrorMessage,
+    shippingData: [],
+  });
 
-    function fetchShippingData() {
-        state.isLoading = true
-        Request.get(`${shopStore.state.shopApiUrl}/shipping_list`,{dataObj:{
-            cart_key: shopStore.state.cartRoot['key']
-        }}).then(async (resp)=>{
-            let data = await resp.json()
-            state.shippingData = data
-            if (state.shippingData.length===0){
-                state.hasError = true
-                state.errorMessage = i18n.t("shop.no_valid_shipping_found")
-            }
-            state.isLoading = false
-        })
-    }
+  /**
+   * fetch available shipping options from API
+   */
+  function fetchShippingData() {
+    state.isLoading = true;
+    return Request.get(`${shopStore.state.shopApiUrl}/shipping_list`, {
+      dataObj: {
+        cart_key: shopStore.state.cartRoot['key'],
+      },
+    }).then(async (resp) => {
+      state.shippingData = await resp.json();
+      if (state.shippingData.length === 0) {
+        state.hasError = true;
+        state.errorMessage = i18n.t('shop.no_valid_shipping_found');
+      }
+      state.isLoading = false;
+    });
+  }
 
 
-    return {
-        state,
-        fetchShippingData
-
-    }
-}
+  return {
+    state,
+    fetchShippingData,
+  };
+});

package/src/shop.js

@@ -2,7 +2,7 @@
 import { reactive, computed, watch, shallowRef } from "vue";
 import {ShopCart, ShopUserDataGuest, ShopShippingMethod, ShopPaymentProvider, ShopOrderComplete, ShopOrderConfirm} from './Steps/index'
 import { defineStore } from "pinia";
-import { useUrlSearchParams } from '@vueuse/core'
+import { useUrlSearchParams,useTimeoutFn } from '@vueuse/core'
 import AddressFormLayout from './components/AddressFormLayout.vue';
 
 import { Request } from "@viur/vue-utils";
@@ -38,7 +38,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
                 params:{},
                 displayName: "viur.shop.order_step_data", //Daten Eingeben
                 icon: { name: "card-list" },
-                active:computed(()=>!state.order?.['is_checkout_in_progress'] && !state.order?.['is_ordered'] && state.cartList.length>0), //active if checkout not startet and cart is not empty
+                active:computed(()=>state.order && !state.order?.['is_checkout_in_progress'] && !state.order?.['is_ordered'] && state.cartList.length>0), //active if checkout not startet and cart is not empty
                 validating:false,
                 valid:false
             },
@@ -56,7 +56,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
                 params:{},
                 displayName: "viur.shop.order_step_payment", //Zahlungsart auswählen
                 icon: { name: "credit-card" },
-                active:computed(()=>!state.order?.['is_checkout_in_progress'] && state.order && state.cartRoot?.['shipping']), // we need a active order
+                active:computed(()=>!state.order?.['is_checkout_in_progress'] && state.order && state.cartRoot?.['shipping'] && state.cartRoot?.['shipping_address']), // we need a active order
                 validating:false,
                 valid:false
             },
@@ -199,7 +199,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
             Request.post(`${state.shopUrl}/order/checkout_start`,{dataObj:{
                 order_key:state.orderKey
             }}).then(async (resp)=>{
-                let data = await resp.json()
+                let data = await resp.clone().json()
                 state.paymentProviderData = data['payment']
 
                 if (!data['payment']){
@@ -212,6 +212,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
                 }else{
                     resolve()
                 }
+                return resp
             }).catch(error=>{
                 reject(error)
             })
@@ -224,28 +225,53 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
             Request.post(`${state.shopUrl}/order/checkout_order`,{dataObj:{
                 order_key:state.orderKey
             }}).then(async (resp)=>{
-                let data = await resp.json()
+                let data = await resp.clone().json()
                 if (!resp.ok){
                     reject(data)
                 } else {
-                    state.order = data['skel']
-                    state.paymentProviderData = data['payment']
+                  state.order = data['skel']
+                  state.paymentProviderData = data['payment']
 
-                    if(state.order?.['is_ordered']){
-                        // order is finished
+                  if(state.order?.['is_ordered']){
+                      // order is finished
+                      useTimeoutFn(() => {
                         navigateToTab('complete')
-                    }
-                    resolve(data)
-                }
-
+                      }, 300)
 
+                  }
+                  resolve(data)
+                }
+                return resp
             }).catch(error=>{
                 reject(error)
             })
         })
     }
 
+    function tabValidation(nextfunction, navigatefunction){
+      state.tabs[state.currentTab]['valid']=false
+      state.tabs[state.currentTab]['validating']=true
+
+      //validate step, like send forms or something like this
+      Promise.resolve(nextfunction()).then((resp)=>{
 
+        if (resp){
+          state.tabs[state.currentTab]['valid']=true
+          state.tabs[state.currentTab]['validating']=false
+          useTimeoutFn(() => {
+            navigatefunction()
+          }, 300)
+
+        }else{
+          state.tabs[state.currentTab]['valid']=false
+          state.tabs[state.currentTab]['validating']=false
+        }
+      }).catch(error=>{
+        console.log(error)
+        state.tabs[state.currentTab]['valid']=false
+        state.tabs[state.currentTab]['validating']=false
+      })
+    }
 
 
     return {
@@ -253,6 +279,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
         navigateToTab,
         navigateToNext,
         navigateToPrevious,
+        tabValidation,
         fetchMetaData,
         checkout,
         checkoutOrder,