@viur/shop-components 0.0.1-dev.6 → 0.0.1-dev.61

package/old/stores/shipping.js

@@ -0,0 +1,78 @@
+import { reactive, computed, watch } from "vue";
+import { defineStore } from "pinia";
+import { Request } from "@viur/vue-utils";
+import {useCartStore} from "./cart";
+import { useOrderStore } from './order';
+
+export const useShippingStore = defineStore("shop-shipping", () => {
+    const cartStore = useCartStore()
+    const orderStore = useOrderStore()
+
+    const state = reactive({
+        shippingData: [], //shippingoptions
+        selectedShippingMethod:null,
+        isLoading:false,
+        isUpdating:false,
+        hasError:false,
+        errorMessage:"",
+        init:true //fetch onMount or store is ready
+    })
+
+    async function getShippingData() {
+        state.shippingSelection = null
+        state.isLoading = true
+        state.isUpdating = false
+        state.hasError = false
+        try{
+            state.shippingData = await cartStore.state.shopClient.shipping_list({
+                cart_key: cartStore.state.currentbasketKey,
+            })
+            state.isLoading = false
+            if(state.shippingData.length===0){
+                state.hasError = true
+                state.errorMessage = "Keine gültige Versandart gefunden."
+            }
+        } catch (error) {
+            state.isLoading = false
+            state.hasError = true
+            state.errorMessage = "Keine gültige Versandart gefunden."
+        }
+    }
+
+    async function updateCart(){
+        if (!state.selectedShippingMethod) return false
+        let result = await cartStore.state.shopClient.cart_update({
+            cart_key: orderStore.state.currentOrder.cart.dest.key,
+            shipping_key: state.selectedShippingMethod['dest']['key']
+        })
+        if (!result?.['shipping']){
+            return false
+        }
+        return true
+    }
+
+
+    async function initShipping(){
+        if (! state.init) return false
+
+        await cartStore.init() // ensure store config starts loading
+        if (cartStore.state.isReady){
+            await getShippingData() // request shipping data based on current cart
+        }
+
+        return true
+    }
+
+    watch(()=>cartStore.state.isReady, async(newVal, oldVal)=>{
+        if (state.init){
+            await getShippingData() // auto fetch if shop is ready
+        }
+    })
+
+    return {
+        state,
+        getShippingData,
+        initShipping,
+        updateCart
+    }
+})

package/package.json

@@ -1,12 +1,7 @@
 {
   "name": "@viur/shop-components",
-  "version": "0.0.1-dev.6",
+  "version": "0.0.1-dev.61",
   "description": "Frontend Vue components for the shop module of ViUR",
-  "scripts": {
-    "build": "vite build",
-    "dev": "vite",
-    "serve": "vite preview"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/viur-framework/shop-components.git"
@@ -22,24 +17,29 @@
     "url": "https://github.com/viur-framework/shop-components/issues"
   },
   "homepage": "https://github.com/viur-framework/shop-components#readme",
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.3",
-    "postcss-custom-media": "^10.0.0",
-    "postcss-nesting": "^12.0.0",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-visualizer": "^5.9.2",
-    "typescript": "^5.1.6",
-    "vite": "^5.2.8",
-    "prettier": "^3.2.5",
-    "vue-tsc": "^2.0.17"
+  "main": "src/main.js",
+  "scripts": {
+    "build": "vite build",
+    "watch": "vite build --watch"
   },
   "dependencies": {
-    "@viur/ignite": "^5.0.2",
-    "@viur/shoelace": "^1.0.6-v2.15.0",
-    "@viur/vue-utils": "^1.4.5",
-    "pinia": "^2.1.7",
-    "vue": "^3.4.27",
-    "vue-i18n": "^9.13.1",
-    "vue-router": "^4.3.2"
+    "@tanstack/vue-table": "^8.20.5",
+    "@viur/ignite": "^5.1.2",
+    "@viur/shoelace": "^1.0.8-v2.19.0",
+    "@viur/vue-utils": "^1.7.22",
+    "@vueuse/core": "^11.1.0",
+    "pinia": "^2.2.4",
+    "primevue": "^4.1.1",
+    "vue": "^3.5.12",
+    "vue-i18n": "^10.0.4",
+    "vue-router": "^4.4.5"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^9.0.3",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "postcss-custom-media": "^11.0.3",
+    "postcss-nesting": "^13.0.0",
+    "prettier": "^3.3.3",
+    "vite": "^5.4.9"
   }
 }

