From f599704dab4433c0e31cd65cf67305ad0f7a9eb0 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Fri, 27 Jan 2023 20:43:12 +0100
Subject: [PATCH] Improve pricing page

---
 .../subscription-interstitial-dialog.html     |  4 +
 .../src/app/pages/pricing/pricing-page.html   | 89 +++++++++++++------
 .../src/app/pages/pricing/pricing-page.scss   | 12 +--
 3 files changed, 73 insertions(+), 32 deletions(-)

diff --git a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html b/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html
index ebe46767f..a45bb42a8 100644
--- a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html
+++ b/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html
@@ -26,6 +26,10 @@
       <ion-icon class="mr-1" name="checkmark-circle-outline"></ion-icon>
       <span i18n>FIRE Calculator</span>
     </li>
+    <li class="align-items-center d-flex mb-1">
+      <ion-icon class="mr-1" name="checkmark-circle-outline"></ion-icon>
+      <a i18n [routerLink]="['/features']">and more Features...</a>
+    </li>
   </ul>
   <p>Refine your personal investment strategy now.</p>
 </div>
diff --git a/apps/client/src/app/pages/pricing/pricing-page.html b/apps/client/src/app/pages/pricing/pricing-page.html
index 5c4fab82c..c26f3fdad 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.html
+++ b/apps/client/src/app/pages/pricing/pricing-page.html
@@ -31,9 +31,9 @@
           <mat-card class="d-flex flex-column h-100">
             <div class="flex-grow-1">
               <h4>Open Source</h4>
-              <p>
-                For tech-savvy investors who prefer to run
-                <strong>Ghostfolio</strong> on their own infrastructure.
+              <p i18n>
+                For tech-savvy investors who prefer to run Ghostfolio on their
+                own infrastructure.
               </p>
               <ul class="list-unstyled mb-3">
                 <li class="align-items-center d-flex mb-1">
@@ -48,14 +48,14 @@
                     class="mr-1"
                     name="checkmark-circle-outline"
                   ></ion-icon>
-                  <span i18n>Portfolio Performance</span>
+                  <span i18n>Unlimited Accounts</span>
                 </li>
                 <li class="align-items-center d-flex mb-1">
                   <ion-icon
                     class="mr-1"
                     name="checkmark-circle-outline"
                   ></ion-icon>
-                  <span i18n>Zen Mode</span>
+                  <span i18n>Portfolio Performance</span>
                 </li>
                 <li class="align-items-center d-flex mb-1">
                   <ion-icon
@@ -85,9 +85,16 @@
                   ></ion-icon>
                   <span i18n>FIRE Calculator</span>
                 </li>
+                <li class="align-items-center d-flex mb-1">
+                  <ion-icon
+                    class="mr-1"
+                    name="checkmark-circle-outline"
+                  ></ion-icon>
+                  <a i18n [routerLink]="['/features']">and more Features...</a>
+                </li>
               </ul>
             </div>
-            <p>Self-hosted, update manually.</p>
+            <p i18n>Self-hosted, update manually.</p>
             <p class="h5 text-right">Free</p>
             <div
               *ngIf="user?.subscription?.type === 'Basic'"
@@ -106,8 +113,13 @@
             [ngClass]="{ 'active': user?.subscription?.type === 'Basic' }"
           >
             <div class="flex-grow-1">
-              <h4 class="align-items-center d-flex">Basic</h4>
-              <p>
+              <div class="align-items-center d-flex mb-2">
+                <h4 class="flex-grow-1 m-0">Basic</h4>
+                <div *ngIf="user?.subscription?.type === 'Basic'">
+                  <ion-icon class="mr-1" name="checkmark-outline"></ion-icon>
+                </div>
+              </div>
+              <p i18n>
                 For new investors who are just getting started with trading.
               </p>
               <ul class="list-unstyled mb-3">
@@ -123,14 +135,20 @@
                     class="mr-1"
                     name="checkmark-circle-outline"
                   ></ion-icon>
-                  <span i18n>Portfolio Performance</span>
+                  <span i18n>Unlimited Accounts</span>
                 </li>
                 <li class="align-items-center d-flex mb-1">
                   <ion-icon
                     class="mr-1"
                     name="checkmark-circle-outline"
                   ></ion-icon>
-                  <span i18n>Zen Mode</span>
+                  <span i18n>Portfolio Performance</span>
+                </li>
+                <li>
+                  <ion-icon
+                    class="invisible"
+                    name="checkmark-circle-outline"
+                  ></ion-icon>
                 </li>
                 <li>
                   <ion-icon
@@ -158,8 +176,8 @@
                 </li>
               </ul>
             </div>
