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

package/src/components/ui/userdata/AddForm.vue

@@ -1,125 +0,0 @@
-<template>
-  <sl-spinner v-if="state.isLoading"></sl-spinner>
-  <ViForm
-    ref="addForm"
-    module="shop/address"
-    action="add"
-    :useCategories="false"
-    :layout="layout ? layout : DefaultLayout"
-    :values="modelValue"
-    :skel="
-      mode === 'shipping'
-        ? cartStore.state.activeShippingAddress
-        : cartStore.state.activeBillingAddress
-    "
-    @change="updateValues"
-  >
-  </ViForm>
-
-  <sl-bar>
-    <div slot="left">
-      <!-- BUTTON NUR PLATZHALTER FÜR TESTS -->
-      <sl-button
-        variant="success"
-        @click.stop.prevent="sendForm"
-        :loading="state.isSending"
-      >
-        <sl-icon name="floppy2" slot="prefix"></sl-icon>
-        {{
-          $t("actions.add").charAt(0).toUpperCase() + $t("actions.add").slice(1)
-        }}
-      </sl-button>
-    </div>
-  </sl-bar>
-</template>
-
-<script setup>
-import { reactive, ref, computed, onMounted } from "vue";
-import ViForm from "@viur/vue-utils/forms/ViForm.vue";
-import DefaultLayout from "./DefaultLayout.vue";
-import { useCartStore } from "../../../stores/cart";
-
-const props = defineProps({
-  layout: { required: false },
-  customer: { type: Object, required: true },
-  mode: { type: String, default: "shipping" },
-  modelValue: { type: Object },
-});
-const emit = defineEmits(["update:modelValue", "addSuccess"]);
-const cartStore = useCartStore();
-const addForm = ref(null);
-const state = reactive({
-  isLoading: computed(() => (addForm.value ? addForm.value.loading : true)),
-  isSending: false,
-  wasSuccess: false,
-  user: {},
-  skel: computed(() => {
-    if (props.mode === "shipping") return cartStore.state.activeShippingAddress;
-    else return cartStore.state.activeBillingAddress;
-  }),
-});
-
-function sendForm() {
-  if (props.mode === "shipping") {
-    cartStore.state.activeShippingAddress = addForm.value.state.skel;
-  } else {
-    cartStore.state.activeBillingAddress = addForm.value.state.skel;
-  }
-
-  state.isSending = true;
-  addForm.value.sendData().then(async (resp) => {
-    let data = await resp.json();
-    state.isSending = false;
-    if (data["action"] === "addSuccess") {
-      emit("addSuccess", {
-        show: true,
-        msg: "Erfolg!",
-        variant: "success",
-        icon: "check2-circle",
-      });
-    }
-  });
-}
-
-function setSkelValues(dict = {}) {
-  let structure = cartStore.state.structure.address;
-  let skel = {};
-
-  Object.keys(structure).forEach((boneName) => {
-    if (boneName === "customer") {
-      skel[boneName] = state.user.key;
-      return;
-    }
-    skel[boneName] = null;
-  });
-
-  Object.entries(dict).forEach(([boneName, boneValue]) => {
-    skel[boneName] = boneValue;
-  });
-
-  return skel;
-}
-
-function updateValues() {
-  emit("update:modelValue", addForm.value.state.skel);
-}
-
-// onBeforeMount(() => {
-//   cartStore.getAddressStructure();
-
-//   // state.skel = setSkelValues({
-//   //   address_type: "shipping",
-//   //   customer: props.customer.key,
-//   // });
-// });
-onMounted(() => {
-  cartStore.getAddressStructure();
-  // updateValues();
-  // state.skel = setSkelValues({
-  //   address_type: "shipping",
-  //   customer: props.customer.key,
-  // });
-});
-</script>
-
-<style scoped></style>

package/src/components/ui/userdata/AddressBox.vue

