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

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/category/CategoryList.vue

@@ -0,0 +1,83 @@
+<template>
+    <RouterLink :to="{ name: 'CategoryView', params: { identifier: 'dk' } }"
+                v-for="item in list"
+                :key="item"
+                class="viur-shop-category-list-item-link"
+    >
+      <sl-card class="viur-shop-category-list-item">
+        <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"
+          alt="A kitten."
+          class="viur-shop-category-list-item-img"
+        />
+        <h2 class="viur-shop-category-list-item-headline"> {{ item }}</h2>
+        <div class="viur-shop-category-list-fake-link">Alle anzeigen &raquo;</div>
+
+      </sl-card>
+    </RouterLink>
+</template>
+
+<script setup>
+import { onBeforeMount } from "vue";
+import ItemCard from "../item/ItemCard.vue";
+import { useCartStore } from "../../../stores/cart";
+
+const cartStore = useCartStore();
+const props = defineProps({
+  list: { type: Array, required: true },
+});
+
+onBeforeMount(async () => {
+  await cartStore.init();
+});
+</script>
+
+<style scoped>
+
+.viur-shop-category-list-item-link{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &:hover{
+    .viur-shop-category-list-fake-link{
+      text-decoration: underline;
+    }
+
+    .viur-shop-category-list-item-img{
+      transform: scale(1.02);
+    }
+ }
+}
+
+.viur-shop-category-list-item{
+  width: 100%;
+
+  &::part(header){
+    padding: var(--sl-spacing-medium) 0;
+   }
+
+  &::part(body){
+    padding: var(--sl-spacing-medium) 0;
+   }
+
+  &::part(footer){
+    padding: var(--sl-spacing-medium) 0;
+   }
+}
+
+.viur-shop-category-list-item-headline{
+  font-size: 1.4em;
+  margin-bottom: var(--sl-spacing-medium);
+  color: var(--ignt-basic-color-text);
+}
+
+.viur-shop-category-list-item-img{
+  aspect-ratio: 1;
+  object-fit: cover;
+  transition: all ease .3s;
+ }
+
+
+</style>

