Show the name of current owner in the plans overview.

backend/i18n/frontend_en.json

@@ -624,9 +624,10 @@
   "plans.includedTraffic": "Traffic",
   "plans.loadFailed": "Failed to load plans. Please reload.",
   "plans.noPlanConfigured": "No plan configured, this app has unlimited usage.",
-  "plans.notPlanOwner": "You have not created the subscription. Therefore you cannot change the plan.",
+  "plans.notPlanOwner": "You have not created the subscription, therefore you cannot change the plan.",
   "plans.perMonth": "Per Month",
   "plans.perYear": "Per Year",
+  "plans.planOwner": "Owner",
   "plans.refreshTooltip": "Refresh Plans",
   "plans.reloaded": "Plans reloaded.",
   "plans.selected": "Selected",

backend/i18n/frontend_it.json

@@ -627,6 +627,7 @@
   "plans.notPlanOwner": "Non hai creato nessun abbonamento, pertanto non è possibile cambiare il piano.",
   "plans.perMonth": "Al mese",
   "plans.perYear": "all'anno",
+  "plans.planOwner": "Owner",
   "plans.refreshTooltip": "Aggiorna i piani",
   "plans.reloaded": "Piano aggiornati.",
   "plans.selected": "Selezionato",

backend/i18n/frontend_nl.json

@@ -627,6 +627,7 @@
   "plans.notPlanOwner": "Je hebt geen abonnement aangemaakt. Daarom kun je het plan niet wijzigen.",
   "plans.perMonth": "Per maand",
   "plans.perYear": "Per jaar",
+  "plans.planOwner": "Owner",
   "plans.refreshTooltip": "Plannen vernieuwen",
   "plans.reloaded": "Plans reloaded.",
   "plans.selected": "Geselecteerd",

backend/i18n/frontend_zh.json

@@ -627,6 +627,7 @@
   "plans.notPlanOwner": "您尚未创建订阅。因此您无法更改计划。",
   "plans.perMonth": "每月",
   "plans.perYear": "每年",
+  "plans.planOwner": "Owner",
   "plans.refreshTooltip": "刷新计划",
   "plans.reloaded": "计划重新加载。",
   "plans.selected": "已选择",

backend/i18n/source/frontend_en.json

@@ -624,9 +624,10 @@
   "plans.includedTraffic": "Traffic",
   "plans.loadFailed": "Failed to load plans. Please reload.",
   "plans.noPlanConfigured": "No plan configured, this app has unlimited usage.",
-  "plans.notPlanOwner": "You have not created the subscription. Therefore you cannot change the plan.",
+  "plans.notPlanOwner": "You have not created the subscription, therefore you cannot change the plan.",
   "plans.perMonth": "Per Month",
   "plans.perYear": "Per Year",
+  "plans.planOwner": "Owner",
   "plans.refreshTooltip": "Refresh Plans",
   "plans.reloaded": "Plans reloaded.",
   "plans.selected": "Selected",

frontend/src/app/features/settings/pages/plans/plans-page.component.html

@@ -13,7 +13,7 @@
         <sqx-list-view innerWidth="60rem" [isLoading]="plansState.isLoading | async">
             <ng-container *ngIf="(plansState.isLoaded | async) && (plansState.plans | async); let plans">
                 <div class="alert alert-danger" *ngIf="(plansState.isOwner | async) === false">
-                    {{ 'plans.notPlanOwner' | sqxTranslate }}
+                    {{ 'plans.notPlanOwner' | sqxTranslate }} {{ 'plans.planOwner' |sqxTranslate }}: <strong className="no-wrap">{{plansState.planOwner | async | sqxUserName}}</strong>
                 </div>
 
                 <div>

frontend/src/app/features/settings/pages/plans/plans-page.component.scss

@@ -9,3 +9,7 @@
 .billing-portal-link {
     padding: 2rem .5rem 0;
 }
