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

package/src/components/StepperTab.vue

@@ -0,0 +1,132 @@
+<template>
+  <sl-tab
+    class="viur-shop-order-tab"
+    slot="nav"
+    :panel="tab"
+    :disabled="!shopStore.state.tabs[tab]['active']"
+    @click="shopStore.navigateToTab(tab)"
+  >
+    <div class="viur-shop-order-step">
+      <sl-icon
+        class="viur-shop-order-step-icon"
+        v-if="shopStore.state.tabs[tab]?.icon?.name"
+        :name="shopStore.state.tabs[tab].icon.name"
+        :library="shopStore.state.tabs[tab].icon.library ? shopStore.state.tabs[tab].icon.library : 'default'"
+      >
+      </sl-icon>
+
+      <div class="viur-shop-order-status-text">
+        <template v-if="tab && shopStore.state.tabs[tab]">
+          {{ shopStore.state.tabIndexMap[tab] + 1 }}.
+          <span class="viur-shop-order-status-span">
+            {{ shopStore.state.tabs[tab]?.displayName }}
+          </span>
+        </template>
+        <template v-else>
+          {{ tab }}
+        </template>
+      </div>
+    </div>
+
+    <sl-icon
+      name="chevron-right"
+      class="viur-shop-order-tab-check"
+      v-if="shopStore.state.tabIndexMap[tab] < shopStore.state.stepperLength - 1"
+    >
+    </sl-icon>
+  </sl-tab>
+</template>
+
+<script setup>
+import { watch, onBeforeMount, inject } from "vue";
+import {useViurShopStore} from '../shop'
+const shopStore = useViurShopStore()
+
+const props = defineProps({
+  tab: {
+    type: String,
+    required: true,
+    default:"-"
+  }
+});
+</script>
+
+<style scoped>
+.viur-shop-order-tab {
+  width: 25%;
+  position: relative;
+
+  &::part(base) {
+    color: var(--shop-tab-color);
+    display: flex;
+    height: 100%;
+  }
+
+  &[aria-selected="true"] {
+    --shop-tab-color: var(--shop-tab-color--active);
+  }
+
+  @media (max-width: 900px) {
+    &::part(base) {
+      height: 100%;
+      padding: var(--sl-spacing-small) var(--sl-spacing-medium);
+    }
+  }
+
+  @media (max-width: 600px) {
+    &[aria-selected="true"] {
+      width: 100%;
+    }
+
+    &:not([aria-selected="true"]) {
+      .viur-shop-order-status-span {
+        display: none;
+      }
+    }
+  }
+}
+
+.viur-shop-order-step {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  &:has(sl-icon) {
+    justify-content: flex-start;
+  }
+
+  sl-icon {
+    font-size: 2.5em;
+    margin-bottom: 15px;
+  }
+
+  @media (max-width: 900px) {
+    justify-content: center;
+
+    sl-icon {
+      display: none;
+    }
+  }
+}
+
+.viur-shop-order-status-text {
+  font-size: 1em;
+  color: inherit;
+  text-align: center;
+  white-space: initial;
+}
+
+.viur-shop-order-tab-check {
+  position: absolute;
+  right: -0.5em;
+
+  @media (max-width: 900px) {
+    font-size: 0.7em;
+    right: -0.35em;
+    top: calc(50% - 0.35em);
+  }
+}
+</style>

package/src/components/dialogButton.vue

@@ -0,0 +1,49 @@
+<template>
+    <sl-button v-bind="$attrs" @click="state.opened=true">
+        <slot>
+
+        </slot>
+    </sl-button>
+    <teleport to="#dialogs" v-if="state.opened">
+    <sl-dialog :open="state.opened"  @sl-after-hide="state.opened=false" noHeader>
+            <slot name="dialog" :close="close">
+
+            </slot>
+        </sl-dialog>
+    </teleport>
+</template>
+
+<script setup>
+import {reactive} from 'vue'
+defineOptions({
+  inheritAttrs: false
+})
+
+const state = reactive({
+    opened:false
+})
+
+function close(){
+    state.opened=false
+}
+
+</script>
+
+<style scoped>
+
+.decent{
+    margin: 0;
+    transition: all ease .3s;
+
+    &::part(base){
+        border: none;
+    }
+
+    &::part(label){
+        padding: 0;
+        height: var(--sl-input-height-medium);
+        width: calc(var(--sl-input-height-medium) / 5 * 4);
+    }
+}
+
+</style>

