@viur/shop-components 0.0.1-dev.8 → 0.1.0

package/src/shop.js

@@ -0,0 +1,252 @@
+
+import { reactive, computed, watch, shallowRef } from "vue";
+import {ShopCart, ShopUserDataGuest, ShopShippingMethod, ShopPaymentProvider, ShopOrderComplete, ShopOrderConfirm} from './Steps/index'
+import { defineStore } from "pinia";
+import { useUrlSearchParams } from '@vueuse/core'
+
+import { Request } from "@viur/vue-utils";
+
+export const useViurShopStore = defineStore("viurshopStore", () => {
+    const state = reactive({
+        //shop module name
+        showNodes:false,
+        language:"de",
+        moduleName:'shop',
+        hostUrl: computed(()=>(import.meta.env.VITE_API_URL ? import.meta.env.VITE_API_URL : window.location.origin)),
+        shopUrl:computed(()=>{
+            return `${state.hostUrl}/json/${state.moduleName}`
+        }),
+        shopApiUrl:computed(()=>{
+            return `${state.hostUrl}/json/${state.moduleName}/api`
+        }),
+        debug:false,
+        //default Tabs
+        tabs:{
+            cart: {
+                component: shallowRef(ShopCart),
+                displayName: "Warenkorb",
+                icon: { name: "cart3" },
+                active:computed(()=>!state.order?.['is_checkout_in_progress'] && !state.order?.['is_ordered']),  //active if no orderkey or checkout not startet
+                validating:false,
+                valid:false
+            },
+            userdata: {
+                component: shallowRef(ShopUserDataGuest),
+                displayName: "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
+                validating:false,
+                valid:false
+            },
+            shippingmethod: {
+                component: shallowRef(ShopShippingMethod),
+                displayName: "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
+                validating:false,
+                valid:false
+            },
+            paymentprovider: {
+                component: shallowRef(ShopPaymentProvider),
+                displayName: "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
+                validating:false,
+                valid:false
+            },
+            confirm: {
+                component: shallowRef(ShopOrderConfirm),
+                displayName: "Bestellung prüfen",
+                icon: { name: "clipboard-check" },
+                active:computed(()=>!state.order?.['is_paid'] && state.canCheckout?.['status']), // active if canCheckout and not already paid
+                validating:false,
+                valid:false
+            },
+            complete: {
+                component: shallowRef(ShopOrderComplete),
+                displayName: "Bestellung Abgeschlossen",
+                icon: { name: "bag-check" },
+                active:computed(()=>state.order?.['is_ordered']), // active if ordered
+                validating:false,
+                valid:false
+            },
+        },
+        // active Tab
+        currentTab: "cart",  // set cart as default to avoid console errors
+        // tabname to index mapping
+        tabIndexMap: computed(()=>{
+            let map = {}
+            for (const [index, item] of Object.entries(Object.keys(state.tabs))){
+                map[[item]] = parseInt(index)
+            }
+            return map
+        }),
+        // index to tabname mapping
+        indexTabMap: computed(()=>{
+            let map = {}
+            for (const [index, item] of Object.entries(Object.keys(state.tabs))){
+                map[[index]] = item
+            }
+            return map
+        }),
+        // length of stepper
+        stepperLength:computed(()=>{
+            return Object.keys(state.tabs).length
+        }),
+
+        // SHOP DATA
+        cartList:[], //articles in cart
+        cartRoot:null, //actual cart rootnode entry ( used for shipping etc)
+        order:null, // actual order entry ( used for billing etc.)
+        orderKey:null, // key of the order, maybe injected from ?order param
+
+        //CART READY
+        cartReady:false,
+        orderReady:false,
+        canCheckout:null,
+        canOrder:null,
+
+        //Address Structure
+        addressStructure:null,
+        paymentMeta:null,
+
+
+        //checkout
+        paymentProviderData:null
+
+    })
+
+    function addTab({name, component, displayname, iconname, iconlibrary,active})
+    {
+        if(Object.keys(state.tabs).includes(name)){
+            state.tabs[name] = {
+                component: component?shallowRef(component):state.tabs[name].component,
+                displayName: displayname?displayname:state.tabs[name].displayName,
+                icon: {
+                    name: iconname?iconname:state.tabs[name].iconname,
+                    library:iconlibrary?iconlibrary:state.tabs[name].iconlibrary
+                },
+                active:active?active:state.tabs[name].active
+            }
+        }else{
+            state.tabs[name] = {
+                component: shallowRef(component),
+                displayName: displayname,
+                icon: { name: iconname, library:iconlibrary},
+                active:active
+            }
+        }
+
+
+    }
+
+    function removeTab(name){
+        delete state.tabs[name]
+    }
+
+
+
+    function navigateToTab(name){
+        // navigate to Tab
+        state.currentTab = name
+
+        const params = useUrlSearchParams('hash')
+        params['step'] = state.currentTab
+    }
+
+    function navigateToNext(){
+        // shorthand for next Tab
+        if (state.tabIndexMap[state.currentTab] === state.stepperLength-1) return false
+        navigateToTab(state.indexTabMap[state.tabIndexMap[state.currentTab]+1])
+    }
+
+    function navigateToPrevious(){
+        // shorthand for previous Tab
+        if (state.tabIndexMap[state.currentTab] === 0) return false
+        navigateToTab(state.indexTabMap[state.tabIndexMap[state.currentTab]-1])
+    }
+
+    function fetchAddressStructure(){
+        Request.get(`${state.shopUrl}/address/add`).then(async (resp)=>{
+            let data = await resp.json()
+            state.addressStructure = data['structure']
+        })
+    }
+
+    function fetchPaymentMeta(){
+        Request.get(`${state.shopUrl}/order/payment_providers_list`).then(async (resp)=>{
+            let data = await resp.json()
+            state.paymentMeta = data
+        })
+    }
+
+    function fetchMetaData(){
+        fetchAddressStructure()
+        fetchPaymentMeta()
+    }
+
+    function checkout(){
+        //request Payment
+        return new Promise((resolve,reject)=>{
+            Request.post(`${state.shopUrl}/order/checkout_start`,{dataObj:{
+                order_key:state.orderKey
+            }}).then(async (resp)=>{
+                let data = await resp.json()
+                state.paymentProviderData = data['payment']
+
+                if (!data['payment']){
+                    try{
+                        await checkoutOrder() // direct Checkout
+                        resolve()
+                    } catch(error){
+                        reject(error)
+                    }
+                }else{
+                    resolve()
+                }
+            }).catch(error=>{
+                reject(error)
+            })
+        })
+    }
+
+    function checkoutOrder(){
+        //payment is finished
+        return new Promise((resolve,reject)=>{
+            Request.post(`${state.shopUrl}/order/checkout_order`,{dataObj:{
+                order_key:state.orderKey
+            }}).then(async (resp)=>{
+                let data = await resp.json()
+                if (!resp.ok){
+                    reject(data)
+                } else {
+                    state.order = data['skel']
+                    state.paymentProviderData = data['payment']
+
+                    if(state.order?.['is_ordered']){
+                        // order is finished
+                        navigateToTab('complete')
+                    }
+                    resolve(data)
+                }
+
+
+            }).catch(error=>{
+                reject(error)
+            })
+        })
+    }
+
+    return {
+        state,
+        navigateToTab,
+        navigateToNext,
+        navigateToPrevious,
+        fetchMetaData,
+        checkout,
+        checkoutOrder,
+        addTab,
+        removeTab
+
+    }
+})

