@viur/shop-components 0.15.0 → 0.15.2

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

@@ -20,11 +20,9 @@ jobs:
         uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
           registry-url: https://registry.npmjs.org/
 
-      - name: Ensure npm supports trusted publishing
-        run: npm install -g npm@latest
       - run: npm ci
 
       - name: Determine npm tag
@@ -42,6 +40,7 @@ jobs:
           else
             echo "tag=latest" >> $GITHUB_OUTPUT
           fi
+
       - name: Publish to npm (Trusted Publishing)
         run: npm publish --access public --tag ${{ steps.npm_tag.outputs.tag }}
 

package/package.json

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

package/src/ShopSummary.vue

@@ -3,16 +3,34 @@
     <h2 class="viur-shop-cart-sidebar-headline headline" v-html="$t('viur.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 }}&nbsp;&times;
+        <template v-if="(!shopStore.state.showN1odes && item.skel_type === 'leaf') || shopStore.state.showNodes">
+          <div class="viur-shop-cart-sidebar-summary-item-row">
+            <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" v-if="getArticleDiscounts(item).length && item.price?.recommended > item.price?.current">
+              <sl-badge v-for="discount in getArticleDiscounts(item)" variant="danger" pill>
+                <template v-if="discount.discount_type === 'percentage'">-{{ discount.percentage }}%</template>
+                <template v-else>
+                  -<sl-format-number lang="de" type="currency" currency="EUR" :value="discount.absolute"></sl-format-number>
+                </template>
+              </sl-badge>
+              <sl-format-number lang="de" type="currency" currency="EUR"
+                :value="(item.total ? item.total : item.price?.current) * (item.quantity || 1)">
+              </sl-format-number>
+            </div>
+            <div class="viur-shop-cart-sidebar-summary-item-price" v-else>
+              <sl-format-number lang="de" type="currency" currency="EUR"
+                :value="(item.total ? item.total : item.price?.current) * (item.quantity || 1)">
+              </sl-format-number>
+            </div>
           </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">
+          <span class="viur-shop-cart-sidebar-summary-item-price--uvp" v-if="getArticleDiscounts(item).length && item.price?.recommended > item.price?.current">
+            UVP: <sl-format-number lang="de" type="currency" currency="EUR"
+              :value="item.price.recommended * (item.quantity || 1)">
             </sl-format-number>
-          </div>
+          </span>
         </template>
       </div>
     </div>
@@ -27,8 +45,8 @@
       <sl-format-number lang="de" type="currency" currency="EUR" :value="state.shippingTotal">
       </sl-format-number>
     </div>
-    <div class="viur-shop-cart-sidebar-info" v-if="shopStore.state.cartRoot.discount">
-      <span v-html="$t('viur.shop.summary_discount')"></span>
+    <div class="viur-shop-cart-sidebar-info" v-if="shopStore.state.cartRoot.discount && isBasketDiscount(shopStore.state.cartRoot.discount.dest.key)">
+      <span>{{ shopStore.state.cartRoot.discount.dest.name }}</span>
       <sl-format-number lang="de" type="currency" currency="EUR" :value="state.discount">
       </sl-format-number>
     </div>
@@ -76,7 +94,7 @@ import LoadingHandler from "./components/LoadingHandler.vue"
 import DiscountInput from './components/DiscountInput.vue';
 
 const shopStore = useViurShopStore();
