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

package/old/components/cart/CartLeafModel.vue

@@ -0,0 +1,312 @@
+<template>
+  <!-- Debugging -->
+  <!-- <pre>{{ modelValue.leaf.article.dest.key }}</pre>
+
+  <pre>{{ modelValue }}</pre> -->
+
+  <sl-dialog no-header ref="confirm" @sl-hide="resetItem">
+    <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 v-if="!modelValue"></div>
+  <sl-card horizontal class="viur-shop-cart-leaf" v-else>
+    <img
+      class="viur-shop-cart-leaf-image"
+      slot="image"
+      :src="
+        getImage(
+          modelValue?.shop_image
+            ? modelValue.shop_image
+            : undefined,
+        )
+      "
+    />
+    <h4
+      class="viur-shop-cart-leaf-headline headline"
+      v-html="modelValue.article.dest.shop_name"
+    ></h4>
+    <h5 class="viur-shop-cart-leaf-artno">
+      {{ modelValue.article.dest.shop_art_no_or_gtin }}
+    </h5>
+    <div
+      class="viur-shop-cart-leaf-description"
+      v-html="modelValue.article.dest.shop_description"
+    ></div>
+    <div class="viur-shop-cart-leaf-quantity">
+      <sl-input
+        class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--quantity"
+        type="number"
+        label="Anzahl"
+        placeholder="Number"
+        min="0"
+        :value="modelValue.quantity"
+        @sl-change="updateItem"
+        :disabled="cartStore.state.freeze"
+        ref="itemCount"
+      >
+      </sl-input>
+    </div>
+    <div class="viur-shop-cart-leaf-unitprice">
+      <div class="viur-shop-cart-leaf-label">Stückpreis</div>
+      <sl-format-number
+        class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--unitprice"
+        lang="de"
+        type="currency"
+        currency="EUR"
+        :value="modelValue.shop_price_retail"
+      >
+      </sl-format-number>
+    </div>
+
+    <div class="viur-shop-cart-leaf-actions">
+      <!-- <sl-button
+        size="small"
+        outline
+        class="viur-shop-cart-leaf-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-leaf-delete-btn"
+        variant="primary"
+        title="Remove from cart"
+        @click="confirm.show()"
+        v-if="!cartStore.state.freeze"
+      >
+        <sl-icon name="trash" slot="prefix"></sl-icon>
+      </sl-button>
+    </div>
+
+    <div class="viur-shop-cart-leaf-price">
+      <div class="viur-shop-cart-leaf-label">Gesamtpreis</div>
+      <sl-format-number
+        class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--price"
+        lang="de"
+        type="currency"
+        currency="EUR"
+        :value="modelValue.shop_price_retail * modelValue.quantity"
+      >
+      </sl-format-number>
+    </div>
+    <!-- TODO: Some customer needs an availability indicator ("in stock" etc.) here -->
+  </sl-card>
+</template>
+
+<script setup>
+import { computed, onBeforeMount, reactive, ref } from "vue";
+import { Request } from "@viur/vue-utils";
+import { useCartStore } from "../../stores/cart";
+import { useDebounceFn } from "@vueuse/core";
+// import ShopPriceFormatter from "../ui/generic/ShopPriceFormatter.vue";
+
+const props = defineProps(["modelValue"]);
+const emit = defineEmits(["update:modelValue"]);
+
+const cartStore = useCartStore();
+const confirm = ref(null);
+const isConfirmed = ref(false);
+const itemCount = ref(null);
+
+function getImage(image) {
+  if (image !== undefined) return Request.downloadUrlFor(image);
+
+  return cartStore.state.placeholder;
+}
+
+const updateItem = useDebounceFn(
+  (ev) => {
+    console.log(ev);
+    let newEvent = { ...props.modelValue };
+
+    newEvent.quantity = ev.target.value;
+
+    console.log("update", newEvent.quantity);
+    if (newEvent.quantity < 1) {
+      confirm.value.show();
+    } else {
+      emit("update:modelValue", newEvent);
+    }
+  },
+  1500,
+  { maxWait: 5000 },
+);
+
+function removeItem() {
+  let newEvent = { ...props.modelValue };
+  newEvent.quantity = 0;
+  emit("update:modelValue", newEvent);
+}
+
+function resetItem() {
+  if (!isConfirmed.value) {
+    itemCount.value.value = props.modelValue.quantity;
+  }
+}
+
+async function onConfirm() {
+  isConfirmed.value = true;
+  removeItem();
+  confirm.value.hide();
+}
+</script>
+
+<style scoped>
+@layer foundation.shop {
+  .viur-shop-cart-leaf {
+    --shop-leaf-label-color: var(--ignt-color-primary);
+    --shop-leaf-label-font-weight: 600;
+    --shop-leaf-label-font-size: 1em;
+    --shop-leaf-price-font-size: 1em;
+    --shop-leaf-headline-font-size: 1.3em;
+
+    margin-bottom: var(--ignt-spacing-x-large);
+
+    &::part(base) {
+      display: flex;
+      position: relative;
+    }
+
+    &::part(header) {
+      border-bottom: none;
+      padding-top: 0;
+      padding-right: 0;
+    }
+
+    &::part(image) {
+      aspect-ratio: 1;
+    }
+
+    &::part(body) {
+      display: grid;
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+      gap: var(--sl-spacing-medium);
+      padding: var(--sl-spacing-large);
+      height: 100%;
+    }
+
+    &::part(group) {
+      padding: 0;
+    }
+
+    @media (max-width: 600px) {
+      &::part(body) {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: var(--sl-spacing-medium);
+        padding: var(--sl-spacing-large);
+        height: 100%;
+      }
+
+      &::part(image) {
+        border-radius: var(--border-radius);
+        align-self: baseline;
+      }
+    }
+  }
+
+  .viur-shop-cart-leaf-image {
+    aspect-ratio: 1;
+  }
+
+  .viur-shop-cart-leaf-headline {
+    grid-column: 1 / span 4;
+    order: -2;
+    margin: 0;
+    font-size: var(--shop-leaf-headline-font-size);
+
+    @media (max-width: 600px) {
+      grid-column: 1 / span 2;
+    }
+  }
+
+  .viur-shop-cart-leaf-artno {
+    grid-column: 1 / span 5;
+    margin: 0;
+
+    @media (max-width: 600px) {
+      grid-column: 1 / span 2;
+    }
+  }
+
+  .viur-shop-cart-leaf-actions {
+    display: flex;
+    justify-content: start;
+    gap: var(--sl-spacing-x-small);
+
+    @media (min-width: 600px) {
+      grid-column: 5 / span 1;
+      order: -1;
+      justify-content: end;
+      align-items: end;
+    }
+  }
+
+  .viur-shop-cart-leaf-description {
+    grid-column: 1 / span 5;
+    margin-bottom: var(--ignt-spacing-small);
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+
+    &:deep(*) {
+      margin: 0;
+    }
+
+    @media (max-width: 600px) {
+      grid-column: span 2;
+    }
+
+    @media (max-width: 500px) {
+      display: none;
+    }
+  }
+
+  .viur-shop-cart-leaf-price {
+    align-self: flex-end;
+    text-align: right;
+    font-size: var(--shop-leaf-price-font-size);
+  }
+
+  .viur-shop-cart-leaf-quantity {
+    align-self: flex-end;
+  }
+
+  .viur-shop-cart-leaf-unitprice {
+    align-self: flex-end;
+
+    @media (max-width: 600px) {
+      text-align: right;
+    }
+  }
+
+  .viur-shop-cart-leaf-label,
+  .viur-shop-cart-leaf-value--quantity::part(form-control-label) {
+    color: var(--shop-leaf-label-color);
+    font-weight: var(--shop-leaf-label-font-weight);
+    font-size: var(--shop-leaf-label-font-size);
+    margin-bottom: var(--ignt-spacing-x-small);
+  }
+}
+</style>

