feat(clients): dual-OTP contact-change verification, webcam signature capture, and client history tab

Frontend counterpart to the backend dual-OTP contact-change feature: - New ContactOtpBlockComponent (6-box segmented OTP input) used up to 4x in Edit Client (old/new mobile, old/new email — grouped under per-field sub-headers) and once each for mobile/email in Create Client, gating Save/Save & Next until every required box is verified. - edit-client.component.ts: detects mobile/email/DOB changes against the loaded snapshot using local-date comparison (not `.toISOString()`, which false-triggers a day-shift in positive-UTC-offset timezones) and trimmed/case-insensitive email comparison (autofill whitespace or re-typed casing no longer reads as a change the masked preview can't explain). - client-kyc-step.component.ts: new `invalidFieldLabels` getter names every currently-invalid required KYC field, surfaced via the Save & Next tooltip in both create-client and edit-client so a greyed-out button always explains what's still missing instead of a generic message. - CaptureImageDialogComponent generalized for both profile photo and signature (photograph-a-paper-signature) capture: - Frame aspect now matches the requested getUserMedia resolution (4:3 profile / 16:9 signature) with object-fit: cover, eliminating the pillarboxing (black bars) a mismatched box previously caused. - Suppresses Chromium's auto-injected PiP/cast corner overlay icons. - Frame height capped in vh (not just px) so the dialog fits short viewports instead of pushing Cancel/Upload below the fold. - upload-document-dialog.component.ts: generic Documents-tab upload now also offers "Capture from Webcam" alongside Browse, reusing the same capture dialog. - New client History tab (reuses the existing Audit Trail data, scoped to this client) and dataUrlToFile/dataUrlToBlob util for routing webcam captures through the same upload pipelines as a picked file. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-26 14:51:04 +05:30
parent d334dd1669
commit 733d9d22b2
30 changed files with 1803 additions and 43 deletions
@@ -10,6 +10,7 @@
 import { Component, QueryList, ViewChild, ViewChildren, inject } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Observable, of } from 'rxjs';
 import { map } from 'rxjs/operators';

@@ -28,6 +29,7 @@ import { ClientDatatableStepComponent } from '../client-stepper/client-datatable
 import { ClientKycStepComponent } from '../client-stepper/client-kyc-step/client-kyc-step.component';
 import { ClientPreviewStepComponent } from '../client-stepper/client-preview-step/client-preview-step.component';
 import { ClientFamilyMembersStepComponent } from '../client-stepper/client-family-members-step/client-family-members-step.component';
+import { ContactOtpBlockComponent, ContactOtpState } from './contact-otp-block/contact-otp-block.component';

 import { MatTabsModule } from '@angular/material/tabs';
 import { MatIconModule } from '@angular/material/icon';
@@ -59,7 +61,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
    ClientDatatableStepComponent,
    ClientKycStepComponent,
    ClientPreviewStepComponent,
