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

package/old/stores/order.js

@@ -0,0 +1,202 @@
+import { reactive } from "vue";
+import { defineStore } from "pinia";
+import { useCartStore } from "./cart";
+import { useMessageStore } from "./message";
+import { Request } from '@viur/vue-utils'
+import { useUrlSearchParams } from '@vueuse/core'
+
+export const useOrderStore = defineStore("shop-order", () => {
+  const cartStore = useCartStore();
+  const messageStore = useMessageStore();
+
+  const state = reactive({
+    currentOrderkey:null,
+    currentOrder: null,
+    shopClient: undefined,
+    updateParams: {},
+    paramsChanged: false,
+    checkoutState: null, // null "prepare","start", ...
+    checkout: null,
+  });
+
+  function getOrder(){
+    return new Promise(async (resolve, reject) => {
+      if (!state.currentOrderkey){
+        resolve()
+      }
+      try{
+        const response = await Request.post(state.shopClient.shop_api_url+"/order_view",{dataObj:{
+          "order_key": state.currentOrderkey
+        }})
+
+
+        console.log(response)
+        const data = await response.json()
+        console.log(data['skel'])
+        state.currentOrder = data['skel']
+
+      } catch(error){
+        state.currentOrder = null
+      }
+      resolve()
+    })
+  }
+
+  function add(obj) {
+    return new Promise((resolve, reject) => {
+      state.shopClient
+        .order_add(obj)
+        .then(async (resp) => {
+          let data = await resp;
+          state.currentOrder = data;
+          state.currentOrderkey = data["key"]
+          const params = useUrlSearchParams('hash')
+          params['order'] = state.currentOrderkey
+          resolve(data);
+        })
+        .catch((error) => {
+          messageStore.state.errors.push({
+            msg: error,
+            variant: "danger",
+            iconName: "x-lg",
+            id: new Date().getTime(),
+            duration: "Infinity",
+            closeable: false,
+          });
+          reject(error);
+        });
+    });
+  }
+
+  function update() {
+    Object.assign(state.updateParams, {
+      order_key: state.currentOrder.key,
+    });
+
+    return new Promise((resolve, reject) => {
+      state.shopClient
+        .order_update(state.updateParams)
+        .then(async (resp) => {
+          let data = await resp;
+          state.currentOrder = data;
+          state.currentOrderkey = data["key"]
+          state.paramsChanged = false;
+          resolve(data);
+        })
+        .catch((error) => {
+          messageStore.state.errors.push({
+            msg: error,
+            variant: "danger",
+            iconName: "x-lg",
+            id: new Date().getTime(),
+            duration: "Infinity",
+            closeable: false,
+          });
+          reject(error);
+        });
+    });
+  }
+
+  function getExistingOrder() {
+    // needs clarification
+  }
+
+  function updateParams(obj = {}) {
+    if (!Object.keys(obj).length) {
+      return;
+    }
+
+    for (let [k, v] of Object.entries(obj)) {
+      if (state.updateParams?.[k] !== v) {
+        Object.assign(state.updateParams, obj);
+        state.paramsChanged = true;
+        return;
+      }
+    }
+  }
+
+  function handler() {
+    /* Accepted Parameters
+      (*** required fields; only 1 of the required fields need to be set)
+      obj = {
+        cart_key: "key",
+        payment_provider: "payment_provider key",
+        billing_address_key: "billing_address_key",
+        email: "email", ***
+        customer_key: "customer_key", ***
+        state_ordered: "state",
+        state_paid: "state",
+        state_rts: "state",
+      }; */
+
+    if (
+      !(
+        state.updateParams &&
+        (state.updateParams.email || state.updateParams.customer_key)
+      )
+    ) {
+      state.updateParams.customer_key = cartStore.state.customer.key;
+    }
+
+    if (!state.currentOrder) {
+      // TODO: getExistingOrder().then(state.currentOrder = value).error(add(params)...)
+
+      if (!state.updateParams.cart_key) {
+        state.updateParams.cart_key = cartStore.state.basket.key;
+      }
+
+      add(state.updateParams);
+    } else {
+      if (state.paramsChanged) {
+        update();
+      }
+    }
+  }
+
+  function add_or_update(){
+    if (
+      !(
+        state.updateParams &&
+        (state.updateParams.email || state.updateParams.customer_key)
+      )
+    ) {
+      state.updateParams.customer_key = cartStore.state.customer.key;
+    }
+
+    if (!state.currentOrder) {
+      // TODO: getExistingOrder().then(state.currentOrder = value).error(add(params)...)
+
+      if (!state.updateParams.cart_key) {
+        state.updateParams.cart_key = cartStore.state.basket.key;
+      }
+
+      add(state.updateParams);
+    } else {
+      if (state.paramsChanged) {
+        update();
+      }
+    }
+  }
+
+
+  async function startCheckout() {
+    try {
+      state.checkout = await state.shopClient.order_checkout_start({
+        order_key: state.currentOrder.key,
+      });
+      cartStore.state.freeze = true;
+    } catch (error) {
+      console.log(state.checkout);
+      console.dir(error);
+    }
+  }
+
+  return {
+    state,
+    handler,
+    startCheckout,
+    updateParams,
+    getOrder,
+    add_or_update
+  };
+});

