for old premium component

apps/web/src/app/billing/individual/premium/premium-v2.component.ts

@@ -183,7 +183,7 @@ export class PremiumV2Component {
     await this.postFinalizeUpgrade();
   }
 
-  protected refreshSalesTax(): void {
+  private refreshSalesTax(): void {
     if (!this.taxInfoComponent.country || !this.taxInfoComponent.postalCode) {
       return;
     }

apps/web/src/app/billing/individual/premium/premium.component.html

@@ -122,7 +122,7 @@
   <bit-section>
     <h3 bitTypography="h2">{{ "paymentInformation" | i18n }}</h3>
     <app-payment [hideBank]="true"></app-payment>
-    <app-tax-info></app-tax-info>
+    <app-tax-info (onTaxInformationChanged)="onTaxInformationChanged()" />
     <div id="price" class="tw-my-4">
       <div class="tw-text-muted tw-text-sm">
         {{ "planPrice" | i18n }}: {{ subtotal | currency: "USD $" }}

apps/web/src/app/billing/individual/premium/premium.component.ts

@@ -1,11 +1,15 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormControl, FormGroup, Validators } from "@angular/forms";
 import { Router } from "@angular/router";
 import { firstValueFrom, Observable } from "rxjs";
+import { debounceTime } from "rxjs/operators";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { TokenService } from "@bitwarden/common/auth/abstractions/token.service";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
+import { TaxServiceAbstraction } from "@bitwarden/common/billing/abstractions/tax.service.abstraction";
+import { PreviewIndividualInvoiceRequest } from "@bitwarden/common/billing/models/request/preview-individual-invoice.request";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
@@ -37,6 +41,9 @@ export class PremiumComponent implements OnInit {
   protected addonForm = new FormGroup({
     additionalStorage: new FormControl(0, [Validators.max(99), Validators.min(0)]),
   });
+
+  private estimatedTax: number = 0;
+
   constructor(
     private apiService: ApiService,
     private i18nService: I18nService,
@@ -48,9 +55,16 @@ export class PremiumComponent implements OnInit {
     private environmentService: EnvironmentService,
     private billingAccountProfileStateService: BillingAccountProfileStateService,
     private toastService: ToastService,
+    private taxService: TaxServiceAbstraction,
   ) {
     this.selfHosted = platformUtilsService.isSelfHost();
     this.canAccessPremium$ = billingAccountProfileStateService.hasPremiumFromAnySource$;
+
+    this.addonForm.controls.additionalStorage.valueChanges
+      .pipe(debounceTime(1000), takeUntilDestroyed())
+      .subscribe(() => {
+        this.refreshSalesTax();
+      });
   }
   protected setSelectedFile(event: Event) {
     const fileInputEl = <HTMLInputElement>event.target;
@@ -152,12 +166,43 @@ export class PremiumComponent implements OnInit {
   }
 
   get taxCharges(): number {
-    return this.taxInfoComponent != null && this.taxInfoComponent.taxRate != null
-      ? (this.taxInfoComponent.taxRate / 100) * this.subtotal
-      : 0;
+    return this.estimatedTax;
   }
 
   get total(): number {
     return this.subtotal + this.taxCharges || 0;
   }
+
+  private refreshSalesTax(): void {
+    if (!this.taxInfoComponent.country || !this.taxInfoComponent.postalCode) {
+      return;
+    }
+    const request: PreviewIndividualInvoiceRequest = {
+      passwordManager: {
+        additionalStorage: this.addonForm.value.additionalStorage,
+      },
+      taxInformation: {
+        postalCode: this.taxInfoComponent.postalCode,
+        country: this.taxInfoComponent.country,
+        taxId: this.taxInfoComponent.taxId,
+      },
+    };
+
+    this.taxService
+      .previewIndividualInvoice(request)
+      .then((invoice) => {
+        this.estimatedTax = invoice.taxAmount;
+      })
+      .catch((error) => {
+        this.toastService.showToast({
+          title: "",
+          variant: "error",
+          message: this.i18nService.t(error.message),
+        });
+      });
+  }
+
+  protected onTaxInformationChanged(): void {
+    this.refreshSalesTax();
+  }
 }