package/src/translations/de.js

@@ -0,0 +1,36 @@
+export default {
+    actions:{
+        add: "Hinzufügen",
+        cancel: "Abbrechen",
+        delete: "Löschen"
+    },
+    shop:{
+        "check_order":"Bestellung prüfen",
+        "order_pay":"Zahlungspflichtig bestellen",
+        "order_number":"Ihre Bestellnummer",
+        "order_thanks":"Vielen Dank für Ihre Bestellung",
+        "order_message":"Wir haben Ihre Bestellung erhalten und werden diese schenllstmöglich bearbeiten.<br /> Sie erhalten in wenigen Minuten eine Bestätigung per E-Mail.",
+        "order_paid":"Ihre Zahlung ist bei uns eingegangen.",
+        "order_ready_to_ship":"Ihre Bestellung ist fertig für den Versand.",
+        "cart_empty":"Der Warenkorb ist leer.",
+        "order_summary":"Bestellzusammenfassung",
+        "deliverytime":"Lieferzeit",
+        "day": "Tag | Tage",
+        "unit_price":"Stückpreis",
+        "total_price":"Gesamtpreis",
+        "articlenumber":"Artikelnummer",
+        "pay":"Bezahlen",
+        "add_discount":"Rabattcode hinzufügen",
+        "use_shipping_as_billing_address": "Verwende Lieferadresse als Rechnungsadresse",
+        "no_valid_shipping_found":"Keine passenden Versandarten gefunden.",
+        "error_message":"Eine Fehler ist aufgetreten.",
+        "free_shipping":"Kostenlos"
+    },
+    messages:{
+        loading:"Daten werden abgefragt...",
+        updating:"Daten werden aktualisiert...",
+        wait_for_payment:"warte auf Zahlung...",
+        remove_article_from_cart:"Wollen sie den Artikel wirklich entfernen?",
+        order_check_later:"Sie können Ihre Bestellung am Ende noch einmal überprüfen."
+    }
+}

