bananas-commerce-admin
Version:
What's this, an admin for apes?
46 lines • 3.42 kB
JavaScript
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, exchangeAvailable } = 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 (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, disabled: !exchangeAvailable, 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