1
import api from "@cocalc/frontend/client/api";
2
import { useEffect, useState } from "react";
3
import { Spin, Tooltip } from "antd";
4
import { currency, round2 } from "@cocalc/util/misc";
5
import { TimeAgo } from "@cocalc/frontend/components";
6

7
export default function Money({ account_id }) {
8
  const [data, setData] = useState<{
9
    cocalc_purchase_timestamp: string;
10
    cocalc_balance: number;
11
    cocalc_last_month_spend: number;
12
    cocalc_last_year_spend: number;
13
  } | null>(null);
14

15
  useEffect(() => {
16
    (async () => {
17
      setData(await api("salesloft/money", { account_id }));
18
    })();
19
  }, []);
20

21
  if (data == null) {
22
    return <Spin />;
23
  }
24

25
  if (
26
    data.cocalc_last_year_spend == 0 &&
27
    data.cocalc_last_month_spend == 0 &&
28
    data.cocalc_balance == 0
29
  ) {
30
    return <div>Not A Recent Paying Customer</div>;
31
  }
32

33
  return (
34
    <div>
35
      <Tooltip title="These are potentially stale estimates!">
36
        <b>Quick estimates</b>
37
      </Tooltip>{" "}
38
      -- Balance: {currency(round2(data.cocalc_balance))}, Last Month Spend:{" "}
39
      {currency(round2(data.cocalc_last_month_spend))}, Last Year Spend:{" "}
40
      {currency(round2(data.cocalc_last_year_spend))}, Last Daily Statement:{" "}
41
      <TimeAgo date={new Date(data.cocalc_purchase_timestamp)} />{" "}
42
    </div>
43
  );
44
}
45

46