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

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>

package/src/Steps/ShopUserDataGuest.vue

@@ -0,0 +1,78 @@
+<template>
+    <div class="viur-shop-cart-address-headline">
+        {{ $t("skeleton.address.address_type.shipping") }}
+    </div>
+
+    <address-form :formtype="addressState.billingIsShipping?'both':'shipping'">
+    </address-form>
+    <div>
+      <sl-switch :checked="addressState.billingIsShipping" @sl-change="switchAddresses">Verwende Lieferadresse als Rechnungsadresse</sl-switch>
+    </div>
+
+    <div v-show="!addressState.billingIsShipping">
+      <div class="viur-shop-cart-address-headline">
+        {{ $t("skeleton.address.address_type.billing") }}
+      </div>
+      <address-form formtype="billing" ></address-form>
+    </div>
+
+    <slot
+        nextName="weiter"
+        :activefunction="()=>true"
+        :nextfunction="nextStep"
+    >
+    </slot>
+</template>
+
+
+
+<script setup>
+import {reactive, onBeforeMount, watch} from 'vue'
+import AddressForm from '../components/AddressForm.vue'
+import {useAddress} from "../composables/address";
+import {useViurShopStore} from "../shop";
+const shopStore = useViurShopStore();
+const {state:addressState,saveAddresses} = useAddress()
+
+const state = reactive({
+})
+
+function switchAddresses(event){
+  addressState.billingIsShipping=event.target.checked
+}
+
+onBeforeMount(()=>{
+  if (shopStore.state.cartRoot?.['shipping_address']?.['dest']?.['address_type']?.includes('billing') || !shopStore.state.cartRoot?.['shipping_address']?.['dest']){
+    addressState.billingIsShipping = true
+  }else{
+    addressState.billingIsShipping = false
+  }
+})
+
+
+async function nextStep(){
+  // form is only valid if the action field ends with Success
+  try{
+    let result = await saveAddresses(addressState.billingIsShipping)
+    if (result['action'] && result['action'].endsWith('Success')){
+      return true
+    }
+    return false
+  } catch(error){
+    return false
+  }
+}
+
+</script>
+
+<style scoped>
+.viur-shop-cart-address-headline {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 600;
+  margin-bottom: var(--sl-spacing-medium);
+}
+</style>

package/src/Steps/index.js

@@ -0,0 +1,15 @@
+import ShopCart from './ShopCart.vue'
+import ShopUserDataGuest from './ShopUserDataGuest.vue'
+import ShopShippingMethod from './ShopShippingMethod.vue'
+import ShopPaymentProvider from './ShopPaymentProvider.vue'
+import ShopOrderConfirm from './ShopOrderConfirm.vue'
+import ShopOrderComplete from './ShopOrderComplete.vue'
+
+export {
+    ShopCart,
+    ShopUserDataGuest,
+    ShopShippingMethod,
+    ShopPaymentProvider,
+    ShopOrderConfirm,
+    ShopOrderComplete
+  }

package/src/components/AddressForm.vue

