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

package/src/ShopSummary.vue

@@ -0,0 +1,170 @@
+<template>
+  <h2 class="viur-shop-cart-sidebar-headline headline">Zusammenfassung</h2>
+
+  <div class="viur-shop-cart-sidebar-summary">
+    <template v-for="i in 10">
+      <div class="viur-shop-cart-sidebar-summary-item">
+        <div class="viur-shop-cart-sidebar-summary-item-amount">1x</div>
+        <div class="viur-shop-cart-sidebar-summary-item-name">Item Name auch noch etwas länger zum testen</div>
+        <div class="viur-shop-cart-sidebar-summary-item-price">1.333,00€</div>
+      </div>
+
+      <div class="viur-shop-cart-sidebar-summary-item">
+        <div class="viur-shop-cart-sidebar-summary-item-amount">1x</div>
+        <div class="viur-shop-cart-sidebar-summary-item-name">Item Name</div>
+        <div class="viur-shop-cart-sidebar-summary-item-price">1.333,00€</div>
+      </div>
+  </template>
+  </div>
+
+  <div class="viur-shop-cart-sidebar-info-line">
+    <span>Zwischensumme</span>
+
+    <sl-format-number
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="shopStore.state.order?.total"
+    >
+    </sl-format-number>
+  </div>
+
+  <div class="viur-shop-cart-sidebar-info-line">
+    <span>Versandkosten</span>
+
+    <sl-format-number
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="shopStore.state.order?.cart?.dest?.shipping?.dest?.shipping_cost"
+    >
+    </sl-format-number>
+  </div>
+  <div class="viur-shop-cart-shipping-item">
+      <span>Lieferzeit </span>
+      <template v-if="shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range === 1">
+        {{shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range}} Tag
+      </template>
+      <template v-else>
+        {{shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range}} Tage
+      </template>
+  </div>
+
+  <div class="viur-shop-cart-sidebar-info-line">
+    <span>Rabatt</span>
+
+    <sl-format-number
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="0"
+    >
+    </sl-format-number>
+  </div>
+  <div class="viur-shop-cart-sidebar-info-line">
+
+  </div>
+  <div class="viur-shop-cart-sidebar-info-line total">
+    <span>Gesamt:</span>
+    <sl-format-number
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="state.total"
+    >
+    </sl-format-number>
+  </div>
+
+  <slot name="action-buttons">
+    <div class="viur-shop-cart-sidebar-btn-wrap" v-if="!shopStore.state.order?.['is_paid']">
+      <sl-button variant="primary" size="medium">Bestellen</sl-button>
+    </div>
+  </slot>
+</template>
+<script setup>
+import {reactive, computed} from 'vue'
+import {useViurShopStore} from "./shop";
+const shopStore = useViurShopStore();
+console.log(shopStore.state.order)
+
+const state = reactive({
+  total:computed(()=>{
+    return shopStore.state.order?.total + (shopStore.state.order?.cart?.dest?.shipping?.dest?.shipping_cost?shopStore.state.order?.cart?.dest?.shipping?.dest?.shipping_cost:0)
+  })
+})
+
+
+</script>
+
+<style scoped>
+.viur-shop-cart-sidebar-info-line {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin: var(--sl-spacing-2x-small) 0;
+
+  &.total {
+    font-weight: 600;
+    border-top: 1px solid var(--sl-color-neutral-300);
+    border-bottom: 1px solid var(--sl-color-neutral-300);
+    padding: var(--sl-spacing-x-small) 0;
+    margin: var(--sl-spacing-small) 0;
+  }
+
+  span {
+    margin-right: auto;
+  }
+}
+
+.viur-shop-cart-sidebar-btn-wrap {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--sl-spacing-large);
+
+  sl-button {
+    margin-bottom: var(--sl-spacing-x-small);
+  }
+}
+
+.viur-shop-cart-sidebar-headline {
+  margin: 0 0 var(--sl-spacing-large) 0;
+}
+
+.viur-shop-cart-sidebar-summary{
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  margin-bottom: var(--sl-spacing-small);
+  padding-right: 4px;
+  margin-right: -4px;
+
+  &::-webkit-scrollbar {
+    width: 3px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--sl-color-neutral-300);
+    transition: background ease .3s;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--sl-color-neutral-400);
+  }
+}
+
+.viur-shop-cart-sidebar-summary-item{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--sl-spacing-medium);
+  margin-bottom: var(--sl-spacing-small);
+}
+
+.viur-shop-cart-sidebar-summary-item-name{
+  margin-right: auto;
+}
+</style>

package/src/Steps/ShopCart.vue

