feat(layout): enhance topbar with customizable templates and full-page support

- Updated app.layout.component.html to include start, center, and end templates for the topbar.
- Modified app.layout.component.ts to manage new template references and added isFullPage getter.
- Refactored app.topbar.component.html to utilize new templates and improved layout structure.
- Enhanced app.topbar.component.ts to accept new input properties for templates.
- Updated layout.service.ts to manage full-page state and new topbar slots.
- Added new payment bridge services for POS functionality.
- Introduced greater validator for form validation.
- Improved dialog component to support mobile drawer and responsive design.
- Updated styles for better mobile support and layout adjustments.
- Added new main menu sidebar for POS with dynamic content.

src/app/modules/auth/pages/auth.component.ts

@@ -1,5 +1,7 @@
 import { IAuthResponse, Maybe, TRoles } from '@/core';
 import { ToastService } from '@/core/services/toast.service';
+import { PosPaymentBridgeAbstract } from '@/domains/pos/modules/landing/services/payment-bridge.abstract';
+import { PosPaymentBridgeService } from '@/domains/pos/modules/landing/services/payment-bridge.service';
 import { Component, EventEmitter, OnDestroy, OnInit, inject, Input, Output, signal } from '@angular/core';
 import { Router } from '@angular/router';
 import { ButtonDirective } from 'primeng/button';
@@ -12,6 +14,7 @@ type TSteps = 'login' | 'otp' | 'modifyLoginInfo' | 'signup';
   selector: 'app-auth',
   templateUrl: './auth.component.html',
   imports: [LoginComponent, ButtonDirective],
+  providers: [{ provide: PosPaymentBridgeAbstract, useExisting: PosPaymentBridgeService }],
 })
 export class AuthComponent implements OnInit, OnDestroy {
   @Input() redirectUrl!: string;
@@ -23,6 +26,7 @@ export class AuthComponent implements OnInit, OnDestroy {
 
   private readonly toastService = inject(ToastService);
   private readonly router = inject(Router);
+  private readonly paymentBridge = inject(PosPaymentBridgeAbstract);
 
   readonly logo = images.logo;
   readonly authVector = images.login;
@@ -92,33 +96,15 @@ export class AuthComponent implements OnInit, OnDestroy {
   };
 
   ngOnInit() {
-    this.listenAndroidPaymentResultCallback();
+    this.restorePaymentCallback = this.paymentBridge.registerPaymentResultListener(
+      this.injectedPaymentResultHandler,
+    );
   }
 
   ngOnDestroy() {
     this.restorePaymentCallback?.();
   }
 
-  private listenAndroidPaymentResultCallback() {
-    const w = window as any;
-    const previousGlobal = w.onPaymentResult;
-    // Android app can call this function directly via evaluateJavascript.
-    w.onPaymentResult = this.injectedPaymentResultHandler;
-
-    const bridge = w.AndroidPSP;
-    const previousBridge = bridge?.onPaymentResult;
-    if (bridge) {
-      bridge.onPaymentResult = this.injectedPaymentResultHandler;
-    }
-
-    this.restorePaymentCallback = () => {
-      w.onPaymentResult = previousGlobal;
-      if (bridge) {
-        bridge.onPaymentResult = previousBridge;
-      }
-    };
-  }
-
   private handlePaymentResult(result: unknown) {
     const value = typeof result === 'string' ? result : JSON.stringify(result, null, 2);
     this.text.set(value);
@@ -145,6 +131,6 @@ export class AuthComponent implements OnInit, OnDestroy {
   }
 
   mockPaymentResult() {
-    this.injectedPaymentResultHandler(`test-result-${Date.now()}`);
+    this.paymentBridge.emitPaymentResultForTest(`test-result-${Date.now()}`);
   }
 }