feat: enhance payload forms with dynamic visibility and debounce for value changes

src/app/domains/pos/modules/landing/components/payload-form.component.html

@@ -8,12 +8,18 @@
 >
   @if (good) {
     @if (isGoldMode()) {
-      <pos-gold-payload-form [initialValues]="goldPayload()" [editMode]="editMode()" (onSubmit)="submit($event)" />
+      <pos-gold-payload-form
+        [initialValues]="goldPayload()"
+        [editMode]="editMode()"
+        [visibleForm]="childFormVisible()"
+        (onSubmit)="submit($event)"
+      />
     } @else if (isStandardMode()) {
       <pos-standard-payload-form
         [initialValues]="standardPayload()"
         [unitType]="good.unit_type"
         [editMode]="editMode()"
+        [visibleForm]="childFormVisible()"
         (onSubmit)="submit($event)"
       />
     }

src/app/domains/pos/modules/landing/components/payload-form.component.ts

@@ -22,6 +22,7 @@ export class PayloadFormDialogComponent extends AbstractDialog {
 
   totalAmount = signal<number>(0);
   preparedTitle = computed(() => this.good?.name);
+  childFormVisible = signal<boolean>(false);
 
   editMode = computed(() => Boolean(this.initialValues) && Boolean(this.orderItemId));
   isGoldMode = computed(() => this.good.pricing_model === 'GOLD');
@@ -50,4 +51,14 @@ export class PayloadFormDialogComponent extends AbstractDialog {
     }
     this.close();
   }
+
+  set visible(v: boolean) {
+    // call base setter to maintain behavior
+    super.visible = v as any;
+    if (v) {
+      setTimeout(() => this.childFormVisible.set(true), 200);
+    } else {
+      this.childFormVisible.set(false);
+    }
+  }
 }

src/app/domains/pos/modules/landing/components/payloads/gold/form.component.ts

@@ -5,11 +5,12 @@ import { InputComponent } from '@/shared/components';
 import { AmountPercentageInputComponent } from '@/shared/components/amountPercentageInput/amount-percentage-input.component';
 import { TGoldKarat } from '@/shared/localEnum/constants/goldKarat';
 import { formatWithCurrency } from '@/utils';
-import { Component, computed, EventEmitter, Output, signal } from '@angular/core';
+import { Component, computed, EventEmitter, Input, Output, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { ButtonDirective } from 'primeng/button';
 import { SelectButton, SelectButtonChangeEvent } from 'primeng/selectbutton';
+import { debounceTime } from 'rxjs/operators';
 import { IGoldPayload, IPosOrderItem } from '../../../models';
 import { PosFormDialogAmountCardTemplateComponent } from '../form-dialog-amount-card-template.component';
 
@@ -73,7 +74,7 @@ export class PosGoldPayloadFormComponent extends AbstractForm<
       }),
     });
 
-    form.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => {
+    form.valueChanges.pipe(debounceTime(100), takeUntilDestroyed()).subscribe((value) => {
       this.updateCalculateAmount(value as any);
     });
 
@@ -95,15 +96,18 @@ export class PosGoldPayloadFormComponent extends AbstractForm<
 
   form = this.initialForm();
 
-  override ngAfterViewInit(): void {
+  @Input() set visibleForm(v: boolean) {
-    setTimeout(() => {
+    if (v) {
-      this.formVisible.set(true);
       if (this.editMode) {
         this.form.patchValue(this.initialValues || {}, { emitEvent: false });
         this.updateCalculateAmount(this.form.value as any);
       }
-    }, 200);
+      this.formVisible.set(true);
+    } else {
+      this.formVisible.set(false);
+    }
   }
+  // form visibility and initial patching is controlled by the parent via `visibleForm` input
 
   override submitForm(payload: IPosOrderItem) {
     this.onSubmit.emit({

src/app/domains/pos/modules/landing/components/payloads/standard/form.component.ts

@@ -6,6 +6,7 @@ import { Component, computed, EventEmitter, Input, Output, signal } from '@angul
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ReactiveFormsModule, Validators } from '@angular/forms';
 import { Button } from 'primeng/button';
+import { debounceTime } from 'rxjs/operators';
 import { IPosOrderItem, IStandardPayload } from '../../../models';
 import { PosFormDialogAmountCardTemplateComponent } from '../form-dialog-amount-card-template.component';
 
@@ -35,7 +36,7 @@ export class PosStandardPayloadFormComponent extends AbstractForm<
       discount_percentage: [0, [Validators.min(0), Validators.max(100)]],
     });
 
-    form.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => {
+    form.valueChanges.pipe(debounceTime(100), takeUntilDestroyed()).subscribe((value) => {
       this.updateCalculateAmount(value as Partial<IPosOrderItem<IStandardPayload>>);
     });
 
@@ -43,6 +44,12 @@ export class PosStandardPayloadFormComponent extends AbstractForm<
   };
 
   form = this.initialForm();
+  @Input() set visibleForm(v: boolean) {
+    if (v && this.editMode) {
+      this.form.patchValue(this.initialValues || {}, { emitEvent: false });
+      this.updateCalculateAmount(this.form.value as Partial<IPosOrderItem<IStandardPayload>>);
+    }
+  }
   override submitForm(payload: IPosOrderItem<IStandardPayload>) {
     this.onSubmit.emit({
       ...payload,