package/src/composables/address.js

@@ -0,0 +1,95 @@
+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()
+
+    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,shippingIsBilling=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, shippingIsBilling)
+        }
+        state[`${type}IsUpdating`] = undefined
+        return data
+      })
+    }
+
+    function saveAddresses(shippingIsBilling=false){
+        if (shippingIsBilling) {
+            return saveForm('shipping',shippingIsBilling)
+        }else{
+            return new Promise((resolve, reject) => {
+                saveForm('shipping').then(()=>{
+                    saveForm('billing').then(()=>{
+                        resolve({'actions':'editSuccess'})
+                    }).catch((e)=>reject(e))
+                }).catch((e)=>reject(e))
+            })
+        }
+    }
+
+    async function updateAddresses(type, shippingIsBilling=false) {
+        let key = state[`${type}Data`]['key']
+
+        if (type === 'shipping'){
+            const {updateCart} = useCart()
+            updateCart({shipping_address_key:key})
+            if(shippingIsBilling){
+                const {addOrUpdateOrder} = useOrder()
+                await addOrUpdateOrder({billing_address_key:key})
+            }
+        }else if (type === 'billing'){
+            const {addOrUpdateOrder} = useOrder()
+            await addOrUpdateOrder({billing_address_key:key})
+        }
+    }
+
+    return {
+        state,
+        saveForm,
+        updateAddresses,
+        saveAddresses
+    }
+})

package/src/composables/cart.js

@@ -0,0 +1,132 @@
+import {reactive} from 'vue'
+import {Request} from '@viur/vue-utils'
+import { removeUndefinedValues} from '../utils'
+
+import { useViurShopStore } from '../shop'
+
+export function useCart() {
+    const shopStore = useViurShopStore()
+    const state = reactive({
+        isLoading:false,
+        isUpdating:false
+    })
+
+    function getValue(value){
+        if (value !== null && 
+            typeof value === 'object' && 
+            !Array.isArray(value) && 
+            Object.keys(value).includes(shopStore.state.language)
+        ){
+            return value[shopStore.state.language]
+        }
+        return value
+    }
+
+    //agtha3ZpdXIzdGVzdHIgCxITZ3JlZW5zaG9wX2NhcnRfbm9kZRiAgIDE29eVCgw
+    function createCart(){
+        Request.post(shopStore.state.shopApiUrl+'/cart_add',{dataObj:{
+            parent_cart_key:shopStore.state.cartRoot['key'],
+            cart_type:"wishlist"
+        }}).then(async( resp)=>{
+            let data = await resp.json()
+            console.log(data)
+        })
+
+
+    }
+
+
+    function fetchCart(){
+        //first fetch root then fetchItems for this root
+        state.isLoading = true
+        return fetchCartRoot().then(()=>{
+            if(!shopStore.state.cartRoot?.['key']) return 0
+            fetchCartItems(shopStore.state.cartRoot['key']).then(()=>{
+                state.isLoading = false
+                shopStore.state.cartReady = true
+            })
+        })
+    }
+
+    function fetchCartRoot(){
+        // 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()
+            shopStore.state.cartRoot = data.filter(i=>i['cart_type']==='basket')?.[0] ? data.filter(i=>i['cart_type']==='basket')[0]:[]
+        })
+    }
+
+    function fetchCartItems(key, parentKey=null){
+        //fetch cart items
+        return Request.get(`${shopStore.state.shopApiUrl}/cart_list`,{dataObj:{
+            cart_key:key
+        }}).then(async( resp) =>{
+            let data = await resp.json()
+            shopStore.state.cartList=data
+        })
+    }
+
+    function updateCart({
+                    cart_type,
+                    name,
+                    customer_comment,
+                    shipping_address_key,
+                    shipping_key,
+                    discount_key,
+                } = {}){
+
+        let data= {
+            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_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:shopStore.state.cartRoot['key']
+        }
+
+        return Request.post(`${shopStore.state.shopApiUrl}/cart_update`, {
+            dataObj: removeUndefinedValues(data)
+        }).then(async (resp)=>{
+            fetchCart()
+        })
+    }
+
+    function addItem(key, quantity=1, cart=null, quantity_mode='replace'){
+        //add Item to cart
+        state.isUpdating = true
+        return Request.post(`${shopStore.state.shopApiUrl}/article_add`, {dataObj:{
+            article_key: key,
+            parent_cart_key:cart?cart:shopStore.state.cartRoot['key'],
+            quantity:quantity,
+            quantity_mode:quantity_mode
+        }}).then(async (resp)=>{
+            state.isUpdating=false
+            fetchCart()
+        })
+
+    }
+    function removeItem(key, cart=null){
+        state.isUpdating = true
+        return Request.post(`${shopStore.state.shopApiUrl}/article_remove`, {dataObj:{
+            article_key: key,
+            parent_cart_key:cart?cart:shopStore.state.cartRoot['key']
+        }}).then(async (resp)=>{
+            state.isUpdating=false
+            fetchCart()
+        })
+    }
+
+    return {
+        state,
+        fetchCartRoot,
+        fetchCartItems,
+        fetchCart,
+        updateCart,
+        addItem,
+        removeItem,
+        createCart,
+        getValue
+    }
+}

