[AC-1336] Indicate unpaid subscriptions on payment screen (#5962)

* Add text for creating a charge for unpaid invoices

* Refactor payment method to simplify promises

apps/web/src/app/billing/settings/payment-method.component.html

@@ -112,6 +112,7 @@
     *ngIf="showAdjustPayment"
   >
   </app-adjust-payment>
+  <p *ngIf="isUnpaid">{{ "paymentChargedWithUnpaidSubscription" | i18n }}</p>
   <ng-container *ngIf="forOrganization">
     <h2 class="spaced-header">{{ "taxInformation" | i18n }}</h2>
     <p>{{ "taxInformationDesc" | i18n }}</p>

apps/web/src/app/billing/settings/payment-method.component.ts

@@ -4,9 +4,10 @@ import { ActivatedRoute, Router } from "@angular/router";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
-import { OrganizationResponse } from "@bitwarden/common/admin-console/models/response/organization.response";
 import { PaymentMethodType } from "@bitwarden/common/billing/enums";
 import { BillingPaymentResponse } from "@bitwarden/common/billing/models/response/billing-payment.response";
+import { OrganizationSubscriptionResponse } from "@bitwarden/common/billing/models/response/organization-subscription.response";
+import { SubscriptionResponse } from "@bitwarden/common/billing/models/response/subscription.response";
 import { VerifyBankRequest } from "@bitwarden/common/models/request/verify-bank.request";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
@@ -28,9 +29,11 @@ export class PaymentMethodComponent implements OnInit {
   showAdjustPayment = false;
   showAddCredit = false;
   billing: BillingPaymentResponse;
-  org: OrganizationResponse;
+  org: OrganizationSubscriptionResponse;
+  sub: SubscriptionResponse;
   paymentMethodType = PaymentMethodType;
   organizationId: string;
+  isUnpaid = false;
 
   verifyBankPromise: Promise<any>;
   taxFormPromise: Promise<any>;
@@ -83,13 +86,23 @@ export class PaymentMethodComponent implements OnInit {
 
     if (this.forOrganization) {
       const billingPromise = this.organizationApiService.getBilling(this.organizationId);
-      const orgPromise = this.organizationApiService.get(this.organizationId);
+      const organizationSubscriptionPromise = this.organizationApiService.getSubscription(
+        this.organizationId
+      );
 
-      [this.billing, this.org] = await Promise.all([billingPromise, orgPromise]);
+      [this.billing, this.org] = await Promise.all([
+        billingPromise,
+        organizationSubscriptionPromise,
+      ]);
     } else {
-      this.billing = await this.apiService.getUserBillingPayment();
+      const billingPromise = this.apiService.getUserBillingPayment();
+      const subPromise = this.apiService.getUserSubscription();
+
+      [this.billing, this.sub] = await Promise.all([billingPromise, subPromise]);
     }
 
+    this.isUnpaid = this.subscription?.status === "unpaid" ?? false;
+
     this.loading = false;
   }
 
@@ -127,6 +140,7 @@ export class PaymentMethodComponent implements OnInit {
 
       return;
     }
+
     this.showAdjustPayment = true;
   }
 
@@ -214,4 +228,8 @@ export class PaymentMethodComponent implements OnInit {
         this.paymentSource.type === PaymentMethodType.GoogleInApp)
     );
   }
+
+  get subscription() {
+    return this.sub?.subscription ?? this.org?.subscription ?? null;
+  }
 }

apps/web/src/locales/en/messages.json

@@ -2040,6 +2040,9 @@
       }
     }
   },
+  "paymentChargedWithUnpaidSubscription": {
+    "message": "Your payment method will be charged for any unpaid subscriptions."
+  },
   "paymentChargedWithTrial": {
     "message": "Your plan comes with a free 7 day trial. Your payment method will not be charged until the trial has ended. You may cancel at any time."
   },