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.
`
+ + ` `
+ + `Copiar
`;
},
- 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
-
= __('Problem to generate security validation, please try again later.') ?>
+
= __('Something went wrong, please try again later.') ?>
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 () {