@moonbase.sh/storefront 2.7.0 → 2.8.0

package/README.md

@@ -99,6 +99,10 @@ Moonbase.configure({
   cart: {
     quantity: 'single',
   },
+  pricing: {
+    trailingZeros: 'always',
+    currencyDisplay: 'code',
+  },
   theme: {
     colors: {
       primary: '#E5A000',
@@ -112,6 +116,22 @@ Moonbase.configure({
 })
 ```
 
+`pricing.trailingZeros` controls how whole prices render. The default `'auto'`
+drops the decimals — a $10.00 product shows as `$10`. Set it to `'always'` to keep
+the currency's own fraction digits instead (`$10.00`, and still `¥1000` for
+zero-decimal currencies like JPY). It applies to the widget's own UI and to
+`data-moonbase-render` price elements on your page alike.
+
+`pricing.currencyDisplay` picks which marker identifies the currency. Taking $10 in
+USD read from a British locale, the default `'narrowSymbol'` renders the shortest
+symbol (`$10`), `'symbol'` the locale's usual one (`US$10`), `'code'` the ISO 4217
+code (`USD 10`), and `'name'` spells it out in the visitor's language
+(`10 US dollars`). The symbol and its placement still follow the visitor's own
+locale — this only chooses between the four forms.
+
+Both `pricing` options cover the widget's UI and your `data-moonbase-render` price
+elements. The checkout itself is rendered by Moonbase and formats its own prices.
+
 You can also control where the widget mounts by providing `target`.
 
 ## Events

package/dist/moonbase.d.ts

@@ -12,6 +12,15 @@ import { StorefrontProduct } from '@moonbase.sh/vue';
 import { User } from '@moonbase.sh/vue';
 import { Voucher } from '@moonbase.sh/vue';
 
+/**
+ * Which marker identifies the currency, for `10` USD read in a British locale:
+ * - `'narrowSymbol'` (default) — the shortest symbol: `$10`.
+ * - `'symbol'` — the locale's usual symbol, disambiguated where it needs to be: `US$10`.
+ * - `'code'` — the ISO 4217 code: `USD 10`.
+ * - `'name'` — the currency spelled out in the visitor's language: `10 US dollars`.
+ */
+declare type CurrencyDisplay = 'narrowSymbol' | 'symbol' | 'code' | 'name';
+
 declare type DeepPartial<T> = T extends object ? {
     [P in keyof T]?: T[P] extends HTMLElement | undefined ? T[P] : DeepPartial<T[P]>;
 } : T;
@@ -353,6 +362,29 @@ export declare interface MoonbaseOptions {
         buttons: 'outlined' | 'light';
         cards: 'outlined' | 'shadow' | 'white';
     };
+    pricing: {
+        /**
+         * How to render a price that lands on a whole number.
+         * - `'auto'` (default) drops the fraction entirely, so `10` renders `$10`.
+         * - `'always'` keeps the currency's own fraction digits, so `10` renders
+         *   `$10.00` — and still `¥1000` for zero-decimal currencies like JPY.
+         *
+         * Prices that aren't whole are unaffected; they always show their decimals.
+         */
+        trailingZeros: TrailingZeros;
+        /**
+         * Which marker identifies the currency. Taking `10` USD read in a British
+         * locale:
+         * - `'narrowSymbol'` (default) renders the shortest symbol, `$10`.
+         * - `'symbol'` renders the locale's usual symbol, `US$10`.
+         * - `'code'` renders the ISO 4217 code, `USD 10`.
+         * - `'name'` spells it out in the visitor's language, `10 US dollars`.
+         *
+         * The symbol and its placement always follow the visitor's own locale;
+         * this only picks which of the four forms to use.
+         */
+        currencyDisplay: CurrencyDisplay;
+    };
     target: HTMLElement | undefined;
     /**
      * When the host page declares a fixed-width mobile viewport (e.g. Wix's
@@ -377,6 +409,12 @@ export declare interface TikTokPixelConfig {
     pixelId: string;
 }
 
+/**
+ * How a whole-number price renders: `'auto'` drops the fraction (`$10`),
+ * `'always'` keeps the currency's own fraction digits (`$10.00`, `¥1000`).
+ */
+declare type TrailingZeros = 'auto' | 'always';
+
 export declare const urlKey: InjectionKey<string>;
 
 export { }