feat: enhance gold payload form with dynamic visibility and improved discount calculations

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

@@ -1,4 +1,5 @@
-<div class="form-group">
+@if (formVisible()) {
+  <div class="form-group">
     <form [formGroup]="form">
       <app-input [control]="form.controls.unit_price" name="unit_price" label="قیمت پایه هر گرم" type="price" />
       <app-input [control]="form.controls.quantity" name="quantity" label="مقدار" type="number" suffix="گرم" />
@@ -64,4 +65,5 @@
       />
       <button pButton class="sm:w-auto w-full" (click)="submit()">{{ preparedCTAText() }}</button>
     </div>
-</div>
+  </div>
+}

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

@@ -52,6 +52,7 @@ export class PosGoldPayloadFormComponent extends AbstractForm<
   baseAmountForDiscountCalculation = signal<number>(0);
   taxAmount = signal<number>(0);
   totalAmount = signal<number>(0);
+  formVisible = signal<boolean>(false);
 
   preparedCTAText = computed(() => (this.editMode ? 'اعمال ویرایش' : 'افزودن به لیست خرید'));
 
@@ -95,10 +96,13 @@ export class PosGoldPayloadFormComponent extends AbstractForm<
   form = this.initialForm();
 
   override ngAfterViewInit(): void {
+    setTimeout(() => {
+      this.formVisible.set(true);
       if (this.editMode) {
         this.form.patchValue(this.initialValues || {}, { emitEvent: false });
         this.updateCalculateAmount(this.form.value as any);
       }
+    }, 200);
   }
 
   override submitForm(payload: IPosOrderItem) {

src/assets/styles.scss

@@ -14,3 +14,18 @@ form,
   flex-direction: column;
   gap: 1rem;
 }
+
+body.tenant-tis .p-drawer {
+  will-change: transform;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+}
+
+body.tenant-tis .p-drawer-mask {
+  will-change: opacity;
+}
+
+body.tenant-tis .p-drawer .p-drawer-content {
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}

src/main.ts

@@ -4,6 +4,7 @@ import faLocales from 'flatpickr-wrap/dist/l10n/fa.js';
 import { brandingConfig } from './app/branding/branding.config';
 import { AppComponent } from './app.component';
 import { appConfig } from './app.config';
+import config from './config';
 
 flatpickr.localize(faLocales.fa!);
 
@@ -32,4 +33,8 @@ if (themeMeta) {
   themeMeta.setAttribute('content', brandingConfig.themeColor);
 }
 
+if (config.isPosApplication) {
+  document.body.classList.add('tenant-tis');
+}
+
 bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));