feature(crm-customer-card): Improvements, Refresh Transactions

Refs: #5316, #5315

apps/isa-app/src/page/customer/customer-search/kundenkarte-main-view/kundenkarte-main-view.component.html

@@ -10,11 +10,11 @@
   [tabId]="processId$ | async"
   class="mt-4"
 />
-<crm-customer-booking [cardCode]="firstActiveCardCode()" class="mt-4" />
-<crm-customer-card-transactions
-  [cardCode]="firstActiveCardCode()"
-  class="mt-8"
-/>
+@let cardCode = firstActiveCardCode();
+@if (cardCode) {
+  <crm-customer-booking [cardCode]="cardCode" class="mt-4" />
+}
+<crm-customer-card-transactions [cardCode]="cardCode" class="mt-8" />
 <utils-scroll-top-button
   [target]="hostElement"
   class="flex flex-col justify-self-end fixed bottom-6 right-6"

libs/crm/feature/customer-booking/src/lib/crm-feature-customer-booking/crm-feature-customer-booking.component.html

@@ -1,7 +1,18 @@
 @if (cardCode() && !bookingReasonsLoading()) {
   <div class="flex flex-col gap-1 text-isa-neutral-900">
-    <span class="isa-text-body-1-bold">Kulanzbuchungen</span>
-    <span class="isa-text-body-2-regular">1€ entspricht 10 Lesepunkten</span>
+    <span class="isa-text-body-1-bold">Lesepunkte verpunkten</span>
+    <div class="flex flex-row gap-2 items-center">
+      <span class="isa-text-body-2-regular">1€ entspricht 10 Lesepunkten</span>
+      <ui-tooltip-icon
+        class="relative bottom-1"
+        title="Lesepunkte umrechnen"
+        content="1€ entspricht 10 Lesepunkten.
+                Beträge werden kaufmännisch gerundet:
+                Beispiel:
+                14,41€ = 144 Lesepunkte
+                14,49€ = 145 Lesepunkte"
+      ></ui-tooltip-icon>
+    </div>
   </div>
 
   <div

libs/crm/feature/customer-booking/src/lib/crm-feature-customer-booking/crm-feature-customer-booking.component.ts

@@ -22,6 +22,7 @@ import {
   DropdownButtonComponent,
   DropdownOptionComponent,
 } from '@isa/ui/input-controls';
+import { TooltipIconComponent } from '@isa/ui/tooltip';
 
 @Component({
   selector: 'crm-customer-booking',
@@ -30,6 +31,7 @@ import {
     ButtonComponent,
     DropdownButtonComponent,
     DropdownOptionComponent,
+    TooltipIconComponent,
   ],
   templateUrl: './crm-feature-customer-booking.component.html',
   styleUrl: './crm-feature-customer-booking.component.css',

libs/crm/feature/customer-card-transactions/src/lib/crm-feature-customer-card-transactions/crm-feature-customer-card-transactions.component.html

@@ -1,8 +1,19 @@
 <div class="flex flex-col gap-[24px] px-4">
   @if (transactions()?.length) {
-    <h2 class="isa-text-body-1-bold text-isa-neutral-900">
-      Letzte 5 Transaktionen des Kunden
-    </h2>
+    <div class="flex flex-row gap-4 items-center">
+      <h2 class="isa-text-body-1-bold text-isa-neutral-900">
+        Letzte Transaktionen des Kunden
+      </h2>
+
+      <ui-icon-button
+        (click)="refresh()"
+        name="isaActionSearch"
+        color="tertiary"
+        [pending]="isLoading()"
+        [disabled]="isLoading()"
+      >
+      </ui-icon-button>
+    </div>
   }
 
   @if (isLoading()) {
@@ -22,7 +33,7 @@
     <table cdk-table [dataSource]="dataSource()" [trackBy]="trackByDate">
       <!-- Date -->
       <ng-container cdkColumnDef="date">
-        <th cdk-header-cell *cdkHeaderCellDef>Datum</th>
+        <th cdk-header-cell *cdkHeaderCellDef class="text-left">Datum</th>
         <td cdk-cell *cdkCellDef="let t" class="text-xs">
           {{ t.date | date: 'dd.MM.yyyy' }}
           <span class="text-isa-neutral-500">{{
@@ -33,7 +44,7 @@
 
       <!-- Type -->
       <ng-container cdkColumnDef="reason">
-        <th cdk-header-cell *cdkHeaderCellDef>Buchungsart</th>
+        <th cdk-header-cell *cdkHeaderCellDef class="text-left">Buchungsart</th>
         <td cdk-cell *cdkCellDef="let t" class="text-xs">
           {{ t.reason || '-' }}
         </td>
@@ -43,7 +54,7 @@
       <ng-container cdkColumnDef="amount">
         <th cdk-header-cell *cdkHeaderCellDef class="text-right">Umsatz</th>
         <td cdk-cell *cdkCellDef="let t" class="text-xs text-right">
-          @if (t.type === 'BURN') {
+          @if (t.type === 'BURN' && t.amount >= 0) {
             -
           }
           {{ t.amount || 0 | number: '1.2-2' : 'de-DE' }} EUR
@@ -69,7 +80,11 @@
             </span>
           } @else if (t.type === 'BURN') {
             <span class="text-isa-accent-red inline-flex items-center gap-1">
-              -{{ t.points }}
+              @if (t.points >= 0) {
+                -{{ t.points }}
+              } @else {
+                {{ t.points }}
+              }
               <ng-icon name="isaActionPolygonDown" size="0.75rem" />
             </span>
           } @else {

libs/crm/feature/customer-card-transactions/src/lib/crm-feature-customer-card-transactions/crm-feature-customer-card-transactions.component.ts

@@ -9,11 +9,16 @@ import {
 import { DatePipe, DecimalPipe } from '@angular/common';
 import { CdkTableModule } from '@angular/cdk/table';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
-import { isaActionPolygonUp, isaActionPolygonDown } from '@isa/icons';
+import {
+  isaActionPolygonUp,
+  isaActionPolygonDown,
+  isaActionSearch,
+} from '@isa/icons';
 import { logger } from '@isa/core/logging';
 import { EmptyStateComponent } from '@isa/ui/empty-state';
 import { CustomerCardTransactionsResource } from '@isa/crm/data-access';
 import { LoyaltyBookingInfoDTO } from '@generated/swagger/crm-api';
+import { IconButtonComponent } from '@isa/ui/buttons';
 
 @Component({
   selector: 'crm-customer-card-transactions',
@@ -23,8 +28,11 @@ import { LoyaltyBookingInfoDTO } from '@generated/swagger/crm-api';
     CdkTableModule,
     NgIconComponent,
     EmptyStateComponent,
+    IconButtonComponent,
+  ],
+  providers: [
+    provideIcons({ isaActionPolygonUp, isaActionPolygonDown, isaActionSearch }),
   ],
-  providers: [provideIcons({ isaActionPolygonUp, isaActionPolygonDown })],
   templateUrl: './crm-feature-customer-card-transactions.component.html',
   styleUrl: './crm-feature-customer-card-transactions.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -75,8 +83,11 @@ export class CrmFeatureCustomerCardTransactionsComponent {
       const code = this.cardCode();
       this.#logger.debug('Card code changed', () => ({ cardCode: code }));
       this.#transactionsResource.params({ cardCode: code });
-
-      console.log(this.transactions());
     });
   }
+
+  refresh() {
+    this.#transactionsResource.params({ cardCode: this.cardCode() });
+    this.#transactionsResource.resource.reload();
+  }
 }

libs/ui/tooltip/src/tooltip.scss

@@ -28,7 +28,7 @@
 }
 
 .ui-tooltip-content {
-  @apply isa-text-body-2-regular text-isa-neutral-600;
+  @apply isa-text-body-2-regular text-isa-neutral-600 whitespace-pre-line;
 }
 
 .ui-tooltip--warning .ui-tooltip-title {