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

package/old/stores/address.js

@@ -0,0 +1,122 @@
+import { reactive, computed, watch } from "vue";
+import { defineStore } from "pinia";
+import { struct2dict } from "../lib/utils";
+import { useCartStore } from "./cart";
+export const useAddressStore = defineStore("shop-address", () => {
+  const cartStore = useCartStore();
+
+  const state = reactive({
+    shopClient: null,
+    addressList: [],
+    active: {
+      billing: {},
+      shipping: {},
+    },
+    default: { billing: {}, shipping: {} },
+    structure: {},
+    clone: true,
+  });
+
+  const listByType = (type) => {
+    return state.addressList.filter((address) => address.address_type === type);
+  };
+
+  async function getStructure() {
+    try {
+      const structure = await state.shopClient.address_structure();
+
+      if (structure.structure) {
+        state.structure = struct2dict(structure.structure);
+      } else {
+        throw error;
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  async function init() {
+    return new Promise(async (resolve, reject) => {
+      if (!cartStore.state.isLoggedIn) {
+        reject("not logged in");
+      }
+      let addressList = [];
+      try {
+        addressList = await state.shopClient.address_list();
+        state.addressList = addressList;
+        await getStructure();
+        getDefault();
+        resolve([state.active.billing, state.active.shipping]);
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+
+  function getDefault(type = "billing") {
+    let list = listByType(type);
+
+    list.forEach((address) => {
+      if (address.is_default) {
+        state.default[type] = address;
+        state.active[type] = address;
+
+        if (state.clone) {
+          let temp = { ...address };
+          temp.address_type = "shipping";
+          state.active.shipping = temp;
+        }
+      }
+    });
+
+    if (!Object.keys(state.default[type]).length) {
+      state.active[type] = setValues(type);
+      if (state.clone) {
+        state.active.shipping = setValues("shipping");
+      }
+    }
+  }
+
+  function setValues(type) {
+    let structure = state.structure;
+    let skel = {};
+
+    Object.entries(structure).forEach(([boneName, boneValue]) => {
+      if (boneName === "customer") {
+        skel[boneName] = cartStore.state.customer.key;
+      } else if (boneName === "address_type") {
+        skel[boneName] = type;
+      } else {
+        skel[boneName] = boneValue.emptyvalue;
+      }
+    });
+
+    return skel;
+  }
+
+  function getList(type = "billing") {
+    return listByType(type);
+  }
+
+  watch(
+    () => state.clone,
+    (newValue, oldValue) => {
+      if (newValue) {
+        let temp = { ...state.active.billing };
+        temp.address_type = "shipping";
+        state.active.shipping = { ...temp };
+      } else {
+        getDefault("shipping");
+      }
+    },
+  );
+
+  return {
+    state,
+    init,
+    setValues,
+    getDefault,
+    getStructure,
+    getList,
+  };
+});

package/old/stores/cart.js

@@ -0,0 +1,266 @@
+import { reactive } from "vue";
+import { useUrlSearchParams } from '@vueuse/core'
+import { defineStore } from "pinia";
+import { ViURShopClient } from "../client";
+import { useMessageStore } from "./message";
+import { useOrderStore } from "./order";
+import { useAddressStore } from "./address";
+
+/*
+TODO:
+Error Handling. A UI Component (../components/generic/alerts/ShopAlert.vue)
+should be triggered when state.errors has an entry.
+Every Error in this store should be routed into state.errors
+ */
+export const useCartStore = defineStore("shop-cart", () => {
+  const messageStore = useMessageStore();
+  const orderStore = useOrderStore();
+  const addressStore = useAddressStore();
+
+  const state = reactive({
+    shopClient: null,
+    shopModuleName: "shop",
+    currentbasketKey:null,
+    basket: {},
+    childrenByNode: {},
+    paymentProviders: {},
+    selectedPaymentProvider: {},
+    selectedPaymentProviderName: "",
+    customer: {},
+    isLoggedIn: false,
+    isReady: false,
+    isFetching: false,
+    hasError: false,
+    placeholder: "",
+    freeze: false,
+    onlyUser: true,
+  });
+
+  function setConfig({
+    shopModuleName = "shop",
+    placeholder = "",
+    onlyUser = true,
+  } = {}) {
+    /* function set set initial states */
+    state.shopModuleName = shopModuleName; // change default module shop to something else
+    state.placeholder = placeholder; // define image placeholder for missing images
+    state.onlyUser = onlyUser; // define order with or without userAccount
+    state.shopClient =
+      addressStore.state.shopClient =
+      orderStore.state.shopClient =
+        new ViURShopClient({
+          host_url: import.meta.env.VITE_API_URL
+            ? import.meta.env.VITE_API_URL
+            : window.location.origin, //use vite config, because all utils requests are using this.
+          shop_module: state.shopModuleName, //change default module shop to something else
+        });
+
+    //get Orderkey from url, to continue orderprozess after reload
+    const params = useUrlSearchParams('hash')
+    if (Object.keys(params).includes('order')){
+      orderStore.state.currentOrderkey = params['order']
+    }    
+  }
+
+  async function init(update = false) {
+    console.log("Init Shop");
+    if (state.isFetching) {
+      return false; // currently we fetch data
+    }
+    state.isFetching = true;
+    if (state.isReady && !update) {
+      //block datafetching if shop is ready and no forced update is needed
+      return true;
+    }
+
+    try {
+      const customer = await getCustomer();
+      const loadOrder = await orderStore.getOrder();
+      const shopRequests = await Promise.all([
+        addressStore.init(),
+        getBasket()
+      ]);
+
+      state.isReady = true;
+      console.log("%c Shopdata is ready", "color:lime");
+    } catch (error) {
+      state.isReady = false;
+      state.hasError = true;
+      console.error(
+        "Error: Cant Init because of Error in a essential Shoprequest",
+        error,
+      );
+      messageStore.state.errors.push({
+        msg: error,
+        variant: "danger",
+        iconName: "x-lg",
+        id: new Date().getTime(),
+        duration: "Infinity",
+        closeable: false,
+      });
+    }
+    state.isFetching = false;
+  }
+
+  async function getCustomer() {
+    return new Promise(async (resolve, reject) => {
+      try {
+        const resp = await state.shopClient.user_view();
+        state.customer = resp;
+        state.isLoggedIn = true;
+        resolve(resp);
+      } catch (error) {
+        state.isLoggedIn = false;
+        state.customer = {};
+        reject(error);
+      }
+    });
+  }
+  async function getBasket(key=null) {
+    return new Promise(async (resolve, reject) => {
+      if (!key && orderStore.state.currentOrder?.['cart']?.['dest']?.['key']){
+        key = orderStore.state.currentOrder['cart']['dest']['key']
+      }
+      try {
+        const resp = await state.shopClient.cart_list({ cart_key: key });
+        state.basket = resp[0];
+        console.log(orderStore.state.currentOrder)
+        console.log(key)
+        console.log(state.basket)
+        state.currentbasketKey = state.basket?.['parentrepo']?state.basket['parentrepo']:state.basket['key']
+        resolve(state.basket);
+      } catch (error) {
+        state.basket = []; //reset basket on error
+        reject(error);
+      }
+    });
+  }
+
+  async function getOrderCart(){
+
+  }
+
+  async function getChildren(parentKey) {
+    return await state.shopClient.cart_list({ cart_key: parentKey });
+  }
+
+  async function addToCart(articleKey, cartKey) {
+    let resp = await state.shopClient.article_add({
+      article_key: articleKey,
+      parent_cart_key: cartKey,
+    });
+    state.basket = await getChildren(cartKey);
+    state.currentbasketKey = state.basket['parentrepo']
+  }
+
+  async function removeItem(articleKey, cartKey) {
+    try {
+      let resp = await state.shopClient.article_remove({
+        article_key: articleKey,
+        parent_cart_key: cartKey,
+      });
+      if (resp === null) {
+        await updateCart();
+      } else {
+        throw resp;
+      }
+    } catch (error) {
+      console.log("remove Resp", error); //TODO: Errorhandling as soon as shop module works again
+    }
+  }
+
+  async function updateItem(articleKey, cartKey, quantity) {
+    const resp = await state.shopClient.article_update({
+      article_key: articleKey,
+      parent_cart_key: cartKey,
+      quantity: quantity,
+      quantity_mode: "replace",
+    });
+
+    if (resp) {
+      await updateCart();
+    }
+
+    console.log("update Resp", resp); //TODO: Errorhandling as soon as shop module works again
+  }
+
+  async function updateCart() {
+    state.basket = {};
+    await getBasket();
+  }
+
+  async function addDiscount(code) {
+    await state.shopClient.discount_add({ code });
+  }
+
+  async function update({
+    key,
+    type,
+    name,
+    customerComment,
+    shippingAddress,
+    shipping,
+    discount,
+  } = {}) {
+    if (!key) {
+      key = state.basket.key;
+    }
+
+    let params = {
+      cart_key: key,
+      cart_type: type,
+      name: name,
+      customer_comment: customerComment,
+      shipping_address_key: shippingAddress,
+      shipping_key: shipping,
+      discount_key: discount,
+    };
+
+    try {
+      const resp = await state.shopClient.cart_update(params);
+      if (resp) {
+        console.log("cart update resp", resp);
+      } else {
+        throw resp;
+      }
+    } catch (error) {
+      console.error("cart.update error", error);
+    }
+  }
+
+  // core rc2 needed to work with all parameters
+  async function addNode(
+    parentCart,
+    cartType = "whishlist",
+    cartName = undefined,
+    comment = undefined,
+    shipping_key = undefined,
+    shipping_address_key = undefined,
+    discount_key = undefined,
+  ) {
+    return await state.shopClient.cart_add({
+      parent_cart_key: parentCart,
+      cart_type: cartType, // "basket" for main cart, "whishlist" for everything else
+      name: cartName,
+      customer_comment: comment,
+      shipping_address_key: shipping_address_key,
+      shipping_key: shipping_key,
+      discount_key: discount_key,
+    });
+  }
+
+
+  return {
+    state,
+    setConfig,
+    addToCart,
+    removeItem,
+    updateItem,
+    init,
+    getChildren,
+    addDiscount,
+    addNode,
+    getBasket,
+    update,
+  };
+});

package/old/stores/message.js

@@ -0,0 +1,21 @@
+import { reactive, computed } from "vue";
+import { defineStore } from "pinia";
+
+export const useMessageStore = defineStore("shop-message", () => {
+  const state = reactive({
+    errors: [],
+    blacklist: [],
+  });
+
+  const errorCounter = computed(() => state.errors.length);
+
+  function reset() {
+    state.errors = [];
+  }
+
+  return {
+    state,
+    reset,
+    errorCounter,
+  };
+});

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
+    }
+})