@@ -0,0 +1,60 @@
+<template>
+    <sl-button @click="fetchCart">
+        reload
+    </sl-button>
+    <sl-button @click="addItem('agtha3ZpdXIzdGVzdHIZCxIMZ3JlZW5hcnRpY2xlGICAgMSf-50JDA')">
+        add
+    </sl-button>
+    <loading-handler :isLoading="cartState.isLoading" :isUpdating="cartState.isUpdating">
+        <div class="item-wrapper" v-if="state.items.length>0">
+            <cart-item v-for="item in state.items" :item="item"
+            :edit="!shopStore.state.order?.['is_checkout_in_progress']"
+            >
+
+            </cart-item>
+        </div>
+        <shop-alert v-else variant="info" duration="Infinity">
+            <template #alertMsg>
+                {{ $t('shop.cart_empty') }}
+            </template>
+        </shop-alert>
+    </loading-handler>
+
+    <slot
+        nextName="weiter"
+        :activefunction="()=>state.items.length>0"
+        :nextfunction="()=>true"
+    >
+    </slot>
+
+</template>
+
+<script setup>
+import { useViurShopStore } from '../shop'
+import {computed, onBeforeMount, onMounted, reactive, watch} from 'vue'
+import { useCart } from '../composables/cart';
+import LoadingHandler from '../components/LoadingHandler.vue';
+import CartItem from '../components/CartItem.vue';
+import CartItemSmall from '../components/CartItemSmall.vue';
+import ShopAlert from '../components/ShopAlert.vue';
+
+const shopStore = useViurShopStore()
+const {fetchCart,addItem, state:cartState} = useCart()
+
+const state = reactive({
+    items: computed(()=>shopStore.state.cartList.filter(i=>i['skel_type']==='leaf'))
+})
+
+onBeforeMount(()=>{
+    fetchCart()
+})
+
+</script>
+<style scoped>
+.item-wrapper{
+    display:flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+</style>

package/src/Steps/ShopOrderComplete.vue

@@ -0,0 +1,24 @@
+<template>
+<div class="bind">
+    <h1 class="viur-shop-success-headline headline">
+      {{ $t('shop.order_thanks') }}
+    </h1>
+    <p class="paragraph"><strong>{{ $t('shop.order_number') }}:</strong> {{ shopStore.state.order?.["order_uid"] }}</p>
+    <p class="paragraph" v-html=" $t('shop.order_message')">
+    </p>
+
+    <p class="paragraph" v-if="shopStore.state.order?.['is_paid']">
+      {{ $t('shop.order_paid') }}
+    </p>
+
+    <p class="paragraph" v-if="shopStore.state.order?.['is_rts']">
+      {{ $t('shop.order_ready_to_ship') }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import {computed, reactive} from 'vue'
+import { useViurShopStore } from '../shop';
+const shopStore = useViurShopStore()
+</script>

package/src/Steps/ShopOrderConfirm.vue

@@ -0,0 +1,295 @@
+<template>
+    <div class="list">
+    <h2 class="viur-shop-cart-headline headline">{{ $t('shop.check_order')}}</h2>
+    <div class="viur-shop-cart-address-wrap">
+      <div class="viur-shop-cart-address">
+        <div class="viur-shop-cart-address-headline">
+          {{ $t('viur.shop.skeleton.cartnode.shipping_address') }}
+        </div>
+        <template v-if="state.shippingAddress">
+          {{ state.shippingAddress?.firstname }}
+          {{ state.shippingAddress?.lastname }}<br />
+          {{ state.shippingAddress?.street_name }}
+          {{ state.shippingAddress?.street_number }}<br />
+          {{ state.shippingAddress?.zip_code }}
+          {{ state.shippingAddress?.city }}<br />
+          {{ getDescrName('country',state.shippingAddress?.country) }}<br />
+        </template>
+      </div>
+      <div class="viur-shop-cart-address">
+        <div class="viur-shop-cart-address-headline">
+          {{ $t('viur.shop.skeleton.order.billing_address') }}
+        </div>
+        <template v-if="state.billingAddress">
+          {{ state.billingAddress.firstname }}
+          {{ state.billingAddress.lastname }}<br />
+          {{ state.billingAddress.street_name }}
+          {{ state.billingAddress.street_number }}<br />
+          {{ state.billingAddress.zip_code }}
+          {{ state.billingAddress.city }}<br />
+          {{ getDescrName('country',state.billingAddress.country) }}<br />
+        </template>
+      </div>
+    </div>
+
+    <div class="viur-shop-cart-payment">
+      <div class="viur-shop-cart-payment-method">
+        <span>{{ $t('viur.shop.skeleton.order.payment') }} </span>
+        <p>
+          {{ shopStore.state['paymentMeta']?.[state.payment]?.['title']}}
+        </p>
+      </div>
+    </div>
+
+    <div class="viur-shop-cart-payment">
+      <div class="viur-shop-cart-payment-method">
+        <span>{{ $t('viur.shop.module.shipping') }}</span>
+        <p>
+          {{ state.shipping?.name }}
+          -
+          <sl-format-number
+            type="currency"
+            currency="EUR"
+            :value="
+              state.shipping?.shipping_cost
+            "
+            lang="de"
+          >
+          </sl-format-number>
+        </p>
+      </div>
+    </div>
+
+    <sl-details :summary="$t('viur.shop.skeleton.order.cart')">
+    <cart-item-small v-for="item in state.cartList" :item="item">
+    </cart-item-small>
+  </sl-details>
+  </div>
+
+  <div class="wrapper">
+    <sl-button size="small" @click="startCheckout" :disabled="!shopStore.state.canCheckout" variant="success">{{ $t('shop.order_pay') }}</sl-button>
+  </div>
+
+  <template v-if="shopStore.state.order?.['payment_provider'] !== null && shopStore.state.order?.['payment_provider'].startsWith('unzer-')">
+    <sl-dialog v-if="state.paymentPopup" label="Zahlung" :open="state.paymentPopup" @sl-after-hide="state.paymentPopup=false">
+        <payment-provider-unzer @cancel="paymentCanceled"></payment-provider-unzer>
+    </sl-dialog>
+  </template>
+</template>
+<script setup>
+import {computed, onBeforeMount, reactive, watch} from 'vue'
+import { useViurShopStore } from '../shop';
+import boneUtils from '@viur/vue-utils/bones/utils'
+import {Request} from '@viur/vue-utils'
+import CartItemSmall from '../components/CartItemSmall.vue';
+import PaymentProviderUnzer from '../components/PaymentProviderUnzer.vue';
+const shopStore = useViurShopStore()
+
+
+// collected data from order Object > Session cart is not available anymore
+const state = reactive({
+    shippingAddress: computed(()=>shopStore.state.order?.['cart']?.['dest']?.['shipping_address']?.['dest']),
+    shipping: computed(()=>shopStore.state.order?.['cart']?.['dest']?.['shipping']?.['dest']),
+    billingAddress: computed(()=>shopStore.state.order?.['billing_address']?.['dest']),
+    payment: computed(()=>shopStore.state.order?.['payment_provider']),
+    cartList:[],
+    paymentPopup:false
+})
+
+
+// simple wrapper for value rendering
+function getDescrName(boneName, val) {
+  if (!shopStore.state.addressStructure || !val) return val
+  return boneUtils.getDescr(shopStore.state.addressStructure[boneName],val)
+}
+
+// fetch cart from order
+function getOrderCart(){
+  let cartKey = shopStore.state.order?.['cart']?.['dest']?.['key']
+  Request.get(`${shopStore.state.shopApiUrl}/cart_list`,{dataObj:{
+      cart_key:cartKey
+  }}).then(async( resp) =>{
+      let data = await resp.json()
+      state.cartList=data
+  })
+}
+
+function paymentCanceled(){
+  state.paymentPopup=false
+}
+
+//open popup and freeze cart
+function startCheckout(){
+  state.paymentPopup=true
+  shopStore.checkout()
+}
+
+//close popup if payment successfull
+watch(()=>shopStore.state.order?.['is_paid'],(newVal,oldVal)=>{
+  if(newVal){
+    state.paymentPopup=false
+  }
+})
+
+onBeforeMount(()=>{
+  getOrderCart()
+})
+
+</script>
+
+<style scoped>
+.wrapper{
+  padding:20px;
+}
+
+.viur-shop-cart-sidebar-btn-wrap {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--sl-spacing-large);
+
+  sl-button {
+    margin-bottom: var(--sl-spacing-x-small);
+  }
+}
+
+sl-alert {
+  margin-top: var(--sl-spacing-medium);
+  margin-bottom: var(--sl-spacing-medium);
+}
+
+sl-tooltip {
+  &::part(body) {
+    line-height: 1.2;
+    font-weight: 400;
+    padding: 10px;
+  }
+}
+
+sl-menu-item {
+  &::part(base) {
+    padding: 0.2em 0.9em 0.2em 0.8em;
+  }
+
+  &::part(checked-icon) {
+    display: none;
+  }
+
+  &::part(prefix) {
+    margin-right: 10px;
+  }
+
+  &::part(suffix) {
+    margin-right: -1.5em;
+  }
+}
+
+.viur-shop-cart-sidebar-info-line {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin: var(--sl-spacing-2x-small) 0;
+
+  span {
+    margin-right: auto;
+  }
+
+  &.total {
+    font-weight: 600;
+    border-top: 1px solid var(--sl-color-neutral-300);
+    border-bottom: 1px solid var(--sl-color-neutral-300);
+    padding: var(--sl-spacing-x-small) 0;
+    margin: var(--sl-spacing-small) 0;
+  }
+}
+
+.viur-shop-cart-mini-card {
+  margin-bottom: var(--sl-spacing-x-large);
+
+  &::part(header) {
+    border-bottom: none;
+    padding-top: 0;
+    padding-right: 0;
+  }
+
+  &::part(image) {
+    flex-basis: 25%;
+    max-width: 90px;
+  }
+
+  &::part(body) {
+    display: flex;
+    flex: 1;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-right: 0;
+  }
+
+  &::part(group) {
+    padding: var(--sl-spacing-small) 0;
+  }
+}
+
+.viur-shop-cart-mini-card-body-row {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: var(--sl-spacing-large);
+  flex: 1;
+}
+
+.viur-shop-cart-mini-card-body-info {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.viur-shop-cart-mini-card-info-wrap {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--sl-spacing-medium);
+}
+
+.viur-shop-cart-mini-card-info {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+
+  span {
+    margin-right: var(--sl-spacing-x-small);
+    font-weight: 600;
+  }
+}
+
+.viur-shop-cart-address-wrap {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--sl-spacing-x-large);
+  margin-bottom: var(--sl-spacing-x-large);
+}
+
+.viur-shop-cart-address-headline {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 600;
+}
+
+.viur-shop-cart-payment {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--sl-spacing-x-large);
+
+  span {
+    font-weight: 600;
+  }
+}
+
+.viur-shop-cart-headline {
+  margin: 0 0 var(--sl-spacing-x-large) 0;
+  font-size: var(--shop-form-headline-size);
+}
+</style>

