Botão copia e cola não funciona

[devaguia]

Olá! @devaguia

Acabei de identificar um problema bem crítico com um cliente, o botão de "copiar" chave pix não funciona mais, muita gente não consegue selecionar o código manualmente para copiar.

Esse botão não está funcionando, nem no Desktop e nem no mobile.

Tem algum relato sobre o problema e possível fix?

Fui ver em outros clientes e acontece a mesma coisa, não é um caso isolado.

Originally posted by @nossileee in https://github.com/YapayPagamentos/woo-yapay/issues/41#issuecomment-2145907155

[fgugna]

Olá @devaguia, gostaria de fazer uma pequena sugestão de melhoria sobre esse assunto, visando aumentar a conversão, especialmente entre o público mais velho. Esse público frequentemente relata ter dificuldade de entender que o ícone é um link para copiar o conteúdo. Deixo a seguir uma sugestão:

[LucasR0cha]

Opa Pessoal, realmente tem problema no botão, pode usar o meu código abaixo html para resolver esse problema.

`"

Vindi Intermediador

Pix Copia e Cola

Copiar Código

Escaneie o QR Code:

---

Após realizar o pagamento do PIX no seu aplicativo,você receberá a confirmação do pagamento em seu e-mail.

            <script>
            function copiarTexto(elementoId) {
                var copyText = document.getElementById(elementoId);
                copyText.select();
                navigator.clipboard.writeText(copyText.value)
                    .then(() => {
                        alert('Código copiado com sucesso!');
                    })
                    .catch(err => {
                        alert('Oops, não foi possível copiar: ' + err);
                    });
            }
            </script>
        ";`

[fgugna]

@LucasR0cha, sua solução funcionou. No entanto, outro problema relatado pelos clientes é que, no celular, ao clicar no campo com o texto do código Pix (para copiar manualmente), a tela é deslocada para a lateral, quebrando a largura da página e tornando impossível retornar ao seu centro. Testei e confirmei o problema. Resolvi temporariamente ajustando o seu código para que o campo do código Pix se expanda verticalmente, permitindo a exibição do conteúdo em várias linhas.

@devaguia, seria possível verificar também este detalhe? O plugin da Vindi está muito bom desde as últimas atualizações e com esses pequenos ajustes ficaria excelente. Obrigado!

" <div class='woocommerce-order-overview woocommerce-thankyou-order-details order_details' style='padding:20px; margin-bottom:30px;'>
  <h3><strong style='color: #6d6d6d'>Vindi Intermediador</strong></h3>
  <div style='margin: 20px 0'>
    <span>Pix Copia e Cola</span>
    <div style='display: flex; align-items: center; flex-direction: column;'>
      <textarea style='width: 100%; height: 100px; margin-bottom: 10px;' id='linhaDigitavel' readonly>". $data['qrcode_original_path'] ."</textarea>
      <button class='copiaCola' id='copiaCola' onclick='copiarTexto(\"linhaDigitavel\")'>
        <img name='imgCopy' src='{$url_image}/assets/images/copy.svg' alt='Copiar' style='width: 20px; height: 20px; margin-right: 5px;'> Copiar Código
      </button>
    </div>
  </div>
  <div style='margin: 20px 0'>
    <span><strong>Escaneie o QR Code:</strong></span>
    <div>
      <object class='qrCodeYapay' data='". $data['qrcode_path'] ."' ></object>
    </div>
  </div>
  <hr/>
  <div style='margin: 20px 0'>
    <span>Após realizar o pagamento do PIX no seu aplicativo, você receberá a confirmação do pagamento em seu e-mail.</span>
  </div>
</div>
<script>
  function copiarTexto(elementoId) {
    var copyText = document.getElementById(elementoId);
    copyText.select();
    navigator.clipboard.writeText(copyText.value)
      .then(() => {
        alert('Código copiado com sucesso!');
      })
      .catch(err => {
        alert('Oops, não foi possível copiar: ' + err);
      });
  }
</script> ";

[devaguia]

Vamos analisar e levar a correção nas próximas atualizações. Obrigado por ambas contribuições @fgugna @LucasR0cha

[fgugna]

@devaguia obrigado! Aproveito para deixar uma pequena atualização para que a mensagem informando "código copiado com sucesso" não gere um pop-up. Adaptado novamente do código fornecido pelo @LucasR0cha. Já testado em compra real e funcionando bem.

" <div class='woocommerce-order-overview woocommerce-thankyou-order-details order_details' style='padding:20px; margin-bottom:30px;'>
  <h3><strong style='color: #6d6d6d'>Vindi Intermediador</strong></h3>
  <div style='margin: 20px 0'>
    <span>Pix Copia e Cola</span>
    <div style='display: flex; align-items: center; flex-direction: column;'>
      <textarea style='width: 100%; height: 100px; margin-bottom: 10px;' id='linhaDigitavel' readonly>". $data['qrcode_original_path'] ."</textarea>
      <button class='copiaCola' id='copiaCola' onclick='copiarTexto(\"linhaDigitavel\")'>
        <img name='imgCopy' src='{$url_image}/assets/images/copy.svg' alt='Copiar' style='width: 20px; height: 20px; margin-right: 5px;'> Copiar Código
      </button>
    </div>
  </div>
  <div style='margin: 20px 0'>
    <span><strong>Escaneie o QR Code:</strong></span>
    <div>
      <object class='qrCodeYapay' data='". $data['qrcode_path'] ."' ></object>
    </div>
  </div>
  <hr/>
  <div style='margin: 20px 0'>
    <span>Após realizar o pagamento do PIX no seu aplicativo, você receberá a confirmação do pagamento em seu e-mail.</span>
  </div>
</div>

<script>
  function copiarTexto(elementoId) {
    var copyText = document.getElementById(elementoId);
    copyText.select();
    navigator.clipboard.writeText(copyText.value)
      .then(() => {
        var feedback = document.createElement('span');
        feedback.textContent = 'Código copiado com sucesso!';
        feedback.style.marginLeft = '10px'; // Ajuste o estilo conforme necessário
        feedback.style.color = 'green'; // Ajuste a cor do texto
        var button = document.getElementById('copiaCola');
        button.parentNode.insertBefore(feedback, button.nextSibling);
        setTimeout(function() {
          feedback.parentNode.removeChild(feedback);
        }, 3000); // Remove o feedback após 3 segundos
      })
      .catch(err => {
        console.error('Ops, não foi possível copiar: ', err);
        // Aqui você pode adicionar um feedback alternativo se houver falha na cópia
      });
  }
</script>

 ";