#3385 Preiseingabe Geschenkkarte

apps/shared/modals/purchase-options-modal/src/lib/constants.ts

@@ -22,3 +22,5 @@ export const DEFAULT_PRICE_VALUE: PriceValueDTO = { value: 0, currency: 'EUR' };
 export const DEFAULT_VAT_VALUE: VATValueDTO = { value: 0 };
 
 export const GIFT_CARD_MAX_PRICE = 200;
+
+export const PRICE_PATTERN = /^\d+(,\d{1,2})?$/;

apps/shared/modals/purchase-options-modal/src/lib/purchase-options-list-item/purchase-options-list-item.component.html

@@ -78,11 +78,12 @@
             triggerOn="init"
             #quantityInput
             sharedInputControlInput
-            type="text"
+            type="string"
             class="w-24"
             [formControl]="priceFormControl"
             placeholder="00,00"
             (sharedOnInit)="quantityInput.focus()"
+            sharedNumberValue
           />
           <shared-input-control-suffix>EUR</shared-input-control-suffix>
           <shared-input-control-error error="required">Preis ist ungültig</shared-input-control-error>

apps/shared/modals/purchase-options-modal/src/lib/purchase-options-list-item/purchase-options-list-item.component.ts

@@ -11,7 +11,7 @@ import { UiSpinnerModule } from '@ui/spinner';
 import { UiTooltipModule } from '@ui/tooltip';
 import { combineLatest, ReplaySubject, Subscription } from 'rxjs';
 import { map, startWith, switchMap } from 'rxjs/operators';
-import { GIFT_CARD_MAX_PRICE } from '../constants';
+import { GIFT_CARD_MAX_PRICE, PRICE_PATTERN } from '../constants';
 import { Item, PurchaseOptionsService, PurchaseOptionsStore } from '../store';
 
 @Component({
@@ -52,12 +52,7 @@ export class PurchaseOptionsListItemComponent implements OnInit, OnDestroy, OnCh
 
   quantityFormControl = new FormControl<number>(null);
 
-  priceFormControl = new FormControl<number>(null, [
+  priceFormControl = new FormControl<string>(null, [Validators.required, Validators.min(1), Validators.max(GIFT_CARD_MAX_PRICE)]);
-    Validators.required,
-    Validators.pattern(/^\d+(,\d{1,2})?$/),
-    Validators.min(1),
-    Validators.max(GIFT_CARD_MAX_PRICE),
-  ]);
 
   selectedFormControl = new FormControl<boolean>(false);
 
@@ -117,7 +112,26 @@ export class PurchaseOptionsListItemComponent implements OnInit, OnDestroy, OnCh
     })
   );
 
-  constructor(private _store: PurchaseOptionsStore, private _service: PurchaseOptionsService) {}
+  constructor(private _store: PurchaseOptionsStore) {}
+
+  parsePrice(value: string) {
+    if (PRICE_PATTERN.test(value)) {
+      return parseFloat(value.replace(',', '.'));
+    }
+    this.priceFormControl.setErrors({ pattern: true });
+  }
+
+  stringifyPrice(value: number) {
+    if (!value) return '';
+
+    const price = value.toFixed(2).replace('.', ',');
+    if (price.includes(',')) {
+      const [integer, decimal] = price.split(',');
+      return `${integer},${decimal.padEnd(2, '0')}`;
+    }
+
+    return price;
+  }
 
   ngOnInit(): void {
     this.initQuantitySubscription();
@@ -155,17 +169,25 @@ export class PurchaseOptionsListItemComponent implements OnInit, OnDestroy, OnCh
 
   initPriceSubscription() {
     const sub = this.price$.subscribe((price) => {
-      if (this.priceFormControl.value !== price?.value?.value) {
+      const priceStr = this.stringifyPrice(price?.value?.value);
-        this.priceFormControl.setValue(price?.value?.value);
+      if (priceStr === '') return;
+
+      if (this.parsePrice(this.priceFormControl.value) !== price?.value?.value) {
+        this.priceFormControl.setValue(priceStr);
       }
     });
 
     const valueChangesSub = this.priceFormControl.valueChanges.subscribe((value) => {
-      if (this.priceFormControl.valid) {
+      const price = this._store.getPrice(this.item.id);
-        const price = this._store.getPrice(this.item.id);
+      const parsedPrice = this.parsePrice(value);
-        if (price[this.item.id] !== value) {
+
-          this._store.setPrice(this.item.id, value);
+      if (!parsedPrice) {
-        }
+        this._store.setPrice(this.item.id, null);
+        return;
+      }
+
+      if (price[this.item.id] !== parsedPrice) {
+        this._store.setPrice(this.item.id, this.parsePrice(value));
       }
     });
     this._subscriptions.add(sub);

apps/shared/modals/purchase-options-modal/src/lib/store/purchase-options.selectors.ts

@@ -226,22 +226,18 @@ export function getPriceForPurchaseOption(itemId: number, purchaseOption: Purcha
       availability = availability || digAvailability || b2bAvailability;
     }
 
-    if (availability) {
+    if (availability && availability.data.price?.value?.value) {
       return availability.data.price ?? DEFAULT_PRICE_DTO;
     }
 
-    if (availability === undefined) {
+    const item = getItems(state).find((item) => item.id === itemId);
-      const item = getItems(state).find((item) => item.id === itemId);
+    const type = getType(state);
-      const type = getType(state);
 
-      if (isItemDTO(item, type)) {
+    if (isItemDTO(item, type)) {
-        return item.catalogAvailability?.price ?? DEFAULT_PRICE_DTO;
+      return item.catalogAvailability?.price ?? DEFAULT_PRICE_DTO;
-      } else {
+    } else {
-        return item?.unitPrice ?? DEFAULT_PRICE_DTO;
+      return item.unitPrice ?? DEFAULT_PRICE_DTO;
-      }
     }
-
-    return DEFAULT_PRICE_DTO;
   };
 }
 
@@ -328,6 +324,7 @@ export function canContinue(state: PurchaseOptionsState): boolean {
     if (isGiftCard(item, getType(state))) {
       const price = getPriceForPurchaseOption(item.id, purchaseOption)(state);
       if (!(price?.value?.value > 0 && price?.value?.value <= GIFT_CARD_MAX_PRICE)) {
+        console.log('price', price);
         return false;
       }
     }