From b78b861780352dceb39b589dfe096964b7717121 Mon Sep 17 00:00:00 2001 From: RafaMelazzo Date: Mon, 6 May 2024 18:28:40 -0300 Subject: [PATCH] feat: add kyc validation to recipient dashboard --- Block/Customer/Marketplace/Kyc.php | 64 +++++++++++++++++++ Model/Api/Recipient.php | 2 +- i18n/pt_BR.csv | 5 ++ .../layout/marketplace_account_dashboard.xml | 20 ++++++ view/frontend/requirejs-config.js | 3 +- .../templates/customer/marketplace/kyc.phtml | 51 +++++++++++++++ view/frontend/web/css/pagarme_kyc.css | 37 +++++++++++ view/frontend/web/js/view/marketplace/kyc.js | 44 +++++++++++++ 8 files changed, 224 insertions(+), 2 deletions(-) create mode 100644 Block/Customer/Marketplace/Kyc.php create mode 100644 view/frontend/layout/marketplace_account_dashboard.xml create mode 100644 view/frontend/templates/customer/marketplace/kyc.phtml create mode 100644 view/frontend/web/css/pagarme_kyc.css create mode 100644 view/frontend/web/js/view/marketplace/kyc.js diff --git a/Block/Customer/Marketplace/Kyc.php b/Block/Customer/Marketplace/Kyc.php new file mode 100644 index 00000000..83d7c83c --- /dev/null +++ b/Block/Customer/Marketplace/Kyc.php @@ -0,0 +1,64 @@ +customerSession = $customerSession; + $this->collectionFactory = $collectionFactory; + parent::__construct($context, $data); + } + + public function getRecipient() + { + return $this->collectionFactory->create()->addFieldToFilter( + 'external_id', + ['eq' => $this->getCustomerId()] + )->getFirstItem(); + } + + /** + * Get customerid + * + * @return int + */ + public function getCustomerId() + { + return $this->customerSession->getCustomerId(); + } +} diff --git a/Model/Api/Recipient.php b/Model/Api/Recipient.php index 3bd5ea41..f6b8ac63 100644 --- a/Model/Api/Recipient.php +++ b/Model/Api/Recipient.php @@ -178,7 +178,7 @@ public function createKycLink(string $id) $kycLink = $this->recipientService->createKycLink($recipientModel->getPagarmeId()); $kycResponse = $this->kycLinkResponseFactory->create(); $kycResponse->setUrl($kycLink->url) - ->setQrCode($kycLink->base64_qrcode); + ->setQrCode('data:image/svg+xml;base64,' . $kycLink->base64_qrcode); return $kycResponse; } } diff --git a/i18n/pt_BR.csv b/i18n/pt_BR.csv index ad028b0d..dc00f14a 100644 --- a/i18n/pt_BR.csv +++ b/i18n/pt_BR.csv @@ -423,6 +423,7 @@ "Responsibility for chargebacks","Responsabilidade pelos chargebacks" "Responsibility for receiving split remainder","Responsabilidade pelo recebimento do restante da divisão" "Responsibility for receiving extras and discounts","Responsabilidade pelo recebimento de extras e descontos" +"Pagar.me Recipient","Recebedor Pagar.me" "Marketplace main recipient","Recebedor Principal do Marketplace" "

Pagar.me recipient id that represents your marketplace

","

ID do recebedor Pagar.me que representa seu marketplace

" "View","Visualizar" @@ -436,6 +437,10 @@ "Status updated!","Status atualizado!" "

He can now sell, but remember to check his status. He can only withdraw his sales amounts once the status is “active”

","

Ele já consegue vender, mas lembre-se de verificar o status. Ele só poderá sacar os valores de suas vendas quando o status estiver “ativo”.

" "

He can now sell, but it is necessary to complete the security validation so that he can withdraw the sales amounts in the future.

Attention! Keep up with the status. Once this is “validation requested”, a link will be made available for the seller to complete the process.

","

Ele já consegue vender, mas é necessário completar a validação de segurança para que ele consiga sacar os valores de venda no futuro.

Atenção! Acompanhe o status. Assim que este for “validação solicitada”, um link será disponibilizado para que o vendedor faça o processo.