@@ -1,117 +0,0 @@
-<template>
-  <div class="viur-shop-address-box">
-    <select-address
-      v-if="addressSelection"
-      :address-list="state.addressList"
-      v-model="state.activeAddress"
-    >
-    </select-address>
-    {{state.addressList.length}}
-    <br>
-    {{cartStore.state.billingAddressList.length}}
-    <!-- debugging -->
-    <!-- {{ mode === "billing" ? cartStore.state.activeBillingAddress : "" }} -->
-    <!-- {{ mode === "billing" ? "" : cartStore.state.activeShippingAddress }} -->
-    <!-- <pre>{{ customer }}</pre> -->
-    <div class="viur-shop-address-box-preview" v-if="state.address">
-      <span>Ausgewählte Adresse :</span>
-      <br>
-      {{ state.address?.street_name }} {{ state.address?.street_number }}<br />
-      {{ state.address?.zip_code }} {{ state.address?.city }}
-      <br />
-      {{ state.address?.country }}
-      <br />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {
-  reactive,
-  computed,
-  onBeforeMount,
-  watch,
-  onUpdated,
-  onUnmounted,
-} from "vue";
-import { useCartStore } from "../../../stores/cart";
-import SelectAddress from "./SelectAddress.vue";
-
-const props = defineProps({
-  mode: { type: String, default: "billing" },
-  addressSelection: { type: Boolean, default: false },
-  modelValue: { type: Object },
-});
-
-const emit = defineEmits(["update:modelValue"]);
-
-const cartStore = useCartStore();
-
-const state = reactive({
-  addressList: computed(() =>
-    props.mode === "billing"
-      ? cartStore.state.billingAddressList
-      : cartStore.state.shippingAddressList,
-  ),
-  activeAddress: "",
-  address: computed(() => {
-    if (!state.activeAddress) return {};
-
-    return state.addressList.filter(
-      (address) => address.key === state.activeAddress,
-    )[0];
-  }),
-});
-
-function getDefaultAddress() {
-  if (props.mode === "billing") {
-    state.activeAddress = cartStore.state.activeBillingAddress.key
-      ? cartStore.state.activeBillingAddress.key
-      : "";
-  } else {
-    state.activeAddress = cartStore.state.activeShippingAddress.key
-      ? cartStore.state.activeShippingAddress.key
-      : "";
-  }
-}
-
-watch(
-  () => state.address,
-  (newAddress) => {
-    if (props.mode === "billing") {
-      cartStore.state.activeBillingAddress = newAddress;
-    } else cartStore.state.activeShippingAddress = newAddress;
-  },
-);
-
-watch(
-  () => cartStore.state.activeBillingAddress,
-  (newValue, oldValue) => {
-    state.activeAddress = newValue.key;
-  },
-);
-
-watch(
-  () => cartStore.state.activeShippingAddress,
-  (newValue, oldValue) => {
-    state.activeAddress = newValue.key;
-  },
-);
-onBeforeMount(() => {
-  getDefaultAddress();
-});
-
-onUnmounted(() => {
-  state.activeAddress = "";
-});
-
-onUpdated(() => {
-  getDefaultAddress();
-});
-</script>
-
-<style scoped>
-.viur-shop-address-box-preview{
-  margin: var(--sl-spacing-medium) 0;
-}
-</style>

package/src/router/index.js

