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

package/src/components/order/information/UserInformation.vue

@@ -1,332 +0,0 @@
-<template>
-  <!-- <slot name="form" v-if="mode === 'form'">
-    <form @submit.prevent="sendData">
-      <h2 class="viur-shop-form-headline headline">Nutzterdaten</h2>
-      <div class="viur-shop-form-wrap">
-        <sl-input
-          name="email"
-          v-model="state.formValues['email']"
-          placeholder="E-Mail"
-          class="viur-shop-form-grid-w-4"
-        >
-          <label slot="label">E-Mail*</label>
-        </sl-input>
-        <sl-input
-          name="name"
-          v-model="state.formValues['lastname']"
-          placeholder="Name"
-          class="viur-shop-form-grid-w-2"
-        >
-          <label slot="label">Name*</label>
-        </sl-input>
-        <sl-input
-          name="firstname"
-          v-model="state.formValues['firstname']"
-          placeholder="Vorname"
-          class="viur-shop-form-grid-w-2"
-        >
-          <label slot="label">Vorname*</label>
-        </sl-input>
-      </div>
-      <div class="viur-shop-form-adress-wrapper">
-        <div class="viur-shop-form-adress-column">
-          <h2 class="viur-shop-form-headline headline">Lieferadresse</h2>
-          <div class="viur-shop-form-wrap">
-            <sl-input
-              name="street"
-              v-model="state.formValues['street']"
-              placeholder="Straße"
-              class="viur-shop-form-grid-w-3"
-            >
-              <label slot="label">Strasse *</label>
-            </sl-input>
-            <sl-input
-              name="street"
-              v-model="state.formValues['streetnumber']"
-              placeholder="Hausnummer"
-              type="number"
-            >
-              <label slot="label">Hausnummer *</label>
-            </sl-input>
-            <sl-input
-              name="street"
-              v-model="state.formValues['areacode']"
-              placeholder="Postleitzahl"
-              class="viur-shop-form-grid-w-2"
-              type="number"
-            >
-              <label slot="label">Postleitzahl *</label>
-            </sl-input>
-            <sl-input
-              name="city"
-              v-model="state.formValues['city']"
-              placeholder="Stadt"
-              class="viur-shop-form-grid-w-2"
-            >
-              <label slot="label">Stadt*</label>
-            </sl-input>
-            <sl-input
-              name="province"
-              v-model="state.formValues['province']"
-              placeholder="Bundesland"
-              class="viur-shop-form-grid-w-2"
-            >
-              <label slot="label">Bundesland</label>
-            </sl-input>
-          </div>
-        </div>
-
-        <sl-checkbox @sl-change="onCustomAdressChange" checked>
-          Rechnungsadresse wie Lieferadresse
-        </sl-checkbox>
-
-        <div class="viur-shop-form-adress-column" v-show="state.isCustomAdress">
-          <h2 class="viur-shop-form-headline headline">Rechnungsadresse</h2>
-          <div class="viur-shop-form-wrap">
-            <sl-input
-              name="street"
-              v-model="state.formValues['billing.street']"
-              placeholder="Straße"
-              class="viur-shop-form-grid-w-3"
-            >
-              <label slot="label">Strasse *</label>
-            </sl-input>
-            <sl-input
-              name="street"
-              v-model="state.formValues['billing.streetnumber']"
-              placeholder="Hausnummer"
-              type="number"
-            >
-              <label slot="label">Hausnummer *</label>
-            </sl-input>
-            <sl-input
-              name="city"
-              v-model="state.formValues['billing.areacode']"
-              placeholder="Postleitzahl"
-              type="number"
-              class="viur-shop-form-grid-w-2"
-            >
-              <label slot="label">Postleitzahl *</label>
-            </sl-input>
-            <sl-input
-              name="city"
-              v-model="state.formValues['billing.city']"
-              placeholder="Stadt"
-              class="viur-shop-form-grid-w-2"
-            >
-              <label slot="label">Stadt*</label>
-            </sl-input>
-            <sl-input
-              name="province"
-              v-model="state.formValues['billing.province']"
-              placeholder="Bundesland"
-              class="viur-shop-form-grid-w-2"
-            >
-              <label slot="label">Bundesland</label>
-            </sl-input>
-          </div>
-        </div>
-      </div>
-      <div class="viur-shop-form-footer">
-        <sl-button type="submit"> Zurück </sl-button>
-        <sl-button
-          :disabled="!state.requiredFieldsFilled"
-          type="submit"
-          variant="primary"
-        >
-          Weiter
-        </sl-button>
-      </div>
-    </form>
-  </slot> -->
-  <!-- <div class="viur-shop-form-wrap"> -->
-
-  <div>
-    <h2 class="viur-shop-form-headline headline">Nutzterdaten</h2>
-    <template v-for="item in state.addSkel" :key="item[0]">
-      <bone
-        :is="getBoneWidget(item[1].type)"
-        v-if="item[1].visible && item[1].params.group === 'Customer Info'"
-        :name="item[0]"
-        :structure="structToDict(state.addSkel)"
-        :errors="state.errors[item[0]] ? state.errors[item[0]] : []"
-        :skel="state.formValues"
-        @change="changeEvent(item[0], $event)"
-        class="viur-shop-form-grid-w-2"
-      >
-      </bone>
-    </template>
-  </div>
-  <div>
-    <h2 class="viur-shop-form-headline headline">Lieferadresse</h2>
-    <template v-for="item in state.addSkel" :key="item[0]">
-      <bone
-        :is="getBoneWidget(item[1].type)"
-        v-if="item[1].visible && item[1].params.group === 'Customer Address'"
-        :name="item[0]"
-        :structure="structToDict(state.addSkel)"
-        :errors="state.errors[item[0]] ? state.errors[item[0]] : []"
-        :skel="state.formValues"
-        @change="changeEvent(item[0], $event)"
-      >
-      </bone>
-    </template>
-  </div>
-  <div v-if="state.isCustomAdress">
-    <h2 class="viur-shop-form-headline headline">Rechnungsadresse</h2>
-    <template v-for="item in state.addSkel" :key="item[0]">
-      <bone
-        :is="getBoneWidget(item[1].type)"
-        v-if="item[1].visible && item[1].params.group === 'Customer Address'"
-        :name="item[0]"
-        :structure="structToDict(state.addSkel)"
-        :errors="state.errors[item[0]] ? state.errors[item[0]] : []"
-        :skel="state.formValues"
-        @change="changeEvent(item[0], $event)"
-      >
-      </bone>
-    </template>
-  </div>
-
-  <sl-checkbox @sl-change="onCustomAdressChange" checked>
-    Rechnungsadresse wie Lieferadresse
-  </sl-checkbox>
-
-  <!-- </div> -->
-</template>
-
-<script setup>
-import { getBoneWidget } from "@viur/vue-utils/bones/edit/index";
-
-import { reactive, computed, watch, onBeforeMount } from "vue";
-import { useCartStore } from "../../../stores/cart";
-
-const props = defineProps({
-  mode: { type: String, default: "form" },
-  conditions: { type: Function },
-});
-
-const cartStore = useCartStore();
-
-const state = reactive({
-  formValues: {},
-  requiredFieldsFilled: computed(() => {
-    if (state.isCustomAdress) {
-      return (
-        Object.keys(state.formValues).includes("city") &&
-        Object.keys(state.formValues).includes("street") &&
-        Object.keys(state.formValues).includes("billing.city") &&
-        Object.keys(state.formValues).includes("billing.street") &&
-        Object.keys(state.formValues).includes("email") &&
-        Object.keys(state.formValues).includes("firstname") &&
-        Object.keys(state.formValues).includes("lastname")
-      );
-    }
-    if (!state.isCustomAdress) {
-      return (
-        Object.keys(state.formValues).includes("city") &&
-        Object.keys(state.formValues).includes("street") &&
-        Object.keys(state.formValues).includes("email") &&
-        Object.keys(state.formValues).includes("firstname") &&
-        Object.keys(state.formValues).includes("lastname")
-      );
-    }
-  }),
-  isCustomAdress: false,
-  addSkel: null,
-  errors: {},
-});
-
-// function updateFormValues(e){
-//   state.formValues[e.target.name] = e.target.value
-// }
-
-function sendData(e) {
-  console.log("sende daten...", state.formValues);
-}
-
-function onCustomAdressChange(e) {
-  if (e.target.checked) state.isCustomAdress = false;
-  if (!e.target.checked) state.isCustomAdress = true;
-}
-
-function changeEvent(boneName, ev) {
-  for (const [key, value] of Object.entries(ev.value[0])) {
-    state.formValues[key] = value;
-  }
-}
-
-function structToDict(structure) {
-  let output = {};
-
-  structure.forEach((bone) => {
-    let boneName = bone[0];
-    let boneValues = bone[1];
-
-    output[boneName] = boneValues;
-  });
-
-  return output;
-}
-
-function initBoneNames(structure) {
-  let output = [];
-
-  structure.forEach((bone) => {
-    let boneName = bone[0];
-
-    output.push(boneName);
-  });
-
-  return output;
-}
-
-watch(state.formValues, (newValues) => {
-  Object.entries(newValues).forEach(([k, v]) => {
-    if (v === "") {
-      delete state.formValues[k];
-    }
-  });
-});
-
-onBeforeMount(async () => {
-  await cartStore.getAdressStructure();
-  state.addSkel = cartStore.state.structure.address;
-});
-</script>
-
-<style scoped>
-
-.viur-shop-form-adress-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  width: 100%;
-  justify-content: space-around;
-  align-items: flex-start;
-}
-
-.viur-shop-form-adress-column {
-  align-self: flex-start;
-  flex-grow: 1;
-}
-
-.viur-shop-form-wrap {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0 var(--sl-spacing-medium);
-  margin: var(--sl-spacing-large) 0;
-}
-
-.viur-shop-form-grid-w-2 {
-  grid-column: span 2;
-}
-
-.viur-shop-form-grid-w-3 {
-  grid-column: span 3;
-}
-
-.viur-shop-form-grid-w-4 {
-  grid-column: span 4;
-}
-</style>

