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

package/old/client/index.js

@@ -0,0 +1,23 @@
+import {
+    HTTPError,
+    request,
+    getSkey,
+    errorHandler,
+} from './HttpClient.js'
+import {
+    ViURShopClient,
+} from './ViURShopClient.js'
+import {
+    CartType,
+    CustomerType,
+} from './types.js';
+
+export {
+    HTTPError,
+    request,
+    getSkey,
+    errorHandler,
+    ViURShopClient,
+    CartType,
+    CustomerType,
+}

package/old/client/types.js

@@ -0,0 +1,10 @@
+export const CartType = Object.freeze({
+    WISHLIST: 'wishlist',
+    BASKET: 'basket',
+});
+
+
+export const CustomerType = Object.freeze({
+    PRIVATE: 'private',
+    BUSINESS: 'business',
+});

package/old/components/ExampleUsage.vue

@@ -0,0 +1,95 @@
+<template>
+  <sl-spinner v-if="!rootNode"></sl-spinner>
+  <shop-order-stepper
+    :tabs="state.tabs"
+    @tabChange="handleTabs"
+    :sidebar="true"
+    :sidebar-bottom="false"
+    :show-discount="true"
+    :custom-shipping-component="state.customShipping"
+    v-else
+  >
+    <!-- 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 ShopCart from "./ShopCart.vue";
+import ShopOrderConfirm from "./ShopOrderConfirm.vue";
+import ShopOrderStepper from "./ShopOrderStepper.vue";
+import ShopOrderComplete from "./ShopOrderComplete.vue";
+import ShopUserData from "./ShopUserData.vue";
+import ShopPaymentProvider from "./ShopPaymentProvider.vue";
+import ShopShippingMethod from "./ShopShippingMethod.vue";
+
+import { useCartStore } from "../stores/cart";
+
+const cartStore = useCartStore();
+
+const rootNode = computed(() =>
+  cartStore.state.basket.key ? cartStore.state.basket.key : "",
+);
+
+const state = reactive({
+  tabs: {
+    cart: {
+      component: shallowRef(ShopCart),
+      displayName: "Warenkorb",
+      props: {
+        standalone: false,
+        cartKey: rootNode,
+      },
+      icon: { name: "bag" },
+      position: 1,
+    },
+    userData: {
+      component: shallowRef(ShopUserData),
+      props: {
+        multiMode: false,
+      },
+      displayName: "Daten Eingeben",
+      icon: { name: "card-list" },
+      position: 2, //reihfolge ändern
+    },
+    selectShippingMethod: {
+      component: shallowRef(ShopShippingMethod),
+      displayName: "Versandart wählen",
+      icon: { name: "truck" },
+      position: 3,
+    },
+    selectPaymentProvider: {
+      component: shallowRef(ShopPaymentProvider),
+      props: {},
+      displayName: "Zahlungsart auswählen",
+      icon: { name: "card-list" },
+      position: 4, //reihfolge ändern
+    },
+    orderConfirm: {
+      component: shallowRef(ShopOrderConfirm),
+      props: {},
+      displayName: "Bestellung prüfen",
+      icon: { name: "clipboard-check" },
+      position: 5,
+    },
+
+    orderComplete: {
+      component: shallowRef(ShopOrderComplete),
+      props: {},
+      displayName: "Bestellung Abgeschlossen",
+      icon: { name: "bag-check" },
+      position: 6,
+      showNext: false,
+    },
+  },
+});
+
+onBeforeMount(async () => {
+  await cartStore.setConfig("shop", "path/to/placeholder");
+  await cartStore.init(false, false);
+});
+</script>

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/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/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>