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

package/src/components/cart/CartView.vue

@@ -1,6 +1,111 @@
 <template>
-  <Loader v-if="!state.cartIsInit"></Loader>
+  <sl-spinner v-if="!currentCartKey"></sl-spinner>
+  <h2 v-else-if="state.cartIsEmpty">Keine Artikel im Warenkorb vorhanden</h2>
+  <!--todo translations-->
   <template v-else>
+    <sl-dialog no-header ref="confirm" @sl-hide="onDialogHide">
+      <p>Möchten Sie den Artikel wirklich aus dem Warenkorb entfernen?</p>
+      <sl-bar>
+        <sl-button
+          slot="left"
+          variant="danger"
+          @click="confirm.hide()"
+          size="medium"
+        >
+          Abbrechen
+        </sl-button>
+        <sl-button
+          slot="right"
+          variant="success"
+          @click="onConfirm"
+          size="medium"
+        >
+          Aus Warenkorb entfernen
+        </sl-button>
+      </sl-bar>
+    </sl-dialog>
+
+    <div class="viur-shop-cart-node" v-for="node in state.nodes">
+      <template
+        v-if="Object.keys(state.leaves).includes(node.key)"
+        :key="node.key"
+      >
+        <!-- <CartNode :node="node"></CartNode> -->
+        <CartLeaf
+          v-for="leaf in state.leaves[node.key]"
+          :key="leaf.key"
+          :leaf="leaf"
+          :node="node"
+          :placeholder="placeholder"
+          @removeItem="removeItem"
+          @updateItem="updateItem"
+        >
+        </CartLeaf>
+      </template>
+    </div>
+    <div id="order_sidebar" v-if="standalone">
+      <h2 class="viur-shop-cart-sidebar-headline headline">Zusammenfassung</h2>
+      <br />
+
+      <div class="viur-shop-cart-sidebar-info-line">
+        <span>Zwischensumme</span>
+        <sl-format-number
+          type="currency"
+          currency="EUR"
+          :value="cartStore.state.basketRootNode.total"
+        ></sl-format-number>
+      </div>
+      <div class="viur-shop-cart-sidebar-info-line">
+        <span>Rabatt</span>
+        <sl-format-number
+          type="currency"
+          currency="EUR"
+          :value="
+            cartStore.state.basketRootNode.total -
+            cartStore.state.basketRootNode.total_discount_price
+          "
+          lang="de"
+        ></sl-format-number>
+      </div>
+      <div class="viur-shop-cart-sidebar-info-line">
+        <Shipping ref="shipping"></Shipping>
+      </div>
+      <div class="viur-shop-cart-sidebar-info-line total">
+        <span>Gesamt :</span>
+        <sl-format-number
+          type="currency"
+          currency="EUR"
+          :value="state.totalPrice"
+          lang="de"
+        ></sl-format-number>
+      </div>
+      <div class="viur-shop-cart-sidebar-btn-wrap" v-if="!props.inOrderView">
+        <sl-button variant="primary" size="medium"> Jetzt Bestellen </sl-button>
+        <Discount></Discount>
+
+        <div class="viur-shop-cart-mobile-footer">
+          <sl-button variant="primary" size="medium">
+            Jetzt Bestellen</sl-button
+          >
+        </div>
+      </div>
+    </div>
+    <Discount v-if="!props.inOrderConfirm"></Discount>
+
+    <div class="viur-shop-cart-mobile-footer">
+      <sl-button variant="primary" size="medium"> Jetzt Bestellen</sl-button>
+    </div>
+
+    <!-- <pre> {{ state.leaves }}</pre> -->
+  </template>
+  <shop-summary v-if="!props.sidebar">
+    <template #custom v-if="customComponent">
+      <component :is="customComponent"></component>
+    </template>
+  </shop-summary>
+  <!-- <CartNode></CartNode>
+  <CartLeaf></CartLeaf> -->
+  <!-- <template v-else>
     <div class="bind viur-shop-cart-wrap">
       <sl-dialog ref="confirm" @sl-hide="onDialogHide">
         <p>Möchten Sie den Artikel wirklich aus dem Warenkorb entfernen?</p>
@@ -59,11 +164,7 @@
                 <sl-icon
                   slot="prefix"
                   library="hsk"
