bananas-commerce-admin 0.17.16 → 0.17.18

package/dist/esm/extensions/pos/components/ExchangeSwitch.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { Box, FormControlLabel, Switch, Typography } from "@mui/material";
+import { useI18n } from "../../../contexts/I18nContext";
+const ExchangeSwitch = ({ checked, onChange }) => {
+    const { t } = useI18n();
+    return (React.createElement(Box, { position: "absolute", right: 16, top: 16 },
+        React.createElement(FormControlLabel, { checked: checked, control: React.createElement(Switch, { color: "primary", size: "small" }), label: React.createElement(Typography, { color: "textSecondary", variant: "caption" }, t("Exchange")), labelPlacement: "end", sx: { margin: 0, gap: 0.5 }, onChange: () => onChange() })));
+};
+export default ExchangeSwitch;
+//# sourceMappingURL=ExchangeSwitch.js.map

package/dist/esm/extensions/pos/components/ExchangeSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExchangeSwitch.js","sourceRoot":"","sources":["../../../../../src/extensions/pos/components/ExchangeSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,gBAAgB,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAOxD,MAAM,cAAc,GAAkC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC9E,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAExB,OAAO,CACL,oBAAC,GAAG,IAAC,QAAQ,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE;QACzC,oBAAC,gBAAgB,IACf,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,oBAAC,MAAM,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,GAAG,EAChD,KAAK,EACH,oBAAC,UAAU,IAAC,KAAK,EAAC,eAAe,EAAC,OAAO,EAAC,SAAS,IAChD,CAAC,CAAC,UAAU,CAAC,CACH,EAEf,cAAc,EAAC,KAAK,EACpB,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,EAC3B,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,GAC1B,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/esm/extensions/pos/components/SitesAmountsList.js

@@ -2,10 +2,10 @@ import React from "react";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { currencyFormat } from "../utils/amountToCurrencyString";
-const SitesAmountsList = ({ data }) => {
+const SitesAmountsList = ({ data, isExchanged }) => {
     return (React.createElement(Stack, { direction: "column", px: 2 }, data.map((item) => (React.createElement(Stack, { key: item.site_code, alignItems: "center", direction: "row", justifyContent: "space-between", spacing: 1 },
         React.createElement(Typography, null, item.site_code),
-        React.createElement(Typography, { component: "p", fontSize: 28, fontWeight: 700, variant: "h5" }, currencyFormat(Number(item.amount), item.currency)))))));
+        React.createElement(Typography, { component: "p", fontSize: 20, fontWeight: 700, variant: "h5" }, currencyFormat(Number(item.amount), item.currency, undefined, isExchanged ? 0 : 2)))))));
 };
 export default SitesAmountsList;
 //# sourceMappingURL=SitesAmountsList.js.map

package/dist/esm/extensions/pos/components/SitesAmountsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SitesAmountsList.js","sourceRoot":"","sources":["../../../../../src/extensions/pos/components/SitesAmountsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAMjE,MAAM,gBAAgB,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACrE,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,IAC9B,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAClB,oBAAC,KAAK,IACJ,GAAG,EAAE,IAAI,CAAC,SAAS,EACnB,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,KAAK,EAChB,cAAc,EAAE,eAAe,EAC/B,OAAO,EAAE,CAAC;QAEV,oBAAC,UAAU,QAAE,IAAI,CAAC,SAAS,CAAc;QACzC,oBAAC,UAAU,IAAC,SAAS,EAAC,GAAG,EAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAC,IAAI,IAClE,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CACxC,CACP,CACT,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SitesAmountsList.js","sourceRoot":"","sources":["../../../../../src/extensions/pos/components/SitesAmountsList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAOjE,MAAM,gBAAgB,GAAoC,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE;IAClF,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,IAC9B,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAClB,oBAAC,KAAK,IACJ,GAAG,EAAE,IAAI,CAAC,SAAS,EACnB,UAAU,EAAE,QAAQ,EACpB,SAAS,EAAE,KAAK,EAChB,cAAc,EAAE,eAAe,EAC/B,OAAO,EAAE,CAAC;QAEV,oBAAC,UAAU,QAAE,IAAI,CAAC,SAAS,CAAc;QACzC,oBAAC,UAAU,IAAC,SAAS,EAAC,GAAG,EAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAC,IAAI,IAClE,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CACxE,CACP,CACT,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/esm/extensions/pos/components/SitesTotal.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { Typography } from "@mui/material";
+import Stack from "@mui/material/Stack";
+import { useI18n } from "../../../contexts/I18nContext";
+import { currencyFormat } from "../utils/amountToCurrencyString";
+const SitesTotal = ({ amount, currency }) => {
+    const { t } = useI18n();
+    return (React.createElement(Stack, { alignItems: "center", border: 1, borderBottom: 0, borderColor: "divider", borderLeft: 0, borderRight: 0, direction: "row", justifyContent: "space-between", mt: 2, mx: 2 },
+        React.createElement(Typography, { color: "textSecondary", variant: "overline" }, t("Total")),
+        React.createElement(Typography, { component: "p", fontSize: 28, fontWeight: 700, variant: "h5" }, currencyFormat(amount, currency, undefined, 0))));
+};
+export default SitesTotal;
+//# sourceMappingURL=SitesTotal.js.map