package/src/Shop.vue

@@ -0,0 +1,212 @@
+<template>
+    <div class="bind viur-shop-wrap">
+        <div class="viur-shop-stepper-wrap"
+            :class="{ 'full-width': (!summary || summary==='bottom' || shopStore.state.currentTab==='complete') }"
+        >
+            <shop-order-stepper v-if="shopStore.state.cartReady && shopStore.state.orderReady">
+            </shop-order-stepper>
+        </div>
+
+        <div class="viur-shop-sidebar-wrap" v-if="false" :class="{ bottom: (summary==='bottom') }">
+          <shop-summary></shop-summary>
+        </div>
+    </div>
+
+    <sl-details summary="Debug" open>
+        language: {{shopStore.state.language}} <br>
+        order: {{ shopStore.state.orderKey }}<br>
+        cart: {{ shopStore.state.cartRoot?.['key'] }}<br><br>
+
+        shippingaddress: {{shopStore.state.cartRoot?.['shipping_address']}}<br>
+        billingaddress: {{shopStore.state.order?.['billing_address']}}<br><br>
+
+        shipping: {{shopStore.state.cartRoot?.['shipping']}}<br><br>
+        Payment: {{shopStore.state.order?.['payment_provider']}}<br><br>
+
+        Order Status<br>
+        ------<br>
+        canCheckout: {{ shopStore.state.canCheckout }}<br>
+        canOrder: {{ shopStore.state.canOrder }}<br>
+        CheckoutStarted: {{ shopStore.state.order?.['is_checkout_in_progress'] }}<br><br>
+
+        ordered: {{ shopStore.state.order?.['is_ordered'] }}<br>
+        readytoship: {{ shopStore.state.order?.['is_rts'] }}<br>
+        paid: {{ shopStore.state.order?.['is_paid'] }}<br><br>  
+
+        OrderObject: {{shopStore.state.order}}
+
+
+    </sl-details>
+
+    <div id="dialogs"></div>
+</template>
+
+
+<script setup>
+import { onBeforeMount } from 'vue';
+import ShopOrderStepper from './ShopOrderStepper.vue'
+import ShopSummary from "./ShopSummary.vue"
+import {useViurShopStore} from './shop'
+import { useUrlSearchParams } from '@vueuse/core'
+import { useOrder } from './composables/order';
+import { useCart } from './composables/cart';
+
+
+const shopStore = useViurShopStore()
+const {fetchOrder} = useOrder()
+const {fetchCart} = useCart()
+
+const props = defineProps({
+    summary:{
+      default:false
+    }, // bottom, sidebar
+    initTab:{
+      default:'cart'
+    },
+    modulename:{
+      default:'shop'
+    },
+    language:{
+      default:"de"
+    }
+})
+
+
+onBeforeMount(()=>{
+    shopStore.state.language=props.language
+    if(props.tabs){
+        shopStore.state.tabs = props.tabs
+    }
+
+    shopStore.state.moduleName= props.modulename
+    fetchCart()
+    shopStore.fetchMetaData()
+    const params = useUrlSearchParams('hash')
+    if (Object.keys(params).includes('order')){
+        shopStore.state.orderKey = params['order']
+        fetchOrder(shopStore.state.orderKey).then(()=>{
+          shopStore.state.orderReady = true
+          // navigate to order state
+          if(shopStore.state.order?.['is_ordered']){
+            shopStore.navigateToTab('complete')
+          } else if (shopStore.state.order?.['is_checkout_in_progress']){
+            shopStore.navigateToTab('confirm')
+          }
+        })
+    }else{
+      shopStore.state.orderReady = true
+    }
+
+
+    if (Object.keys(params).includes('step')){
+        shopStore.navigateToTab(params['step'])
+    }else{
+        shopStore.navigateToTab('cart')
+    }
+
+
+
+
+})
+
+
+
+</script>
+
+<style scoped>
+
+* {
+  box-sizing: border-box;
+}
+
+.viur-shop-wrap {
+  --shop-sidebar-background: var(--sl-color-neutral-100);
+  --shop-sidebar-columns: 4;
+  --shop-main-columns: 8;
+  --shop-tab-color: var(--sl-color-neutral-400);
+  --shop-tab-color-active: var(--ignt-color-primary);
+
+  --shop-form-headline-size: 1.5em;
+  --shop-success-headline-size: var(--shop-form-headline-size);
+
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-template-rows: 1fr max-content;
+  grid-gap: var(--ignt-spacing-2x-large);
+
+  width: 100%;
+  border: 0 white solid;
+}
+
+@layer foundation.shop {
+  .viur-shop-sidebar-wrap {
+    --padding: var(--sl-spacing-large);
+
+    display: flex;
+    flex-direction: column;
+    background-color: var(--shop-sidebar-background);
+    padding: var(--sl-spacing-medium);
+    overflow: hidden;
+    border-radius: var(--sl-border-radius-medium);
+    grid-column: auto / span var(--shop-sidebar-columns);
+    /* height has to be set or sidebar grows until infinity... */
+    height: min-content;
+    @media (min-width: 1024px) {
+      position: sticky;
+      max-height: calc(100vh - 2 * var(--padding));
+      top: var(--padding);
+      bottom: var(--padding);
+    }
+  }
+
+  .viur-shop-stepper-wrap {
+    display: flex;
+    flex-direction: column;
+    grid-column: auto / span var(--shop-main-columns);
+
+    @media (max-width: 1024px) {
+      grid-column: auto / span 12;
+    }
+
+    @media (max-width: 600px) {
+      &::part(active-tab-indicator) {
+        display: none;
+      }
+    }
+  }
+
+  .viur-shop-form-footer {
+    height: fit-content;
+
+    /* TODO: sticky Trigger yes no? */
+    /* position: sticky;
+    bottom: 2rem; */
+  }
+
+  :deep(.viur-shop-form-footer) {
+    display: flex;
+    justify-content: space-between;
+    margin-top: var(--sl-spacing-large);
+  }
+
+  .flex-end {
+    justify-content: flex-end;
+  }
+
+  .bottom {
+    grid-column: auto / span 12;
+    grid-row-start: 2;
+  }
+
+  .full-width {
+    grid-column: auto / span 12;
+  }
+
+  .last-row {
+    grid-row-start: 3;
+  }
+}
+
+
+
+</style>

