Show subscription status as active for premium if incomplete and within 15 seconds of creation (#11334)

apps/web/src/app/billing/individual/user-subscription.component.html

@@ -42,7 +42,7 @@
       <dl>
         <dt>{{ "status" | i18n }}</dt>
         <dd>
-          <span class="tw-capitalize">{{ (subscription && subscription.status) || "-" }}</span>
+          <span class="tw-capitalize">{{ (subscription && subscriptionStatus) || "-" }}</span>
           <span bitBadge variant="warning" *ngIf="subscriptionMarkedForCancel">{{
             "pendingCancellation" | i18n
           }}</span>

apps/web/src/app/billing/individual/user-subscription.component.ts

@@ -35,8 +35,6 @@ import { UpdateLicenseDialogResult } from "../shared/update-license-types";
 export class UserSubscriptionComponent implements OnInit {
   loading = false;
   firstLoaded = false;
-  adjustStorageAdd = true;
-  showUpdateLicense = false;
   sub: SubscriptionResponse;
   selfHosted = false;
   cloudWebVaultUrl: string;
@@ -65,7 +63,7 @@ export class UserSubscriptionComponent implements OnInit {
     private toastService: ToastService,
     private configService: ConfigService,
   ) {
-    this.selfHosted = platformUtilsService.isSelfHost();
+    this.selfHosted = this.platformUtilsService.isSelfHost();
   }
 
   async ngOnInit() {
@@ -216,11 +214,28 @@ export class UserSubscriptionComponent implements OnInit {
       : 0;
   }
 
-  get storageProgressWidth() {
-    return this.storagePercentage < 5 ? 5 : 0;
-  }
-
   get title(): string {
     return this.i18nService.t(this.selfHosted ? "subscription" : "premiumMembership");
   }
+
+  get subscriptionStatus(): string | null {
+    if (!this.subscription) {
+      return null;
+    } else {
+      /*
+       Premium users who sign up with PayPal will have their subscription activated by a webhook.
+       This is an arbitrary 15-second grace period where we show their subscription as active rather than
+       incomplete while we wait for our webhook to process the `invoice.created` event.
+      */
+      if (this.subscription.status === "incomplete") {
+        const periodStartMS = new Date(this.subscription.periodStartDate).getTime();
+        const nowMS = new Date().getTime();
+        return nowMS - periodStartMS <= 15000
+          ? this.i18nService.t("active")
+          : this.subscription.status;
+      }
+
+      return this.subscription.status;
+    }
+  }
 }