D1

/**

Copyright (c) 2024 Canadian Imperial Bank of Commerce. All rights reserved.
@constructor
@param {!Object} settings
*/
com.cibc.go.myclient.view.DigitalIdentityVerification = (function($, utilities, global) {
var digitalIdentityVerification = function(settings) {
var self = this;
var mySettings = $.extend(true, {}, settings);
self.mySettings = mySettings;
self.callback = mySettings.callback;
};
function displayMessages(errorMessages) {
$('.error-Panel').remove();
var errorPanelTemplate = com.cibc.go.myclient.soy.view.DigitalIdentityVerification.errorPanel({
errorMessages: errorMessages
});
$('.input-panel').prepend(errorPanelTemplate);
}
function processResponseData(data) {
var resultMessage;
var jsonResult;
var errorMessages = [];
try {
     if(data != null)
         jsonResult = $.parseJSON(/** @type {string} */ (data.result));
 }
 catch(e) {
     resultMessage = data.result;
 }

 if (data.returnCode === "ERROR") {
     if (jsonResult === null) {
         errorMessages.push("Something went wrong. Please try again.");
     }
     else if (data.errorMessages) {
         var stringMessage = '';
         for(var errorMsg in data.errorMessages) {
             errorMessages.push(errorMsg);
         }
     }
     displayMessages(errorMessages);
     jsonResult = [];
 }

 data.jsonResult = jsonResult;
 return data;
content_copy
download
Use code with caution.
}
digitalIdentityVerification.prototype = /**
@lends {com.cibc.go.myclient.view.DigitalIdentityVerification.prototype}
/ ({
/*
Render DIV details of the widget.
*/
renderIn: function ($container) {
var self = this;
var errorMessages = [];
// Get client data from the current page
var client = com.cibc.go.myclient.global.CurrentPage.client;
var clientData = {
firstName: client.get(com.cibc.go.myclient.model.FieldConstants.Client.firstName.id),
lastName: client.get(com.cibc.go.myclient.model.FieldConstants.Client.lastName.id),
dateOfBirth: client.get(com.cibc.go.myclient.model.FieldConstants.Client.dateOfBirth.id),
preferredLanguage: client.get(com.cibc.go.myclient.model.FieldConstants.Client.preferredLanguage.id),
iaCode: client.get(com.cibc.go.myclient.model.FieldConstants.Client.iaCode.id),
emails: []
};
// Fetch email addresses - this would need to be adjusted based on how emails are stored
getClientEmails(clientData.emails);
var html = com.cibc.go.myclient.soy.view.DigitalIdentityVerification.main({
messages: com.cibc.go.myclient.global.Messages.getRaw(),
client: clientData
});
c
o
n
t
a
i
n
e
r
.
h
t
m
l
(
h
t
m
l
)
;
d
i
s
p
l
a
y
M
e
s
s
a
g
e
s
(
e
r
r
o
r
M
e
s
s
a
g
e
s
)
;
s
e
t
u
p
D
I
V
D
e
t
a
i
l
s
(
container.html(html);displayMessages(errorMessages);setupDIVDetails(
container, self);
/**
Get client email addresses
*/
function getClientEmails(emails) {
// This is a placeholder - actual implementation will depend on how emails are stored
// For demo, we'll pull email from the client model
try {
var primaryEmail = client.get(com.cibc.go.myclient.model.FieldConstants.Client.email.id);
if (primaryEmail) {
emails.push({
emailId: primaryEmail,
isPrimary: true
});
}
// Add additional emails if they exist in your data model
 // This is just an example - adjust as needed based on your data structure
 var alternateEmails = client.get("alternateEmails") || [];
 if (Array.isArray(alternateEmails)) {
     alternateEmails.forEach(function(email) {
         emails.push({
             emailId: email,
             isPrimary: false
         });
     });
 }

 // If no emails were found, add a placeholder
 if (emails.length === 0) {
     emails.push({
         emailId: "",
         isPrimary: true
     });
 }
content_copy
download
Use code with caution.
} catch (e) {
console.error("Error getting client emails:", e);
// Add a placeholder email if we couldn't get real data
emails.push({
emailId: "",
isPrimary: true
});
}
}
/**
Setup DIV dialog UI elements and event handlers
*/
function setupDIVDetails($container, self) {
var $initiateButton = $('.buttonPanel .initiate', $container);
var $cancelButton = $('.buttonPanel .cancel', $container);
$('.buttonPanel button').button();
// Handle the email selection logic
var $emailSelect = $('#emailSelect', 
c
o
n
t
a
i
n
e
r
)
;
i
f
(
container);if(
emailSelect.find('option').length <= 1) {
// Only one email option exists, disable the select
$emailSelect.prop('disabled', true);
}
// Initiate button click handler
$initiateButton.click(function() {
var selectedEmail = $emailSelect.val();
var errorMessages = [];
// Validate selected email
 if (!selectedEmail) {
     errorMessages.push(global.Messages.get("msg.DIV.EmailAddress.required"));
     displayMessages(errorMessages);
     return false;
 }

 // Prepare data for DIV request
 var divRequest = {
     firstName: clientData.firstName,
     lastName: clientData.lastName,
     dateOfBirth: clientData.dateOfBirth,
     preferredLanguage: clientData.preferredLanguage,
     iaCode: clientData.iaCode,
     emailId: selectedEmail
 };

 // Make request to DIV service
 // This is a placeholder - implement actual service call
 /* 
 com.cibc.go.myclient.global.RpcUtilities.postJson(
     com.cibc.go.myclient.Constants.Urls.INITIATE_DIV_REQUEST,
     divRequest,
     function(response) {
         if (response.returnCode === 'SUCCESS') {
             $('#DIVDialog').dialog("close");
             // Show success message or navigate to next step
         } else {
             errorMessages.push(response.errorMessage || "Failed to initiate DIV request");
             displayMessages(errorMessages);
         }
     },
     true
 );
 */

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

 return false;
content_copy
download
Use code with caution.
});
// Cancel button handler
$cancelButton.on('click', function() {
$("#dialog-confirm").html(global.Messages.get("DIVDialog.Cancel.Confirmation"));
$("#dialog-confirm").dialog({
width: 300,
height: 125,
modal: true,
title: global.Messages.get("DIVDialog.Cancel"),
buttons: {
"Yes": function() {
$(this).dialog('close');
$('#DIVDialog').dialog("close");
},
"No": function() {
$(this).dialog('close');
}
}
});
return false;
content_copy
download
Use code with caution.
});
}
}
});
return digitalIdentityVerification;
})(jQuery, com.cibc.go.Utilities, com.cibc.go.myclient.global);
/**

Copyright (c) 2024 Canadian Imperial Bank of Commerce. All rights reserved.
*/
/**

This class implements a Digital Identity Verification tool widget.
@constructor
@param {!com.cibc.go.myclient.view.form.widget.WidgetFactory} widgetFactory
@param {!com.cibc.go.myclient.view.form.widget.Container|!jQuery} parent
@param {Object} settings
*/
com.cibc.go.myclient.view.form.widget.DigitalIdentityVerificationTool = (function($, superClass, global, utilities, DigitalIdentityVerification) {
utilities.assertArrayElementsNotNull(arguments);
var divTool = function(widgetFactory, parent, settings) {
var self = this;
var newSettings = $.extend({
trigger: settings.trigger ? settings.trigger : "button",
dialog: self.showDialog
}, settings);
superClass.call(self, widgetFactory, parent, newSettings);
content_copy
download
Use code with caution.
};
/**
@type {com.cibc.go.myclient.view.form.widget.DataPicker}
*/
divTool.superClass_ = superClass.prototype;
/**
Render the widget and append itself to the given container
@override
*/
divTool.prototype.postRender = function() {
var self = this;
divTool.superClass_.postRender.call(this);
};
/**
Show the Digital Identity Verification dialog
*/
divTool.prototype.showDialog = function() {
var self = this;
// Create and show Digital Identity Verification dialog
var bodyWidth = $(window).width();
var title = com.cibc.go.myclient.global.Messages.get('DIVDialog.Title');
var $dialog = $('
').dialog({
width: bodyWidth * 0.80,
height: 400,
modal: true,
open: function(event, ui) {
com.cibc.go.myclient.global.CurrentPage.hideVerticalScroll();
},
close: function(event, ui) {
/* When dialog is closed, destroy it and remove host div to free resource. */
$dialog.dialog("destroy");
$("#DIVDialog").remove();
}
});
/* Create Digital Identity Verification view */
var digitalIdentityVerification = new DigitalIdentityVerification();
/* Render Digital Identity Verification view inside the dialog */
digitalIdentityVerification.renderIn($dialog);
return self;
};
/**
Don't let user edit the client id in text box. User has to user client search dialog.
@override
@param {!Object} event
*/
divTool.prototype.showEditor = function(event) {
var self = this;
// Do nothing.
return self;
};
/**
@override
@param {!Object} event
*/
divTool.prototype.clickEditor = function(event) {
var self = this;
// Do nothing.
return self;
};
return divTool;
})(jQuery, com.cibc.go.myclient.view.form.widget.DataPicker, com.cibc.go.myclient.global, com.cibc.go.Utilities, com.cibc.go.myclient.view.DigitalIdentityVerification);
/**

Copyright (c) 2024 Canadian Imperial Bank of Commerce. All rights reserved.
*/
{namespace com.cibc.go.myclient.soy.view.DigitalIdentityVerification}

