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

package/src/components/CartItemSmall.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="item-wrapper">
+    <sl-card horizontal class="viur-shop-cart-leaf-small">
+    <img
+      class="viur-shop-cart-leaf-image"
+      slot="image"
+      :src="
+        getImage(
+            item?.shop_image
+            ? item.shop_image
+            : undefined,
+        )
+      "
+    />
+    <h4
+      class="viur-shop-cart-leaf-headline headline"
+      v-html="getValue(item.shop_name)"
+    ></h4>
+
+    <sl-input
+        :disabled="!edit"
+        class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--quantity"
+        type="number"
+        placeholder="Number"
+        min="0"
+        noSpinButtons
+        :value="item.quantity"
+        @sl-change="changeAmount($event.target.value)"
+      >
+      <dialog-Button slot="prefix" class="decent" v-if="item.quantity===1" variant="danger" outline>
+        <sl-icon name="trash"></sl-icon>
+        <template #dialog="{close}">
+          Wollen sie den Artikel wirklich entfernen?
+          <sl-bar>
+            <sl-button slot="left" @click="close">Abbrechen</sl-button>
+            <sl-button slot="right" variant="danger" @click="removeArticle(); close()">Löschen</sl-button>
+          </sl-bar>
+        </template>
+      </dialog-Button>
+      <sl-button slot="prefix" v-else @click="changeAmount(item.quantity-=1)">
+        <sl-icon name="dash-lg"></sl-icon>
+      </sl-button>
+      <sl-button slot="suffix" @click="changeAmount(item.quantity+=1)">
+        <sl-icon name="plus-lg"></sl-icon>
+      </sl-button>
+    </sl-input>
+
+    <div class="viur-shop-cart-leaf-article-number">
+      <div class="viur-shop-cart-leaf-label">Artikelnummer</div>
+      {{ getValue(item.shop_art_no_or_gtin) }}
+    </div>
+
+    <div class="viur-shop-cart-leaf-unitprice">
+      <div class="viur-shop-cart-leaf-label">Stückpreis</div>
+      <sl-format-number
+        class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--unitprice"
+        lang="de"
+        type="currency"
+        currency="EUR"
+        :value="item.shop_price_retail"
+      >
+      </sl-format-number>
+    </div>
+
+
+    <div class="viur-shop-cart-leaf-price">
+        <div class="viur-shop-cart-leaf-label">Gesamtpreis</div>
+        <sl-format-number
+          class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--price"
+          lang="de"
+          type="currency"
+          currency="EUR"
+          :value="item.shop_price_retail * item.quantity"
+        >
+        </sl-format-number>
+      </div>
+  </sl-card>
+  <div class="loading" v-if="cartState.isUpdating">
+      <sl-spinner></sl-spinner>
+    </div>
+  </div>
+</template>
+<script setup>
+import { useDebounceFn } from '@vueuse/core'
+import { getImage } from '../utils';
+import { useCart } from '../composables/cart';
+import dialogButton from './dialogButton.vue';
+
+const {addItem, removeItem, state:cartState, getValue} = useCart()
+
+const changeAmount = useDebounceFn((amount) => {
+  props.item.quantity = amount
+  addItem(props.item['article']['dest']['key'],amount)
+}, 1000)
+
+const props = defineProps({
+    item:{
+        required:true
+    },
+    edit:{
+      type:Boolean,
+      default:false //true
+    }
+})
+
+function removeArticle(){
+  removeItem(props.item['article']['dest']['key'])
+}
+
+</script>
+<style scoped>
+@layer foundation.shop {
+  .viur-shop-cart-leaf-small {
+    --shop-leaf-label-color: var(--ignt-color-primary);
+    --shop-leaf-label-font-weight: 600;
+    --shop-leaf-label-font-size: 1em;
+    --shop-leaf-price-font-size: 1em;
+    --shop-leaf-headline-font-size: 1.3em;
+
+    &::part(base) {
+      display: flex;
+      position: relative;
+    }
+
+    &::part(header) {
+      border-bottom: none;
+      padding-top: 0;
+      padding-right: 0;
+    }
+
+    &::part(image) {
+      aspect-ratio: 1;
+      flex-basis: 120px;
+    }
+
+    &::part(body) {
+      display: grid;
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+      gap: var(--sl-spacing-medium);
+      padding: var(--sl-spacing-large);
+      height: 100%;
+    }
+
+    &::part(group) {
+      padding: 0;
+    }
+
+    @media (max-width: 600px) {
+      &::part(body) {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: var(--sl-spacing-medium);
+        padding: var(--sl-spacing-large);
+        height: 100%;
+      }
+
+      &::part(image) {
+        border-radius: var(--border-radius);
+        align-self: baseline;
+      }
+    }
+  }
+
+  .viur-shop-cart-leaf-image {
+    aspect-ratio: 1;
+  }
+
+  .viur-shop-cart-leaf-headline {
+    grid-column: 1 / span 4;
+    order: -2;
+    margin: 0;
+    font-size: var(--shop-leaf-headline-font-size);
+
+    @media (max-width: 600px) {
+      grid-column: 1 / span 2;
+    }
+  }
+
+  .viur-shop-cart-leaf-price {
+    grid-column: 5 / span 1;
+    align-self: flex-end;
+    text-align: right;
+    font-size: var(--shop-leaf-price-font-size);
+  }
+
+  .viur-shop-cart-leaf-article-number {
+    align-self: center;
+    grid-column: span 2;
+  }
+
+  .viur-shop-cart-leaf-quantity {
+    align-self: center;
+  }
+
+  .viur-shop-cart-leaf-unitprice {
+    align-self: center;
+    grid-column: 4 / span 1;
+  }
+
+  .viur-shop-cart-leaf-label,
+  .viur-shop-cart-leaf-value--quantity::part(form-control-label) {
+    color: var(--shop-leaf-label-color);
+    font-weight: var(--shop-leaf-label-font-weight);
+    font-size: calc(var(--shop-leaf-label-font-size) *.75);
+    margin-bottom: var(--ignt-spacing-2x-small);
+  }
+
+  .loading{
+    position: absolute;
+    top: 0;
+    background: #ffffffcc;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+
+
+    & sl-spinner{
+      font-size:3rem;
+    }
+  }
+
+  .item-wrapper{
+    position: relative;
+  }
+
+  .viur-shop-cart-leaf-value--quantity{
+    align-self: center;
+    grid-column: span 1;
+
+    &::part(input){
+      text-align: center;
+      padding: 0;
+    }
+
+    sl-button{
+      margin: 0;
+      transition: all ease .3s;
+
+      &::part(base){
+        background-color: transparent;
+        border: none;
+      }
+
+      &::part(label){
+        padding: 0;
+        height: var(--sl-input-height-medium);
+        width: calc(var(--sl-input-height-medium) / 5 * 4);
+      }
+    }
+
+  }
+
+}
+</style>

