add kyc link as input on admin modal

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."

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
  */

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 = `<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);
         }
     });
-});
+});

view/adminhtml/web/template/ui/grid/cells/recipientStatus.html

@@ -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>

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
 
 <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>
 

view/frontend/web/css/pagarme_kyc.css

@@ -35,3 +35,7 @@
     padding-top: 3rem;
     text-align: center;
 }
+
+.pagarme-kyc-modal img {
+    width: 220px;
+}

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 () {