-                  name="clone"
-                  class="primary-icon"
-                ></sl-icon>
-                Warenkorb kopieren
-              </sl-menu-item>
+                  name="clone"cartKey
               <sl-menu-item @click="saveCart" title="Warenkorb löschen">
                 <sl-icon
                   slot="prefix"
@@ -103,160 +204,65 @@
           <strong>Warenkorb nicht gespeichert!</strong><br />
         </sl-alert>
 
-        <sl-spinner v-if="!state.itemsIsInit"></sl-spinner>
 
-        <template v-else>
-          <sl-card
-            horizontal
-            class="viur-shop-cart-card"
-            v-for="item in cartStore.state.carts[cartStore.state.basket].items"
-          >
-            <img
-              class="viur-shop-cart-card-img"
-              slot="image"
-              src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
-            />
-            <div class="viur-shop-cart-card-header" slot="header">
-              <h4 class="viur-shop-cart-card-headline headline">
-                {{ item.article.dest.shop_name }} | 425018
-              </h4>
-            </div>
-            <div class="viur-shop-cart-card-body-row">
-              <div class="viur-shop-cart-card-body-info">
-                <div class="viur-shop-cart-card-descr">
-                  Version: 900x900x2000 <br />
-                  Farbe: Chromoptik <br />
-                  Glasart: Klar hell mit Edelglasbeschichtung<br />
-                  Anschlag: Beidseitig variabel<br />
-                  Griff: Stangengriff Exklusiv (56)
-                </div>
-                <div class="viur-shop-cart-card-body-footer">
-                  <sl-button
-                    size="small"
-                    outline
-                    class="viur-shop-cart-card-add-to-favourites-btn"
-                    variant="primary"
-                    title="Add to favourites"
-                  >
-                    <sl-icon name="heart" slot="prefix"></sl-icon>
-                  </sl-button>
-                  <sl-button
-                    size="small"
-                    outline
-                    class="viur-shop-cart-card-delete-btn"
-                    variant="primary"
-                    title="Remove from cart"
-                    @click="
-                      removeItem(
-                        item,
-                        item.article.dest.key,
-                        cartStore.state.basket,
-                      )
-                    "
-                  >
-                    <sl-icon name="trash" slot="prefix"></sl-icon>
-                  </sl-button>
-                </div>
-              </div>
-              <div class="viur-shop-cart-card-body-amount">
-                <sl-input
-                  class="amount-input"
-                  type="number"
-                  label="Anzahl"
-                  placeholder="Number"
-                  min="0"
-                  v-model="item.quantity"
-                  @input="
-                    updateItem(
-                      item,
-                      item.article.dest.key,
-                      cartStore.state.basket,
-                      item.quantity,
-                    )
-                  "
-                >
-                </sl-input>
-              </div>
-              <div class="viur-shop-cart-card-price-wrap" slot="footer">
-                <div class="viur-shop-cart-card-price-label">Preis</div>
-                <div class="viur-shop-cart-card-price">
-                  {{ item.price.retail }}
-                  €
-                </div>
-                <div class="viur-shop-cart-card-small-print">Brutto / Stk.</div>
-              </div>
-            </div>
-          </sl-card>
-        </template>
       </div>
 
-      <teleport to="#order_sidebar" v-if="sidebar">
-        <h2 class="viur-shop-cart-sidebar-headline headline">
-          Zusammenfassung
-        </h2>
-        <br />
 
-        <sl-input label="Rabattcode eingeben"></sl-input>
-        <br />
-
-        <div class="viur-shop-cart-sidebar-info-line">
-          <span>Zwischensumme</span>
-          <!-- TODO: Preis in shop modul muss trotzdem ohne rabatt sein - extra feld für rabattierten preis und rabatt müssen ebenfalls hier sichtbar werden -->
-          {{ cartStore.state.carts[cartStore.state.basket].info.total }} €
-        </div>
-        <div class="viur-shop-cart-sidebar-info-line">
-          <span>Rabatt</span>
-          0 €
-        </div>
-        <div class="viur-shop-cart-sidebar-info-line">
-          <span>Versandkosten</span>
-          0 €
-        </div>
-        <div class="viur-shop-cart-sidebar-info-line total">
-          <span>Gesamt:</span>
-          {{ cartStore.state.carts[cartStore.state.basket].info.total }} €
-        </div>
-        <div class="viur-shop-cart-sidebar-btn-wrap">
-          <sl-button variant="info" size="small"> Jetzt Bestellen </sl-button>
-          <sl-button size="small" variant="primary">
-            <sl-icon name="paypal" slot="prefix"></sl-icon>
-            Paypal
-          </sl-button>
-        </div>
-      </teleport>
     </div>