package/dist/esm/extensions/pos/components/SitesTotal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SitesTotal.js","sourceRoot":"","sources":["../../../../../src/extensions/pos/components/SitesTotal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,MAAM,qBAAqB,CAAC;AAExC,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAOjE,MAAM,UAAU,GAA8B,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE;IACrE,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IAExB,OAAO,CACL,oBAAC,KAAK,IACJ,UAAU,EAAC,QAAQ,EACnB,MAAM,EAAE,CAAC,EACT,YAAY,EAAE,CAAC,EACf,WAAW,EAAC,SAAS,EACrB,UAAU,EAAE,CAAC,EACb,WAAW,EAAE,CAAC,EACd,SAAS,EAAC,KAAK,EACf,cAAc,EAAC,eAAe,EAC9B,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,CAAC;QAEL,oBAAC,UAAU,IAAC,KAAK,EAAC,eAAe,EAAC,OAAO,EAAC,UAAU,IACjD,CAAC,CAAC,OAAO,CAAC,CACA;QACb,oBAAC,UAAU,IAAC,SAAS,EAAC,GAAG,EAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAC,IAAI,IAClE,cAAc,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC,CACpC,CACP,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/esm/extensions/pos/contrib/PurchaseAmountWidget.js

@@ -1,21 +1,46 @@
-import React from "react";
+import React, { useMemo, useState } from "react";
 import { Stack, Typography } from "@mui/material";
 import WidgetCard from "../../../components/WidgetCard";
+import { useApi } from "../../../contexts/ApiContext";
 import { useDashboardFilter } from "../../../contexts/DashboardFilterContext";
 import { useI18n } from "../../../contexts/I18nContext";
+import { useUser } from "../../../contexts/UserContext";
 import { pluralizeGranularity } from "../../../types/dashboard";
+import { hasPermission } from "../../../util/has_permission";
+import ExchangeSwitch from "../components/ExchangeSwitch";
 import SitesAmountsList from "../components/SitesAmountsList";
