@rsc-labs/medusa-store-analytics-v2/.medusa/server/ui-components/sales/sales-overview-card.js

Get analytics data about your store

import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { Heading, Select, Text, Alert } from "@medusajs/ui";
import { CurrencyDollar } from "@medusajs/icons";
import { Grid, CircularProgress } from "@mui/material";
import { SalesNumber } from "./sales-number-overview.js";
import { useState, useEffect } from "react";
import { SalesByNewChart } from "./sales-total-chart.js";
import { deduceDateUrlParams } from "../utils/helpers.js";
const SalesDetails = ({ orderStatuses, currencyCode, dateRange, dateRangeCompareTo, compareEnabled }) => {
  var _a, _b;
  const [data, setData] = useState(void 0);
  const [error, setError] = useState(void 0);
  const [isLoading, setLoading] = useState(true);
  useEffect(() => {
    setLoading(true);
  }, [dateRange, dateRangeCompareTo, orderStatuses, currencyCode]);
  useEffect(() => {
    if (!isLoading) {
      return;
    }
    const searchParams = deduceDateUrlParams(dateRange, dateRangeCompareTo, orderStatuses);
    searchParams.append("currencyCode", currencyCode);
    fetch(`/admin/sales-analytics/history?${searchParams.toString()}`, {
      credentials: "include"
    }).then((res) => res.json()).then((result) => {
      setData(result);
      setLoading(false);
    }).catch((error2) => {
      setError(error2);
      console.error(error2);
    });
  }, [isLoading]);
  if (isLoading) {
    return /* @__PURE__ */ jsx(CircularProgress, { size: 12 });
  }
  if (error) {
    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 && 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 && data.analytics.dateRangeFrom && data.analytics.dateRangeTo) {
    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, { dateRangeFrom: new Date(data.analytics.dateRangeFrom), dateRangeTo: new Date(data.analytics.dateRangeTo), 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 [value, setValue] = useState();
  const [regions, setRegions] = useState(void 0);
  const [error, setError] = useState(void 0);
  const [isLoading, setLoading] = useState(true);
  useEffect(() => {
    if (!isLoading) {
      return;
    }
    fetch(`/admin/regions/`, {
      credentials: "include"
    }).then((res) => res.json()).then((result) => {
      setRegions(result.regions);
      setLoading(false);
    }).catch((error2) => {
      setError(error2);
      console.error(error2);
    });
  }, [isLoading]);
  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" }) })
  ] });
};
export {
  SalesOverviewCard
};