${[\n Resources.PLEASE_CONFIRM_PAYMENT,\n `${Resources.PAYMENT_AMOUNT}$${paymentAmount}`,\n Resources.CANNOT_CHANGE_AMOUNT,\n ].join('
')}
`;\n\n dialog.open({\n html: message,\n options: {\n height: 'auto',\n width: 'auto',\n title: Resources.PAYMENT_AMOUNT_VERIFICATION,\n dialogClass: 'ui-dialog-payment-confirmation',\n buttons: [\n {\n text: Resources.SUBMIT_PAYMENT,\n class: 'button primary',\n click() {\n confirmPayment = true;\n $(this).dialog('close');\n },\n },\n {\n text: Resources.GO_BACK,\n class: 'button tertiary payment-go-back',\n click() {\n $(this).dialog('close');\n },\n },\n ],\n close() {\n if (confirmPayment) {\n $form.find('button[type=submit]').click();\n } else {\n $('button[name=dwfrm_accountpayment_submitPayment]').removeClass('disabled');\n }\n },\n },\n });\n }\n\n /** Start Payment Events * */\n // Payment Form Submit Event\n $('#dwfrm_accountpayment').on('submit', (e) => {\n // If the user has already confirmed the payment, submit the form\n if (confirmPayment === true) {\n return true;\n }\n\n $('.payment-routing.error, .payment.error').hide();\n $('button[name=dwfrm_accountpayment_submitPayment]').addClass('disabled');\n const CCError = $('#dwfrm_accountpayment_paymentMethods_creditCard_number').hasClass('error');\n const CVNError = $('#dwfrm_accountpayment_paymentMethods_creditCard_cvn').hasClass('error');\n const isValidPaymentAmount = paymentutils.validateOtherPaymentAmount();\n const routingNumberResults = paymentutils.validateRoutingNumber();\n let formHasErrors = false;\n // Loop through the routingNumberResults which contains any visible routing number field with it associated validation results\n Object.keys(routingNumberResults).forEach((field) => {\n if (!routingNumberResults[field]) {\n // Retrieve the current routingNumberResults field associated error mesage and display it\n $(`input[name=${field}]`).closest('#routing-container').siblings('.payment-routing.error').show();\n formHasErrors = true;\n }\n });\n\n // If payment amount is not valid display error\n if (!isValidPaymentAmount) {\n $('.payment.error').show();\n formHasErrors = true;\n }\n // If form has payment, routing number, orr cc number or cvn error cancel form submit and remove the disabled property and disabled class\n if (formHasErrors || CCError || CVNError) {\n $('button[name=dwfrm_accountpayment_submitPayment]').removeClass('disabled');\n return false;\n }\n\n // If the customer has selected the minimum payment amount, do not show the confirmation dialog.\n if ($('#dwfrm_accountpayment_amountChoice_minimumPayment').is(':checked')) {\n return true;\n }\n\n // If the customer is simply enrolling in autopay without making a payment, submit the form\n if ($('.no-payment-required').length > 0) {\n return true;\n }\n\n // If the customer entered a different amount, use that value, otherwise pay the full balance.\n let paymentAmount;\n if ($('#dwfrm_accountpayment_amountChoice_other').is(':checked')) {\n paymentAmount = $('#dwfrm_accountpayment_otherAmount').val();\n } else {\n paymentAmount = $('.payment-row.other-payment label').first().data('currentbalance');\n }\n\n paymentAmount = parseFloat(paymentAmount);\n // The following condition should never happen, but check for paymentAmount is NaN using\n // the fact that only NaN !== NaN. In this event, something went seriously wrong. Submit\n // the form, handle the error on the back-end, and refresh the page.\n if (Number.isNaN(paymentAmount)) {\n return true;\n }\n\n displayConfirmPaymentDialog($(e.currentTarget), paymentAmount.toFixed(2));\n\n // Do not submit the form at this point; it will be submitted if the customer confirms the amount.\n return false;\n });\n /** End Payment Events * */\n\n const paymentList = $('.payment-list');\n if (paymentList.length === 0) { return; }\n\n const deleteCard = (url, formData) => {\n const promise = new TPromise((resolve) => {\n $.ajax({\n type: 'POST',\n url,\n data: formData,\n }).done(() => {\n resolve(util.appendParamToURL(Urls.paymentsList, 'del', 'success'));\n });\n });\n return promise;\n };\n\n $('form[name=\"payment-remove\"]').on('submit', (e) => {\n e.preventDefault();\n // override form submission in order to prevent refresh issues\n const button = $(e.currentTarget).find('.delete');\n $('').attr({\n type: 'hidden',\n name: button.attr('name'),\n value: button.attr('value') || 'delete card',\n }).appendTo($(e.currentTarget));\n\n const formData = $(e.currentTarget).serialize();\n const formAction = $(e.currentTarget).attr('action');\n const message = String.format(Resources.CONFIRM_DELETE, Resources.TITLE_CREDITCARD);\n const dialogTitle = Resources.DELETE_TITLE;\n let confirmDelete = false;\n\n dialog.open({\n html: message,\n options: {\n height: 'auto',\n title: dialogTitle,\n dialogClass: 'ui-dialog-delete-confirmation',\n buttons: [\n {\n text: Resources.REMOVE,\n class: 'button primary',\n click() {\n confirmDelete = true;\n $(this).dialog('close');\n },\n },\n {\n text: Resources.NO_THANKS,\n class: 'button tertiary',\n click() {\n $(this).dialog('close');\n },\n },\n ],\n close() {\n if (confirmDelete) {\n deleteCard(formAction, formData).then((data) => {\n page.redirect(data);\n });\n }\n },\n },\n });\n });\n\n // Updates expiration update submit button text when interacting with expiration month/year dropdowns\n paymentList.on('change', 'select', (e) => {\n const updateForm = $(e.currentTarget).parents('form');\n if (updateForm.length > 0 && updateForm.find('button').length > 0) {\n const updateBtn = updateForm.find('button');\n updateBtn.text(updateBtn.attr('value')).removeClass('error-icon');\n }\n });\n}\n\n/**\n * @private\n * @function\n * @description Updates payment method for make a payment form\n */\nfunction updatePaymentMethod(element) {\n element.parents('.payment-methods').find('.payment-method-type').hide();\n element.parents('.payment-row').find('.payment-method-type').show();\n}\n\n/**\n * @private\n * @function\n * @description Binds the events for make a payment form\n */\nfunction initializeAccountPaymentForm() {\n const $selectPaymentAmount = $('input[name$=\"_accountpayment_amountChoice\"]');\n const $otherAmount = $('input[name$=\"_accountpayment_otherAmount\"]');\n\n $selectPaymentAmount.on('change', (e) => {\n $otherAmount.toggleClass('required', $(e.currentTarget).val() === 'other' && $(e.currentTarget).is(':checked'));\n }).trigger('change');\n\n // Auto-select 'other' radio when customer starts entering an amount in the other amount input field\n $otherAmount.on('keydown', () => {\n $('input[id$=\"_amountChoice_other\"]').click();\n });\n\n $('input[name$=\"_accountpayment_paymentMethods_selectedPaymentMethodID\"]').on('click', (e) => {\n updatePaymentMethod($(e.currentTarget));\n }).filter(':checked').each((index, element) => {\n updatePaymentMethod($(element));\n });\n\n $('input[name$=\"_accountpayment_paymentMethods_ach_newOrRecent\"]').on('change', (e) => {\n $('.ach-form-container').toggleClass('hide', $(e.currentTarget).val() !== 'new');\n });\n}\n\n/**\n * @function\n * @description Clears the Credit Card form by setting fields back to their initial values.\n */\nfunction clearPaymentCreditCardFields(container) {\n const $creditCard = container.find('[data-method=\"CREDIT_CARD\"]');\n $creditCard.find('input[name$=\"creditCard_owner\"]').val('').trigger('change');\n $creditCard.find('select[name$=\"_type\"]').val($creditCard.find('select[name$=\"_type\"] option:first').val()).trigger('change');\n $creditCard.find('input[name*=\"_creditCard_number\"]').val('').trigger('change');\n $creditCard.find('[name$=\"_month\"]').val($creditCard.find('[name$=\"_month\"] option:first').val()).trigger('change');\n $creditCard.find('[name$=\"_year\"]').val($creditCard.find('[name$=\"_year\"] option:first').val()).trigger('change');\n $creditCard.find('input[name$=\"_cvn\"]').val('').trigger('change');\n}\n\n/**\n * @private\n * @function\n * @description Binds the events for the credit card fields on the make a payment form\n */\nfunction initializePaymentCreditCard() {\n $('input[name$=\"_accountpayment_paymentMethods_creditCardList\"]').on('change', (e) => {\n const cardUUID = $(e.currentTarget).val();\n const isSavedCard = cardUUID && cardUUID.length > 0;\n const $container = $(e.currentTarget).parents('.payment-method-type');\n const $creditCardFields = $container.find('.credit-card-fields');\n const $saveCard = $container.find('input[name$=\"_accountpayment_paymentMethods_creditCard_saveCard\"]');\n\n $saveCard.prop('checked', !isSavedCard);\n $creditCardFields.toggle(!isSavedCard);\n clearPaymentCreditCardFields($container);\n }).filter(':checked').trigger('change');\n}\n\n/**\n * @private\n * @function\n * @description Initializes the change account and change plan dialog forms\n */\nfunction initializeAccountDialog() {\n validator.init();\n\n $('.cancel').click((e) => {\n e.preventDefault();\n dialog.close();\n });\n\n const $form = $('#ChangeAccountDialog, #ChangePlanDialog');\n const $submit = $form.find('button');\n\n $($submit).on('click', (e) => {\n const $triggeredSubmit = $(e.currentTarget);\n const $triggeredForm = $triggeredSubmit.parents('form');\n if (!$triggeredForm.valid()) {\n return;\n }\n e.preventDefault();\n let data = $triggeredForm.serialize();\n // add form action to data\n data += `&${$triggeredSubmit.attr('name')}=`;\n // make sure the server knows this is an ajax request\n if (data.indexOf('ajax') === -1) {\n data += '&format=ajax';\n }\n $.ajax({\n type: 'POST',\n url: $triggeredForm.attr('action'),\n data,\n success(response) {\n if (typeof response === 'object' && !response.success && response.error === 'CSRF Token Mismatch') {\n page.redirect(Urls.csrffailed);\n } else if (typeof response === 'object') {\n // Object response either means the request succeeded or the customer is no longer authenticated\n page.refresh();\n } else if (typeof response === 'string') {\n dialog.$container.html(response);\n initializeAccountDialog();\n }\n },\n failure() {\n dialog.$container.html(`