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

package/src/components/ShopOrderComplete.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="bind">
+    <h1 class="viur-shop-success-headline headline">
+      Vielen Dank für Ihre Bestellung
+    </h1>
+    <p class="paragraph"><strong>Ihre Bestellnummer:</strong> 123345670</p>
+    <p class="paragraph">
+      Wir haben Ihre Bestellung erhalten und werden diese schenllstmöglich
+      bearbeiten.<br />
+      Sie erhalten in wenigen Minuten eine Bestätigung per E-Mail.
+    </p>
+
+    <div
+      class="viur-shop-order-complete-slot"
+      v-if="additionalComponents.length"
+    >
+      <template v-for="component in additionalComponents">
+        <component
+          :is="component.component"
+          v-bind="component.props ? component.props : ''"
+        >
+        </component>
+      </template>
+    </div>
+
+    <div class="btn-wrap">
+      <sl-button size="medium" @click="goToStart()"> Zur Startseite </sl-button>
+
+      <sl-button variant="primary" @click="goToShop()" size="medium">
+        Weiter Einkaufen
+      </sl-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  redirectUrl: {
+    type: String,
+    required: true,
+  },
+  additionalComponents: {
+    type: Array,
+    default: [],
+  },
+});
+const emit = defineEmits(["goToStart"]);
+
+function goToStart() {
+  emit("goToStart");
+}
+
+function goToShop() {
+  window.location.href = props.redirectUrl;
+}
+</script>
+
+<style scoped>
+.btn-wrap {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  width: 100%;
+
+  margin-top: var(--sl-spacing-x-large);
+}
+
+.viur-shop-success-headline {
+  margin: 0 0 var(--sl-spacing-x-large) 0;
+  font-size: var(--shop-success-headline-size);
+}
+</style>

package/src/components/ShopOrderConfirm.vue

