(core) Improving billing page user experience

Summary:
Improving billing page user experience.
- Updated labels for canceled plan
- Adding option to downgrade from team plan to free team plan
- Updating default name for teamFree plan when it is not available in Stripe
- Minor bug fixes

Test Plan: updated tests

Reviewers: cyprien

Reviewed By: cyprien

Subscribers: cyprien

Differential Revision: https://phab.getgrist.com/D3515

app/common/BillingAPI.ts

@@ -136,6 +136,7 @@ export interface BillingAPI {
   createTeam(name: string, domain: string): Promise<string>;
   upgrade(): Promise<string>;
   cancelCurrentPlan(): Promise<void>;
+  downgradePlan(planName: string): Promise<void>;
   renewPlan(): string;
   customerPortal(): string;
 }
@@ -170,6 +171,12 @@ export class BillingAPIImpl extends BaseAPI implements BillingAPI {
     });
   }
 
+  public async downgradePlan(planName: string): Promise<void> {
+    await this.request(`${this._url}/api/billing/downgrade-plan`, {
+      method: 'POST',
+      body: JSON.stringify({ planName })
+    });
+  }
 
   public async updateSettings(settings?: IBillingOrgSettings): Promise<void> {
     await this.request(`${this._url}/api/billing/settings`, {

app/common/Features.ts

@@ -68,11 +68,15 @@ export function canAddOrgMembers(features: Features): boolean {
   return features.maxWorkspacesPerOrg !== 1;
 }
 
-
 export const FREE_PERSONAL_PLAN = 'starter';
 export const TEAM_FREE_PLAN = 'teamFree';
 export const TEAM_PLAN = 'team';
 
+export const displayPlanName: { [key: string]: string } = {
+  [TEAM_FREE_PLAN]: 'Team Free',
+  [TEAM_PLAN]: 'Team'
+} as const;
+
 // Returns true if `product` is free.
 export function isFreeProduct(product: Product): boolean {
   return [FREE_PERSONAL_PLAN, TEAM_FREE_PLAN, 'Free'].includes(product?.name);