convert ancient unused billing react code to antd enough to pass typescript

- it doesn't matter if this looks right since we don't use it.
  something similar may come back soon though, so I'm not deleting it
  yet.

Author: williamstein

src/packages/frontend/antd-bootstrap.tsx

@@ -141,7 +141,7 @@ export const Button = (props: {
   style?: React.CSSProperties;
   disabled?: boolean;
   onClick?: (e?: any) => void;
-  key?: string;
+  key?;
   children?: any;
   className?: string;
   href?: string;
@@ -332,7 +332,7 @@ export type AntdTabItem = NonNullable<AntdTabsProps["items"]>[number];
 
 interface TabsProps {
   id?: string;
-  key?: string;
+  key?;
   activeKey: string;
   onSelect?: (activeKey: string) => void;
   animation?: boolean;
@@ -360,7 +360,7 @@ export function Tabs(props: Readonly<TabsProps>) {
 
 export function Tab(props: {
   id?: string;
-  key?: string;
+  key?;
   eventKey: string;
   title: any;
   children?: any;
@@ -438,10 +438,11 @@ export function Alert(props: AlertProps) {
 }
 
 export function Panel(props: {
-  key?: string;
+  key?;
   style?: React.CSSProperties;
-  header?: any;
+  header?;
   children?: any;
+  onClick?;
 }) {
   const style = { ...{ marginBottom: "20px" }, ...props.style };
   return (
@@ -451,6 +452,7 @@ export function Panel(props: {
       styles={{
         header: { color: COLORS.GRAY_DD, backgroundColor: COLORS.GRAY_LLL },
       }}
+      onClick={props.onClick}
     >
       {props.children}
     </AntdCard>

src/packages/frontend/billing/confirm-payment-method.tsx

@@ -3,7 +3,7 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Alert, Well } from "react-bootstrap";
+import { Alert, Well } from "@cocalc/frontend/antd-bootstrap";
 import { Component, Rendered } from "../app-framework";
 import { Gap } from "../components/gap";
 import { Icon } from "../components/icon";

src/packages/frontend/billing/license-examples.tsx

@@ -10,10 +10,9 @@ import {
 } from "@cocalc/util/licenses/purchase/consts";
 import { Cost, User } from "@cocalc/util/licenses/purchase/types";
 import { COLORS } from "@cocalc/util/theme";
-import { Col, Row, Table } from "react-bootstrap";
+import { Col, Row, Panel } from "@cocalc/frontend/antd-bootstrap";
 import { React } from "../app-framework";
 import { Icon, IconName, Gap } from "../components";
-const { Panel } = require("react-bootstrap");
 
 // This component renders 3 price examples for licensed upgrades in a row
 
@@ -60,7 +59,7 @@ export const LicenseExamples: React.FC<Props> = ({
     large,
     emph: boolean,
     online: boolean,
-    descr?: string
+    descr?: string,
   ) {
     const smallpx = `${small}px`;
     const largepx = `${large}px`;
@@ -93,7 +92,7 @@ export const LicenseExamples: React.FC<Props> = ({
           30,
           true,
           true,
-          "purchased online"
+          "purchased online",
         )}
       </>
     );
@@ -119,7 +118,7 @@ export const LicenseExamples: React.FC<Props> = ({
     const large = 26;
     return (
       <>
-        <Table className={"cc-price-table"}>
+        <table>
           <tbody>
             <tr>
               <td></td>
@@ -134,17 +133,11 @@ export const LicenseExamples: React.FC<Props> = ({
                   14,
                   large,
                   false,
-                  false
+                  false,
                 )}
               </td>
               <td>
-                {render_price_number(
-                  price_monthly.cost,
-                  14,
-                  large,
-                  true,
-                  true
-                )}
+                {render_price_number(price_monthly.cost, 14, large, true, true)}
               </td>
             </tr>
             <tr>
@@ -155,21 +148,15 @@ export const LicenseExamples: React.FC<Props> = ({
                   14,
                   large,
                   false,
-                  false
+                  false,
                 )}
               </td>
               <td>
-                {render_price_number(
-                  price_yearly.cost,
-                  14,
-                  large,
-                  true,
-                  true
-                )}
+                {render_price_number(price_yearly.cost, 14, large, true, true)}
               </td>
             </tr>
           </tbody>
-        </Table>
+        </table>
       </>
     );
   }
@@ -184,7 +171,7 @@ export const LicenseExamples: React.FC<Props> = ({
     );
     return (
       <Col sm={4} key={title}>
-        <Panel header={header} bsStyle={"info"}>
+        <Panel header={header}>
           <Gap />
           {lines.map((line) => render_example_line(line))}
           <Gap />

src/packages/frontend/billing/payment-method.tsx

@@ -4,8 +4,14 @@
  */
 
 import { Rendered, useState } from "../app-framework";
-import { Alert, Button, ButtonToolbar, Row, Col } from "react-bootstrap";
-import { Icon, IconName} from "../components/icon";
+import {
+  Alert,
+  Button,
+  ButtonToolbar,
+  Row,
+  Col,
+} from "@cocalc/frontend/antd-bootstrap";
+import { Icon, IconName } from "../components/icon";
 import { Gap } from "../components/gap";
 import { brand_to_icon_name } from "./data";
 
@@ -24,7 +30,7 @@ export const PaymentMethod: React.FC<Props> = (props) => {
 
   function icon_name(): IconName {
     return brand_to_icon_name(
-      props.source.brand != null ? props.source.brand.toLowerCase() : undefined
+      props.source.brand != null ? props.source.brand.toLowerCase() : undefined,
     );
   }
 

src/packages/frontend/billing/payment-methods.tsx

@@ -4,12 +4,9 @@
  */
 
 import { Rendered, useActions, useState } from "../app-framework";
-import { Button, Row, Col } from "../antd-bootstrap";
-const { Panel } = require("react-bootstrap"); // since the typescript declarations are our of sync with our crappy old version.
+import { Button, Row, Col, Panel } from "../antd-bootstrap";
 import { Icon } from "../components/icon";
-
 import { Source } from "./types";
-
 import { AddPaymentMethod } from "./add-payment-method";
 import { PaymentMethod } from "./payment-method";
 import { ErrorDisplay } from "../components/error-display";

src/packages/frontend/billing/plan-info.tsx

@@ -5,15 +5,12 @@
 
 import { PROJECT_UPGRADES } from "@cocalc/util/schema";
 import { plural, capitalize } from "@cocalc/util/misc";
-
 import { Component, Rendered } from "../app-framework";
 import { Tip } from "../components/tip";
 import { Icon } from "../components/icon";
 import { Gap } from "../components/gap";
 import { r_join } from "../components/r_join";
-import { Button } from "react-bootstrap";
-const { Panel } = require("react-bootstrap"); // since the typescript declarations are our of sync with our crappy old version.
-
+import { Button, Panel } from "@cocalc/frontend/antd-bootstrap";
 import { PeriodName } from "./types";
 
 interface Props {
@@ -63,7 +60,7 @@ export class PlanInfo extends Component<Props> {
         result.push(
           <Button key={i} bsStyle={this.props.selected ? "primary" : undefined}>
             {this.render_cost(prices[i], this.props.periods[i])}
-          </Button>
+          </Button>,
         );
       }
       return result;
@@ -122,7 +119,6 @@ export class PlanInfo extends Component<Props> {
       <Panel
         style={style}
         header={this.render_plan_name(plan_data)}
-        bsStyle={this.props.selected ? "primary" : "info"}
         onClick={() =>
           this.props.on_click != null ? this.props.on_click() : undefined
         }
@@ -134,8 +130,8 @@ export class PlanInfo extends Component<Props> {
             this.render_plan_info_line(
               name,
               benefits[name] != null ? benefits[name] : 0,
-              params[name]
-            )
+              params[name],
+            ),
           )}
         <Gap />
 

src/packages/frontend/billing/project-quota-bounds-table.tsx

@@ -6,8 +6,7 @@
 import { Component, Rendered } from "../app-framework";
 const { HelpEmailLink } = require("../customize");
 import { PROJECT_UPGRADES } from "@cocalc/util/schema";
-const { Panel } = require("react-bootstrap"); // since the typescript declarations are our of sync with our crappy old version.
-
+import { Panel } from "@cocalc/frontend/antd-bootstrap";
 import { render_project_quota } from "./util";
 
 export class ProjectQuotaBoundsTable extends Component {

src/packages/frontend/billing/project-quota-free-table.tsx

@@ -13,8 +13,7 @@ import { DEFAULT_QUOTAS, PROJECT_UPGRADES } from "@cocalc/util/schema";
 import { Tip } from "../components/tip";
 import { Icon } from "../components/icon";
 import { Gap } from "../components/gap";
-const { Panel } = require("react-bootstrap"); // since the typescript declarations are our of sync with our crappy old version.
-
+import { Panel } from "@cocalc/frontend/antd-bootstrap";
 import { render_project_quota } from "./util";
 
 export class ProjectQuotaFreeTable extends Component {
@@ -29,7 +28,7 @@ export class ProjectQuotaFreeTable extends Component {
 
   public render(): Rendered {
     return (
-      <Panel header={this.render_header()} bsStyle="info">
+      <Panel header={this.render_header()}>
         <Gap />
         <div style={{ marginBottom: "5px", marginLeft: "10px" }}>
           <Tip

src/packages/frontend/billing/subscription-grid.tsx

@@ -3,7 +3,7 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Row, Col } from "react-bootstrap";
+import { Row, Col } from "@cocalc/frontend/antd-bootstrap";
 import { Component, Rendered, redux } from "../app-framework";
 import { keys, intersection } from "lodash";
 import { PeriodName } from "./types";

src/packages/frontend/library/component.tsx

@@ -4,13 +4,9 @@
  */
 
 import { join } from "path";
-
 import { path_split, search_match, search_split } from "@cocalc/util/misc";
 import { COLORS } from "@cocalc/util/theme";
 import track from "@cocalc/frontend/user-tracking";
-
-declare var $: any;
-
 import {
   useActions,
   useMemo,
@@ -22,12 +18,13 @@ import {
   ReactDOM,
   Fragment,
 } from "../app-framework";
-
 import { Col, Row, Button, ListGroup, ListGroupItem } from "react-bootstrap";
-
 import { Markdown, Icon, Loading, SearchInput } from "../components";
 import { webapp_client } from "../webapp-client";
 
+
+declare var $: any;
+
 // used for some styles
 const HEIGHT = "275px";