@rsc-labs/medusa-store-analytics
Version:
Get analytics data about your store
123 lines (122 loc) • 8.56 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectDateLasts = exports.DropdownOrderStatus = exports.SwitchComparison = exports.ComparedDate = exports.GenerateReportButton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/*
* Copyright 2024 RSC-Labs, https://rsoftcon.com/
*
* MIT License
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const react_1 = require("react");
const ui_1 = require("@medusajs/ui");
const icons_1 = require("@medusajs/icons");
const material_1 = require("@mui/material");
const types_1 = require("../utils/types");
/*
* Copyright 2024 RSC-Labs, https://rsoftcon.com/
*
* MIT License
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const ui_2 = require("@medusajs/ui");
const medusa_react_1 = require("medusa-react");
const GenerateReportButton = ({ orderStatuses, dateRange, dateRangeCompareTo, compareEnabled }) => {
const [loadingButton, setLoadingStatus] = (0, react_1.useState)(false);
const { mutate } = (0, medusa_react_1.useAdminCustomPost)(`/reports-analytics/general`, [orderStatuses, dateRange, dateRangeCompareTo]);
const generate = async () => {
const id = ui_2.toast.loading("Report", {
description: "Generating report...",
duration: Infinity
});
setLoadingStatus(true);
mutate({
orderStatuses: Object.values(orderStatuses),
dateRangeFrom: dateRange ? dateRange.from.getTime() : undefined,
dateRangeTo: dateRange ? dateRange.to.getTime() : undefined,
dateRangeFromCompareTo: dateRangeCompareTo ? dateRangeCompareTo.from.getTime() : undefined,
dateRangeToCompareTo: dateRangeCompareTo ? dateRangeCompareTo.to.getTime() : undefined,
}, {
onSuccess: ({ response, buffer }) => {
if (response.status == 201 && buffer) {
const anyBuffer = buffer;
const blob = new Blob([new Uint8Array(anyBuffer.data)], { type: 'application/pdf' });
ui_2.toast.dismiss();
setLoadingStatus(false);
const pdfURL = URL.createObjectURL(blob);
window.open(pdfURL, '_blank');
}
else {
ui_2.toast.dismiss();
setLoadingStatus(false);
ui_2.toast.error("Report", {
description: 'Problem happened when generating report',
});
}
},
onError: (error) => {
var _a, _b;
ui_2.toast.dismiss();
setLoadingStatus(false);
const trueError = error;
ui_2.toast.error("Report", {
description: (_b = (_a = trueError === null || trueError === void 0 ? void 0 : trueError.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.message,
});
}
});
};
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [loadingButton && (0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "secondary", disabled: true, style: { width: 180 }, children: "Generating" }), !loadingButton && (0, jsx_runtime_1.jsxs)(ui_1.Button, { variant: "secondary", onClick: generate, style: { width: 180 }, children: ["Generate report", (0, jsx_runtime_1.jsx)(ui_1.Badge, { rounded: "full", size: "2xsmall", color: "green", children: "Beta" })] })] }));
};
exports.GenerateReportButton = GenerateReportButton;
const ComparedDate = ({ compare, comparedToDateRange }) => {
if (comparedToDateRange && compare) {
return ((0, jsx_runtime_1.jsx)(ui_1.Text, { children: `Compared to ${comparedToDateRange.from.toLocaleDateString()} - ${comparedToDateRange.to.toLocaleDateString()}` }));
}
return ((0, jsx_runtime_1.jsx)(ui_1.Text, { children: `No comparison` }));
};
exports.ComparedDate = ComparedDate;
const SwitchComparison = ({ compareEnabled, onCheckChange, allTime }) => {
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-x-2", children: [(0, jsx_runtime_1.jsx)(ui_1.Switch, { id: "manage-inventory", onCheckedChange: onCheckChange, disabled: allTime, checked: compareEnabled && !allTime }), (0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: "manage-inventory", children: "Compare" })] }));
};
exports.SwitchComparison = SwitchComparison;
const DropdownOrderStatus = ({ onOrderStatusChange, appliedStatuses }) => {
const [isDropdownOpen, setIsDropdownOpen] = (0, react_1.useState)(false);
const [selectedStatuses, setSelectedStatuses] = (0, react_1.useState)([]);
const handleStatusToggle = (status) => {
setSelectedStatuses((prevSelectedStatuses) => prevSelectedStatuses.includes(status)
? prevSelectedStatuses.filter((selected) => selected !== status)
: [...prevSelectedStatuses, status]);
};
const handleApplyClick = () => {
// Close the dropdown when Apply is clicked
setIsDropdownOpen(false);
onOrderStatusChange(selectedStatuses.map(selectedStatus => types_1.OrderStatus[selectedStatus.toUpperCase()]));
};
return ((0, jsx_runtime_1.jsxs)(ui_2.DropdownMenu, { open: isDropdownOpen, onOpenChange: (isOpen) => {
if (isOpen) {
setSelectedStatuses(Object.values(appliedStatuses));
}
setIsDropdownOpen(isOpen);
}, children: [(0, jsx_runtime_1.jsx)(ui_2.DropdownMenu.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(ui_1.IconButton, { children: (0, jsx_runtime_1.jsx)(icons_1.Adjustments, {}) }) }), (0, jsx_runtime_1.jsxs)(ui_2.DropdownMenu.Content, { children: [(0, jsx_runtime_1.jsx)(ui_2.DropdownMenu.Label, { className: "gap-x-2", style: { paddingLeft: 8, paddingBottom: 8 }, children: (0, jsx_runtime_1.jsx)(ui_1.Heading, { level: 'h3', children: "Choose orders" }) }), Object.values(types_1.OrderStatus).map(orderStatus => ((0, jsx_runtime_1.jsxs)(ui_2.DropdownMenu.Item, { className: "gap-x-2", onSelect: event => event.preventDefault(), children: [(0, jsx_runtime_1.jsx)(ui_1.Checkbox, { id: `order-status-${orderStatus}`, checked: selectedStatuses.includes(orderStatus), onCheckedChange: () => handleStatusToggle(orderStatus) }), (0, jsx_runtime_1.jsx)(ui_1.Label, { htmlFor: `order-status-${orderStatus}`, children: orderStatus })] }, orderStatus.toString()))), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenu.Label, { className: "gap-x-2", children: (0, jsx_runtime_1.jsx)(ui_1.Button, { onClick: handleApplyClick, children: "Apply" }) })] })] }));
};
exports.DropdownOrderStatus = DropdownOrderStatus;
const SelectDateLasts = ({ dateLast, onSelectChange }) => {
const dateLastsToSelect = [
types_1.DateLasts.LastWeek,
types_1.DateLasts.LastMonth,
types_1.DateLasts.LastYear,
types_1.DateLasts.All
];
return ((0, jsx_runtime_1.jsx)("div", { className: "w-[170px]", children: (0, jsx_runtime_1.jsxs)(ui_1.Select, { size: "small", onValueChange: onSelectChange, value: dateLast, children: [(0, jsx_runtime_1.jsx)(ui_1.Select.Trigger, { style: { height: '2rem' }, children: (0, jsx_runtime_1.jsx)(ui_1.Select.Value, { placeholder: "Select a date range" }) }), (0, jsx_runtime_1.jsx)(ui_1.Select.Content, { children: dateLastsToSelect.map((dateToSelect) => ((0, jsx_runtime_1.jsx)(ui_1.Select.Item, { value: dateToSelect, children: dateToSelect == types_1.DateLasts.All ? ((0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, children: dateToSelect }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, children: (0, jsx_runtime_1.jsx)(ui_1.Tooltip, { content: 'If you have many orders, it might take a while to load statistics.', children: (0, jsx_runtime_1.jsx)(icons_1.ExclamationCircle, {}) }) })] })) : dateToSelect }, dateToSelect))) })] }) }));
};
exports.SelectDateLasts = SelectDateLasts;