[CL-1108] Migrate billing CTAs to new icon API (#19483)

* [CL-1033] Migrate billing CTAs to new icon API

Migrates buttons and links in billing components (browser, web, libs) to use the new icon API.

* add back broken loading behavior

* add back variable removed in error

---------

Co-authored-by: Vicki League <vleague@bitwarden.com>

apps/browser/src/billing/popup/settings/premium-v2.component.html

@@ -37,24 +37,18 @@
         <p class="tw-mt-5 tw-mb-0">{{ priceString }}</p>
       </bit-card>
     </bit-section>
-    <button bitButton type="submit" buttonType="primary" (click)="purchase()" class="tw-mb-3">
-      <b>{{ "premiumPurchase" | i18n }}</b>
-      <i class="bwi bwi-external-link" aria-hidden="true"></i>
-    </button>
     <button
-      #refreshBtn
-      type="button"
-      (click)="refresh()"
-      [disabled]="$any(refreshBtn).loading()"
-      [appApiAction]="refreshPromise"
       bitButton
+      type="submit"
+      buttonType="primary"
+      (click)="purchase()"
+      class="tw-mb-3"
+      endIcon="bwi-external-link"
     >
-      <span [hidden]="$any(refreshBtn).loading()">{{ "premiumRefresh" | i18n }}</span>
-      <i
-        class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
-        [hidden]="!$any(refreshBtn).loading()"
-        aria-hidden="true"
-      ></i>
+      <b>{{ "premiumPurchase" | i18n }}</b>
+    </button>
+    <button type="button" (click)="refresh()" [loading]="refreshing" bitButton>
+      {{ "premiumRefresh" | i18n }}
     </button>
   </div>
 </popup-page>

apps/web/src/app/billing/individual/premium/cloud-hosted-premium.component.html

@@ -59,9 +59,9 @@
         href="https://bitwarden.com/pricing/business/"
         target="_blank"
         rel="noopener noreferrer"
+        endIcon="bwi-external-link"
       >
         {{ "viewbusinessplans" | i18n }}
-        <i class="bwi bwi-external-link tw-ml-1" aria-hidden="true"></i>
       </a>
     </div>
   </bit-section>

apps/web/src/app/billing/individual/premium/self-hosted-premium.component.html

@@ -30,9 +30,9 @@
         linkType="primary"
         (click)="openUploadLicenseDialog()"
         class="tw-cursor-pointer tw-text-sm"
+        endIcon="bwi-angle-right"
       >
         {{ "uploadYourLicenseFile" | i18n }}
-        <i class="bwi bwi-angle-right tw-ml-1" aria-hidden="true"></i>
       </a>
     </div>
 
@@ -79,9 +79,9 @@
         href="https://bitwarden.com/pricing/"
         target="_blank"
         rel="noopener noreferrer"
+        endIcon="bwi-external-link"
       >
         {{ "viewAllPlans" | i18n }}
-        <i class="bwi bwi-external-link tw-ml-1" aria-hidden="true"></i>
       </a>
     </div>
   </bit-section>

apps/web/src/app/billing/individual/subscription/self-hosted-account-subscription.component.html

@@ -47,9 +47,9 @@
             [href]="cloudSubscriptionUrl()"
             target="_blank"
             rel="noreferrer"
+            endIcon="bwi-external-link"
           >
             {{ "launchCloudSubscriptionSentenceCase" | i18n }}
-            <i class="bwi bwi-external-link tw-ml-1" aria-hidden="true"></i>
           </a>
         </div>
       </div>

apps/web/src/app/billing/individual/upgrade/upgrade-payment/upgrade-payment.component.html

@@ -13,9 +13,9 @@
                   bitDialogClose
                   linkType="primary"
                   [routerLink]="adminConsoleRouteForOwnedOrganization$ | async"
+                  endIcon="bwi-angle-right"
                 >
                   {{ "upgradeNow" | i18n }}
-                  <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
                 </a>
               </bit-callout>
             </div>

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

@@ -111,9 +111,9 @@
               href="{{ this.cloudWebVaultUrl }}/#/settings/subscription"
               target="_blank"
               rel="noreferrer"
+              endIcon="bwi-external-link"
             >
               {{ "launchCloudSubscriptionSentenceCase" | i18n }}
-              <i class="bwi bwi-external-link tw-ml-1" aria-hidden="true"></i>
             </a>
           </div>
         </div>

apps/web/src/app/billing/members/free-bitwarden-families.component.html

@@ -1,6 +1,11 @@
 <app-header>
-  <button type="button" (click)="addSponsorship()" bitButton buttonType="primary">
-    <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+  <button
+    type="button"
+    (click)="addSponsorship()"
+    bitButton
+    buttonType="primary"
+    startIcon="bwi-plus"
+  >
     {{ "addSponsorship" | i18n }}
   </button>
 </app-header>

apps/web/src/app/billing/organizations/download-license.component.html

@@ -15,9 +15,8 @@
                 appA11yTitle="{{ 'learnMore' | i18n }}"
                 href="https://bitwarden.com/help/licensing-on-premise/#organization-account-sharing"
                 slot="end"
-              >
-                <i class="bwi bwi-question-circle" aria-hidden="true"></i>
-              </a>
+                startIcon="bwi-question-circle"
+              ></a>
             </bit-label>
             <input type="text" bitInput formControlName="installationId" />
           </bit-form-field>

apps/web/src/app/billing/organizations/organization-subscription-selfhost.component.html

@@ -84,8 +84,8 @@
               rel="noreferrer"
               slot="end"
               bitLink
+              startIcon="bwi-question-circle"
             >
-              <i class="bwi bwi-question-circle" aria-hidden="true"></i>
               <span class="tw-sr-only">{{ "billingSyncHelp" | i18n }}</span>
             </a>
           </bit-label>

libs/angular/src/billing/components/premium-upgrade-dialog/premium-upgrade-dialog.component.html

@@ -57,17 +57,18 @@
             [block]="true"
             (click)="upgrade()"
             type="button"
+            [startIcon]="
+              cardDetails.button.icon?.position === 'before'
+                ? $any(cardDetails.button.icon.type)
+                : undefined
+            "
+            [endIcon]="
+              cardDetails.button.icon && cardDetails.button.icon.position !== 'before'
+                ? $any(cardDetails.button.icon.type)
+                : undefined
+            "
           >
-            @if (cardDetails.button.icon?.position === "before") {
-              <i class="bwi {{ cardDetails.button.icon.type }} tw-me-2" aria-hidden="true"></i>
-            }
             {{ cardDetails.button.text }}
-            @if (
-              cardDetails.button.icon &&
-              (cardDetails.button.icon.position === "after" || !cardDetails.button.icon.position)
-            ) {
-              <i class="bwi {{ cardDetails.button.icon.type }} tw-ms-2" aria-hidden="true"></i>
-            }
           </button>
         </div>
 

libs/angular/src/billing/components/premium.component.ts

@@ -18,6 +18,7 @@ export class PremiumComponent implements OnInit {
   isPremium$: Observable<boolean>;
   price = 10;
   storageProvidedGb = 0;
+  refreshing = false;
   refreshPromise: Promise<any>;
   cloudWebVaultUrl: string;
 
@@ -48,8 +49,9 @@ export class PremiumComponent implements OnInit {
   }
 
   async refresh() {
+    this.refreshing = true;
+    this.refreshPromise = this.apiService.refreshIdentityToken();
     try {
-      this.refreshPromise = this.apiService.refreshIdentityToken();
       await this.refreshPromise;
       this.toastService.showToast({
         variant: "success",
@@ -58,6 +60,8 @@ export class PremiumComponent implements OnInit {
       });
     } catch (e) {
       this.logService.error(e);
+    } finally {
+      this.refreshing = false;
     }
   }