1
// slightly weird props since this will be used in the nextjs app
2

3
import { Alert, Card, Checkbox, Tooltip } from "antd";
4
import { Icon } from "@cocalc/frontend/components/icon";
5

6
export default function UseBalanceTowardSubscriptions({
7
  style,
8
  use_balance_toward_subscriptions,
9
  set_use_balance_toward_subscriptions,
10
  minimal,
11
}) {
12
  const body = (
13
    <Alert
14
      style={{ marginBottom: "15px" }}
15
      type="info"
16
      showIcon
17
      message={
18
        <div>
19
          <Tooltip
20
            title={
21
              <div>
22
                Enable this if you do not need to maintain a positive balance
23
                for pay as you go purchases. If you are using compute servers
24
                you probably do not want to enable this. However, if you
25
                primarily put credit on your account to pay for subscriptions,
26
                consider enabling this. The entire amount for the subscription
27
                renewal must be available.
28
              </div>
29
            }
30
          >
31
            <Checkbox
32
              checked={use_balance_toward_subscriptions}
33
              onChange={(e) => {
34
                set_use_balance_toward_subscriptions(e.target.checked);
35
              }}
36
            >
37
              <span style={{ fontSize: "13pt" }}>
38
                Use Balance - pay subscription using balance on your account, if
39
                possible.{" "}
40
                {!use_balance_toward_subscriptions && (
41
                  <b>(Currently Disabled)</b>
42
                )}
43
              </span>
44
            </Checkbox>
45
          </Tooltip>
46
        </div>
47
      }
48
    />
49
  );
50
  if (minimal) {
51
    return body;
52
  }
53
  return (
54
    <Card
55
      style={style}
56
      title={
57
        <>
58
          <Icon name="calendar" /> Use Balance Toward Subscriptions
59
        </>
60
      }
61
    >
62
      {body}
63
    </Card>
64
  );
65
}
66

67