@rsc-labs/medusa-store-analytics/dist/admin/_virtual_entry.js

Get analytics data about your store

import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { useState, useEffect, useMemo } from 'react';
import { Button, Badge, Text, Switch, Label, DropdownMenu, IconButton, Heading, Checkbox, Select, Tooltip, toast, Container, Alert, FocusModal, Table, Tabs } from '@medusajs/ui';
import { Adjustments, ExclamationCircle, MinusMini, ArrowUpMini, ArrowDownMini, ShoppingCart, Cash, CurrencyDollar, ShoppingBag, Users, ArrowRightOnRectangle, InformationCircle, LightBulb } from '@medusajs/icons';
import { Grid, Box, CircularProgress, Divider, Link as Link$1 } from '@mui/material';
import { useAdminCustomPost, useAdminCustomQuery, useAdminRegions } from 'medusa-react';
import { AreaChart, CartesianGrid, XAxis, YAxis, Tooltip as Tooltip$1, Area, Legend, PieChart, Pie } from 'recharts';
import { Link } from 'react-router-dom';

var OrderStatus = /* @__PURE__ */ ((OrderStatus2) => {
  OrderStatus2["PENDING"] = "pending";
  OrderStatus2["COMPLETED"] = "completed";
  OrderStatus2["ARCHIVED"] = "archived";
  OrderStatus2["CANCELED"] = "canceled";
  OrderStatus2["REQUIRES_ACTION"] = "requires_action";
  return OrderStatus2;
})(OrderStatus || {});
var DateLasts = /* @__PURE__ */ ((DateLasts2) => {
  DateLasts2["All"] = "All time";
  DateLasts2["LastMonth"] = "Last 30 days";
  DateLasts2["LastWeek"] = "Last 7 days";
  DateLasts2["LastYear"] = "Last 365 days";
  return DateLasts2;
})(DateLasts || {});

const GenerateReportButton = ({ orderStatuses, dateRange, dateRangeCompareTo, compareEnabled }) => {
  const [loadingButton, setLoadingStatus] = useState(false);
  const { mutate } = useAdminCustomPost(
    `/reports-analytics/general`,
    [orderStatuses, dateRange, dateRangeCompareTo]
  );
  const generate = async () => {
    toast.loading("Report", {
      description: "Generating report...",
      duration: Infinity
    });
    setLoadingStatus(true);
    mutate(
      {
        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
      },
      {
        onSuccess: ({ response, buffer }) => {
          if (response.status == 201 && buffer) {
            const anyBuffer = 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"
            });
          }
        },
        onError: (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)) })
  ] }) });
};

var ChartResolutionType = /* @__PURE__ */ ((ChartResolutionType2) => {
  ChartResolutionType2[ChartResolutionType2["DayMonth"] = 0] = "DayMonth";
  ChartResolutionType2[ChartResolutionType2["Month"] = 1] = "Month";
  return ChartResolutionType2;
})(ChartResolutionType || {});
function calculateResolution(fromDate, toDate) {
  if (!fromDate)
    return void 0;
  const calculateToDate = toDate ? new Date(toDate) : new Date(Date.now());
  const diffTime = calculateToDate.getTime() - fromDate.getTime();
  const weekTime = 6048e5;
  const monthTime = weekTime * 4;
  const twoMonthsTime = monthTime * 2;
  if (diffTime <= twoMonthsTime) {
    return 0 /* DayMonth */;
  }
  const yearTime = monthTime * 12;
  if (diffTime < yearTime) {
    return 1 /* Month */;
  }
  return 1 /* Month */;
}
const compareDatesBasedOnResolutionType = (date1, date2, resolutionType) => {
  switch (resolutionType) {
    case 0 /* DayMonth */:
      return new Date(new Date(date1).setHours(0, 0, 0, 0)).getTime() == new Date(new Date(date2).setHours(0, 0, 0, 0)).getTime();
    case 1 /* Month */:
      return new Date(new Date(new Date(date1).setDate(0)).setHours(0, 0, 0, 0)).getTime() == new Date(new Date(new Date(date2).setDate(0)).setHours(0, 0, 0, 0)).getTime();
    default:
      return new Date(new Date(date1).setHours(0, 0, 0, 0)).getTime() == new Date(new Date(date2).setHours(0, 0, 0, 0)).getTime();
  }
};
const getChartDateName = (date, resolutionType, startDate, endDate) => {
  switch (resolutionType) {
    case 0 /* DayMonth */:
      if (compareDatesBasedOnResolutionType(date, startDate, resolutionType) || compareDatesBasedOnResolutionType(date, endDate, resolutionType)) {
        return `${date.getDate().toString()} ${getShortMonthName(date)}`;
      }
      return date.getDate().toString();
    case 1 /* Month */:
      if (compareDatesBasedOnResolutionType(date, startDate, resolutionType) || compareDatesBasedOnResolutionType(date, endDate, resolutionType)) {
        return `${getShortMonthName(date)} ${date.getFullYear().toString()}`;
      }
      return getShortMonthName(date);
    default:
      return date.getFullYear().toString();
  }
};
const getChartTooltipDate = (date, resolutionType) => {
  switch (resolutionType) {
    case 0 /* DayMonth */:
      return `${date.getDate().toString()}-${getShortMonthName(date)}`;
    case 1 /* Month */:
      return `${getShortMonthName(date)}-${date.getFullYear()}`;
    default:
      return date.getFullYear().toString();
  }
};
const getLegendName = (current) => {
  return current ? `Current` : `Preceding`;
};
const getShortMonthName = (date) => {
  let days = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  return days[date.getMonth()];
};