package/src/components/order/category/CategoryView.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="viur-shop-loading-wrap" v-if="state.loading">
+    <sl-spinner></sl-spinner>
+  </div>
+
+  <div class="bind" v-else>
+    <div class="page-header">
+      <h1>{{ pageHeader }}</h1>
+    </div>
+    <slot name="filter" v-if="filter">
+      text-transform text-transform TEST
+    </slot>
+    <div class="viur-shop-category-view-list">
+      <!-- <router-link
+        v-for="item in state.skellist"
+        :key="item.shop_name"
+        :to="{ name: 'itemView', params: { item: item.key } }"
+      > -->
+
+      <ItemCard
+        v-for="item in state.skellist"
+        :key="item.shop_name"
+        :item="item"
+      >
+      </ItemCard>
+      <!-- </router-link> -->
+    </div>
+
+    <sl-button
+      @click="loadMore"
+      :loading="state.loading"
+      :disabled="state.isLastItem"
+      class="viur-shop-category-view-more-button"
+    >
+      Mehr anzeigen
+    </sl-button>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, reactive, computed } from "vue";
+import { useCartStore } from "../../../stores/cart";
+import { useRoute } from "vue-router";
+import { Request, ListRequest } from "@viur/vue-utils";
+// import { ViURShopClient } from "@viur/viur-shop-client";
+
+// component imports
+import ItemCard from "../item/ItemCard.vue";
+
+const props = defineProps({
+  skellist: { type: Array },
+  filter: { type: Boolean, default: true },
+  pageHeader: { type: String, default: "Artikel Liste" },
+  listHandler: { type: Object, required: true },
+});
+
+const route = useRoute();
+
+const cartStore = useCartStore();
+
+const state = reactive({
+  skellist: [],
+  loading: true,
+  currentCursor: "",
+  isLastItem: false,
+  itemCount: 99,
+  itemType: computed(() => route.params.identifier),
+});
+
+const categoryList = props.listHandler;
+
+function listItems() {
+  let params = {
+    limit: state.itemCount,
+    cursor: state.currentCursor,
+    type: state.itemType,
+  };
+
+  state.loading = true;
+
+  Request.get("/json/variante/list", { dataObj: params }).then(async (resp) => {
+    let data = await resp.json();
+
+    if (data.cursor !== state.currentCursor && !state.isLastItem) {
+      state.currentCursor = data.cursor;
+      state.skellist.push(...data.skellist);
+      state.loading = false;
+    } else if (data.cursor === state.currentCursor) {
+      state.isLastItem = true;
+      state.loading = false;
+    }
+
+    console.log("hier", data);
+  });
+}
+
+async function loadMore() {
+  state.loading = true;
+  await categoryList.next();
+
+  if (state.skellist.length < categoryList.state.skellist.length) {
+    state.skellist = categoryList.state.skellist;
+    state.loading = false;
+  } else {
+    state.loading = false;
+    state.isLastItem = true;
+  }
+}
+
+onMounted(async () => {
+  await cartStore.init();
+  await categoryList.fetch(true);
+  state.skellist = categoryList.state.skellist;
+  state.loading = false;
+
+  // await cartStore.init();
+});
+</script>
+
+<style scoped>
+.viur-shop-category-view-list {
+  display: grid;
+  width: 100%;
+  grid-gap: var(--sl-spacing-medium);
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.viur-shop-loading-wrap {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  sl-spinner {
+    font-size: 3.5em;
+    --track-width: 4px;
+  }
+}
+</style>

package/src/components/order/information/adress/ShippingAdress.vue

@@ -0,0 +1,143 @@
+<template>
+  <sl-splinner
+    v-if="!cartStore.state.carts[cartStore.state.basket]?.items"
+  ></sl-splinner>
+  <template v-else>
+    <div class="form-wrap">
+      <sl-select
+        v-if="multiAdress"
+        multiple
+        clearable
+        ref="itemSelection"
+        @sl-change="onItemSelect"
+        @sl-clear="onItemReset"
+        :label="'Lieferadresse für: ' + state.selectedItem"
+        class="grid-w-4"
+      >
+        <sl-option
+          v-for="item in cartStore.state.carts[cartStore.state.basket]?.items"
+          :value="item.key"
+        >
+          {{ item.shop_name }}</sl-option
+        >
+      </sl-select>
+      <sl-input
+        name="street"
+        @sl-change="onInput"
+        placeholder="Straße"
+        class="grid-w-3"
+        :disabled="!state.isItemSelected"
+      >
+        <label slot="label">Strasse *</label>
+      </sl-input>
+      <sl-input
+        name="street"
+        @sl-change="onInput"
+        placeholder="Hausnummer"
+        type="number"
+        :disabled="!state.isItemSelected"
+      >
+        <label slot="label">Hausnummer *</label>
+      </sl-input>
+      <sl-input
+        name="street"
+        @sl-change="onInput"
+        placeholder="Postleitzahl"
+        type="number"
+        class="grid-w-2"
+        :disabled="!state.isItemSelected"
+      >
+        <label slot="label">Postleitzahl *</label>
+      </sl-input>
+      <sl-input
+        name="city"
+        @sl-change="onInput"
+        placeholder="Stadt"
+        class="grid-w-2"
+        :disabled="!state.isItemSelected"
+      >
+        <label slot="label">Stadt*</label>
+      </sl-input>
+      <sl-input
+        name="province"
+        @sl-change="onInput"
+        placeholder="Bundesland"
+        class="grid-w-2"
+        :disabled="!state.isItemSelected"
+      >
+        <label slot="label">Bundesland</label>
+      </sl-input>
+    </div>
+  </template>
+</template>
+
+<script setup>
+import { onBeforeMount, reactive, ref } from "vue";
+import { useCartStore } from "../../../../stores/cart";
+
+const props = defineProps({
+  multiAdress: { type: Boolean, default: false },
+  items: { type: Array },
+});
+
+const emit = defineEmits(["adressInput", "itemSelection"]);
+
+const state = reactive({
+  selectedItem: null,
+  isItemSelected: false,
+  items: {},
+});
+
+const itemSelection = ref(null);
+const cartStore = useCartStore();
+
+function onInput(e) {
+  let key = `${[state.selectedItem]}.${[e.target.name]}`;
+  emit("adressInput", {
+    [`${[state.selectedItem]}.${[e.target.name]}`]: e.target.value,
+  });
+}
+
+function onItemSelect(e) {
+  console.log(e.target.value);
+  if (!e.target.value.length) {
+    onItemReset();
+    return;
+  }
+  state.selectedItem = e.target.value;
+  state.isItemSelected = true;
+}
+
+function onItemReset() {
+  console.log("clearing...");
+  state.selectedItem = null;
+  state.isItemSelected = false;
+}
+
+onBeforeMount(() => {
+  console.log(props.items);
+});
+</script>
+
+<style scoped>
+.form-wrap {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0 var(--sl-spacing-medium);
+  margin: var(--sl-spacing-large) 0 var(--sl-spacing-x-large) 0;
+  padding-bottom: var(--sl-spacing-medium);
+  border-bottom: 1px solid var(--sl-color-neutral-400);
+}
+
+.grid-w-2 {
+  grid-column: span 2;
+}
+
+.grid-w-3 {
+  grid-column: span 3;
+}
+
+.grid-w-4 {
+  grid-column: span 4;
+}
+</style>