implement way to test legacy upgrades UI

- it sucks wasting time on this!!!

Author: williamstein

src/packages/frontend/account/store.ts

@@ -5,13 +5,14 @@
 
 import { List, Map } from "immutable";
 import { reduce } from "lodash";
-
 import { store as customizeStore } from "@cocalc/frontend/customize";
 import { make_valid_name } from "@cocalc/util/misc";
 import { Store } from "@cocalc/util/redux/Store";
 import { get_total_upgrades } from "@cocalc/util/upgrades";
 import { AccountState } from "./types";
 
+declare var DEBUG: boolean;
+
 // Define account store
 export class AccountStore extends Store<AccountState> {
   // User type
@@ -104,13 +105,19 @@ export class AccountStore extends Store<AccountState> {
     return this.getIn(["other_settings", "confirm_close"]);
   }
 
-  // Total ugprades this user is paying for (sum of all upgrades from subscriptions)
+  // Total upgrades this user is paying for (sum of all upgrades from subscriptions)
   get_total_upgrades(): { [key: string]: number } | undefined {
     const stripe_data = this.getIn([
       "stripe_customer",
       "subscriptions",
       "data",
     ]);
+    // to fake having upgrades, type this in the console
+    //   cc.redux.getStore('account').fake_upgrades = true
+    if (DEBUG && (this as any).fake_upgrades && !stripe_data) {
+      // fake debugging data
+      return get_total_upgrades({}, true);
+    }
     return stripe_data && get_total_upgrades(stripe_data.toJS());
   }
 

src/packages/frontend/account/upgrades/upgrades-page.tsx

@@ -21,6 +21,7 @@ import { Footer, PolicyPricingPageUrl, SiteName } from "../../customize";
 import "./project-upgrades-table";
 import { ProjectUpgradesTable } from "./project-upgrades-table";
 export { tmp as UpgradesPage };
+declare var DEBUG: boolean;
 
 interface reduxProps {
   stripe_customer?: Map<string, any>;
@@ -178,7 +179,7 @@ class UpgradesPage extends Component<reduxProps> {
       redux.getActions("projects").load_all_projects();
       return <Loading theme={"medium"} />;
     }
-    if (!this.props.stripe_customer?.getIn(["subscriptions", "total_count"])) {
+    if (!DEBUG && !this.props.stripe_customer?.getIn(["subscriptions", "total_count"])) {
       return this.render_no_upgrades();
     } else {
       return (

src/packages/util/upgrades.js

@@ -10,7 +10,11 @@ const misc = require("./misc");
 // This is used by the frontend in r_account.  It's also used by the backend
 // to double check the claims of the frontend.
 // stripe_subscriptions_data = stripe_customer?.subscriptions?.data
-function get_total_upgrades(stripe_subscriptions_data) {
+function get_total_upgrades(stripe_subscriptions_data, DEBUG = false) {
+  if (DEBUG) {
+    return PROJECT_UPGRADES.subscription.professional.benefits;
+  }
+
   const subs = stripe_subscriptions_data;
   if (subs == null) {
     return {};
@@ -92,7 +96,7 @@ exports.available_upgrades = available_upgrades;
 function upgrade_maxes(stripe_subscriptions_data, projects, project_id) {
   const { available, excess } = available_upgrades(
     stripe_subscriptions_data,
-    projects
+    projects,
   );
   const allocated = projects[project_id];
   const maxes = {};