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

package/old/components/generic/loadinghandler.vue

@@ -0,0 +1,76 @@
+<template>
+    <template v-if="isLoading">
+        <slot name="loading"> 
+            <shop-alert duration="Infinity" variant="info" :closeable="false">
+                <template #icon>
+                    <sl-spinner class="spinner-loading" slot="icon"></sl-spinner>
+                </template>
+                <template #alertMsg>
+                    Daten werden abgefragt...
+                </template>
+            </shop-alert>
+        </slot>
+    </template>
+    <template v-else-if="isUpdating">
+        <slot name="updating"> 
+            <shop-alert duration="Infinity" variant="info" :closeable="false">
+                <template #icon>
+                    <sl-spinner class="spinner-loading" slot="icon"></sl-spinner>
+                </template>
+                <template #alertMsg>
+                    Daten werden aktualisiert...
+                </template>
+            </shop-alert>
+        </slot>
+    </template>
+    <template v-else-if="hasError">
+        <slot name="error"> 
+            <shop-alert duration="Infinity" iconName="x-lg" variant="danger" :closeable="false">
+                <template #alertMsg>
+                    {{ errorMessage }}
+                </template>
+            </shop-alert>
+        </slot>
+    </template>
+    <template v-else>
+        <slot>
+        </slot>
+    </template>
+
+
+    
+</template>
+
+<script setup>
+import ShopAlert from '../ui/generic/alerts/ShopAlert.vue'
+
+const props = defineProps({
+    isLoading:{
+        type:Boolean,
+        default:true
+    },
+    isUpdating:{
+        type:Boolean,
+        default:false
+    },
+    hasError:{
+        type:Boolean,
+        default:false
+    },
+    errorMessage:{
+        type:String,
+        default:"Ein Fehler ist aufgetreten."
+    }
+
+})
+</script>
+
+<style scoped>
+
+.spinner-loading{
+    --indicator-color:var(--sl-color-info-500);
+}
+.spinner-error{
+    --indicator-color:var(--sl-color-danger-500);
+}
+</style>

package/old/components/paymentProvider/unzerPayment.vue

@@ -0,0 +1,140 @@
+<template>
+
+    <form id="payment-form" class="unzerUI form" novalidate
+          @submit.prevent="submitFormToUnzer"
+    >
+        <template v-if="paymentStore.state.paymentSelection[0] === 'unzer-card'">
+            <div class="field">
+                <div id="card-element-id-number" class="unzerInput">
+                    <!-- Card number UI Element is inserted here. -->
+                </div>
+            </div>
+            <div class="two fields">
+                <div class="field ten wide">
+                    <div id="card-element-id-expiry" class="unzerInput">
+                        <!-- Card expiry date UI Element is inserted here. -->
+                    </div>
+                </div>
+                <div class="field six wide">
+                    <div id="card-element-id-cvc" class="unzerInput">
+                        <!-- Card CVC UI Element is inserted here. -->
+                    </div>
+                </div>
+            </div>
+        </template>
+
+        <template v-if="paymentStore.state.paymentSelection[0] === 'unzer-paypal'">
+            <div id="paypal-element" class="field"></div>
+        </template>
+
+        <template v-if="paymentStore.state.paymentSelection[0] === 'unzer-ideal'">
+            <div id="ideal-element" class="field"></div>
+        </template>
+
+        <div id="error-holder" class="field" style="color: #9f3a38">
+            <!-- Errors will be inserted here -->
+        </div>
+
+        <div class="field">
+            <button
+                class="unzerUI primary button fluid"
+                type="submit">
+                Pay
+            </button>
+        </div>
+    </form>
+
+</template>
+
+<script setup>
+import {reactive, computed, onBeforeMount,watch} from 'vue'
+import {usePaymentStore} from "../../stores/payment"
+import {useOrderStore} from '../../stores/order'
+import { Request } from '@viur/vue-utils'
+const paymentStore = usePaymentStore()
+const orderStore = useOrderStore()
+
+const state = reactive({
+    unzer: computed(()=>{
+        //if (!orderStore.state.checkout) return null
+
+        return new unzer(orderStore.state.checkout.payment.public_key, {locale: 'de-DE'})
+    }),
+})
+
+function initUnzerForm(){
+    //Unzer field definition
+    if (paymentStore.state.paymentSelection[0] === 'unzer-card') {
+        const card = state.unzer.Card();
+        // Rendering input field card number
+        card.create('number', {
+            containerId: 'card-element-id-number',
+            onlyIframe: false,
+        });
+        // Rendering input field card expiry
+        card.create('expiry', {
+            containerId: 'card-element-id-expiry',
+            onlyIframe: false,
+        });
+        // Rendering input field card cvc
+        card.create('cvc', {
+            containerId: 'card-element-id-cvc',
+            onlyIframe: false,
+        });
+
+        state.handler = card
+    } else if (paymentStore.state.paymentSelection[0] === 'unzer-paypal') {
+        // Creating a PayPal instance
+        const paypal = state.unzer.Paypal()
+        // Rendering input field
+        //paypal.create('email', {
+        //     containerId: 'paypal-element',
+        //});
+        state.handler = paypal;
+    } else if (paymentStore.state.paymentSelection[0] === 'unzer-sofort') {
+        const sofort = state.unzer.Sofort()
+        state.handler= sofort;
+    } else if (paymentStore.state.paymentSelection[0] === 'unzer-ideal') {
+        const ideal = state.unzer.Ideal()
+        ideal.create('ideal', {
+            containerId: 'ideal-element',
+        });
+        state.handler = ideal;
+    }
+}
+
+function submitFormToUnzer(){
+    let paymenttarget = paymentStore.state.paymentSelection[0].split("-")[1]
+    //send to unzer
+    state.handler.createResource().then((result)=>{
+        Request.post(`/${orderStore.state.shopClient.shop_module}/pp_unzer_${paymenttarget}/save_type`, {dataObj:{
+            order_key: orderStore.state.currentOrderkey,
+            type_id: result.id,
+        }}).then(async (resp)=>{
+            let data = await resp.json()
+            orderStore.state.currentOrder = data
+            await orderStore.startCheckout()
+        }).catch(error => {
+            console.log(error)
+        })
+    }).catch((error)=> {
+        // handle errors
+        console.error(error)
+    })
+}
+
+
+async function initPayment(){
+    initUnzerForm()
+}
+
+watch(()=>paymentStore.state.paymentSelection, (newVal, oldVal)=>{
+    initUnzerForm()
+})
+
+
+onBeforeMount(async ()=>{
+    initPayment()
+})
+
+</script>