-            <p>Fully managed <strong>Ghostfolio</strong> cloud offering.</p>
-            <p class="h5 text-right">Free</p>
+            <p i18n>Fully managed Ghostfolio cloud offering.</p>
+            <p class="h5 text-right" i18n>Free</p>
             <div
               *ngIf="user?.subscription?.type === 'Basic'"
               class="d-none d-lg-block hidden mt-3 text-center"
@@ -177,14 +195,19 @@
             [ngClass]="{ 'active': user?.subscription?.type === 'Premium' }"
           >
             <div class="flex-grow-1">
-              <h4 class="align-items-center d-flex">
-                <span>Premium</span>
-                <gf-premium-indicator
-                  class="ml-1"
-                  [enableLink]="false"
-                ></gf-premium-indicator>
-              </h4>
-              <p>
+              <div class="align-items-center d-flex mb-2">
+                <h4 class="align-items-center d-flex flex-grow-1 m-0">
+                  <span>Premium</span>
+                  <gf-premium-indicator
+                    class="ml-1"
+                    [enableLink]="false"
+                  ></gf-premium-indicator>
+                </h4>
+                <div *ngIf="user?.subscription?.type === 'Premium'">
+                  <ion-icon class="mr-1" name="checkmark-outline"></ion-icon>
+                </div>
+              </div>
+              <p i18n>
                 For ambitious investors who need the full picture of their
                 financial assets.
               </p>
@@ -201,14 +224,14 @@
                     class="mr-1"
                     name="checkmark-circle-outline"
                   ></ion-icon>
-                  <span i18n>Portfolio Performance</span>
+                  <span i18n>Unlimited Accounts</span>
                 </li>
                 <li class="align-items-center d-flex mb-1">
                   <ion-icon
                     class="mr-1"
                     name="checkmark-circle-outline"
                   ></ion-icon>
-                  <span i18n>Zen Mode</span>
+                  <span i18n>Portfolio Performance</span>
                 </li>
                 <li class="align-items-center d-flex mb-1">
                   <ion-icon
@@ -238,9 +261,16 @@
                   ></ion-icon>
                   <span i18n>FIRE Calculator</span>
                 </li>
+                <li class="align-items-center d-flex mb-1">
+                  <ion-icon
+                    class="mr-1"
+                    name="checkmark-circle-outline"
+                  ></ion-icon>
+                  <a i18n [routerLink]="['/features']">and more Features...</a>
+                </li>
               </ul>
             </div>
-            <p>Fully managed <strong>Ghostfolio</strong> cloud offering.</p>
+            <p i18n>Fully managed Ghostfolio cloud offering.</p>
             <p class="h5 text-right" [hidden]="!price">
               <span class="font-weight-normal">
                 <ng-container *ngIf="coupon"
@@ -261,11 +291,16 @@
               *ngIf="user?.subscription?.type === 'Basic'"
               class="mt-3 text-center"
             >
-              <a color="primary" mat-flat-button [routerLink]="['/account']">
+              <a
+                color="primary"
+                i18n
+                mat-flat-button
+                [routerLink]="['/account']"
+              >
                 Upgrade Plan
               </a>
               <p class="m-0 text-muted">
-                <small>One-time payment, no auto-renewal.</small>
+                <small i18n>One-time payment, no auto-renewal.</small>
               </p>
             </div>
           </mat-card>
@@ -275,10 +310,10 @@
   </div>
   <div *ngIf="!user" class="row">
     <div class="col mt-3 text-center">
-      <a color="primary" mat-flat-button [routerLink]="['/register']">
+      <a color="primary" i18n mat-flat-button [routerLink]="['/register']">
         Get Started
       </a>
-      <p class="m-0 text-muted"><small>It’s free.</small></p>
+      <p class="m-0 text-muted"><small i18n>It’s free.</small></p>
     </div>
   </div>
 </div>
diff --git a/apps/client/src/app/pages/pricing/pricing-page.scss b/apps/client/src/app/pages/pricing/pricing-page.scss
index 40c64b093..74b8facb8 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.scss
+++ b/apps/client/src/app/pages/pricing/pricing-page.scss
@@ -2,12 +2,14 @@
   color: rgb(var(--dark-primary-text));
   display: block;
 
-  a {
-    color: rgba(var(--palette-primary-500), 1);
-    font-weight: 500;
+  p {
+    a {
+      color: rgba(var(--palette-primary-500), 1);
+      font-weight: 500;
 
-    &:hover {
-      color: rgba(var(--palette-primary-300), 1);
+      &:hover {
+        color: rgba(var(--palette-primary-300), 1);
+      }
     }
   }