feat: invoice individual view (#86)

Author: Benzilla

apps/web/src/app/features/account/customers/views/customer-detail/customer-detail.component.html

@@ -32,10 +32,26 @@ <h1>@if(c.name){{{c.name}}}@else{{{c.id}}}</h1>
 <div class="flex gap-extra-large view-panels">
   <div class="view-left-panel">
     <div class="view-section">
-      <h2 class="section-title">Subscriptions</h2>
-      <div class="dashed-placeholder">
-        <span>No subscriptions</span>
+      <div class="flex align-vert space-between">
+        <h2 class="section-title">Subscriptions</h2>
+        <button
+          type="button"
+          class="action-button action-button-small outline action-button-disabled"
+          disabled
+        >
+          <img src="assets/icons/add.svg" class="icon" alt="Add icon" />
+        </button>
       </div>
+      <app-paginated-list
+        endpoint="subscriptions"
+        [columns]="subscriptionColumns"
+        [limit]="5"
+        [queryParams]="subscriptionQueryParams()"
+        [expand]="subscriptionExpand()"
+        [paginationEnabled]="false"
+        [showResultCount]="true"
+        (rowClick)="OnSubscriptionClick($event)"
+      ></app-paginated-list>
     </div>
     <div class="view-section">
       <h2 class="section-title">Payments</h2>
@@ -68,9 +84,15 @@ <h2 class="section-title">Entitlements</h2>
     </div>
     <div class="view-section">
       <h2 class="section-title">Invoices</h2>
-      <div class="dashed-placeholder">
-        <span>No invoicess</span>
-      </div>
+      <app-paginated-list
+        endpoint="invoices"
+        [columns]="invoiceColumns"
+        [limit]="5"
+        [queryParams]="invoiceQueryParams()"
+        [expand]="invoiceExpand()"
+        [paginationEnabled]="false"
+        (rowClick)="OnInvoiceClick($event)"
+      ></app-paginated-list>
     </div>
     <div class="view-section">
       <h2 class="section-title">Pending invoice items</h2>

apps/web/src/app/features/account/customers/views/customer-detail/customer-detail.component.ts

@@ -8,7 +8,12 @@ import {
   OnDestroy,
 } from '@angular/core';
 import { DatePipe } from '@angular/common';
-import type { Customer, PaymentIntent } from '@zoneless/shared-types';
+import type {
+  Customer,
+  Invoice,
+  PaymentIntent,
+  Subscription as SubscriptionType,
+} from '@zoneless/shared-types';
 import { GetPaymentIntentListStatus } from '@zoneless/shared-types';
 import { CustomerService } from '../../../../../data';
 import { CustomerActionsService } from '../../services/customer-actions.service';
@@ -25,6 +30,18 @@ import { EventsListComponent } from '../../../components';
 import { MetadataToArray } from '../../../util/metadata';
 import { MetaService } from '../../../../../core';
 import { Subscription } from 'rxjs';
+import {
+  FormatInvoiceFrequency,
+  FormatInvoiceNumber,
+} from '../../../invoices/util/invoice-display';
+import {
+  FormatShortDate,
+  FormatSubscriptionBillingFrequency,
+  FormatSubscriptionNextInvoice,
+  FormatSubscriptionProduct,
+  GetSubscriptionListStatus,
+  GetSubscriptionPeriodProgress,
+} from '../../../subscriptions/util/subscription-display';
 
 @Component({
   selector: 'app-customer-detail',
@@ -52,9 +69,21 @@ export class CustomerDetailComponent implements OnInit, OnDestroy {
   loading: WritableSignal<boolean> = signal(false);
   detailsExpanded: WritableSignal<boolean> = signal(false);
 
+  subscriptionColumns: PaginatedListColumn[] = [];
+  subscriptionQueryParams: WritableSignal<Record<string, string>> = signal({});
+  subscriptionExpand: WritableSignal<string[]> = signal([
+    'items.data.price.product',
+  ]);
+
   paymentColumns: PaginatedListColumn[] = [];
   paymentQueryParams: WritableSignal<Record<string, string>> = signal({});
 
+  invoiceColumns: PaginatedListColumn[] = [];
+  invoiceQueryParams: WritableSignal<Record<string, string>> = signal({});
+  invoiceExpand: WritableSignal<string[]> = signal([
+    'subscription.items.data.price',
+  ]);
+
   private sub?: Subscription;
 
   customerActions: PopupMenuAction[] = [
@@ -73,7 +102,9 @@ export class CustomerDetailComponent implements OnInit, OnDestroy {
     if (!id) return;
     await this.LoadCustomer(id);
     this.metaService.SetMetaTitle(this.customer()?.name ?? 'Customer');
+    this.InitSubscriptionList(id);
     this.InitPaymentList(id);
+    this.InitInvoiceList(id);
     this.sub = this.actions.events$.subscribe((event) => {
       if (event.type === 'deleted' && event.customerId === id) {
         this.router.navigate(['/account/customers']);
@@ -96,6 +127,58 @@ export class CustomerDetailComponent implements OnInit, OnDestroy {
     }
   }
 
+  private InitSubscriptionList(customerId: string): void {
+    this.subscriptionColumns = [
+      {
+        header: 'Product',
+        field: 'product',
+        type: 'text',
+        bolded: true,
+        progressGetter: (item: unknown) =>
+          GetSubscriptionPeriodProgress(item as SubscriptionType),
+        formatter: (item: unknown) =>
+          FormatSubscriptionProduct(item as SubscriptionType),
+      },
+      {
+        header: '',
+        field: 'status',
+        type: 'status',
+        formatter: (item: unknown) =>
+          GetSubscriptionListStatus(item as SubscriptionType),
+      },
+      {
+        header: 'Frequency',
+        field: 'frequency',
+        type: 'text',
+        dimmed: true,
+        formatter: (item: unknown) =>
+          FormatSubscriptionBillingFrequency(item as SubscriptionType),
+      },
+      {
+        header: 'Next invoice',
+        field: 'next_invoice',
+        type: 'text',
+        dimmed: true,
+        formatter: (item: unknown) =>
+          FormatSubscriptionNextInvoice(item as SubscriptionType),
+      },
+      {
+        header: '',
+        field: 'actions',
+        type: 'actions',
+        actions: [
+          {
+            title: 'Copy subscription ID',
+            action: (item: SubscriptionType) => {
+              void navigator.clipboard.writeText(item.id);
+            },
+          },
+        ],
+      },
+    ];
+    this.subscriptionQueryParams.set({ customer: customerId });
+  }
+
   private InitPaymentList(customerId: string): void {
     this.paymentColumns = [
       {
@@ -131,8 +214,79 @@ export class CustomerDetailComponent implements OnInit, OnDestroy {
     this.paymentQueryParams.set({ customer: customerId });
   }
 
+  private InitInvoiceList(customerId: string): void {
+    this.invoiceColumns = [
+      {
+        header: 'Total',
+        field: 'total',
+        type: 'currency-with-code',
+        currencyField: 'currency',
+        bolded: true,
+      },
+      {
+        header: '',
+        field: 'status',
+        type: 'status',
+        formatter: (item: unknown) => (item as Invoice).status ?? '',
+      },
+      {
+        header: 'Frequency',
+        field: 'parent',
+        type: 'text',
+        dimmed: true,
+        formatter: (item: unknown) => FormatInvoiceFrequency(item as Invoice),
+      },
+      {
+        header: 'Invoice number',
+        field: 'number',
+        type: 'text',
+        dimmed: true,
+        formatter: (item: unknown) => FormatInvoiceNumber(item as Invoice),
+      },
+      {
+        header: 'Due',
+        field: 'due_date',
+        type: 'text',
+        dimmed: true,
+        formatter: (item: unknown) => {
+          const dueDate = (item as Invoice).due_date;
+          return dueDate ? FormatShortDate(dueDate) : '—';
+        },
+      },
+      {
+        header: 'Created',
+        field: 'created',
+        type: 'date',
+        dimmed: true,
+        dateFormat: 'd MMM, HH:mm',
+      },
+      {
+        header: '',
+        field: '',
+        type: 'actions',
+        actions: [
+          {
+            title: 'Copy invoice ID',
+            action: (item: Invoice) => {
+              void navigator.clipboard.writeText(item.id);
+            },
+          },
+        ],
+      },
+    ];
+    this.invoiceQueryParams.set({ customer: customerId });
+  }
+
+  OnSubscriptionClick(subscription: SubscriptionType): void {
+    void this.router.navigate(['/account/subscriptions', subscription.id]);
+  }
+
   OnPaymentClick(paymentIntent: PaymentIntent): void {
-    this.router.navigate(['/account/payments', paymentIntent.id]);
+    void this.router.navigate(['/account/payments', paymentIntent.id]);
+  }
+
+  OnInvoiceClick(invoice: Invoice): void {
+    void this.router.navigate(['/account/invoices', invoice.id]);
   }
 
   OnEdit(): void {

apps/web/src/app/features/account/invoices/components/invoice-actions-host/invoice-actions-host.component.html

@@ -0,0 +1,9 @@
+<app-metadata-edit-modal
+  [isOpen]="actions.metadataDialogOpen()"
+  [loading]="actions.metadataSaving()"
+  title="Edit metadata"
+  [metadata]="actions.metadataDraft()"
+  (formChange)="actions.OnMetadataChange($event)"
+  (confirmed)="actions.ConfirmEditMetadata()"
+  (cancelled)="actions.metadataDialogOpen.set(false)"
+></app-metadata-edit-modal>

apps/web/src/app/features/account/invoices/components/invoice-actions-host/invoice-actions-host.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { MetadataEditModalComponent } from '../../../components';
+import { InvoiceActionsService } from '../../services/invoice-actions.service';
+
+@Component({
+  selector: 'app-invoice-actions-host',
+  imports: [MetadataEditModalComponent],
+  templateUrl: './invoice-actions-host.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InvoiceActionsHostComponent {
+  readonly actions = inject(InvoiceActionsService);
+}

apps/web/src/app/features/account/invoices/invoices.routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '@angular/router';
+import { InvoiceActionsService } from './services/invoice-actions.service';
 
 export const invoiceRoutes: Routes = [
   {
     path: '',
+    providers: [InvoiceActionsService],
     children: [
       {
         path: '',
@@ -11,6 +13,13 @@ export const invoiceRoutes: Routes = [
             (m) => m.InvoiceListComponent
           ),
       },
+      {
+        path: ':invoiceId',
+        loadComponent: () =>
+          import('./views/invoice-detail/invoice-detail.component').then(
+            (m) => m.InvoiceDetailComponent
+          ),
+      },
     ],
   },
 ];

apps/web/src/app/features/account/invoices/services/invoice-actions.service.ts

@@ -0,0 +1,50 @@
+import { inject, Injectable, signal, WritableSignal } from '@angular/core';
+import type { Invoice } from '@zoneless/shared-types';
+import { Subject } from 'rxjs';
+import { InvoiceService } from '../../../../data';
+
+export type InvoiceActionEvent = {
+  type: 'updated';
+  invoice: Invoice;
+};
+
+@Injectable()
+export class InvoiceActionsService {
+  private readonly invoiceService = inject(InvoiceService);
+
+  metadataDialogOpen: WritableSignal<boolean> = signal(false);
+  metadataSaving: WritableSignal<boolean> = signal(false);
+  metadataTarget: WritableSignal<Invoice | null> = signal(null);
+  metadataDraft: WritableSignal<Record<string, string>> = signal({});
+
+  readonly events$ = new Subject<InvoiceActionEvent>();
+
+  OpenEditMetadata(invoice: Invoice): void {
+    this.metadataTarget.set(invoice);
+    this.metadataDraft.set({ ...(invoice.metadata ?? {}) });
+    this.metadataDialogOpen.set(true);
+  }
+
+  OnMetadataChange(metadata: Record<string, string>): void {
+    this.metadataDraft.set(metadata);
+  }
+
+  async ConfirmEditMetadata(): Promise<void> {
+    const invoice = this.metadataTarget();
+    if (!invoice) return;
+    this.metadataSaving.set(true);
+    try {
+      const updated = await this.invoiceService.UpdateInvoice(invoice.id, {
+        metadata: this.metadataDraft(),
+      });
+      this.events$.next({ type: 'updated', invoice: updated });
+      this.metadataDialogOpen.set(false);
+    } finally {
+      this.metadataSaving.set(false);
+    }
+  }
+
+  CopyInvoiceId(invoice: Invoice): void {
+    void navigator.clipboard.writeText(invoice.id);
+  }
+}