package/src/components/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 './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/src/components/PaymentOption.vue

@@ -0,0 +1,78 @@
+<template>
+  <sl-details :class="{
+    simple:widget==='simple'
+  }"
+              @sl-show="selection" >
+    <div slot="summary" class="payment-selection">
+      <div class="start">
+        <sl-icon :name="icon"></sl-icon>
+        {{ name }}
+      </div>
+      <sl-radio :value="paymenttype" ></sl-radio>
+    </div>
+    <slot>
+      {{description}}
+    </slot>
+
+    <template v-if="widget==='simple'">
+        <div slot="expand-icon" style="width:1em"></div>
+        <div slot="collapse-icon"  style="width:1em"></div>
+    </template>
+  </sl-details>
+</template>
+
+<script setup>
+  const emits = defineEmits(['change'])
+  const props = defineProps({
+    paymenttype: {
+      type: String,
+      default: 'prepayment'
+    },
+    name: {
+      type: String,
+      default: 'Paymentname'
+    },
+    icon: {
+      type: String,
+      default: 'currency-euro'
+    },
+    description: {
+      type: String,
+      default: 'Payment description'
+    },
+    widget:{
+      type:String,
+      default:'default' //simple
+    }
+  })
+
+  function selection(){
+    emits('change',props.paymenttype)
+  }
+
+
+
+</script>
+
+<style scoped>
+.payment-selection{
+  display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    align-content: center;
+    justify-content: space-between;
+    width: 100%;
+
+    .start{
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      gap:10px;
+    }
+}
+
+.simple::part(content){
+  display:none;
+}
+</style>