" +"You can now sell, but you must successfully complete our security validation to release your sales amounts.","Você já pode vender, mas é necessário completar nossa validação de segurança com sucesso para liberação dos valores de suas vendas." +"Start validation","Iniciar validação" +"Point the smartphone camera to read the QRCode.","Aponte a câmera do celular para ler o QRCode." +"Or use this %slink%s.","Ou utilize este %slink%s." "An error occurred while saving the recipient.","Ocorreu um erro ao salvar o recebedor." "Bank account holder name must be lower than 30 characters.","O nome do titular da conta bancária deve ter menos de 30 caracteres." "Recipient not active.","Recebedor não está ativo." diff --git a/view/frontend/layout/marketplace_account_dashboard.xml b/view/frontend/layout/marketplace_account_dashboard.xml new file mode 100644 index 00000000..75a350b0 --- /dev/null +++ b/view/frontend/layout/marketplace_account_dashboard.xml @@ -0,0 +1,20 @@ + + + + + + + + + + + + diff --git a/view/frontend/requirejs-config.js b/view/frontend/requirejs-config.js index 791c4280..6f17dd2e 100644 --- a/view/frontend/requirejs-config.js +++ b/view/frontend/requirejs-config.js @@ -8,7 +8,8 @@ var config = { }, map: { '*': { - pixCheckoutSuccess: 'Pagarme_Pagarme/js/view/payment/checkout/success/pix' + pixCheckoutSuccess: 'Pagarme_Pagarme/js/view/payment/checkout/success/pix', + kyc: 'Pagarme_Pagarme/js/view/marketplace/kyc' } } }; diff --git a/view/frontend/templates/customer/marketplace/kyc.phtml b/view/frontend/templates/customer/marketplace/kyc.phtml new file mode 100644 index 00000000..ad248cbb --- /dev/null +++ b/view/frontend/templates/customer/marketplace/kyc.phtml @@ -0,0 +1,51 @@ +getRecipient()->getId(); + +if (empty($recipientId)) { + return; +} + +?> + +
+
+
+
+
+
+
+
+
+

security ' + . 'validation to release your sales amounts.') ?>

+ +
+
+
+
+
+
+ +
+
+

+

QRCode

+

', '') ?>

+
+
+ + diff --git a/view/frontend/web/css/pagarme_kyc.css b/view/frontend/web/css/pagarme_kyc.css new file mode 100644 index 00000000..0e587dd3 --- /dev/null +++ b/view/frontend/web/css/pagarme_kyc.css @@ -0,0 +1,37 @@ +.wk-mp-design .mp-widgets.pagarme-kyc { + width: 100%; +} + +.pagarme-kyc .container { + padding-bottom: 15px; +} + +.pagarme-kyc-box { + border:1px solid #ccc; +} + +.pagarme-kyc-box-title { + border-bottom: 1px solid #ccc; + display: inline-block; + width: 100%; +} + +.pagarme-kyc-box-content { + padding:5px; +} + +.pagarme-kyc-box-content > div { + display: flex; + flex-direction: column; + align-items: center; +} + +.pagarme-kyc-box-content > div button { + margin: 2.5rem; +} + +.pagarme-kyc-modal { + display: none; + padding-top: 3rem; + text-align: center; +} diff --git a/view/frontend/web/js/view/marketplace/kyc.js b/view/frontend/web/js/view/marketplace/kyc.js new file mode 100644 index 00000000..5b7259b2 --- /dev/null +++ b/view/frontend/web/js/view/marketplace/kyc.js @@ -0,0 +1,44 @@ +define([ + 'Magento_Ui/js/modal/modal', + "mage/url", + 'jquery', + 'mage/translate', + 'loader' +], function (modal, mageUrl, $) { + return function (config) { + + $('#pagarme-kyc-start-validation').on('click', async function (){ + const body = $('body'); + try { + body.loader('show'); + const url = mageUrl.build(`rest/V1/pagarme/marketplace/recipient/kyc/link/${config.id}`); + const response = await $.get(mageUrl.build(url)); + body.loader('hide'); + if (response) { + $('#pagarme-kyc-qrcode').attr('src', response.qr_code); + $('#pagarme-kyc-link').attr('href', response.url); + $('.pagarme-kyc-modal').show(); + + const options = { + responsive: true, + innerScroll: true, + // @todo: Using portuguese title for the translation did't work. + title: $.mage.__('Iniciar validação'), + buttons: [{ + text: $.mage.__('Close'), + click: function () { + this.closeModal(); + } + }] + }; + + const popup = modal(options, $('#modal-content')); + $('#modal-content').modal('openModal'); + } + } catch (exception) { + body.loader('hide'); + // this.mageAlert(exception?.responseJSON?.message, $.mage.__('Error!')); + } + }); + }; +});