package/old/components/simple/ShopUserData.vue

@@ -0,0 +1,161 @@
+<template>
+    Billing:{{ orderStore.state.currentOrder['billing_address'] }} <br>
+    Shipping: {{ cartStore.state.basket['shipping_address'] }}
+    ----<br>
+
+
+    <div class="viur-shop-cart-address-headline">
+      {{ $t("skeleton.address.address_type.shipping") }}
+    </div>
+    <loading-handler :isLoading="state.shippingFormLoading || state.billingFormLoading"
+                  :isUpdating="state.shippingSending || state.billingSending"
+                  :hasError="state.hasError"
+                  :errorMessage="state.errorMessage">
+    </loading-handler>
+    <ViForm
+        ref="shippingForm"
+        :module="`${cartStore.state.shopModuleName}/address`"
+        :action="cartStore.state.basket['shipping_address']? 'edit' : 'add'"
+        :skelkey="cartStore.state.basket['shipping_address']? cartStore.state.basket['shipping_address']['dest']['key'] : null"
+        :useCategories="false"
+        :layout="DefaultLayout"
+      >
+    </ViForm>
+    <div>
+      <sl-switch checked @sl-change="state.billingIsShipping=$event.target.checked">Verwende Lieferadresse als Rechnungsadresse</sl-switch>
+    </div>
+
+    <div v-show="!state.billingIsShipping">
+      <div class="viur-shop-cart-address-headline">
+        {{ $t("skeleton.address.address_type.billing") }}
+      </div>
+
+      <ViForm
+        ref="billingForm"
+        :module="`${cartStore.state.shopModuleName}/address`"
+        :action="orderStore.state.currentOrder['billing_address']? 'edit' : 'add'"
+        :skelkey="orderStore.state.currentOrder['billing_address']? orderStore.state.currentOrder['billing_address']['dest']['key'] : null"
+        :useCategories="false"
+        :layout="DefaultLayout"
+      >
+    </ViForm>
+    </div>
+    <sl-button @click="saveAddresses">weiter</sl-button>
+</template>
+
+<script setup>
+// Functions
+import { ref, reactive, computed, onBeforeMount, watch } from "vue";
+import { Request } from '@viur/vue-utils'
+import ViForm from "@viur/vue-utils/forms/ViForm.vue";
+import DefaultLayout from "./SimpleDefaultLayout.vue";
+// Stores
+import { useCartStore } from "../../stores/cart";
+import { useAddressStore } from "../../stores/address";
+import { useOrderStore } from "../../stores/order";
+
+import loadingHandler from "../generic/loadinghandler.vue"
+
+
+const emit = defineEmits(["valid"]);
+
+const props = defineProps({
+});
+
+const cartStore = useCartStore();
+const addressStore = useAddressStore();
+const orderStore = useOrderStore()
+
+const shippingForm = ref(null)
+const billingForm = ref(null)
+
+
+
+
+
+const state = reactive({
+  billingIsShipping:true,
+
+  shippingFormLoading:computed(()=>{
+    if (!shippingForm.value){
+      return true
+    }
+    return shippingForm.value.state.loading
+  }),
+
+  billingFormLoading:computed(()=>{
+    if (!billingForm.value){
+      return true
+    }
+    return billingForm.value.state.loading
+  }),
+
+  shippingSending:false,
+  billingSending:false,
+  shippingSuccess:false,
+  billingSuccess:false,
+  hasError:false,
+  errorMessage:"",
+})
+
+function saveAddresses(){
+  state.shippingSending = true
+  state.billingSending = true
+  state.shippingSuccess = false
+  state.billingSuccess = false
+
+  shippingForm.value.sendData().then(async (resp)=>{
+    let data = await resp.json()
+    state.shippingSending = undefined
+    if (data['action']==="addSuccess"){
+      state.shippingSuccess = true
+    }
+  })
+
+  // copy shipping to billing
+  if(state.billingIsShipping){
+    billingForm.value.state.skel = shippingForm.value.state.skel
+  }
+
+  billingForm.value.sendData().then(async (resp)=>{
+    let data = await resp.json()
+    state.billingSending = undefined
+    if (data['action']==="addSuccess"){
+      state.billingSuccess = true
+    }
+
+    await  cartStore.state.shopClient.update_cart(cartStore.state.currentbasketKey, )
+  })
+
+
+
+}
+
+
+
+function getData(){
+
+}
+
+
+function init(){
+  getData()
+}
+
+onBeforeMount(()=>{
+  init()
+})
+
+</script>
+
+<style scoped>
+.viur-shop-cart-address-headline {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 600;
+  margin-bottom: var(--sl-spacing-medium);
+}
+</style>