package/src/composables/order.js

@@ -0,0 +1,80 @@
+import {reactive} from 'vue'
+import {Request} from '@viur/vue-utils'
+import { useViurShopStore } from '../shop'
+import { removeUndefinedValues} from '../utils'
+import { useUrlSearchParams } from '@vueuse/core'
+
+export function useOrder() {
+    const state = reactive({
+        isLoading:false,
+        isUpdating:false
+    })
+    const shopStore = useViurShopStore()
+    function updateOrderState(key,data){
+        shopStore.state.order = data
+        shopStore.state.orderKey = key
+        
+        const params = useUrlSearchParams('hash')
+        params['order'] = shopStore.state.orderKey
+
+    }
+    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()
+            updateOrderState(data['skel']['key'], data['skel'])
+            shopStore.state.canCheckout = data["can_checkout"]
+            shopStore.state.canOrder = data["can_order"]
+            state.isLoading = false
+        }).catch((error)=>{
+            shopStore.state.order = null
+            shopStore.state.orderKey = null
+            state.isLoading = false
+        })
+    }
+
+    function addOrUpdateOrder({
+        payment_provider,
+        billing_address_key,
+        email,
+        customer_key,
+        state_ordered,
+        state_paid,
+        state_rts
+    }={}){
+        state.isUpdating=true
+        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'],
+            email:email?email:shopStore.state.order?.['email'],
+            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'],
+            state_rts:state_rts?state_rts:shopStore.state.order?.['state_rts']
+        }
+        if (shopStore.state.orderKey){
+            url = shopStore.state.shopApiUrl+"/order_update"
+            data["order_key"] = shopStore.state.orderKey
+            
+        }else{
+            data["cart_key"] = shopStore.state.cartRoot['key']
+        }
+        return Request.post(url,{dataObj:removeUndefinedValues(data)}).then(async(resp)=>{
+            let data = await resp.json()
+            updateOrderState(data['key'], data)
+            state.isUpdating=false
+        }).then(async ( resp)=>{
+            fetchOrder(shopStore.state.orderKey)
+            return resp
+        })
+    }
+
+    return {
+        state,
+        fetchOrder,
+        addOrUpdateOrder
+    }
+}

package/src/composables/payment.js

@@ -0,0 +1,75 @@
+import {reactive} from 'vue'
+import {Request} from '@viur/vue-utils'
+import { removeUndefinedValues} from '../utils'
+import { useViurShopStore } from '../shop'
+import {defineStore} from "pinia";
+
+export const usePayment = defineStore("usePaymentStore", () => {
+    const shopStore = useViurShopStore()
+
+    const iconMap = {
+    'prepayment':'currency-euro',
+    'unzer-card':'credit-card-2-back-fill',
+    'unzer-paypal':'paypal',
+    'unzer-ideal':'bank2',
+    'unzer-sofort':'cash-coin'
+  }
+
+  const simpleProviders = [
+    'prepayment',
+    'unzer-paypal',
+    'unzer-sofort'
+  ]
+
+    const state = reactive({
+        isLoading:false,
+        isUpdating:false,
+        paymentData:[]
+    })
+
+    function _convertPayment(paymentProviders){
+        paymentProviders = Object.entries(paymentProviders)
+        let options = []
+        let option = {
+          paymenttype:null,
+          widget:"default",
+          name:null,
+          description:null,
+          icon:null
+
+        }
+
+        for (const provider of paymentProviders){
+          let currentOption = {...option}
+          currentOption.paymenttype = provider[0]
+          currentOption.name = provider[1]['title']
+          currentOption.description = provider[1]['descr']
+          currentOption.icon = iconMap[provider[0]]
+          currentOption.widget = "simple"
+         // if (simpleProviders.includes(provider[0])){
+          //  currentOption.widget = "simple"  // payment provider musst be initialized later
+          //}
+
+          options.push(currentOption)
+        }
+
+
+        return options
+    }
+
+    function fetchPaymentData() {
+        state.isLoading = true
+        return Request.get(`${shopStore.state.shopUrl}/order/payment_providers_list`).then(async (resp)=>{
+            let data = await resp.json()
+            state.paymentData = _convertPayment(data)
+            state.isLoading = false
+        })
+    }
+
+
+    return {
+        state,
+        fetchPaymentData
+
+    }
+})