package/src/components/PaymentProviderUnzer.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="loading-wrapper" v-if="state.loading">
+    <sl-spinner class="loading"></sl-spinner>
+  </div>
+
+  <div class="loading-wrapper" v-if="PaymentCheckIsActive">
+    <sl-spinner class="loading"></sl-spinner>
+    warte auf Zahlung...
+  </div>
+  <div class="form-wrapper">
+      <sl-alert :open="state.hasError" variant="danger">{{state.errorMessage}}</sl-alert>
+      <form class="unzerUI form" novalidate>
+          <template v-if="shopStore.state.order?.['payment_provider'] === '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-else-if="shopStore.state.order?.['payment_provider'] === 'unzer-paypal'">
+              <div id="paypal-element" class="field"></div>
+          </template>
+
+          <template v-else-if="shopStore.state.order?.['payment_provider'] === 'unzer-ideal'">
+              <div id="ideal-element" class="field"></div>
+          </template>
+      </form>
+        <button :disabled="state.loading" class="unzerUI primary button fluid" @click="submitFormToUnzer">Bezahlen</button>
+        <sl-button :disabled="state.loading" variant="danger" @click="cancelPayment">Abbrechen</sl-button>
+  </div>
+</template>
+
+<script setup>
+import {computed, onBeforeMount, onMounted, reactive} from 'vue'
+import { useViurShopStore } from '../shop';
+import { useOrder } from '../composables/order';
+import {Request} from '@viur/vue-utils'
+import { useIntervalFn } from '@vueuse/core'
+const shopStore = useViurShopStore()
+const {fetchOrder} = useOrder()
+
+const emits = defineEmits(['cancel'])
+
+const { pause:PaymentCheckPause, resume:PaymentCheckResume, isActive:PaymentCheckIsActive } = useIntervalFn(() => {
+  fetchOrder(shopStore.state.orderKey)
+
+  if (shopStore.state.order?.['is_paid']){
+    PaymentCheckPause()
+  }
+
+}, 2000,{immediate:false})
+
+
+const state = reactive({
+    unzer:computed(()=>{
+        if (!shopStore.state.paymentProviderData) return null
+        return new unzer(shopStore.state.paymentProviderData["public_key"], {locale: 'de-DE'})
+    }),
+    paymentHandler:{},
+    loading:false,
+    hasError:false,
+    errorMessage:"Bei der Zahlung ist ein Fehler aufgetreten.",
+    waitPayment:false
+})
+
+
+function initUnzerForm(){
+    //Unzer field definition
+    if (shopStore.state.order?.['payment_provider'] === '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.paymentHandler['unzer-card'] = card
+    } else if (shopStore.state.order?.['payment_provider'] === 'unzer-paypal') {
+        // Creating a PayPal instance
+        const paypal = state.unzer.Paypal()
+        // Rendering input field
+        //paypal.create('email', {
+        //     containerId: 'paypal-element',
+        //});
+        state.paymentHandler['unzer-paypal']= paypal;
+    } else if (shopStore.state.order?.['payment_provider'] === 'unzer-sofort') {
+        const sofort = state.unzer.Sofort()
+        state.paymentHandler['unzer-sofort'] = sofort;
+    } else if (shopStore.state.order?.['payment_provider'] === 'unzer-ideal') {
+        const ideal = state.unzer.Ideal()
+        ideal.create('ideal', {
+            containerId: 'ideal-element',
+        });
+        state.paymentHandler['unzer-ideal'] = ideal;
+    }
+    state.loading = false
+}
+
+function paymentError(error){
+  state.loading = false
+  state.hasError = true
+  //reset session id
+  //state.paymentHandler[shopStore.state.order?.['payment_provider']].jsessionId = state.paymentHandler[shopStore.state.order?.['payment_provider']].requestJSessionId()
+}
+
+
+function submitFormToUnzer(){
+    PaymentCheckPause()
+    state.loading = true
+    let paymenttarget = shopStore.state.order?.['payment_provider'].split("-")[1]
+    console.log(state.paymentHandler)
+    //send to unzer
+    state.paymentHandler[shopStore.state.order?.['payment_provider']].createResource().then((result)=>{
+        Request.post(`${shopStore.state.shopUrl}/pp_unzer_${paymenttarget}/save_type`, {dataObj:{
+            order_key: shopStore.state.orderKey,
+            type_id: result.id,
+        }}).then(async (resp)=>{
+            let data = await resp.json()
+            shopStore.state.order = data
+
+            shopStore.checkoutOrder().then((resp)=>{
+              state.loading = false
+              state.hasError = false
+              if(shopStore.state.paymentProviderData?.redirectUrl){
+                state.waitPayment = true
+                window.open(shopStore.state.paymentProviderData.redirectUrl,"_blank","popup")
+                PaymentCheckResume()
+              }
+            }).catch(async (error)=>{
+              paymentError(error)
+            })
+
+        }).catch(error => {
+            paymentError(error)
+        })
+    }).catch((error)=> {
+        paymentError(error)
+    })
+}
+
+
+function cancelPayment(){
+    PaymentCheckPause()
+    emits('cancel')
+}
+
+onBeforeMount(()=>{
+    state.loading = true
+    if (!shopStore.state.paymentProviderData){
+        shopStore.checkout().then(()=>{
+            initUnzerForm()
+        }).catch((error)=>{
+            console.log(error)
+        })
+    }else{
+      initUnzerForm()
+    }
+})
+
+</script>
+
+<style scoped>
+.loading-wrapper{
+  display:flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.form-wrapper{
+  display:flex;
+  flex-direction: column;
+  gap:20px;
+}
+
+.loading{
+  font-size:3rem;
+}
+</style>

package/src/components/PaymentSelector.vue

@@ -0,0 +1,55 @@
+<template>
+  <sl-radio-group :value="state.selection">
+    <sl-details-group>
+
+      <payment-option v-for="option in options" :key="option.id"
+                      :paymenttype="option.paymenttype"
+                      :name="option.name"
+                      :icon="option.icon"
+                      :widget="option.widget"
+                      :description="option.description"
+                      @change="optionChanged"
+
+      >
+        
+      </payment-option>
+
+    </sl-details-group>
+  </sl-radio-group>
+
+</template>
+
+<script setup>
+import {usePaymentStore} from "../../../stores/payment"
+import PaymentOption from "./PaymentOption.vue"
+import {computed, reactive, ref} from 'vue'
+import {Request} from "@viur/vue-utils";
+
+const paymentStore = usePaymentStore()
+const props = defineProps({
+  selection: {
+    type: String,
+    default: null
+  },
+  options: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const state = reactive({
+  selection:null,
+  hasError:false
+})
+
+function optionChanged(type){
+  state.selection=type
+  paymentStore.state.paymentSelection = state.selection
+}
+
+
+</script>
+
+<style scoped>
+
+</style>

package/src/components/ShopAlert.vue

@@ -0,0 +1,30 @@
+<template>
+  <sl-alert :variant="variant" open :closable="closeable" :duration="duration" @sl-hide="onHide">
+      <slot name="icon">
+          <sl-icon slot="icon" :name="iconName"></sl-icon>
+      </slot>
+    <slot name="alertMsg">{{ msg }}</slot>
+  </sl-alert>
+</template>
+
+<script setup>
+const props = defineProps({
+  variant: { type: String, default: "primary" },
+  iconName: { type: String, default: "info-circle" },
+  closeable:{
+    type:Boolean,
+    default:true
+  },
+  duration:{
+    type: [Number, String],
+    default: 3000 // use "Infinity" for fix message
+  },
+  msg: { type: String, default: "ALERT!" },
+});
+
+const emit = defineEmits(["onHide"]);
+
+function onHide() {
+  emit("onHide");
+}
+</script>