From 225b1eae70a38fe36200be90a781fe308c58471c Mon Sep 17 00:00:00 2001
From: Jess Robinson <j.robinson@shadowcat.co.uk>
Date: Tue, 8 Oct 2024 09:59:41 +0000
Subject: [PATCH] fix(payment): In-page links for both dev and production use

---
 src/app/account-app/account-upgrades.component.html | 12 ++++++------
 src/app/account-app/account-upgrades.component.ts   | 12 +++++++++++-
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/app/account-app/account-upgrades.component.html b/src/app/account-app/account-upgrades.component.html
index b99ea624b..851d57464 100644
--- 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
index e521832de..13702d8d0 100644
--- 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() {