package/old/components/simple/SimpleDefaultLayout.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="vi-shop-cart-form-wrap" v-if="Object.keys(formState.structure).length > 0">
+    <slot
+      boneName="salutation"
+      :widget="CustomSelectBone"
+      label="hide"
+    >
+    </slot>
+
+    <slot boneName="firstname"
+        :widget="CustomStringBone"
+        label="hide">
+    </slot>
+
+    <slot boneName="lastname"
+          :widget="CustomStringBone"
+          label="hide">
+    </slot>
+
+    <slot boneName="street_name"
+          :widget="CustomStringBone"
+          label="hide">
+    </slot>
+
+    <slot boneName="street_number"
+          :widget="CustomStringBone"
+          label="hide">
+    </slot>
+
+    <slot
+        boneName="zip_code"
+        :widget="CustomStringBone"
+        placeholder="PLZ"
+        label="hide"
+    >
+    </slot>
+
+    <slot boneName="city"
+          :widget="CustomStringBone"
+          label="hide">
+    </slot>
+
+
+  <slot boneName="country"
+        :widget="CustomSelectBone"
+        label="hide">
+  </slot>
+
+  <slot boneName="address_type"
+        :widget="CustomSelectBone"
+        label="hide">
+  </slot>
+  </div>
+
+
+</template>
+<script setup>
+import { inject } from "vue";
+import { getBoneWidget } from "@viur/vue-utils/bones/edit";
+import CustomBooleanBone from "../ui/userdata/CustomBooleanBone.vue";
+import CustomStringBone from "../ui/userdata/CustomStringBone.vue";
+import CustomSelectBone from "../ui/userdata/CustomSelectBone.vue";
+
+const formState = inject("formState");
+const formUpdate = inject("formUpdate");
+</script>
+<style scoped>
+
+.vi-shop-cart-form-wrap{
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--sl-spacing-small);
+  margin-bottom: var(--sl-spacing-medium);
+}
+
+:deep(.bone-wrapper){
+  margin: 0;
+}
+
+:deep(.wrapper-bone-firstname){
+  grid-column: 1 / span 2;
+}
+
+:deep(.wrapper-bone-lastname){
+  grid-column: 3 / span 2;
+}
+
+:deep(.wrapper-bone-street_name){
+  grid-column: 1 / span 3;
+}
+
+:deep(.wrapper-bone-street_number){
+  grid-column: 4 / span 1;
+}
+
+:deep(.wrapper-bone-zip_code){
+  grid-column: 1 / span 2;
+}
+
+:deep(.wrapper-bone-city){
+  grid-column: 3 / span 2;
+}
+
+:deep(.wrapper-bone-country){
+  grid-column: 1 / span 4;
+}
+
+:deep(.wrapper-bone-is_default){
+  padding: var(--sl-spacing-x-small) 0;
+  grid-column: 1 / span 4;
+}
+
+
+
+
+</style>

package/old/components/ui/generic/CardSelector.vue

