From 3c2fe05c30eebf52a5c656f6baafc44346527b94 Mon Sep 17 00:00:00 2001
From: DhaaraniCIT <dhaaranieaswari@gmail.com>
Date: Mon, 11 Nov 2024 13:11:29 +0530
Subject: [PATCH] feat: qbd direct connector setup connector ts changes

---
 ...qbd-direct-setup-connection.component.html |  6 +--
 .../qbd-direct-setup-connection.component.ts  | 42 ++++++++++++++-----
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.html b/src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.html
index fe9d5b6b8..711045cfc 100644
--- a/src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.html
+++ b/src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.html
@@ -42,11 +42,11 @@ <h4 class="tw-text-14-px tw-text-text-secondary tw-font-500">Use this password t
                                 </div>
                                 <div class="tw-flex tw-items-center tw-justify-end">
                                     <div class="tw-pr-10-px">
-                                        <app-svg-icon *ngIf="!isPasswordShown" [svgSource]="'eye-slash-medium'" [width]="'18px'" [height]="'18px'" [isTextColorAllowed]="true" [styleClasses]="'tw-text-icon-muted tw-cursor-pointer'" (iconClick)="showPassword(true)"></app-svg-icon>
-                                        <app-svg-icon *ngIf="isPasswordShown" [svgSource]="'eye-medium'" [width]="'18px'" [height]="'18px'" [isTextColorAllowed]="true" [styleClasses]="'tw-text-icon-muted tw-cursor-pointer'" (iconClick)="showPassword(false)"></app-svg-icon>
+                                        <app-svg-icon *ngIf="!isPasswordShown" [svgSource]="'eye-slash'" [width]="'24px'" [height]="'24px'" [isTextColorAllowed]="true" [styleClasses]="'tw-text-icon-muted tw-cursor-pointer'" (iconClick)="showPassword(true)"></app-svg-icon>
+                                        <app-svg-icon *ngIf="isPasswordShown" [svgSource]="'eye'" [width]="'24px'" [height]="'24px'" [isTextColorAllowed]="true" [styleClasses]="'tw-text-icon-muted tw-cursor-pointer'" (iconClick)="showPassword(false)"></app-svg-icon>
                                     </div>
                                     <div>
-                                        <app-svg-icon [svgSource]="'duplicate'" [width]="'18px'" [height]="'18px'" [isTextColorAllowed]="true" [styleClasses]="'tw-text-icon-muted tw-cursor-pointer'" (iconClick)="onClipboardCopy()"></app-svg-icon>
+                                        <app-svg-icon [svgSource]="'duplicate'" [width]="'22px'" [height]="'22px'" [isTextColorAllowed]="true" [styleClasses]="'tw-text-icon-muted tw-cursor-pointer'" (iconClick)="onClipboardCopy()"></app-svg-icon>
                                     </div>
                                 </div>
                             </div>
diff --git a/src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.ts b/src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.ts
index c9cbb5f79..5643f933f 100644
--- a/src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.ts
+++ b/src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.ts
@@ -1,9 +1,11 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { SharedModule } from 'src/app/shared/shared.module';
 import { CardModule } from 'primeng/card';
 import { ConfigurationCta, QBDConnectionStatus } from 'src/app/core/models/enum/enum.model';
 import { brandingConfig } from 'src/app/branding/branding-config';
+import { checkBoxEmit } from 'src/app/core/models/common/helper.model';
+import { MessageService } from 'primeng/api';
 
 @Component({
   selector: 'app-qbd-direct-setup-connection',
@@ -14,15 +16,19 @@ import { brandingConfig } from 'src/app/branding/branding-config';
 })
 export class QbdDirectSetupConnectionComponent {
 
-  password: string = '098765';
+  @Input({required: true}) password: string = '098765';
 
-  isLoading: boolean;
+  @Input({required: true}) isLoading: boolean;
 
-  connectionStatus: QBDConnectionStatus;
+  @Input({required: true}) connectionStatus: QBDConnectionStatus;
 
-  isStepCompleted: boolean;
+  @Input({required: true}) isStepCompleted: boolean;
 
-  isCTAEnabled: boolean;
+  @Input({required: true}) isCTAEnabled: boolean;
+
+  @Output() doneClick: EventEmitter<checkBoxEmit> = new EventEmitter();
+
+  @Output() nextClick = new EventEmitter();
 
   qbdConnectionStatus = QBDConnectionStatus;
 
@@ -32,19 +38,35 @@ export class QbdDirectSetupConnectionComponent {
 
   readonly brandingConfig = brandingConfig;
 
-  onDoneClick(event: any) {
-    // Emit output
+  constructor(private messageService: MessageService) {}
+
+  onDoneClick(event: checkBoxEmit) {
+    this.doneClick.emit(event);
   }
 
   onNextClick() {
-    // Emit output
+    this.nextClick.emit();
   }
 
   onClipboardCopy() {
-    // Copy password to clipboard
+    const selBox = document.createElement('textarea');
+    selBox.value = this.password;
+    document.body.appendChild(selBox);
+    selBox.select();
+    selBox.click();
+    document.execCommand('copy');
+
+    this.messageService.add({
+      severity: 'success',
+      summary: 'Password copied to clipboard'
+    });
+
+    document.body.removeChild(selBox);
+    event?.stopPropagation();
   }
 
   showPassword(isPasswordVisible: boolean) {
+    this.isPasswordShown = isPasswordVisible;
   }
 
 }