@rsc-labs/medusa-store-analytics-v2
Version:
Get analytics data about your store
132 lines (131 loc) • 6.74 kB
JavaScript
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { useState } from "react";
import { Button, Badge, Text, Switch, Label, DropdownMenu, IconButton, Heading, Checkbox, Select, Tooltip, toast } from "@medusajs/ui";
import { Adjustments, ExclamationCircle } from "@medusajs/icons";
import { Grid } from "@mui/material";
import { OrderStatus, DateLasts } from "../utils/types.js";
const GenerateReportButton = ({ orderStatuses, dateRange, dateRangeCompareTo, compareEnabled }) => {
const [loadingButton, setLoadingStatus] = useState(false);
const generate = async () => {
toast.loading("Report", {
description: "Generating report...",
duration: Infinity
});
setLoadingStatus(true);
fetch(`/admin/reports-analytics/general`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
orderStatuses: Object.values(orderStatuses),
dateRangeFrom: dateRange ? dateRange.from.getTime() : void 0,
dateRangeTo: dateRange ? dateRange.to.getTime() : void 0,
dateRangeFromCompareTo: dateRangeCompareTo ? dateRangeCompareTo.from.getTime() : void 0,
dateRangeToCompareTo: dateRangeCompareTo ? dateRangeCompareTo.to.getTime() : void 0
})
}).then((res) => res.json()).then((responseJson) => {
if (responseJson.buffer) {
const anyBuffer = responseJson.buffer;
const blob = new Blob([new Uint8Array(anyBuffer.data)], { type: "application/pdf" });
toast.dismiss();
setLoadingStatus(false);
const pdfURL = URL.createObjectURL(blob);
window.open(pdfURL, "_blank");
} else {
toast.dismiss();
setLoadingStatus(false);
toast.error("Report", {
description: "Problem happened when generating report"
});
}
setLoadingStatus(false);
}).catch((error) => {
var _a, _b;
toast.dismiss();
setLoadingStatus(false);
const trueError = error;
toast.error("Report", {
description: (_b = (_a = trueError == null ? void 0 : trueError.response) == null ? void 0 : _a.data) == null ? void 0 : _b.message
});
});
};
return /* @__PURE__ */ jsxs(Fragment, { children: [
loadingButton && /* @__PURE__ */ jsx(Button, { variant: "secondary", disabled: true, style: { width: 180 }, children: "Generating" }),
!loadingButton && /* @__PURE__ */ jsxs(Button, { variant: "secondary", onClick: generate, style: { width: 180 }, children: [
"Generate report",
/* @__PURE__ */ jsx(Badge, { rounded: "full", size: "2xsmall", color: "green", children: "Beta" })
] })
] });
};
const ComparedDate = ({ compare, comparedToDateRange }) => {
if (comparedToDateRange && compare) {
return /* @__PURE__ */ jsx(Text, { children: `Compared to ${comparedToDateRange.from.toLocaleDateString()} - ${comparedToDateRange.to.toLocaleDateString()}` });
}
return /* @__PURE__ */ jsx(Text, { children: `No comparison` });
};
const SwitchComparison = ({ compareEnabled, onCheckChange, allTime }) => {
return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
/* @__PURE__ */ jsx(Switch, { id: "manage-inventory", onCheckedChange: onCheckChange, disabled: allTime, checked: compareEnabled && !allTime }),
/* @__PURE__ */ jsx(Label, { htmlFor: "manage-inventory", children: "Compare" })
] });
};
const DropdownOrderStatus = ({ onOrderStatusChange, appliedStatuses }) => {
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const [selectedStatuses, setSelectedStatuses] = useState([]);
const handleStatusToggle = (status) => {
setSelectedStatuses(
(prevSelectedStatuses) => prevSelectedStatuses.includes(status) ? prevSelectedStatuses.filter((selected) => selected !== status) : [...prevSelectedStatuses, status]
);
};
const handleApplyClick = () => {
setIsDropdownOpen(false);
onOrderStatusChange(selectedStatuses.map((selectedStatus) => OrderStatus[selectedStatus.toUpperCase()]));
};
return /* @__PURE__ */ jsxs(DropdownMenu, { open: isDropdownOpen, onOpenChange: (isOpen) => {
if (isOpen) {
setSelectedStatuses(Object.values(appliedStatuses));
}
setIsDropdownOpen(isOpen);
}, children: [
/* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { children: /* @__PURE__ */ jsx(Adjustments, {}) }) }),
/* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
/* @__PURE__ */ jsx(DropdownMenu.Label, { className: "gap-x-2", style: { paddingLeft: 8, paddingBottom: 8 }, children: /* @__PURE__ */ jsx(Heading, { level: "h3", children: "Choose orders" }) }),
Object.values(OrderStatus).map((orderStatus) => /* @__PURE__ */ jsxs(DropdownMenu.Item, { className: "gap-x-2", onSelect: (event) => event.preventDefault(), children: [
/* @__PURE__ */ jsx(
Checkbox,
{
id: `order-status-${orderStatus}`,
checked: selectedStatuses.includes(orderStatus),
onCheckedChange: () => handleStatusToggle(orderStatus)
}
),
/* @__PURE__ */ jsx(Label, { htmlFor: `order-status-${orderStatus}`, children: orderStatus })
] }, orderStatus.toString())),
/* @__PURE__ */ jsx(DropdownMenu.Label, { className: "gap-x-2", children: /* @__PURE__ */ jsx(Button, { onClick: handleApplyClick, children: "Apply" }) })
] })
] });
};
const SelectDateLasts = ({ dateLast, onSelectChange }) => {
const dateLastsToSelect = [
DateLasts.LastWeek,
DateLasts.LastMonth,
DateLasts.LastYear,
DateLasts.All
];
return /* @__PURE__ */ jsx("div", { className: "w-[170px]", children: /* @__PURE__ */ jsxs(Select, { size: "small", onValueChange: onSelectChange, value: dateLast, children: [
/* @__PURE__ */ jsx(Select.Trigger, { style: { height: "2rem" }, children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Select a date range" }) }),
/* @__PURE__ */ jsx(Select.Content, { children: dateLastsToSelect.map((dateToSelect) => /* @__PURE__ */ jsx(Select.Item, { value: dateToSelect, children: dateToSelect == DateLasts.All ? /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 1, children: [
/* @__PURE__ */ jsx(Grid, { item: true, children: dateToSelect }),
/* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Tooltip, { content: "If you have many orders, it might take a while to load statistics.", children: /* @__PURE__ */ jsx(ExclamationCircle, {}) }) })
] }) : dateToSelect }, dateToSelect)) })
] }) });
};
export {
ComparedDate,
DropdownOrderStatus,
GenerateReportButton,
SelectDateLasts,
SwitchComparison
};