Skip to content

Commit

Permalink
add kyc link as input on admin modal
Browse files Browse the repository at this point in the history
  • Loading branch information
RafaMelazzo committed May 7, 2024
1 parent cdd4ce3 commit bb546da
Show file tree
Hide file tree
Showing 7 changed files with 124 additions and 31 deletions.
2 changes: 1 addition & 1 deletion i18n/pt_BR.csv
Original file line number Diff line number Diff line change
Expand Up @@ -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."
36 changes: 35 additions & 1 deletion view/adminhtml/web/css/pagarme_style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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
*/
Expand Down
98 changes: 76 additions & 22 deletions view/adminhtml/web/js/grid/columns/recipientStatus.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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';
Expand Down Expand Up @@ -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 = `<p>Problema ao gerar validação de segurança, por favor tente novamente mais tarde.</p>`;
this.mageAlert(errorContent, translate('Error!'));
body.loader('hide');
body.notification('clear');
const errorContent = `<p>Algo deu errado, por favor tente novamente mais tarde.</p>`;
this.mageAlert(errorContent);
}

},
getModalContent: function (url) {
// TODO: Using portuguese string because mage/translate and knockout i18n were not working
const content = `<p><span class='pagarme-alert-text'>Atenção!</span> O recebedor já consegue vender, `
return `<p><span class='pagarme-alert-text'>Atenção!</span> O recebedor já consegue vender, `
+ `mas <b>só após a validação de segurança</b> completada com sucesso ele <b>conseguirá sacar seus valores</b> `
+ `referentes às compras.</p>`
+ `<p>Solicite que ele acesse a <b>Dashboard do Marketplace</b> para completar a validação ou envie `
+ `<a href="${url}" target="_blank">este link</a> para ele.</p>`;
return content;
+ `referentes às compras.</p>`
+ `<p>Solicite que ele acesse a <b>Dashboard do Marketplace</b> para completar a validação ou envie o `
+ `link abaixo para ele.</p>`
+ `<div class="kyc-link-container"><input type="text" id="kyc-link" value="${url}" disabled/>`
+ `<button id="kyc-copy-button">Copiar</button><span id="kyc-copy-message"></span></div>`;
},
mageAlert(content, title = null) {
mageAlert(content) {
const alertObject = {
title: title,
title: 'Validação solicitada',
content: content,
modalClass: 'pagarme-recipient-modal',
buttons: []
};
alert(alertObject);
}
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
<div class="data-grid-cell-content"
if="!$col.needsValidation($row())"
data-bind="attr: { class: $col.getStatusClass($row())}"
text="$col.getLabel($row())" />
text="$col.getLabel($row())"></div>
<a class="action-menu-item kyc-validation"
if="$col.needsValidation($row())"
data-bind="click: $col.generateKycLink.bind($col, $row())"
text="$col.getLabel($row())" />
text="$col.getLabel($row())"></a>
8 changes: 5 additions & 3 deletions view/frontend/templates/customer/marketplace/kyc.phtml
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -43,7 +45,7 @@ if (empty($recipientId) || $recipient->getStatus() !== \Pagarme\Core\Marketplace

<div id="modal-error-content">
<div class="modal-inner-content pagarme-kyc-modal">
<p><?= __('Problem to generate security validation, please try again later.') ?></p>
<p><?= __('Something went wrong, please try again later.') ?></p>
</div>
</div>

Expand Down
4 changes: 4 additions & 0 deletions view/frontend/web/css/pagarme_kyc.css
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,7 @@
padding-top: 3rem;
text-align: center;
}

.pagarme-kyc-modal img {
width: 220px;
}
3 changes: 1 addition & 2 deletions view/frontend/web/js/view/marketplace/kyc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand Down

0 comments on commit bb546da

Please sign in to comment.