@@ -0,0 +1,84 @@
+<template>
+    <LoadingHandler :is-loading="addressState[`${state.formtype}IsLoading`]"></LoadingHandler>
+    <ViForm
+        :ref="(el)=>{addressState[`${state.formtype}Form`]=el; return el}"
+        :module="`${shopStore.state.moduleName}/address`"
+        :action="state.action"
+        :skelkey="state.skelkey"
+        :values="{'address_type':state.address_type, 'customer_type':'private'}"
+        :useCategories="false"
+        :layout="AddressFormLayout"
+      >
+    </ViForm>
+</template>
+
+<script setup>
+import {computed, reactive, watch} from 'vue'
+import LoadingHandler from './LoadingHandler.vue';
+import AddressFormLayout from './AddressFormLayout.vue';
+import ViForm from "@viur/vue-utils/forms/ViForm.vue";
+import {useViurShopStore} from "../shop";
+import {useAddress} from "../composables/address";
+
+const shopStore = useViurShopStore();
+const {state:addressState} = useAddress();
+
+const props = defineProps({
+  formtype:{
+    type:String,
+    default:"shipping" // formtype: shipping, billing, both
+  }
+})
+
+const state = reactive({
+  formtype:computed(()=>{
+    if (['shipping','both'].includes(props.formtype)){
+      return "shipping"
+    }
+    return 'billing'
+  }),
+
+  action: computed(()=>{
+    if (state.formtype ==='shipping' && shopStore.state.cartRoot?.['shipping_address']){
+      return 'edit'
+    } else if (props.formtype === 'billing' && shopStore.state.order?.['billing_address']){
+      return 'edit'
+    } else {
+      return 'add'
+    }
+  }),
+
+  skelkey:computed(()=>{
+    if (state.formtype === 'shipping' && shopStore.state.cartRoot?.['shipping_address']){
+      return shopStore.state.cartRoot['shipping_address']?.['dest']?.['key']
+    } else if (props.formtype === 'billing' && shopStore.state.order?.['billing_address']){
+      return shopStore.state.order?.['billing_address']?.['dest']?.['key']
+    }
+    return null
+
+  }),
+  address_type:computed(()=>{
+    if (props.formtype === 'both'){
+      return ["shipping",'billing']
+    }
+    return [state.formtype]
+  }),
+})
+
+watch(()=>addressState.billingIsShipping, (newVal,oldVal)=>{
+  if(oldVal && !newVal){
+    if(shopStore.state.order?.['billing_address']){
+      shopStore.state.order['billing_address'] = null
+    }
+
+    addressState[`billingForm`].state.skel = {'address_type':state.address_type, 'customer_type':'private'}
+
+  }
+
+})
+
+</script>
+
+<style scoped>
+
+</style>

package/src/components/AddressFormLayout.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="vi-shop-cart-form-wrap" v-if="Object.keys(formState.structure).length > 0">
+    <slot
+      boneName="salutation"
+      :widget="getBoneWidget(formState.structure['salutation']['type'])"
+      label="placeholder"
+    >
+    </slot>
+
+    <slot boneName="firstname"
+        :widget="getBoneWidget(formState.structure['firstname']['type'])"
+        label="placeholder">
+    </slot>
+
+    <slot boneName="lastname"
+          :widget="getBoneWidget(formState.structure['lastname']['type'])"
+          label="placeholder">
+    </slot>
+
+    <slot boneName="street_name"
+          :widget="getBoneWidget(formState.structure['street_name']['type'])"
+          label="placeholder">
+    </slot>
+
+    <slot boneName="street_number"
+          :widget="getBoneWidget(formState.structure['street_number']['type'])"
+          label="placeholder">
+    </slot>
+
+    <slot
+        boneName="zip_code"
+        :widget="getBoneWidget(formState.structure['zip_code']['type'])"
+        placeholder="placeholder"
+        label="placeholder"
+    >
+    </slot>
+
+    <slot boneName="city"
+          :widget="getBoneWidget(formState.structure['city']['type'])"
+          label="placeholder">
+    </slot>
+
+
+  <slot boneName="country"
+        :widget="getBoneWidget(formState.structure['country']['type'])"
+        label="placeholder">
+  </slot>
+
+  </div>
+</template>
+<script setup>
+import { inject } from "vue";
+import { getBoneWidget } from "@viur/vue-utils/bones/edit";
+
+const formState = inject("formState");
+const formUpdate = inject("formUpdate");
+</script>
+<style scoped>
+
+.vi-shop-cart-form-wrap{
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--sl-spacing-small);
+  margin-bottom: var(--sl-spacing-medium);
+}
+
+:deep(.bone-wrapper){
+  margin: 0;
+}
+
+:deep(.wrapper-bone-firstname){
+  grid-column: 1 / span 2;
+}
+
+:deep(.wrapper-bone-lastname){
+  grid-column: 3 / span 2;
+}
+
+:deep(.wrapper-bone-street_name){
+  grid-column: 1 / span 3;
+}
+
+:deep(.wrapper-bone-street_number){
+  grid-column: 4 / span 1;
+}
+
+:deep(.wrapper-bone-zip_code){
+  grid-column: 1 / span 2;
+}
+
+:deep(.wrapper-bone-city){
+  grid-column: 3 / span 2;
+}
+
+:deep(.wrapper-bone-country){
+  grid-column: 1 / span 4;
+}
+
+:deep(.wrapper-bone-is_default){
+  padding: var(--sl-spacing-x-small) 0;
+  grid-column: 1 / span 4;
+}
+
+
+
+
+</style>