-const { fetchCart, addItem, state: cartState } = useCart();
+const { fetchCart, fetchCartRoot, addItem, state: cartState } = useCart();
 
 const props = defineProps({
   showFeatures: {type: Boolean, default: true},
@@ -133,12 +151,40 @@ const state = reactive({
   loading:false
 })
 
+function isBasketDiscount(discountKey) {
+  const item = state.items.find(i => i.price?.cart_discounts?.length)
+  if (!item) return false
+  const discount = item.price.cart_discounts.find(d => d.key === discountKey)
+  if (!discount) return false
+  return !(discount.condition || []).some(c => c.dest?.application_domain === 'article')
+}
+
+function getArticleDiscounts(item) {
+  if (!item.price?.cart_discounts) return []
+  return item.price.cart_discounts.filter(discount =>
+    (discount.condition || []).some(c => c.dest?.application_domain === 'article')
+  )
+}
+
+function calcDiscountValue(discount, item) {
+  const quantity = item.quantity || 1
+  const recommended = item.price?.recommended || 0
+  const current = item.price?.current || 0
+  if (recommended > current) {
+    return (recommended - current) * quantity
+  }
+  if (discount.discount_type === 'percentage') {
+    return recommended * quantity * discount.percentage / 100
+  }
+  return (discount.absolute || 0) * quantity
+}
+
 onBeforeMount(() => {
   state.loading=true
   if (!shopStore.state.cartList.length) {
     fetchCart().then(()=>state.loading=false).catch(()=>state.loading=false)
   }else{
-    state.loading=false
+    fetchCartRoot().then(()=>state.loading=false).catch(()=>state.loading=false)
   }
 })
 
@@ -210,13 +256,38 @@ function calc_percent(val){
 }
 
 .viur-shop-cart-sidebar-summary-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.viur-shop-cart-sidebar-summary-item-row {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--sl-spacing-medium);
+  align-items: baseline;
 }
 
 .viur-shop-cart-sidebar-summary-item-name {
   margin-right: auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.viur-shop-cart-sidebar-summary-item-price {
+  flex-shrink: 0;
+  display: flex;
+  gap: var(--sl-spacing-x-small);
+  align-items: baseline;
+}
+
+.viur-shop-cart-sidebar-summary-item-price--uvp {
+  color: var(--sl-color-neutral-400);
+  font-size: var(--sl-font-size-small);
+  white-space: nowrap;
+  text-align: right;
+  display: block;
 }
 </style>

package/src/components/AddressForm.vue

@@ -13,11 +13,22 @@
         error-style="decent"
       >
     </ViForm>
+    <ShopAlert
+      v-if="state.showCountryChangeHint"
+      class="country-change-hint"
+      variant="warning"
+      icon-name="exclamation-triangle"
+      :closeable="true"
+      duration="Infinity"
+      :msg="$t('viur.shop.country_change_vat_hint')"
+      @on-hide="state.showCountryChangeHint = false"
+    />
 </template>
 
 <script setup>
 import {computed, onMounted, reactive, watch} from 'vue'
 import LoadingHandler from './LoadingHandler.vue';
+import ShopAlert from './ShopAlert.vue';
 import ViForm from "@viur/vue-utils/forms/ViForm.vue";
 import {useViurShopStore} from "../shop";
 import {useAddress} from "../composables/address";
@@ -68,11 +79,14 @@ const state = reactive({
     }
     return [state.formtype]
   }),
-  language: "de"
+  language: "de",
+  initialCountry: null,
+  showCountryChangeHint: false
 })
 
 function formChange(data){
   if (data.name === "country"){
+    state.showCountryChangeHint = data.value !== state.initialCountry
     state.language = data.value
     if (state.formtype === 'billing'){
       fetchPaymentData()
@@ -87,6 +101,7 @@ onMounted(()=>{
   }else{
     state.language = shopStore.state.language
   }
+  state.initialCountry = state.language
 })
 
 
@@ -104,5 +119,7 @@ watch(()=>addressState.billingIsShipping, (newVal,oldVal)=>{
 </script>
 
 <style scoped>
-
+.country-change-hint {
+  margin: 1em 0;
+}
 </style>

package/src/composables/cart.js

@@ -35,26 +35,31 @@ export function useCart() {
     }
 
 
+    let _fetchCartPromise = null;
     function fetchCart() {
-      //first fetch root then fetchItems for this root
+      // Deduplicate parallel calls - return existing promise if one is in flight
+      if (_fetchCartPromise) return _fetchCartPromise;
+
       shopStore.state.cartIsLoading = true;
+      let promise;
       if (shopStore.state.order != null && shopStore.state.order?.cart?.dest.key) {
-        // shopStore.state.cartRoot = {};
         shopStore.state.cartRoot = shopStore.state.order.cart.dest;
-
-        return fetchCartItems(shopStore.state.cartRoot["key"]).then(() => {  // TODO: duplicate code
-          shopStore.state.cartIsLoading = false;
-          shopStore.state.cartReady = true;
+        promise = fetchCartItems(shopStore.state.cartRoot["key"]);
+      } else {
+        promise = fetchCartRoot().then(() => {
+          if (!shopStore.state.cartRoot?.["key"]) return 0;
+          return fetchCartItems(shopStore.state.cartRoot["key"]);
         });
       }
-      shopStore.state.discounts = {}
-      return fetchCartRoot().then(() => {
-        if (!shopStore.state.cartRoot?.["key"]) return 0;
-        fetchCartItems(shopStore.state.cartRoot["key"]).then(() => {  // TODO: duplicate code
-          shopStore.state.cartIsLoading = false;
-          shopStore.state.cartReady = true;
-        });
+
+      _fetchCartPromise = promise.then(() => {
+        shopStore.state.cartIsLoading = false;
+        shopStore.state.cartReady = true;
+      }).finally(() => {
+        _fetchCartPromise = null;
       });
+
+      return _fetchCartPromise;
     }
 
     function fetchCartRoot(){
@@ -69,32 +74,30 @@ export function useCart() {
         })
     }
 
-    function fetchCartItems(key, parentKey=null){
-        //fetch cart items
-        if (key === shopStore.state.cartRoot["key"]){ // initial
-          shopStore.state.cartList = []
-        }
-        return Request.get(`${shopStore.state.shopApiUrl}/cart_list`,{dataObj:{
+    async function _collectCartItems(key, leafs, discounts){
+        let resp = await Request.get(`${shopStore.state.shopApiUrl}/cart_list`,{dataObj:{
             cart_key:key
-        }}).then(async( resp) =>{
-            let data = await resp.clone().json()
-
-            let currentLeafs = []
-            for (const item of data){
-              if (item["skel_type"]==="leaf"){
-                currentLeafs.push(item)
-              }else{
-                if(item.discount){
-                  shopStore.state.discounts[item.discount.dest.key] = item.discount
-                }
-                await fetchCartItems(item['key'], parentKey=true)
-              }
-            }
-            if (parentKey){
-              shopStore.state.cartList=shopStore.state.cartList.concat(currentLeafs)
-            }else{
-              shopStore.state.cartList=currentLeafs
+        }})
+        let data = await resp.clone().json()
+        for (const item of data){
+          if (item["skel_type"]==="leaf"){
+            leafs.push(item)
+          }else{
+            if(item.discount){
+              discounts[item.discount.dest.key] = item.discount
             }
+            await _collectCartItems(item['key'], leafs, discounts)
+          }
+        }
+        return resp
+    }
+
+    function fetchCartItems(key){
+        let leafs = []
+        let discounts = {}
+        return _collectCartItems(key, leafs, discounts).then((resp) => {
+            shopStore.state.cartList = leafs
+            Object.assign(shopStore.state.discounts, discounts)
 
             return resp
         })
@@ -128,7 +131,7 @@ export function useCart() {
         return Request.post(`${shopStore.state.shopApiUrl}/cart_update`, {
             dataObj: removeUndefinedValues(data)
         }).then(async (resp)=>{
-            fetchCart()
+            await fetchCart()
             return resp
         })
     }
@@ -143,7 +146,7 @@ export function useCart() {
             quantity_mode:quantity_mode
         }}).then(async (resp)=>{
             shopStore.state.cartIsUpdating=false
-            fetchCart()
+            await fetchCart()
         })
 
     }
@@ -154,46 +157,26 @@ export function useCart() {
             parent_cart_key:cart?cart:shopStore.state.cartRoot['key']
         }}).then(async (resp)=>{
             shopStore.state.cartIsUpdating=false
-            fetchCart()
+            await fetchCart()
         })
     }
 
-    function addDiscount(code) {
-        return new Promise((resolve, reject) => {
-          Request.securePost(`${shopStore.state.shopApiUrl}/discount_add`, {
-            dataObj: {
-              code: code,
-            },
-          })
-        .then(async (resp) => {
-            let data = await resp.json();
-            fetchCart()
-            console.log("discount debug", data);
-            resolve()
+    async function addDiscount(code) {
+        let resp = await Request.securePost(`${shopStore.state.shopApiUrl}/discount_add`, {
+            dataObj: { code: code },
         })
-        .catch((error) => {
-            reject(error);
-        });
-    });
+        let data = await resp.json();
+        await fetchCart()
+        return data
     }
 
-    function removeDiscount(key) {
-        return new Promise((resolve, reject) => {
-          Request.securePost(`${shopStore.state.shopApiUrl}/discount_remove`, {
-            dataObj: {
-                discount_key: key,
-            },
-          })
-        .then(async (resp) => {
-            let data = await resp.json();
-            fetchCart()
-            console.log("discount debug", data);
-            resolve()
+    async function removeDiscount(key) {
+        let resp = await Request.securePost(`${shopStore.state.shopApiUrl}/discount_remove`, {
+            dataObj: { discount_key: key },
         })
-        .catch((error) => {
-            reject(error);
-        });
-    });
+        let data = await resp.json();
+        await fetchCart()
+        return data
     }
 
     const shippingAddressKey = computed(() => shopStore.state.cartRoot?.['shipping_address']?.['dest']?.['key']);

package/src/translations/de.js

@@ -61,6 +61,7 @@ export default {
       'payment_link': 'Ihr Browser öffnet kein Popup? Dann klicken Sie bitte <a href="{url}" target="_blank">hier</a>.',
       'birthdate': 'Geburtsdatum',
       'missing_birthdate': 'Bei der ausgewählten Bezahlmethode benötigen wir zur Rechnungsadresse noch das Geburtsdatum von <i>{firstname}&nbsp;{lastname}</i>.',
+      'country_change_vat_hint': 'Bitte beachten Sie, dass bei Lieferung in ein anderes Land die Mehrwertsteuer abweichen kann.',
     },
   },
   messages: {

package/src/translations/en.js

@@ -60,6 +60,7 @@ export default {
       'payment_link': 'Your browser does not open a popup? Then please click <a href="{url}" target="_blank">here</a>.',
       'birthdate': 'date of birth',
       'missing_birthdate': 'For the selected payment method, we require the date of birth of <i>{firstname}&nbsp;{lastname}</i> in addition to the billing address.',
+      'country_change_vat_hint': 'Please note that VAT may differ when shipping to a different country.',
     },
   },
   messages: {

package/src/translations/fr.js

@@ -61,6 +61,7 @@ export default {
       'payment_link': 'Votre navigateur n\'ouvre pas de popup ? Alors cliquez <a href="{url}" target="_blank">ici</a>.',
       'birthdate': 'date de naissance',
       'missing_birthdate': 'Pour le mode de paiement sélectionné, nous avons besoin, en plus de l\'adresse de facturation, de la date de naissance de <i>{firstname}&nbsp;{lastname}</i>.',
+      'country_change_vat_hint': 'Veuillez noter que la TVA peut varier en cas de livraison dans un autre pays.',
     },
   },
   messages: {