@@ -0,0 +1,291 @@
+<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"
+              @click="editShippingAddress(tabName)"
+            >
+              <sl-icon name="pencil" slot="prefix"></sl-icon>
+            </sl-button>
+          </div>
+          {{ cartStore.state.activeShippingAddress.firstname }}
+          {{ cartStore.state.activeShippingAddress.lastname }}<br />
+          {{ cartStore.state.activeShippingAddress.street_name }}
+          {{ cartStore.state.activeShippingAddress.street_number }}<br />
+          {{ cartStore.state.activeShippingAddress.zip_code }}
+          {{ cartStore.state.activeShippingAddress.city }}
+          {{ cartStore.state.activeShippingAddress.country }}<br />
+        </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.activeBillingAddress.firstname }}
+          {{ cartStore.state.activeBillingAddress.lastname }}<br />
+          {{ cartStore.state.activeBillingAddress.street_name }}
+          {{ cartStore.state.activeBillingAddress.street_number }}<br />
+          {{ cartStore.state.activeBillingAddress.zip_code }}
+          {{ cartStore.state.activeBillingAddress.city }}
+          {{ cartStore.state.activeBillingAddress.country }}<br />
+        </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-button size="small" @click="addOrder">
+        Zahlungspflichtig bestellen
+      </sl-button>
+      <!-- <sl-card
+      horizontal
+      class="viur-shop-cart-mini-card"
+      v-for="item in cartStore.state.carts[cartStore.state.basket].items"
+    >
+      <img
+        class="viur-shop-cart-mini-card-img"
+        slot="image"
+        :src="getImage(item.article.dest.key)"
+      />
+
+      <div class="viur-shop-cart-mini-cart-header" slot="header">
+        <h4 class="viur-shop-cart-mini-headline headline">{{ item.article.dest.shop_name }} | 425018</h4>
+      </div>
+      <div class="viur-shop-cart-mini-card-body-row">
+        <div class="viur-shop-cart-mini-card-body-info">
+          <div class="viur-shop-cart-mini-card-info-wrap">
+            <div class="viur-shop-cart-mini-card-info">
+              <span>Anzahl: </span>
+              1
+            </div>
+            <div class="viur-shop-cart-mini-card-info">
+              <span>Preis: </span>
+              {{ item.article.dest.shop_price_recommended }} €
+            </div>
+          </div>
+        </div>
+      </div>
+    </sl-card> -->
+    </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 emit = defineEmits(["editAddress"]);
+
+const props = defineProps({
+  tabName: { type: String, required: true },
+});
+
+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 editShippingAddress(e) {
+  emit("editAddress", e);
+}
+
+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/ShopOrderStepper.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="bind viur-shop-wrap">
+    <div
+      class="viur-shop-stepper-wrap"
+      :class="{ 'full-width': sidebarBottom }"
+    >
+      <slot name="main">
+        <sl-tab-group
+          class="viur-shop-order-tabgroup"
+          noScrollControls
+          @sl-tab-show="onTabChange($event)"
+          ref="tabGroup"
+        >
+          <StepperTab
+            v-for="(tab, index) in state.tabNames"
+            :key="tab"
+            :tab="tab"
+            :tabs="tabs"
+            :tabIdx="index"
+            :stepperLength="state.tabNames.length"
+          >
+          </StepperTab>
+
+          <StepperItem
+            v-for="tab in state.tabNames"
+            :tab="tab"
+            :tabs="tabs"
+            :key="tab"
+            @goToStart="goToStart()"
+            @editAddress="editAddress"
+          >
+          </StepperItem>
+        </sl-tab-group>
+      </slot>
+
+      <slot name="trigger" v-if="trigger">
+        <div
+          class="viur-shop-form-footer"
+          :class="{ 'flex-end': state.tabIdx === 0, 'last-row': sidebarBottom }"
+          v-if="state.tabIdx !== state.tabNames.length - 1"
+        >
+          <StepperTrigger
+            :index="state.tabIdx"
+            @prevTab="prevTab"
+            @nextTab="nextTab"
+          >
+          </StepperTrigger>
+        </div>
+      </slot>
+    </div>
+
+    <slot
+      name="sidebar"
+      v-if="sidebar && state.tabIdx < state.tabNames.length - 1"
+    >
+      <div class="viur-shop-sidebar-wrap" :class="{ bottom: sidebarBottom }">
+        <ShopSummary
+          :showDiscount="showDiscount"
+          :customShippingComponent="customShippingComponent"
+        >
+          <template #custom v-if="customComponent">
+            <component :is="customComponent"></component>
+          </template>
+        </ShopSummary>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import { reactive, computed, ref, onBeforeMount } from "vue";
+import StepperTab from "./ui/stepper/StepperTab.vue";
+import StepperItem from "./ui/stepper/StepperItem.vue";
+import StepperTrigger from "./ui/stepper/StepperTrigger.vue";
+import ShopSummary from "./ui/ShopSummary.vue";
+import { useCartStore } from "../stores/cart";
+
+const cartStore = useCartStore();
+
+const props = defineProps({
+  tabs: {
+    type: Object,
+    required: true,
+  },
+  sidebar: {
+    type: Boolean,
+    default: true,
+    required: false,
+  },
+  trigger: {
+    type: Boolean,
+    default: true,
+    required: false,
+  },
+  sidebarBottom: {
+    type: Boolean,
+    default: false,
+    required: false,
+  },
+  showDiscount: {
+    type: Boolean,
+    default: true,
+  },
+  customComponent: { default: undefined },
+  customShippingComponent: { default: undefined },
+});
+
+const emit = defineEmits(["tabChange"]);
+
+const state = reactive({
+  tabNames: computed(() => sortTabs(props.tabs)),
+  tabIdx: 0,
+  currentTab: "",
+});
+
+const tabGroup = ref(null);
+
+function sortTabs(tabs) {
+  let sortedArray = [];
+  let outputArray = [];
+
+  for (const tab in tabs) {
+    if (tabs[tab].position) {
+      sortedArray.push([tab, tabs[tab].position]);
+    } else {
+      sortedArray.push([tab, 0]);
+    }
+  }
+
+  sortedArray.sort((a, b) => {
+    return a[1] - b[1];
+  });
+
+  sortedArray.forEach((tab) => {
+    outputArray.push(tab[0]);
+  });
+
+  return outputArray;
+}
+
+function onTabChange(e) {
+  state.currentTab = e?.detail.name;
+  state.tabIdx = state.tabNames.indexOf(state.currentTab);
+
+  emit("tabChange", e);
+}
+
+function prevTab() {
+  if (state.tabIdx > 0) {
+    tabGroup.value.show(state.tabNames[state.tabIdx - 1]);
+  }
+}
+
+function nextTab() {
+  if (state.tabIdx < state.tabNames.length - 1) {
+    tabGroup.value.show(state.tabNames[state.tabIdx + 1]);
+  }
+}
+
+function goToStart() {
+  tabGroup.value.show(state.tabNames[0]);
+}
+
+function editAddress(e) {
+  tabGroup.value.show(e);
+}
+
+onBeforeMount(async () => {
+  await cartStore.init();
+  console.log("init node ");
+  const tabNames = sortTabs(props.tabs);
+  state.currentTab = tabNames[0];
+});
+</script>
+
+<style scoped>
+* {
+  box-sizing: border-box;
+}
+
+.viur-shop-wrap {
+  --shop-sidebar-background: var(--sl-color-neutral-100);
+  --shop-sidebar-columns: 4;
+  --shop-main-columns: 8;
+  --shop-tab-color: var(--sl-color-neutral-400);
+  --shop-tab-color-active: var(--ignt-color-primary);
+
+  --shop-form-headline-size: 1.5em;
+  --shop-success-headline-size: var(--shop-form-headline-size);
+
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  grid-template-rows: 1fr max-content;
+  grid-gap: var(--ignt-spacing-2x-large);
+
+  width: 100%;
+  border: 0 white solid;
+}
+
+@layer foundation.shop {
+  .viur-shop-sidebar-wrap {
+    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);
+    grid-column: auto / span var(--shop-sidebar-columns);
+    /* height has to be set or sidebar grows until infinity... */
+    height: min-content;
+    @media (min-width: 1024px) {
+      position: sticky;
+      top: 2rem;
+    }
+  }
+
+  .viur-shop-stepper-wrap {
+    display: flex;
+    flex-direction: column;
+    grid-column: auto / span var(--shop-main-columns);
+
+    @media (max-width: 1024px) {
+      grid-column: auto / span 12;
+    }
+
+    @media (max-width: 600px) {
+      &::part(active-tab-indicator) {
+        display: none;
+      }
+    }
+  }
+
+  .viur-shop-form-footer {
+    height: fit-content;
+
+    /* TODO: sticky Trigger yes no? */
+    /* position: sticky;
+    bottom: 2rem; */
+  }
+
+  :deep(.viur-shop-form-footer) {
+    display: flex;
+    justify-content: space-between;
+    margin-top: var(--sl-spacing-large);
+  }
+
+  .flex-end {
+    justify-content: flex-end;
+  }
+
+  .bottom {
+    grid-column: auto / span 12;
+    grid-row-start: 2;
+  }
+
+  .full-width {
+    grid-column: auto / span 12;
+  }
+
+  .last-row {
+    grid-row-start: 3;
+  }
+}
+</style>