@revenexx/cover 0.1.20 → 0.1.21

package/app/components/cart/item/CartItem.vue

@@ -15,7 +15,8 @@ const props = defineProps<{
 const { getImage } = useProductImage();
 const cart = useCartStore();
 const { t } = useI18n();
-const { public: { locale, currency } } = useRuntimeConfig();
+const { public: { locale } } = useRuntimeConfig();
+const currency = useDisplayCurrency();
 
 const effectivePrice = computed(() => cart.getEffectivePrice(props.item.id));
 const taxRate = computed(() => {
@@ -33,7 +34,7 @@ const displayPrice = computed(() =>
 	),
 );
 const formattedPrice = computed(() =>
-	displayPrice.value.toLocaleString(locale as string, { style: "currency", currency: currency as string }),
+	displayPrice.value.toLocaleString(locale as string, { style: "currency", currency: currency.value }),
 );
 const maxOrderQuantity = computed(() => props.item.maxOrderQuantity);
 const localePath = useLocalePath();

package/app/components/category/info/CategoryPrice.vue

@@ -3,10 +3,11 @@ import { getDisplayUnitPrice, getPriceTiers, getPriceWithOptionalTax } from "../
 import type { ProductList } from "../../../interfaces/product-list";
 
 const { t } = useI18n();
-const { public: { locale, currency, taxIncludedPrices } } = useRuntimeConfig();
+const { public: { locale, taxIncludedPrices } } = useRuntimeConfig();
+const currency = useDisplayCurrency();
 
 function formatPrice(price: number) {
-	return price.toLocaleString(locale, { style: "currency", currency });
+	return price.toLocaleString(locale, { style: "currency", currency: currency.value });
 }
 
 const props = defineProps<{

package/app/composables/useCartSummaryFormatting.ts

@@ -1,6 +1,7 @@
 export const useCartSummaryFormatting = () => {
 	const { t } = useI18n();
-	const { public: { locale, currency, taxIncludedPrices } } = useRuntimeConfig();
+	const { public: { locale, taxIncludedPrices } } = useRuntimeConfig();
+	const currency = useDisplayCurrency();
 
 	const taxLabelKey = computed(() => taxIncludedPrices ? "summary.tax.incl" : "summary.tax.excl");
 
@@ -16,7 +17,7 @@ export const useCartSummaryFormatting = () => {
 	}
 
 	function formatCurrency(value: number): string {
-		return (value).toLocaleString(locale as string, { style: "currency", currency: currency as string });
+		return (value).toLocaleString(locale as string, { style: "currency", currency: currency.value });
 	}
 
 	return {

package/app/composables/useDisplayCurrency.ts

@@ -0,0 +1,13 @@
+import type { ComputedRef } from "vue";
+
+/**
+ * The active display currency (ISO 4217) — the buyer's choice from the locale
+ * selector, falling back to the market's default. Price formatters use this
+ * instead of the static build-time currency so amounts render in the same
+ * currency the prices app resolved them in.
+ */
+export function useDisplayCurrency(): ComputedRef<string> {
+	const { markets } = useMarkets();
+	const { currency } = useLocalePreferences(markets);
+	return currency;
+}

package/app/composables/useProduct.ts

@@ -11,7 +11,8 @@ import type {
 } from "../interfaces/product-detail";
 
 export const useProductDetail = (id: MaybeRefOrGetter<string>) => {
-	const { public: { locale, currency, taxIncludedPrices } } = useRuntimeConfig();
+	const { public: { locale, taxIncludedPrices } } = useRuntimeConfig();
+	const currency = useDisplayCurrency();
 
 	const { data: detail, status, error, refresh } = useFetch<ProductDetail | null>(
 		() => productApi.detail(toValue(id)),
@@ -72,7 +73,7 @@ export const useProductDetail = (id: MaybeRefOrGetter<string>) => {
 		const basePrice = cents / 100;
 		const displayPrice = getPriceWithOptionalTax(basePrice, taxRate.value, taxIncludedPrices);
 
-		return displayPrice.toLocaleString(locale, { style: "currency", currency });
+		return displayPrice.toLocaleString(locale, { style: "currency", currency: currency.value });
 	};
 
 	const getDetailImageUrl = (filename: string): string => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revenexx/cover",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "description": "Cover \u2014 revenexx design system for Nuxt. Distributed as a Nuxt layer: generic UI components, theming tokens and stores shared by the demo shop, custom storefronts and the Blokkli theme.",
   "type": "module",
   "main": "./nuxt.config.ts",