const incrementDate = (date, resolutionType) => {
  switch (resolutionType) {
    case ChartResolutionType.DayMonth:
      date.setDate(date.getDate() + 1);
      break;
    case ChartResolutionType.Month:
      date.setMonth(date.getMonth() + 1);
      break;
    default:
      date.setDate(date.getDate() + 1);
  }
};
const generateChartData = (data, fromDate, toDate, chartResolutionType, toCompareDate, connectEmptyPointsUsingPreviousValue) => {
  const currentData = data.current;
  const previousData = data.previous;
  const startFromDate = new Date(fromDate);
  const offsetTime = toDate.getTime() - (toCompareDate ? toCompareDate.getTime() : fromDate.getTime());
  const dataPoints = [];
  let currentDataValue;
  let previousDataValue;
  while (startFromDate.getTime() < toDate.getTime() || compareDatesBasedOnResolutionType(startFromDate, toDate, chartResolutionType)) {
    const currentOrder = currentData.find((order) => compareDatesBasedOnResolutionType(new Date(order.date), startFromDate, chartResolutionType));
    const offsetDate = new Date(startFromDate);
    offsetDate.setTime(offsetDate.getTime() - offsetTime);
    const previousOrder = previousData.find((previous) => compareDatesBasedOnResolutionType(new Date(previous.date), offsetDate, chartResolutionType));
    if (connectEmptyPointsUsingPreviousValue) {
      if (currentOrder) {
        currentDataValue = parseInt(currentOrder.value);
      }
      if (previousOrder) {
        previousDataValue = parseInt(previousOrder.value);
      }
      dataPoints.push({
        current: {
          date: new Date(startFromDate),
          value: currentOrder ? parseInt(currentOrder.value) : currentDataValue ? currentDataValue : void 0
        },
        previous: {
          date: new Date(offsetDate),
          value: previousOrder ? parseInt(previousOrder.value) : previousDataValue ? previousDataValue : void 0
        }
      });
    } else {
      dataPoints.push({
        current: {
          date: new Date(startFromDate),
          value: currentOrder ? parseInt(currentOrder.value) : 0
        },
        previous: {
          date: new Date(offsetDate),
          value: previousOrder ? parseInt(previousOrder.value) : 0
        }
      });
    }
    incrementDate(startFromDate, chartResolutionType);
  }
  if (connectEmptyPointsUsingPreviousValue) {
    for (let i = dataPoints.length - 1; i >= 0; i--) {
      if (dataPoints[i].current.value === void 0) {
        if (dataPoints[dataPoints.length - 1].previous.value) {
          dataPoints[i].current.value = dataPoints[dataPoints.length - 1].previous.value;
        } else {
          dataPoints[i].current.value = 0;
        }
      }
      if (dataPoints[i].previous.value) {
        previousDataValue = dataPoints[i].previous.value;
      } else {
        dataPoints[i].previous.value = previousDataValue;
      }
    }
  }
  return dataPoints;
};
const ChartCustomTooltip$1 = ({ active, payload, label, resolutionType }) => {
  if (active && payload && payload.length) {
    switch (resolutionType) {
      case ChartResolutionType.DayMonth:
        return /* @__PURE__ */ jsxs(Container, { children: [
          /* @__PURE__ */ jsxs(Heading, { level: "h3", style: { color: payload[0].color }, children: [
            `${getChartTooltipDate(payload[0].payload.current.date, resolutionType)}`,
            " : ",
            payload[0].payload.current.value
          ] }),
          payload[1] !== void 0 && /* @__PURE__ */ jsxs(Heading, { level: "h3", style: { color: payload[1].color }, children: [
            `${getChartTooltipDate(payload[1].payload.previous.date, resolutionType)}`,
            " : ",
            payload[1].payload.previous.value
          ] })
        ] });
      case ChartResolutionType.Month:
        return /* @__PURE__ */ jsxs(Container, { children: [
          /* @__PURE__ */ jsxs(Heading, { level: "h3", style: { color: payload[0].color }, children: [
            `${getChartTooltipDate(payload[0].payload.current.date, resolutionType)}`,
            " : ",
            payload[0].payload.current.value
          ] }),
          payload[1] !== void 0 && /* @__PURE__ */ jsxs(Heading, { level: "h3", style: { color: payload[1].color }, children: [
            `${getChartTooltipDate(payload[1].payload.previous.date, resolutionType)}`,
            " : ",
            payload[1].payload.previous.value
          ] })
        ] });
    }
  }
  return null;
};
const areRangesTheSame = (fromDate, toDate, fromCompareDate, toCompareDate) => {
  if (fromCompareDate) {
    const oneDay = 24 * 60 * 60 * 1e3;
    if (toCompareDate) {
      const diffBase2 = Math.ceil(Math.abs((toDate.getTime() - fromDate.getTime()) / oneDay));
      const diffCompare2 = Math.ceil(Math.abs((toCompareDate.getTime() - fromCompareDate.getTime()) / oneDay));
      return diffBase2 == diffCompare2;
    }
    const diffBase = Math.ceil(Math.abs((toDate.getTime() - fromDate.getTime()) / oneDay));
    const diffCompare = Math.ceil(Math.abs((Date.now() - fromCompareDate.getTime()) / oneDay));
    return diffBase == diffCompare;
  }
  return true;
};
const ChartCurrentPrevious = ({ rawChartData, fromDate, toDate, fromCompareDate, toCompareDate, compareEnabled, connectEmptyPointsUsingPreviousValue }) => {
  const [chartDataPoints, setChartData] = useState([]);
  const resolutionType = calculateResolution(fromDate, toDate);
  useEffect(() => {
    const chartDataPoints2 = generateChartData(
      rawChartData,
      fromDate,
      toDate,
      resolutionType,
      toCompareDate,
      connectEmptyPointsUsingPreviousValue
    );
    setChartData(chartDataPoints2);
  }, [rawChartData, fromDate, toDate]);
  if (!areRangesTheSame(fromDate, toDate, fromCompareDate, toCompareDate)) {
    const currentPeriodInDays = Math.ceil((toDate.getTime() - fromDate.getTime()) / (24 * 60 * 60 * 1e3));
    const precedingPeriodInDays = Math.ceil((toCompareDate.getTime() - fromCompareDate.getTime()) / (24 * 60 * 60 * 1e3));
    return /* @__PURE__ */ jsx(
      Box,
      {
        width: 500,
        height: 400,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        children: /* @__PURE__ */ jsxs(Grid, { container: true, direction: "column", justifyContent: "center", alignItems: "center", children: [
          /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Text, { children: "Chart can be shown only for the same length of ranges." }) }),
          /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Text, { children: `You are comparing ${currentPeriodInDays} days to ${precedingPeriodInDays} days` }) })
        ] })
      }
    );
  }
  return /* @__PURE__ */ jsxs(
    AreaChart,
    {
      width: 500,
      height: 400,
      data: chartDataPoints,
      margin: {
        top: 20,
        right: 0,
        left: 0,
        bottom: 0
      },
      children: [
        /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3" }),
        /* @__PURE__ */ jsxs("defs", { children: [
          /* @__PURE__ */ jsxs("linearGradient", { id: "colorPrevious", x1: "0", y1: "0", x2: "0", y2: "1", children: [
            /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: "#8884d8", stopOpacity: 0.8 }),
            /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: "#8884d8", stopOpacity: 0 })
          ] }),
          /* @__PURE__ */ jsxs("linearGradient", { id: "colorCurrent", x1: "0", y1: "0", x2: "0", y2: "1", children: [
            /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: "#82ca9d", stopOpacity: 0.8 }),
            /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: "#82ca9d", stopOpacity: 0 })
          ] })
        ] }),
        /* @__PURE__ */ jsx(XAxis, { dataKey: (value) => getChartDateName(value.current.date, resolutionType, fromDate, toDate), minTickGap: 15, interval: "preserveStartEnd" }),
        /* @__PURE__ */ jsx(YAxis, {}),
        /* @__PURE__ */ jsx(Tooltip$1, { content: /* @__PURE__ */ jsx(ChartCustomTooltip$1, { active: false, payload: [], label: "", resolutionType }) }),
        /* @__PURE__ */ jsx(Area, { name: compareEnabled && fromCompareDate ? getLegendName(true) : void 0, type: "monotone", dataKey: "current.value", stroke: "#82ca9d", fillOpacity: 1, fill: "url(#colorCurrent)" }),
        compareEnabled && fromCompareDate && /* @__PURE__ */ jsx(Area, { name: getLegendName(false), type: "monotone", dataKey: "previous.value", stroke: "#8884d8", fillOpacity: 1, fill: "url(#colorPrevious)" }),
        compareEnabled && fromCompareDate && /* @__PURE__ */ jsx(Legend, { verticalAlign: "bottom", height: 36, iconType: "circle" })
      ]
    }
  );
};

