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

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

@@ -1,232 +0,0 @@
-<template>
-  <div class="wrap">
-    <div class="viur-shop-item-view-image-wrap">
-      <sl-carousel class="viur-shop-item-view-carousel-thumbnails" navigation loop>
-        <sl-carousel-item>
-          <img
-            :alt="state.item.shop_name"
-            :src="getImage(state.item)"
-          />
-        </sl-carousel-item>
-      </sl-carousel>
-
-      <div class="viur-shop-item-view-thumbnails">
-        <div class="viur-shop-item-view-thumbnails-scroller">
-          <img :alt="state.item.shop_name"
-               class="viur-shop-item-view-thumbnails-image active"
-               :src="getImage(state.item)" />
-        </div>
-      </div>
-    </div>
-
-    <div class="viur-shop-item-view-info-wrap">
-      <h1 class="viur-shop-item-view-headline">{{ state.item.shop_name }}</h1>
-      <h2 class="viur-shop-item-view-subline">B 21 x H 6,5 x T 19 cm</h2>
-
-      <div class="viur-shop-item-view-price">
-        {{ state.item.shop_price_retail }} €
-      </div>
-
-      <div class="viur-shop-item-view-paragraph">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
-        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
-        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-      </div>
-
-      <div class="viur-shop-item-view-btn-wrap">
-        <sl-button
-            size="small"
-            class="viur-shop-item-view-add-to-cart-btn"
-            variant="primary"
-            title="Add to cart"
-            @click.stop="cartStore.addToCart(item.key, cartStore.state.currentCart)"
-          >
-            <sl-icon name="bag-plus"
-                     slot="prefix"
-                     ></sl-icon>
-
-            In den Warenkorb
-          </sl-button>
-
-          <sl-button
-            size="small"
-            outline
-            class="viur-shop-item-view-add-to-favourites-btn"
-            variant="primary"
-            title="Add to favourites"
-          >
-            <sl-icon name="heart"
-                     slot="prefix"
-                     ></sl-icon>
-            Auf die Wunschliste
-          </sl-button>
-      </div>
-    </div>
-
-  </div>
-  <br>
-  <h1 class="viur-shop-item-view-headline">Ähnliche Artikel</h1>
-  <div class="viur-shop-item-view-item-grid">
-      <ItemCard :item="state.item">
-      </ItemCard>
-
-  </div>
-
-</template>
-
-<script setup>
-import { computed, onBeforeMount, reactive } from "vue";
-import { Request } from "@viur/vue-utils";
-import { useRoute } from "vue-router";
-// component imports
-import ItemCard from "../item/ItemCard.vue";
-import '@viur/shoelace/dist/components/carousel/carousel.js';
-
-const route = useRoute();
-
-const state = reactive({
-  item: {},
-});
-
-function getImage(item) {
-  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) {
-    return Request.downloadUrlFor(item.dk_artikel.dest.image);
-  }
-
-  return imageUrl;
-}
-
-onBeforeMount(async () => {
-  Request.get(`/json/variante/view/${route.params.item}`).then(async (resp) => {
-    let data = await resp.json();
-
-    state.item = data.values;
-  });
-});
-</script>
-
-<style scoped>
-  .wrap{
-    display: grid;
-    grid-template-columns: 45% minmax(0 ,1fr);
-  }
-
-  .viur-shop-item-view-info-wrap{
-    padding: var(--sl-spacing-x-large);
-  }
-
-  .viur-shop-item-view-image-wrap{
-    display: flex;
-    flex-direction: column;
-  }
-
-  sl-carousel{
-    aspect-ratio: 1;
-    background-color: var(--sl-color-neutral-200);
-
-    &::part(base){
-      display: flex;
-      gap: 0;
-     }
-
-     &::part(scroll-container){
-      border-radius: 0;
-      }
-
-    &::part(navigation-button){
-      position: absolute;
-      background-color: color-mix(in hsl, var(--sl-color-neutral-0) 85%, transparent);
-      color: var(--app-primary-color);
-      border-radius: 0;
-      transition: all ease.3s;
-      opacity: 0;
-     }
-
-    &::part(navigation-button--previous){
-      left: 0;
-     }
-
-    &::part(navigation-button--next){
-      right: 0;
-     }
-
-    &:hover{
-      &::part(navigation-button){
-        opacity: 1;
-       }
-     }
-  }
-
-  .viur-shop-item-view-thumbnails {
-    display: flex;
-    justify-content: start;
-    margin-top: vaR(--sl-spacing-medium)
-  }
-
-  .viur-shop-item-view-thumbnails-scroller {
-    display: flex;
-    gap: var(--sl-spacing-small);
-    overflow-x: auto;
-    scrollbar-width: none;
-    scroll-behavior: smooth;
-    scroll-padding: var(--sl-spacing-small);
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  .viur-shop-item-view-thumbnails-image {
-    width: 64px;
-    height: 64px;
-    object-fit: cover;
-    opacity: 0.3;
-    will-change: opacity;
-    transition: 250ms opacity;
-    cursor: pointer;
-
-    &.active {
-      opacity: 1;
-    }
-  }
-
-
-  .viur-shop-item-view-headline{
-    margin-bottom: var(--sl-spacing-small);
-  }
-
-  .viur-shop-item-view-subline{
-    margin-bottom: var(--sl-spacing-small);
-  }
-
-  .viur-shop-item-view-price{
-    font-size: 1.4em;
-    margin-bottom: var(--sl-spacing-small);
-  }
-
-  .viur-shop-item-view-paragraph{
-    margin-bottom: var(--sl-spacing-x-large);
-  }
-
-  .viur-shop-item-view-btn-wrap{
-    display: flex;
-    flex-direction: column;
-
-    sl-button{
-      margin-bottom: var(--sl-spacing-x-small);
-    }
-  }
-
-  .viur-shop-item-view-item-grid{
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    grid-gap: var(--sl-spacing-medium);
-  }
-</style>

package/src/components/order/process/ConfirmView.vue

@@ -1,312 +0,0 @@
-<template>
-  <Loader v-if="!state.cartIsInit"></Loader>
-
-  <template v-else>
-
-    <div class="list">
-      <h2 class="viur-shop-cart-headline headline">Bestellung prüfen</h2>
-      <div class="viur-shop-cart-address-wrap">
-        <div class="viur-shop-cart-address">
-          <div class="viur-shop-cart-address-headline">
-            Versandadresse
-            <sl-button outline size="small">
-              <sl-icon name="pencil" slot="prefix"></sl-icon>
-            </sl-button>
-          </div>
-          {{ cartStore.state.shippingAddress.firstname }} {{ cartStore.state.shippingAddress.lastname }}<br/>
-          {{ cartStore.state.shippingAddress.street_name }} {{ cartStore.state.shippingAddress.street_number }}<br/>
-          {{ cartStore.state.shippingAddress.zip_code }} {{ cartStore.state.shippingAddress.city }}
-          {{ cartStore.state.shippingAddress.country }}<br/>
-
-          <br/>
-          ##TODO MAIL<br/>
-          ##TODO Phone
-        </div>
-        <div class="viur-shop-cart-address">
-          <div class="viur-shop-cart-address-headline">
-            Rechnungsadresse
-            <sl-button outline size="small">
-              <sl-icon name="pencil" slot="prefix"></sl-icon>
-            </sl-button>
-          </div>
-          {{ cartStore.state.billingAddress.firstname }} {{ cartStore.state.billingAddress.lastname }}<br/>
-          {{ cartStore.state.billingAddress.street_name }} {{ cartStore.state.billingAddress.street_number }}<br/>
-          {{ cartStore.state.billingAddress.zip_code }} {{ cartStore.state.billingAddress.city }}
-          {{ cartStore.state.billingAddress.country }}<br/>
-          <br/>
-          ##TODO MAIL<br/>
-          ##TODO Phone
-
-        </div>
-
-      </div>
-
-      <div class="viur-shop-cart-payment">
-        <div class="viur-shop-cart-payment-method">
-          <span>Zahlungsmethode:</span>
-          {{ state.selectedPaymentProvider }}
-        </div>
-        <sl-button outline size="small">
-          <sl-icon name="pencil" slot="prefix"></sl-icon>
-        </sl-button>
-      </div>
-
-      <h2 class="viur-shop-cart-headline headline">Warenkorb</h2>
-
-      <CartView :in-order-confirm="true"></CartView>
-
- <sl-checkbox @sl-change="onTosAccept">
-          Ich akzeptiere die geltenden AGBs und Datenschutzbestimmungen
-        </sl-checkbox>
-
-        <div class="viur-shop-cart-sidebar-btn-wrap" v-if="state.showOrderButton">
-          <sl-button
-            :variant="state.showOrderButton ? 'info' : 'disabled'"
-            size="small"
-            :disabled="!state.showOrderButton"
-            @click="addOrder"
-          >
-            Zahlungspflichtig bestellen
-          </sl-button>
-        </div>
-      <teleport to="#order_sidebar" v-show="false"><!--TOO-->
-        <h2 class="viur-shop-cart-sidebar-headline headline">Jetzt Bestellen</h2>
-        <br/>
-        <!-- <div class="viur-shop-cart-sidebar-info-line">
-          <span>Zwischensumme</span>
-          {{ cartStore.state?.basket ? cartStore.state.carts[cartStore.state.basket].info.total : "00,00" }} €
-        </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?.basket ? cartStore.state.carts[cartStore.state.basket].info.total : "00" }} €
-        </div> -->
-
-
-      </teleport>
-    </div>
-  </template>
-</template>
-
-<script setup>
-import {reactive, onBeforeMount, computed} from "vue";
-import Loader from "@viur/vue-utils/generic/Loader.vue";
-import {useCartStore} from "../../../stores/cart.js";
-import {Request} from "@viur/vue-utils";
-import CartView from "../../cart/CartView.vue";
-
-const cartStore = useCartStore();
-
-// const searchWarning = ref()
-const state = reactive({
-  cartIsInit: computed(() => {
-    return true
-  }),
-  itemsIsInit: computed(() => {
-    return !!cartStore.state?.carts[cartStore.state.basket].items;
-  }),
-  selectedPaymentProvider: computed(() => {
-    /* fixme  this compute generates an error
-      Uncaught (in promise) TypeError: Cannot set properties of null (setting '__vnode')
-      but the value is correct.
-     */
-    return cartStore.state?.selectedPaymentProvider.title;
-
-
-  }),
-  images: {},
-  showOrderButton: false,
-
-});
-
-
-function getImage(item) {
-  Request.get(`/json/dk_variante/view/${item}`).then(async (resp) => {
-    let data = await resp.json();
-
-    data = data.values;
-
-    let imageUrl = data.dk_artikel.dest.image
-      ? Request.downloadUrlFor(data.dk_artikel.dest.image)
-      : "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80";
-
-    state.images[item] = imageUrl;
-  });
-
-  return state.images[item];
-}
-
-function onTosAccept(e) {
-  state.showOrderButton = e.target.checked;
-}
-function addOrder()
-{
-  console.log("start order add");
-  cartStore.orderAdd();
-}
-
-onBeforeMount(async () => {
-  await cartStore.init();
-});
-</script>
-
-<style scoped>
-
-.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);
-  }
-}
-
-sl-alert {
-  margin-top: var(--sl-spacing-medium);
-  margin-bottom: var(--sl-spacing-medium);
-}
-
-sl-tooltip {
-  &::part(body) {
-    line-height: 1.2;
-    font-weight: 400;
-    padding: 10px;
-  }
-}
-
-sl-menu-item {
-  &::part(base) {
-    padding: 0.2em 0.9em 0.2em 0.8em;
-  }
-
-  &::part(checked-icon) {
-    display: none;
-  }
-
-  &::part(prefix) {
-    margin-right: 10px;
-  }
-
-  &::part(suffix) {
-    margin-right: -1.5em;
-  }
-}
-
-.viur-shop-cart-sidebar-info-line {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  margin: var(--sl-spacing-2x-small) 0;
-
-  span {
-    margin-right: auto;
-  }
-
-  &.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;
-  }
-}
-
-.viur-shop-cart-mini-card {
-  margin-bottom: var(--sl-spacing-x-large);
-
-  &::part(header) {
-    border-bottom: none;
-    padding-top: 0;
-    padding-right: 0;
-  }
-
-  &::part(image) {
-    flex-basis: 25%;
-    max-width: 90px;
-  }
-
-  &::part(body) {
-    display: flex;
-    flex: 1;
-    padding-top: 0;
-    padding-bottom: 0;
-    padding-right: 0;
-  }
-
-  &::part(group) {
-    padding: var(--sl-spacing-small) 0;
-  }
-}
-
-.viur-shop-cart-mini-card-body-row {
-  display: grid;
-  grid-template-columns: 1fr auto auto;
-  gap: var(--sl-spacing-large);
-  flex: 1;
-}
-
-.viur-shop-cart-mini-card-body-info {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.viur-shop-cart-mini-card-info-wrap {
-  display: flex;
-  flex-wrap: nowrap;
-  gap: var(--sl-spacing-medium);
-}
-
-.viur-shop-cart-mini-card-info {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-
-  span {
-    margin-right: var(--sl-spacing-x-small);
-    font-weight: 600;
-  }
-}
-
-.viur-shop-cart-address-wrap {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--sl-spacing-x-large);
-  margin-bottom: var(--sl-spacing-x-large);
-}
-
-.viur-shop-cart-address-headline {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
-  font-weight: 600;
-}
-
-.viur-shop-cart-payment {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--sl-spacing-x-large);
-
-  span {
-    font-weight: 600;
-  }
-}
-
-.viur-shop-cart-headline {
-  margin: 0 0 var(--sl-spacing-x-large) 0;
-  font-size: var(--shop-form-headline-size);
-}
-</style>

