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

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/{src/components/ui → old/components}/ShopSummary.vue

@@ -1,4 +1,3 @@
-,
 <template>
   <h2 class="viur-shop-cart-sidebar-headline headline">Zusammenfassung</h2>
   <br />
@@ -26,11 +25,11 @@
     </sl-format-number>
   </div>
   <div class="viur-shop-cart-sidebar-info-line">
-    <Shipping ref="shipping">
+    <shipping-info ref="shipping">
       <template #custom v-if="customShippingComponent">
-            <component :is="customShippingComponent"></component>
-          </template>
-    </Shipping>
+        <component :is="customShippingComponent"></component>
+      </template>
+    </shipping-info>
   </div>
   <div class="viur-shop-cart-sidebar-info-line total">
     <span>Gesamt:</span>
@@ -43,58 +42,57 @@
     </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">
-    HIER KANN DEIN BUTTON REIN
     <div class="viur-shop-cart-sidebar-btn-wrap">
-      <!-- TODO: Placement of discount? -->
-      <div class="viur-shop-discount-wrap" v-if="showDiscount">
-        <Discount></Discount>
-      </div>
-
       <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>
-    <!-- TODO: Delivery time estimate: slot -->
   </slot>
-  <slot name="custom"></slot>
 </template>
 
 <script setup>