const OrdersByNewChart = ({ orderStatuses, dateRange, dateRangeCompareTo, compareEnabled }) => {
  var _a, _b;
  const { data, isLoading, isError, error } = useAdminCustomQuery(
    `/orders-analytics/history`,
    [orderStatuses, dateRange, dateRangeCompareTo],
    {
      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
    }
  );
  if (isLoading) {
    return /* @__PURE__ */ jsx(CircularProgress, { size: 12 });
  }
  if (isError) {
    const trueError = error;
    const errorText = `Error when loading data. It shouldn't have happened - please raise an issue. For developer: ${(_b = (_a = trueError == null ? void 0 : trueError.response) == null ? void 0 : _a.data) == null ? void 0 : _b.message}`;
    return /* @__PURE__ */ jsx(Alert, { variant: "error", children: errorText });
  }
  if (data.analytics == void 0) {
    return /* @__PURE__ */ jsx(Heading, { level: "h3", children: "Cannot get orders" });
  }
  if (data.analytics.dateRangeFrom && data.analytics.dateRangeTo) {
    const rawChartData = {
      current: data.analytics.current.map((currentData) => {
        return {
          date: new Date(currentData.date),
          value: currentData.orderCount
        };
      }),
      previous: data.analytics.previous.map((previousData) => {
        return {
          date: new Date(previousData.date),
          value: previousData.orderCount
        };
      })
    };
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(Heading, { level: "h3", children: "New orders by time" }),
      /* @__PURE__ */ jsx(
        ChartCurrentPrevious,
        {
          rawChartData,
          fromDate: new Date(data.analytics.dateRangeFrom),
          toDate: new Date(data.analytics.dateRangeTo),
          fromCompareDate: data.analytics.dateRangeFromCompareTo ? new Date(data.analytics.dateRangeFromCompareTo) : void 0,
          toCompareDate: data.analytics.dateRangeToCompareTo ? new Date(data.analytics.dateRangeToCompareTo) : void 0,
          compareEnabled
        }
      )
    ] });
  } else {
    return /* @__PURE__ */ jsx(Heading, { level: "h3", children: "No orders" });
  }
};

