@viur/shop-components 0.15.1 → 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.1",
+  "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,7 +45,7 @@
       <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">
+    <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>
@@ -133,6 +151,34 @@ 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) {
@@ -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/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']);