Update QR codes to look like banktransfer module

pretix · Mar 3, 2023 · 5f95529 · 5f95529
1 parent 1c684ad
commit 5f95529
Showing 1 changed file with 25 additions and 18 deletions.
diff --git a/pretix_mollie/templates/pretix_mollie/pending.html b/pretix_mollie/templates/pretix_mollie/pending.html
@@ -24,16 +24,18 @@
                     {% trans "After you sent the bank transfer, you can close this window. We will send you an email as soon as we received your payment." %}
                 </p>
             </div>
-            <div class="col-md-3 col-sm-6 hidden-xs text-center">
-                BezahlCode<br>
-                <a href="bank://singlepaymentsepa?name={{ payment_info.details.bankName|urlencode }}&iban={{ payment_info.details.bankAccount }}&bic={{ payment_info.details.bankBic }}&amount={{ payment.amount|commadecimal }}&reason={{ payment_info.details.transferReference }}&currency={{ event.currency }}">
-                    <script type="text/plain" data-size="150" data-replace-with-qr>bank://singlepaymentsepa?name={{ payment_info.details.bankName|urlencode }}&iban={{ payment_info.details.bankAccount }}&bic={{ payment_info.details.bankBic }}&amount={{ payment.amount|commadecimal }}&reason={{ payment_info.details.transferReference }}&currency={{ event.currency }}</script>
-                </a>
-                <p>&nbsp;</p>
-            </div>
-            <div class="col-md-3 col-sm-6 hidden-xs text-center">
-                GiroCode / EPC-QR<br>
-                <script type="text/plain" data-size="150" data-replace-with-qr>BCD
+            <div class="col-md-6 col-sm-6 hidden-xs text-center js-only blank-after">
+                <ul class="nav nav-tabs" id="banktransfer_qrcodes_tabs" role="tablist">
+                    <li class="active"><a href="#banktransfer_qrcodes_girocode" role="tab" id="banktransfer_qrcodes_girocode_tab" data-toggle="tab" aria-controls="banktransfer_qrcodes_girocode" aria-expanded="true">EPC-QR</a></li>
+                    <li><a href="#banktransfer_qrcodes_bezahlcode" role="tab" id="banktransfer_qrcodes_bezahlcode_tab" data-toggle="tab" aria-controls="banktransfer_qrcodes_bezahlcode" aria-expanded="false">BezahlCode</a></li>
+                </ul>
+                <div class="tab-content" id="banktransfer_qrcodes_tabs_content">
+                    <div id="banktransfer_qrcodes_girocode" class="tab-pane fade active in" role="tabpanel" aria-labelledby="banktransfer_qrcodes_girocode_tab">
+                        <p class="small">
+                            {% trans "Scan the qr-code with your banking app" %}
+                        </p>
+                        <p>
+                            <script type="text/plain" data-size="150" data-replace-with-qr>BCD
 002
 2
 SCT
@@ -46,14 +48,19 @@
 {{ payment_info.details.transferReference }}
 
                 </script>
-            </div>
-            <div class="visible-xs-block text-center">
-                <p>
-                    <a href="bank://singlepaymentsepa?name={{ payment_info.details.bankName|urlencode }}&iban={{ payment_info.details.bankAccount }}&bic={{ payment_info.details.bankBic }}&amount={{ payment.amount|commadecimal }}&reason={{ payment_info.details.transferReference }}&currency={{ event.currency }}" class="btn btn-default">
-                        {% trans "Open banking app" %}
-                    </a><br>
-                    <small>{% trans "Requires that the app supports BezahlCode" %}</small>
-                </p>
+                        </p>
+                    </div>
+                    <div id="banktransfer_qrcodes_bezahlcode" class="tab-pane fade" role="tabpanel" aria-labelledby="banktransfer_qrcodes_bezahlcode_tab">
+                        <p class="small">
+                            {% trans "Scan the qr-code with your banking app" %}
+                        </p>
+                        <p>
+                            <a aria-label="{% trans "Open BezahlCode in your banking app to start the payment process." %}" href="bank://singlepaymentsepa?name={{ payment_info.details.bankName|urlencode }}&iban={{ payment_info.details.bankAccount }}&bic={{ payment_info.details.bankBic }}&amount={{ payment.amount|commadecimal }}&reason={{ payment_info.details.transferReference }}&currency={{ event.currency }}">
+                                <script type="text/plain" data-size="150" data-replace-with-qr>bank://singlepaymentsepa?name={{ payment_info.details.bankName|urlencode }}&iban={{ payment_info.details.bankAccount }}&bic={{ payment_info.details.bankBic }}&amount={{ payment.amount|commadecimal }}&reason={{ payment_info.details.transferReference }}&currency={{ event.currency }}</script>
+                            </a>
+                        </p>
+                    </div>
+                </div>
             </div>
         </div>
     {% else %}