+import SitesTotal from "../components/SitesTotal";
+import { useExchangedData } from "../hooks/useExchangedData";
 import { currencyFormat } from "../utils/amountToCurrencyString";
 import { diffDatesByGranularityWithFilter } from "../utils/diffDatesByGranularity";
 const PurchaseAmountWidget = ({ data, sx }) => {
     const { t } = useI18n();
     const { filter } = useDashboardFilter();
+    const api = useApi();
+    const { user } = useUser();
+    const [shouldExchange, setShouldExchange] = useState(true);
+    const { exchangedData, totalAmount, onlyExchangedCurrency } = useExchangedData(data, shouldExchange);
     const purchaseAmounts = data.length;
     const filteredAmount = diffDatesByGranularityWithFilter(filter);
-    return (React.createElement(WidgetCard, { gridColumn: { lg: "span 3", md: "span 6", sm: "span 1" }, gridRow: "span 1", sx: sx, title: t("Purchase Revenue") }, purchaseAmounts >= 2 ? (React.createElement(SitesAmountsList, { data: data })) : (React.createElement(Stack, { height: "100%", px: 2 },
-        React.createElement(Stack, { borderBottom: "1px solid", borderColor: "divider", height: "100%" }, purchaseAmounts === 1 ? (React.createElement(Typography, { component: "p", fontSize: 28, fontWeight: 700, variant: "h5" }, currencyFormat(Number.parseFloat(data[0].amount), data[0].currency))) : purchaseAmounts === 0 ? (React.createElement(Stack, { height: "100%" },
-            React.createElement(Typography, { color: "textSecondary", variant: "caption" }, t("No revenue data for current period")))) : null),
-        React.createElement(Typography, { color: "textSecondary", variant: "overline" }, t(`Over ${pluralizeGranularity(filteredAmount, filter.granularity)}`))))));
+    const isFourColumn = useMemo(() => {
+        // Ugly check to see if the "Total Subscription Count" widget is present
+        if ("subscription.stats:total" in api.operations &&
+            "dashboard:stats:subscription:total" in api.contrib) {
+            const [{ component }] = Object.values(api.contrib["dashboard:stats:subscription:count"]);
+            if (component != null) {
+                return hasPermission(user, component.permission);
+            }
+        }
+        return false;
+    }, [api, user]);
+    return (React.createElement(WidgetCard, { gridColumn: { md: isFourColumn ? "span 3" : "span 4", sm: "span 1" }, gridRow: "span 1", sx: sx, title: t("Purchase Revenue") },
+        React.createElement(ExchangeSwitch, { checked: shouldExchange, onChange: () => setShouldExchange((prev) => !prev) }),
+        purchaseAmounts >= 2 ? (React.createElement(React.Fragment, null,
+            React.createElement(SitesAmountsList, { data: exchangedData, isExchanged: shouldExchange }),
+            shouldExchange && onlyExchangedCurrency && (React.createElement(SitesTotal, { amount: totalAmount, currency: "SEK" })))) : (React.createElement(Stack, { height: "100%", px: 2 },
+            React.createElement(Stack, { borderBottom: "1px solid", borderColor: "divider", height: "100%" }, purchaseAmounts === 1 ? (React.createElement(Typography, { component: "p", fontSize: 28, fontWeight: 700, variant: "h5" }, currencyFormat(Number.parseFloat(exchangedData[0].amount), exchangedData[0].currency))) : purchaseAmounts === 0 ? (React.createElement(Stack, { height: "100%" },
+                React.createElement(Typography, { color: "textSecondary", variant: "caption" }, t("No revenue data for current period")))) : null),
+            React.createElement(Typography, { color: "textSecondary", variant: "overline" }, t(`Over ${pluralizeGranularity(filteredAmount, filter.granularity)}`))))));
 };
 export default PurchaseAmountWidget;
 //# sourceMappingURL=PurchaseAmountWidget.js.map

