@campfire-interactive/shell-header 0.5.6 → 0.6.1

package/dist/index.d.ts

@@ -38,6 +38,12 @@ interface LocaleOption {
     /** Human-readable label shown in the dropdown, e.g. "English", "Deutsch". */
     label: string;
 }
+interface CurrencyOption {
+    /** ISO-4217 code, e.g. "USD", "EUR", "JPY". */
+    code: string;
+    /** Human-readable label shown in the dropdown, e.g. "US Dollar", "Euro". */
+    label: string;
+}
 /**
  * Subset of the platform-notifications `Notification` shape that the bell UI
  * actually renders. Hosts typically map their fetched items (e.g., from
@@ -123,13 +129,31 @@ interface ShellHeaderProps {
      * pick up the change.
      */
     onLocaleChange?: (locale: string) => void | Promise<void>;
+    /**
+     * Current display currency (ISO-4217, e.g. "USD"). When provided alongside
+     * `supportedCurrencies` and `onCurrencyChange`, a Currency section renders
+     * inside the dropdown. Omitting any of the three hides it.
+     *
+     * The picker is a UI-only surface — this package neither knows nor cares
+     * about FX rates or conversion. Hosts handle rate tables, conversion, and
+     * persistence themselves.
+     */
+    currency?: string;
+    /** Currencies the user can pick from. */
+    supportedCurrencies?: ReadonlyArray<CurrencyOption>;
+    /**
+     * Called when the user picks a different currency. Consumer is responsible
+     * for persisting the choice (typically to localStorage or a user-prefs
+     * endpoint) and for propagating it through the rest of the UI.
+     */
+    onCurrencyChange?: (currency: string) => void | Promise<void>;
     /** Fixed width for the app brand area (e.g., to align with a sidebar below). */
     brandWidth?: number;
     /** Optional content in the left/center area (filters, search, breadcrumbs, etc.) */
     children?: React.ReactNode;
 }
 
-declare function ShellHeader({ appId, user, authorizedApps, currentTenantRole, notificationCount, onNotificationClick, notifications, onMarkRead, onMarkAllRead, onNotificationItemClick, onLogout, locale, supportedLocales, onLocaleChange, tenant, tenants, onTenantSwitch, brandWidth, children, }: ShellHeaderProps): react_jsx_runtime.JSX.Element;
+declare function ShellHeader({ appId, user, authorizedApps, currentTenantRole, notificationCount, onNotificationClick, notifications, onMarkRead, onMarkAllRead, onNotificationItemClick, onLogout, locale, supportedLocales, onLocaleChange, currency, supportedCurrencies, onCurrencyChange, tenant, tenants, onTenantSwitch, brandWidth, children, }: ShellHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface LocaleSwitcherProps {
     currentLocale: string;

package/dist/index.js

@@ -66,7 +66,8 @@ import {
   LogOut,
   Globe,
   ChevronDown,
-  Check
+  Check,
+  Coins
 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var iconMap = {
@@ -262,12 +263,16 @@ function UserMenu({
   locale,
   supportedLocales,
   onLocaleChange,
+  currency,
+  supportedCurrencies,
+  onCurrencyChange,
   tenant,
   tenants,
   onTenantSwitch
 }) {
   const [open, setOpen] = useState3(false);
   const [langExpanded, setLangExpanded] = useState3(false);
+  const [currExpanded, setCurrExpanded] = useState3(false);
   const [tenantExpanded, setTenantExpanded] = useState3(false);
   const [updating, setUpdating] = useState3(false);
   const ref = useRef3(null);
@@ -276,6 +281,7 @@ function UserMenu({
       if (ref.current && !ref.current.contains(e.target)) {
         setOpen(false);
         setLangExpanded(false);
+        setCurrExpanded(false);
         setTenantExpanded(false);
       }
     }
@@ -285,6 +291,7 @@ function UserMenu({
   useEffect3(() => {
     if (!open) {
       setLangExpanded(false);
+      setCurrExpanded(false);
       setTenantExpanded(false);
     }
   }, [open]);
@@ -305,6 +312,22 @@ function UserMenu({
       setOpen(false);
     }
   }
+  const showCurrency = currency !== void 0 && supportedCurrencies !== void 0 && supportedCurrencies.length > 0 && onCurrencyChange !== void 0;
+  const currentCurrency = showCurrency ? supportedCurrencies.find((c) => c.code === currency) : void 0;
+  async function handleCurrencySelect(code) {
+    if (code === currency || !onCurrencyChange) {
+      setCurrExpanded(false);
+      return;
+    }
+    setUpdating(true);
+    try {
+      await onCurrencyChange(code);
+    } finally {
+      setUpdating(false);
+      setCurrExpanded(false);
+      setOpen(false);
+    }
+  }
   const showTenant = tenant !== void 0;
   const canSwitchTenant = showTenant && onTenantSwitch !== void 0 && Array.isArray(tenants) && tenants.length > 1;
   async function handleTenantSelect(tenantId) {
@@ -417,6 +440,43 @@ function UserMenu({
           loc.code
         )) })
       ] }),
+      showCurrency && /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsx4("div", { className: "cfi-sh-divider" }),
+        /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            className: "cfi-sh-menu-item cfi-sh-locale-row",
+            onClick: () => setCurrExpanded(!currExpanded),
+            "aria-expanded": currExpanded,
+            disabled: updating,
+            children: [
+              /* @__PURE__ */ jsx4(Coins, { size: 14 }),
+              /* @__PURE__ */ jsx4("span", { className: "cfi-sh-locale-row-label", children: "Currency" }),
+              /* @__PURE__ */ jsx4("span", { className: "cfi-sh-locale-row-current", children: currentCurrency?.code ?? currency }),
+              /* @__PURE__ */ jsx4(
+                ChevronDown,
+                {
+                  size: 14,
+                  className: currExpanded ? "cfi-sh-locale-chevron cfi-sh-locale-chevron-open" : "cfi-sh-locale-chevron"
+                }
+              )
+            ]
+          }
+        ),
+        currExpanded && /* @__PURE__ */ jsx4("div", { className: "cfi-sh-locale-sublist", children: supportedCurrencies.map((cur) => /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            className: cur.code === currency ? "cfi-sh-menu-item cfi-sh-locale-sub-item cfi-sh-locale-item-active" : "cfi-sh-menu-item cfi-sh-locale-sub-item",
+            onClick: () => handleCurrencySelect(cur.code),
+            disabled: updating,
+            children: [
+              /* @__PURE__ */ jsx4("span", { className: "cfi-sh-locale-item-label", children: cur.label }),
+              /* @__PURE__ */ jsx4("span", { className: "cfi-sh-locale-item-code", children: cur.code })
+            ]
+          },
+          cur.code
+        )) })
+      ] }),
       /* @__PURE__ */ jsx4("div", { className: "cfi-sh-divider" }),
       /* @__PURE__ */ jsxs4(
         "button",
@@ -453,6 +513,9 @@ function ShellHeader({
   locale,
   supportedLocales,
   onLocaleChange,
+  currency,
+  supportedCurrencies,
+  onCurrencyChange,
   tenant,
   tenants,
   onTenantSwitch,
@@ -491,6 +554,9 @@ function ShellHeader({
           locale,
           supportedLocales,
           onLocaleChange,
+          currency,
+          supportedCurrencies,
+          onCurrencyChange,
           tenant,
           tenants,
           onTenantSwitch

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campfire-interactive/shell-header",
-  "version": "0.5.6",
+  "version": "0.6.1",
   "description": "Shared shell header with app switcher for Campfire Suite",
   "type": "module",
   "main": "dist/index.js",