From bb546da4ad72557deddad1f1891d405b4da1f55b Mon Sep 17 00:00:00 2001 From: RafaMelazzo Date: Tue, 7 May 2024 18:23:47 -0300 Subject: [PATCH] add kyc link as input on admin modal --- i18n/pt_BR.csv | 2 +- view/adminhtml/web/css/pagarme_style.css | 36 ++++++- .../web/js/grid/columns/recipientStatus.js | 98 ++++++++++++++----- .../ui/grid/cells/recipientStatus.html | 4 +- .../templates/customer/marketplace/kyc.phtml | 8 +- view/frontend/web/css/pagarme_kyc.css | 4 + view/frontend/web/js/view/marketplace/kyc.js | 3 +- 7 files changed, 124 insertions(+), 31 deletions(-) diff --git a/i18n/pt_BR.csv b/i18n/pt_BR.csv index 3c313e72..c5733132 100644 --- a/i18n/pt_BR.csv +++ b/i18n/pt_BR.csv @@ -602,4 +602,4 @@ "Inactive","Inativo" "Recipient not founded.","Recebedor não encontrado." "Security validation not generated.","Validação de segurança não gerada." -"Problem to generate security validation, please try again later.","Problema ao gerar validação de segurança, por favor tente novamente mais tarde." +"Something went wrong, please try again later.","Algo deu errado, por favor tente novamente mais tarde." diff --git a/view/adminhtml/web/css/pagarme_style.css b/view/adminhtml/web/css/pagarme_style.css index 9fa25460..cf754e42 100644 --- a/view/adminhtml/web/css/pagarme_style.css +++ b/view/adminhtml/web/css/pagarme_style.css @@ -127,7 +127,7 @@ table.table-cycles { margin-bottom: 1.5em; } -.pagarme-recipient-modal p:last-of-type { +.pagarme-recipient-modal *:last-child { margin-bottom: .5em; } @@ -181,6 +181,40 @@ table.table-cycles { color: #e22626; } +.pagarme-recipient-modal .kyc-link-container { + display: flex; + flex-wrap: wrap; + align-content: center; + margin-bottom: 2rem; +} +.pagarme-recipient-modal #kyc-link { + width: calc(100% - 10rem); + height: 5rem; + padding: 1rem 1rem; + border: 1px solid #adadad; + border-right: 0; + border-radius: 6px 0 0 6px; +} + +.pagarme-recipient-modal #kyc-copy-button { + width: 10rem; + height: 5rem; + border-radius: 0 6px 6px 0; +} + +.pagarme-recipient-modal #kyc-copy-message { + display: none; + margin: .25rem 0 0 .25rem; +} + +.pagarme-recipient-modal #kyc-copy-message.success { + color: #35a335; +} + +.pagarme-recipient-modal #kyc-copy-message.error { + color: #cd0909; +} + /* * Jquery UI Fix */ diff --git a/view/adminhtml/web/js/grid/columns/recipientStatus.js b/view/adminhtml/web/js/grid/columns/recipientStatus.js index 558da3aa..ce1b968b 100644 --- a/view/adminhtml/web/js/grid/columns/recipientStatus.js +++ b/view/adminhtml/web/js/grid/columns/recipientStatus.js @@ -4,11 +4,12 @@ define([ "mage/url", 'Magento_Ui/js/modal/alert', 'jquery', - 'mage/translate', 'loader' -], function (_, Column, mageUrl, alert, $, translate) { +], function (_, Column, mageUrl, alert, $) { 'use strict'; + // TODO: Using portuguese strings because mage/translate and knockout i18n were not working + return Column.extend({ defaults: { bodyTmpl: 'Pagarme_Pagarme/ui/grid/cells/recipientStatus' @@ -28,11 +29,10 @@ define([ status = this.getStatusLabel(status); } - return translate(status); + return status; }, getStatusLabel: function (status) { let statusLabel = '' - // TODO: Using portuguese string because mage/translate and knockout i18n were not working switch (status) { case 'registered': statusLabel = 'Cadastrado'; @@ -66,39 +66,93 @@ define([ return row.status === 'validation_requested'; }, generateKycLink: async function (row) { + const body = $('body'); try { - $('body').loader('show'); + body.loader('show'); const url = mageUrl.build(`/rest/V1/pagarme/marketplace/recipient/kyc/link/${row.id}`); const response = await $.get(mageUrl.build(url)); - $('body').loader('hide'); + body.loader('hide'); if (response) { - this.mageAlert(this.getModalContent(response.url), translate('Success!')); + this.mageAlert(this.getModalContent(response.url)); + $('#kyc-copy-button').on('click', async function (){ + const linkInput = $('#kyc-link'); + + const url = linkInput.attr("value"), + showSuccessMessage = () => { + const messageElement = $('#kyc-copy-message'); + + messageElement.html('Link copiado para a área de transferência.') + .addClass('success') + .fadeIn('200'); + + setTimeout(function (){ + messageElement.fadeOut('400'); + }, 3000); + }, + showFailMessage = () => { + const messageElement = $('#kyc-copy-message'); + + linkInput.prop('disabled', false) + .prop('readonly', true) + .focus() + .select(); + + messageElement.html( + 'Falha ao copiar! Por favor, copie o link manualmente utilizando o campo acima.' + ).addClass('error') + .fadeIn('200'); + + setTimeout(function (){ + messageElement.fadeOut('400'); + }, 4000); + }; + + if (window.isSecureContext && navigator.clipboard) { + try { + await navigator.clipboard.writeText(url); + showSuccessMessage(); + } catch (err) { + showFailMessage(); + } + return; + } + + const [linkDOMElement] = linkInput; + linkDOMElement.select(); + linkDOMElement.setSelectionRange(0, linkInput.val().length); + try { + document.execCommand('copy', false); + showSuccessMessage(); + } catch (err) { + showFailMessage(); + } + }) } } catch (exception) { - $('body').loader('hide'); - $('body').notification('clear'); - // TODO: Using portuguese string because mage/translate and knockout i18n were not working - const errorContent = `

Problema ao gerar validação de segurança, por favor tente novamente mais tarde.

`; - this.mageAlert(errorContent, translate('Error!')); + body.loader('hide'); + body.notification('clear'); + const errorContent = `

Algo deu errado, por favor tente novamente mais tarde.

`; + this.mageAlert(errorContent); } - + }, getModalContent: function (url) { - // TODO: Using portuguese string because mage/translate and knockout i18n were not working - const content = `

Atenção! O recebedor já consegue vender, ` + return `

Atenção! O recebedor já consegue vender, ` + `mas só após a validação de segurança completada com sucesso ele conseguirá sacar seus valores ` - + `referentes às compras.

` - + `

Solicite que ele acesse a Dashboard do Marketplace para completar a validação ou envie ` - + `este link para ele.

`; - return content; + + `referentes às compras.

` + + `

Solicite que ele acesse a Dashboard do Marketplace para completar a validação ou envie o ` + + `link abaixo para ele.

` + + `
` + + `
`; }, - mageAlert(content, title = null) { + mageAlert(content) { const alertObject = { - title: title, + title: 'Validação solicitada', content: content, modalClass: 'pagarme-recipient-modal', + buttons: [] }; alert(alertObject); } }); -}); \ No newline at end of file +}); diff --git a/view/adminhtml/web/template/ui/grid/cells/recipientStatus.html b/view/adminhtml/web/template/ui/grid/cells/recipientStatus.html index ecb444ba..34abf449 100644 --- a/view/adminhtml/web/template/ui/grid/cells/recipientStatus.html +++ b/view/adminhtml/web/template/ui/grid/cells/recipientStatus.html @@ -2,8 +2,8 @@
+ text="$col.getLabel($row())">
\ No newline at end of file + text="$col.getLabel($row())"> diff --git a/view/frontend/templates/customer/marketplace/kyc.phtml b/view/frontend/templates/customer/marketplace/kyc.phtml index dc19d7ce..8d3e4bf1 100644 --- a/view/frontend/templates/customer/marketplace/kyc.phtml +++ b/view/frontend/templates/customer/marketplace/kyc.phtml @@ -3,10 +3,12 @@ * @var \Pagarme\Pagarme\Block\Customer\Marketplace\Kyc $block Kyc */ +use Pagarme\Core\Marketplace\Interfaces\RecipientInterface; + $recipient = $block->getRecipient(); -$recipientId = $recipient->getId(); +$recipientId = $recipient->getId(); -if (empty($recipientId) || $recipient->getStatus() !== \Pagarme\Core\Marketplace\Interfaces\RecipientInterface::VALIDATION_REQUESTED) { +if (empty($recipientId) || $recipient->getStatus() !== RecipientInterface::VALIDATION_REQUESTED) { return; } @@ -43,7 +45,7 @@ if (empty($recipientId) || $recipient->getStatus() !== \Pagarme\Core\Marketplace
-

+

diff --git a/view/frontend/web/css/pagarme_kyc.css b/view/frontend/web/css/pagarme_kyc.css index 0e587dd3..deab9c8f 100644 --- a/view/frontend/web/css/pagarme_kyc.css +++ b/view/frontend/web/css/pagarme_kyc.css @@ -35,3 +35,7 @@ padding-top: 3rem; text-align: center; } + +.pagarme-kyc-modal img { + width: 220px; +} diff --git a/view/frontend/web/js/view/marketplace/kyc.js b/view/frontend/web/js/view/marketplace/kyc.js index 32858633..7fd3648a 100644 --- a/view/frontend/web/js/view/marketplace/kyc.js +++ b/view/frontend/web/js/view/marketplace/kyc.js @@ -9,8 +9,7 @@ define([ const successModalOptions = { responsive: true, innerScroll: true, - // @todo: Using portuguese title for the translation did't work. - title: $.mage.__('Iniciar validação'), + title: $.mage.__('Start validation'), buttons: [{ text: $.mage.__('Close'), click: function () {