Fix: Discount and payment received were not working

bookie/src/app/sales/receive-payment/receive-payment.component.ts

@@ -29,7 +29,8 @@ import {
   MatFooterRowDef,
   MatFooterRow,
 } from '@angular/material/table';
-import { distinctUntilChanged, map, tap } from 'rxjs/operators';
+import { BehaviorSubject } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
 
 import { ReceivePaymentItem } from '../../core/receive-payment-item';
 import { SettleOption } from '../../core/settle-option';
@@ -73,6 +74,7 @@ import { ReceivePaymentDatasource } from './receive-payment-datasource';
 export class ReceivePaymentComponent {
   @ViewChild('son', { static: true }) son?: ElementRef;
   choices: ReceivePaymentItem[] = [];
+  choicesSubject = new BehaviorSubject<ReceivePaymentItem[]>([]);
 
   type: VoucherType;
   amount: number;
@@ -90,7 +92,7 @@ export class ReceivePaymentComponent {
     son: FormControl<string>;
   }>;
 
-  dataSource: ReceivePaymentDatasource;
+  dataSource: ReceivePaymentDatasource = new ReceivePaymentDatasource(this.choicesSubject);
 
   displayedColumns = ['name', 'amount'];
 
@@ -113,6 +115,7 @@ export class ReceivePaymentComponent {
     this.balance = data.amount;
     this.displayReason = false;
     this.displayTable = false;
+    this.choicesSubject.subscribe((x) => (this.choices = x));
     this.ser
       .listForType(data.type)
       .pipe(
@@ -123,9 +126,9 @@ export class ReceivePaymentComponent {
         ),
       )
       .subscribe((x) => {
-        this.choices = x;
+        this.choicesSubject.next(x);
         this.form.controls.amounts.clear();
-        this.choices.forEach((y: ReceivePaymentItem) =>
+        x.forEach((y: ReceivePaymentItem) =>
           this.form.controls.amounts.push(
             new FormGroup({
               name: new FormControl<string>(y.name, { nonNullable: true }),
@@ -135,22 +138,19 @@ export class ReceivePaymentComponent {
             }),
           ),
         );
-        this.dataSource = new ReceivePaymentDatasource(this.choices);
-        this.listenToAmountChange();
-        this.balance = this.amount - this.choices.reduce((a, c) => a + c.amount, 0);
+        console.log('re', this.displayReason)
       });
-    this.dataSource = new ReceivePaymentDatasource(this.choices);
-    this.listenToAmountChange();
+    this.form.valueChanges.subscribe((x) => this.listenToAmountChange(x.amounts));
   }
 
-  listenToAmountChange() {
-    const array = this.form.controls.amounts;
-    this.choices.forEach((z, i) =>
-      array.controls[i].valueChanges.pipe(distinctUntilChanged()).subscribe((x) => {
-        (this.choices.find((s) => s.name === x.name) as ReceivePaymentItem).amount = x.amount ?? 0;
-        this.balance = this.amount - this.choices.reduce((a, c) => a + c.amount, 0);
-      }),
-    );
+  listenToAmountChange(amounts?: Partial<{ name: string; amount: number }>[]) {
+    if (!amounts) {
+      return;
+    }
+    amounts.forEach((z, i) => {
+      this.choices[i].amount = z.amount ?? 0;
+    });
+    this.balance = this.amount - this.choices.reduce((a, c) => a + c.amount, 0);
   }
 
   select(reason: string) {