-import Discount from "../cart/Discount.vue";
-import Shipping from "../order/process/Shipping.vue";
+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 { 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 props = defineProps({
-  showDiscount: {type: Boolean, default: true},
-  customShippingComponent:{type:Object,default:undefined},
+
+const state = reactive({
+  node: computed(() => cartStore.state.basket),
 });
-console.log("csc",props.customShippingComponent)
-const state=reactive({
-  node:{}
-})
 
 const totalPrice = computed(() => {
-  if (state.node?.shipping) {
+  if (shippingStore.state.selectedShippingMethod) {
     return (
       state.node.total +
-      state.node?.shipping?.dest.shipping_cost -
+      shippingStore.state.selectedShippingMethod?.dest.shipping_cost -
       state.node.discount
     );
   } else {
-    // use shippingprice formbasket
-    console.log(cartStore.state.basket);
-
-    if (cartStore.state.basket.length === 1) {
+    if (Object.keys(cartStore.state.childrenByNode).includes(state.node.key)) {
       return (
         state.node?.total +
-        cartStore.state.basket.shipping?.dest.shipping_cost -
+        shippingStore.state.selectedShippingMethod?.dest.shipping_cost -
         state.node.discount
       );
     } else {
@@ -102,11 +100,6 @@ const totalPrice = computed(() => {
     }
   }
 });
-onBeforeMount(async () => {
-  await cartStore.init();
-  state.node  = cartStore.state.basketRootNode;
-  console.log("get node",state.node)
-})
 </script>
 
 <style>

package/{src → old}/components/ShopUserData.vue

@@ -12,87 +12,78 @@
     <div class="viur-shop-multi-adress-box" v-for="n in state.amount" :key="n">
       <BaseLayout
         :customer="state.customer"
-        :custom-address="!state.customAddress['grp' + n]"
-        @edit-billing="state.editBilling = $event"
-        @edit-shipping="state.editShipping = $event"
+        :custom-address="!addressStore.state.clone"
+        @valid="emit('valid', $event)"
       >
-        <template #cart-selection v-if="multiMode">
+        <!-- <template #cart-selection v-if="multiMode">
           <CartSelection
             :carts="reduce(carts, n)"
             @cart-selected="onCartSelect($event, n)"
           >
           </CartSelection>
-        </template>
-        <template #mode-switch>
-          <sl-checkbox
-            :checked="true"
-            :ref="
-              (el) => {
-                if (el === null) return;
-
-                state.customAddress['grp' + n] = el.checked;
-              }
-            "
-            @sl-change="onCustomBillingAddress($event, n)"
-            class="viur-shop-form-bill-check"
-            v-html="$t('viur.shop.userdata.shipping_to_billaddress')"
-          >
-          </sl-checkbox>
-        </template>
-        <template
-          #shipping-address
-          v-if="
-            (state.editShipping && !state.customAddress['grp' + n]) ||
-            (!state.hasShippingAddress && !state.customAddress['grp' + n]) ||
-            cartStore.state.billingAddressList.length === 1
-          "
-        >
-          <UserDataForm
+        </template> -->
+
+        <template #billing-address v-if="state.billingList.length <= 1">
+          <AddForm
             :customer="state.customer"
-            v-model="cartStore.state.activeShippingAddress"
-            @add-success="state.alert = $event"
             :layout="layout"
+            v-model="addressStore.state.active.billing"
+            @add-success="state.alert = $event"
+            @valid="emit('valid', $event)"
           >
-          </UserDataForm>
+          </AddForm>
         </template>
-        <template
-          #billing-address
-          v-if="
-            state.editBilling ||
-            !state.hasBillingAddress ||
-            cartStore.state.billingAddressList.length === 1
-          "
-        >
-          <UserDataForm
+
+        <template #shipping-address v-if="state.shippingList.length <= 1">
+          <AddForm
             :customer="state.customer"
-            :mode="'billing'"
-            v-model="cartStore.state.activeBillingAddress"
-            @add-success="state.alert = $event"
+            :type="'shipping'"
             :layout="layout"
+            v-model="addressStore.state.active.shipping"
+            @add-success="state.alert = $event"
+            @valid="emit('valid', $event)"
           >
-          </UserDataForm>
+          </AddForm>
+        </template>
+
+        <template #mode-switch>
+          <sl-checkbox
+            :checked="addressStore.state.clone"
+            class="viur-shop-form-bill-check"
+            v-html="$t('viur.shop.userdata.shipping_to_billaddress')"
+            @sl-change="onCustomShipping"
+          >
+          </sl-checkbox>
         </template>
       </BaseLayout>
     </div>
 
-    <ActionBar
+    <!-- <ActionBar
       @on-address-add="addAddress"
       @on-address-remove="removeAddress"
       v-if="multiMode"
     >
-    </ActionBar>
+    </ActionBar> -->
   </div>
 </template>
 
 <script setup>
+// Functions
 import { ref, reactive, computed, onBeforeMount, watch } from "vue";
-import UserDataForm from "./ui/userdata/AddForm.vue";
+
+// Stores
+import { useCartStore } from "../stores/cart";
+import { useAddressStore } from "../stores/address";
+
+// Components
 import CartSelection from "./ui/userdata/multi/CartSelection.vue";
+import AddForm from "./ui/userdata/AddForm.vue";
 import ActionBar from "./ui/userdata/multi/ActionBar.vue";
 import ShopAlert from "./ui/generic/alerts/ShopAlert.vue";
-import { useCartStore } from "../stores/cart";
 import BaseLayout from "./ui/userdata/BaseLayout.vue";
 
+const emit = defineEmits(["valid"]);
+
 const props = defineProps({
   multiMode: {
     type: Boolean,
@@ -104,6 +95,7 @@ const props = defineProps({
 });
 
 const cartStore = useCartStore();
+const addressStore = useAddressStore();
 
 const state = reactive({
   selection: {},
@@ -125,21 +117,15 @@ const state = reactive({
     return r;
   }),
   customAddress: {},
-  hasBillingAddress: computed(() => cartStore.state.billingAddressList.length),
-  hasShippingAddress: computed(
-    () => cartStore.state.shippingAddressList.length,
-  ),
-  editBilling: false,
-  editShipping: false,
-  billingData: {},
-  shippingData: {},
+  billingList: computed(() => addressStore.getList()),
+  shippingList: computed(() => addressStore.getList("shipping")),
 });
 
 const carts = ref(
-  cartStore.state.childrenByNode?.[cartStore.state.basketRootNode.key]
-    ? cartStore.state.childrenByNode?.[
-        cartStore.state.basketRootNode.key
-      ].filter((cart) => cart.skel_type === "node")
+  cartStore.state.childrenByNode?.[cartStore.state.basket.key]
+    ? cartStore.state.childrenByNode?.[cartStore.state.basket.key].filter(
+        (cart) => cart.skel_type === "node",
+      )
     : [
         { name: "Warenkorb1", key: "213123123123" },
         { name: "Warenkorb2", key: "2131231232131233123" },
@@ -206,9 +192,9 @@ function reduce(arr, grp) {
   return result;
 }
 
-function onCustomBillingAddress(e, grp) {
-  state.customAddress["grp" + grp] = e.target.checked;
-  cartStore.state.cloneBilling = e.target.checked;
+function onCustomShipping(e, grp) {
+  // state.customAddress["grp" + grp] = e.target.checked;
+  addressStore.state.clone = e.target.checked;
 }
 
 onBeforeMount(() => {});

package/{src → old}/components/cart/CartLeafModel.vue

@@ -33,8 +33,8 @@
       slot="image"
       :src="
         getImage(
-          modelValue.article.dest.shop_image
-            ? modelValue.article.dest.shop_image
+          modelValue?.shop_image
+            ? modelValue.shop_image
             : undefined,
         )
       "
@@ -59,6 +59,8 @@
         min="0"
         :value="modelValue.quantity"
         @sl-change="updateItem"
+        :disabled="cartStore.state.freeze"
+        ref="itemCount"
       >
       </sl-input>
     </div>
@@ -91,6 +93,7 @@
         variant="primary"
         title="Remove from cart"
         @click="confirm.show()"
+        v-if="!cartStore.state.freeze"
       >
         <sl-icon name="trash" slot="prefix"></sl-icon>
       </sl-button>
@@ -115,6 +118,7 @@
 import { computed, onBeforeMount, reactive, ref } from "vue";
 import { Request } from "@viur/vue-utils";
 import { useCartStore } from "../../stores/cart";
+import { useDebounceFn } from "@vueuse/core";
 // import ShopPriceFormatter from "../ui/generic/ShopPriceFormatter.vue";
 
 const props = defineProps(["modelValue"]);
@@ -123,6 +127,7 @@ const emit = defineEmits(["update:modelValue"]);
 const cartStore = useCartStore();
 const confirm = ref(null);
 const isConfirmed = ref(false);
+const itemCount = ref(null);
 
 function getImage(image) {
   if (image !== undefined) return Request.downloadUrlFor(image);
@@ -130,18 +135,23 @@ function getImage(image) {
   return cartStore.state.placeholder;
 }
 
-function updateItem(ev) {
-  let newEvent = { ...props.modelValue };
+const updateItem = useDebounceFn(
+  (ev) => {
+    console.log(ev);
+    let newEvent = { ...props.modelValue };
 
-  newEvent.quantity = ev.target.value;
+    newEvent.quantity = ev.target.value;
 
-  console.log("update", newEvent.quantity);
-  if (newEvent.quantity < 1) {
-    confirm.value.show();
-  } else {
-    emit("update:modelValue", newEvent);
-  }
-}
+    console.log("update", newEvent.quantity);
+    if (newEvent.quantity < 1) {
+      confirm.value.show();
+    } else {
+      emit("update:modelValue", newEvent);
+    }
+  },
+  1500,
+  { maxWait: 5000 },
+);
 
 function removeItem() {
   let newEvent = { ...props.modelValue };
@@ -151,16 +161,14 @@ function removeItem() {
 
 function resetItem() {
   if (!isConfirmed.value) {
-    let newEvent = { ...props.modelValue };
-    newEvent.quantity = 1;
-    emit("update:modelValue", newEvent);
+    itemCount.value.value = props.modelValue.quantity;
   }
 }
 
 async function onConfirm() {
   isConfirmed.value = true;
-  confirm.value.hide();
   removeItem();
+  confirm.value.hide();
 }
 </script>
 

package/{src → old}/components/cart/CartNode.vue

@@ -1,4 +1,5 @@
 <template>
+
   <sl-details v-if="node.children" :summary="node.name">
     <slot></slot>
   </sl-details>

package/{src → old}/components/cart/CartTree.vue

@@ -1,10 +1,23 @@
 <template>
   <CartTreeWrapper :tree="state.tree" @update:modelValue="handleChange">
   </CartTreeWrapper>
+
+  <sl-button
+    @click="
+      cartStore.addNode(
+        cartStore.state.basket.key,
+        (cartType = 'basket'),
+      )
+    "
+    >addbutton</sl-button
+  >
 </template>
 <script setup>
 import { reactive, watch, computed } from "vue";
 import CartTreeWrapper from "./CartTreeWrapper.vue";
+import { useCartStore } from "../../stores/cart";
+
+const cartStore = useCartStore();
 
 const props = defineProps({
   modelValue: { type: Array, required: true },

package/old/components/cart/CartView.vue

@@ -0,0 +1,82 @@
+<template>
+  <div v-if="state.loading">keine Einträge im Warenkorb</div>
+  <template v-else>
+    <div
+      class="viur-shop-cart-node"
+      v-for="entry in modelValue"
+      :key="entry.key"
+    >
+      <CartLeafModel
+        :modelValue="entry"
+        v-if="entry.skel_type === 'leaf'"
+        @update:modelValue="handleChange"
+      />
+    </div>
+    <shop-summary v-if="standalone">
+      <template #custom v-if="customComponent">
+        <component :is="customComponent"></component>
+      </template>
+    </shop-summary>
+  </template>
+</template>
+<script setup>
+import { reactive, computed } from "vue";
+import CartLeafModel from "./CartLeafModel.vue";
+import { useCartStore } from "../../stores/cart";
+import ShopSummary from "../ShopSummary.vue";
+
+const props = defineProps({
+  modelValue: { type: Array, required: true },
+  standalone: { type: Boolean, default: true },
+  customComponent: { default: null },
+});
+
+const emits = defineEmits(["update:modelValue"]);
+
+const cartStore = useCartStore();
+
+const state = reactive({
+  loading: computed(() => {
+    return props.modelValue.length ? false : true;
+  }),
+});
+
+async function handleChange(e) {
+  // ! NOTE: it is very important to unpack the prop (copy the array) at this point to avoid prop mutation!!!
+  let temp = [...props.modelValue];
+
+  temp.forEach(async (item, index) => {
+    if (item.key === e.key) {
+      if (item.quantity === e.quantity) {
+        return; //return if value has no changes so if value is 0 or remove button is clicked no request will be fired
+      }
+      if (e.quantity < 1) {
+        await cartStore.removeItem(e.article.dest.key, e.parententry);
+        temp.splice(index, 1);
+      } else {
+        await cartStore.updateItem(
+          e.article.dest.key,
+          e.parententry,
+          e.quantity,
+        );
+        temp[index] = e;
+      }
+    }
+  });
+
+  emits("update:modelValue", temp);
+}
+
+// watch(() => props.modelValue,
+//  (oldVal, newVal) => {
+//   if(oldVal === )
+//  }
+//  );
+</script>
+
+<style scoped>
+.viur-shop-cart-node {
+  display: flex;
+  flex-direction: column;
+}
+</style>