@viur/shop-components 0.14.9 → 0.15.1

package/package.json

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

package/src/ShopSummary.vue

@@ -28,7 +28,7 @@
       </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>
+      <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 +76,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},
@@ -138,7 +138,7 @@ onBeforeMount(() => {
   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)
   }
 })
 

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/components/CartItem.vue

@@ -9,6 +9,7 @@
             item?.shop_image
             ? item.shop_image
             : undefined,
+            shopStore.state.serving_url_params.CartItem,
         )
       "
     />

package/src/components/CartItemSmall.vue

@@ -9,6 +9,7 @@
             item?.shop_image
             ? item.shop_image
             : undefined,
+            shopStore.state.serving_url_params.CartItemSmall,
         )
       "
     />

package/src/shop.js

@@ -131,8 +131,13 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
         //stepper rules:
         stepperVisible: computed(()=>{
           return state.currentTab!=='complete'
-        })
+        }),
 
+        // serving_url_params for utils.getImage
+        serving_url_params: {
+          CartItem: '=s600-rw',
+          CartItemSmall: '=s200-rw',
+        },
     })
 
     function addTab({name, component, displayname, iconname, iconlibrary,active})
@@ -301,7 +306,6 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
       })
     }
 
-
     return {
         state,
         navigateToTab,

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: {

package/src/utils.js

@@ -46,9 +46,20 @@ export function getTranslations(languages="de", pattern=null){
   return fetchTranslations(languages,pattern)
 }
 
-export function getImage(image) {
-  if (image !== undefined) return Request.downloadUrlFor(image);
+export function getImage(image, serving_url_params = '=rw') {
+  let dest = image;
+  if (image && 'dest' in image) {
+    dest = image['dest'];
+  }
+  if (dest && dest?.['serving_url']) {
+    return `${dest['serving_url']}${serving_url_params}`;
+  }
 
+  if (image !== undefined) {
+    return Request.downloadUrlFor(image);
+  }
+
+  // FIXME: this is stupid: return null or raise an exception, but do not return a non-empty string!
   return 'PLACEHOLDER';
 }
 
@@ -57,4 +68,4 @@ export function removeUndefinedValues(obj) {
       Object.entries(obj)
           .filter(([key, value]) => value !== undefined && value !== null),
   );
-}
+}