From 88a5ab3745c8c5e97e80b46332af638d8e1877ec Mon Sep 17 00:00:00 2001 From: Mateus Picoloto Date: Mon, 24 Jul 2023 19:04:34 -0300 Subject: [PATCH 1/3] refactoring pix block and template --- Block/Payment/Pix.php | 59 ++++++++- i18n/en_US.csv | 8 +- i18n/pt_BR.csv | 8 +- .../layout/checkout_onepage_success.xml | 3 + view/frontend/requirejs-config.js | 5 + view/frontend/templates/payment/pix.phtml | 119 +++++++----------- .../frontend/web/css/pagarme_success_page.css | 64 ++++++++++ .../js/view/payment/checkout/success/pix.js | 39 ++++++ 8 files changed, 223 insertions(+), 82 deletions(-) create mode 100644 view/frontend/web/css/pagarme_success_page.css create mode 100644 view/frontend/web/js/view/payment/checkout/success/pix.js diff --git a/Block/Payment/Pix.php b/Block/Payment/Pix.php index 7f6a997e..c2a74038 100644 --- a/Block/Payment/Pix.php +++ b/Block/Payment/Pix.php @@ -19,7 +19,16 @@ use Pagarme\Pagarme\Helper\Payment\Pix as PixHelper; class Pix extends Template { + /** + * @var CheckoutSession + */ protected $checkoutSession; + + /** + * @var array + */ + private $pixInfo; + /** * Link constructor. * @param Context $context @@ -61,12 +70,56 @@ protected function getPayment() return $this->getLastOrder()->getPayment(); } + /** + * @return bool + */ + public function showPixInformation() + { + return !empty($this->getPixInfo()); + } + + /** + * @return mixed + */ + public function getPixUrl() + { + return $this->getPixInfo()['qr_code_url'] ?? ''; + } + + /** + * @return mixed + */ + public function getPixQrCode() + { + return $this->getPixInfo()['qr_code'] ?? ''; + } + /** * @return string */ - public function getPixInfo() + public function getErrorCopyMessage() { - $pixHelper = new PixHelper(); - return $pixHelper->getQrCode($this->getPayment()); + return __('Failed to copy! Please, manually copy the code using the field bellow the button.'); + } + + /** + * @return string + */ + public function getSuccessMessage() + { + return __('Copied PIX code!'); + } + + /** + * @return array + */ + private function getPixInfo() + { + if (empty($this->pixInfo)) { + $pixHelper = new PixHelper(); + $this->pixInfo = $pixHelper->getQrCode($this->getPayment()); + } + + return $this->pixInfo; } } diff --git a/i18n/en_US.csv b/i18n/en_US.csv index b0b00ed4..80c4ff9a 100644 --- a/i18n/en_US.csv +++ b/i18n/en_US.csv @@ -300,4 +300,10 @@ "Canceled Amount","Canceled Amount" "Refunded Amount","Refunded Amount" "Capture","Capture" -"Cancel","Cancel" +"Cancel","Cancel", +"Failed to copy! Please, manually copy the code using the field bellow the button.","Failed to copy! Please, manually copy the code using the field bellow the button." +"Copied PIX code!","Copied PIX code!" +"Copy PIX code","Copy PIX code" +"Open your bank app","Open your bank app" +"Scan the QR Code","Scan the QR Code" +"Confirm the payment","Confirm the payment" diff --git a/i18n/pt_BR.csv b/i18n/pt_BR.csv index e74a8584..a6d6343f 100644 --- a/i18n/pt_BR.csv +++ b/i18n/pt_BR.csv @@ -479,4 +479,10 @@ "Canceled Amount","Valor Cancelado" "Refunded Amount","Valor Reembolsado" "Capture","Capturar" -"Cancel","Cancelar" +"Cancel","Cancelar", +"Failed to copy! Please, manually copy the code using the field bellow the button.","Falha ao copiar! Por favor, copie o código manualmente utilizando o campo abaixo do botão." +"Copied PIX code!","Código PIX copiado!" +"Copy PIX code","Copiar código PIX" +"Open your bank app","Abra o app do seu banco" +"Scan the QR Code","Escaneie o QR Code" +"Confirm the payment","Confirme o pagamento" diff --git a/view/frontend/layout/checkout_onepage_success.xml b/view/frontend/layout/checkout_onepage_success.xml index 2090b0ae..f25748f6 100755 --- a/view/frontend/layout/checkout_onepage_success.xml +++ b/view/frontend/layout/checkout_onepage_success.xml @@ -9,6 +9,9 @@ */ --> + + + getPixInfo(); -if (!empty($pixInfo)): +/** + * @var \Pagarme\Pagarme\Block\Payment\Pix $block + */ +if ($block->showPixInformation()): ?>
-
- -
- +
+
+ pix logo
- - - -
- - - +
+ pix qr code
- - - -
- -
-
+
+ - Copiar - código PIX - + +
-
- - - -
-
-
Abra o app do seu banco
-
- 1
+
+
+
+
1
-
-
Escaneie o QR Code
-
- 2
+
+
+
2
-
-
Confirme o pagamento
-
- 3
+
+
+
3
-
- - - \ No newline at end of file + diff --git a/view/frontend/web/css/pagarme_success_page.css b/view/frontend/web/css/pagarme_success_page.css new file mode 100644 index 00000000..efdcfc0c --- /dev/null +++ b/view/frontend/web/css/pagarme_success_page.css @@ -0,0 +1,64 @@ +.pix-wrapper { + margin: 0 auto; + width: 360px; +} + +.pix-wrapper .pix-logo-wrapper { + margin: 0 auto 30px; + text-align: center; +} + +.pix-wrapper .qr-code-wrapper { + margin: 0 auto 10px; + text-align: center; +} + +.pix-wrapper .copy-qr-code-wrapper { + margin: 0 auto 0; + min-height: 10px; + text-align: center; +} + +.pix-wrapper .copy-qr-code-wrapper .copy-inline { + display: inline-block; + padding-bottom: 32px; +} + +.pix-wrapper .copy-qr-code-wrapper .copy-inline svg { + display: inline-block; + vertical-align: middle; + margin: 0 5px 0 0; + width: 20px; +} + +.pix-wrapper .copy-qr-code-wrapper .copy-inline a { + display: inline-block; + vertical-align: middle; + margin: 0 5px 0 0; + cursor: pointer; +} + +.pix-wrapper .copy-qr-code-wrapper .copy-inline input { + margin: 1.5em 0; + display: none; +} + +.pix-wrapper .pix-instructions-wrapper { + margin: 0 auto 30px; + text-align: center; +} + +.pix-wrapper .pix-instructions-wrapper .pix-instruction { + display: inline-block; + vertical-align: top; + margin: 0 10px; + width: 25%; +} + +.pix-wrapper .pix-instructions-wrapper .pix-instruction .pix-instruction-number { + display: inline-block; + background-color: gainsboro; + border-radius: 50%; + padding: 10px 15px; + margin-top: 10px; +} diff --git a/view/frontend/web/js/view/payment/checkout/success/pix.js b/view/frontend/web/js/view/payment/checkout/success/pix.js new file mode 100644 index 00000000..122ce3ac --- /dev/null +++ b/view/frontend/web/js/view/payment/checkout/success/pix.js @@ -0,0 +1,39 @@ +define(['jquery'], ($) => { + return (config) => { + $('.copy-pix').click(async () => { + const qrCodeJqueryElement = $('#pagarme_qr_code'); + + if (qrCodeJqueryElement.length < 1) { + return; + } + + const rawCode = qrCodeJqueryElement.attr("value"); + const alternativeCopyQrCode = () => { + qrCodeJqueryElement.show(); + qrCodeJqueryElement.focus(); + qrCodeJqueryElement.select(); + alert(config.errorCopyMessage); + }; + + if (window.isSecureContext && navigator.clipboard) { + try { + await navigator.clipboard.writeText(rawCode); + alert(config.successCopyMessage); + } catch (err) { + alternativeCopyQrCode(rawCode); + } + return; + } + + const [qrCodeDOMElement] = qrCodeJqueryElement; + qrCodeDOMElement.select(); + qrCodeDOMElement.setSelectionRange(0, qrCodeJqueryElement.val().length); + try { + document.execCommand('copy', false); + alert(config.successCopyMessage); + } catch (err) { + alternativeCopyQrCode(rawCode); + } + }); + }; +}); From b0417a76be0eba10068a33c81df2a0ab4f0a173c Mon Sep 17 00:00:00 2001 From: Mateus Picoloto Date: Mon, 24 Jul 2023 19:10:52 -0300 Subject: [PATCH 2/3] removing unnecessary parameter passage --- view/frontend/web/js/view/payment/checkout/success/pix.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/view/frontend/web/js/view/payment/checkout/success/pix.js b/view/frontend/web/js/view/payment/checkout/success/pix.js index 122ce3ac..3438a6ab 100644 --- a/view/frontend/web/js/view/payment/checkout/success/pix.js +++ b/view/frontend/web/js/view/payment/checkout/success/pix.js @@ -20,7 +20,7 @@ define(['jquery'], ($) => { await navigator.clipboard.writeText(rawCode); alert(config.successCopyMessage); } catch (err) { - alternativeCopyQrCode(rawCode); + alternativeCopyQrCode(); } return; } @@ -32,7 +32,7 @@ define(['jquery'], ($) => { document.execCommand('copy', false); alert(config.successCopyMessage); } catch (err) { - alternativeCopyQrCode(rawCode); + alternativeCopyQrCode(); } }); }; From 0d95b549304b47a23809b4556dd4cdfe09d1180e Mon Sep 17 00:00:00 2001 From: Mateus Picoloto Date: Tue, 25 Jul 2023 09:59:00 -0300 Subject: [PATCH 3/3] injecting PixHelper via di --- Block/Payment/Pix.php | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/Block/Payment/Pix.php b/Block/Payment/Pix.php index c2a74038..845e34de 100644 --- a/Block/Payment/Pix.php +++ b/Block/Payment/Pix.php @@ -29,14 +29,20 @@ class Pix extends Template */ private $pixInfo; + /** + * @var PixHelper + */ + private $pixHelper; + /** * Link constructor. * @param Context $context * @param CheckoutSession $checkoutSession */ - public function __construct(Context $context, CheckoutSession $checkoutSession) + public function __construct(Context $context, CheckoutSession $checkoutSession, PixHelper $pixHelper) { $this->checkoutSession = $checkoutSession; + $this->pixHelper = $pixHelper; parent::__construct($context, []); } @@ -116,8 +122,7 @@ public function getSuccessMessage() private function getPixInfo() { if (empty($this->pixInfo)) { - $pixHelper = new PixHelper(); - $this->pixInfo = $pixHelper->getQrCode($this->getPayment()); + $this->pixInfo = $this->pixHelper->getQrCode($this->getPayment()); } return $this->pixInfo;