@@ -0,0 +1,52 @@
+<template>
+    <template v-for="(option,i) in options">
+        <sl-card selectable @sl-change="changeSelection(i)" :selected="i===state.currentSelection" horizontal>
+            <slot :option="option" :index="i">
+                {{i}}: {{ option }} 
+            </slot>
+        </sl-card>
+    </template>
+</template>
+
+<script setup>
+import {reactive} from 'vue'
+
+const selection = defineModel("selection")
+
+const emits = defineEmits(['change'])
+
+const props = defineProps({
+    options:{
+        type: Array,
+        default:[]
+    },
+})
+
+const state = reactive({
+    currentSelection:null
+})
+
+function changeSelection(i){
+    if (state.currentSelection === i){
+        state.currentSelection = null
+        selection.value = null
+    }else{
+        state.currentSelection = i
+        selection.value = props.options[i]
+    }   
+    emits("change", selection.value)
+}
+
+
+</script>
+
+<style scoped>
+sl-card{
+    width: 100%;
+    &[selected]::part(base){
+        border:1px solid var(--sl-color-primary-500);
+        box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
+    }
+}
+
+</style>

package/old/components/ui/generic/CartList.vue

@@ -0,0 +1,69 @@
+<template>
+  <!-- <pre v-for="item in list">
+    {{ item }}
+  </pre> -->
+  <sl-table-wrapper searchable sortable>
+    <table>
+      <thead>
+        <tr>
+          <th></th>
+          <th>Name</th>
+          <th>Anzahl</th>
+          <th>Preis</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <template v-for="(item, index) in list">
+          <tr v-if="index < count">
+            <td>
+              <img
+                :src="Request.downloadUrlFor(item.shop_image)"
+                alt=""
+                style="width: 50px; height: 50px; object-fit: cover"
+                v-if="item?.shop_image"
+              />
+              <img
+                :src="cartStore.state.placeholder"
+                alt=""
+                style="width: 50px; height: 50px; object-fit: cover"
+                v-else
+              />
+            </td>
+
+            <td>{{ item.shop_name }}</td>
+            <td>{{ item.quantity }}</td>
+            <td>{{ item.shop_price_retail * item.quantity }}</td>
+          </tr>
+          <div v-else-if="index === list.length - 1">...</div>
+        </template>
+      </tbody>
+    </table>
+  </sl-table-wrapper>
+  <div v-if="showTrigger">
+    <sl-button v-if="!showMore" @click="showMore = !showMore">
+      Mehr anzeigen
+    </sl-button>
+    <sl-button v-else @click="showMore = !showMore">
+      Weniger anzeigen
+    </sl-button>
+  </div>
+</template>
+<script setup>
+import { computed, ref } from "vue";
+import { Request } from "@viur/vue-utils";
+import { useCartStore } from "../../../stores/cart";
+
+const props = defineProps({
+  list: { type: Array, required: true },
+  limit: { type: Number, default: 4 },
+});
+
+const cartStore = useCartStore();
+
+const showTrigger = computed(() => props.list.length > props.limit);
+const showMore = ref(false);
+const count = computed(() =>
+  showMore.value ? props.list.length : props.limit,
+);
+</script>

package/old/components/ui/generic/ShippingInfo.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="viur-shop-cart-sidebar-shipping">
+    <div class="viur-shop-cart-shipping-item">
+      <slot name="custom"></slot>
+    </div>
+    <div class="viur-shop-cart-shipping-item">
+      <span>Versandkosten </span>
+      <sl-format-number
+        type="currency"
+        currency="EUR"
+        :value="shippingCost"
+        lang="de"
+      >
+      </sl-format-number>
+    </div>
+    <div class="viur-shop-cart-shipping-item">
+      <span>Lieferzeit </span>
+      {{ deliveryTime === 1 ? deliveryTime + " Tag" : deliveryTime + " Tage" }}
+    </div>
+  </div>
+</template>
+<script setup>
+import { useShippingStore } from "../../../stores/shipping";
+import { computed } from "vue";
+
+const shippingStore = useShippingStore();
+
+const shippingCost = computed(() => {
+  return shippingStore.state.selectedShippingMethod?.dest.shipping_cost
+    ? shippingStore.state.selectedShippingMethod.dest.shipping_cost
+    : 0;
+});
+
+const deliveryTime = computed(() => {
+  return shippingStore.state.selectedShippingMethod?.dest.delivery_time_max
+    ? shippingStore.state.selectedShippingMethod.dest.delivery_time_max
+    : 0;
+});
+</script>
+
+<style scoped>
+.viur-shop-cart-sidebar-shipping {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+  margin: var(--sl-spacing-2x-small) 0;
+}
+.viur-shop-cart-shipping-item {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+</style>