-  </template>
+  </template> -->
 </template>
 
 <script setup>
 import { reactive, computed, onBeforeMount, ref } from "vue";
-import Loader from "@viur/vue-utils/generic/Loader.vue";
 import { useCartStore } from "../../stores/cart.js";
-import { Request } from "@viur/vue-utils";
+import CartNode from "./CartNode.vue";
+import CartLeaf from "./CartLeaf.vue";
+import Shipping from "../order/process/Shipping.vue";
+import ShopSummary from "../ui/ShopSummary.vue";
 
 const props = defineProps({
   mode: { type: String, default: "basket" },
-  cartKey: { type: String, default: "" },
+  cartKey: { type: String },
   sidebar: { type: Boolean, default: true },
+  inOrderView: { type: Boolean, default: false },
+  inOrderConfirm: { type: Boolean, default: false },
+  customComponent: { default: undefined },
 });
 
+console.log("inor",props.inOrderView)
 const cartStore = useCartStore();
 
 const confirm = ref(null);
+const shipping = ref(null);
 
 const state = reactive({
-  cartIsInit: computed(() => {
-    return cartStore.state.basket.length ? true : false;
-  }),
   itemsIsInit: computed(() => {
-    return cartStore.state.carts[cartStore.state.basket].items ? true : false;
+    return true;
+  }),
+  cartIsEmpty: computed(() => {
+    return currentCartKey && state.leaves.length===0;
+  }),
+  totalPrice: computed(() => {
+    if (shipping.value) {
+      return (
+        cartStore.state.basketRootNode.total_discount_price +
+        shipping.value.getShippingCost()
+      );
+    }
+    return 0;
   }),
   images: {},
   currentItem: {},
+  currentNode: {},
+  nodes: [],
+  leaves: {},
 });
 
 const currentCartKey = computed(() => {
-  return props.mode === "basket" ? cartStore.state.basket : props.cartKey;
+  console.log("compute current cartkey");
+  return props.mode === "basket"
+    ? cartStore.state.basketRootNode.key
+    : props.cartKey;
 });
 
 // function getImage(item) {
