@viur/shop-components 0.1.20 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viur/shop-components",
-  "version": "0.1.20",
+  "version": "0.2.0",
   "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>
@@ -110,7 +110,7 @@ const state = reactive({
 onBeforeMount(()=>{
     getTranslations([props.language], "viur.shop.*").then((resp)=>{
       state.translationsLoaded = true
-    }) 
+    })
     shopStore.state.language = props.language
     shopStore.state.showNodes = props.showCartNodes
     shopStore.state.debug = props.debug

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){

package/src/ShopSummary.vue

@@ -27,16 +27,6 @@
       <sl-format-number lang="de" type="currency" currency="EUR" :value="state.shippingTotal">
       </sl-format-number>
     </div>
-    <div class="viur-shop-cart-sidebar-info viur-shop-cart-shipping-item" v-if="shopStore.state.order?.cart?.dest?.shipping">
-      <span v-html="$t('viur.shop.summary_delivery_time')"></span>
-      <span>
-        {{
-          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" }}
-      </span>
-    </div>
     <div class="viur-shop-cart-sidebar-info" v-if="shopStore.state.cartRoot.discount">
       <span v-html="$t('viur.shop.summary_discount')"></span>
       <sl-format-number lang="de" type="currency" currency="EUR" :value="state.discount">
@@ -58,12 +48,24 @@
       <sl-format-number lang="de" type="currency" currency="EUR" :value="vatObj.value">
       </sl-format-number>
     </div>
+    <div class="viur-shop-cart-sidebar-info viur-shop-cart-shipping-item" v-if="shopStore.state.order?.cart?.dest?.shipping">
+      <span v-html="$t('viur.shop.summary_delivery_time')"></span>
+      <span>
+        {{
+          shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range ?
+            shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range :
+            0
+        }} {{ $t('viur.shop.day',state.shippingTime) }}
+      </span>
+    </div>
+
     <slot name="action-buttons" >
       <div class="viur-shop-cart-sidebar-btn-wrap" v-if="false && !shopStore.state.order?.['is_paid']">
         <sl-button variant="success" size="large">{{ $t("shop.summary_checkout") }}</sl-button>
       </div>
     </slot>
   </LoadingHandler>
+
 </template>
 
 <script setup>
@@ -102,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/ShopPaymentProvider.vue

@@ -68,3 +68,10 @@ onBeforeMount(()=>{
   })
 })
 </script>
+
+<style scoped>
+  sl-radio-group {
+    margin-bottom: var(--ignt-spacing-medium);
+    margin-top: var(--ignt-spacing-medium);
+  }
+</style>

package/src/Steps/ShopShippingMethod.vue

@@ -66,7 +66,7 @@ function updateShippingMethod(selection){
 }
 
 async function nextStep(){
-  await fetchOrder(shopStore.state.orderKey)
+  return await fetchOrder(shopStore.state.orderKey)
 }
 
 onBeforeMount(()=>{

package/src/components/CardSelector.vue

@@ -51,12 +51,14 @@ onMounted(()=>{
 
 <style scoped>
 sl-radio-group {
-  margin-top: var(--ignt-spacing-small);
+  margin-bottom: var(--ignt-spacing-medium);
+  margin-top: var(--ignt-spacing-medium);
 }
 
 sl-card {
   width: calc(100% - 6px);
   margin-left: 3px;
+  margin-top: var(--ignt-spacing-small);
   &[selected]::part(base){
     border:1px solid var(--sl-color-primary-500);
     box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);

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/PaymentOption.vue

@@ -55,21 +55,25 @@
 </script>
 
 <style scoped>
-.payment-selection{
+sl-details {
+  margin-top: var(--ignt-spacing-small);
+}
+
+.payment-selection {
   display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  flex-direction: row;
+  align-content: center;
+  justify-content: space-between;
+  width: 100%;
+
+  .start {
+    display: flex;
     align-items: center;
     flex-wrap: nowrap;
-    flex-direction: row;
-    align-content: center;
-    justify-content: space-between;
-    width: 100%;
-
-    .start{
-      display: flex;
-      align-items: center;
-      flex-wrap: nowrap;
-      gap:10px;
-    }
+    gap:10px;
+  }
 }
 
 .simple::part(content){

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/PaymentSelector.vue

@@ -11,7 +11,7 @@
                       @change="optionChanged"
 
       >
-        
+
       </payment-option>
 
     </sl-details-group>
@@ -51,5 +51,7 @@ function optionChanged(type){
 </script>
 
 <style scoped>
-
+  sl-radio-group {
+    margin-bottom: var(--ignt-spacing-small);
+  }
 </style>

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

@@ -78,13 +78,13 @@ export const useAddress = defineStore("useAddressStore", () => {
         let key = state[`${type}Data`]['key']
         if (type === 'shipping'){
             const {updateCart} = useCart()
-            updateCart({shipping_address_key:key})
+            await 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})
+                await updateCart({shipping_address_key:key})
             }
         }
     }

package/src/composables/cart.js

@@ -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
         })
     }
 
@@ -105,6 +107,7 @@ export function useCart() {
             dataObj: removeUndefinedValues(data)
         }).then(async (resp)=>{
             fetchCart()
+            return resp
         })
     }
 

package/src/composables/order.js

@@ -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
@@ -64,9 +66,10 @@ 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

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/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,

package/src/translations/de.js

@@ -15,7 +15,7 @@ export default {
       'order_ready_to_ship': 'Ihre Bestellung ist fertig für den Versand.',
       'cart_empty': 'Es befinden sich noch keine Artikel im Warenkorb.',
       'order_summary': 'Bestellzusammenfassung',
-      'deliverytime': 'Lieferzeit',
+      'deliverytime': 'Voraussichtliche Lieferzeit',
       'day': 'Tag | Tage',
       'availability': 'Verfügbarkeit',
       'quantity': 'Anzahl',
@@ -25,6 +25,7 @@ export default {
       'payment': 'Zahlung',
       'pay': 'Bezahlen',
       'next': 'weiter',
+      'edit': 'bearbeiten',
       'add_discount': 'Hinzufügen',
       'add_discount_placeholder': 'Dein Rabattcode',
       'use_shipping_as_billing_address': 'Lieferung zur Rechnungsadresse',

package/src/translations/en.js

@@ -25,6 +25,7 @@ export default {
       'payment': 'Payment',
       'pay': 'Pay',
       'next': 'next',
+      'edit': 'edit',
       'add_discount': 'Add',
       'add_discount_placeholder': 'Your discount code',
       'use_shipping_as_billing_address': 'Use shipping address as billing address',

package/src/translations/fr.js

@@ -25,6 +25,7 @@ export default {
       'payment': 'Paiement',
       'pay': 'Payer',
       'next': 'continuer',
+      'edit': 'éditer',
       'add_discount': 'Valider',
       'add_discount_placeholder': 'Votre code promo',
       'use_shipping_as_billing_address': 'Livraison à l\'adresse de facturation',
@@ -39,7 +40,7 @@ export default {
       'summary_discount': 'Vous économisez sur votre achat',
       'summary_checkout': 'Acheter cet article',
       'summary_total': 'Montant total',
-      'summary_vat': 'TVA incluse ({vat_percentage})',
+      'summary_vat': 'TVA incluse ({percentage})',
       'discount_not_found': 'Ce code promo n’existe pas.',
       'discount_not_active': 'Ce code promo n’est pas actif.',
       'discount_not_available': 'Ce code promo n’est pas valable pour ce pays.',