view data fixes

apps/website/lib/view-models/PaymentViewModel.ts

@@ -1,33 +1,40 @@
-import type { PaymentDTO } from '@/lib/types/generated/PaymentDTO';
-
 import { ViewModel } from "../contracts/view-models/ViewModel";
+import { CurrencyDisplay } from "../display-objects/CurrencyDisplay";
+import { DateDisplay } from "../display-objects/DateDisplay";
+import { PaymentTypeDisplay } from "../display-objects/PaymentTypeDisplay";
+import { PayerTypeDisplay } from "../display-objects/PayerTypeDisplay";
+import { StatusDisplay } from "../display-objects/StatusDisplay";
+import type { PaymentViewData } from "../view-data/PaymentViewData";
 
 export class PaymentViewModel extends ViewModel {
-  id!: string;
-  type!: string;
-  amount!: number;
-  platformFee!: number;
-  netAmount!: number;
-  payerId!: string;
-  payerType!: string;
-  leagueId!: string;
-  seasonId?: string;
-  status!: string;
-  createdAt!: Date;
-  completedAt?: Date;
+  private readonly data: PaymentViewData;
 
-  constructor(dto: PaymentDTO) {
-    Object.assign(this, dto);
+  constructor(data: PaymentViewData) {
+    super();
+    this.data = data;
   }
 
+  get id(): string { return this.data.id; }
+  get type(): string { return this.data.type; }
+  get amount(): number { return this.data.amount; }
+  get platformFee(): number { return this.data.platformFee; }
+  get netAmount(): number { return this.data.netAmount; }
+  get payerId(): string { return this.data.payerId; }
+  get payerType(): string { return this.data.payerType; }
+  get leagueId(): string { return this.data.leagueId; }
+  get seasonId(): string | undefined { return this.data.seasonId; }
+  get status(): string { return this.data.status; }
+  get createdAt(): string { return this.data.createdAt; }
+  get completedAt(): string | undefined { return this.data.completedAt; }
+
   /** UI-specific: Formatted amount */
   get formattedAmount(): string {
-    return `€${this.amount.toFixed(2)}`; // Assuming EUR currency
+    return CurrencyDisplay.format(this.amount, 'EUR');
   }
 
   /** UI-specific: Formatted net amount */
   get formattedNetAmount(): string {
-    return `€${this.netAmount.toFixed(2)}`;
+    return CurrencyDisplay.format(this.netAmount, 'EUR');
   }
 
   /** UI-specific: Status color */
@@ -43,26 +50,26 @@ export class PaymentViewModel extends ViewModel {
 
   /** UI-specific: Formatted created date */
   get formattedCreatedAt(): string {
-    return this.createdAt.toLocaleString();
+    return DateDisplay.formatShort(this.createdAt);
   }
 
   /** UI-specific: Formatted completed date */
   get formattedCompletedAt(): string {
-    return this.completedAt ? this.completedAt.toLocaleString() : 'Not completed';
+    return this.completedAt ? DateDisplay.formatShort(this.completedAt) : 'Not completed';
   }
 
   /** UI-specific: Status display */
   get statusDisplay(): string {
-    return this.status.charAt(0).toUpperCase() + this.status.slice(1);
+    return StatusDisplay.transactionStatus(this.status);
   }
 
   /** UI-specific: Type display */
   get typeDisplay(): string {
-    return this.type.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
+    return PaymentTypeDisplay.format(this.type);
   }
 
   /** UI-specific: Payer type display */
   get payerTypeDisplay(): string {
-    return this.payerType.charAt(0).toUpperCase() + this.payerType.slice(1);
+    return PayerTypeDisplay.format(this.payerType);
   }
-}
+}