@viur/shop-components 0.0.1-dev.8 → 0.1.0

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>
+                    {{ $t('messages.loading') }}
+                </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>
+                    {{ $t('messages.updating') }}
+                </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>
+    {{ $t('messages.wait_for_payment') }}
+  </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">{{ $t('shop.pay') }}</button>
+        <sl-button :disabled="state.loading" variant="danger" @click="cancelPayment">{{ $t('actions.cancel') }}</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>

package/src/components/StepperTab.vue

@@ -0,0 +1,132 @@
+<template>
+  <sl-tab
+    class="viur-shop-order-tab"
+    slot="nav"
+    :panel="tab"
+    :disabled="!shopStore.state.tabs[tab]['active']"
+    @click="shopStore.navigateToTab(tab)"
+  >
+    <div class="viur-shop-order-step">
+      <sl-icon
+        class="viur-shop-order-step-icon"
+        v-if="shopStore.state.tabs[tab]?.icon?.name"
+        :name="shopStore.state.tabs[tab].icon.name"
+        :library="shopStore.state.tabs[tab].icon.library ? shopStore.state.tabs[tab].icon.library : 'default'"
+      >
+      </sl-icon>
+
+      <div class="viur-shop-order-status-text">
+        <template v-if="tab && shopStore.state.tabs[tab]">
+          {{ shopStore.state.tabIndexMap[tab] + 1 }}.
+          <span class="viur-shop-order-status-span">
+            {{ shopStore.state.tabs[tab]?.displayName }}
+          </span>
+        </template>
+        <template v-else>
+          {{ tab }}
+        </template>
+      </div>
+    </div>
+
+    <sl-icon
+      name="chevron-right"
+      class="viur-shop-order-tab-check"
+      v-if="shopStore.state.tabIndexMap[tab] < shopStore.state.stepperLength - 1"
+    >
+    </sl-icon>
+  </sl-tab>
+</template>
+
+<script setup>
+import { watch, onBeforeMount, inject } from "vue";
+import {useViurShopStore} from '../shop'
+const shopStore = useViurShopStore()
+
+const props = defineProps({
+  tab: {
+    type: String,
+    required: true,
+    default:"-"
+  }
+});
+</script>
+
+<style scoped>
+.viur-shop-order-tab {
+  width: 25%;
+  position: relative;
+
+  &::part(base) {
+    color: var(--shop-tab-color);
+    display: flex;
+    height: 100%;
+  }
+
+  &[aria-selected="true"] {
+    --shop-tab-color: var(--shop-tab-color--active);
+  }
+
+  @media (max-width: 900px) {
+    &::part(base) {
+      height: 100%;
+      padding: var(--sl-spacing-small) var(--sl-spacing-medium);
+    }
+  }
+
+  @media (max-width: 600px) {
+    &[aria-selected="true"] {
+      width: 100%;
+    }
+
+    &:not([aria-selected="true"]) {
+      .viur-shop-order-status-span {
+        display: none;
+      }
+    }
+  }
+}
+
+.viur-shop-order-step {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  &:has(sl-icon) {
+    justify-content: flex-start;
+  }
+
+  sl-icon {
+    font-size: 2.5em;
+    margin-bottom: 15px;
+  }
+
+  @media (max-width: 900px) {
+    justify-content: center;
+
+    sl-icon {
+      display: none;
+    }
+  }
+}
+
+.viur-shop-order-status-text {
+  font-size: 1em;
+  color: inherit;
+  text-align: center;
+  white-space: initial;
+}
+
+.viur-shop-order-tab-check {
+  position: absolute;
+  right: -0.5em;
+
+  @media (max-width: 900px) {
+    font-size: 0.7em;
+    right: -0.35em;
+    top: calc(50% - 0.35em);
+  }
+}
+</style>

package/src/components/dialogButton.vue

@@ -0,0 +1,49 @@
+<template>
+    <sl-button v-bind="$attrs" @click="state.opened=true">
+        <slot>
+
+        </slot>
+    </sl-button>
+    <teleport to="#dialogs" v-if="state.opened">
+    <sl-dialog :open="state.opened"  @sl-after-hide="state.opened=false" noHeader>
+            <slot name="dialog" :close="close">
+
+            </slot>
+        </sl-dialog>
+    </teleport>
+</template>
+
+<script setup>
+import {reactive} from 'vue'
+defineOptions({
+  inheritAttrs: false
+})
+
+const state = reactive({
+    opened:false
+})
+
+function close(){
+    state.opened=false
+}
+
+</script>
+
+<style scoped>
+
+.decent{
+    margin: 0;
+    transition: all ease .3s;
+
+    &::part(base){
+        border: none;
+    }
+
+    &::part(label){
+        padding: 0;
+        height: var(--sl-input-height-medium);
+        width: calc(var(--sl-input-height-medium) / 5 * 4);
+    }
+}
+
+</style>