-    ClientFamilyMembersStepComponent
+    ClientFamilyMembersStepComponent,
+    ContactOtpBlockComponent
  ]
 })
 export class EditClientComponent {
@@ -68,6 +71,7 @@ export class EditClientComponent {
  private dialog = inject(MatDialog);
  private clientsService = inject(ClientsService);
  private settingsService = inject(SettingsService);
+  private snackBar = inject(MatSnackBar);

  @ViewChild(ClientGeneralStepComponent) clientGeneralStep: ClientGeneralStepComponent;
  @ViewChild('clientAddress') clientAddressStep: ClientAddressStepComponent;
@@ -88,6 +92,26 @@ export class EditClientComponent {
  /** Flag: DOB was changed — requires re-KYC (PAN re-verification) */
  dobChanged = false;

+  /**
+   * Dual-OTP contact-change verification state (mobileNo / emailAddress). Mirrors the
+   * name/DOB "detect change against snapshot, gate the save" pattern already established
+   * in this component (see `detectSensitiveFieldChanges()` / `flagReKycRequired()`) —
+   * extended here so a changed mobile/email must be OTP-verified on BOTH the old and new
+   * destination before Save is allowed. Payload param names sent to the backend PUT are
+   * `mobileOldOtpId` / `mobileNewOtpId` / `emailOldOtpId` / `emailNewOtpId` (added onto
+   * `clientData` in `saveCurrentTab()`'s General-tab branch) — kept per-field rather than
+   * one generic old/new pair so mobile AND email can both be changed (and independently
+   * OTP-verified) in a single save.
+   */
+  oldMobileOtpId: number | null = null;
+  newMobileOtpId: number | null = null;
+  oldMobileVerified = false;
+  newMobileVerified = false;
+  oldEmailOtpId: number | null = null;
+  newEmailOtpId: number | null = null;
+  oldEmailVerified = false;
+  newEmailVerified = false;
+
  /** Client data and template (merged object from resolver) */
  clientDataAndTemplate: any;
  /** Client ID */
@@ -168,6 +192,61 @@ export class EditClientComponent {
    return { ...general };
  }

+  /**
+   * Live view of `detectSensitiveFieldChanges()` against the loaded snapshot — drives the
+   * "Verify Contact Change" OTP panel in the General tab template. Re-evaluated on every
+   * change-detection pass (cheap: a handful of form-control reads), so the panel appears/
+   * disappears as the user types, same as the existing re-KYC name/DOB detection.
+   */
+  get contactChanges() {
+    return this.detectSensitiveFieldChanges(this.clientDataAndTemplate);
+  }
+
+  /** Whether every OTP block required by the fields that actually changed has been verified. */
+  get contactVerificationComplete(): boolean {
+    const changes = this.contactChanges;
+    if (changes.mobileChanged && !(this.oldMobileVerified && this.newMobileVerified)) {
+      return false;
+    }
+    if (changes.emailChanged && !(this.oldEmailVerified && this.newEmailVerified)) {
+      return false;
+    }
+    return true;
+  }
+
+  onOldMobileOtpState(state: ContactOtpState): void {
+    this.oldMobileOtpId = state.otpId;
+    this.oldMobileVerified = state.verified;
+  }
+
+  onNewMobileOtpState(state: ContactOtpState): void {
+    this.newMobileOtpId = state.otpId;
+    this.newMobileVerified = state.verified;
+  }
+
+  onOldEmailOtpState(state: ContactOtpState): void {
+    this.oldEmailOtpId = state.otpId;
+    this.oldEmailVerified = state.verified;
+  }
+
+  onNewEmailOtpState(state: ContactOtpState): void {
+    this.newEmailOtpId = state.otpId;
+    this.newEmailVerified = state.verified;
+  }
+
+  /** Reset all dual-OTP state — called once a General-tab save succeeds (the snapshot is
+   * updated to match, so the "Verify Contact Change" panel naturally disappears too). */
+  private resetContactVerificationState(): void {
+    this.oldMobileOtpId = null;
+    this.newMobileOtpId = null;
+    this.oldMobileVerified = false;
+    this.newMobileVerified = false;
+    this.oldEmailOtpId = null;
+    this.newEmailOtpId = null;
+    this.oldEmailVerified = false;
+    this.newEmailVerified = false;
+  }
+
  areFormvalids(): boolean {
    if (!this.clientGeneralStep || !this.clientGeneralForm) {
      return false;
@@ -196,7 +275,10 @@ export class EditClientComponent {
    if (idx === 0) {
      if (!this.clientGeneralStep || !this.clientGeneralForm) return false;
      if (this.clientGeneralStep.sanctionsBlocked) return false;
-      return this.clientGeneralForm.valid;
+      if (!this.clientGeneralForm.valid) return false;
+      // Dual-OTP gate: a changed mobile/email must be verified on both old & new
+      // destinations before Save is allowed — mirrors the re-KYC gate below it.
+      return this.contactVerificationComplete;
    }
    if (idx === 1) {
      const kf = this.clientKycStep?.kycForm;
@@ -227,6 +309,15 @@ export class EditClientComponent {
    if (this.selectedTabIndex === 0 && this.clientGeneralStep?.sanctionsBlocked) {
      return 'Client failed sanctions screening — cannot proceed.';
    }
+    if (this.selectedTabIndex === 0 && this.clientGeneralForm?.valid && !this.contactVerificationComplete) {
+      return 'Verify the OTP sent to both the old and new mobile number/email before saving.';
+    }
+    if (this.selectedTabIndex === 1) {
+      const labels = this.clientKycStep?.invalidFieldLabels || [];
+      if (labels.length) {
+        return `Please fill/correct: ${labels.join(', ')}.`;
+      }
+    }
    return 'Please fill all mandatory fields on this tab to continue.';
  }

@@ -272,6 +363,16 @@ export class EditClientComponent {
    // Check if name or DOB changed on the General tab — warn about re-KYC
    if (this.selectedTabIndex === 0) {
      const changes = this.detectSensitiveFieldChanges(this.clientDataAndTemplate);
+
+      // Dual-OTP gate — defensive re-check. The "Save & Next" button is already disabled
+      // via `currentStepValid` while this is incomplete, but don't rely on that alone.
+      if (!this.contactVerificationComplete) {
+        this.snackBar.open('Verify the OTP sent to both the old and new mobile number/email before saving.', 'Close', {
+          duration: 5000
+        });
+        return;
+      }
+
      if (changes.nameChanged || changes.dobChanged) {
        heading = 'Re-KYC Required';
        dialogContext =
@@ -308,6 +409,19 @@ export class EditClientComponent {
      const originalData = this.clientDataAndTemplate;
      const changedFields = this.detectSensitiveFieldChanges(originalData);

+      // Dual-OTP verified ids — sent only for the field(s) that actually changed, per-field
+      // (not a single generic old/new pair) so the backend can tell mobile's OTPs apart from
+      // email's when BOTH changed in the same save. See the class-level JSDoc above the OTP
+      // state fields for the full naming rationale.
+      if (changedFields.mobileChanged) {
+        clientData.mobileOldOtpId = this.oldMobileOtpId;
+        clientData.mobileNewOtpId = this.newMobileOtpId;
+      }
+      if (changedFields.emailChanged) {
+        clientData.emailOldOtpId = this.oldEmailOtpId;
+        clientData.emailNewOtpId = this.newEmailOtpId;
+      }
+
      this.savingClient = true;
      this.clientsService.updateClient(this.clientId, clientData).subscribe({
        next: () => {
@@ -342,6 +456,14 @@ export class EditClientComponent {
            originalData.fullname = form?.get('fullname')?.value ?? originalData.fullname;
          }

+          // Notification is backend-driven (SMS + Email) — just reassure staff it happened.
+          if (changedFields.mobileChanged || changedFields.emailChanged) {
+            this.snackBar.open('Customer notified via SMS/Email of the contact change.', 'Close', {
+              duration: 4000
+            });
+          }
+          this.resetContactVerificationState();
+
          this.selectedTabIndex = this.selectedTabIndex + 1;
        },
        error: () => {
@@ -430,12 +552,14 @@ export class EditClientComponent {
      return;
    }

-    // Address tab
+    // Address tab — no OTP gate (an address has no "old/new channel" to verify an OTP
+    // against); notification-only, per the plan. Save proceeds normally.
    const addressTabIdx = this.legalFormType === 2 ? 3 : 2;
    if (tabIndex === addressTabIdx) {
      this.savingClient = true;
      if (this.clientIndiaAddressStep?.hasAddressData) {
        this.saveClientAddresses(this.clientId);
+        this.snackBar.open('Customer notified via SMS/Email of the address change.', 'Close', { duration: 4000 });
      }
      this.savingClient = false;
      this.tabEditMode[tabIndex] = false;
@@ -465,20 +589,41 @@ export class EditClientComponent {
  /**
   * Compare current form values with original data to detect changes in name, DOB, mobile, email.
   */
+  /** "YYYY-MM-DD" built from a Date's LOCAL components — see the timezone-safety note where
+   * this is called from `detectSensitiveFieldChanges()`. */
+  private toLocalDateString(date: Date): string {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  }
+
  private detectSensitiveFieldChanges(originalData: any) {
    const form = this.clientGeneralForm;
-    const newMobile = form?.get('mobileNo')?.value || '';
-    const newEmail = form?.get('emailAddress')?.value || '';
+    // Trimmed so browser autofill adding invisible leading/trailing whitespace never reads as
+    // a "change" — the masked preview shown in the Verify Contact Change panel only reveals the
+    // first couple of characters, so a whitespace-only difference is otherwise invisible to the
+    // user and just looks like the panel appeared for no reason. These trimmed-but-original-case
+    // values are what get returned/sent as the actual OTP destination and saved value — only the
+    // *comparison* (below) is further case-normalized for email, so we never silently rewrite the
+    // customer's email casing into the saved record or the OTP destination.
+    const newMobile = (form?.get('mobileNo')?.value || '').trim();
+    const newEmail = (form?.get('emailAddress')?.value || '').trim();
    const newDobRaw = form?.get('dateOfBirth')?.value;
-    const newDob = newDobRaw instanceof Date ? newDobRaw.toISOString().split('T')[0] : newDobRaw || '';
+    // Local calendar date, NOT `.toISOString()` — that converts to UTC first, which silently
+    // shifts the date by a day in any positive-UTC-offset timezone (e.g. India, UTC+5:30:
+    // midnight local on the 15th becomes 18:30 UTC on the 14th). That made this comparison
+    // report a DOB "change" — falsely triggering the Re-KYC dialog — even when the user never
+    // touched the date field, purely because the Date object round-tripped through the picker.
+    const newDob = newDobRaw instanceof Date ? this.toLocalDateString(newDobRaw) : newDobRaw || '';

-    const oldMobile = originalData.mobileNo || '';
-    const oldEmail = originalData.emailAddress || '';
+    const oldMobile = (originalData.mobileNo || '').trim();
+    const oldEmail = (originalData.emailAddress || '').trim();
    const oldDobRaw = originalData.dateOfBirth;
    const oldDob = Array.isArray(oldDobRaw)
      ? `${oldDobRaw[0]}-${String(oldDobRaw[1]).padStart(2, '0')}-${String(oldDobRaw[2]).padStart(2, '0')}`
      : oldDobRaw instanceof Date
-        ? oldDobRaw.toISOString().split('T')[0]
+        ? this.toLocalDateString(oldDobRaw)
        : oldDobRaw || '';

    const buildName = (parts: { firstname?: string; middlename?: string; lastname?: string; fullname?: string }) =>
@@ -509,7 +654,9 @@ export class EditClientComponent {
    return {
      nameChanged: newName !== oldName,
      mobileChanged: newMobile !== oldMobile,
-      emailChanged: newEmail !== oldEmail,
+      // Case-insensitive: emails are not case-sensitive in practice, and comparing raw case
+      // would flag a change (surfacing the dual-OTP panel) even when nothing meaningful changed.
+      emailChanged: newEmail.toLowerCase() !== oldEmail.toLowerCase(),
      dobChanged: newDob !== oldDob,
      oldName,
      newName,