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

package/old/components/ShopCart.vue

@@ -0,0 +1,91 @@
+<template>
+  <sl-spinner v-if="state.loading"></sl-spinner>
+  <CartTree v-model="state.data" v-else-if="!state.loading && tree"></CartTree>
+  <CartView
+    v-model="state.data"
+    :standalone="standalone"
+    :customComponent="customComponent"
+    v-else
+  >
+  </CartView>
+</template>
+
+<script setup>
+import { reactive, onBeforeMount, watch } from "vue";
+import { useCartStore } from "../stores/cart.js";
+import { useOrderStore } from "../stores/order.js";
+import CartTree from "./cart/CartTree.vue";
+import CartView from "./cart/CartView.vue";
+
+const props = defineProps({
+  tree: { type: Boolean, default: false },
+  cartKey: { type: String },
+  standalone: { type: Boolean, default: true },
+  customComponent: { default: undefined },
+});
+const emits = defineEmits(["valid", "invalid"]);
+
+const cartStore = useCartStore();
+const orderStore = useOrderStore();
+
+const state = reactive({
+  currentItem: {},
+  currentNode: {},
+  data: [],
+  loading: true,
+});
+
+async function getChildren(parentKey = props.cartKey) {
+  state.loading = true;
+  if (orderStore.state.currentbasketKey && orderStore.state.currentbasketKey!==props.cartKey){
+    parentKey = orderStore.state.currentbasketKey
+  }
+
+  const children = await cartStore.getChildren(parentKey);
+
+  children.forEach(async (child) => {
+    if (child.skel_type === "node") {
+      if (!Object.keys(cartStore.state.childrenByNode.includes(parentKey))) {
+        cartStore.state.childrenByNode[parentKey] = [];
+      }
+      cartStore.state.childrenByNode[parentKey].push(child);
+      state.data.push(child);
+      await getChildren(child.key);
+    } else {
+      state.data.push(child);
+    }
+  });
+  state.loading = false;
+}
+
+async function getCart() {
+  state.data = [];
+  await getChildren();
+  if (state.data.length) {
+    state.data.push(cartStore.state.basket);
+    emits("valid", true);
+  } else {
+    emits("valid", false);
+  }
+}
+
+ watch(
+  () => props.cartKey,
+   async (newVal, oldVal) => {
+     if (newVal) {
+      await getCart();
+    }
+  },
+);
+
+onBeforeMount(async () => {
+  if (!props.standalone) {
+    await getCart();
+  }
+  if (props.cartKey && props.standalone) {
+    await getCart();
+  }
+});
+</script>
+
+<style scoped></style>

package/old/components/ShopOrderConfirm.vue

@@ -0,0 +1,311 @@
+<template>
+  <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>
+        {{ addressStore.state.active.shipping.firstname }}
+        {{ addressStore.state.active.shipping.lastname }}<br />
+        {{ addressStore.state.active.shipping.street_name }}
+        {{ addressStore.state.active.shipping.street_number }}<br />
+        {{ addressStore.state.active.shipping.zip_code }}
+        {{ addressStore.state.active.shipping.city }}<br />
+        {{ getCountryName(addressStore.state.active.shipping.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>
+        {{ addressStore.state.active.billing.firstname }}
+        {{ addressStore.state.active.billing.lastname }}<br />
+        {{ addressStore.state.active.billing.street_name }}
+        {{ addressStore.state.active.billing.street_number }}<br />
+        {{ addressStore.state.active.billing.zip_code }}
+        {{ addressStore.state.active.billing.city }}<br />
+        {{ getCountryName(addressStore.state.active.billing.country) }}<br />
+      </div>
+    </div>
+
+    <div class="viur-shop-cart-payment">
+      <div class="viur-shop-cart-payment-method">
+        <span>Zahlungsmethode:</span>
+        <img
+          :src="state.selectedPaymentProvider[1].image_path"
+          style="width: 100px"
+        />
+      </div>
+      <sl-button outline size="small">
+        <sl-icon name="pencil" slot="prefix"></sl-icon>
+      </sl-button>
+    </div>
+
+    <div class="viur-shop-cart-payment">
+      <div class="viur-shop-cart-payment-method">
+        <span>Versandart:</span>
+        <p>
+          {{ shippingStore.state.selectedShippingMethod.dest.name }}
+          -
+          <sl-format-number
+            type="currency"
+            currency="EUR"
+            :value="
+              shippingStore.state.selectedShippingMethod.dest.shipping_cost
+            "
+            lang="de"
+          >
+          </sl-format-number>
+        </p>
+      </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>
+
+    <sl-spinner v-if="state.loading"></sl-spinner>
+    <CartList :list="state.data" :limit="1" v-else></CartList>
+    <sl-button size="small" @click=""> Zahlungspflichtig bestellen </sl-button>
+  </div>
+</template>
+
+<script setup>
+import { computed, onBeforeMount, reactive } from "vue";
+import CartList from "./ui/generic/CartList.vue";
+import { usePaymentStore } from "../stores/payment.js";
+import { useAddressStore } from "../stores/address.js";
+import { useOrderStore } from "../stores/order.js";
+import { useCartStore } from "../stores/cart.js";
+import { useShippingStore } from "../stores/shipping.js";
+
+const emit = defineEmits(["editAddress"]);
+
+const props = defineProps({});
+
+const cartStore = useCartStore();
+const paymentStore = usePaymentStore();
+const addressStore = useAddressStore();
+const orderStore = useOrderStore();
+const shippingStore = useShippingStore();
+
+// const searchWarning = ref()
+const state = reactive({
+  loading: true,
+  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 paymentStore.state.paymentSelection;
+  }),
+  images: {},
+  showOrderButton: false,
+  data: [],
+});
+
+function editShippingAddress(e) {
+  emit("editAddress", e);
+}
+
+function getCountryName(val) {
+  if (!addressStore.state.structure || !val) {
+    return val;
+  }
+  for (const country of addressStore.state.structure.country.values) {
+    if (val === country[0]) {
+      return country[1];
+    }
+  }
+  return val;
+}
+
+async function getOrderCart(
+  parentKey = orderStore.state.currentOrder.cart.dest.key,
+) {
+  state.loading = true;
+  const children = await cartStore.getChildren(parentKey);
+
+  children.forEach(async (child) => {
+    if (child.skel_type === "node") {
+      if (!Object.keys(cartStore.state.childrenByNode.includes(parentKey))) {
+        cartStore.state.childrenByNode[parentKey] = [];
+      }
+      cartStore.state.childrenByNode[parentKey].push(child);
+      state.data.push(child);
+      await getChildren(child.key);
+    } else {
+      state.data.push(child);
+    }
+  });
+  state.loading = false;
+}
+
+onBeforeMount(async () => {
+  await getOrderCart();
+});
+</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 → old}/components/ShopOrderStepper.vue