package/src/Steps/ShopPaymentProvider.vue

@@ -0,0 +1,53 @@
+<template>
+  <sl-radio-group :value="state.selection">
+    <sl-details-group>
+
+      <payment-option v-for="option in paymentState.paymentData" :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>
+
+  <slot
+      nextName="weiter"
+      :activefunction="()=>shopStore.state.order?.['payment_provider']"
+      :nextfunction="()=>true"
+  >
+  </slot>
+
+</template>
+<script setup>
+import {computed, reactive, onBeforeMount} from 'vue'
+import PaymentOption from "../components/PaymentOption.vue";
+import {usePayment} from "../composables/payment";
+import {useOrder} from "../composables/order";
+import {useViurShopStore} from "../shop";
+
+const {state:paymentState, fetchPaymentData} = usePayment()
+const {addOrUpdateOrder} = useOrder()
+const shopStore = useViurShopStore()
+
+const state = reactive({
+    selection:null,
+})
+
+function optionChanged(type){
+  shopStore.state.order['payment_provider'] = null
+  state.selection=type
+  addOrUpdateOrder({payment_provider:type})
+}
+
+onBeforeMount(()=>{
+  fetchPaymentData().then(()=>{
+    state.selection = shopStore.state.order?.['payment_provider']
+  })
+})
+</script>