@@ -1,103 +0,0 @@
-// @ts-nocheck
-import { createRouter, createWebHashHistory } from "vue-router";
-import ViewMissing from "../views/ViewMissing.vue";
-
-const default_routes = [
-  {
-    path: "/:pathMatch(.*)*",
-    name: "view_missing",
-    component: ViewMissing,
-  },
-  {
-    path: "/shop/category/:identifier",
-    name: "CategoryView",
-    component: () => import("../components/order/category/CategoryView.vue"),
-  },
-  {
-    path: "/shop/item/:item",
-    name: "itemView",
-    component: () => import("../components/order/item/ItemView.vue"),
-  },
-  {
-    path: "/shop/cart/view",
-    name: "CartView",
-    component: () => import("../components/cart/CartView.vue"),
-  },
-  {
-    path: "/shop/order/",
-    name: "OrderView",
-    component: () => import("../components/order/process/ExampleUsage.vue"),
-  },
-  {
-    path: "/shop/order/confirm",
-    name: "ConfirmView",
-    component: () => import("../components/ShopOrderConfirm.vue"),
-  },
-];4
-
-function createRouterInstance(routes, replace = false) {
-  let newRoutes = [];
-  if (replace) {
-    newRoutes = routes;
-  } else {
-    newRoutes = routes.concat(default_routes);
-  }
-
-  const router = createRouter({
-    // @ts-ignore
-    history: createWebHashHistory(import.meta.env.BASE_URL),
-    routes: newRoutes,
-  });
-
-  // router.afterEach((to, from) => {
-  //   //useUserStore().addAction();
-  // });
-
-  // router.beforeEach((to, from, next) => {
-  //   const contextStore = useContextStore();
-  //   let localContext = {};
-  //   let handlerId = to.query["_"]?.toString();
-  //   if (!handlerId) next();
-  //   if (Object.keys(contextStore.state.localContext).includes(handlerId)) {
-  //     localContext = contextStore.state.localContext[handlerId];
-  //   }
-  //   let newQuery = {
-  //     ...contextStore.state.globalContext,
-  //     ...localContext,
-  //     ...to.query,
-  //   };
-  //   if (
-  //     Object.keys(to.query).every(
-  //       (key) =>
-  //         to.query[key] === newQuery[key] &&
-  //         to.query.hasOwnProperty(key) &&
-  //         newQuery.hasOwnProperty(key),
-  //     ) &&
-  //     Object.keys(newQuery).every(
-  //       (key) =>
-  //         to.query[key] === newQuery[key] &&
-  //         to.query.hasOwnProperty(key) &&
-  //         newQuery.hasOwnProperty(key),
-  //     )
-  //   ) {
-  //     //disabled because of to much context copy and updates
-  //     // Writes query to context
-  //     /*
-  //     for (const [k, v] of Object.entries(to.query)) {
-  //       if (k.startsWith("_")) continue
-  //       if (Object.keys(contextStore.state.localContext).includes(handlerId)) {
-  //         contextStore.state.localContext[handlerId][k] = v
-  //       } else {
-  //         contextStore.state.localContext[handlerId] = { [k]: v }
-  //       }
-  //     }*/
-  //     next(); // no change
-  //   } else {
-  //     to.query = newQuery;
-  //     next(to);
-  //   }
-  // });
-  return router;
-}
-
-export default createRouterInstance;

package/src/stores/cart.js

