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

package/old/components/ShopOrderStepper.vue

@@ -0,0 +1,352 @@
+<template>
+  <template v-for="msg in messageStore.state.errors">
+    <shop-alert
+      v-if="!messageStore.state.blacklist.includes(msg.id)"
+      :msg="msg.msg"
+      :variant="msg.variant"
+      :iconName="msg.iconName"
+      :duration="msg?.duration ? msg.duration : 3000"
+      :closeable="msg.closeable"
+      :key="msg.id"
+      @sl-hide="messageStore.state.blacklist.push(msg.id)"
+    >
+    </shop-alert>
+  </template>
+
+  <sl-dialog
+    no-header
+    ref="freezeCart"
+    @sl-hide="
+      cartStore.state.freeze ? () => {} : tabGroup.show(state.tabNames[0])
+    "
+  >
+    <p>Wollen sie fortfahren?</p>
+    <i>*Der Warenkorb kann nicht mehr verändert werden bei Bestätigung</i>
+    <sl-bar>
+      <sl-button
+        slot="left"
+        variant="danger"
+        @click="freezeCart.hide()"
+        size="medium"
+      >
+        Abbrechen
+      </sl-button>
+      <sl-button
+        slot="right"
+        variant="success"
+        @click="onFreezeCart"
+        size="medium"
+      >
+        Bestätigen
+      </sl-button>
+    </sl-bar>
+  </sl-dialog>
+
+  <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-hide="onTabHide"
+          @sl-tab-show="onTabChange"
+          ref="tabGroup"
+        >
+          <StepperTab
+            v-for="(tab, index) in state.tabNames"
+            :key="tab"
+            :tab="tab"
+            :currentTab="state.currentTab"
+            :tabs="state.tabs"
+            :tabIdx="index"
+            :stepperLength="state.tabNames.length"
+            :disabled="
+              index === 0 ? false : !state.tabs[state.tabNames[index - 1]].valid
+            "
+          >
+          </StepperTab>
+
+          <template v-for="tab in state.tabNames" :key="tab">
+            <StepperItem
+              :tab="tab"
+              :currentTab="state.currentTab"
+              :tabs="state.tabs"
+              @valid="stepIsValid"
+            >
+            </StepperItem>
+          </template>
+        </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"
+            :tab="state.currentTab"
+            :tabs="state.tabs"
+            @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>
+          <template #action-buttons>
+            <slot name="action-buttons"></slot>
+          </template>
+        </ShopSummary>
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script setup>
+import { reactive, computed, ref, onBeforeMount, provide } 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 "./ShopSummary.vue";
+import ShopAlert from "./ui/generic/alerts/ShopAlert.vue";
+import { useMessageStore } from "../stores/message";
+import { useOrderStore } from "../stores/order";
+import { useCartStore } from "../stores/cart";
+
+const messageStore = useMessageStore();
+const orderStore = useOrderStore();
+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(state.tabs)),
+  currentTabObj: computed(() => state.tabs[state.tabNames[state.tabIdx]]), //dont use as prop, cause of multiple rerenderings
+  tabIdx: 0,
+  currentTab: "",
+  tabs: {},
+});
+provide("stepperState", state);
+
+const tabGroup = ref(null);
+const freezeCart = ref(null);
+
+function sortTabs(tabs) {
+  const sortedArray = [];
+  const 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) {
+  let tab = e?.detail.name;
+
+  state.currentTab = tab;
+  state.tabIdx = state.tabNames.indexOf(tab);
+
+  emit("tabChange", e);
+}
+
+function onTabHide(e) {
+  if (state.currentTab==='cart'){
+    orderStore.add_or_update()
+  }
+
+  /*if (state.tabIdx === 0 && !cartStore.state.freeze) {
+    freezeCart.value.show();
+  }*/
+}
+
+function onFreezeCart() {
+  cartStore.state.freeze = true;
+  orderStore.handler();
+  freezeCart.value.hide();
+}
+
+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);
+}
+
+function stepIsValid(e) {
+  console.log("stepIsValid", e);
+
+  state.tabs[state.currentTab].valid = e;
+  if (cartStore.state.freeze) {
+    orderStore.handler();
+  }
+}
+
+onBeforeMount(() => {
+  state.tabs = { ...props.tabs }; //make reactive so we can save states to tabs
+
+  const tabNames = sortTabs(state.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>

package/old/components/ShopPaymentProvider.vue

@@ -0,0 +1,113 @@
+<template>
+
+  <loading-handler :isLoading="paymentStore.state.isLoading"
+                  :isUpdating="paymentStore.state.isUpdating"
+                  :hasError="paymentStore.state.hasError"
+                  :errorMessage="paymentStore.state.errorMessage">
+
+      <PaymentSelector :options="state.options" @valid="checkPaymentIsValid">
+
+      </PaymentSelector>
+
+  </loading-handler>
+
+  <div v-if="paymentStore.state.paymentSelection?.[0].startsWith('unzer-')">
+    <unzer-payment></unzer-payment>
+  </div>
+</template>
+<script setup>
+import {useCartStore} from "../stores/cart";
+import {usePaymentStore} from "../stores/payment"
+import {onBeforeMount, reactive,computed, watch} from "vue";
+import LoadingHandler from "./generic/loadinghandler.vue"
+import CardSelector from "./ui/generic/CardSelector.vue"
+import unzerPayment from './paymentProvider/unzerPayment.vue'
+
+import PaymentSelector from "./ui/payment/PaymentSelector.vue";
+
+
+const cartStore = useCartStore();
+const paymentStore = usePaymentStore()
+const emits = defineEmits(['valid'])
+const props = defineProps({
+})
+
+
+  let iconMap = {
+    'prepayment':'currency-euro',
+    'unzer-card':'credit-card-2-back-fill',
+    'unzer-paypal':'paypal',
+    'unzer-ideal':'bank2',
+    'unzer-sofort':'cash-coin'
+  }
+
+  let simpleProviders = [
+    'prepayment',
+    'unzer-paypal',
+    'unzer-sofort'
+  ]
+
+const state = reactive({
+  selection:null,
+  selectionValid:false,
+  options:computed(()=>{
+    let options = []
+    let option = {
+      paymenttype:null,
+      widget:"default",
+      name:null,
+      description:null,
+      icon:null
+
+    }
+
+    for (const provider of paymentStore.state.paymentProviders){
+      let currentOption = {...option}
+      currentOption.paymenttype = provider[0]
+      currentOption.name = provider[1]['title']
+      currentOption.description = provider[1]['descr']
+      currentOption.icon = iconMap[provider[0]]
+      if (simpleProviders.includes(provider[0])){
+        currentOption.widget = "simple"
+      }
+
+      options.push(currentOption)
+    }
+
+
+    return options
+  })
+})
+
+
+//await orderStore.startCheckout()
+// > on weiter
+
+async function updatePaymentProvider(selection){
+  let update = paymentStore.updateOrder()
+  if (update){
+    emits("valid", true)
+  }
+}
+
+function checkPaymentIsValid(selection) {
+  console.log(selection)
+  state.selectionValid = selection
+}
+
+
+onBeforeMount(async () => {
+  await paymentStore.initPayment()
+  console.log("AAA")
+  const script = document.createElement('script');
+        script.src = 'https://static.unzer.com/v1/unzer.js';
+        script.addEventListener('error', e => console.log(e.error));
+        document.head.appendChild(script);
+  console.log("BBBB")
+});
+
+</script>
+
+<style scoped>
+
+</style>

package/old/components/ShopShippingMethod.vue

@@ -0,0 +1,52 @@
+<template>
+  <loading-handler :isLoading="shippingStore.state.isLoading"
+                  :isUpdating="shippingStore.state.isUpdating"
+                  :hasError="shippingStore.state.hasError"
+                  :errorMessage="shippingStore.state.errorMessage">
+
+    <card-selector :options="shippingStore.state.shippingData"
+                    v-model:selection="shippingStore.state.selectedShippingMethod"
+                    @change="updateShippingMethod"
+    >
+      <template v-slot="{option, index}">
+          <img slot="image">
+          {{ option['dest']['name'] }}
+          <div slot="footer">
+            Lieferzeit: {{ option['dest']['delivery_time_range'] }}
+          </div>
+      </template>
+    </card-selector>
+  </loading-handler>
+</template>
+<script setup>
+import {useCartStore} from "../stores/cart";
+import {useShippingStore} from "../stores/shipping"
+import {onBeforeMount, reactive,computed, watch} from "vue";
+import LoadingHandler from "./generic/loadinghandler.vue"
+import CardSelector from "./ui/generic/CardSelector.vue"
+
+const cartStore = useCartStore();
+const shippingStore = useShippingStore()
+const emits = defineEmits(['valid'])
+const props = defineProps({
+})
+
+const state = reactive({
+})
+
+onBeforeMount(async () => {
+  await shippingStore.initShipping()
+});
+
+async function updateShippingMethod(selection){
+  let update = await shippingStore.updateCart()
+  if (update){
+    emits("valid", true)
+  }
+}
+
+</script>
+
+<style scoped>
+
+</style>

package/old/components/ShopSummary.vue

@@ -0,0 +1,138 @@
+<template>
+  <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
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="state.node?.total"
+    >
+    </sl-format-number>
+    <br />
+  </div>
+  <div class="viur-shop-cart-sidebar-info-line">
+    <span>Rabatt</span>
+
+    <sl-format-number
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="state.node?.discount ? state.node.discount : 0"
+    >
+    </sl-format-number>
+  </div>
+  <div class="viur-shop-cart-sidebar-info-line">
+    <shipping-info ref="shipping">
+      <template #custom v-if="customShippingComponent">
+        <component :is="customShippingComponent"></component>
+      </template>
+    </shipping-info>
+  </div>
+  <div class="viur-shop-cart-sidebar-info-line total">
+    <span>Gesamt:</span>
+    <sl-format-number
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="totalPrice"
+    >
+    </sl-format-number>
+    <!-- TODO: Some project needs "VAT included" here -->
+  </div>
+  <!-- TODO: Placement of discount? -->
+  <div class="viur-shop-discount-wrap" v-if="showDiscount">
+    <Discount></Discount>
+  </div>
+
+  <slot name="action-buttons">
+    <div class="viur-shop-cart-sidebar-btn-wrap">
+      <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>
+  </slot>
+</template>
+
+<script setup>
+import Discount from "./cart/Discount.vue";
+import ShippingInfo from "./ui/generic/ShippingInfo.vue";
+import { computed, onBeforeMount, reactive, ref } from "vue";
+import { useCartStore } from "../stores/cart";
+import { useShippingStore } from "../stores/shipping";
+import { useOrderStore } from "../stores/order";
+
+const props = defineProps({
+  showDiscount: { type: Boolean, default: true },
+  customShippingComponent: { type: Object, default: undefined },
+});
+
+const cartStore = useCartStore();
+const shippingStore = useShippingStore();
+const orderStore = useOrderStore();
+
+const shipping = ref(null);
+
+const state = reactive({
+  node: computed(() => cartStore.state.basket),
+});
+
+const totalPrice = computed(() => {
+  if (shippingStore.state.selectedShippingMethod) {
+    return (
+      state.node.total +
+      shippingStore.state.selectedShippingMethod?.dest.shipping_cost -
+      state.node.discount
+    );
+  } else {
+    if (Object.keys(cartStore.state.childrenByNode).includes(state.node.key)) {
+      return (
+        state.node?.total +
+        shippingStore.state.selectedShippingMethod?.dest.shipping_cost -
+        state.node.discount
+      );
+    } else {
+      return state.node.total + 0 - state.node.discount; //kein shipping
+    }
+  }
+});
+</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;
+}
+</style>