-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #209 from pagarme/feature/PAOPN-456-refactor-pix-b…
…lock PAOPN-456: Refactoring pix block and template
- Loading branch information
Showing
8 changed files
with
230 additions
and
83 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,99 +1,64 @@ | ||
| <?php | ||
| $pixInfo = $this->getPixInfo(); | ||
| if (!empty($pixInfo)): | ||
| /** | ||
| * @var \Pagarme\Pagarme\Block\Payment\Pix $block | ||
| */ | ||
| if ($block->showPixInformation()): | ||
| ?> | ||
| <hr /> | ||
| <div style="margin: 0 auto; width: 420px;"> | ||
| <!-- PIX --> | ||
| <div style="margin: 0 auto 30px; text-align: center;"> | ||
| <img width="150" src="https://cdn.mundipagg.com/assets/images/site/illustrations/pix-bc-logo-2.png" alt=> | ||
| <div class="pix-wrapper"> | ||
| <div class="pix-logo-wrapper"> | ||
| <img | ||
| width="150" | ||
| src="https://cdn.mundipagg.com/assets/images/site/illustrations/pix-bc-logo-2.png" | ||
| alt="pix logo" | ||
| /> | ||
| </div> | ||
| <!-- ./PIX --> | ||
|
|
||
| <!-- QR Code --> | ||
| <div style="margin: 0 auto 10px; text-align: center;"> | ||
| <!-- SUBSTITUIR PELO QRCODE --> | ||
| <img width="200" src="<?= $pixInfo['qr_code_url']?>" /> | ||
| <!-- ./SUBSTITUIR PELO QRCODE --> | ||
| <div class="qr-code-wrapper"> | ||
| <img width="200" src="<?= $block->getPixUrl(); ?>" alt="pix qr code" /> | ||
| </div> | ||
| <!-- ./QR Code --> | ||
|
|
||
| <!-- AÇÕES --> | ||
| <div style="margin: 0 auto 0px; min-height: 10px; text-align: center;"> | ||
| <!-- COPIAR --> | ||
| <div style="display: inline-block;"> | ||
| <svg style="display: inline-block; vertical-align: middle; margin: 0 5px 0 0; width: 20px" aria-hidden="true" | ||
| focusable="false" data-prefix="fas" data-icon="copy" class="svg-inline--fa fa-copy fa-w-14" role="img" | ||
| xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> | ||
| <div class="copy-qr-code-wrapper"> | ||
| <div class="copy-inline"> | ||
| <svg aria-hidden="true" | ||
| focusable="false" | ||
| data-prefix="fas" | ||
| data-icon="copy" | ||
| class="svg-inline--fa fa-copy fa-w-14 copy-pix" | ||
| role="img" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 448 512"> | ||
| <path fill="blue" | ||
| d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"> | ||
| </path> | ||
| </svg> | ||
| <a onclick="copyQrCode()" style="display: inline-block; vertical-align: middle; margin: 0 5px 0 0; cursor: pointer;">Copiar | ||
| código PIX</a> | ||
| <input style="opacity: 0; user-select: none; pointer-events: none;" type="text" value="<?= $pixInfo['qr_code']?>" id="mp_qr_code" /> | ||
| <a class="copy-pix"><?= __('Copy PIX code'); ?></a> | ||
| <input id="pagarme_qr_code" type="text" value="<?= $block->getPixQrCode() ?>" /> | ||
| </div> | ||
| <!-- ./COPIAR --> | ||
| </div> | ||
| <!-- ./AÇÕES --> | ||
|
|
||
| <!-- INSTRUÇÕES --> | ||
| <div style="margin: 0 auto 30px; text-align: center;"> | ||
| <div style="display: inline-block; vertical-align: top; margin: 0 10px; width: 25%;"> | ||
| <div>Abra o app do seu banco</div> | ||
| <div style="display: inline-block;background-color: gainsboro;border-radius: 50%;padding: 10px 15px;margin-top: 10px;"> | ||
| 1</div> | ||
| <div class="pix-instructions-wrapper"> | ||
| <div class="pix-instruction"> | ||
| <div><?= __('Open your bank app'); ?></div> | ||
| <div class="pix-instruction-number">1</div> | ||
| </div> | ||
|
|
||
| <div style="display: inline-block; vertical-align: top; margin: 0 10px; width: 25%;"> | ||
| <div>Escaneie o QR Code</div> | ||
| <div style="display: inline-block;background-color: gainsboro;border-radius: 50%;padding: 10px 15px;margin-top: 10px;"> | ||
| 2</div> | ||
| <div class="pix-instruction"> | ||
| <div><?= __('Scan the QR Code'); ?></div> | ||
| <div class="pix-instruction-number">2</div> | ||
| </div> | ||
|
|
||
| <div style="display: inline-block; vertical-align: top; margin: 0 10px; width: 25%;"> | ||
| <div>Confirme o pagamento</div> | ||
| <div style="display: inline-block;background-color: gainsboro;border-radius: 50%;padding: 10px 15px;margin-top: 10px;"> | ||
| 3</div> | ||
| <div class="pix-instruction"> | ||
| <div><?= __('Confirm the payment'); ?></div> | ||
| <div class="pix-instruction-number">3</div> | ||
| </div> | ||
| </div> | ||
| <!-- ./INSTRUÇÕES --> | ||
| </div> | ||
|
|
||
| <script> | ||
| window.copyQrCode = async function() { | ||
| const qrCodeElement = document.getElementById("mp_qr_code"); | ||
|
|
||
| if (!qrCodeElement) { | ||
| return; | ||
| } | ||
|
|
||
| const rawCode = qrCodeElement.getAttribute("value"); | ||
| const alternativeCopyQrCode = (rawCode) => { | ||
| qrCodeElement.setAttribute("style", "margin: 1.5em 0;") | ||
| qrCodeElement.focus(); | ||
| qrCodeElement.select(); | ||
| alert("Falha ao copiar! Por favor, copie o código manualmente utilizando o campo abaixo do botão."); | ||
| }; | ||
|
|
||
| if (window.isSecureContext && navigator.clipboard) { | ||
| try { | ||
| await navigator.clipboard.writeText(rawCode); | ||
| alert("Código PIX copiado!"); | ||
| } catch (err) { | ||
| alternativeCopyQrCode(rawCode); | ||
| <script type="text/x-magento-init"> | ||
| { | ||
| "*": { | ||
| "pixCheckoutSuccess": { | ||
| "errorCopyMessage": "<?= $block->getErrorCopyMessage(); ?>", | ||
| "successCopyMessage": "<?= $block->getSuccessMessage(); ?>" | ||
| } | ||
| return; | ||
| } | ||
|
|
||
| qrCodeElement.select(); | ||
| qrCodeElement.setSelectionRange(0, 99999); | ||
| try { | ||
| document.execCommand('copy', false); | ||
| alert("Código PIX copiado!"); | ||
| } catch (err) { | ||
| alternativeCopyQrCode(rawCode); | ||
| } | ||
| } | ||
| </script> | ||
| <?php endif ?> | ||
| <?php endif ?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| } | ||
| }); | ||
| }; | ||
| }); |