package/src/ShopOrderStepper.vue

@@ -0,0 +1,89 @@
+<template>
+    <sl-tab-group
+        class="viur-shop-order-tabgroup"
+        noScrollControls
+        ref="stepper"
+    >
+        <template v-for="(tab,name) in shopStore.state.tabs">
+            <StepperTab
+                :tab="name"
+            >
+            </StepperTab>
+
+            <sl-tab-panel :name="name">
+                <template v-if="tab?.['loaded']">
+                    <component :is="tab['component']">
+                      <template v-slot="slotProps">
+                        <sl-bar>
+                          <div slot="right">
+                            <sl-button
+                                variant="primary"
+                                :disabled="active(slotProps)"
+                                @click="nextStep(slotProps)"
+                                :loading="tab['validating']"
+                            >
+                              {{slotProps.nextName}}
+                            </sl-button>
+                          </div>
+                        </sl-bar>
+                      </template>
+                    </component>
+                </template>
+            </sl-tab-panel>
+        </template>
+    </sl-tab-group>
+</template>
+
+<script setup>
+import {reactive, shallowRef, watch, ref, onBeforeMount, onMounted} from 'vue'
+import {useViurShopStore} from './shop'
+import StepperTab from './components/StepperTab.vue'
+
+const shopStore = useViurShopStore()
+const stepper = ref()
+
+
+// Activate Tab if currentTab changes
+watch(()=>shopStore.state.currentTab, (newVal, oldVal)=>{
+    stepper.value.show(shopStore.state.currentTab)
+    shopStore.state.tabs[shopStore.state.currentTab]['loaded'] = true
+})
+
+onMounted(()=>{
+    // wait shoelace component is ready
+    stepper.value.updateComplete.then(() => {
+        shopStore.state.tabs[shopStore.state.currentTab]['loaded'] = true
+        stepper.value.show(shopStore.state.currentTab)
+    })
+})
+
+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
+      shopStore.navigateToNext()
+    }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("----")
+}
+
+function active(obj){
+  return !obj.activefunction()
+}
+
+</script>
+
+<style scoped>
+
+
+</style>