package/old/stores/payment.js

@@ -0,0 +1,79 @@
+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 usePaymentStore = defineStore("payment-shipping", () => {
+    const cartStore = useCartStore()
+    const orderStore = useOrderStore()
+
+    const state = reactive({
+        paymentProviders: [], //payment options
+        paymentInstances:[],
+        paymentSelection:null,
+        isLoading:false,
+        isUpdating:false,
+        hasError:false,
+        errorMessage:"",
+        init:true, //fetch onMount and store is ready
+        paymentHandler:{}
+    })
+
+    async function getPaymentProviders() {
+        state.paymentSelection = null
+        state.isLoading = true
+        state.isUpdating = false
+        state.hasError = false
+        try{
+            let providersObject = await cartStore.state.shopClient.payment_providers_list()
+            state.paymentProviders = Object.entries(providersObject) // cardselector needs a list
+            state.isLoading = false
+            if(state.paymentProviders.length===0){
+                state.hasError = true
+                state.errorMessage = "Keine gültige Bezahlart gefunden."
+            }
+        } catch (error) {
+            console.log(error)
+            state.isLoading = false
+            state.hasError = true
+            state.errorMessage = "Keine gültige Bezahlart gefunden."
+        }
+    }
+
+    async function initPayment(){
+        if (!state.init) return false
+        await cartStore.init() // ensure store config starts loading
+        if (!orderStore.state.currentOrder || Object.keys(orderStore.state.currentOrder).length===0){
+            /*
+            state.hasError = true
+            state.errorMessage = "Keine gültige Bestellung gefunden"
+            return false */
+        } // we need a valid order
+
+
+        if (cartStore.state.isReady){
+            await getPaymentProviders() // request Payment data based on current cart
+        }
+        return true
+    }
+
+    function updateOrder(){
+        console.log("updateOrder payment", orderStore.state.currentOrder)
+        orderStore.updateParams({
+            payment_provider: state.paymentSelection[0]
+        })
+        return true
+    }
+
+    watch(()=>cartStore.state.isReady, async(newVal, oldVal)=>{
+        await initPayment() // auto fetch if shop is ready
+    })
+
+    return {
+        state,
+        getPaymentProviders,
+        initPayment,
+        updateOrder
+    }
+})

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,6 +1,6 @@
 {
   "name": "@viur/shop-components",
-  "version": "0.0.1-dev.60",
+  "version": "0.0.1-dev.61",
   "description": "Frontend Vue components for the shop module of ViUR",
   "repository": {
     "type": "git",
@@ -25,10 +25,8 @@
   "dependencies": {
     "@tanstack/vue-table": "^8.20.5",
     "@viur/ignite": "^5.1.2",
-    "@viur/shoelace": "^1.0.8-v2.17.1",
-    "@viur/viur-shop-client": "^0.3.0",
-    "@viur/vue-components": "^1.7.12",
-    "@viur/vue-utils": "^1.7.18",
+    "@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",

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>