Feature: Tax Regimes are added so that different bills with different series can be printed for Different regimes such as VAT and GST

Chore: Model relationships updated to make them simpler
Chore: Bill printing majorly refactored for it

Due to the sheer depth of the changes. There can be showstoppers. Please test it carefully

bookie/src/app/sales/choose-customer/choose-customer.component.ts

@@ -1,10 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import {
-  UntypedFormArray,
-  UntypedFormBuilder,
-  UntypedFormControl,
-  UntypedFormGroup,
-} from '@angular/forms';
+import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { round } from 'mathjs';
@@ -20,26 +15,36 @@ import { CustomerService } from '../../customers/customer.service';
   styleUrls: ['./choose-customer.component.css'],
 })
 export class ChooseCustomerComponent {
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    name: FormControl<string>;
+    phone: FormControl<string>;
+    address: FormControl<string | null>;
+    printInBill: FormControl<boolean>;
+    discounts: FormArray<
+      FormGroup<{
+        discount: FormControl<number | null>;
+      }>
+    >;
+  }>;
+
   item: Customer = new Customer();
   customers: Observable<Customer[]>;
 
   constructor(
     public dialogRef: MatDialogRef<ChooseCustomerComponent>,
     @Inject(MAT_DIALOG_DATA) public data: string | undefined,
-    private fb: UntypedFormBuilder,
     private ser: CustomerService,
   ) {
     // Create form
-    this.form = this.fb.group({
-      name: '',
-      phone: '',
-      address: '',
-      printInBill: false,
-      discounts: this.fb.array([]),
+    this.form = new FormGroup({
+      name: new FormControl<string>('', { nonNullable: true }),
+      phone: new FormControl<string>('', { nonNullable: true }),
+      address: new FormControl<string | null>(null),
+      printInBill: new FormControl<boolean>(false, { nonNullable: true }),
+      discounts: new FormArray<FormGroup<{ discount: FormControl<number | null> }>>([]),
     });
     // Setup Account Autocomplete
-    this.customers = (this.form.get('phone') as UntypedFormControl).valueChanges.pipe(
+    this.customers = this.form.controls.phone.valueChanges.pipe(
       startWith(null),
       map((x) => (x === this.item.phone ? '' : x)),
       map((x) => (x !== null && x.length >= 1 ? x : null)),
@@ -54,20 +59,16 @@ export class ChooseCustomerComponent {
 
   showItem(item: Customer) {
     this.item = item;
-    this.form.patchValue({
-      name: item.name,
-      phone: item.phone,
-      address: item.address,
-      printInBill: item.printInBill,
-    });
-    this.form.setControl(
-      'discounts',
-      this.fb.array(
-        item.discounts.map((x) =>
-          this.fb.group({
-            discount: '' + x.discount * 100,
-          }),
-        ),
+    this.form.controls.name.setValue(item.name);
+    this.form.controls.phone.setValue(item.phone);
+    this.form.controls.address.setValue(item.address);
+    this.form.controls.printInBill.setValue(item.printInBill);
+    this.form.controls.discounts.clear();
+    this.item.discounts.forEach((x) =>
+      this.form.controls.discounts.push(
+        new FormGroup({
+          discount: new FormControl<number | null>(x.discount ? x.discount * 100 : null),
+        }),
       ),
     );
     this.form.markAsPristine();
@@ -93,18 +94,22 @@ export class ChooseCustomerComponent {
 
   getItem(): Customer {
     const formModel = this.form.value;
-    this.item.id = this.item.phone.trim() !== formModel.phone.trim() ? '' : this.item.id;
-    this.item.name = formModel.name;
-    this.item.phone = formModel.phone;
-    this.item.address = formModel.address;
-    this.item.printInBill = formModel.printInBill;
-    const array = this.form.get('discounts') as UntypedFormArray;
-    this.item.discounts.forEach((item, index) => {
-      item.discount = Math.max(
-        Math.min(round(array.controls[index].value.discount / 100, 5), 100),
-        0,
-      );
-    });
+    this.item.id = this.item.phone.trim() !== formModel.phone?.trim() ? '' : this.item.id;
+    this.item.name = formModel.name ?? '';
+    this.item.phone = formModel.phone ?? '';
+    this.item.address = formModel.address ?? '';
+    this.item.printInBill = formModel.printInBill ?? false;
+    const array = formModel.discounts;
+    if (array) {
+      this.item.discounts.forEach((item, index) => {
+        const array_item = array.at(index);
+        if (array_item && array_item?.discount) {
+          item.discount = Math.max(Math.min(round(array_item.discount / 100, 5), 100), 0);
+        } else {
+          item.discount = null;
+        }
+      });
+    }
     return this.item;
   }
 }