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

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>

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

@@ -3,7 +3,7 @@
     class="viur-shop-order-tab"
     slot="nav"
     :panel="tab"
-    :disabled="tabs[tab].disabled"
+    :disabled="false"
   >
     <div class="viur-shop-order-step">
       <sl-icon
@@ -32,6 +32,8 @@
 </template>
 
 <script setup>
+import { watch, onBeforeMount, inject } from "vue";
+
 const props = defineProps({
   tab: {
     type: String,
@@ -49,7 +51,33 @@ const props = defineProps({
     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>
@@ -114,7 +142,7 @@ const props = defineProps({
 }
 
 .viur-shop-order-status-text {
-  font-size: 0.8em;
+  font-size: 1em;
   color: inherit;
   text-align: center;
   white-space: initial;

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>

package/old/components/ui/userdata/AddForm.vue

@@ -0,0 +1,160 @@
+<template>
+  <sl-spinner v-if="state.isLoading"></sl-spinner>
+  <ViForm
+    ref="addForm"
+    :module="`${cartStore.state.shopModuleName}/address`"
+    action="add"
+    :useCategories="false"
+    :layout="layout ? layout : DefaultLayout"
+    :values="modelValue"
+    :skel="
+      type === 'billing'
+        ? addressStore.state.active.billing
+        : addressStore.state.active.shipping
+    "
+    @change="updateValues"
+  >
+  </ViForm>
+
+  <!-- BUTTON NUR PLATZHALTER FÜR TESTS -->
+  <sl-bar>
+    <div slot="left">
+      <sl-button
+        variant="success"
+        @click.stop.prevent="sendForm"
+        :loading="state.isSending"
+      >
+        <sl-icon name="floppy2" slot="prefix"></sl-icon>
+        {{
+          $t("actions.add").charAt(0).toUpperCase() + $t("actions.add").slice(1)
+        }}
+      </sl-button>
+    </div>
+  </sl-bar>
+</template>
+
+<script setup>
+import { reactive, ref, computed, onMounted } from "vue";
+import ViForm from "@viur/vue-utils/forms/ViForm.vue";
+import DefaultLayout from "./DefaultLayout.vue";
+import { useCartStore } from "../../../stores/cart";
+import { useAddressStore } from "../../../stores/address";
+import { useOrderStore } from "../../../main";
+
+const props = defineProps({
+  layout: { required: false },
+  customer: { type: Object, required: true },
+  type: { type: String, default: "billing" },
+  modelValue: { type: Object },
+});
+
+const emit = defineEmits(["update:modelValue", "addSuccess", "valid"]);
+
+const cartStore = useCartStore();
+const addressStore = useAddressStore();
+const orderStore = useOrderStore();
+
+const addForm = ref(null);
+
+const state = reactive({
+  isLoading: computed(() => (addForm.value ? addForm.value.loading : true)),
+  isSending: false,
+  wasSuccess: false,
+  user: {},
+});
+
+function sendForm() {
+  const isValid = validate(addForm.value.state.skel);
+
+  if (isValid) {
+    state.isSending = true;
+
+    addForm.value.sendData().then(async (resp) => {
+      let data = await resp.json();
+
+      state.isSending = false;
+
+      if (data["action"] === "addSuccess") {
+        addForm.value.state.skel = data.values;
+
+        if (props.type === "billing") {
+          addressStore.state.active.billing = addForm.value.state.skel;
+
+          orderStore.updateParams({
+            billing_address_key: addressStore.state.active.billing.key,
+          });
+
+          if (addressStore.state.clone) {
+            cartStore.update({
+              key: orderStore.state.currentOrder.cart.dest.key,
+              shippingAddress: addressStore.state.active.shipping.key,
+            });
+          }
+        } else {
+          addressStore.state.active.shipping = addForm.value.state.skel;
+
+          cartStore.update({
+            key: orderStore.state.currentOrder.cart.dest.key,
+            shippingAddress: addressStore.state.active.shipping.key,
+          });
+        }
+
+        emit("addSuccess", {
+          show: true,
+          msg: "Erfolg!",
+          variant: "success",
+          icon: "check2-circle",
+        });
+
+        emit("valid", true);
+      } else {
+        emit("valid", false);
+      }
+    });
+  }
+}
+
+// TODO: needs a real validation solution with logics used in backend configuration
+function validate(formData) {
+  const structure = addressStore.state.structure;
+  let total = 0;
+  let valid = 0;
+
+  // TODO: will be deleted when backend address module is set up properly
+  structure.firstname.required = true;
+  structure.lastname.required = true;
+  structure.street_name.required = true;
+  structure.street_number.required = true;
+  structure.zip_code.required = true;
+  structure.city.required = true;
+  structure.country.required = true;
+
+  for (let key of Object.keys(structure)) {
+    if (structure[key].required) {
+      total += 1;
+    }
+  }
+
+  for (let [key, value] of Object.entries(formData)) {
+    if (structure[key].required && value) {
+      valid += 1;
+    }
+  }
+
+  if (valid === total) {
+    return true;
+  }
+
+  return false;
+}
+
+function updateValues() {
+  emit("update:modelValue", addForm.value.state.skel);
+}
+
+onMounted(() => {
+  addressStore.getStructure();
+});
+</script>
+
+<style scoped></style>