Merged PR 2064: feature(oms-return-details): Display Loyalty Points if order is Reward Order

feature(oms-return-details): Display Loyalty Points if order is Reward Order

Ref: #5374

libs/oms/feature/return-details/src/lib/return-details-order-group-item/return-details-order-group-item.component.html

@@ -17,6 +17,9 @@
     />
   </div>
   <div class="text-isa-neutral-900 flex flex-col gap-2" uiItemRowProdcutTitle>
+    @if (rewardPoints() !== undefined) {
+      <ui-label class="w-10">Prämie</ui-label>
+    }
     <h4 class="isa-text-body-2-bold">{{ i.product.contributors }}</h4>
     <h3
       class="isa-text-subtitle-1-regular text-isa-neutral-900"
@@ -26,19 +29,29 @@
       {{ i.product.name }}
     </h3>
     <div class="flex flex-row justify-start items-center gap-2">
-      @if (i.price?.value; as value) {
+      @if (rewardPoints() !== undefined) {
         <span
           class="isa-text-body-2-bold text-isa-secondary-900"
-          data-what="product-price"
+          data-what="product-loyalty-points"
           [attr.data-which]="i.product.ean"
         >
-          {{ value.value | currency: value.currency }}
-        </span>
-      }
-      @if (i.price?.vat; as vat) {
-        <span class="isa-text-body-2-regular text-isa-neutral-600">
-          inkl. {{ vat.inPercent }}% MwSt
+          {{ rewardPoints() | number: '1.0-0' }} Lesepunkte
         </span>
+      } @else {
+        @if (i.price?.value; as value) {
+          <span
+            class="isa-text-body-2-bold text-isa-secondary-900"
+            data-what="product-price"
+            [attr.data-which]="i.product.ean"
+          >
+            {{ value.value | currency: value.currency }}
+          </span>
+        }
+        @if (i.price?.vat; as vat) {
+          <span class="isa-text-body-2-regular text-isa-neutral-600">
+            inkl. {{ vat.inPercent }}% MwSt
+          </span>
+        }
       }
     </div>
   </div>
@@ -57,7 +70,7 @@
       {{ i.product.manufacturer }} | {{ i.product.ean }}
     </div>
     <div class="text-isa-neutral-600 isa-text-body-2-regular">
-      {{ i.product.publicationDate | date: "dd. MMM yyyy" }}
+      {{ i.product.publicationDate | date: 'dd. MMM yyyy' }}
     </div>
   </div>
   <oms-feature-return-details-order-group-item-controls [item]="i">

libs/oms/feature/return-details/src/lib/return-details-order-group-item/return-details-order-group-item.component.ts

@@ -1,31 +1,38 @@
-import { CurrencyPipe, DatePipe, LowerCasePipe } from "@angular/common";
+import {
+  CurrencyPipe,
+  DatePipe,
+  DecimalPipe,
+  LowerCasePipe,
+} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
   computed,
   inject,
   input,
-} from "@angular/core";
-import { isaActionClose, ProductFormatIconGroup } from "@isa/icons";
+} from '@angular/core';
+import { isaActionClose, ProductFormatIconGroup } from '@isa/icons';
 import {
   getReceiptItemAction,
   getReceiptItemQuantity,
   ReceiptItem,
   ReturnDetailsStore,
-} from "@isa/oms/data-access";
-import { ProductImageDirective } from "@isa/shared/product-image";
-import { ItemRowComponent } from "@isa/ui/item-rows";
-import { NgIconComponent, provideIcons } from "@ng-icons/core";
-import { ReturnDetailsOrderGroupItemControlsComponent } from "../return-details-order-group-item-controls/return-details-order-group-item-controls.component";
-import { ProductRouterLinkDirective } from "@isa/shared/product-router-link";
+} from '@isa/oms/data-access';
+import { ProductImageDirective } from '@isa/shared/product-image';
+import { ItemRowComponent } from '@isa/ui/item-rows';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { ReturnDetailsOrderGroupItemControlsComponent } from '../return-details-order-group-item-controls/return-details-order-group-item-controls.component';
+import { ProductRouterLinkDirective } from '@isa/shared/product-router-link';
+import { LabelComponent } from '@isa/ui/label';
 
 @Component({
-  selector: "oms-feature-return-details-order-group-item",
-  templateUrl: "./return-details-order-group-item.component.html",
-  styleUrls: ["./return-details-order-group-item.component.scss"],
+  selector: 'oms-feature-return-details-order-group-item',
+  templateUrl: './return-details-order-group-item.component.html',
+  styleUrls: ['./return-details-order-group-item.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
+    DecimalPipe,
     ItemRowComponent,
     ProductImageDirective,
     NgIconComponent,
@@ -34,6 +41,7 @@ import { ProductRouterLinkDirective } from "@isa/shared/product-router-link";
     LowerCasePipe,
     ReturnDetailsOrderGroupItemControlsComponent,
     ProductRouterLinkDirective,
+    LabelComponent,
   ],
   providers: [provideIcons({ ...ProductFormatIconGroup, isaActionClose })],
 })
@@ -81,7 +89,7 @@ export class ReturnDetailsOrderGroupItemComponent {
    */
   canReturnMessage = computed(() => {
     const item = this.item();
-    const canReturnAction = getReceiptItemAction(item, "canReturn");
+    const canReturnAction = getReceiptItemAction(item, 'canReturn');
 
     if (canReturnAction?.description) {
       return canReturnAction.description;
@@ -89,7 +97,7 @@ export class ReturnDetailsOrderGroupItemComponent {
 
     const canReturnMessage = this.canReturn()?.message;
 
-    return canReturnMessage ?? "";
+    return canReturnMessage ?? '';
   });
 
   /**
@@ -117,4 +125,16 @@ export class ReturnDetailsOrderGroupItemComponent {
     const item = this.item();
     return this.#store.availableQuantityMap()[item.id];
   });
+
+  /**
+   * The reward points associated with this order item, if any.
+   * This value is based on item's loyalty information.
+   *
+   * @readonly
+   * @returns {number | undefined} The number of reward points, or undefined if none exist.
+   */
+  rewardPoints = computed(() => {
+    const item = this.item();
+    return item?.loyalty?.value;
+  });
 }