+
+.no-wrap {
+    white-space: nowrap;
+}

frontend/src/app/shared/components/pipes.ts

@@ -29,7 +29,11 @@ class UserAsyncPipe {
         }
     }
 
-    protected transformInternal(userId: string, transform: (users: UsersProviderService) => Observable<string | null>) {
+    protected transformInternal(userId: string | undefined | null, transform: (users: UsersProviderService, userId: string) => Observable<string | null>) {
+        if (!userId) {
+            return undefined;
+        }
+
         if (this.lastUserId !== userId) {
             this.lastUserId = userId;
 
@@ -37,7 +41,7 @@ class UserAsyncPipe {
                 this.subscription.unsubscribe();
             }
 
-            const pipe = transform(this.users);
+            const pipe = transform(this.users, userId);
 
             this.subscription = pipe.subscribe(value => {
                 this.lastValue = value || undefined;
@@ -67,8 +71,9 @@ export class UserNamePipe extends UserAsyncPipe implements OnDestroy, PipeTransf
         super.destroy();
     }
 
-    public transform(userId: string, placeholder = 'Me') {
-        return super.transformInternal(userId, users => users.getUser(userId, placeholder).pipe(map(u => u.displayName)));
+    public transform(userId: string | undefined | null, placeholder = 'Me') {
+        return super.transformInternal(userId, (users, userId) => 
+            users.getUser(userId, placeholder).pipe(map(u => u.displayName)));
     }
 }
 
@@ -85,8 +90,8 @@ export class UserNameRefPipe extends UserAsyncPipe implements OnDestroy, PipeTra
         super.destroy();
     }
 
-    public transform(userId: string, placeholder: string | null = 'Me') {
-        return super.transformInternal(userId, users => {
+    public transform(userId: string | undefined | null, placeholder: string | null = 'Me') {
+        return super.transformInternal(userId, (users, userId) => {
             const { type, id } = split(userId);
 
             if (type === 'subject') {
@@ -145,8 +150,9 @@ export class UserPicturePipe extends UserAsyncPipe implements OnDestroy, PipeTra
         super.destroy();
     }
 
-    public transform(userId: string) {
-        return super.transformInternal(userId, users => users.getUser(userId).pipe(map(u => this.apiUrl.buildUrl(`api/users/${u.id}/picture`))));
+    public transform(userId: string | undefined | null) {
+        return super.transformInternal(userId, (users, userId) =>
+            users.getUser(userId).pipe(map(u => this.apiUrl.buildUrl(`api/users/${u.id}/picture`))));
     }
 }
 
@@ -165,8 +171,8 @@ export class UserPictureRefPipe extends UserAsyncPipe implements OnDestroy, Pipe
         super.destroy();
     }
 
-    public transform(userId: string) {
-        return super.transformInternal(userId, users => {
+    public transform(userId: string | undefined | null) {
+        return super.transformInternal(userId, (users, userId) => {
             const { type, id } = split(userId);
 
             if (type === 'subject') {

frontend/src/app/shared/state/plans.state.ts

@@ -31,6 +31,9 @@ interface Snapshot {
     // Indicates if the user is the plan owner.
     isOwner?: boolean;
 
+    // The user, who owns the plan.
+    planOwner?: string;
+
     // Indicates if the plans are loaded.
     isLoaded?: boolean;
 
@@ -49,6 +52,9 @@ export class PlansState extends State<Snapshot> {
     public plans =
         this.project(x => x.plans);
 
+    public planOwner =
+        this.project(x => x.planOwner);
+
     public isOwner =
         this.project(x => x.isOwner === true);
 
@@ -108,6 +114,7 @@ export class PlansState extends State<Snapshot> {
                     isLoaded: true,
                     isLoading: false,
                     isOwner: !payload.planOwner || payload.planOwner === this.userId,
+                    planOwner: payload.planOwner,
                     plans,
                     version,
                 }, 'Loading Success');