package/src/components/order/process/OrderComplete.vue

@@ -1,41 +0,0 @@
-<template>
-  <div class="bind">
-    <h1 class="headline">Vielen Dank für Ihre Bestellung</h1>
-    <br>
-    <p class="paragraph">
-      <strong>Ihre Bestellnummer:</strong> 123345670
-    </p>
-    <p class="paragraph">
-      Wir haben Ihre Bestellung erhalten und werden diese schenllstmöglich bearbeiten.<br>
-      Sie erhalten in wenigen Minuten eine Bestätigung per E-Mail.
-
-      <div class="btn-wrap">
-        <sl-button size="medium">
-          Zur Startseite
-        </sl-button>
-
-        <sl-button variant="primary"
-                   size="medium">
-          Weiter Einkaufen
-        </sl-button>
-      </div>
-    </p>
-
-  </div>
-</template>
-
-<script setup></script>
-
-<style scoped>
-
-.btn-wrap{
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  width: 100%;
-
-  margin-top: var(--sl-spacing-x-large);
-}
-
-</style>

package/src/components/order/process/OrderView.vue

@@ -1,210 +0,0 @@
-<template>
-  <div class="bind viur-shop-wrap">
-    <sl-tab-group
-      class="viur-shop-order-tab"
-      noScrollControls
-      @sl-tab-show="onTabChange"
-      ref="tabGroup"
-    >
-      <sl-tab
-        slot="nav"
-        :panel="tab"
-        v-for="(tab, index) in state.tabNames"
-        :key="tab"
-        :disabled="tabs[tab].disabled"
-      >
-        <div class="viur-shop-order-step">
-          <sl-icon
-            :name="tabs[tab].icon.name"
-            :library="tabs[tab].icon.library"
-          >
-          </sl-icon>
-          <div class="viur-shop-order-status-text">
-            {{ index + 1 }}. {{ tabs[tab].displayName }}
-          </div>
-        </div>
-        <sl-icon
-          name="chevron-right"
-          class="viur-shop-order-tab-check"
-          v-if="index < state.tabNames.length - 1"
-        ></sl-icon>
-      </sl-tab>
-
-      <sl-tab-panel
-        :name="tab"
-        v-for="(tab, index) in state.tabNames"
-        :key="tab"
-      >
-        <component
-          :is="tabs[tab].component"
-          v-bind="tabs[tab].props ? tabs[tab].props : ''"
-        >
-        </component>
-        <div
-          class="viur-shop-form-footer"
-          :class="{ 'flex-end': state.isFirstTab(index) }"
-          v-if="index !== state.tabNames.length - 1"
-        >
-          <sl-button type="submit" v-show="index !== 0" @click="prevTab(state.tabNames[index-1])">
-            Zurück
-          </sl-button>
-          <!-- :disabled="!state.requiredFieldsFilled" -->
-          <sl-button type="submit" variant="primary" @click="nextTab(state.tabNames[index+1])">
-            Weiter
-          </sl-button>
-        </div>
-      </sl-tab-panel>
-    </sl-tab-group>
-
-    <div class="viur-shop-sidebar" id="order_sidebar"></div>
-  </div>
-</template>
-
-<script setup>
-import { reactive, computed, ref } from "vue";
-
-const props = defineProps({
-  tabs: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emit = defineEmits(["tabChange"]);
-
-const state = reactive({
-  tabNames: computed(() => sortTabs(props.tabs)),
-  isFirstTab: (index) => {
-    if (index === 0) {
-      return true;
-    }
-    return false;
-  },
-});
-
-const tabGroup = ref(null);
-
-function sortTabs(tabs) {
-  let sortedArray = [];
-  let outputArray = [];
-
-  for (const tab in tabs) {
-    if (tabs[tab].position) {
-      sortedArray.push([tab, tabs[tab].position]);
-    } else {
-      sortedArray.push([tab, 0]);
-    }
-  }
-
-  sortedArray.sort((a, b) => {
-    return a[1] - b[1];
-  });
-
-  sortedArray.forEach((tab) => {
-    outputArray.push(tab[0]);
-  });
-
-  return outputArray;
-}
-
-function onTabChange(e) {
-  emit("tabChange", e);
-}
-
-
-function prevTab(tabName) {
-  tabGroup.value.show(tabName);
-}
-
-function nextTab(tabName) {
-  tabGroup.value.show(tabName);
-}
-</script>
-
-<style scoped>
-.viur-shop-wrap {
-  flex-direction: row;
-  gap: var(--sl-spacing-x-large);
-  align-items: flex-start;
-}
-
-.viur-shop-sidebar {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--sl-color-neutral-100);
-  min-width: 300px;
-  padding: var(--sl-spacing-medium);
-  position: sticky;
-  top: 0;
-}
-
-.viur-shop-order-tab {
-  sl-tab {
-    width: 25%;
-
-    &::part(base) {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: relative;
-      color: var(--sl-color-neutral-400);
-    }
-
-    &[aria-selected="true"]::part(base) {
-      color: var(--ignt-color-primary) !important;
-    }
-  }
-}
-
-.viur-shop-order-step {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-
-  @media (--ignt-mq-max-break-small) {
-    justify-content: center;
-  }
-
-  sl-icon {
-    font-size: 2.5em;
-    margin-bottom: 10px;
-
-    @media (--ignt-mq-max-break-small) {
-      display: none;
-    }
-  }
-}
-
-.viur-shop-order-tab-check {
-  position: absolute;
-  right: -0.5em;
-
-  @media (--ignt-mq-max-break-small) {
-    font-size: 0.7em;
-    right: -0.35em;
-    top: calc(50% - 0.35em);
-  }
-}
-
-.viur-shop-order-status-text {
-  font-size: 0.8em;
-  color: inherit;
-  text-align: center;
-  margin-top: 0.6em;
-  white-space: initial;
-}
-
-.viur-shop-form-footer {
-  display: flex;
-  justify-content: space-between;
-  margin-top: var(--sl-spacing-large);
-}
-.flex-end {
-  justify-content: flex-end;
-}
-</style>