@@ -1,4 +1,47 @@
 <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"
@@ -8,28 +51,33 @@
         <sl-tab-group
           class="viur-shop-order-tabgroup"
           noScrollControls
-          @sl-tab-show="onTabChange($event)"
+          @sl-tab-hide="onTabHide"
+          @sl-tab-show="onTabChange"
           ref="tabGroup"
         >
           <StepperTab
             v-for="(tab, index) in state.tabNames"
             :key="tab"
             :tab="tab"
-            :tabs="tabs"
+            :currentTab="state.currentTab"
+            :tabs="state.tabs"
             :tabIdx="index"
             :stepperLength="state.tabNames.length"
+            :disabled="
+              index === 0 ? false : !state.tabs[state.tabNames[index - 1]].valid
+            "
           >
           </StepperTab>
 
-          <StepperItem
-            v-for="tab in state.tabNames"
-            :tab="tab"
-            :tabs="tabs"
-            :key="tab"
-            @goToStart="goToStart()"
-            @editAddress="editAddress"
-          >
-          </StepperItem>
+          <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>
 
@@ -41,6 +89,8 @@
         >
           <StepperTrigger
             :index="state.tabIdx"
+            :tab="state.currentTab"
+            :tabs="state.tabs"
             @prevTab="prevTab"
             @nextTab="nextTab"
           >
@@ -61,6 +111,9 @@
           <template #custom v-if="customComponent">
             <component :is="customComponent"></component>
           </template>
+          <template #action-buttons>
+            <slot name="action-buttons"></slot>
+          </template>
         </ShopSummary>
       </div>
     </slot>
@@ -68,13 +121,18 @@
 </template>
 
 <script setup>
-import { reactive, computed, ref, onBeforeMount } from "vue";
+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 "./ui/ShopSummary.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({
@@ -108,16 +166,20 @@ const props = defineProps({
 const emit = defineEmits(["tabChange"]);
 
 const state = reactive({
-  tabNames: computed(() => sortTabs(props.tabs)),
+  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) {
-  let sortedArray = [];
-  let outputArray = [];
+  const sortedArray = [];
+  const outputArray = [];
 
   for (const tab in tabs) {
     if (tabs[tab].position) {
@@ -134,17 +196,34 @@ function sortTabs(tabs) {
   sortedArray.forEach((tab) => {
     outputArray.push(tab[0]);
   });
-
   return outputArray;
 }
 
 function onTabChange(e) {
-  state.currentTab = e?.detail.name;
-  state.tabIdx = state.tabNames.indexOf(state.currentTab);
+  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]);
@@ -165,10 +244,19 @@ function editAddress(e) {
   tabGroup.value.show(e);
 }
 
-onBeforeMount(async () => {
-  await cartStore.init();
-  console.log("init node ");
-  const tabNames = sortTabs(props.tabs);
+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>