/**

Generate Digital Identity Verification dialog content
@param messages The I18N messages
@param client Client information
*/
{template .main}
  

    

      

        

          {$messages['DIVDialog.Description']}
        

      

        
{$messages['DIVDialog.FirstName']}: 
        
{$client.firstName}
        
{$messages['DIVDialog.LastName']}: 
        
{$client.lastName}
      
      

        
{$messages['DIVDialog.DateOfBirth']}: 
        
{$client.dateOfBirth}
        
{$messages['DIVDialog.PreferredLanguage']}: 
        
{$client.preferredLanguage}
      
      

        
{$messages['DIVDialog.IACode']}: 
        
{$client.iaCode}
        
{$messages['DIVDialog.EmailAddress']}: 
        

          
            {if length($client.emails) > 0}
              {foreach $email in $client.emails}
                {$email.emailId}
              {/foreach}
            {else}
              No email available
            {/if}
          
        
      
    
  

  

    {$messages['DIVDialog.Initiate']}
    {$messages['DIVDialog.Cancel']}
  

  


content_copy
download
Use code with caution.
  
{/template}
/**

Generate error message
@param errorMessages list
*/
{template .errorPanel}
  

    {if $errorMessages}
      
        {foreach $errorMessage in $errorMessages}
          
        {/foreach}
      

            

              {$errorMessage}
            
          
    {/if}
  