package/src/ShopSummary.vue

@@ -0,0 +1,170 @@
+<template>
+  <h2 class="viur-shop-cart-sidebar-headline headline">Zusammenfassung</h2>
+
+  <div class="viur-shop-cart-sidebar-summary">
+    <template v-for="i in 10">
+      <div class="viur-shop-cart-sidebar-summary-item">
+        <div class="viur-shop-cart-sidebar-summary-item-amount">1x</div>
+        <div class="viur-shop-cart-sidebar-summary-item-name">Item Name auch noch etwas länger zum testen</div>
+        <div class="viur-shop-cart-sidebar-summary-item-price">1.333,00€</div>
+      </div>
+
+      <div class="viur-shop-cart-sidebar-summary-item">
+        <div class="viur-shop-cart-sidebar-summary-item-amount">1x</div>
+        <div class="viur-shop-cart-sidebar-summary-item-name">Item Name</div>
+        <div class="viur-shop-cart-sidebar-summary-item-price">1.333,00€</div>
+      </div>
+  </template>
+  </div>
+
+  <div class="viur-shop-cart-sidebar-info-line">
+    <span>Zwischensumme</span>
+
+    <sl-format-number
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="shopStore.state.order?.total"
+    >
+    </sl-format-number>
+  </div>
+
+  <div class="viur-shop-cart-sidebar-info-line">
+    <span>Versandkosten</span>
+
+    <sl-format-number
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="shopStore.state.order?.cart?.dest?.shipping?.dest?.shipping_cost"
+    >
+    </sl-format-number>
+  </div>
+  <div class="viur-shop-cart-shipping-item">
+      <span>Lieferzeit </span>
+      <template v-if="shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range === 1">
+        {{shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range}} Tag
+      </template>
+      <template v-else>
+        {{shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range}} Tage
+      </template>
+  </div>
+
+  <div class="viur-shop-cart-sidebar-info-line">
+    <span>Rabatt</span>
+
+    <sl-format-number
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="0"
+    >
+    </sl-format-number>
+  </div>
+  <div class="viur-shop-cart-sidebar-info-line">
+
+  </div>
+  <div class="viur-shop-cart-sidebar-info-line total">
+    <span>Gesamt:</span>
+    <sl-format-number
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="state.total"
+    >
+    </sl-format-number>
+  </div>
+
+  <slot name="action-buttons">
+    <div class="viur-shop-cart-sidebar-btn-wrap" v-if="!shopStore.state.order?.['is_paid']">
+      <sl-button variant="primary" size="medium">Bestellen</sl-button>
+    </div>
+  </slot>
+</template>
+<script setup>
+import {reactive, computed} from 'vue'
+import {useViurShopStore} from "./shop";
+const shopStore = useViurShopStore();
+console.log(shopStore.state.order)
+
+const state = reactive({
+  total:computed(()=>{
+    return shopStore.state.order?.total + (shopStore.state.order?.cart?.dest?.shipping?.dest?.shipping_cost?shopStore.state.order?.cart?.dest?.shipping?.dest?.shipping_cost:0)
+  })
+})
+
+
+</script>
+
+<style scoped>
+.viur-shop-cart-sidebar-info-line {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin: var(--sl-spacing-2x-small) 0;
+
+  &.total {
+    font-weight: 600;
+    border-top: 1px solid var(--sl-color-neutral-300);
+    border-bottom: 1px solid var(--sl-color-neutral-300);
+    padding: var(--sl-spacing-x-small) 0;
+    margin: var(--sl-spacing-small) 0;
+  }
+
+  span {
+    margin-right: auto;
+  }
+}
+
+.viur-shop-cart-sidebar-btn-wrap {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--sl-spacing-large);
+
+  sl-button {
+    margin-bottom: var(--sl-spacing-x-small);
+  }
+}
+
+.viur-shop-cart-sidebar-headline {
+  margin: 0 0 var(--sl-spacing-large) 0;
+}
+
+.viur-shop-cart-sidebar-summary{
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  margin-bottom: var(--sl-spacing-small);
+  padding-right: 4px;
+  margin-right: -4px;
+
+  &::-webkit-scrollbar {
+    width: 3px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--sl-color-neutral-300);
+    transition: background ease .3s;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--sl-color-neutral-400);
+  }
+}
+
+.viur-shop-cart-sidebar-summary-item{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--sl-spacing-medium);
+  margin-bottom: var(--sl-spacing-small);
+}
+
+.viur-shop-cart-sidebar-summary-item-name{
+  margin-right: auto;
+}
+</style>

