D2

/** * @fileoverview View component responsible for rendering the content * and handling interactions within the Digital Identity Verification dialog. * @namespace com.cibc.go.myclient.view */ com.cibc.go.myclient.view.DigitalIdentityVerificationView = (function($, global, utilities) { 'use strict'; // Ensure core dependencies are present utilities.assertArrayElementsNotNull(arguments); // Pre-fetch the Soy template function (improves performance slightly) // Ensure the namespace matches the one defined in your .soy file var soyTemplate = com.cibc.go.myclient.soy.view.DigitalIdentityVerificationView.main; /** * Constructor for DigitalIdentityVerificationView. * @param {Object=} settings Optional settings passed during instantiation. * Could include specific client data if needed, but typically * we'll fetch from the global client model. * @constructor */ var DigitalIdentityVerificationView = function(settings) { var self = this; self.settings = $.extend({}, settings); // Store settings if any are passed self.clientModel = global.CurrentPage.client; // Get reference to the main client model self.errorMessages = []; // Initialize array for potential errors }; /** * Renders the view's content into the provided container element (the dialog's content area). * @param {jQuery} container The jQuery object representing the container element. */ DigitalIdentityVerificationView.prototype.renderIn = function(container) { var self = this; var clientDataForSoy = null; self.errorMessages = []; // Clear previous errors if (!self.clientModel) { self.errorMessages.push(global.Messages.get('div.error.noClientData') || 'Client data is not available.'); // Render just the error message and buttons container.html(soyTemplate({ messages: global.Messages, // Pass the global messages object errorMessages: self.errorMessages })); } else { // --- Prepare data for the Soy template --- // TODO: Verify exact attribute names on self.clientModel via debugging! clientDataForSoy = { iaCode: self.clientModel.get('iaCode'), // Example: Assume 'iaCode' exists firstName: self.clientModel.get('firstName'), lastName: self.clientModel.get('lastName'), dateOfBirth: self.clientModel.get('dateOfBirth'), // TODO: Check format needed by Soy language: self.clientModel.get('preferredLanguage'), // Example: Assume 'preferredLanguage' emails: self.clientModel.get('emails') // TODO: Check structure (array of strings? objects?) }; // Basic check if required data is missing (can be expanded) if (!clientDataForSoy.emails || clientDataForSoy.emails.length === 0) { self.errorMessages.push(global.Messages.get('div.no.email.available') || 'No email address available.'); // Optionally, you might still render the other details even if email is missing } // Render the full template container.html(soyTemplate({ messages: global.Messages, clientData: clientDataForSoy, errorMessages: self.errorMessages })); } // Make the rendered content interactive self.setupUIDetails(container, self); return self; }; /** * Sets up event handlers (click listeners) for elements within the rendered view. * @param {jQuery} container The jQuery object representing the container element. * @param {DigitalIdentityVerificationView} self Reference to the view instance. */ DigitalIdentityVerificationView.prototype.setupUIDetails = function(container, self) { var dialogId = '#DigitalIdentityVerificationDialog'; // ID of the dialog container // --- Cancel Button Handler --- container.find('#div-cancel-button').on('click', function(e) { e.preventDefault(); // Prevent default button action $(dialogId).dialog('close'); // Find the dialog and close it }); // --- Initiate Button Handler --- container.find('#div-initiate-button').on('click', function(e) { e.preventDefault(); var $button = $(this); // Reference to the button clicked var selectedEmail = null; self.errorMessages = []; // Clear previous errors // Disable button to prevent double-clicks while processing $button.prop('disabled', true); // --- Get Selected Email --- var $emailRadios = container.find('input[name="divEmailSelection"]'); if ($emailRadios.length > 1) { // Multiple e

Apr 4, 2025 - 08:23


/**
 * @fileoverview View component responsible for rendering the content
 *               and handling interactions within the Digital Identity Verification dialog.
 * @namespace com.cibc.go.myclient.view
 */
com.cibc.go.myclient.view.DigitalIdentityVerificationView = (function($, global, utilities) {
    'use strict';

    // Ensure core dependencies are present
    utilities.assertArrayElementsNotNull(arguments);

    // Pre-fetch the Soy template function (improves performance slightly)
    // Ensure the namespace matches the one defined in your .soy file
    var soyTemplate = com.cibc.go.myclient.soy.view.DigitalIdentityVerificationView.main;

    /**
     * Constructor for DigitalIdentityVerificationView.
     * @param {Object=} settings Optional settings passed during instantiation.
     *                           Could include specific client data if needed, but typically
     *                           we'll fetch from the global client model.
     * @constructor
     */
    var DigitalIdentityVerificationView = function(settings) {
        var self = this;
        self.settings = $.extend({}, settings); // Store settings if any are passed
        self.clientModel = global.CurrentPage.client; // Get reference to the main client model
        self.errorMessages = []; // Initialize array for potential errors
    };

    /**
     * Renders the view's content into the provided container element (the dialog's content area).
     * @param {jQuery} container The jQuery object representing the container element.
     */
    DigitalIdentityVerificationView.prototype.renderIn = function(container) {
        var self = this;
        var clientDataForSoy = null;
        self.errorMessages = []; // Clear previous errors

        if (!self.clientModel) {
            self.errorMessages.push(global.Messages.get('div.error.noClientData') || 'Client data is not available.');
            // Render just the error message and buttons
            container.html(soyTemplate({
                messages: global.Messages, // Pass the global messages object
                errorMessages: self.errorMessages
            }));
        } else {
            // --- Prepare data for the Soy template ---
            // **TODO**: Verify exact attribute names on self.clientModel via debugging!
            clientDataForSoy = {
                iaCode: self.clientModel.get('iaCode'), // Example: Assume 'iaCode' exists
                firstName: self.clientModel.get('firstName'),
                lastName: self.clientModel.get('lastName'),
                dateOfBirth: self.clientModel.get('dateOfBirth'), // **TODO**: Check format needed by Soy
                language: self.clientModel.get('preferredLanguage'), // Example: Assume 'preferredLanguage'
                emails: self.clientModel.get('emails') // **TODO**: Check structure (array of strings? objects?)
            };

            // Basic check if required data is missing (can be expanded)
            if (!clientDataForSoy.emails || clientDataForSoy.emails.length === 0) {
                 self.errorMessages.push(global.Messages.get('div.no.email.available') || 'No email address available.');
                 // Optionally, you might still render the other details even if email is missing
            }

            // Render the full template
            container.html(soyTemplate({
                messages: global.Messages,
                clientData: clientDataForSoy,
                errorMessages: self.errorMessages
            }));
        }

        // Make the rendered content interactive
        self.setupUIDetails(container, self);

        return self;
    };

    /**
     * Sets up event handlers (click listeners) for elements within the rendered view.
     * @param {jQuery} container The jQuery object representing the container element.
     * @param {DigitalIdentityVerificationView} self Reference to the view instance.
     */
    DigitalIdentityVerificationView.prototype.setupUIDetails = function(container, self) {
        var dialogId = '#DigitalIdentityVerificationDialog'; // ID of the dialog container

        // --- Cancel Button Handler ---
        container.find('#div-cancel-button').on('click', function(e) {
            e.preventDefault(); // Prevent default button action
            $(dialogId).dialog('close'); // Find the dialog and close it
        });

        // --- Initiate Button Handler ---
        container.find('#div-initiate-button').on('click', function(e) {
            e.preventDefault();
            var $button = $(this); // Reference to the button clicked
            var selectedEmail = null;
            self.errorMessages = []; // Clear previous errors

            // Disable button to prevent double-clicks while processing
            $button.prop('disabled', true);

            // --- Get Selected Email ---
            var $emailRadios = container.find('input[name="divEmailSelection"]');
            if ($emailRadios.length > 1) { // Multiple emails presented as radios
                 var $checkedRadio = $emailRadios.filter(':checked');
                 if ($checkedRadio.length === 0) {
                     self.errorMessages.push(global.Messages.get('div.error.emailRequired') || 'Please select an email address.');
                 } else {
                     selectedEmail = $checkedRadio.val();
                 }
            } else if ($emailRadios.length === 1) { // Single email (might be hidden input or just displayed)
                 selectedEmail = $emailRadios.val(); // Get value from the single input (likely hidden)
            }
            // If emails were missing entirely, selectedEmail remains null

            if (!selectedEmail && ($emailRadios.length > 0 || (self.clientModel && self.clientModel.get('emails') && self.clientModel.get('emails').length > 0))) {
                 // If radios/input were present but nothing selected OR if emails exist but somehow no input was found
                 if (self.errorMessages.length === 0) { // Avoid duplicate message
                    self.errorMessages.push(global.Messages.get('div.error.emailRequired') || 'Please select an email address.');
                 }
            }

            // --- Display Errors or Proceed ---
            if (self.errorMessages.length > 0) {
                // Re-render the error portion of the template
                // Find the error panel within the current container and update it
                var errorPanelHtml = com.cibc.go.myclient.soy.view.DigitalIdentityVerificationView.main(
                     { errorMessages: self.errorMessages, messages: global.Messages }, null).content;
                // A bit crude: Extract just the error panel part if Soy doesn't support sub-templates easily,
                // or ideally, call a specific .errorPanel template if one exists.
                // For now, just re-render the whole thing to show errors (simpler):
                 self.renderIn(container); // Re-render to show errors (loses other input state if any)

                // Re-enable button after showing error
                 container.find('#div-initiate-button').prop('disabled', false); // Use container.find as $button might be stale after re-render
                return; // Stop processing
            }

            // --- Gather Data for Backend (Frontend Only: Log for now) ---
            // **TODO**: Verify exact attribute names needed by the (future) backend API
            var initiationData = {
                clientId: self.clientModel.get('clientId'), // **TODO**: Confirm attribute name
                sin: self.clientModel.get('sin'),           // **TODO**: Confirm attribute name
                firstName: self.clientModel.get('firstName'),
                lastName: self.clientModel.get('lastName'),
                selectedEmail: selectedEmail,
                iaCode: self.clientModel.get('iaCode')     // **TODO**: Confirm attribute name
                // Add any other required fields...
            };

            // --- Placeholder for actual API call ---
             alert("Frontend Only: \nInitiate DIV with data:\n" + JSON.stringify(initiationData, null, 2));
             // In real implementation:
             // com.cibc.go.Utilities.post(
             //    global.Urls.get('div.initiation.url'), // **TODO**: Define this URL key
             //    initiationData,
             //    function(response) { // Success callback
             //        // Handle success - maybe show confirmation, close dialog
             //        $(dialogId).dialog('close');
             //    },
             //    function(error) { // Error callback
             //        // Handle error - display error message using Utilities.error or re-render
             //        self.errorMessages.push(global.Messages.get('div.error.apiError') || 'An error occurred.');
             //        self.renderIn(container); // Re-render to show API error
             //        container.find('#div-initiate-button').prop('disabled', false); // Re-enable button
             //    }
             // );

             // For now, just close the dialog on "success"
             $(dialogId).dialog('close');

        }); // End Initiate Button Handler
    }; // End setupUIDetails

    // Return the constructor function
    return DigitalIdentityVerificationView;

})(jQuery, com.cibc.go.myclient.global, com.cibc.go.Utilities); // Pass dependencies