From 6cc37856b9b19553daa8af4b5bd697facaf4a72a Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Tue, 14 Feb 2023 17:57:36 +0100
Subject: [PATCH] Add data import and export

---
 .../pages/pricing/pricing-page.component.ts   |  7 +++++
 .../src/app/pages/pricing/pricing-page.html   | 28 +++++++++++++++++++
 .../app/pages/pricing/pricing-page.module.ts  |  2 ++
 libs/ui/src/lib/i18n.ts                       |  2 ++
 4 files changed, 39 insertions(+)

diff --git a/apps/client/src/app/pages/pricing/pricing-page.component.ts b/apps/client/src/app/pages/pricing/pricing-page.component.ts
index 48c775901..da14f9e03 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.component.ts
+++ b/apps/client/src/app/pages/pricing/pricing-page.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { User } from '@ghostfolio/common/interfaces';
+import { translate } from '@ghostfolio/ui/i18n';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -14,6 +15,12 @@ import { takeUntil } from 'rxjs/operators';
 export class PricingPageComponent implements OnDestroy, OnInit {
   public baseCurrency: string;
   public coupon: number;
+  public importAndExportTooltipOSS = translate(
+    'DATA_IMPORT_AND_EXPORT_TOOLTIP_OSS'
+  );
+  public importAndExportTooltipPremium = translate(
+    'DATA_IMPORT_AND_EXPORT_TOOLTIP_PREMIUM'
+  );
   public isLoggedIn: boolean;
   public price: number;
   public user: User;
diff --git a/apps/client/src/app/pages/pricing/pricing-page.html b/apps/client/src/app/pages/pricing/pricing-page.html
index 34212324d..1c6bcdca9 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.html
+++ b/apps/client/src/app/pages/pricing/pricing-page.html
@@ -85,6 +85,20 @@
                   ></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>
+                  <span i18n>Data Import and Export</span>
+                  <span
+                    class="align-items-center d-flex ml-1"
+                    matTooltipPosition="above"
+                    [matTooltip]="importAndExportTooltipOSS"
+                  >
+                    <ion-icon name="information-circle-outline"></ion-icon>
+                  </span>
+                </li>
                 <li class="align-items-center d-flex mb-1">
                   <ion-icon
                     class="mr-1"
@@ -261,6 +275,20 @@
                   ></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>
+                  <span i18n>Data Import and Export</span>
+                  <span
+                    class="align-items-center d-flex ml-1"
+                    matTooltipPosition="above"
+                    [matTooltip]="importAndExportTooltipPremium"
+                  >
+                    <ion-icon name="information-circle-outline"></ion-icon>
+                  </span>
+                </li>
                 <li class="align-items-center d-flex mb-1">
                   <ion-icon
                     class="mr-1"
diff --git a/apps/client/src/app/pages/pricing/pricing-page.module.ts b/apps/client/src/app/pages/pricing/pricing-page.module.ts
index 2eaabe575..95144ce04 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.module.ts
+++ b/apps/client/src/app/pages/pricing/pricing-page.module.ts
@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { RouterModule } from '@angular/router';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 
@@ -15,6 +16,7 @@ import { PricingPageComponent } from './pricing-page.component';
     GfPremiumIndicatorModule,
     MatButtonModule,
     MatCardModule,
+    MatTooltipModule,
     PricingPageRoutingModule,
     RouterModule
   ],
diff --git a/libs/ui/src/lib/i18n.ts b/libs/ui/src/lib/i18n.ts
index d0f913abc..100642f83 100644
--- a/libs/ui/src/lib/i18n.ts
+++ b/libs/ui/src/lib/i18n.ts
@@ -5,6 +5,8 @@ const locales = {
   ASSET_CLASS: $localize`Asset Class`,
   ASSET_SUB_CLASS: $localize`Asset Sub Class`,
   CORE: $localize`Core`,
+  DATA_IMPORT_AND_EXPORT_TOOLTIP_OSS: $localize`Switch to Ghostfolio Premium easily`,
+  DATA_IMPORT_AND_EXPORT_TOOLTIP_PREMIUM: $localize`Switch to Ghostfolio Open Source easily`,
   EMERGENCY_FUND: $localize`Emergency Fund`,
   GRANT: $localize`Grant`,
   HIGHER_RISK: $localize`Higher Risk`,