@@ -276,57 +282,92 @@ const currentCartKey = computed(() => {
 // }
 
 async function onConfirm() {
+  confirm.value.hide();
+
   await cartStore.updateItem(
     state.currentItem.article.dest.key,
-    cartStore.state.basket,
+    state.currentNode.key,
     0,
   );
-  confirm.value.hide();
+  await updateCart();
 }
 
-function updateItem(item, articleKey, cartKey, quantity) {
-  if (quantity === 0) {
+async function updateItem(e) {
+  console.log("updateItem :", e);
+
+  if (e.quantity === 0) {
     confirm.value.show();
-    state.currentItem = item;
+    state.currentItem = e.item;
+    state.currentNode = e.node;
   } else {
-    cartStore.updateItem(articleKey, cartKey, quantity);
+    await cartStore.updateItem(e.articleKey, e.node.key, e.quantity);
+
+    await cartStore.init();
   }
 }
 
-function removeItem(item, articleKey, cartKey) {
+function removeItem(e) {
+  console.log("removeItem :", e);
+
   confirm.value.show();
-  state.currentItem = item;
+  state.currentItem = e.item;
+  state.currentNode = e.node;
 }
 
-function onDialogHide() {
-  cartStore.state.carts[cartStore.state.basket].items.forEach((item) => {
+async function onDialogHide() {
+  // TODO: console error when removing items
+  state.leaves[state.currentNode.key].forEach((item) => {
     if (item.key === state.currentItem.key) {
       item.quantity = 1;
     }
   });
+
   state.currentItem = {};
+  state.currentNode = {};
+}
+
+async function updateCart() {
+  state.nodes = [];
+  state.leaves = {};
+
+  await cartStore.init();
+  await getChildren();
+}
+
+async function getChildren(parentKey = currentCartKey.value) {
+  const children = await cartStore.getChildren(parentKey);
+
+  children.forEach(async (child) => {
+    if (child.skel_type === "node") {
+      state.nodes.push(child);
+      await getChildren(child.key);
+    } else {
+      if (!Object.keys(state.leaves).includes(parentKey)) {
+        state.leaves[parentKey] = [];
+      }
+      state.leaves[parentKey].push(child);
+    }
+  });
 }
 
 onBeforeMount(async () => {
   await cartStore.init();
+  await getChildren();
+
+  if (props.mode === "basket") {
+    state.nodes.push(cartStore.state.basketRootNode);
+  }
+
+  console.log("state.nodes test", state.nodes);
+
+  console.log("state.leaves", state.leaves);
 });
 </script>
 
 <style scoped>
 .viur-shop-cart-wrap {
-  flex-direction: row;
-  gap: var(--sl-spacing-x-large);
-  align-items: flex-start;
-}
-
-.viur-shop-cart-sidebar-btn-wrap {
-  display: flex;
-  flex-direction: column;
-  margin-top: var(--sl-spacing-large);
-
-  sl-button {
-    margin-bottom: var(--sl-spacing-x-small);
-  }
+  display: grid;
+  grid-template-columns: subgrid;
 }
 
 sl-alert {
@@ -378,6 +419,11 @@ sl-alert {
   flex: 1;
 }
 
+.viur-shop-cart-node {
+  display: flex;
+  flex-direction: column;
+}
+
 .cart-wrap {
   display: flex;
   flex-direction: column;
@@ -594,25 +640,6 @@ sl-menu-item {
   padding: 0.4em;
 }
 
-.viur-shop-cart-sidebar-info-line {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  margin: var(--sl-spacing-2x-small) 0;
-
-  &.total {
-    font-weight: 600;
-    border-top: 1px solid var(--sl-color-neutral-300);
-    border-bottom: 1px solid var(--sl-color-neutral-300);
-    padding: var(--sl-spacing-x-small) 0;
-    margin: var(--sl-spacing-small) 0;
-  }
-
-  span {
-    margin-right: auto;
-  }
-}
-
 .viur-shop-cart-card {
   margin-bottom: var(--sl-spacing-x-large);
 
@@ -689,4 +716,8 @@ sl-menu-item {
   font-size: 1em;
   margin-left: auto;
 }
+
+.viur-shop-cart-mobile-footer {
+  display: none;
+}
 </style>

package/src/components/cart/Discount.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+
+    <span>Haben Sie noch ein Gutschein?</span><br>
+    <span v-if="!cartStore.state.basketRootNode.discount">Es befindet sich noch kein Gutschein im Warenkorb.</span>
+    <sl-button-group>
+      <sl-input placeholder="Rabatt Code" ref="codeInput">
+
+      </sl-input>
+      <sl-button @click="addDiscountCode">Einlösen</sl-button>
+    </sl-button-group>
+    <sl-alert ref="errorMessageContainer">
+      <sl-icon slot="icon" name="info-circle"></sl-icon>
+      {{ state.errorMessage }}
+    </sl-alert>
+  </div>
+  <div>
+    <div v-if="cartStore.state.basketRootNode.discount">
+      <!--Todo bessere texte und translations??-->
+      <div v-if="cartStore.state.basketRootNode.discount.dest.discount_type==='absolute'">
+      <span>
+        Sie haben einen Rabattcode im Wert von {{ cartStore.state.basketRootNode.discount.dest.absolute }} € eingegeben
+      </span>
+        <sl-icon-button name="x-lg" label="Löschen" @click="removeDiscountCode"></sl-icon-button>
+      </div>
+      <div v-if="cartStore.state.basketRootNode.discount.dest.discount_type==='percentage'">
+      <span>
+        Sie haben einen Rabattcode im Wert von {{ cartStore.state.basketRootNode.discount.dest.percentage }} % eingegeben
+      </span>
+        <sl-icon-button name="x-lg" label="Löschen" @click="removeDiscountCode"></sl-icon-button>
+      </div>
+
+    </div>
+  </div>
+  <sl-spinner v-show="state.isFetching"></sl-spinner>
+
+</template>
+<script setup>
+import {useCartStore} from "../../stores/cart";
+import {computed, reactive, ref} from "vue";
+
+const cartStore = useCartStore();
+const codeInput = ref(null);
+const errorMessageContainer = ref(null);
+const state = reactive({
+  errorMessage: "",
+  isFetching: false,
+});
+
+async function addDiscountCode() {
+  errorMessageContainer.value.hide();
+  const discountCode = codeInput.value.value;
+  if (!discountCode) {
+    errorMessageContainer.value.show();
+    state.errorMessage = "Es wurde kein Rabattcode eingegeben";
+    return
+  }
+  state.isFetching = true;
+  console.log("festch", state.isFetching)
+  cartStore.addDiscount(discountCode).then((res) => {
+    cartStore.init();//TODO muss man alles neuladen ??
+    state.isFetching = false;
+
+  }).catch((e) => {
+    console.error("Cant add key");
+    state.isFetching = false;
+  })
+
+}
+
+async function removeDiscountCode() {
+
+  errorMessageContainer.value.hide();
+  state.isFetching = true;
+  console.log("code ", cartStore.state.basketRootNode.discount.dest.key)
+  cartStore.removeDiscount(cartStore.state.basketRootNode.discount.dest.key).then((res) => {
+    cartStore.init();//TODO muss man alles neuladen ??
+    state.isFetching = false;
+
+  }).catch((e) => {
+    console.error("Cant remove key");
+    state.isFetching = false;
+  })
+
+}
+</script>
+
+
+<style scoped>
+
+</style>

package/src/components/order/OrderSidebar.vue

@@ -0,0 +1,102 @@
+,
+<template>
+  <div class="viur-shop-sidebar">
+    <h2 class="viur-shop-cart-sidebar-headline headline">Zusammenfassung</h2>
+    <br />
+    <div class="viur-shop-cart-sidebar-info-line">
+      <span>Zwischensumme</span>
+      999.99 €
+    </div>
+    <div class="viur-shop-cart-sidebar-info-line">
+      <span>Rabatt</span>
+      {{
+        cartStore.state.basketRootNode.total -
+        cartStore.state.basketRootNode.total_discount_price
+      }}
+      €
+    </div>
+    <div class="viur-shop-cart-sidebar-info-line">
+      <span>Versandkosten</span>
+      0 €
+    </div>
+    <div class="viur-shop-cart-sidebar-info-line total">
+      <span>Gesamt:</span>
+      <!--{{ cartStore.state.basketRootNode }}-->
+      €
+    </div>
+    <div class="viur-shop-cart-sidebar-btn-wrap">
+
+      <!-- TODO: Placement of discount? -->
+      <div class="viur-shop-discount-wrap">
+        <Discount></Discount>
+      </div>
+
+      <sl-button variant="primary" size="medium"> Jetzt Bestellen</sl-button>
+      <sl-button size="medium" variant="info">
+        <sl-icon name="paypal" slot="prefix"></sl-icon>
+        Paypal
+      </sl-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onBeforeMount } from "vue";
+import { useCartStore } from "../../stores/cart.js";
+import Discount from "../cart/Discount.vue";
+
+const cartStore = useCartStore();
+
+onBeforeMount(() => {
+  cartStore.init();
+});
+</script>
+
+<style>
+.viur-shop-cart-sidebar-info-line {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin: var(--sl-spacing-2x-small) 0;
+
+  &.total {
+    font-weight: 600;
+    border-top: 1px solid var(--sl-color-neutral-300);
+    border-bottom: 1px solid var(--sl-color-neutral-300);
+    padding: var(--sl-spacing-x-small) 0;
+    margin: var(--sl-spacing-small) 0;
+  }
+
+  span {
+    margin-right: auto;
+  }
+}
+
+.viur-shop-cart-sidebar-btn-wrap {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--sl-spacing-large);
+
+  sl-button {
+    margin-bottom: var(--sl-spacing-x-small);
+  }
+}
+.viur-shop-cart-sidebar-headline {
+  margin: 0 0 var(--sl-spacing-large) 0;
+}
+
+.viur-shop-sidebar {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--shop-sidebar-background);
+  padding: var(--sl-spacing-medium);
+  overflow: hidden;
+  border-radius: var(--sl-border-radius-medium);
+
+  @media (min-width: 1024px) {
+    position: sticky;
+    top: 0;
+    margin-left: var(--sl-spacing-2x-large);
+  }
+}
+</style>

package/src/components/order/item/ItemView.vue

@@ -94,7 +94,6 @@ const state = reactive({
 });
 
 function getImage(item) {
-  console.log("hier", item.dk_artikel);
   let imageUrl =
     "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80";
   if (item?.dk_artikel.dest.image) {