package/src/composables/shipping.js

@@ -0,0 +1,32 @@
+import {reactive} from 'vue'
+import {Request} from '@viur/vue-utils'
+import { removeUndefinedValues} from '../utils'
+
+import { useViurShopStore } from '../shop'
+
+export function useShipping() {
+    const shopStore = useViurShopStore()
+    const state = reactive({
+        isLoading:false,
+        isUpdating:false,
+        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
+            state.isLoading = false
+        })
+    }
+
+
+    return {
+        state,
+        fetchShippingData
+
+    }
+}

package/src/main.js

@@ -1,50 +1,44 @@
 // imports
 import { createPinia } from "pinia";
 import { createI18n } from "vue-i18n";
-import {
-  de_translations,
-  en_translations,
-} from "@viur/vue-components/translations/translations";
+import { getTranslations } from "./utils";
+import { de_translations, en_translations } from "@viur/vue-utils";
+import en from "./translations/en"
+import de from "./translations/de"
 
-import { useCartStore } from "./stores/cart";
-import createRouterInstance from "./router/index";
-import CartNode from "./components/cart/CartNode.vue";
-import CartLeaf from "./components/cart/CartLeaf.vue";
-// import { createApp } from "vue";
-// import bone from "@viur/vue-utils/bones/edit/bone.vue";
-// import Wrapper_nested from "@viur/vue-utils/bones/edit/wrapper_nested.vue";
+export { default as ViurShop } from "./Shop.vue";
 
-export { useCartStore, createRouterInstance };
-
-// export all main components
-export { default as ShopOrderStepper } from "./components/ShopOrderStepper.vue";
-export { default as ShopUserData } from "./components/ShopUserData.vue";
+const ViurShopComponents = {
+  async install(app,options) {
 
-export { default as CartView } from "./components/cart/CartView.vue";
-export { default as ExampleUsage } from "./components/order/process/ExampleUsage.vue";
-export { default as ConfirmView } from "./components/ShopOrderConfirm.vue";
-export { default as OrderComplete } from "./components/ShopOrderComplete.vue";
-// export { default as UserInformation } from "./components/order/information/UserInformation.vue";
-// export { default as UserInfoMulti } from "./components/order/information/UserInfoMulti.vue";
-export { default as SelectPaymentProvider } from "./components/order/process/SelectPaymentProvider.vue";
+    let defaultLocale = options?.defaultLocale?options.defaultLocale:'de'
+    let locale = options?.locale?options.locale:['de']
+    let fallback = options?.fallback?options.fallback:'en'
+    app.use(createPinia());
 
-const pinia = createPinia();
-const i18n = createI18n({
-  locale: "de",
-  fallbackLocale: "en",
-  messages: {
-    en: { ...en_translations },
-    de: { ...de_translations },
-  },
-});
+    let messages = {}
+    // fetch translations from server
+    let data = await getTranslations(locale)
+    for(const loc of locale){
+      if (loc === 'de'){
+        messages[loc] = {...data[loc], ...de_translations, ...de}
+      }else if (loc === 'en'){
+        messages[loc] = {...data[loc], ...en_translations, ...en}
+      }else{
+        messages[loc] = {...data[loc]}
+      }
+    }
 
-// Create a plugin to install all components
-const ViurShopComponents = {
-  install(app) {
-    app.use(pinia);
-    app.use(i18n);
+    // server_translations will be overwritten by utils. Both are overwritten by local shop translations
+    app.use(
+      createI18n({
+        locale: defaultLocale,
+        fallbackLocale: fallback,
+        messages: messages,
+      })
+    );
   },
 };
 
 // Export the plugin as default
-export default ViurShopComponents;
+export default ViurShopComponents;