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

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

@@ -0,0 +1,137 @@
+<template>
+  <div class="viur-shop-address-box">
+    <select-address
+      v-if="addressSelection"
+      :address-list="state.addressList"
+      :modelValue="
+        type === 'billing'
+          ? addressStore.state.active.billing.key
+          : addressStore.state.active.shipping.key
+      "
+      @update:modelValue="handleSelection"
+    >
+    </select-address>
+
+    <!-- debugging -->
+    <!-- {{ mode === "billing" ? addressStore.state.activeBillingAddress : "" }} -->
+    <!-- {{ mode === "billing" ? "" : addressStore.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 } from "vue";
+import { useAddressStore } from "../../../stores/address";
+import { useOrderStore } from "../../../stores/order";
+import { useCartStore } from "../../../stores/cart";
+import SelectAddress from "./SelectAddress.vue";
+
+const props = defineProps({
+  type: { type: String, default: "billing" },
+  addressSelection: { type: Boolean, default: false },
+  modelValue: { type: Object },
+});
+
+const emit = defineEmits(["update:modelValue", "valid"]);
+
+const addressStore = useAddressStore();
+const orderStore = useOrderStore();
+const cartStore = useCartStore();
+
+const state = reactive({
+  addressList: computed(() =>
+    props.type === "billing"
+      ? addressStore.getList()
+      : addressStore.getList("shipping"),
+  ),
+  address: computed(() => {
+    return props.type === "billing"
+      ? addressStore.state.active.billing
+      : addressStore.state.active.shipping;
+  }),
+});
+
+function isValid() {
+  if (props.type === "billing") {
+    if (addressStore.state.active.billing.key) {
+      orderStore.updateParams({
+        billing_address_key: addressStore.state.active.billing.key,
+      });
+
+      if (addressStore.state.clone) {
+        cartStore.update({
+          key: orderStore.state.currentOrder
+            ? orderStore.state.currentOrder.cart.dest.key
+            : cartStore.state.basket.key,
+          shippingAddress: addressStore.state.active.shipping.key,
+        });
+      }
+
+      emit("valid", true);
+    } else {
+      emit("valid", false);
+    }
+  } else {
+    if (addressStore.state.active.shipping.key) {
+      cartStore.update({
+        key: orderStore.state.currentOrder.cart.dest.key,
+        shippingAddress: addressStore.state.active.shipping.key,
+      });
+
+      emit("valid", true);
+    } else {
+      emit("valid", false);
+    }
+  }
+}
+
+function handleSelection(e) {
+  let address = state.addressList.filter((address) => address.key === e);
+
+  if (props.type === "billing") {
+    addressStore.state.active.billing = address[0];
+
+    orderStore.updateParams({
+      billing_address_key: addressStore.state.active.billing.key,
+    });
+
+    if (addressStore.state.clone) {
+      cartStore.update({
+        key: orderStore.state.currentOrder.cart.dest.key,
+        shippingAddress: addressStore.state.active.shipping.key,
+      });
+    }
+
+    emit("valid", true);
+  } else {
+    addressStore.state.active.shipping = address[0];
+
+    cartStore.update({
+      key: orderStore.state.currentOrder.cart.dest.key,
+      shippingAddress: addressStore.state.active.shipping.key,
+    });
+
+    emit("valid", true);
+  }
+}
+
+onBeforeMount(() => {
+  isValid();
+});
+</script>
+
+<style scoped>
+.viur-shop-address-box-preview {
+  margin: var(--sl-spacing-medium) 0;
+}
+</style>

package/{src → old}/components/ui/userdata/BaseLayout.vue

@@ -12,37 +12,30 @@
     <div class="viur-shop-cart-address">
       <div class="viur-shop-cart-address-headline">
         {{ $t("skeleton.address.address_type.billing") }}
-        <sl-button outline size="small" @click="editBilling">
-          <sl-icon name="pencil" slot="prefix"></sl-icon>
-        </sl-button>
       </div>
+
       <slot name="billing-address">
-        <address-box :address-selection="true" :mode="'billing'"></address-box>
+        <address-box
+          :address-selection="true"
+          :type="'billing'"
+          @valid="emit('valid', $event)"
+        >
+        </address-box>
       </slot>
     </div>
+
     <slot name="mode-switch"></slot>
+
     <div class="viur-shop-cart-address" v-if="customAddress">
       <div class="viur-shop-cart-address-headline">
         {{ $t("skeleton.address.address_type.shipping") }}
-        <sl-button
-          outline
-          size="small"
-          @click="editShipping"
-          v-if="customAddress"
-        >
-          <sl-icon name="pencil" slot="prefix"></sl-icon>
-        </sl-button>
       </div>
+
       <slot name="shipping-address" v-if="customAddress">
         <address-box
-          :address-selection="true && customAddress"
-          :mode="'shipping'"
-        ></address-box>
-      </slot>
-      <slot name="shipping-address" v-else>
-        <address-box
-          :address-selection="true && customAddress"
-          :mode="'billing'"
+          :address-selection="customAddress"
+          :type="'shipping'"
+          @valid="emit('valid', $event)"
         >
         </address-box>
       </slot>
@@ -52,7 +45,6 @@
 
 <script setup>
 import { reactive } from "vue";
-import { useCartStore } from "../../../stores/cart";
 import AddressBox from "./AddressBox.vue";
 
 const props = defineProps({
@@ -60,18 +52,9 @@ const props = defineProps({
   customAddress: { type: Boolean, default: false },
 });
 
-const emit = defineEmits(["editBilling", "editShipping"]);
-const state = reactive({ editBilling: false, editShipping: false });
+const emit = defineEmits(["valid"]);
 
-function editBilling() {
-  state.editBilling = !state.editBilling;
-  emit("editBilling", state.editBilling);
-}
-
-function editShipping() {
-  state.editShipping = !state.editShipping;
-  emit("editShipping", state.editShipping);
-}
+const state = reactive({ });
 </script>
 
 <style scoped>

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