package/dist/esm/extensions/pos/contrib/PurchaseAmountWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"PurchaseAmountWidget.js","sourceRoot":"","sources":["../../../../../src/extensions/pos/contrib/PurchaseAmountWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAElD,OAAO,UAAU,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,OAAO,EAAE,oBAAoB,EAAsB,MAAM,0BAA0B,CAAC;AACpF,OAAO,gBAAgB,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,gCAAgC,EAAE,MAAM,iCAAiC,CAAC;AAEnF,MAAM,oBAAoB,GAA2C,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE;IACpF,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACxB,MAAM,EAAE,MAAM,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAExC,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC;IACpC,MAAM,cAAc,GAAG,gCAAgC,CAAC,MAAM,CAAC,CAAC;IAEhE,OAAO,CACL,oBAAC,UAAU,IACT,UAAU,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,EACxD,OAAO,EAAC,QAAQ,EAChB,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,CAAC,CAAC,kBAAkB,CAAC,IAE3B,eAAe,IAAI,CAAC,CAAC,CAAC,CAAC,CACtB,oBAAC,gBAAgB,IAAC,IAAI,EAAE,IAAI,GAAI,CACjC,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,IAAC,MAAM,EAAC,MAAM,EAAC,EAAE,EAAE,CAAC;QACxB,oBAAC,KAAK,IAAC,YAAY,EAAC,WAAW,EAAC,WAAW,EAAC,SAAS,EAAC,MAAM,EAAC,MAAM,IAChE,eAAe,KAAK,CAAC,CAAC,CAAC,CAAC,CACvB,oBAAC,UAAU,IAAC,SAAS,EAAC,GAAG,EAAC,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,OAAO,EAAC,IAAI,IAClE,cAAc,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CACzD,CACd,CAAC,CAAC,CAAC,eAAe,KAAK,CAAC,CAAC,CAAC,CAAC,CAC1B,oBAAC,KAAK,IAAC,MAAM,EAAC,MAAM;YAClB,oBAAC,UAAU,IAAC,KAAK,EAAC,eAAe,EAAC,OAAO,EAAC,SAAS,IAChD,CAAC,CAAC,oCAAoC,CAAC,CAC7B,CACP,CACT,CAAC,CAAC,CAAC,IAAI,CACF;QAER,oBAAC,UAAU,IAAC,KAAK,EAAC,eAAe,EAAC,OAAO,EAAC,UAAU,IACjD,CAAC,CAAC,QAAQ,oBAAoB,CAAC,cAAc,EAAE,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,CAC3D,CACP,CACT,CACU,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"PurchaseAmountWidget.js","sourceRoot":"","sources":["../../../../../src/extensions/pos/contrib/PurchaseAmountWidget.tsx"],"names":[],"mappings":"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"}

package/dist/esm/extensions/pos/hooks/useExchangedData.js

@@ -0,0 +1,33 @@
+export function useExchangedData(data, shouldExchange, toCurrency = "SEK", exchangeRates = sekExchangeRates) {
+    const exchangedData = data.map((item) => {
+        if (shouldExchange && item.currency.toUpperCase() in exchangeRates) {
+            return {
+                ...item,
+                amount: (parseFloat(item.amount) *
+                    exchangeRates[item.currency.toUpperCase()]).toFixed(2),
+                currency: shouldExchange ? toCurrency : item.currency,
+            };
+        }
+        return {
+            ...item,
+            amount: item.amount,
+            currency: item.currency,
+        };
+    });
+    const totalAmount = exchangedData.reduce((acc, item) => {
+        return acc + parseFloat(item.amount);
+    }, 0);
+    const onlyExchangedCurrency = exchangedData.every((item) => item.currency === toCurrency);
+    return {
+        exchangedData,
+        totalAmount,
+        onlyExchangedCurrency,
+    };
+}
+const sekExchangeRates = {
+    EUR: 11.5,
+    USD: 10.5,
+    SEK: 1,
+    GBP: 13.5,
+};
+//# sourceMappingURL=useExchangedData.js.map

package/dist/esm/extensions/pos/hooks/useExchangedData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExchangedData.js","sourceRoot":"","sources":["../../../../../src/extensions/pos/hooks/useExchangedData.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,gBAAgB,CAC9B,IAA0B,EAC1B,cAAuB,EACvB,aAAqB,KAAK,EAC1B,gBAAwC,gBAAgB;IAExD,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACtC,IAAI,cAAc,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,IAAI,aAAa,EAAE,CAAC;YACnE,OAAO;gBACL,GAAG,IAAI;gBACP,MAAM,EAAE,CACN,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC;oBACvB,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAgC,CAAC,CACzE,CAAC,OAAO,CAAC,CAAC,CAAC;gBACZ,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;aACtD,CAAC;QACJ,CAAC;QAED,OAAO;YACL,GAAG,IAAI;YACP,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE;QACrD,OAAO,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,CAAC,CAAC;IAEN,MAAM,qBAAqB,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC;IAE1F,OAAO;QACL,aAAa;QACb,WAAW;QACX,qBAAqB;KACtB,CAAC;AACJ,CAAC;AAED,MAAM,gBAAgB,GAAG;IACvB,GAAG,EAAE,IAAI;IACT,GAAG,EAAE,IAAI;IACT,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,IAAI;CACV,CAAC"}

package/dist/esm/extensions/pos/utils/amountToCurrencyString.js

@@ -1,10 +1,10 @@
-export const currencyFormat = (value, currency, locale = "sv-SE") => {
+export const currencyFormat = (value, currency, locale = "sv-SE", maximumFractionDigits = 2) => {
     const formatter = new Intl.NumberFormat(locale, {
         style: "currency",
         currency: currency,
         currencyDisplay: "narrowSymbol",
         minimumFractionDigits: 0,
-        maximumFractionDigits: 2,
+        maximumFractionDigits,
     });
     return formatter.format(value);
 };

package/dist/esm/extensions/pos/utils/amountToCurrencyString.js.map

@@ -1 +1 @@
-{"version":3,"file":"amountToCurrencyString.js","sourceRoot":"","sources":["../../../../../src/extensions/pos/utils/amountToCurrencyString.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,QAAgB,EAAE,SAAiB,OAAO,EAAE,EAAE;IAC1F,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;QAC9C,KAAK,EAAE,UAAU;QACjB,QAAQ,EAAE,QAAQ;QAClB,eAAe,EAAE,cAAc;QAC/B,qBAAqB,EAAE,CAAC;QACxB,qBAAqB,EAAE,CAAC;KACzB,CAAC,CAAC;IAEH,OAAO,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACjC,CAAC,CAAC"}
+{"version":3,"file":"amountToCurrencyString.js","sourceRoot":"","sources":["../../../../../src/extensions/pos/utils/amountToCurrencyString.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,KAAa,EACb,QAAgB,EAChB,SAAiB,OAAO,EACxB,wBAAgC,CAAC,EACjC,EAAE;IACF,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;QAC9C,KAAK,EAAE,UAAU;QACjB,QAAQ,EAAE,QAAQ;QAClB,eAAe,EAAE,cAAc;QAC/B,qBAAqB,EAAE,CAAC;QACxB,qBAAqB;KACtB,CAAC,CAAC;IAEH,OAAO,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACjC,CAAC,CAAC"}

package/dist/types/extensions/pos/components/ExchangeSwitch.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface ExchangeSwitchProps {
+    checked: boolean;
+    onChange: () => void;
+}
+declare const ExchangeSwitch: React.FC<ExchangeSwitchProps>;
+export default ExchangeSwitch;

package/dist/types/extensions/pos/components/SitesAmountsList.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { PurchaseAmountItem } from "../../../types/dashboard";
 export interface SitesAmountsListProps {
     data: PurchaseAmountItem[];
+    isExchanged: boolean;
 }
 declare const SitesAmountsList: React.FC<SitesAmountsListProps>;
 export default SitesAmountsList;

package/dist/types/extensions/pos/components/SitesTotal.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface SitesTotalProps {
+    amount: number;
+    currency: string;
+}
+declare const SitesTotal: React.FC<SitesTotalProps>;
+export default SitesTotal;

package/dist/types/extensions/pos/hooks/useExchangedData.d.ts

@@ -0,0 +1,10 @@
+import { PurchaseAmountItem } from "../../../types";
+export declare function useExchangedData(data: PurchaseAmountItem[], shouldExchange: boolean, toCurrency?: string, exchangeRates?: Record<string, number>): {
+    exchangedData: {
+        amount: string;
+        currency: string;
+        site_code: string;
+    }[];
+    totalAmount: number;
+    onlyExchangedCurrency: boolean;
+};

package/dist/types/extensions/pos/utils/amountToCurrencyString.d.ts

@@ -1 +1 @@
-export declare const currencyFormat: (value: number, currency: string, locale?: string) => string;
+export declare const currencyFormat: (value: number, currency: string, locale?: string, maximumFractionDigits?: number) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bananas-commerce-admin",
-  "version": "0.17.16",
+  "version": "0.17.18",
   "description": "What's this, an admin for apes?",
   "keywords": [
     "admin",

package/src/extensions/pos/components/ExchangeSwitch.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { Box, FormControlLabel, Switch, Typography } from "@mui/material";
+
+import { useI18n } from "../../../contexts/I18nContext";
+
+export interface ExchangeSwitchProps {
+  checked: boolean;
+  onChange: () => void;
+}
+
+const ExchangeSwitch: React.FC<ExchangeSwitchProps> = ({ checked, onChange }) => {
+  const { t } = useI18n();
+
+  return (
+    <Box position="absolute" right={16} top={16}>
+      <FormControlLabel
+        checked={checked}
+        control={<Switch color="primary" size="small" />}
+        label={
+          <Typography color="textSecondary" variant="caption">
+            {t("Exchange")}
+          </Typography>
+        }
+        labelPlacement="end"
+        sx={{ margin: 0, gap: 0.5 }}
+        onChange={() => onChange()}
+      />
+    </Box>
+  );
+};
+
+export default ExchangeSwitch;

package/src/extensions/pos/components/SitesAmountsList.tsx

@@ -8,9 +8,10 @@ import { currencyFormat } from "../utils/amountToCurrencyString";
 
 export interface SitesAmountsListProps {
   data: PurchaseAmountItem[];
+  isExchanged: boolean;
 }
 
-const SitesAmountsList: React.FC<SitesAmountsListProps> = ({ data }) => {
+const SitesAmountsList: React.FC<SitesAmountsListProps> = ({ data, isExchanged }) => {
   return (
     <Stack direction={"column"} px={2}>
       {data.map((item) => (
@@ -22,8 +23,8 @@ const SitesAmountsList: React.FC<SitesAmountsListProps> = ({ data }) => {
           spacing={1}
         >
           <Typography>{item.site_code}</Typography>
-          <Typography component="p" fontSize={28} fontWeight={700} variant="h5">
-            {currencyFormat(Number(item.amount), item.currency)}
+          <Typography component="p" fontSize={20} fontWeight={700} variant="h5">
+            {currencyFormat(Number(item.amount), item.currency, undefined, isExchanged ? 0 : 2)}
           </Typography>
         </Stack>
       ))}

package/src/extensions/pos/components/SitesTotal.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+import { Typography } from "@mui/material";
+import Stack from "@mui/material/Stack";
+
+import { useI18n } from "../../../contexts/I18nContext";
+import { currencyFormat } from "../utils/amountToCurrencyString";
+
+export interface SitesTotalProps {
+  amount: number;
+  currency: string;
+}
+
+const SitesTotal: React.FC<SitesTotalProps> = ({ amount, currency }) => {
+  const { t } = useI18n();
+
+  return (
+    <Stack
+      alignItems="center"
+      border={1}
+      borderBottom={0}
+      borderColor="divider"
+      borderLeft={0}
+      borderRight={0}
+      direction="row"
+      justifyContent="space-between"
+      mt={2}
+      mx={2}
+    >
+      <Typography color="textSecondary" variant="overline">
+        {t("Total")}
+      </Typography>
+      <Typography component="p" fontSize={28} fontWeight={700} variant="h5">
+        {currencyFormat(amount, currency, undefined, 0)}
+      </Typography>
+    </Stack>
+  );
+};
+
+export default SitesTotal;

package/src/extensions/pos/contrib/PurchaseAmountWidget.tsx

@@ -1,38 +1,79 @@
-import React from "react";
+import React, { useMemo, useState } from "react";
 
 import { Stack, Typography } from "@mui/material";
 
 import WidgetCard from "../../../components/WidgetCard";
+import { useApi } from "../../../contexts/ApiContext";
 import { useDashboardFilter } from "../../../contexts/DashboardFilterContext";
 import { useI18n } from "../../../contexts/I18nContext";
+import { useUser } from "../../../contexts/UserContext";
 import { ContribComponent } from "../../../types";
 import { pluralizeGranularity, PurchaseAmountItem } from "../../../types/dashboard";
+import { hasPermission } from "../../../util/has_permission";
+import ExchangeSwitch from "../components/ExchangeSwitch";
 import SitesAmountsList from "../components/SitesAmountsList";
+import SitesTotal from "../components/SitesTotal";
+import { useExchangedData } from "../hooks/useExchangedData";
 import { currencyFormat } from "../utils/amountToCurrencyString";
 import { diffDatesByGranularityWithFilter } from "../utils/diffDatesByGranularity";
 
 const PurchaseAmountWidget: ContribComponent<PurchaseAmountItem[]> = ({ data, sx }) => {
   const { t } = useI18n();
   const { filter } = useDashboardFilter();
+  const api = useApi();
+  const { user } = useUser();
+
+  const [shouldExchange, setShouldExchange] = useState(true);
+  const { exchangedData, totalAmount, onlyExchangedCurrency } = useExchangedData(
+    data,
+    shouldExchange,
+  );
 
   const purchaseAmounts = data.length;
   const filteredAmount = diffDatesByGranularityWithFilter(filter);
+  const isFourColumn = useMemo(() => {
+    // Ugly check to see if the "Total Subscription Count" widget is present
+    if (
+      "subscription.stats:total" in api.operations &&
+      "dashboard:stats:subscription:total" in api.contrib
+    ) {
+      const [{ component }] = Object.values(api.contrib["dashboard:stats:subscription:count"]);
+
+      if (component != null) {
+        return hasPermission(user, component.permission);
+      }
+    }
+
+    return false;
+  }, [api, user]);
 
   return (
     <WidgetCard
-      gridColumn={{ lg: "span 3", md: "span 6", sm: "span 1" }}
+      gridColumn={{ md: isFourColumn ? "span 3" : "span 4", sm: "span 1" }}
       gridRow="span 1"
       sx={sx}
       title={t("Purchase Revenue")}
     >
+      <ExchangeSwitch
+        checked={shouldExchange}
+        onChange={() => setShouldExchange((prev) => !prev)}
+      />
       {purchaseAmounts >= 2 ? (
-        <SitesAmountsList data={data} />
+        <>
+          <SitesAmountsList data={exchangedData} isExchanged={shouldExchange} />
+          {shouldExchange && onlyExchangedCurrency && (
+            <SitesTotal amount={totalAmount} currency="SEK" />
+          )}
+        </>
       ) : (
         <Stack height="100%" px={2}>
           <Stack borderBottom="1px solid" borderColor="divider" height="100%">
             {purchaseAmounts === 1 ? (
               <Typography component="p" fontSize={28} fontWeight={700} variant="h5">
-                {currencyFormat(Number.parseFloat(data[0].amount), data[0].currency)}
+                {currencyFormat(
+                  Number.parseFloat(exchangedData[0].amount),
+                  exchangedData[0].currency,
+                )}
               </Typography>
             ) : purchaseAmounts === 0 ? (
               <Stack height="100%">

package/src/extensions/pos/hooks/useExchangedData.ts

@@ -0,0 +1,46 @@
+import { PurchaseAmountItem } from "../../../types";
+
+export function useExchangedData(
+  data: PurchaseAmountItem[],
+  shouldExchange: boolean,
+  toCurrency: string = "SEK",
+  exchangeRates: Record<string, number> = sekExchangeRates,
+) {
+  const exchangedData = data.map((item) => {
+    if (shouldExchange && item.currency.toUpperCase() in exchangeRates) {
+      return {
+        ...item,
+        amount: (
+          parseFloat(item.amount) *
+          exchangeRates[item.currency.toUpperCase() as keyof typeof exchangeRates]
+        ).toFixed(2),
+        currency: shouldExchange ? toCurrency : item.currency,
+      };
+    }
+
+    return {
+      ...item,
+      amount: item.amount,
+      currency: item.currency,
+    };
+  });
+
+  const totalAmount = exchangedData.reduce((acc, item) => {
+    return acc + parseFloat(item.amount);
+  }, 0);
+
+  const onlyExchangedCurrency = exchangedData.every((item) => item.currency === toCurrency);
+
+  return {
+    exchangedData,
+    totalAmount,
+    onlyExchangedCurrency,
+  };
+}
+
+const sekExchangeRates = {
+  EUR: 11.5,
+  USD: 10.5,
+  SEK: 1,
+  GBP: 13.5,
+};

package/src/extensions/pos/utils/amountToCurrencyString.ts

@@ -1,10 +1,15 @@
-export const currencyFormat = (value: number, currency: string, locale: string = "sv-SE") => {
+export const currencyFormat = (
+  value: number,
+  currency: string,
+  locale: string = "sv-SE",
+  maximumFractionDigits: number = 2,
+) => {
   const formatter = new Intl.NumberFormat(locale, {
     style: "currency",
     currency: currency,
     currencyDisplay: "narrowSymbol",
     minimumFractionDigits: 0,
-    maximumFractionDigits: 2,
+    maximumFractionDigits,
   });
 
   return formatter.format(value);