package/src/Steps/ShopCart.vue

@@ -0,0 +1,60 @@
+<template>
+    <sl-button @click="fetchCart">
+        reload
+    </sl-button>
+    <sl-button @click="addItem('agtha3ZpdXIzdGVzdHIZCxIMZ3JlZW5hcnRpY2xlGICAgMSf-50JDA')">
+        add
+    </sl-button>
+    <loading-handler :isLoading="cartState.isLoading" :isUpdating="cartState.isUpdating">
+        <div class="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']"
+            >
+
+            </cart-item>
+        </div>
+        <shop-alert v-else variant="info" duration="Infinity">
+            <template #alertMsg>
+                {{ $t('shop.cart_empty') }}
+            </template>
+        </shop-alert>
+    </loading-handler>
+
+    <slot
+        nextName="weiter"
+        :activefunction="()=>state.items.length>0"
+        :nextfunction="()=>true"
+    >
+    </slot>
+
+</template>
+
+<script setup>
+import { useViurShopStore } from '../shop'
+import {computed, onBeforeMount, onMounted, reactive, watch} from 'vue'
+import { useCart } from '../composables/cart';
+import LoadingHandler from '../components/LoadingHandler.vue';
+import CartItem from '../components/CartItem.vue';
+import CartItemSmall from '../components/CartItemSmall.vue';
+import ShopAlert from '../components/ShopAlert.vue';
+
+const shopStore = useViurShopStore()
+const {fetchCart,addItem, state:cartState} = useCart()
+
+const state = reactive({
+    items: computed(()=>shopStore.state.cartList.filter(i=>i['skel_type']==='leaf'))
+})
+
+onBeforeMount(()=>{
+    fetchCart()
+})
+
+</script>
+<style scoped>
+.item-wrapper{
+    display:flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+</style>

package/src/Steps/ShopOrderComplete.vue

@@ -0,0 +1,24 @@
+<template>
+<div class="bind">
+    <h1 class="viur-shop-success-headline headline">
+      {{ $t('shop.order_thanks') }}
+    </h1>
+    <p class="paragraph"><strong>{{ $t('shop.order_number') }}:</strong> {{ shopStore.state.order?.["order_uid"] }}</p>
+    <p class="paragraph" v-html=" $t('shop.order_message')">
+    </p>
+
+    <p class="paragraph" v-if="shopStore.state.order?.['is_paid']">
+      {{ $t('shop.order_paid') }}
+    </p>
+
+    <p class="paragraph" v-if="shopStore.state.order?.['is_rts']">
+      {{ $t('shop.order_ready_to_ship') }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import {computed, reactive} from 'vue'
+import { useViurShopStore } from '../shop';
+const shopStore = useViurShopStore()
+</script>