@viur/shop-components 0.1.2 → 0.1.4-0

package/.eslintrc.cjs

@@ -0,0 +1,23 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution")
+
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true
+  },
+  root: true,
+  extends: ["plugin:vue/vue3-recommended", "plugin:prettier/recommended"],
+  plugins: ["vue", "prettier"],
+  parserOptions: {
+    ecmaVersion: "latest",
+    parser: "@typescript-eslint/parser"
+  },
+  rules: {
+    "vue/html-self-closing": 0,
+    "no-unused-vars": 1,
+    "vue/order-in-components": 0,
+    "vue/no-deprecated-slot-attribute":0,
+  }
+}

package/.github/workflows/npm-publish.yml

@@ -14,9 +14,9 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 22
           registry-url: https://registry.npmjs.org/
       - run: npm ci
       - name: Publish npm package
@@ -35,7 +35,7 @@ jobs:
         run: |
           echo "${{ contains(github.ref_name, 'dev') }}"
       - name: Release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
         # if: "!startsWith(github.ref_name, 'v-test-')"
         with:
           generate_release_notes: true

package/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": false,
+  "singleAttributePerLine": true,
+  "printWidth": 120,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "trailingComma": "none"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viur/shop-components",
-  "version": "0.1.2",
+  "version": "0.1.4-0",
   "description": "Frontend Vue components for the shop module of ViUR",
   "repository": {
     "type": "git",

package/src/Shop.vue

@@ -171,24 +171,29 @@ watch(()=>shopStore.state.currentTab, (newVal,oldVal)=>{
     padding: var(--sl-spacing-medium);
     overflow: hidden;
     border-radius: var(--sl-border-radius-medium);
-    grid-column: auto / span var(--shop-sidebar-columns);
     /* height has to be set or sidebar grows until infinity... */
     height: min-content;
+    grid-column: auto / span 12;
+    order: -1;
+    & > * + * {
+      margin-top: var(--sl-spacing-small);
+    }
     @media (min-width: 1024px) {
       position: sticky;
       max-height: calc(100vh - var(--viur-shop-sidebar-height-offset) - 2 * var(--padding));
       top: var(--padding);
       bottom: var(--padding);
+      grid-column: auto / span var(--shop-sidebar-columns);
+      order: unset;
     }
   }
 
   .viur-shop-stepper-wrap {
     display: flex;
     flex-direction: column;
-    grid-column: auto / span var(--shop-main-columns);
-
-    @media (max-width: 1024px) {
-      grid-column: auto / span 12;
+    grid-column: auto / span 12;
+    @media (min-width: 1024px) {
+      grid-column: auto / span var(--shop-main-columns);
     }
 
     @media (max-width: 600px) {

package/src/ShopOrderStepper.vue

@@ -12,25 +12,27 @@
 
             <sl-tab-panel :name="name">
                 <template v-if="tab?.['loaded']">
-                  
-                  
+
+
                     <component :is="tab['component']">
                       <template #['template_'+name]>
-                        <slot :name="'template_'+name"></slot> 
+                        <slot :name="'template_'+name"></slot>
                       </template>
-                      
+
                       <template v-slot="slotProps">
-                        <sl-bar>
+                        <sl-bar class="viur-shop-stepper-bar">
                           <div slot="right">
                             <span v-if="slotProps.hint" class="hint">{{ slotProps.hint }}</span>
                             <sl-button
-                               :class="{'action-button-hint':slotProps.hint}"
-                                variant="primary"
-                                :disabled="active(slotProps)"
-                                @click="nextStep(slotProps)"
-                                :loading="tab['validating']"
+                              :class="{'action-button-hint':slotProps.hint}"
+                              variant="success"
+                              size="large"
+                              :disabled="active(slotProps)"
+                              @click="nextStep(slotProps)"
+                              :loading="tab['validating']"
                             >
                               {{slotProps.nextName}}
+                              <sl-icon slot="suffix" name="chevron-right"></sl-icon>
                             </sl-button>
                           </div>
                         </sl-bar>
@@ -77,7 +79,7 @@ function nextStep(obj){
       useTimeoutFn(() => {
         shopStore.navigateToNext()
       }, 300)
-     
+
     }else{
       shopStore.state.tabs[shopStore.state.currentTab]['valid']=false
       shopStore.state.tabs[shopStore.state.currentTab]['validating']=false
@@ -97,6 +99,10 @@ function active(obj){
 
 <style scoped>
 
+.viur-shop-stepper-bar {
+  margin-top: var(--shop-leaf-gap, var(--ignt-spacing-small))
+}
+
 .hint{
   border:1px solid var(--sl-color-neutral-200);
   border-top-left-radius: var(--sl-input-border-radius-medium);
@@ -104,11 +110,13 @@ function active(obj){
   background-color: var(--sl-color-neutral-100);
   color:var(--sl-color-neutral-800);
   padding: 0 var(--sl-spacing-small);
-  height: var(--ignt-basic-line-height);
-  
+  height: auto;
+  min-height: var(--sl-input-height-large);
+  font-size: var(--sl-button-font-size-large);
+  line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width)* 2);
 }
 .action-button-hint::part(base){
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-</style>
+</style>

package/src/ShopSummary.vue

@@ -1,10 +1,11 @@
 <template>
-  <LoadingHandler :isLoading="!state.items.length">
-    <h2 class="viur-shop-cart-sidebar-headline headline">Zusammenfassung</h2>
+  <LoadingHandler :isLoading="state.loading">
+    <h2 class="viur-shop-cart-sidebar-headline headline" v-html="$t('shop.summary_headline')"></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 class="viur-shop-cart-sidebar-summary-item-amount" v-if="item.skel_type === 'leaf'">
+            {{ item.quantity }}&nbsp;&times;
           </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">
@@ -15,18 +16,18 @@
         </template>
       </div>
     </div>
-    <div class="viur-shop-cart-sidebar-info-line">
-      <span>Zwischensumme</span>
+    <div class="viur-shop-cart-sidebar-info">
+      <span v-html="$t('shop.summary_subtotal')"></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>
+    <div class="viur-shop-cart-sidebar-info">
+      <span v-html="$t('shop.summary_shipping_total')"></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 v-html="$t('shop.summary_delivery_time')"></span>
       <span>
         {{
           shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range ?
@@ -35,28 +36,28 @@
         }} {{ 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>
+    <div class="viur-shop-cart-sidebar-info" v-if="shopStore.state.cartRoot.discount">
+      <span v-html="$t('shop.summary_discount')"></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 class="viur-shop-cart-sidebar-info">
     </div>
-    
-    <div class="viur-shop-cart-sidebar-info-line total">
-      <span>Gesamt:</span>
+
+    <div class="viur-shop-cart-sidebar-info viur-shop-cart-sidebar-info--total">
+      <span v-html="$t('shop.summary_total')"></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">
+    <div class="viur-shop-cart-sidebar-info " v-for="vatObj in state.vat">
+      <span v-html="$t('shop.summary_vat', {'percentage':calc_percent(vatObj.percentage) })"></span>
+      <sl-format-number lang="de" type="currency" currency="EUR" :value="vatObj.value">
       </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>
+        <sl-button variant="success" size="large">{{ $t("shop.summary_checkout") }}</sl-button>
       </div>
     </slot>
   </LoadingHandler>
@@ -74,7 +75,7 @@ const { fetchCart, addItem, state: cartState } = useCart();
 
 const state = reactive({
   items: computed(() => { return shopStore.state.cartList }),
-  cartTotal: computed(() => { 
+  cartTotal: computed(() => {
     let sum = state.items.reduce((acc,item)=>{
       if (item.skel_type==="leaf"){
         acc+=item.price.current *item.quantity
@@ -101,7 +102,7 @@ const state = reactive({
     return shopStore.state.cartRoot.total
   }),
   vat:computed(()=>{
-    return shopStore.state.cartRoot.vat?.[0].value // why is this a list
+    return shopStore.state.cartRoot.vat
   }),
   sum:computed(()=>{
     let sum = state.items.reduce((acc,item)=>{
@@ -112,36 +113,47 @@ const state = reactive({
       return acc;
     },0)
     return sum
-  })
+  }),
+  loading:false
 })
 
 onBeforeMount(() => {
+  state.loading=true
   if (!shopStore.state.cartList.length) {
-    fetchCart()
+    fetchCart().then(()=>state.loading=false).catch(()=>state.loading=false)
+  }else{
+    state.loading=false
   }
 })
+
+function calc_percent(val){
+  return new Intl.NumberFormat("de-DE", {
+    style: "percent",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(val);
+}
+
+
 </script>
 
 <style scoped>
-.viur-shop-cart-sidebar-info-line {
+
+.viur-shop-cart-sidebar-info {
   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-info--total {
+  font-weight: 600;
+  border-top: 1px solid var(--sl-color-neutral-300);
+  padding-top: var(--sl-spacing-x-small);
+}
+
 .viur-shop-cart-sidebar-btn-wrap {
   display: flex;
   flex-direction: column;
@@ -152,18 +164,17 @@ onBeforeMount(() => {
   }
 }
 
-.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;
 
+  & > *:not(:empty) + *:not(:empty) {
+    margin-top: var(--sl-spacing-small);
+  }
+
   &::-webkit-scrollbar {
     width: 3px;
   }
@@ -187,7 +198,6 @@ onBeforeMount(() => {
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--sl-spacing-medium);
-  margin-bottom: var(--sl-spacing-small);
 }
 
 .viur-shop-cart-sidebar-summary-item-name {

package/src/Steps/ShopCart.vue

@@ -1,6 +1,6 @@
 <template>
     <loading-handler :isLoading="cartState.isLoading" :isUpdating="cartState.isUpdating">
-        <div class="item-wrapper" v-if="state.items.length>0">
+        <div class="viur-shop-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']"
             >
@@ -13,12 +13,12 @@
             </template>
         </shop-alert>
     </loading-handler>
-    
+
     <slot name="template_cart">
     </slot>
 
     <slot
-        nextName="weiter"
+        :nextName="$t('shop.proceed-checkout')"
         :activefunction="()=>state.items.length>0"
         :nextfunction="()=>true"
     >
@@ -48,10 +48,11 @@ onBeforeMount(()=>{
 
 </script>
 <style scoped>
-.item-wrapper{
-    display:flex;
-    flex-direction: column;
-    gap: 20px;
+
+.viur-shop-item-wrapper {
+  display:flex;
+  flex-direction: column;
+  gap: var(--shop-leaf-gap, var(--ignt-spacing-small));
 }
 
 </style>

package/src/Steps/ShopOrderConfirm.vue

@@ -3,7 +3,7 @@
     <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">
+        <div class="viur-shop-user-data-headline">
           {{ $t('viur.shop.skeleton.cartnode.shipping_address') }}
         </div>
         <template v-if="state.shippingAddress">
@@ -17,7 +17,7 @@
         </template>
       </div>
       <div class="viur-shop-cart-address">
-        <div class="viur-shop-cart-address-headline">
+        <div class="viur-shop-user-data-headline">
           {{ $t('viur.shop.skeleton.order.billing_address') }}
         </div>
         <template v-if="state.billingAddress">
@@ -271,7 +271,7 @@ sl-menu-item {
   margin-bottom: var(--sl-spacing-x-large);
 }
 
-.viur-shop-cart-address-headline {
+.viur-shop-user-data-headline {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;

package/src/Steps/ShopUserDataGuest.vue

@@ -1,24 +1,24 @@
 <template>
-    <div class="viur-shop-cart-address-headline">
-        {{ $t("skeleton.address.address_type.shipping") }}
+    <div class="viur-shop-user-data-headline">
+        {{ $t("skeleton.address.address_type.billing") }}
     </div>
-
-    <address-form :formtype="addressState.billingIsShipping?'both':'shipping'">
+    <address-form :formtype="addressState.billingIsShipping?'both':'billing'">
     </address-form>
-    <div>
-      <sl-switch :checked="addressState.billingIsShipping" @sl-change="switchAddresses">{{  $t('shop.use_shipping_as_billing_address') }}</sl-switch>
-    </div>
 
+    <sl-switch class="viur-shop-user-data-switch" :checked="addressState.billingIsShipping" @sl-change="switchAddresses">
+      {{  $t('shop.use_shipping_as_billing_address') }}
+    </sl-switch>
+    
     <div v-show="!addressState.billingIsShipping">
-      <div class="viur-shop-cart-address-headline">
-        {{ $t("skeleton.address.address_type.billing") }}
+      <div class="viur-shop-user-data-headline">
+        {{ $t("skeleton.address.address_type.shipping") }}
       </div>
-      <address-form formtype="billing" ></address-form>
+      <address-form formtype="shipping" >
+      </address-form>
     </div>
-
     <slot name="template_userdata">
     </slot>
-    
+
     <slot
         nextName="weiter"
         :activefunction="()=>true"
@@ -46,9 +46,13 @@ function switchAddresses(event){
 }
 
 onBeforeMount(()=>{
-  if (shopStore.state.cartRoot?.['shipping_address']?.['dest']?.['address_type']?.includes('billing') || !shopStore.state.cartRoot?.['shipping_address']?.['dest']){
+  if (!shopStore.state.order?.['billing_address']?.['dest']){
+    addressState.billingIsShipping = true //init
+  }
+  else if (shopStore.state.order?.['billing_address']?.['dest']?.['address_type']?.includes('shipping')){
     addressState.billingIsShipping = true
-  }else{
+  }
+  else{
     addressState.billingIsShipping = false
   }
 })
@@ -70,7 +74,7 @@ async function nextStep(){
 </script>
 
 <style scoped>
-.viur-shop-cart-address-headline {
+.viur-shop-user-data-headline {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -79,4 +83,4 @@ async function nextStep(){
   font-weight: 600;
   margin-bottom: var(--sl-spacing-medium);
 }
-</style>
+</style>

package/src/components/AddressForm.vue

@@ -29,22 +29,22 @@ const {state:addressState} = useAddress();
 const props = defineProps({
   formtype:{
     type:String,
-    default:"shipping" // formtype: shipping, billing, both
+    default:"billing" // formtype: shipping, billing, both
   }
 })
 
 const state = reactive({
   formtype:computed(()=>{
-    if (['shipping','both'].includes(props.formtype)){
-      return "shipping"
+    if (['billing','both'].includes(props.formtype)){
+      return "billing"
     }
-    return 'billing'
+    return 'shipping'
   }),
 
   action: computed(()=>{
     if (state.formtype ==='shipping' && shopStore.state.cartRoot?.['shipping_address']){
       return 'edit'
-    } else if (props.formtype === 'billing' && shopStore.state.order?.['billing_address']){
+    } else if (state.formtype === 'billing' && shopStore.state.order?.['billing_address']){
       return 'edit'
     } else {
       return 'add'
@@ -54,7 +54,7 @@ const state = reactive({
   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']){
+    } else if (state.formtype === 'billing' && shopStore.state.order?.['billing_address']){
       return shopStore.state.order?.['billing_address']?.['dest']?.['key']
     }
     return null
@@ -78,14 +78,13 @@ function formChange(data){
 
 watch(()=>addressState.billingIsShipping, (newVal,oldVal)=>{
   if(oldVal && !newVal){
-    if(shopStore.state.order?.['billing_address']){
-      shopStore.state.order['billing_address'] = null
+    if(shopStore.state.cartRoot?.['shipping_address']){
+      shopStore.state.cartRoot['shipping_address'] = null
     }
-
-    addressState[`billingForm`].state.skel = {'address_type':state.address_type, 'customer_type':'private'}
-
+    addressState[`shippingForm`].state.skel = {'address_type':state.address_type, 'customer_type':'private'}
   }
 
+  addressState[`${state.formtype}Form`].state.skel['address_type'] = state.address_type
 })
 
 </script>

package/src/components/AddressFormLayout.vue

@@ -46,6 +46,16 @@
         label="placeholder">
   </slot>
 
+  <slot boneName="email"
+        :widget="getBoneWidget(formState.structure['email']['type'])"
+        label="placeholder">
+  </slot>
+
+  <slot boneName="phone"
+        :widget="getBoneWidget(formState.structure['phone']['type'])"
+        label="placeholder">
+  </slot>
+
   </div>
 </template>
 <script setup>