@viur/shop-components 0.0.1-dev.9 → 0.1.1

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,189 @@
+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
+    }
+
+    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;
+
+      if (shopStore.state.order != null && shopStore.order?.cart?.key.length) {
+        shopStore.state.cartRoot = {};
+        shopStore.state.cartRoot = shopStore.state.order.cart;
+
+        return fetchCartItems(shopStore.state.order.cart.key).then(() => {
+          state.isLoading = false;
+          shopStore.state.cartReady = 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_key,
+                    cart_type,
+                    name,
+                    customer_comment,
+                    shipping_address_key,
+                    shipping_key,
+                    discount_key,
+                    project_data
+                } = {}){
+
+        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:cart_key ? cart_key : shopStore.state.cartRoot['key'],
+        }
+
+        if (project_data) {
+          data.project_data = JSON.stringify(project_data)
+        }
+
+        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()
+        })
+    }
+
+    function addDiscount(code) {
+        return new Promise((resolve, reject) => {
+          Request.securePost(`${shopStore.state.shopApiUrl}/discount_add`, {
+            dataObj: {
+              code: code,
+            },
+          })
+        .then(async (resp) => {
+            let data = await resp.json();
+            fetchCart()
+            console.log("discount debug", data);
+            resolve()
+        })
+        .catch((error) => {
+            reject(error);
+        });
+    });
+    }
+
+    function removeDiscount() {
+        return new Promise((resolve, reject) => {
+          Request.securePost(`${shopStore.state.shopApiUrl}/discount_remove`, {
+            dataObj: {
+                discount_key: shopStore.state.cartRoot.discount.dest.key,
+            },
+          })
+        .then(async (resp) => {
+            let data = await resp.json();
+            fetchCart()
+            console.log("discount debug", data);
+            resolve()
+        })
+        .catch((error) => {
+            reject(error);
+        });
+    });
+    }
+
+
+
+    return {
+        state,
+        fetchCartRoot,
+        fetchCartItems,
+        fetchCart,
+        updateCart,
+        addItem,
+        removeItem,
+        createCart,
+        getValue,
+        addDiscount,
+        removeDiscount
+    }
+}

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,40 @@
+import {reactive} from 'vue'
+import {Request} from '@viur/vue-utils'
+import { removeUndefinedValues} from '../utils'
+import { useI18n } from 'vue-i18n'
+import { useViurShopStore } from '../shop'
+
+export function useShipping() {
+    const i18n = useI18n()
+    const shopStore = useViurShopStore()
+    const defaultErrorMessage = i18n.t('shop.error_message')
+    const state = reactive({
+        isLoading:false,
+        isUpdating:false,
+        hasError:false,
+        errorMessage: defaultErrorMessage,
+        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
+            if (state.shippingData.length===0){
+                state.hasError = true
+                state.errorMessage = i18n.t("shop.no_valid_shipping_found")
+            }
+            state.isLoading = false
+        })
+    }
+
+
+    return {
+        state,
+        fetchShippingData
+
+    }
+}

package/src/main.js

@@ -0,0 +1,44 @@
+// imports
+import { createPinia } from "pinia";
+import { createI18n } from "vue-i18n";
+import { getTranslations } from "./utils";
+import { de_translations, en_translations } from "@viur/vue-utils";
+import en from "./translations/en"
+import de from "./translations/de"
+
+export { default as ViurShop } from "./Shop.vue";
+
+const ViurShopComponents = {
+  async install(app,options) {
+
+    let defaultLocale = options?.defaultLocale?options.defaultLocale:'de'
+    let locale = options?.locale?options.locale:['de']
+    let fallback = options?.fallback?options.fallback:'en'
+    app.use(createPinia());
+
+    let messages = {}
+    // fetch translations from server
+    let data = await getTranslations(locale)
+    for(const loc of locale){
+      if (loc === 'de'){
+        messages[loc] = { ...de_translations, ...de, ...data[loc]}
+      }else if (loc === 'en'){
+        messages[loc] = {...en_translations, ...en, ...data[loc]}
+      }else{
+        messages[loc] = {...data[loc]}
+      }
+    }
+
+    // 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;