Add membership card component (#2507)

* Add membership card component

* Update changelog

---------

Co-authored-by: Thomas <4159106+dtslvr@users.noreply.github.com>

apps/client/src/app/components/user-account-membership/user-account-membership.html

@@ -2,21 +2,13 @@
   <h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Membership</h1>
   <div class="row">
     <div class="col">
+      <gf-membership-card
+        class="mb-5 mx-auto"
+        [expiresAt]="(user?.subscription?.expiresAt | date: defaultDateFormat) ?? '∞'"
+        [name]="user?.subscription?.type"
+      ></gf-membership-card>
       <div class="d-flex">
         <div class="mx-auto">
-          <div class="align-items-center d-flex mb-1">
-            <a [routerLink]="routerLinkPricing"
-              >{{ user?.subscription?.type }}</a
-            >
-            <gf-premium-indicator
-              *ngIf="user?.subscription?.type === 'Premium'"
-              class="ml-1"
-            ></gf-premium-indicator>
-          </div>
-          <div *ngIf="user?.subscription?.type === 'Premium'">
-            <ng-container i18n>Valid until</ng-container> {{
-            user?.subscription?.expiresAt | date: defaultDateFormat }}
-          </div>
           <div *ngIf="user?.subscription?.type === 'Basic'">
             <ng-container
               *ngIf="hasPermissionForSubscription && hasPermissionToUpdateUserSettings"

apps/client/src/app/components/user-account-membership/user-account-membership.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
+import { GfMembershipCardModule } from '@ghostfolio/ui/membership-card';
 import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
@@ -13,6 +14,7 @@ import { UserAccountMembershipComponent } from './user-account-membership.compon
   exports: [UserAccountMembershipComponent],
   imports: [
     CommonModule,
+    GfMembershipCardModule,
     GfPremiumIndicatorModule,
     GfValueModule,
     MatButtonModule,