Add data import and export

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;

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"

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
   ],

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`,