{/template}
Thanks for sharing those screenshots! Now I understand - you've already started implementing this feature with the button defined in Templates.js, and the handler function named "handleStartDIVClick" in the Client.Handlers namespace.

Let's focus on fixing your existing implementation. I'll help create proper implementations for all three files to match the application's style and fix any issues in your current code.

Let's start with the core files:

First, the DigitalIdentityVerificationView.js file - this will handle the popup and its functionality:​​​​​​​​​​​​​​​​
Next, the DigitalIdentityVerificationTool.js file - this will handle the tool/widget that triggers the popup:​​​​​​​​​​​​​​​​
Finally, the DigitalIdentityVerificationView.soy file - this contains the HTML templates:​​​​​​​​​​​​​​​​
Now, let's add the handler function that connects to the button in Templates.js:​​​​​​​​​​​​​​​​
Integration Instructions
Now that we have all the necessary files created, let's go over what you need to do to integrate this properly:

Add Message Keys:
You'll need to add the following message keys to your messages.properties file:
DIVDialog.Title=Digital Identity Verification
DIVDialog.Description=Please review the client information and select an email address to initiate digital identity verification.
DIVDialog.FirstName=Legal First Name
DIVDialog.LastName=Legal Last Name
DIVDialog.DateOfBirth=Date of Birth
DIVDialog.PreferredLanguage=Preferred Language
DIVDialog.IACode=Investment Advisor Code
DIVDialog.EmailAddress=Email Address
DIVDialog.Initiate=Initiate Verification
DIVDialog.Cancel=Cancel
DIVDialog.Cancel.Confirmation=Are you sure you want to cancel?
msg.DIV.EmailAddress.required=Please select an email address.
content_copy
download
Use code with caution.
File Placement:
Place DigitalIdentityVerificationView.js in the same directory as InvestmentAdvisorUpdate.js
Place DigitalIdentityVerificationTool.js in the same directory as InvestmentAdvisorUpdateTool.js
Place DigitalIdentityVerificationView.soy in the same directory as InvestmentAdvisorUpdate.soy
Include Scripts:
Make sure to include these scripts in your HTML, in the right order:


content_copy
download
Use code with caution.
Html
Check Client Model:
The implementation assumes certain field names in the client model; you may need to adjust the field paths based on your actual data structure.
Pay special attention to the email retrieval logic, which will need to match how emails are stored in your system.
Testing:
After integration, test the flow by clicking the "Start Digital ID Verification" button
Verify that client information is displayed correctly
Test the email selection functionality with clients that have multiple email addresses
Verify that both the Initiate and Cancel buttons work as expected
Let me know if you encounter any issues with the implementation, and I'd be happy to help troubleshoot!​​​​​​​​​​​​​​​​

How is this implementation? Find any issues?