package/src/components/order/process/ExampleUsage.vue

@@ -1,113 +0,0 @@
-<template>
-  <shop-order-stepper
-    :tabs="state.tabs"
-    @tabChange="handleTabs"
-    :sidebar="true"
-    :sidebar-bottom="false"
-    :show-discount="false"
-  >
-    <!-- customize slots -->
-    <!-- <template #main> The Order Stepper </template> -->
-    <!-- <template #trigger> Buttons for Stepper control </template> -->
-    <!-- <template #sidebar> the side/bottom bar </template> -->
-  </shop-order-stepper>
-</template>
-
-<script setup>
-import { onBeforeMount, reactive, shallowRef, computed } from "vue";
-import ShopOrderStepper from "../../ShopOrderStepper.vue";
-import CartView from "../../cart/CartView.vue";
-import ShopCart from "../../ShopCart.vue";
-import ConfirmView from "../../ShopOrderConfirm.vue";
-import ShopOrderComplete from "../../ShopOrderComplete.vue";
-import ShopUserData from "../../ShopUserData.vue";
-import { useCartStore } from "../../../stores/cart";
-
-const cartStore = useCartStore();
-
-const rootNode = computed(() =>
-  cartStore.state.basketRootNode.key ? cartStore.state.basketRootNode.key : "",
-);
-const state = reactive({
-  rootNode: {},
-  tabs: {
-    cart: {
-      component: shallowRef(CartView),
-      props: {
-        sidebar: true,
-        mode: "basket",
-        cartKey: rootNode, // cartKey (on initial call has to be a root node) is a required prop, make sure that cartStore.init() is called before cart is mounted
-        placeholder: "/static/partnerbereich/img/placeholder.svg",
-        standalone: false,
-      },
-      displayName: "Warenkorb",
-      icon: { name: "bag" },
-      position: 2,
-      disabled: false,
-    },
-    confirm: {
-      component: shallowRef(ConfirmView),
-      props: {
-        tabName: "userInfo",
-      },
-      displayName: "Bestellung prüfen",
-      icon: { name: "clipboard-check" },
-      position: 5,
-      disabled: false,
-    },
-    orderComplete: {
-      component: shallowRef(ShopOrderComplete),
-      props: {
-        redirectUrl: "http://localhost:8081",
-        additionalComponents: [
-          {
-            component: shallowRef(CartView),
-            props: {
-              sidebar: true,
-              mode: "basket",
-              cartKey: rootNode,
-            },
-          },
-        ],
-      },
-      displayName: "Bestellung Abgeschlossen",
-      icon: { name: "bag-check" },
-      position: 6,
-      disabled: true,
-    },
-    userInfo: {
-      component: shallowRef(ShopUserData),
-      props: { multiMode: false },
-      displayName: "Daten Eingeben",
-      icon: { name: "card-list" },
-      position: 3,
-      disabled: false,
-    },
-    cartTest: {
-      component: shallowRef(ShopCart),
-      props: {
-        sidebar: true,
-        mode: "basket",
-        cartKey: rootNode, // cartKey (on initial call has to be a root node) is a required prop, make sure that cartStore.init() is called before cart is mounted
-        placeholder: "/static/partnerbereich/img/placeholder.svg",
-        standalone: false,
-      },
-      displayName: "neuer Korb",
-      icon: { name: "bag" },
-      position: 1,
-      disabled: false,
-    },
-  },
-});
-
-function handleTabs(e) {
-  if (e?.detail.name === "confirm") {
-    state.tabs.orderComplete.disabled = false;
-  }
-}
-
-onBeforeMount(async () => {
-  await cartStore.init("/static/partnerbereich/img/placeholder.svg");
-  await cartStore.getAddressStructure();
-});
-</script>

package/src/components/order/process/OrderTabHeader.vue

@@ -1,16 +0,0 @@
-<template>
-  HALLO
-  <div v-if="a">{{ a }}</div>
-  <div v-if="b">{{ b }}</div>
-</template>
-
-<script setup>
-const props = defineProps({
-  a: {
-    type: String,
-  },
-  b: {
-    type: String,
-  },
-});
-</script>