const IconComparison = ({ current, previous, switchArrow }) => {
  if (current == previous) {
    return /* @__PURE__ */ jsx(MinusMini, { color: "black" });
  }
  if (current > previous) {
    return /* @__PURE__ */ jsx(ArrowUpMini, { color: switchArrow ? "red" : "green" });
  }
  if (current < previous) {
    return /* @__PURE__ */ jsx(ArrowDownMini, { color: switchArrow ? "green" : "red" });
  }
};

function amountToDisplay(amount, decimalDigits) {
  return (amount / Math.pow(10, decimalDigits)).toFixed(decimalDigits);
}
function calculatePercentage(current, previous) {
  if (current == previous) {
    return 0;
  }
  if (current == 0) {
    return 100;
  }
  if (previous == 0) {
    return void 0;
  }
  const percentage = Number(((current - previous) / previous).toFixed(2)) * 100;
  if (percentage > 0) {
    return Math.round(percentage * 100) / 100;
  }
  return Math.round((percentage - percentage - percentage) * 100) / 100;
}
function convertDateLastsToDateRange(dateLasts) {
  let result;
  switch (dateLasts) {
    case DateLasts.LastMonth:
      result = {
        // 86400000 - alignment for taking last 29 days, as the current day is 30
        from: new Date(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 29)).setHours(0, 0, 0, 0)),
        to: new Date(Date.now())
      };
      break;
    case DateLasts.LastWeek:
      result = {
        // 86400000 - alignment for taking last 6 days, as the current day is 7th
        from: new Date(new Date(new Date(Date.now() - 6048e5 + 864e5)).setHours(0, 0, 0, 0)),
        to: new Date(Date.now())
      };
      break;
    case DateLasts.LastYear:
      new Date((/* @__PURE__ */ new Date()).setFullYear((/* @__PURE__ */ new Date()).getFullYear() - 1));
      result = {
        // + 1 - alignment for taking last 11 months, as the current month is 12th
        from: new Date(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 364)).setHours(0, 0, 0, 0)),
        to: new Date(Date.now())
      };
      break;
  }
  return result;
}
function convertDateLastsToComparedDateRange(dateLasts) {
  let result;
  switch (dateLasts) {
    case DateLasts.LastMonth:
      result = {
        from: new Date(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 59)).setHours(0, 0, 0, 0)),
        to: new Date(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 29)).setHours(0, 0, 0, 0))
      };
      break;
    case DateLasts.LastWeek:
      result = {
        from: new Date(new Date(Date.now() - 6048e5 * 2 + 864e5).setHours(0, 0, 0, 0)),
        to: new Date(new Date(Date.now() - 6048e5 + 864e5).setHours(0, 0, 0, 0))
      };
      break;
    case DateLasts.LastYear:
      result = {
        from: new Date(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 729)).setHours(0, 0, 0, 0)),
        to: new Date(new Date((/* @__PURE__ */ new Date()).setDate((/* @__PURE__ */ new Date()).getDate() - 364)).setHours(0, 0, 0, 0))
      };
      break;
  }
  return result;
}

const PercentageComparison = ({ current, label, previous, headingLevel = "h2" }) => {
  const percentage = calculatePercentage(parseInt(current), parseInt(previous));
  return /* @__PURE__ */ jsx(Tooltip, { content: `Previously: ${previous} ${label}`, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Heading, { level: headingLevel, style: { textDecorationStyle: "dotted", textDecorationLine: "underline", textUnderlineOffset: "3px" }, children: percentage !== void 0 ? `${percentage}%` : `N/A` }) }) });
};