package/old/components/cart/CartNode.vue

@@ -0,0 +1,26 @@
+<template>
+
+  <sl-details v-if="node.children" :summary="node.name">
+    <slot></slot>
+  </sl-details>
+
+  <h1 class="viur-shop-cart-headline" v-else>
+    {{ node.name }}
+  </h1>
+</template>
+
+<script setup>
+import { computed, reactive } from "vue";
+import CartLeaf from "./CartLeaf.vue";
+const props = defineProps({
+  node: { type: Object, required: true },
+});
+
+const state = reactive({});
+</script>
+
+<style scoped>
+.viur-shop-cart-headline {
+  font-size: 2rem;
+}
+</style>

package/old/components/cart/CartTree.vue

@@ -0,0 +1,67 @@
+<template>
+  <CartTreeWrapper :tree="state.tree" @update:modelValue="handleChange">
+  </CartTreeWrapper>
+
+  <sl-button
+    @click="
+      cartStore.addNode(
+        cartStore.state.basket.key,
+        (cartType = 'basket'),
+      )
+    "
+    >addbutton</sl-button
+  >
+</template>
+<script setup>
+import { reactive, watch, computed } from "vue";
+import CartTreeWrapper from "./CartTreeWrapper.vue";
+import { useCartStore } from "../../stores/cart";
+
+const cartStore = useCartStore();
+
+const props = defineProps({
+  modelValue: { type: Array, required: true },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+const arrayToTree = (arr, parent = null) =>
+  arr
+    .filter((item) => item.parententry === parent)
+    .map((child) => ({ ...child, children: arrayToTree(arr, child.key) }));
+
+const state = reactive({
+  loading: computed(() => {
+    return props.modelValue ? false : true;
+  }),
+  tree: computed(() => {
+    // ! NOTE: it is very important to unpack the prop (copy the array) at this point to avoid prop mutation!!!
+    let temp = props.modelValue ? arrayToTree([...props.modelValue]) : [""];
+
+    return temp[0];
+  }),
+});
+
+function handleChange(e) {
+  // ! NOTE: it is very important to unpack the prop (copy the array) at this point to avoid prop mutation!!!
+  let temp = [...props.modelValue];
+
+  temp.forEach((item, index) => {
+    if (item.key === e.key) {
+      if (e.quantity < 1) {
+        temp.splice(index, 1);
+      } else {
+        temp[index] = e;
+      }
+    }
+  });
+
+  emits("update:modelValue", temp);
+}
+
+// watch(() => props.modelValue,
+//  (oldVal, newVal) => {
+//   if(oldVal === )
+//  }
+//  );
+</script>

package/old/components/cart/CartTreeWrapper.vue

@@ -0,0 +1,73 @@
+<template>
+  <div v-if="state.loading">keine Einträge im Warenkorb</div>
+
+  <template v-else-if="tree.is_root_node">
+    <template v-for="child in tree.children" :key="child.key">
+      <CartLeafModel
+        :modelValue="child"
+        v-if="child.skel_type === 'leaf'"
+        @update:modelValue="handleChange"
+      />
+
+      <CartNode
+        :node="child"
+        v-else-if="child.children.length && child?.skel_type === 'node'"
+      >
+        <template v-for="item in child.children" :key="item.key">
+          <CartLeafModel
+            :modelValue="item"
+            v-if="item.skel_type === 'leaf'"
+            @update:modelValue="handleChange"
+          >
+          </CartLeafModel>
+          <CartTreeWrapper
+            :tree="item"
+            @update:modelValue="handleChange"
+            v-else
+          >
+          </CartTreeWrapper>
+        </template>
+      </CartNode>
+    </template>
+  </template>
+
+  <CartNode :node="tree" v-else-if="tree.skel_type === 'node'">
+    <template v-for="item in tree.children" :key="item.key">
+      <CartLeafModel
+        :modelValue="item"
+        @update:modelValue="handleChange"
+        v-if="item.skel_type === 'leaf'"
+      >
+      </CartLeafModel>
+      <CartTreeWrapper :tree="item" @update:modelValue="handleChange" v-else>
+      </CartTreeWrapper>
+    </template>
+  </CartNode>
+</template>
+
+<script setup>
+import { reactive, watch, computed } from "vue";
+import CartLeafModel from "./CartLeafModel.vue";
+import CartNode from "./CartNode.vue";
+
+const props = defineProps({
+  tree: { type: Object },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+const state = reactive({
+  loading: computed(() => {
+    if (props.tree) {
+      return false;
+    }
+    return true;
+  }),
+});
+
+function handleChange(e) {
+  emits("update:modelValue", e);
+}
+
+watch(() => {});
+</script>

package/old/components/cart/CartView.vue

@@ -0,0 +1,82 @@
+<template>
+  <div v-if="state.loading">keine Einträge im Warenkorb</div>
+  <template v-else>
+    <div
+      class="viur-shop-cart-node"
+      v-for="entry in modelValue"
+      :key="entry.key"
+    >
+      <CartLeafModel
+        :modelValue="entry"
+        v-if="entry.skel_type === 'leaf'"
+        @update:modelValue="handleChange"
+      />
+    </div>
+    <shop-summary v-if="standalone">
+      <template #custom v-if="customComponent">
+        <component :is="customComponent"></component>
+      </template>
+    </shop-summary>
+  </template>
+</template>
+<script setup>
+import { reactive, computed } from "vue";
+import CartLeafModel from "./CartLeafModel.vue";
+import { useCartStore } from "../../stores/cart";
+import ShopSummary from "../ShopSummary.vue";
+
+const props = defineProps({
+  modelValue: { type: Array, required: true },
+  standalone: { type: Boolean, default: true },
+  customComponent: { default: null },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+const cartStore = useCartStore();
+
+const state = reactive({
+  loading: computed(() => {
+    return props.modelValue.length ? false : true;
+  }),
+});
+
+async function handleChange(e) {
+  // ! NOTE: it is very important to unpack the prop (copy the array) at this point to avoid prop mutation!!!
+  let temp = [...props.modelValue];
+
+  temp.forEach(async (item, index) => {
+    if (item.key === e.key) {
+      if (item.quantity === e.quantity) {
+        return; //return if value has no changes so if value is 0 or remove button is clicked no request will be fired
+      }
+      if (e.quantity < 1) {
+        await cartStore.removeItem(e.article.dest.key, e.parententry);
+        temp.splice(index, 1);
+      } else {
+        await cartStore.updateItem(
+          e.article.dest.key,
+          e.parententry,
+          e.quantity,
+        );
+        temp[index] = e;
+      }
+    }
+  });
+
+  emits("update:modelValue", temp);
+}
+
+// watch(() => props.modelValue,
+//  (oldVal, newVal) => {
+//   if(oldVal === )
+//  }
+//  );
+</script>
+
+<style scoped>
+.viur-shop-cart-node {
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/old/components/cart/Discount.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+
+    <span>Haben Sie noch ein Gutschein?</span><br>
+    <span v-if="!cartStore.state.basket.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.basket.discount">
+      <!--Todo bessere texte und translations??-->
+      <div v-if="cartStore.state.basket.discount.dest.discount_type==='absolute'">
+      <span>
+        Sie haben einen Rabattcode im Wert von {{ cartStore.state.basket.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.basket.discount.dest.discount_type==='percentage'">
+      <span>
+        Sie haben einen Rabattcode im Wert von {{ cartStore.state.basket.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.basket.discount.dest.key)
+  cartStore.removeDiscount(cartStore.state.basket.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>