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

package/src/ShopSummary.vue

@@ -0,0 +1,196 @@
+<template>
+  <LoadingHandler :isLoading="!state.items.length">
+    <h2 class="viur-shop-cart-sidebar-headline headline">Zusammenfassung</h2>
+    <div class="viur-shop-cart-sidebar-summary">
+      <div class="viur-shop-cart-sidebar-summary-item" v-for="item in state.items">
+        <template v-if="(!shopStore.state.showNodes && item.skel_type === 'leaf') || shopStore.state.showNodes">
+          <div class="viur-shop-cart-sidebar-summary-item-amount" v-if="item.skel_type === 'leaf'">{{ item.quantity }}x
+          </div>
+          <div class="viur-shop-cart-sidebar-summary-item-name" v-html="item.skel_type === 'node' ? item.name : item.shop_name"></div>
+          <div class="viur-shop-cart-sidebar-summary-item-price">
+            <sl-format-number lang="de" type="currency" currency="EUR"
+              :value="item.total ? item.total : item.price?.current">
+            </sl-format-number>
+          </div>
+        </template>
+      </div>
+    </div>
+    <div class="viur-shop-cart-sidebar-info-line">
+      <span>Zwischensumme</span>
+      <sl-format-number lang="de" type="currency" currency="EUR" :value="state.cartTotal">
+      </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="state.shippingTotal">
+      </sl-format-number>
+    </div>
+    <div class="viur-shop-cart-shipping-item" v-if="shopStore.state.order?.cart?.dest?.shipping">
+      <span>Lieferzeit </span>
+      <span>
+        {{
+          shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range ?
+            shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range :
+            0
+        }} {{ shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range === 1 ? "Tag" : "Tage" }}
+      </span>
+    </div>
+    <div class="viur-shop-cart-sidebar-info-line" v-if="shopStore.state.cartRoot.discount">
+      <span>Rabatt</span>
+      <sl-format-number lang="de" type="currency" currency="EUR" :value="state.discount">
+      </sl-format-number>
+    </div>
+    <discount-input v-if="shopStore.state.currentTab!=='complete'"></discount-input>
+    <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>
+    <div class="viur-shop-cart-sidebar-info-line ">
+      <span>inkl. MwSt:</span>
+      <sl-format-number lang="de" type="currency" currency="EUR" :value="state.vat">
+      </sl-format-number>
+    </div>
+    <slot name="action-buttons" >
+      <div class="viur-shop-cart-sidebar-btn-wrap" v-if="false && !shopStore.state.order?.['is_paid']">
+        <sl-button variant="primary" size="medium">Bestellen</sl-button>
+      </div>
+    </slot>
+  </LoadingHandler>
+</template>
+
+<script setup>
+import { reactive, computed, onBeforeMount } from 'vue'
+import { useViurShopStore } from "./shop";
+import { useCart } from "./composables/cart";
+import LoadingHandler from "./components/LoadingHandler.vue"
+import DiscountInput from './components/DiscountInput.vue';
+
+const shopStore = useViurShopStore();
+const { fetchCart, addItem, state: cartState } = useCart();
+
+const state = reactive({
+  items: computed(() => { return shopStore.state.cartList }),
+  cartTotal: computed(() => { 
+    let sum = state.items.reduce((acc,item)=>{
+      if (item.skel_type==="leaf"){
+        acc+=item.price.current *item.quantity
+      }
+
+      return acc;
+    },0)
+    return sum
+  }),
+  shippingTotal: computed(() => {
+    let total = 0
+
+    // let hasOrder = Object.keys(shopStore.state.order).length ? true : false
+    // let hasShipping = Object.keys(shopStore.state.order.cart.dest.shipping).length ? true : false
+
+    if( shopStore.state?.order?.cart?.dest?.shipping?.dest?.shipping_cost > 0 ) {
+      total += shopStore.state.order.cart.dest.shipping.dest.shipping_cost
+    }
+
+    return total
+  }),
+  discount:computed(()=> (state.cartTotal - shopStore.state.cartRoot.total_discount_price)*-1),
+  total: computed(() => {
+    return shopStore.state.cartRoot.total
+  }),
+  vat:computed(()=>{
+    return shopStore.state.cartRoot.vat?.[0].value // why is this a list
+  }),
+  sum:computed(()=>{
+    let sum = state.items.reduce((acc,item)=>{
+      if (item.skel_type==="leaf"){
+        acc+=item.price.current *item.quantity
+      }
+
+      return acc;
+    },0)
+    return sum
+  })
+})
+
+onBeforeMount(() => {
+  if (!shopStore.state.cartList.length) {
+    fetchCart()
+  }
+})
+</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,57 @@
+<template>
+    <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 name="template_cart">
+    </slot>
+
+    <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,32 @@
+<template>
+  <div>
+    <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>
+
+    <slot name="template_complete">
+    </slot>
+    
+    <sl-details :summary="$t('shop.order_summary')">
+      <shop-summary ></shop-summary>
+    </sl-details>
+  </div>
+</template>
+
+<script setup>
+import {computed, reactive} from 'vue'
+import { useViurShopStore } from '../shop';
+import ShopSummary from '../ShopSummary.vue';
+const shopStore = useViurShopStore()
+</script>

package/src/Steps/ShopOrderConfirm.vue

@@ -0,0 +1,300 @@
+<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')">
+      <template  v-for="item in state.cartList">
+      <cart-item-small v-if="item.skel_type==='leaf'" :item="item" @sl-show="getOrderCart">
+      </cart-item-small>
+    </template>
+  </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>
+
+  <slot name="template_confirm">
+  </slot>
+</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,56 @@
+<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 name="template_paymentprovider">
+  </slot>
+
+  <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>