{"id":105677,"date":"2025-04-12T08:14:33","date_gmt":"2025-04-12T03:44:33","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/p1-50ko\/"},"modified":"2025-04-12T08:14:33","modified_gmt":"2025-04-12T03:44:33","slug":"p1-50ko","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/p1-50ko\/","title":{"rendered":"P1"},"content":{"rendered":"
\n
\n\/**\n * Tool widget to trigger the UI popup for Digital Identity Verification.\n *\/\ncom.cibc.go.myclient.view.form.widget.DigitalIdentityVerificationTool = (function($, superClass, global, utilities, DigitalIdentityVerificationView) {\n    utilities.assertArrayElementsNotNull(arguments);\n\n    \/**\n     * Constructor for DigitalIdentityVerificationTool.\n     * @param {com.cibc.go.myclient.view.form.widget.WidgetFactory} widgetFactory The factory instance.\n     * @param {com.cibc.go.myclient.view.form.widget.Container|jQuery} parent The parent container.\n     * @param {Object} settings widget configuration settings.\n     * @constructor\n     * @extends com.cibc.go.myclient.view.form.widget.DataPicker\n     *\/\n    var DivTool = function(widgetFactory, parent, settings) {\n        var self = this;\n        var newSettings = $.extend({\n            trigger: settings.trigger ? settings.trigger : \"button\",\n            dialog: self.showDialog\n        }, settings);\n\n        superClass.call(self, widgetFactory, parent, newSettings);\n        self.widgetFactory = widgetFactory;\n        self.settings = newSettings;\n    };\n\n    utilities.inherits(DivTool, superClass);\n\n    \/**\n     * Shows the Digital Identity Verification dialog\n     * @returns {DivTool} this instance for chaining\n     *\/\n    DivTool.prototype.showDialog = function() {\n        var self = this;\n        var dialogId = 'DigitalIdentityVerificationDialog';\n\n        \/\/ Check if dialog already exists\n        if ($('#' + dialogId).length > 0) {\n            return self;\n        }\n\n        var title = global.Messages.get('DIV.Dialog.Title', 'Digital Identity Verification');\n        var $dialog = $(\"<div id='\" + dialogId + \"' title=\"\" + title + \"\"><\/div>\");\n\n        $dialog.dialog({\n            modal: true,\n            width: $(window).width() * 0.7,\n            minHeight: 250,\n            resizable: false,\n            open: function(event, ui) {\n                $(this).html(\"<p>Loading...<\/p>\"); \/\/ simple placeholder\n\n                \/\/ Create the view and render it\n                var view = new DigitalIdentityVerificationView({});\n                view.renderIn($(this));\n\n                $(this).closest('.ui-dialog').addClass('div-dialog-wrapper');\n            },\n            close: function(event, ui) {\n                $(this).dialog(\"destroy\");\n                $(this).remove();\n            }\n        });\n\n        return self;\n    };\n\n    \/**\n     * Overridden method from superclass - shows the editor\n     * @param {Event} event The triggering event\n     * @returns {DivTool} this instance for chaining\n     *\/\n    DivTool.prototype.showEditor = function(event) {\n        this.showDialog();\n        return this;\n    };\n\n    \/**\n     * Overridden method from superclass - handles click on editor\n     * @param {Event} event The click event\n     * @returns {DivTool} this instance for chaining\n     *\/\n    DivTool.prototype.clickEditor = function(event) {\n        this.showDialog();\n        return this;\n    };\n\n    return DivTool;\n})(jQuery, \n   com.cibc.go.myclient.view.form.widget.DataPicker, \n   com.cibc.go.myclient.global, \n   com.cibc.go.Utilities, \n   com.cibc.go.myclient.view.DigitalIdentityVerificationView);\n\n\n\/**\n * View component responsible for rendering the content and handling interactions \n * within the Digital Identity Verification dialog.\n *\/\ncom.cibc.go.myclient.view.DigitalIdentityVerificationView = (function($, global, utilities) {\n    utilities.assertArrayElementsNotNull(arguments);\n\n    var soyTemplate = com.cibc.go.myclient.soy.view.DigitalIdentityVerificationView.main;\n\n    \/**\n     * Constructor for the Digital Identity Verification View\n     * @param {Object} settings Configuration settings\n     * @constructor\n     *\/\n    var DigitalIdentityVerificationView = function(settings) {\n        var self = this;\n        self.settings = $.extend({}, settings);\n        self.clientModel = global.CurrentPage.client;\n        self.errorMessages = [];\n    };\n\n    \/**\n     * Renders the view into the specified container\n     * @param {jQuery} container The container to render into\n     * @returns {DigitalIdentityVerificationView} this instance for chaining\n     *\/\n    DigitalIdentityVerificationView.prototype.renderIn = function(container) {\n        var self = this;\n        var clientDataForSoy = null;\n        self.errorMessages = [];\n\n        \/\/ Validate client model\n        if (!self.clientModel) {\n            self.errorMessages.push(global.Messages.get('DIV.Error.NoClientData', 'Client data is not available.'));\n            container.html(soyTemplate({\n                messages: global.Messages,\n                errorMessages: self.errorMessages\n            }));\n        } else {\n            \/\/ Prepare client data for the Soy template\n            clientDataForSoy = {\n                iacode: self.clientModel.get('iacode'),\n                firstName: self.clientModel.get('firstName'),\n                lastName: self.clientModel.get('lastName'),\n                dateOfBirth: self.clientModel.get('dob'),\n                language: self.clientModel.get('preferredLanguage'),\n                emails: self.clientModel.get('emails')\n            };\n\n            \/\/ Check if emails are available\n            if (!clientDataForSoy.emails || clientDataForSoy.emails.length === 0) {\n                self.errorMessages.push(global.Messages.get('DIV.No.Email.Available', 'No email addresses are available.'));\n            }\n\n            \/\/ Render the template with client data\n            container.html(soyTemplate({\n                messages: global.Messages,\n                clientData: clientDataForSoy,\n                errorMessages: self.errorMessages\n            }));\n\n            \/\/ Setup UI event handlers\n            self.setupUIDetails(container, self);\n        }\n\n        return self;\n    };\n\n    \/**\n     * Sets up UI event handlers\n     * @param {jQuery} container The container with the rendered UI\n     * @param {DigitalIdentityVerificationView} self Reference to this instance\n     *\/\n    DigitalIdentityVerificationView.prototype.setupUIDetails = function(container, self) {\n        var dialogId = '#DigitalIdentityVerificationDialog';\n\n        \/\/ Setup cancel button\n        container.find('#div-cancel-button').on('click', function(e) {\n            e.preventDefault();\n            $(dialogId).dialog('close');\n        });\n\n        \/\/ Setup initiate button\n        container.find('#div-initiate-button').on('click', function(e) {\n            e.preventDefault();\n            var $button = $(this);\n            var selectedEmail = null;\n            self.errorMessages = [];\n\n            \/\/ Disable button during processing\n            $button.prop('disabled', true);\n\n            \/\/ Get selected email\n            var $emailRadios = container.find('input[name=\"divEmailSelection\"]');\n\n            if ($emailRadios.length > 1) { \/\/ Multiple emails presented as radios\n                var $checkedRadio = $emailRadios.filter(':checked');\n                if ($checkedRadio.length === 0) {\n                    self.errorMessages.push(global.Messages.get('DIV.Error.EmailRequired', 'Please select an email address.'));\n                } else {\n                    selectedEmail = $checkedRadio.val();\n                }\n            } else if ($emailRadios.length === 1) {\n                \/\/ Single email (hidden input)\n                selectedEmail = $emailRadios.val();\n            }\n\n            \/\/ Validate email selection\n            if (!selectedEmail && ($emailRadios.length > 0 || \n                (self.clientModel && \n                 self.clientModel.get('emails') && \n                 self.clientModel.get('emails').length > 0))) {\n                if (self.errorMessages.length === 0) {\n                    self.errorMessages.push(global.Messages.get('DIV.Error.EmailRequired', 'Please select an email address.'));\n                }\n            }\n\n            \/\/ Display errors or proceed\n            if (self.errorMessages.length > 0) {\n                self.renderIn(container);\n                container.find('#div-initiate-button').prop('disabled', false);\n                return;\n            }\n\n            \/\/ Prepare data for API call\n            var initiationData = {\n                clientId: self.clientModel.get('clientId'),\n                sin: self.clientModel.get('sin'),\n                firstName: self.clientModel.get('firstName'),\n                lastName: self.clientModel.get('lastName'),\n                selectedEmail: selectedEmail,\n                iacode: self.clientModel.get('iacode')\n            };\n\n            \/\/ Make API call to initiate DIV process\n            com.cibc.go.Utilities.post(\n                global.urls.get('div.initiation.url'), \/\/ URL for DIV initiation API\n                initiationData,\n                function(response) { \/\/ Success callback\n                    \/\/ Show success message if needed\n                    $(dialogId).dialog('close');\n                },\n                function(error) { \/\/ Error callback\n                    \/\/ Handle error\n                    self.errorMessages.push(global.Messages.get('DIV.Error.ApiError', 'An error occurred during verification initiation.'));\n                    self.renderIn(container); \/\/ Re-render to show API error\n                    container.find('#div-initiate-button').prop('disabled', false); \/\/ Re-enable button\n                }\n            );\n        });\n    };\n\n    \/\/ Return the constructor function\n    return DigitalIdentityVerificationView;\n})(jQuery, com.cibc.go.myclient.global, com.cibc.go.Utilities); \/\/ Pass dependencies\n\n\n\n{namespace com.cibc.go.myclient.soy.view.DigitalIdentityVerificationView}\n\n\/**\n * Main template for the Digital Identity Verification popup content.\n * @param messages The I18N messages map.\n * @param clientData Map containing client details. Expected keys:\n *   iacode, firstName, lastName, dateOfBirth, language, emails (list)\n * @param errorMessages List of error strings to display.\n *\/\n{template .main}\n  <div class=\"div-details-panel\">\n    {if $errorMessages and length($errorMessages) > 0}\n      <div class=\"error-panel\">\n        {foreach $errorMsg in $errorMessages}\n          <div><span class=\"error-text\">{$errorMsg}<\/span><\/div>\n        {\/foreach}\n      <\/div>\n    {\/if}\n\n    {if $clientData}\n      <table class=\"details-table\" style=\"width: 100%; margin-bottom: 15px;\">\n        <tr>\n          <td class=\"label\" style=\"width: 30%;\">{$messages['client.details.name'] ?: 'Name'}:<\/td>\n          <td class=\"value\">{$clientData.firstName} {$clientData.lastName}<\/td>\n        <\/tr>\n        <tr>\n          <td class=\"label\">{$messages['client.details.dob'] ?: 'Date of Birth'}:<\/td>\n          <td class=\"value\">{$clientData.dateOfBirth}<\/td>\n        <\/tr>\n        <tr>\n          <td class=\"label\">{$messages['client.details.language'] ?: 'Language'}:<\/td>\n          <td class=\"value\">{$clientData.language}<\/td>\n        <\/tr>\n        <tr>\n          <td class=\"label\">{$messages['client.details.iacode'] ?: 'IA Code'}:<\/td>\n          <td class=\"value\">{$clientData.iacode}<\/td>\n        <\/tr>\n      <\/table>\n\n      {* -- Email Selection -- *}\n      <div class=\"email-selection-panel\">\n        <label class=\"section-label\">{$messages['div.select.email.label'] ?: 'Email Address for Verification:'}<\/label>\n\n        {if $clientData.emails and length($clientData.emails) > 1}\n          <div class=\"email-options\" style=\"margin-top: 5px;\">\n            {foreach $email in $clientData.emails}\n              <div class=\"radio-option\">\n                <label>\n                  {* Check if email is object or string - adapt as needed after inspecting client model *}\n                  {let $emailValue: $email.address ? $email.address : $email \/}\n                  <input type=\"radio\" name=\"divEmailSelection\" value=\"{$emailValue}\" {if index($email) == 0}checked{\/if}>\n                  {$emailValue}\n                  {if $email.type} ({$email.type}) {\/if}\n                <\/label>\n              <\/div>\n            {\/foreach}\n          <\/div>\n        {elseif $clientData.emails and length($clientData.emails) == 1}\n          {let $emailValue: $clientData.emails[0].address ? $clientData.emails[0].address : $clientData.emails[0] \/}\n          <div class=\"single-email\" style=\"margin-top: 5px;\">\n            <span>{$emailValue}<\/span>\n            <input type=\"hidden\" name=\"divEmailSelection\" value=\"{$emailValue}\">\n          <\/div>\n        {else}\n          <div class=\"no-email-message error-text\" style=\"margin-top: 5px;\">\n            {$messages['div.no.email.available'] ?: 'No email address available.'}\n          <\/div>\n        {\/if}\n      <\/div>\n    {else}\n      <p>{$messages['div.loading.error'] ?: 'Could not load client details.'}<\/p>\n    {\/if}\n  <\/div>\n\n  <div class=\"buttonPanel\" style=\"margin-top: 20px; text-align: right; padding-top: 10px; border-top: 1px solid #ccc;\">\n    <button id=\"div-initiate-button\" class=\"btn btn-primary\" {if not $clientData or not $clientData.emails or length($clientData.emails) == 0}disabled{\/if}>\n      {$messages['div.button.initiate'] ?: 'Initiate'}\n    <\/button>\n    <button id=\"div-cancel-button\" class=\"btn btn-secondary\" style=\"margin-left: 5px;\">\n      {$messages['div.button.cancel'] ?: 'Cancel'}\n    <\/button>\n  <\/div>\n{\/template}\n\n<\/code><\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
\/** * Tool widget to trigger the UI popup for Digital Identity Verification. *\/ com.cibc.go.myclient.view.form.widget.DigitalIdentityVerificationTool = (function($, superClass, global, utilities, DigitalIdentityVerificationView) { utilities.assertArrayElementsNotNull(arguments); \/** * Constructor for DigitalIdentityVerificationTool. * @param {com.cibc.go.myclient.view.form.widget.WidgetFactory} widgetFactory The factory instance. * @param {com.cibc.go.myclient.view.form.widget.Container|jQuery} parent The parent container. * @param {Object} settings widget configuration settings. * @constructor * @extends com.cibc.go.myclient.view.form.widget.DataPicker *\/ …<\/p>\n","protected":false},"author":2,"featured_media":105678,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-105677","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/105677","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=105677"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/105677\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/105678"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=105677"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=105677"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=105677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}