fix(payment): In-page links for both dev and production use

gtandersen · Oct 9, 2024 · 225b1ea · 225b1ea
1 parent 3eed34f
commit 225b1ea
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/src/app/account-app/account-upgrades.component.html b/src/app/account-app/account-upgrades.component.html
@@ -28,17 +28,17 @@ <h3>
       </p>
 
       <div class="navigationButtons">
-        <a href="/app/account/plans#recommended">
+        <a routerLink="." fragment="recommended">
           <button mat-raised-button color="accent" class="plansLink">
           Recommended plans
           </button>
         </a>
-        <a href="/app/account/plans#compare">
+        <a routerLink="." fragment="compare">
           <button mat-raised-button color="accent" class="plansLink">
             Compare price plans
           </button>
         </a>
-        <a href="/app/account/plans#subaccounts">
+        <a routerLink="." fragment="subaccounts">
           <button mat-raised-button color="accent" class="plansLink">
             Additional accounts
           </button>
@@ -75,7 +75,7 @@ <h1 style="margin: 10px 0 20px 0">One extra year for free!</h1>
     </div>
     -->
 
-    <a name="recommended"><h3>Our recommended plans</h3></a>
+    <a id="recommended"><h3>Our recommended plans</h3></a>
 
       <p>
         We offer a 20% discount on all our plans if you renew for 3 years, which locks in the current price for your entire selected subcription period. To review and compare all our plans, please see the table further down.
@@ -170,7 +170,7 @@ <h4 *ngFor="let us of addon_usages">
 
       <br /><br />
 
-       <a name="compare"><h3>All our price plans</h3></a>
+       <a id="compare"><h3>All our price plans</h3></a>
 
       <p>
         Compare all our main account plans for 1 and 3 years in the table below.
@@ -292,7 +292,7 @@ <h3> Main Account Add-ons </h3>
 
     <br /><br />
 
-    <h2> <a name="subaccounts">Sub-Accounts (additional accounts)</a> </h2>
+    <h2> <a id="subaccounts">Sub-Accounts (additional accounts)</a> </h2>
 
     <p> Sub-accounts are additional accounts that are managed by your main account. They are ideal for companies, organizations, and families who need separate accounts with their own dedicated storage space and account settings. </p>
 

diff --git a/src/app/account-app/account-upgrades.component.ts b/src/app/account-app/account-upgrades.component.ts
@@ -19,7 +19,7 @@
 
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
-
+import { Router, NavigationEnd } from '@angular/router';
 import { CartService } from './cart.service';
 import { RunboxMe, RunboxWebmailAPI } from '../rmmapi/rbwebmail';
 import { PaymentsService } from './payments.service';
@@ -77,7 +77,17 @@ export class AccountUpgradesComponent implements OnInit {
         private snackbar:        MatSnackBar,
         private rmm:             RMM,
         public sidenavService:   RunboxSidenavService,
+        private router:          Router,
     ) {
+      this.router.events.subscribe(e => {
+        if (e instanceof NavigationEnd) {
+          const tree = router.parseUrl(router.url);
+          if (tree.fragment) {
+            const element = document.querySelector("#" + tree.fragment);
+            if (element) { element.scrollIntoView(true); }
+          }
+        }
+      });
     }
 
     ngOnInit() {