package/src/translations/en.js

@@ -0,0 +1,5 @@
+export default {
+    actions:{
+        add: "Add"
+    }
+}

package/src/utils.js

@@ -0,0 +1,56 @@
+import {Request} from '@viur/vue-utils'
+
+export function uuid() {
+  return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c) =>
+    (
+      +c ^
+      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))
+    ).toString(16),
+  );
+}
+
+export function struct2dict(structure) {
+  if (!Array.isArray(structure)) {
+    return structure;
+  }
+
+  let result = {};
+  structure.forEach((bone) => (result[bone[0]] = bone[1]));
+
+  return result;
+}
+
+export async function getTranslations(languages=["de"]){
+  // fetch translations from server
+  let retVal = languages.reduce((acc,item)=>{acc[item]={}; return acc;},{})
+  try {
+    let translations = await Request.get("/json/_translation/get_public",{dataObj:{
+        languages:languages
+      }})
+    const data = await translations.json()
+    for (let country in data) {
+      data[country] = Object.fromEntries(
+        Object.entries(data[country]).map(
+            ([key, value], idx) => [key, value.replaceAll('{{', '{').replaceAll('}}', '}').replace(/([@$|])/g, '{\'$1\'}')],
+        ),
+      )
+    }
+    retVal = data
+  }catch(error){
+    console.log("No Translation from server", error)
+  }
+  return retVal
+}
+
+export function getImage(image) {
+  if (image !== undefined) return Request.downloadUrlFor(image);
+
+  return 'PLACEHOLDER';
+}
+
+export function removeUndefinedValues(obj) {
+  return Object.fromEntries(
+      Object.entries(obj)
+          .filter(([key, value]) => value !== undefined && value !== null),
+  );
+}

package/vite.config.js

@@ -0,0 +1,51 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag.startsWith("sl-"),
+        },
+      },
+    }),
+  ],
+  build: {
+    lib: {
+      entry: "./src/main.js", // Adjust the entry point as needed
+      name: "ViurShopComponents",
+      fileName: (format) => `viur-shop-components.${format}.js`,
+    },
+    cssCodeSplit: false,
+    rollupOptions: {
+      external: [
+        "vue",
+        "pinia",
+        "@viur/shoelace",
+        "@viur/ignite",
+        "@viur/vue-utils",
+        "vue-router",
+        "@ckeditor/ckeditor5-vue",
+        "@ckeditor/ckeditor5-build-classic",
+        "@viur/ckeditor5-build-classic",
+      ],
+      output: {
+        assetFileNames: (assetInfo) => {
+          return assetInfo.name;
+        },
+        globals: {
+          vue: "Vue",
+          pinia: "Pinia",
+          "@viur/shoelace": "ViurShoelace",
+          "@viur/ignite": "ViurIgnite",
+          "vue-router": "VueRouter",
+          "@ckeditor/ckeditor5-vue": "CKEditor5Vue",
+          "@ckeditor/ckeditor5-build-classic": "ClassicEditor",
+          "@viur/ckeditor5-build-classic": "ViurCkeditor",
+          "@viur/vue-utils": "ViurVueUtils",
+        },
+      },
+    },
+  },
+});