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

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

@@ -0,0 +1,41 @@
+<template>
+  <!-- TODO: at a very later point -->
+  <div class="price-wrap">
+    <sl-format-number
+      class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--unitprice"
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="price.retail"
+    >
+    </sl-format-number>
+    <sl-format-number
+      class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--unitprice"
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="price.recommended"
+    >
+    </sl-format-number>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  price: {
+    type: Object,
+    required: true,
+  },
+});
+
+function priceGetter() {
+
+}
+</script>
+
+<style scoped>
+.price-wrap {
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/old/components/ui/generic/alerts/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/old/components/ui/payment/PaymentOption.vue

@@ -0,0 +1,79 @@
+<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(){
+    console.log("FFF")
+    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/old/components/ui/payment/PaymentSelector.vue

@@ -0,0 +1,158 @@
+<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"
+
+      >
+        <template v-if="option.paymenttype.startsWith('unzer-')">
+          <form class="unzerUI form" ref="unzerform">
+            <template v-if="option.paymenttype === '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="option.paymenttype === 'unzer-paypal'">
+                <div id="paypal-element" class="field"></div>
+            </template>
+
+            <template v-else-if="option.paymenttype === 'unzer-ideal'">
+                <div id="ideal-element" class="field"></div>
+            </template>
+          </form>
+        </template>
+      </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 unzerform = ref(null)
+
+  const props = defineProps({
+    selection: {
+      type: String,
+      default: null
+    },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  })
+
+  const state = reactive({
+    unzer: computed(()=>{
+        //if (!orderStore.state.checkout) return null
+        return new unzer(orderStore.state.checkout.payment.public_key, {locale: 'de-DE'})
+    }),
+    selection:null,
+    hasError:false
+  })
+
+function initUnzerForm(){
+    //Unzer field definition
+    if (state.selection === 'unzer-card' && !paymentStore.state.paymentHandler['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,
+        });
+
+        paymentStore.state.paymentHandler['unzer-card'] = card
+    } else if (state.selection === 'unzer-paypal' && !paymentStore.state.paymentHandler['unzer-paypal']) {
+        // Creating a PayPal instance
+        const paypal = state.unzer.Paypal()
+        // Rendering input field
+        //paypal.create('email', {
+        //     containerId: 'paypal-element',
+        //});
+        paymentStore.state.paymentHandler['unzer-paypal']= paypal;
+    } else if (state.selection === 'unzer-sofort' && !paymentStore.state.paymentHandler['unzer-sofort']) {
+        const sofort = state.unzer.Sofort()
+        paymentStore.state.paymentHandler['unzer-sofort'] = sofort;
+    } else if (state.selection=== 'unzer-ideal' && !paymentStore.state.paymentHandler['unzer-ideal']) {
+        const ideal = state.unzer.Ideal()
+        ideal.create('ideal', {
+            containerId: 'ideal-element',
+        });
+        paymentStore.state.paymentHandler['unzer-ideal'] = 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)
+    })
+}
+
+function optionChanged(type){
+  console.log(state)
+  console.log(paymentStore)
+  console.log(unzerform)
+  state.selection=type
+  initUnzerForm()
+  paymentStore.state.paymentSelection = state.selection
+}
+
+
+</script>
+
+<style scoped>
+
+</style>

package/old/components/ui/stepper/StepperItem.vue

