@viur/shop-components 0.2.0 → 0.2.1

package/package.json

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

package/src/ShopOrderStepper.vue

@@ -122,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{
@@ -135,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/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>
@@ -77,5 +81,6 @@ onBeforeMount(()=>{
 
 
 <style scoped>
+  .shipping-bar {width: 100%; margin-right: var(--ignt-spacing-large)}
 
 </style>

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()
-            await updateCart({shipping_address_key:key})
-        }else if (type === 'billing'){
-            const {addOrUpdateOrder} = useOrder()
-            await addOrUpdateOrder({billing_address_key:key})
-            if(billingIsShipping){
-                const {updateCart} = useCart()
-                await 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'
 
@@ -93,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'],
@@ -174,7 +174,7 @@ export function useCart() {
     });
     }
 
-
+    const shippingAddressKey = computed(() => shopStore.state.cartRoot?.['shipping_address']?.['dest']?.['key']);
 
     return {
         state,
@@ -187,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({
@@ -51,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'],
@@ -76,10 +76,12 @@ export function useOrder() {
       })
   }
 
+  const billingAddressKey = computed(() => shopStore.state.order?.['billing_address']?.['dest']?.['key']);
 
-    return {
-        state,
-        fetchOrder,
-        addOrUpdateOrder
-    }
+  return {
+    state,
+    fetchOrder,
+    addOrUpdateOrder,
+    billingAddressKey,
+  };
 }

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,
+  };
+});