package/src/Steps/ShopShippingMethod.vue

@@ -0,0 +1,53 @@
+<template>
+  <loading-handler :isLoading="shippingState.isLoading">
+
+    <card-selector :options="shippingState.shippingData"
+                    v-model:selection="state.selectedShippingMethod"
+                    @change="updateShippingMethod"
+    >
+      <template v-slot="{option, index}">
+          <img slot="image">
+          {{ option['dest']['name'] }} - Lieferzeit: {{ option['dest']['delivery_time_range'] }} Tage
+      </template>
+    </card-selector>
+  </loading-handler>
+  <slot
+        nextName="weiter"
+        :activefunction="()=>shopStore.state.cartRoot?.['shipping']"
+        :nextfunction="()=>true"
+    >
+    </slot>
+</template>
+<script setup>
+import {reactive,onBeforeMount} from "vue";
+import CardSelector from "../components/CardSelector.vue";
+import LoadingHandler from "../../old/components/generic/loadinghandler.vue";
+import {useShipping} from "../composables/shipping";
+import {useCart} from "../composables/cart";
+import {useViurShopStore} from "../shop";
+
+const shopStore = useViurShopStore();
+const {updateCart} = useCart();
+const {state: shippingState,fetchShippingData} = useShipping();
+
+const state = reactive({
+  selectedShippingMethod: null
+})
+
+function updateShippingMethod(selection){
+  shopStore.state.cartRoot['shipping'] = null
+  if (selection){
+    updateCart({shipping_key:selection['dest']['key']})
+  }
+}
+
+onBeforeMount(()=>{
+  fetchShippingData()
+  state.selectedShippingMethod = shopStore.state.cartRoot?.['shipping']
+})
+</script>
+
+
+<style scoped>
+
+</style>