@viur/shop-components 0.1.7 → 0.1.8

package/package.json

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

package/src/Shop.vue

@@ -30,7 +30,9 @@
         </div>
     </div>
     <template v-if="shopStore.state.debug">
+      <br>
       <sl-details summary="Debug">
+          <sl-icon slot="prefix" name="bug"></sl-icon>
           order: {{ shopStore.state.orderKey }}<br>
           cart: {{ shopStore.state.cartRoot?.['key'] }}<br><br>
 
@@ -51,8 +53,7 @@
           paid: {{ shopStore.state.order?.['is_paid'] }}<br><br>
 
           OrderObject: {{shopStore.state.order}}
-
-
+        
       </sl-details>
     </template>
     <div id="dialogs"></div>

package/src/ShopOrderStepper.vue

@@ -14,7 +14,7 @@
                 <template v-if="tab?.['loaded']">
 
 
-                    <component :is="tab['component']">
+                    <component :is="tab['component']" :params="tab['params']">
                       <template #['template_'+name]>
                         <slot :name="'template_'+name"></slot>
                       </template>
@@ -100,8 +100,29 @@ function active(obj){
 
 <style scoped>
 
+sl-tab-group {
+  flex-grow: 1;
+  &::part(base) {
+    height: 100%;
+  }
+  &::part(body) {
+    height: 100%;
+  }
+}
+
+sl-tap-panel {
+  height: 100%;
+  &::part(base) {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
 .viur-shop-stepper-bar {
-  margin-top: var(--shop-leaf-gap, var(--ignt-spacing-small))
+  margin-top: var(--shop-leaf-gap, var(--ignt-spacing-small));
+  justify-self: flex-end;
+  margin-top: auto;
 }
 
 .hint{

package/src/Steps/ShopCart.vue

@@ -20,7 +20,7 @@
     <slot
         :nextName="$t('shop.proceed-checkout')"
         :activefunction="()=>state.items.length>0"
-        :nextfunction="()=>true"
+        :nextfunction="nextStep"
     >
     </slot>
 
@@ -34,9 +34,18 @@ import LoadingHandler from '../components/LoadingHandler.vue';
 import CartItem from '../components/CartItem.vue';
 import CartItemSmall from '../components/CartItemSmall.vue';
 import ShopAlert from '../components/ShopAlert.vue';
+import { useOrder } from '../composables/order';
 
 const shopStore = useViurShopStore()
 const {fetchCart,addItem, state:cartState} = useCart()
+const {addOrUpdateOrder}  = useOrder()
+
+const props = defineProps({
+  params:{
+    type:Object,
+    default:{}
+  }
+})
 
 const state = reactive({
     items: computed(()=>shopStore.state.cartList.filter(i=>i['skel_type']==='leaf'))
@@ -46,6 +55,17 @@ onBeforeMount(()=>{
     fetchCart()
 })
 
+async function nextStep(){
+    try{
+        let resp = await addOrUpdateOrder()
+        console.log(resp)
+        return true
+
+    } catch(error){
+        return false
+    }
+}
+
 </script>
 <style scoped>
 

package/src/Steps/ShopOrderComplete.vue

@@ -29,4 +29,12 @@ import {computed, reactive} from 'vue'
 import { useViurShopStore } from '../shop';
 import ShopSummary from '../ShopSummary.vue';
 const shopStore = useViurShopStore()
+
+const props = defineProps({
+  params:{
+    type:Object,
+    default:{}
+  }
+})
+
 </script>

package/src/Steps/ShopOrderConfirm.vue

@@ -68,6 +68,9 @@
   </sl-details>
   </div>
 
+  <component :is="params['additionalComponent']" v-if="params['additionalComponent']" ref="additionalComponent">
+  </component>
+
   <div class="wrapper">
     <sl-button size="small" @click="startCheckout" :disabled="!shopStore.state.canCheckout" variant="success">{{ $t('shop.order_pay') }}</sl-button>
   </div>
@@ -82,7 +85,7 @@
   </slot>
 </template>
 <script setup>
-import {computed, onBeforeMount, reactive, watch} from 'vue'
+import {computed, onBeforeMount, reactive, watch, useTemplateRef} from 'vue'
 import { useViurShopStore } from '../shop';
 import boneUtils from '@viur/vue-utils/bones/utils'
 import {Request} from '@viur/vue-utils'
@@ -90,6 +93,14 @@ import CartItemSmall from '../components/CartItemSmall.vue';
 import PaymentProviderUnzer from '../components/PaymentProviderUnzer.vue';
 const shopStore = useViurShopStore()
 
+const additionalComponent = useTemplateRef('additionalComponent')
+
+const props = defineProps({
+  params:{
+    type:Object,
+    default:{}
+  }
+})
 
 // collected data from order Object > Session cart is not available anymore
 const state = reactive({
@@ -124,7 +135,13 @@ function paymentCanceled(){
 }
 
 //open popup and freeze cart
-function startCheckout(){
+async function startCheckout(){
+  if (props.params?.additionalComponent){
+      let valid = await additionalComponent.value.valid()
+      if (!valid){
+        return false
+      }
+  }
   state.paymentPopup=true
   shopStore.checkout()
 }

package/src/Steps/ShopPaymentProvider.vue

@@ -38,6 +38,13 @@ const {state:paymentState, fetchPaymentData} = usePayment()
 const {addOrUpdateOrder} = useOrder()
 const shopStore = useViurShopStore()
 
+const props = defineProps({
+  params:{
+    type:Object,
+    default:{}
+  }
+})
+
 const state = reactive({
     selection:null,
 })

package/src/Steps/ShopShippingMethod.vue

@@ -40,6 +40,13 @@ const {updateCart} = useCart();
 const {fetchOrder} = useOrder();
 const {state: shippingState,fetchShippingData} = useShipping();
 
+const props = defineProps({
+  params:{
+    type:Object,
+    default:{}
+  }
+})
+
 const state = reactive({
   selectedShippingMethod: null
 })

package/src/Steps/ShopUserDataGuest.vue

@@ -16,6 +16,10 @@
       <address-form formtype="shipping" >
       </address-form>
     </div>
+
+    <component :is="params['additionalComponent']" v-if="params['additionalComponent']" ref="additionalComponent">
+    </component>
+
     <slot name="template_userdata">
     </slot>
 
@@ -31,12 +35,19 @@
 
 
 <script setup>
-import {reactive, onBeforeMount, watch} from 'vue'
+import {reactive, onBeforeMount, watch, useTemplateRef} from 'vue'
 import AddressForm from '../components/AddressForm.vue'
 import {useAddress} from "../composables/address";
 import {useViurShopStore} from "../shop";
 const shopStore = useViurShopStore();
 const {state:addressState,saveAddresses} = useAddress()
+const additionalComponent = useTemplateRef('additionalComponent')
+const props = defineProps({
+  params:{
+    type:Object,
+    default:{}
+  }
+})
 
 const state = reactive({
 })
@@ -61,12 +72,20 @@ onBeforeMount(()=>{
 async function nextStep(){
   // form is only valid if the action field ends with Success
   try{
+    if (props.params?.additionalComponent){
+        let valid = await additionalComponent.value.valid()
+        if (!valid){
+          return false
+        }
+    }
+
     let result = await saveAddresses(addressState.billingIsShipping)
     if (result['action'] && result['action'].endsWith('Success')){
       return true
     }
     return false
   } catch(error){
+    console.log(error)
     return false
   }
 }

package/src/components/CartItem.vue

@@ -15,10 +15,16 @@
     <h5 v-if="item.shop_art_no_or_gtin" class="viur-shop-cart-leaf-artno" slot="header">
       {{ getValue(item.shop_art_no_or_gtin) }}
     </h5>
-    <h4
-      class="viur-shop-cart-leaf-headline headline"
-      v-html="getValue(item.shop_name)"
-    ></h4>
+    <a class="viur-shop-cart-leaf-headline-link" :href="item.article.dest.view_url" v-if="item.article?.dest?.view_url">
+      <h4
+        class="viur-shop-cart-leaf-headline headline"
+        v-html="getValue(item.shop_name)"
+      ></h4>
+    </a>
+    <h4 v-else
+        class="viur-shop-cart-leaf-headline headline"
+        v-html="getValue(item.shop_name)"
+      ></h4>
     <div
       class="viur-shop-cart-leaf-description"
       v-html="getValue(item.shop_description)"
@@ -129,7 +135,11 @@ function removeArticle(){
 </script>
 <style scoped>
 @layer foundation.shop {
-
+  .viur-shop-cart-leaf-headline-link{
+    grid-column: 1 / span 4;
+    margin: 0;
+    font-size: var(--shop-leaf-headline-font-size);
+  }
   .availability {
     display: flex;
     flex-basis: 70%;

package/src/shop.js

@@ -24,6 +24,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
         tabs:{
             cart: {
                 component: shallowRef(ShopCart),
+                params:{},
                 displayName: "shop.order_step_cart", //Warenkorb
                 icon: { name: "cart3" },
                 active:computed(()=>!state.order?.['is_checkout_in_progress'] && !state.order?.['is_ordered']),  //active if no orderkey or checkout not startet
@@ -32,6 +33,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
             },
             userdata: {
                 component: shallowRef(ShopUserDataGuest),
+                params:{},
                 displayName: "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
@@ -40,6 +42,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
             },
             shippingmethod: {
                 component: shallowRef(ShopShippingMethod),
+                params:{},
                 displayName: "shop.order_step_shipping", // Versandart
                 icon: { name: "truck" },
                 active:computed(()=>!state.order?.['is_checkout_in_progress'] && !state.order?.['is_ordered'] && state.cartRoot?.['shipping_address']), // we need a shipping country
@@ -48,6 +51,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
             },
             paymentprovider: {
                 component: shallowRef(ShopPaymentProvider),
+                params:{},
                 displayName: "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
@@ -56,6 +60,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
             },
             confirm: {
                 component: shallowRef(ShopOrderConfirm),
+                params:{},
                 displayName: "shop.order_step_verify", //Bestellung prüfen
                 icon: { name: "clipboard-check" },
                 active:computed(()=>!state.order?.['is_paid'] && state.canCheckout?.['status']), // active if canCheckout and not already paid
@@ -64,6 +69,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
             },
             complete: {
                 component: shallowRef(ShopOrderComplete),
+                params:{},
                 displayName: "shop.order_step_complete", //Bestellung Abgeschlossen
                 icon: { name: "bag-check" },
                 active:computed(()=>state.order?.['is_ordered']), // active if ordered