const OrdersNumber = ({ orderStatuses, dateRange, dateRangeCompareTo, compareEnabled }) => {
  var _a, _b;
  const { data, isLoading, isError, error } = useAdminCustomQuery(
    `/orders-analytics/count`,
    [orderStatuses, dateRange, dateRangeCompareTo],
    {
      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
    }
  );
  if (isLoading) {
    return /* @__PURE__ */ jsx(CircularProgress, { size: 12 });
  }
  if (isError) {
    const trueError = error;
    const errorText = `Error when loading data. It shouldn't have happened - please raise an issue. For developer: ${(_b = (_a = trueError == null ? void 0 : trueError.response) == null ? void 0 : _a.data) == null ? void 0 : _b.message}`;
    return /* @__PURE__ */ jsx(Alert, { variant: "error", children: errorText });
  }
  if (data.analytics == void 0) {
    return /* @__PURE__ */ jsx(Heading, { level: "h3", children: "Cannot get orders" });
  }
  return /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", spacing: 2, children: [
    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Heading, { level: "h1", children: data.analytics.current }) }),
    compareEnabled && dateRangeCompareTo && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", children: [
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(IconComparison, { current: parseInt(data.analytics.current), previous: data.analytics.previous ? parseInt(data.analytics.previous) : void 0 }) }),
      data.analytics.previous !== void 0 && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(PercentageComparison, { current: data.analytics.current, label: "", previous: data.analytics.previous }) })
    ] }) })
  ] });
};

const OrdersOverviewCard = ({ orderStatuses, dateRange, dateRangeCompareTo, compareEnabled }) => {
  return /* @__PURE__ */ jsxs(Grid, { container: true, paddingBottom: 2, spacing: 3, children: [
    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(ShoppingCart, {}) }),
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Orders" }) })
    ] }) }),
    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsx(OrdersNumber, { orderStatuses, dateRange, dateRangeCompareTo, compareEnabled }) }),
    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsx(OrdersByNewChart, { orderStatuses, dateRange, dateRangeCompareTo, compareEnabled }) })
  ] });
};

function convertToChartData$1(ordersPaymentProviders) {
  if (ordersPaymentProviders.length) {
    return ordersPaymentProviders.map((ordersPaymentProvider) => {
      return {
        name: ordersPaymentProvider.paymentProviderId,
        value: parseFloat(ordersPaymentProvider.percentage),
        displayValue: ordersPaymentProvider.paymentProviderId,
        orderCount: ordersPaymentProvider.orderCount
      };
    });
  }
  return void 0;
}
const ChartCustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return /* @__PURE__ */ jsxs(Container, { children: [
      /* @__PURE__ */ jsx(Text, { children: `${payload[0].payload.value}%` }),
      /* @__PURE__ */ jsx(Text, { children: `Provider: ${payload[0].payload.name}` }),
      /* @__PURE__ */ jsx(Text, { children: `Order count: ${payload[0].payload.orderCount}` })
    ] });
  }
  return null;
};
const OrdersPaymentProviderPieChart = ({ ordersPaymentProviderResponse, compareEnabled }) => {
  const currentData = convertToChartData$1(ordersPaymentProviderResponse.analytics.current);
  const previousData = convertToChartData$1(ordersPaymentProviderResponse.analytics.previous);
  const renderLabel = function(entry) {
    return entry.displayValue;
  };
  return /* @__PURE__ */ jsxs(PieChart, { width: 500, height: 300, children: [
    /* @__PURE__ */ jsx(Pie, { data: currentData, dataKey: "value", cx: "50%", cy: "50%", innerRadius: 40, outerRadius: 90, fill: "#82ca9d", label: renderLabel }),
    compareEnabled && ordersPaymentProviderResponse.analytics.dateRangeFromCompareTo && /* @__PURE__ */ jsx(Pie, { data: previousData, dataKey: "value", cx: "50%", cy: "50%", outerRadius: 30, fill: "#8884d8" }),
    compareEnabled && ordersPaymentProviderResponse.analytics.dateRangeFromCompareTo && /* @__PURE__ */ jsx(Legend, { payload: [
      {
        value: getLegendName(true),
        color: "#82ca9d"
      },
      {
        value: getLegendName(false),
        color: "#8884d8"
      }
    ], iconType: "circle" }),
    /* @__PURE__ */ jsx(Tooltip$1, { content: /* @__PURE__ */ jsx(ChartCustomTooltip, { active: false, payload: [], label: "" }) })
  ] });
};

