first commit

common/resources/client/billing/billing-page/billing-page.tsx

@@ -0,0 +1,24 @@
+import {useBillingUser} from './use-billing-user';
+import {CancelledPlanPanel} from './panels/cancelled-plan-panel';
+import {ActivePlanPanel} from './panels/active-plan-panel';
+import {PaymentMethodPanel} from './panels/payment-method-panel';
+import {InvoiceHistoryPanel} from './panels/invoice-history-panel';
+
+export function BillingPage() {
+  const {subscription} = useBillingUser();
+  if (!subscription?.price || !subscription?.product) return null;
+
+  const planPanel = subscription.ends_at ? (
+    <CancelledPlanPanel />
+  ) : (
+    <ActivePlanPanel />
+  );
+
+  return (
+    <div>
+      {planPanel}
+      <PaymentMethodPanel />
+      <InvoiceHistoryPanel />
+    </div>
+  );
+}