@@ -1,336 +0,0 @@
-import { reactive, computed, watch } from "vue";
-import { defineStore } from "pinia";
-import { ViURShopClient } from "@viur/viur-shop-client";
-
-export const useCartStore = defineStore("cartstore", () => {
-  const shopClient = new ViURShopClient({
-    host_url:
-      window.location.origin === "http://localhost:8081"
-        ? "http://localhost:8080"
-        : window.location.origin,
-  });
-  let isFetching = false;
-  const waitForFetching = [];
-  const waitForFetchingResolver = [];
-  const state = reactive({
-    basketRootNode: {},
-    basket: [],
-    wishlistRootNodes: [],
-    childrenByNode: {},
-    structure: { address: {}, cart: {} },
-    paymentProviders: {},
-    billingAddressList: [],
-    shippingAddressList: [],
-    cloneBilling: true,
-    activeBillingAddress: {},
-    activeShippingAddress: {},
-    selectedPaymentProvider: {},
-    selectedPaymentProviderName: "",
-    customer: {},
-    isLoggedIn: false,
-    placeholder: "",
-  });
-
-  async function init(placeholder = "") {
-    if (!isFetching) {
-      isFetching = true;
-      await getRootNodes();
-      await getCustomer();
-      await getAddress();
-      await getBasket();
-
-      isFetching = false;
-      for (const waiter of waitForFetchingResolver) {
-        waiter();
-      }
-      waitForFetchingResolver.splice(0, waitForFetchingResolver.length);
-      waitForFetching.splice(0, waitForFetchingResolver.length);
-    } else {
-      const p = new Promise((resolve, reject) => {
-        waitForFetchingResolver.push(resolve);
-      });
-      waitForFetching.push(p);
-      return p;
-    }
-    state.placeholder = placeholder;
-  }
-
-  async function getCustomer() {
-    try {
-      const resp = await shopClient.user_view();
-      state.customer = resp;
-      state.isLoggedIn = true;
-    } catch (e) {
-      state.isLoggedIn = false;
-    }
-
-    console.log("passiert", state.customer);
-  }
-  async function getBasket() {
-    state.basket = await shopClient.basket_list();
-  }
-
-  async function getChildren(parentKey) {
-    return await shopClient.cart_list({ cart_key: parentKey });
-  }
-
-  async function getRootNodes() {
-    let resp = await shopClient.cart_list();
-
-    resp.forEach(async (rootNode) => {
-      if (rootNode.is_root_node) {
-        if (rootNode.cart_type === "basket") {
-          state.basketRootNode = rootNode;
-          const rootChildren = await getChildren(rootNode.key);
-          state.childrenByNode[rootNode.key] = rootChildren;
-        } else {
-          state.whishlistRootNodes.push(rootNode);
-        }
-      }
-    });
-  }
-
-  async function addToCart(articleKey, cartKey) {
-    let resp = await shopClient.article_add({
-      article_key: articleKey,
-      parent_cart_key: cartKey,
-    });
-
-    // await updateCart(cartKey);
-    console.log("addToCart", resp); //TODO: Errorhandling as soon as shop module works again
-  }
-
-  async function getArticleView(articleKey, cartKey) {
-    let article = await shopClient.article_view({
-      article_key: articleKey,
-      parent_cart_key: cartKey,
-    });
-
-    console.log("getArticleView", article); // ? Talk about necessarity
-  }
-
-  async function removeItem(articleKey, cartKey) {
-    let resp = await shopClient.article_remove({
-      article_key: articleKey,
-      parent_cart_key: cartKey,
-    });
-
-    console.log("remove Resp", resp); //TODO: Errorhandling as soon as shop module works again
-  }
-
-  async function updateItem(articleKey, cartKey, quantity) {
-    const resp = await shopClient.article_update({
-      article_key: articleKey,
-      parent_cart_key: cartKey,
-      quantity: quantity,
-      quantity_mode: "replace",
-    });
-
-    console.log("update Resp", resp); //TODO: Errorhandling as soon as shop module works again
-  }
-
-  // async function updateCart(cartKey) {
-  //   await getChildren(cartKey);
-  // }
-
-  async function getAddressStructure() {
-    const structure = await shopClient.address_structure();
-    state.structure.address = struct2dict(structure.addSkel);
-  }
-
-  function getDefaultAddress() {
-    if (!!state.billingAddressList) {
-      state.billingAddressList.forEach((address) => {
-        if (address.is_default) {
-          state.activeBillingAddress = address;
-        }
-      });
-    } else {
-      state.activeBillingAddress = setAddressValues("billing");
-    }
-    if (!!state.shippingAddressList) {
-      state.shippingAddressList.forEach((address) => {
-        if (address.is_default && !state.cloneBilling) {
-          state.activeShippingAddress = address;
-        }
-      });
-    } else {
-      if (state.cloneBilling) {
-        state.activeShippingAddress = { ...state.activeBillingAddress };
-      } else {
-        state.activeShippingAddress = setAddressValues("shipping");
-      }
-    }
-  }
-
-  function setAddressValues(mode) {
-    let structure = state.structure.address;
-    let skel = {};
-
-    Object.entries(structure).forEach(([boneName, boneValue]) => {
-      if (boneName === "customer") {
-        skel[boneName] = state.customer.key;
-      } else if (boneName === "address_type") {
-        skel[boneName] = mode;
-      } else {
-        skel[boneName] = boneValue.emptyvalue;
-      }
-    });
-
-    return skel;
-  }
-
-  async function getAddress() {
-    if (!state.isLoggedIn) {
-      return;
-    }
-    try {
-      const addressList = await shopClient.address_list();
-    } catch (e) {
-      console.log("error", e);
-      return;
-    }
-
-    const addressList = await shopClient.address_list();
-    state.billingAddressList = [];
-    state.shippingAddressList = [];
-
-    for (const address of addressList) {
-      if (address.address_type === "billing") {
-        console.log("add to bill address ?", address);
-        state.billingAddressList.push(address);
-      }
-      if (address.address_type === "shipping") {
-        state.shippingAddressList.push(address);
-      }
-    }
-
-    getDefaultAddress();
-  }
-
-  async function addDiscount(code) {
-    await shopClient.discount_add({ code });
-  }
-
-  async function addNode(
-    parentCart,
-    cartType = "whishlist",
-    cartName = undefined,
-    comment = undefined,
-    shipping_key = undefined,
-    shipping_address_key = undefined,
-    discount_key = undefined,
-  ) {
-    return await 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,
-    });
-  }
-
-  async function getShippingData() {
-    return await shopClient.shipping_list({
-      cart_key: state.basketRootNode.key,
-    });
-  }
-  async function setShiping() {
-    return await shopClient.shipping_set();
-  }
-
-  async function getPaymentProviders() {
-    const paymentProvieders = await shopClient.payment_providers_list();
-    state.paymentProviders = paymentProvieders;
-    //select first paymentprovider as default
-    state.selectedPaymentProvider =
-      paymentProvieders[Object.keys(paymentProvieders)[0]];
-    state.selectedPaymentProviderName = Object.keys(paymentProvieders)[0];
-  }
-
-  function struct2dict(structure) {
-    if (!Array.isArray(structure)) {
-      return structure;
-    }
-
-    let result = {};
-    structure.forEach((bone) => (result[bone[0]] = bone[1]));
-
-    return result;
-  }
-
-  async function orderAdd() {
-    const order = await shopClient.order_add({
-      cart_key: state.basketRootNode.key,
-      payment_provider: state.selectedPaymentProviderName,
-      billing_address_key: state.activeBillingAddress["key"],
-      customer_key: state.customer["key"],
-    });
-    return order;
-  }
-  async function setShipping() {
-    const shipping_skel = shopClient;
-  }
-
-  watch(
-    () => state.activeBillingAddress,
-    (newValue, oldValue) => {
-      if (oldValue) {
-        const isAddress = (address) => address.key === newValue.key;
-
-        let index = state.billingAddressList.findIndex(isAddress);
-
-        state.billingAddressList[index] = newValue;
-      }
-      if (state.cloneBilling) {
-        state.activeShippingAddress = newValue;
-      }
-    },
-  );
-
-  watch(
-    () => state.activeShippingAddress,
-    (newValue, oldValue) => {
-      if (oldValue) {
-        const isAddress = (address) => address.key === newValue.key;
-
-        let index = state.shippingAddressList.findIndex(isAddress);
-
-        state.shippingAddressList[index] = newValue;
-      }
-    },
-  );
-
-  watch(
-    () => state.cloneBilling,
-    (newValue, oldValue) => {
-      if (newValue) {
-        let temp = { ...state.activeBillingAddress };
-        temp.address_type = "shipping";
-        state.activeShippingAddress = { ...temp };
-      }
-    },
-  );
-
-  return {
-    state,
-    addToCart,
-    getArticleView,
-    removeItem,
-    updateItem,
-    init,
-    getAddressStructure,
-    getChildren,
-    addDiscount,
-    getPaymentProviders,
-    getAddress,
-    addNode,
-    getShippingData,
-    getDefaultAddress,
-    orderAdd,
-    getBasket,
-    setShiping,
-  };
-});

package/src/views/ViewMissing.vue

@@ -1,20 +0,0 @@
-<template>
-  <div class="home">View {{ route.path }} is missing.</div>
-</template>
-
-<script>
-import { defineComponent, reactive } from "vue"
-import { useRoute } from "vue-router"
-
-export default defineComponent({
-  props: {},
-  components: {},
-  setup(props, context) {
-    const route = useRoute()
-    const state = reactive({})
-    return { state, route }
-  }
-})
-</script>
-
-<style scoped></style>