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

package/src/components/{cart → order/process}/ConfirmView.vue

@@ -2,90 +2,79 @@
   <Loader v-if="!state.cartIsInit"></Loader>
 
   <template v-else>
-      <div class="list">
-        <h2 class="viur-shop-cart-headline headline">Bestellung prüfen</h2>
-        <br />
-
-        <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>
-            Roland Brose<br />
-            Speicherstraße 33<br />
-            44147 Dortmund, DE<br />
-            <br />
-            rb@mausbrand.de<br />
-            0231 21 34 68 90
+
+    <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>
-          <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>
-            Roland Brose<br />
-            Speicherstraße 33<br />
-            44147 Dortmund, DE<br />
-            <br />
-            rb@mausbrand.de<br />
-            0231 21 34 68 90
+          {{ 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 class="viur-shop-cart-payment">
-          <div class="viur-shop-cart-payment-method">
-            <span>Zahlungsmethode:</span>
-            Paypal
-          </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>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>
-        <br />
-
-        <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>
+      <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>
 
-      <teleport to="#order_sidebar">
+        <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">
+        <br/>
+        <!-- <div class="viur-shop-cart-sidebar-info-line">
           <span>Zwischensumme</span>
-          {{ cartStore.state.carts[cartStore.state.basket].info.total }} €
+          {{ 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>
@@ -97,47 +86,47 @@
         </div>
         <div class="viur-shop-cart-sidebar-info-line total">
           <span>Gesamt:</span>
-          {{ cartStore.state.carts[cartStore.state.basket].info.total }} €
-        </div>
+          {{ cartStore.state?.basket ? cartStore.state.carts[cartStore.state.basket].info.total : "00" }} €
+        </div> -->
 
-        <sl-checkbox @sl-change="onTosAccept">
-          Ich akzeptiere die geltenden AGBs und Datenschutzbestimmungen
-        </sl-checkbox>
 
-        <div class="viur-shop-cart-sidebar-btn-wrap">
-          <sl-button
-            :variant="state.showOrderButton ? 'info' : 'disabled'"
-            size="small"
-            :disabled="!state.showOrderButton"
-          >
-            Zahlungspflichtig bestellen
-          </sl-button>
-        </div>
       </teleport>
     </div>
   </template>
 </template>
 
 <script setup>
-import { reactive, onBeforeMount, computed } from "vue";
+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 {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 cartStore.state.basket.length ? true : false;
+    return true
   }),
   itemsIsInit: computed(() => {
-    return cartStore.state.carts[cartStore.state.basket].items ? true : false;
+    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();
@@ -155,8 +144,12 @@ function getImage(item) {
 }
 
 function onTosAccept(e) {
-  if (e.target.checked) state.showOrderButton = true;
-  if (!e.target.checked) state.showOrderButton = false;
+  state.showOrderButton = e.target.checked;
+}
+function addOrder()
+{
+  console.log("start order add");
+  cartStore.orderAdd();
 }
 
 onBeforeMount(async () => {
@@ -311,4 +304,9 @@ sl-menu-item {
     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,100 +1,113 @@
 <template>
-  <order-view :tabs="state.tabs" @tabChange="handleTabs" />
+  <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 } from "vue";
-import { ListRequest } from "@viur/vue-utils";
-
+import { onBeforeMount, reactive, shallowRef, computed } from "vue";
+import ShopOrderStepper from "../../ShopOrderStepper.vue";
 import CartView from "../../cart/CartView.vue";
-import ConfirmView from "../../cart/ConfirmView.vue";
-import OrderView from "./OrderView.vue";
-import CategoryView from "../category/CategoryView.vue";
-import OrderComplete from "./OrderComplete.vue";
-import UserInformation from "../information/UserInformation.vue";
-import UserInfoMulti from "../information/UserInfoMulti.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" },
+      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: "cart", library: "hsk" },
+      icon: { name: "bag" },
       position: 2,
       disabled: false,
-      atShow: null,
-      atHide: null,
     },
-    // confirm: {
-    //   component: shallowRef(ConfirmView),
-    //   props: {},
-    //   displayName: "Bestellung prüfen",
-    //   icon: { name: "order-check", library: "hsk" },
-    //   position: 5,
-    //   disabled: false,
-    //   atShow: null,
-    //   atHide: null,
-    // },
-    // order: {
-    //   component: shallowRef(CategoryView),
-    //   props: {
-    //     listHandler: ListRequest("categorystore", {
-    //       module: "variante",
-    //       params: { type: "dk", limit: 99 },
-    //     }),
-    //   },
-    //   displayName: "Artikel Bestellen",
-    //   icon: { name: "cart-add", library: "hsk" },
-    //   position: 1,
-    //   disabled: false,
-    //   atShow: null,
-    //   atHide: null,
-    // },
-    // orderComplete: {
-    //   component: shallowRef(OrderComplete),
-    //   props: {},
-    //   displayName: "Bestellung Abgeschlossen",
-    //   icon: { name: "order-confirmed", library: "hsk" },
-    //   position: 6,
-    //   disabled: true,
-    //   atShow: null,
-    //   atHide: null,
-    // },
+    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(UserInformation),
-      props: {},
+      component: shallowRef(ShopUserData),
+      props: { multiMode: false },
       displayName: "Daten Eingeben",
-      icon: { name: "user", library: "hsk" },
+      icon: { name: "card-list" },
       position: 3,
       disabled: false,
-      atShow: null,
-      atHide: null,
     },
-    // userInfoMulti: {
-    //   component: shallowRef(UserInfoMulti),
-    //   props: {},
-    //   displayName: "Daten Eingeben (Multi)",
-    //   icon: { name: "user", library: "hsk" },
-    //   position: 4,
-    //   disabled: false,
-    //   atShow: null,
-    //   atHide: null,
-    // },
+    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) {
-  // console.dir("hier", e.target)
   if (e?.detail.name === "confirm") {
     state.tabs.orderComplete.disabled = false;
   }
 }
 
 onBeforeMount(async () => {
-  await cartStore.getAdressStructure();
+  await cartStore.init("/static/partnerbereich/img/placeholder.svg");
+  await cartStore.getAddressStructure();
 });
 </script>

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

@@ -1,7 +1,16 @@
 <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>

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

@@ -0,0 +1,62 @@
+<template>
+
+  <div v-for="(providerData,providerName,i) in cartStore.state.paymentProviders">
+    <sl-card selectable :id="'povider__'+providerName" @sl-change="providerChanged" :selected="i===0">
+      <img
+        slot="image"
+        src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
+        alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+      />
+      <div slot="footer">
+        {{ providerData?.title }}
+        <br>
+        {{ providerData?.descr }}
+      </div>
+    </sl-card>
+  </div>
+
+</template>
+
+<script setup>
+//todo styling
+// set image
+
+import {onBeforeMount, reactive} from "vue";
+import {useCartStore} from "../../../stores/cart";
+
+const cartStore = useCartStore();
+
+function providerChanged(e) {
+  if (e.target.selected) {
+    console.log( "a",cartStore.state.selectedPaymentProvider)
+    console.log( "b",cartStore.state.paymentProviders)
+
+
+    cartStore.state.selectedPaymentProviderName = e.target.id.replace("povider__", "")
+    cartStore.state.selectedPaymentProvider = cartStore.state.paymentProviders[e.target.id.replace("povider__", "")]
+    console.log(cartStore.state.selectedPaymentProvider)
+    document.querySelectorAll("sl-card").forEach((card) => {
+
+      if (card !== e.target) {
+        card.selected = false;
+      }
+    })
+
+  } else {//can't deselect now
+    e.target.selected = true;
+
+  }
+  console.log("provider changed", e)
+}
+
+onBeforeMount(async () => {
+  await cartStore.getPaymentProviders();
+})
+</script>
+
+<style scoped>
+/*todo select styling for sl-card*/
+sl-card[selected]::part(base) {
+  border: 5px solid #39b200;
+}
+</style>

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

@@ -0,0 +1,46 @@
+<template>
+  <div class="viur-shop-cart-sidebar-info-line">
+
+    <span>Versandkosten </span>
+    <sl-format-number
+      type="currency"
+      currency="EUR"
+      :value="shippingCost"
+      lang="de">
+    </sl-format-number>
+
+  </div>
+  <div class="viur-shop-cart-sidebar-info-line">
+  <slot name="custom"></slot>
+  </div>
+
+</template>
+<script setup>
+import {useCartStore} from "../../../stores/cart";
+import {onBeforeMount, reactive,computed} from "vue";
+
+const cartStore = useCartStore();
+const shippingCost = computed(() => {
+  return cartStore.state.basketRootNode?.shipping?.dest.shipping_cost ? cartStore.state.basketRootNode?.shipping.dest.shipping_cost : 0
+})
+onBeforeMount(async () => {
+  await cartStore.init();
+  console.log("has shipping ? ",cartStore.state.basketRootNode.shipping);
+});
+
+</script>
+
+<style scoped>
+.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;
+  }
+}
+</style>