verant_id_cloud_scan 1.4.4-beta.0 → 1.4.4-beta.1

package/VerificationModal.js

@@ -0,0 +1,499 @@
+import { dmvCheck } from './Api.js';
+import { FIELD_MAPPING, getFieldValue as getFieldValueFromMapping, FIELD_LABELS } from './FieldMapping.js';
+import { formatDateToDisplay } from './DateUtils.js';
+
+/**
+ * VerificationModal - DMV Verification Modal Controller
+ *
+ * Creates and manages a modal dialog that prompts users to verify their ID
+ * against DMV records. Handles confirmation, loading, results, and error states.
+ *
+ * @class VerificationModal
+ */
+export class VerificationModal {
+  /**
+   * Creates a new VerificationModal instance
+   * @param {string} clientId - Client ID for DMV verification
+   * @param {string} scannerType - Type of scanner used (e.g., 'DigitalCheck', 'VerantId6S')
+   * @param {Object} licenseData - Barcode data from scanned license
+   * @param {Object} options - Configuration options
+   * @param {string} options.primaryColor - Theme color (default: '#0074CB')
+   * @param {HTMLElement} options.container - Mount point for modal (default: document.body)
+   */
+  constructor(clientId, scannerType, licenseData, options = {}) {
+    this.clientId = clientId;
+    this.scannerType = scannerType;
+    this.licenseData = licenseData;
+    this.primaryColor = options.primaryColor || '#0074CB';
+    this.container = options.container || document.body;
+    this.modalRoot = null;
+    this.resolve = null;
+    this.reject = null;
+
+    // Automatically inject CSS if not already present
+    this.injectCSS();
+  }
+
+  /**
+   * Injects the modal CSS into the document if not already present
+   * @private
+   */
+  injectCSS() {
+    // Check if CSS is already injected
+    if (document.getElementById('verant-dmv-modal-styles')) {
+      return;
+    }
+
+    // Try to load external CSS file first
+    const cssLink = document.createElement('link');
+    cssLink.id = 'verant-dmv-modal-styles';
+    cssLink.rel = 'stylesheet';
+
+    // Try to determine the correct path to the CSS file
+    // First, check if it's in the same directory as this script
+    const scriptPath = new URL(import.meta.url).pathname;
+    const scriptDir = scriptPath.substring(0, scriptPath.lastIndexOf('/'));
+    cssLink.href = scriptDir + '/dmv-modal.css';
+
+    document.head.appendChild(cssLink);
+  }
+
+  /**
+   * Opens the modal and returns a Promise that resolves when user completes/cancels
+   * @returns {Promise<Object>} Result object with status and optional DMV data
+   */
+  async open() {
+    return new Promise((resolve, reject) => {
+      this.resolve = resolve;
+      this.reject = reject;
+      this.render();
+      this.showConfirmation();
+    });
+  }
+
+  /**
+   * Renders the modal structure and attaches event listeners
+   * @private
+   */
+  render() {
+    // Create overlay + modal structure
+    this.modalRoot = document.createElement('div');
+    this.modalRoot.className = 'verant-dmv-overlay';
+    this.modalRoot.innerHTML = `
+      <div class="verant-dmv-modal" role="dialog" aria-modal="true" aria-labelledby="dmv-modal-title">
+        <div class="verant-dmv-header" style="background-color: ${this.primaryColor}">
+          <h3 id="dmv-modal-title">DMV Verification</h3>
+          <button class="verant-dmv-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="verant-dmv-body">
+        </div>
+      </div>
+    `;
+
+    // Close on X button
+    this.modalRoot.querySelector('.verant-dmv-close').addEventListener('click', () => this.cancel());
+
+    // Close on overlay click
+    this.modalRoot.addEventListener('click', (e) => {
+      if (e.target === this.modalRoot) this.cancel();
+    });
+
+    // Keyboard: ESC to close
+    this.handleKeydown = (e) => {
+      if (e.key === 'Escape') this.cancel();
+    };
+    document.addEventListener('keydown', this.handleKeydown);
+
+    this.container.appendChild(this.modalRoot);
+
+    // Focus trap - focus first button
+    setTimeout(() => {
+      const firstButton = this.modalRoot.querySelector('button:not(.verant-dmv-close)');
+      if (firstButton) firstButton.focus();
+    }, 100);
+  }
+
+  /**
+   * Shows the confirmation screen asking user if they want to verify
+   * @private
+   */
+  showConfirmation() {
+    const body = this.modalRoot.querySelector('.verant-dmv-body');
+
+    // Extract all driver data fields using shared field mapping
+    const firstName = getFieldValueFromMapping(this.licenseData, 'first_name') || '';
+    const lastName = getFieldValueFromMapping(this.licenseData, 'last_name') || '';
+    const licenseNumber = getFieldValueFromMapping(this.licenseData, 'license_number') || '';
+    const state = getFieldValueFromMapping(this.licenseData, 'state') || '';
+    const birthDate = formatDateToDisplay(getFieldValueFromMapping(this.licenseData, 'birth_date') || '');
+    const issueDate = formatDateToDisplay(getFieldValueFromMapping(this.licenseData, 'issue_date') || '');
+    const expirationDate = formatDateToDisplay(getFieldValueFromMapping(this.licenseData, 'expiration_date') || '');
+    const address = getFieldValueFromMapping(this.licenseData, 'address_line_1') || '';
+    const city = getFieldValueFromMapping(this.licenseData, 'city') || '';
+    const postalCode = getFieldValueFromMapping(this.licenseData, 'postal_code') || '';
+    const sex = getFieldValueFromMapping(this.licenseData, 'sex_code') || '';
+    const eyeColor = getFieldValueFromMapping(this.licenseData, 'eye_color') || '';
+    const height = getFieldValueFromMapping(this.licenseData, 'height') || '';
+    const weight = getFieldValueFromMapping(this.licenseData, 'weight') || '';
+    const documentCategory = getFieldValueFromMapping(this.licenseData, 'document_category_code') || '';
+
+    // Build the data display in two columns with new styling
+    let dataHTML = '<div class="verant-dmv-results-container">';
+    dataHTML += '<div class="verant-dmv-results-grid">';
+
+    // Left column
+    dataHTML += '<ul class="verant-dmv-fields-column">';
+    if (firstName) {
+      dataHTML += `
+        <li class="verant-dmv-field-item">
+          <div class="verant-dmv-field-label">First Name</div>
+          <div class="verant-dmv-field-value">${firstName}</div>
+        </li>`;
+    }
+    if (lastName) {
+      dataHTML += `
+        <li class="verant-dmv-field-item">
+          <div class="verant-dmv-field-label">Last Name</div>
+          <div class="verant-dmv-field-value">${lastName}</div>
+        </li>`;
+    }
+    if (licenseNumber) {
+      dataHTML += `
+        <li class="verant-dmv-field-item">
+          <div class="verant-dmv-field-label">License Number</div>
+          <div class="verant-dmv-field-value">${licenseNumber}</div>
+        </li>`;
+    }
+    if (state) {
+      dataHTML += `
+        <li class="verant-dmv-field-item">
+          <div class="verant-dmv-field-label">State</div>
+          <div class="verant-dmv-field-value">${state}</div>
+        </li>`;
+    }
+    if (birthDate) {
+      dataHTML += `
+        <li class="verant-dmv-field-item">
+          <div class="verant-dmv-field-label">Date of Birth</div>
+          <div class="verant-dmv-field-value">${birthDate}</div>
+        </li>`;
+    }
+    if (sex) {
+      dataHTML += `
+        <li class="verant-dmv-field-item">
+          <div class="verant-dmv-field-label">Sex</div>
+          <div class="verant-dmv-field-value">${sex}</div>
+        </li>`;
+    }
+    if (eyeColor) {
+      dataHTML += `
+        <li class="verant-dmv-field-item">
+          <div class="verant-dmv-field-label">Eye Color</div>
+          <div class="verant-dmv-field-value">${eyeColor}</div>
+        </li>`;
+    }
+    dataHTML += '</ul>';
+
+    // Right column
+    dataHTML += '<ul class="verant-dmv-fields-column">';
+    if (weight) {
+      dataHTML += `
+        <li class="verant-dmv-field-item">
+          <div class="verant-dmv-field-label">Weight</div>
+          <div class="verant-dmv-field-value">${weight}</div>
+        </li>`;
+    }
+    if (issueDate) {
+      dataHTML += `
+        <li class="verant-dmv-field-item">
+          <div class="verant-dmv-field-label">Issue Date</div>
+          <div class="verant-dmv-field-value">${issueDate}</div>
+        </li>`;
+    }
+    if (expirationDate) {
+      dataHTML += `
+        <li class="verant-dmv-field-item">
+          <div class="verant-dmv-field-label">Expiration Date</div>
+          <div class="verant-dmv-field-value">${expirationDate}</div>
+        </li>`;
+    }
+    if (address) {
+      dataHTML += `
+        <li class="verant-dmv-field-item">
+          <div class="verant-dmv-field-label">Address</div>
+          <div class="verant-dmv-field-value">${address}</div>
+        </li>`;
+    }
+    if (city) {
+      dataHTML += `
+        <li class="verant-dmv-field-item">
+          <div class="verant-dmv-field-label">City</div>
+          <div class="verant-dmv-field-value">${city}</div>
+        </li>`;
+    }
+    if (postalCode) {
+      dataHTML += `
+        <li class="verant-dmv-field-item">
+          <div class="verant-dmv-field-label">Postal Code</div>
+          <div class="verant-dmv-field-value">${postalCode}</div>
+        </li>`;
+    }
+    if (documentCategory) {
+      dataHTML += `
+        <li class="verant-dmv-field-item">
+          <div class="verant-dmv-field-label">Document Type</div>
+          <div class="verant-dmv-field-value">${documentCategory}</div>
+        </li>`;
+    }
+    if (height) {
+      dataHTML += `
+        <li class="verant-dmv-field-item">
+          <div class="verant-dmv-field-label">Height</div>
+          <div class="verant-dmv-field-value">${height}</div>
+        </li>`;
+    }
+    dataHTML += '</ul>';
+
+    dataHTML += '</div>'; // close grid
+    dataHTML += '</div>'; // close container
+
+    body.innerHTML = `
+      <p class="verant-dmv-question">Would you like to perform a DMV Verification for this customer?</p>
+      <div class="verant-dmv-info-box">
+        ${dataHTML}
+      </div>
+      <div class="verant-dmv-actions">
+        <button class="verant-dmv-btn-secondary" id="cancelBtn">Skip</button>
+        <button class="verant-dmv-btn-primary" id="verifyBtn" style="background-color: ${this.primaryColor}">Yes, Verify</button>
+      </div>
+    `;
+
+    body.querySelector('#cancelBtn').addEventListener('click', () => this.cancel());
+    body.querySelector('#verifyBtn').addEventListener('click', () => this.verify());
+  }
+
+  /**
+   * Shows mock DMV results for preview/testing purposes
+   * @private
+   */
+  showMockResults() {
+    // Create mock DMV data with mixed match/mismatch results
+    const mockDmvData = {
+      match_status: true,
+      field_matches: [
+        { first_name: 'true' },
+        { last_name: 'true' },
+        { license_number: 'true' },
+        { birth_date: 'true' },
+        { address_line_1: 'false' },
+        { expiration_date: 'true' },
+        { issue_date: 'true' },
+        { eye_color: 'true' },
+        { sex_code: 'true' },
+        { height: 'false' },
+        { weight: 'true' },
+        { city: 'true' },
+        { state: 'true' },
+        { postal_code: 'false' }
+      ]
+    };
+
+    this.showResults(mockDmvData);
+  }
+
+  /**
+   * Initiates DMV verification process
+   * @private
+   */
+  async verify() {
+    this.showLoading();
+
+    try {
+      const response = await dmvCheck(this.clientId, this.scannerType, this.licenseData);
+
+      if (response && response.data) {
+        this.showResults(response.data);
+      } else if (response && response.status === 'error') {
+        this.showError(response.message || 'DMV verification service returned an error.');
+      } else {
+        this.showError('DMV verification service returned an invalid response.');
+      }
+    } catch (error) {
+      console.error('DMV check error:', error);
+      this.showError(error.message || 'Unable to connect to DMV verification service.');
+    }
+  }
+
+  /**
+   * Shows loading spinner while DMV check is in progress
+   * @private
+   */
+  showLoading() {
+    const body = this.modalRoot.querySelector('.verant-dmv-body');
+    body.innerHTML = `
+      <div class="verant-dmv-loading">
+        <div class="verant-dmv-spinner" style="border-top-color: ${this.primaryColor}"></div>
+        <p>Verification in progress...</p>
+      </div>
+    `;
+  }
+
+  /**
+   * Shows DMV verification results
+   * @private
+   * @param {Object} dmvData - DMV API response data
+   */
+  showResults(dmvData) {
+    const body = this.modalRoot.querySelector('.verant-dmv-body');
+
+    const matchStatus = dmvData.match_status === true || dmvData.match_status === 'true';
+
+    // Build field list in two columns
+    let fieldsHTML = '';
+    if (dmvData.field_matches && Array.isArray(dmvData.field_matches)) {
+      fieldsHTML += '<div class="verant-dmv-results-container">';
+      fieldsHTML += '<div class="verant-dmv-results-grid">';
+
+      // Split fields into two columns
+      const halfLength = Math.ceil(dmvData.field_matches.length / 2);
+
+      // Left column
+      fieldsHTML += '<ul class="verant-dmv-fields-column">';
+      dmvData.field_matches.slice(0, halfLength).forEach(field => {
+        const fieldName = Object.keys(field)[0];
+        const matches = field[fieldName] === 'true' || field[fieldName] === true;
+        const icon = matches ? '✓' : '✗';
+        const label = this.formatFieldLabel(fieldName);
+        const value = this.getFieldValue(fieldName);
+        const className = matches ? 'match' : 'mismatch';
+        fieldsHTML += `
+          <li class="verant-dmv-field-item">
+            <div class="verant-dmv-field-header">
+              <span class="verant-dmv-field-label">${label}</span>
+              <span class="verant-dmv-field-icon ${className}">${icon}</span>
+            </div>
+            <div class="verant-dmv-field-value">${value}</div>
+          </li>`;
+      });
+      fieldsHTML += '</ul>';
+
+      // Right column
+      fieldsHTML += '<ul class="verant-dmv-fields-column">';
+      dmvData.field_matches.slice(halfLength).forEach(field => {
+        const fieldName = Object.keys(field)[0];
+        const matches = field[fieldName] === 'true' || field[fieldName] === true;
+        const icon = matches ? '✓' : '✗';
+        const label = this.formatFieldLabel(fieldName);
+        const value = this.getFieldValue(fieldName);
+        const className = matches ? 'match' : 'mismatch';
+        fieldsHTML += `
+          <li class="verant-dmv-field-item">
+            <div class="verant-dmv-field-header">
+              <span class="verant-dmv-field-label">${label}</span>
+              <span class="verant-dmv-field-icon ${className}">${icon}</span>
+            </div>
+            <div class="verant-dmv-field-value">${value}</div>
+          </li>`;
+      });
+      fieldsHTML += '</ul>';
+
+      fieldsHTML += '</div>'; // close grid
+      fieldsHTML += '</div>'; // close container
+    }
+
+    body.innerHTML = `
+      <div class="verant-dmv-info-box">
+        ${fieldsHTML}
+      </div>
+      <div class="verant-dmv-actions">
+        <button class="verant-dmv-btn-primary" id="doneBtn" style="background-color: ${this.primaryColor}">Done</button>
+      </div>
+    `;
+
+    body.querySelector('#doneBtn').addEventListener('click', () => {
+      this.close({
+        status: 'verified',
+        matchStatus: matchStatus,
+        fieldMatches: dmvData.field_matches,
+        rawResponse: dmvData
+      });
+    });
+  }
+
+  /**
+   * Shows error message
+   * @private
+   * @param {string} message - Error message to display
+   */
+  showError(message) {
+    const body = this.modalRoot.querySelector('.verant-dmv-body');
+    body.innerHTML = `
+      <div class="verant-dmv-result error">
+        <h3>✗ Verification Failed</h3>
+        <p>${message}</p>
+      </div>
+      <div class="verant-dmv-actions">
+        <button class="verant-dmv-btn-primary" id="closeBtn" style="background-color: ${this.primaryColor}">Close</button>
+      </div>
+    `;
+
+    body.querySelector('#closeBtn').addEventListener('click', () => {
+      this.close({ status: 'error', error: message });
+    });
+  }
+
+  /**
+   * Cancels verification (user clicked Skip or closed modal)
+   * @private
+   */
+  cancel() {
+    this.close({ status: 'skipped' });
+  }
+
+  /**
+   * Closes the modal and resolves the promise
+   * @private
+   * @param {Object} result - Result object to return to caller
+   */
+  close(result) {
+    document.removeEventListener('keydown', this.handleKeydown);
+    if (this.modalRoot) {
+      this.modalRoot.remove();
+      this.modalRoot = null;
+    }
+    this.resolve(result);
+  }
+
+  /**
+   * Gets the value of a field from license data
+   * @private
+   * @param {string} fieldName - Field name from API response (e.g., 'first_name', 'last_name')
+   * @returns {string} Field value from license data
+   */
+  getFieldValue(fieldName) {
+    const value = getFieldValueFromMapping(this.licenseData, fieldName);
+
+    if (value === undefined || value === null || value === '') {
+      return 'N/A';
+    }
+
+    let displayValue = String(value).trim();
+
+    // Format date fields to MM/DD/YYYY
+    if (fieldName === 'birth_date' || fieldName === 'expiration_date' || fieldName === 'issue_date') {
+      displayValue = formatDateToDisplay(displayValue);
+    }
+
+    return displayValue;
+  }
+
+  /**
+   * Formats field names for display
+   * @private
+   * @param {string} fieldName - Field name from API response
+   * @returns {string} Formatted label
+   */
+  formatFieldLabel(fieldName) {
+    return FIELD_LABELS[fieldName] || fieldName.replace(/_/g, ' ');
+  }
+}