@@ -0,0 +1,90 @@
+<template>
+  <sl-tab-panel class="viur-shop-order-tab-panel" :name="tab">
+    <div v-if="!tabs[tab]?.['loaded']"></div>
+    <component
+      :is="tabs[tab].component"
+      v-bind="tabs[tab].props ? tabs[tab].props : ''"
+      @valid="emit('valid', $event)"
+      v-else
+    >
+    </component>
+  </sl-tab-panel>
+</template>
+
+<script setup>
+import {watch, onBeforeMount} from 'vue'
+
+const props = defineProps({
+  tab: {
+    type: String,
+    required: true,
+  },
+  tabs: {
+    type: Object,
+    required: true,
+  },
+  currentTab: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["goToStart", "editAddress", 'valid']);
+
+function goToStart() {
+  emit("goToStart");
+}
+
+function goToUserData(e) {
+  emit("editAddress", e);
+}
+
+watch(()=>props.currentTab === props.tab, (newVal,oldVal)=>{
+  if (newVal){
+    props.tabs[props.tab]['loaded'] = true
+  }
+})
+
+onBeforeMount(()=>{
+  if (props.currentTab === props.tab){
+    props.tabs[props.tab]['loaded'] = true
+  }
+})
+
+</script>
+
+<style scoped>
+.viur-shop-order-tab-panel {
+}
+
+.skeleton-overview header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.skeleton-overview header sl-skeleton:last-child {
+  flex: 0 0 auto;
+  width: 30%;
+}
+
+.skeleton-overview sl-skeleton {
+  margin-bottom: 1rem;
+}
+
+.skeleton-overview sl-skeleton:nth-child(1) {
+  float: left;
+  width: 3rem;
+  height: 3rem;
+  margin-right: 1rem;
+  vertical-align: middle;
+}
+
+.skeleton-overview sl-skeleton:nth-child(3) {
+  width: 95%;
+}
+
+.skeleton-overview sl-skeleton:nth-child(4) {
+  width: 80%;
+}
+</style>

package/old/components/ui/stepper/StepperTab.vue

@@ -0,0 +1,161 @@
+<template>
+  <sl-tab
+    class="viur-shop-order-tab"
+    slot="nav"
+    :panel="tab"
+    :disabled="false"
+  >
+    <div class="viur-shop-order-step">
+      <sl-icon
+        class="viur-shop-order-step-icon"
+        v-if="tabs[tab].icon?.name"
+        :name="tabs[tab].icon.name"
+        :library="tabs[tab].icon.library ? tabs[tab].icon.library : 'default'"
+      >
+      </sl-icon>
+
+      <div class="viur-shop-order-status-text">
+        {{ tabIdx + 1 }}.
+        <span class="viur-shop-order-status-span">{{
+          tabs[tab].displayName
+        }}</span>
+      </div>
+    </div>
+
+    <sl-icon
+      name="chevron-right"
+      class="viur-shop-order-tab-check"
+      v-if="tabIdx < stepperLength - 1"
+    >
+    </sl-icon>
+  </sl-tab>
+</template>
+
+<script setup>
+import { watch, onBeforeMount, inject } from "vue";
+
+const props = defineProps({
+  tab: {
+    type: String,
+    required: true,
+  },
+  tabIdx: {
+    type: Number,
+    required: true,
+  },
+  stepperLength: {
+    type: Number,
+    required: true,
+  },
+  tabs: {
+    type: Object,
+    required: true,
+  },
+  currentTab: {
+    type: String,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const stepperState = inject("stepperState");
+
+// watch(()=>props.tabs[props.tab]['valid'],(newVal, oldVal)=>{
+//   let nextTab = stepperState.tabNames?.[props.tabIdx+1]
+//   if (!nextTab) return
+
+//   props.tabs[nextTab]['disabled'] = false //enable nextTab
+// })
+
+// onBeforeMount(()=>{
+//   props.tabs[props.tab]['disabled'] = true //default all tabs disabled
+
+//   if (props.currentTab === props.tab){
+//     props.tabs[props.tab]['disabled'] = false //activate the first one
+//   }
+
+// })
+</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/old/components/ui/stepper/StepperTrigger.vue

@@ -0,0 +1,69 @@
+<template>
+  <sl-button
+    type="submit"
+    v-show="index !== 0 && state.showPrev"
+    @click="prevTab()"
+  >
+    Zurück
+    <!-- TODO: $t(i18n referenz) -->
+  </sl-button>
+
+  <sl-button
+    type="submit"
+    variant="primary"
+    @click="nextTab()"
+    v-show="state.showNext"
+    :disabled="!tabs[tab].valid"
+  >
+    Weiter
+    <!-- TODO: $t(i18n referenz) -->
+  </sl-button>
+</template>
+
+<script setup>
+import { computed, reactive } from "vue";
+
+const props = defineProps({
+  index: {
+    type: Number,
+    required: true,
+  },
+  tab: {
+    type: String,
+    required: true,
+  },
+  tabs: {
+    type: Object,
+    required: true,
+  },
+});
+const state = reactive({
+  showPrev: computed(() => {
+    if (props.tabs[props.tab]["showPrev"] !== undefined) {
+      return !!props.tabs[props.tab]["showPrev"];
+    }
+    return true;
+  }),
+  showNext: computed(() => {
+    if (props.tabs[props.tab]["showNext"] !== undefined) {
+      return !!props.tabs[props.tab]["showNext"];
+    }
+    return true;
+  }),
+});
+const emit = defineEmits({ prevTab: null, nextTab: null });
+
+function prevTab() {
+  emit("prevTab");
+}
+
+function nextTab() {
+  emit("nextTab");
+}
+</script>
+
+<style scoped>
+.sticky {
+  position: sticky;
+}
+</style>