const OrdersPaymentProviderDetails = ({ dateRange, dateRangeCompareTo, compareEnabled }) => {
  var _a, _b;
  const { data, isLoading, isError, error } = useAdminCustomQuery(
    `/orders-analytics/payment-provider`,
    [dateRange, dateRangeCompareTo],
    {
      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
    }
  );
  if (isLoading) {
    return /* @__PURE__ */ jsx(CircularProgress, { size: 12 });
  }
  if (isError) {
    const trueError = error;
    const errorText = `Error when loading data. It shouldn't have happened - please raise an issue. For developer: ${(_b = (_a = trueError == null ? void 0 : trueError.response) == null ? void 0 : _a.data) == null ? void 0 : _b.message}`;
    return /* @__PURE__ */ jsx(Alert, { variant: "error", children: errorText });
  }
  if (data.analytics == void 0) {
    return /* @__PURE__ */ jsx(Heading, { level: "h3", children: "Cannot get orders" });
  }
  if (data.analytics.dateRangeFrom) {
    return /* @__PURE__ */ jsx(OrdersPaymentProviderPieChart, { ordersPaymentProviderResponse: data, compareEnabled });
  } else {
    return /* @__PURE__ */ jsx(Heading, { level: "h3", children: "No orders" });
  }
};
const OrdersPaymentProviderCard = ({ dateRange, dateRangeCompareTo, compareEnabled }) => {
  return /* @__PURE__ */ jsxs(Grid, { container: true, paddingBottom: 2, spacing: 3, children: [
    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Cash, {}) }),
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Payment provider popularity" }) })
    ] }) }),
    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsx(Grid, { container: true, direction: "column", alignItems: "center", paddingTop: 3, children: /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(OrdersPaymentProviderDetails, { dateRange, dateRangeCompareTo, compareEnabled }) }) }) })
  ] });
};

const SalesNumber = ({ salesHistoryResponse, compareEnabled }) => {
  const overallCurrentSum = salesHistoryResponse.analytics.current.reduce((sum, order) => sum + parseInt(order.total), 0);
  const overallPreviousSum = salesHistoryResponse.analytics.previous.length > 0 ? salesHistoryResponse.analytics.previous.reduce((sum, order) => sum + parseInt(order.total), 0) : void 0;
  return /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", spacing: 2, children: [
    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(Heading, { level: "h1", children: [
      amountToDisplay(overallCurrentSum, salesHistoryResponse.analytics.currencyDecimalDigits),
      " ",
      salesHistoryResponse.analytics.currencyCode.toUpperCase()
    ] }) }),
    compareEnabled && salesHistoryResponse.analytics.dateRangeFromCompareTo && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", children: [
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(IconComparison, { current: overallCurrentSum, previous: overallPreviousSum ? overallPreviousSum : void 0 }) }),
      overallPreviousSum !== void 0 && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(PercentageComparison, { current: amountToDisplay(overallCurrentSum, salesHistoryResponse.analytics.currencyDecimalDigits), label: salesHistoryResponse.analytics.currencyCode.toUpperCase(), previous: amountToDisplay(overallPreviousSum, salesHistoryResponse.analytics.currencyDecimalDigits) }) })
    ] }) })
  ] });
};

const SalesByNewChart = ({ salesHistoryResponse, compareEnabled }) => {
  const rawChartData = {
    current: salesHistoryResponse.analytics.current.map((currentData) => {
      return {
        date: new Date(currentData.date),
        value: amountToDisplay(parseInt(currentData.total), salesHistoryResponse.analytics.currencyDecimalDigits)
      };
    }),
    previous: salesHistoryResponse.analytics.previous.map((previousData) => {
      return {
        date: new Date(previousData.date),
        value: amountToDisplay(parseInt(previousData.total), salesHistoryResponse.analytics.currencyDecimalDigits)
      };
    })
  };
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(Heading, { level: "h3", children: "Sales by time" }),
    /* @__PURE__ */ jsx(
      ChartCurrentPrevious,
      {
        rawChartData,
        fromDate: new Date(salesHistoryResponse.analytics.dateRangeFrom),
        toDate: new Date(salesHistoryResponse.analytics.dateRangeTo),
        fromCompareDate: salesHistoryResponse.analytics.dateRangeFromCompareTo ? new Date(salesHistoryResponse.analytics.dateRangeFromCompareTo) : void 0,
        toCompareDate: salesHistoryResponse.analytics.dateRangeToCompareTo ? new Date(salesHistoryResponse.analytics.dateRangeToCompareTo) : void 0,
        compareEnabled
      }
    )
  ] });
};

