@eox/pages-theme-eox 1.7.0 → 1.8.0

package/.gitlab-ci.yml

@@ -1,6 +1,7 @@
 image: cypress/base:20.14.0
 
 stages:
+  - security
   - test
 
 cache:
@@ -13,6 +14,13 @@ cache:
 variables:
   npm_config_cache: "$CI_PROJECT_DIR/.npm"
 
+security:
+  stage: security
+  image: node:24-alpine
+  script:
+    - npm ci
+    - npm audit --audit-level=critical
+
 format:
   stage: test
   script:

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+# [1.8.0](https://gitlab.eox.at/eox/hub/eoxhub-portal/compare/v1.7.0...v1.8.0) (2026-06-08)
+
+### Bug Fixes
+
+- **style:** z-index for sidebar/footer ([6326866](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/632686679cd4db43a50e8e97b4557eb072409fd1))
+
+### Features
+
+- price formatting helper ([287a28a](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/287a28abe3c8611d36685bae2efb75973e94d6c1))
+
 # [1.7.0](https://gitlab.eox.at/eox/hub/eoxhub-portal/compare/v1.6.0...v1.7.0) (2026-05-11)
 
 ### Bug Fixes

package/README.md

@@ -483,3 +483,57 @@ feedback form can be disabled on individual pages via frontmatter configuration
 feedback: false
 ---
 ```
+
+## Helper Functions
+
+The theme exports a set of shared utility and helper functions from its helpers module. You can import and use these helpers in your custom VitePress components, checkout pages, or inline script setups:
+
+```javascript
+import { formatPrice, trackEvent, t } from "@eox/pages-theme-eox/src/helpers";
+```
+
+### Available Helpers
+
+#### `formatPrice(price, lang)`
+
+Formats a numeric or string-based price following either British/American style or Continental European style based on the active language code.
+
+- **Parameters**:
+  - `price` (`number|string`): The numeric price (or numeric string) to format.
+  - `lang` (`string`): The active language prefix (defaults to `'en'`).
+- **Returns**: `string` - Formatted price string.
+- **Behavior**:
+  - **English (`'en'`)**: Uses commas as thousands separators, dots as decimals, and adds a `.-` suffix for whole numbers (e.g., `1500` formatted to `€ 1,500.-`, `1500.50` formatted to `€ 1,500.50`).
+  - **Other languages (e.g., German/Continental)**: Uses dots as thousands separators, commas as decimals, and adds a `,-` suffix for whole numbers (e.g., `1500` formatted to `€ 1.500,-`, `1500.5` formatted to `€ 1.500,50`).
+
+##### Example Usage:
+
+```javascript
+import { formatPrice } from "@eox/pages-theme-eox/src/helpers";
+
+formatPrice(12000, "en"); // "€ 12,000.-"
+formatPrice(49.99, "de"); // "€ 49,99"
+```
+
+#### `trackEvent(eventDetails)`
+
+Sends a custom tracking event to Matomo Analytics.
+
+- **Parameters**:
+  - `eventDetails` (`Array<string>`): An array representing the event payload: `[Category, Action, Name?, Value?]`.
+
+##### Example Usage:
+
+```javascript
+import { trackEvent } from "@eox/pages-theme-eox/src/helpers";
+
+trackEvent(["CTA", "Click", "Technical Specifications", "Viewing Ready"]);
+```
+
+#### `t(key, i18n)`
+
+Retrieves localized translation strings from an i18n mapping object using dot-notation. Falls back to the key itself if no translation is defined.
+
+- **Parameters**:
+  - `key` (`string`): The lookup key (supports dot notation, e.g., `'legal.privacy'`).
+  - `i18n` (`object`): The translation object/table.

package/cypress/support/mocks/helpers.js

@@ -47,6 +47,50 @@ window.__helpersMock = {
     }
     return result ? result : key;
   },
+  formatPrice: (price, lang = "en") => {
+    if (typeof price === "string") {
+      const trimmed = price.trim();
+      if (/^\d+(\.\d+)?$/.test(trimmed)) {
+        price = Number(trimmed);
+      } else {
+        return price;
+      }
+    }
+    if (typeof price === "number" && !isNaN(price)) {
+      const isEnglish = !lang || lang.startsWith("en");
+      const hasCents = price % 1 !== 0;
+      if (isEnglish) {
+        if (hasCents) {
+          const formatted = new Intl.NumberFormat("en-US", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          }).format(price);
+          return `€ ${formatted}`;
+        } else {
+          const formatted = new Intl.NumberFormat("en-US", {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+          }).format(price);
+          return `€ ${formatted}.-`;
+        }
+      } else {
+        if (hasCents) {
+          const formatted = new Intl.NumberFormat("de-DE", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          }).format(price);
+          return `€ ${formatted}`;
+        } else {
+          const formatted = new Intl.NumberFormat("de-DE", {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+          }).format(price);
+          return `€ ${formatted},-`;
+        }
+      }
+    }
+    return price;
+  },
 };
 
 export const trackEvent = (...args) => window.__helpersMock.trackEvent(...args);
@@ -61,3 +105,5 @@ export const isActive = (...args) => window.__helpersMock.isActive(...args);
 export const getFlatList = (...args) =>
   window.__helpersMock.getFlatList(...args);
 export const t = (...args) => window.__helpersMock.t(...args);
+export const formatPrice = (...args) =>
+  window.__helpersMock.formatPrice(...args);

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@eox/pages-theme-eox",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "type": "module",
   "description": "Vitepress Theme with EOX branding",
   "main": "src/index.js",
   "author": "EOX",
   "license": "MIT",
+  "engines": {
+    "node": ">=24.0.0"
+  },
   "scripts": {
     "format": "npx prettier --write .",
     "format:check": "npx prettier --check .",

package/src/components/PricingTable.vue

@@ -97,7 +97,7 @@
             {{ t(plan.basePrice, theme.i18n) }}
           </h6>
           <h4 v-else class="primary-text bold" :style="dynamicPriceStyleH4">
-            € {{ calculatePrice(plan) }},-
+            {{ formatPrice(calculatePrice(plan)) }}
           </h4>
           <span
             v-if="
@@ -236,7 +236,7 @@
             class="primary-text bold"
             :style="dynamicPriceStyleH6"
           >
-            + € {{ plan.additionalPrice }},-
+            + {{ formatPrice(plan.additionalPrice) }}
           </h6>
         </div>
         <template
@@ -285,14 +285,14 @@
 </template>
 
 <script>
-import { t } from "../helpers.js";
+import { t, formatPrice } from "../helpers.js";
 import { useData } from "vitepress";
 
 export default {
   name: "PricingTable",
   setup() {
-    const { theme } = useData();
-    return { theme, t };
+    const { theme, lang } = useData();
+    return { theme, lang, t };
   },
   props: {
     config: {
@@ -346,7 +346,7 @@ export default {
         if (typeof plan.basePrice === "string") {
           text = this.t(plan.basePrice, this.theme.i18n) || "";
         } else {
-          text = `€ ${this.calculatePrice(plan)},-`;
+          text = this.formatPrice(this.calculatePrice(plan));
         }
         if (text.length > maxLen) maxLen = text.length;
       });
@@ -354,7 +354,7 @@ export default {
         if (detail.plans) {
           detail.plans.forEach((plan) => {
             if (plan.additionalPrice) {
-              const text = `+ € ${plan.additionalPrice},-`;
+              const text = `+ ${this.formatPrice(plan.additionalPrice)}`;
               if (text.length > maxLen) maxLen = text.length;
             }
           });
@@ -433,6 +433,9 @@ export default {
       }
       return basePrice + additionalOptionPrice + additionalPlanModifier;
     },
+    formatPrice(price) {
+      return formatPrice(price, this.lang);
+    },
     getRowKeys(plansArray) {
       const keys = new Set();
       plansArray.forEach((plan) => {

package/src/helpers.js

@@ -198,3 +198,55 @@ export const t = (key, i18n) => {
   }
   return typeof obj === "string" ? obj : key;
 };
+
+/**
+ * Format price according to localized English (American/British) or European (German) styles.
+ *
+ * @param {number|string} price - Price to format
+ * @param {string} lang - Language code
+ * @returns {string} Formatted price with correct separators and suffixes
+ */
+export const formatPrice = (price, lang = "en") => {
+  if (typeof price === "string") {
+    const trimmed = price.trim();
+    if (/^\d+(\.\d+)?$/.test(trimmed)) {
+      price = Number(trimmed);
+    } else {
+      return price;
+    }
+  }
+  if (typeof price === "number" && !isNaN(price)) {
+    const isEnglish = !lang || lang.startsWith("en");
+    const hasCents = price % 1 !== 0;
+    if (isEnglish) {
+      if (hasCents) {
+        const formatted = new Intl.NumberFormat("en-US", {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        }).format(price);
+        return `€ ${formatted}`;
+      } else {
+        const formatted = new Intl.NumberFormat("en-US", {
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 0,
+        }).format(price);
+        return `€ ${formatted}.-`;
+      }
+    } else {
+      if (hasCents) {
+        const formatted = new Intl.NumberFormat("de-DE", {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        }).format(price);
+        return `€ ${formatted}`;
+      } else {
+        const formatted = new Intl.NumberFormat("de-DE", {
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 0,
+        }).format(price);
+        return `€ ${formatted},-`;
+      }
+    }
+  }
+  return price;
+};

package/src/style.css

@@ -336,3 +336,12 @@ details[open] > summary > i.mdi-chevron-down {
 eox-feedback-button {
   z-index: calc(var(--vp-z-index-footer) + 1);
 }
+
+@media (min-width: 960px) {
+  footer {
+    z-index: calc(var(--vp-z-index-sidebar) + 1);
+  }
+  eox-feedback-button {
+    z-index: calc(var(--vp-z-index-sidebar) + 2);
+  }
+}