diff --git a/Block/Payment/Pix.php b/Block/Payment/Pix.php index 7f6a997e..43f0bdd0 100644 --- a/Block/Payment/Pix.php +++ b/Block/Payment/Pix.php @@ -17,17 +17,33 @@ use Magento\Sales\Api\Data\OrderInterface as Order; use Magento\Sales\Api\Data\OrderPaymentInterface as Payment; use Pagarme\Pagarme\Helper\Payment\Pix as PixHelper; + class Pix extends Template { + /** + * @var CheckoutSession + */ protected $checkoutSession; + + /** + * @var array + */ + 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, []); } @@ -61,12 +77,55 @@ 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 __('PIX code copied!'); + } + + /** + * @return array + */ + private function getPixInfo() + { + if (empty($this->pixInfo)) { + $this->pixInfo = $this->pixHelper->getQrCode($this->getPayment()); + } + + return $this->pixInfo; } } diff --git a/i18n/en_US.csv b/i18n/en_US.csv index b0b00ed4..404250ef 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." +"PIX code copied!","PIX code copied!" +"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..45a172b7 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." +"PIX code copied!","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..3438a6ab --- /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(); + } + return; + } + + const [qrCodeDOMElement] = qrCodeJqueryElement; + qrCodeDOMElement.select(); + qrCodeDOMElement.setSelectionRange(0, qrCodeJqueryElement.val().length); + try { + document.execCommand('copy', false); + alert(config.successCopyMessage); + } catch (err) { + alternativeCopyQrCode(); + } + }); + }; +});