const SalesDetails = ({ orderStatuses, currencyCode, dateRange, dateRangeCompareTo, compareEnabled }) => {
  var _a, _b;
  const { data, isLoading, isError, error } = useAdminCustomQuery(
    `/sales-analytics/history`,
    [orderStatuses, currencyCode, dateRange, dateRangeCompareTo],
    {
      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,
      currencyCode
    }
  );
  if (isLoading) {
    return /* @__PURE__ */ jsx(CircularProgress, { size: 12 });
  }
  if (isError) {
    const trueError = error;
    const errorText = `Error when loading data. It shouldn't have happened - please raise an issue. For developer: ${(_b = (_a = trueError == null ? void 0 : trueError.response) == null ? void 0 : _a.data) == null ? void 0 : _b.message}`;
    return /* @__PURE__ */ jsx(Alert, { variant: "error", children: errorText });
  }
  if (data.analytics == void 0) {
    return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsx(Heading, { level: "h3", children: "Cannot get orders" }) });
  }
  if (data.analytics.dateRangeFrom) {
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsx(SalesNumber, { salesHistoryResponse: data, compareEnabled }) }),
      /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsx(SalesByNewChart, { salesHistoryResponse: data, compareEnabled }) })
    ] });
  } else {
    return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsx(Heading, { level: "h3", children: "No orders" }) });
  }
};
const SalesOverviewCard = ({ orderStatuses, dateRange, dateRangeCompareTo, compareEnabled }) => {
  const { regions, isLoading } = useAdminRegions();
  const [value, setValue] = useState();
  return /* @__PURE__ */ jsxs(Grid, { container: true, paddingBottom: 2, spacing: 3, children: [
    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, alignItems: "center", children: [
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(CurrencyDollar, {}) }),
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Total sales" }) }),
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx("div", { className: "w-[256px]", children: /* @__PURE__ */ jsxs(Select, { size: "small", onValueChange: setValue, value, children: [
        /* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Select a currency" }) }),
        /* @__PURE__ */ jsxs(Select.Content, { children: [
          isLoading && /* @__PURE__ */ jsx(CircularProgress, {}),
          regions && !regions.length && /* @__PURE__ */ jsx(Text, { children: "No regions" }),
          regions && regions.length > 0 && [...new Set(regions.map((region) => region.currency_code))].map((currencyCode) => /* @__PURE__ */ jsx(Select.Item, { value: currencyCode, children: currencyCode.toUpperCase() }, currencyCode))
        ] })
      ] }) }) })
    ] }) }),
    value ? /* @__PURE__ */ jsx(SalesDetails, { orderStatuses, currencyCode: value, dateRange, dateRangeCompareTo, compareEnabled }) : /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Please select a currency" }) })
  ] });
};

const ValueColumn = ({ current, previous, enableComparing }) => {
  return /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", children: [
    enableComparing ? /* @__PURE__ */ jsx(Tooltip, { content: `Previously: ${previous}`, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Text, { style: { textDecorationStyle: "dotted", textDecorationLine: "underline", textUnderlineOffset: "3px" }, children: current !== void 0 ? `${current}` : `N/A` }) }) }) : /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Text, { children: current }) }),
    enableComparing && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Grid, { container: true, alignItems: "center", children: parseInt(current) != parseInt(previous) && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(IconComparison, { current: parseInt(current), previous: previous ? parseInt(previous) : void 0 }) }) }) })
  ] });
};
const PopularityTable = ({ valueColumnName, tableRows, enableComparing }) => {
  return /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsx(Divider, {}) }),
    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Grid, { container: true, justifyContent: "space-between", children: [
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Heading, { level: "h3", children: "Name" }) }),
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Heading, { level: "h3", children: valueColumnName }) })
    ] }) }),
    tableRows.length > 0 ? tableRows.map((tableRow) => /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Grid, { container: true, justifyContent: "space-between", children: [
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Text, { children: tableRow.name }) }),
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(ValueColumn, { current: tableRow.current, previous: tableRow.previous, enableComparing }) })
    ] }) }, tableRow.name)) : /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxs(Grid, { container: true, justifyContent: "space-between", children: [
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Text, { children: "None" }) }),
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Text, { children: "None" }) })
    ] }) })
  ] });
};

function transformToPopularityTable$1(result) {
  const currentMap = /* @__PURE__ */ new Map();
  const previousMap = /* @__PURE__ */ new Map();
  result.current.forEach((currentItem) => {
    const currentCount = currentMap.get(currentItem.salesChannelName) || 0;
    currentMap.set(currentItem.salesChannelName, currentCount + parseInt(currentItem.orderCount));
  });
  result.previous.forEach((previousItem) => {
    const previousCount = previousMap.get(previousItem.salesChannelName) || 0;
    previousMap.set(previousItem.salesChannelName, previousCount + parseInt(previousItem.orderCount));
  });
  return Array.from(currentMap.keys()).map((name) => ({
    name,
    current: String(currentMap.get(name) || 0),
    previous: String(previousMap.get(name) || 0)
  }));
}
const SalesChannelsPopularityDetails = ({ orderStatuses, dateRange, dateRangeCompareTo, compareEnabled }) => {
  var _a, _b;
  const { data, isLoading, isError, error } = useAdminCustomQuery(
    `/sales-analytics/sales-channels-popularity`,
    [orderStatuses, dateRange, dateRangeCompareTo],
    {
      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
    }
  );
  if (isLoading) {
    return /* @__PURE__ */ jsx(CircularProgress, { size: 12 });
  }
  if (isError) {
    const trueError = error;
    const errorText = `Error when loading data. It shouldn't have happened - please raise an issue. For developer: ${(_b = (_a = trueError == null ? void 0 : trueError.response) == null ? void 0 : _a.data) == null ? void 0 : _b.message}`;
    return /* @__PURE__ */ jsx(Alert, { variant: "error", children: errorText });
  }
  if (data.analytics == void 0) {
    return /* @__PURE__ */ jsx(Heading, { level: "h3", children: "Cannot get orders" });
  }
  if (data.analytics.dateRangeFrom) {
    return /* @__PURE__ */ jsx(PopularityTable, { valueColumnName: "Orders", tableRows: transformToPopularityTable$1(data.analytics), enableComparing: compareEnabled && dateRangeCompareTo !== void 0 });
  } else {
    return /* @__PURE__ */ jsx(Heading, { level: "h3", children: "No orders" });
  }
};
const SalesChannelPopularityCard = ({ orderStatuses, dateRange, dateRangeCompareTo, compareEnabled }) => {
  return /* @__PURE__ */ jsxs(Grid, { container: true, paddingBottom: 2, spacing: 3, children: [
    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(ShoppingBag, {}) }),
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Sales channel popularity" }) })
    ] }) }),
    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsx(SalesChannelsPopularityDetails, { orderStatuses, dateRange, dateRangeCompareTo, compareEnabled }) })
  ] });
};

