From 023bf0474cca420c236bf6977123be186fff611c Mon Sep 17 00:00:00 2001
From: Addison Beck <abeck@bitwarden.com>
Date: Thu, 14 Jan 2021 17:53:46 -0500
Subject: [PATCH] Showed sales tax amount on Go Premium screen (#774)

---
 src/app/settings/premium.component.html | 17 +++++++++++++----
 src/app/settings/premium.component.ts   | 12 +++++++++++-
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/app/settings/premium.component.html b/src/app/settings/premium.component.html
index 74dc4deddec..53bf4ca3d81 100644
--- a/src/app/settings/premium.component.html
+++ b/src/app/settings/premium.component.html
@@ -69,13 +69,22 @@
     <br> {{'additionalStorageGb' | i18n}}: {{additionalStorage || 0}} GB &times; {{storageGbPrice | currency:'$'}} = {{additionalStorageTotal
     | currency:'$'}}
     <hr class="my-3">
-    <div class="text-lg">
-        <strong>{{'total' | i18n}}:</strong> {{total | currency:'USD $'}} /{{'year' | i18n}}
-    </div>
-    <small class="text-muted font-italic">{{'paymentChargedAnnually' | i18n}}</small>
     <h2 class="spaced-header mb-4">{{'paymentInformation' | i18n}}</h2>
     <app-payment [hideBank]="true"></app-payment>
     <app-tax-info></app-tax-info>
+    <div id="price" class="my-4">
+        <div class="text-muted text-sm">
+            {{ 'planPrice' | i18n }}: {{ subtotal | currency: 'USD $' }}
+            <br />
+            <ng-container>
+                {{ 'estimatedTax' | i18n }}: {{ taxCharges | currency: 'USD $' }}
+            </ng-container>
+        </div>
+        <hr class="my-1 col-3 ml-0">
+        <p class="text-lg"><strong>{{'total' | i18n}}:</strong>
+            {{total | currency:'USD $'}}/{{'year' | i18n}}</p>
+    </div>
+    <small class="text-muted font-italic">{{'paymentChargedAnnually' | i18n}}</small>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
         <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
         <span>{{'submit' | i18n}}</span>
diff --git a/src/app/settings/premium.component.ts b/src/app/settings/premium.component.ts
index 09723cbde69..41ef4d9f350 100644
--- a/src/app/settings/premium.component.ts
+++ b/src/app/settings/premium.component.ts
@@ -114,7 +114,17 @@ export class PremiumComponent implements OnInit {
         return this.storageGbPrice * Math.abs(this.additionalStorage || 0);
     }
 
+    get subtotal(): number {
+        return this.premiumPrice + this.additionalStorageTotal;
+    }
+
+    get taxCharges(): number {
+        return this.taxInfoComponent != null && this.taxInfoComponent.taxRate != null ?
+            (this.taxInfoComponent.taxRate / 100) * this.subtotal :
+            0;
+    }
+
     get total(): number {
-        return this.additionalStorageTotal + this.premiumPrice;
+        return (this.subtotal + this.taxCharges) || 0;
     }
 }