const RefundsNumber = ({ refundsResponse, compareEnabled }) => {
  const overallCurrentSum = parseInt(refundsResponse.analytics.current);
  const overallPreviousSum = refundsResponse.analytics.previous !== void 0 ? parseInt(refundsResponse.analytics.previous) : void 0;
  return /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", spacing: 2, children: [
    /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(Heading, { level: "h1", children: [
      amountToDisplay(overallCurrentSum, refundsResponse.analytics.currencyDecimalDigits),
      " ",
      refundsResponse.analytics.currencyCode.toUpperCase()
    ] }) }),
    compareEnabled && refundsResponse.analytics.dateRangeFromCompareTo && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", children: [
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(IconComparison, { current: overallCurrentSum, previous: overallPreviousSum ? overallPreviousSum : void 0, switchArrow: true }) }),
      overallPreviousSum !== void 0 && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(PercentageComparison, { current: amountToDisplay(overallCurrentSum, refundsResponse.analytics.currencyDecimalDigits), label: refundsResponse.analytics.currencyCode.toUpperCase(), previous: amountToDisplay(overallPreviousSum, refundsResponse.analytics.currencyDecimalDigits) }) })
    ] }) })
  ] });
};

const RefundsDetails = ({ currencyCode, dateRange, dateRangeCompareTo, compareEnabled }) => {
  var _a, _b;
  const { data, isLoading, isError, error } = useAdminCustomQuery(
    `/sales-analytics/refunds`,
    [currencyCode, dateRange, dateRangeCompareTo],
    {
      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,
      currencyCode
    }
  );
  if (isLoading) {
    return /* @__PURE__ */ jsx(CircularProgress, { size: 12 });
  }
  if (isError) {
    const trueError = error;
    const errorText = `Error when loading data. It shouldn't have happened - please raise an issue. For developer: ${(_b = (_a = trueError == null ? void 0 : trueError.response) == null ? void 0 : _a.data) == null ? void 0 : _b.message}`;
    return /* @__PURE__ */ jsx(Alert, { variant: "error", children: errorText });
  }
  if (data.analytics == void 0) {
    return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsx(Heading, { level: "h3", children: "Cannot get refunds" }) });
  }
  if (data.analytics.dateRangeFrom) {
    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsx(RefundsNumber, { refundsResponse: data, compareEnabled }) }) });
  } else {
    return /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsx(Heading, { level: "h3", children: "No orders" }) });
  }
};
const RefundsOverviewCard = ({ dateRange, dateRangeCompareTo, compareEnabled }) => {
  const { regions, isLoading } = useAdminRegions();
  const [value, setValue] = useState();
  return /* @__PURE__ */ jsxs(Grid, { container: true, paddingBottom: 2, spacing: 3, children: [
    /* @__PURE__ */ jsx(Grid, { item: true, xs: 12, md: 12, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, alignItems: "center", children: [
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(CurrencyDollar, {}) }),
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Total refunds" }) }),
      /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx("div", { className: "w-[256px]", children: /* @__PURE__ */ jsxs(Select, { size: "small", onValueChange: setValue, value, children: [
        /* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Select a currency" }) }),
        /* @__PURE__ */ jsxs(Select.Content, { children: [
          isLoading && /* @__PURE__ */ jsx(CircularProgress, {}),
          regions && !regions.length && /* @__PURE__ */ jsx(Text, { children: "No regions" }),
          regions && regions.length > 0 && [...new Set(regions.map((region) => region.currency_code))].map((currencyCode) => /* @__PURE__ */ jsx(Select.Item, { value: currencyCode, children: currencyCode.toUpperCase() }, currencyCode))
        ] })
      ] }) }) })
    ] }) }),
    value ? /* @__PURE__ */ jsx(RefundsDetails, { currencyCode: value, dateRange, dateRangeCompareTo, comp