From 9f2f0a29c8daa3f53e763acabdad7ecd4427dd56 Mon Sep 17 00:00:00 2001
From: Dominik Hebeler <dominik@hebeler.club>
Date: Wed, 26 Apr 2023 17:01:58 +0200
Subject: [PATCH] report validity workaround for mobile

---
 pass/lang/de/order.json                      | 1 +
 pass/public/styles/key/checkout-payment.less | 3 +++
 pass/resources/js/checkout_paypal.js         | 7 ++++++-
 pass/views/templates/revocation.ejs          | 1 +
 4 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/pass/lang/de/order.json b/pass/lang/de/order.json
index a449d2a..ce124f7 100644
--- a/pass/lang/de/order.json
+++ b/pass/lang/de/order.json
@@ -41,6 +41,7 @@
   },
   "revocation": {
     "input": {
+      "error": "Dieses Feld ist erforderlich",
       "label": "Ich stimme der Ausführung des Vertrages vor Ablauf der Widerrufsfrist ausdrücklich zu. Ich habe zur Kenntnis genommen, dass das <a href=\"{{revocation_link}}\" target=\"_blank\">Widerrufsrecht</a> mit Beginn der Ausführung des Vertrages erlischt. Stattdessen gewähren wir Ihnen ein freiwilliges <a href=\"{{refundlink}}\" target=\"_blank\">30-tägiges Rückgaberecht</a>."
     }
   },
diff --git a/pass/public/styles/key/checkout-payment.less b/pass/public/styles/key/checkout-payment.less
index 2705ea0..b1326ed 100644
--- a/pass/public/styles/key/checkout-payment.less
+++ b/pass/public/styles/key/checkout-payment.less
@@ -103,6 +103,9 @@
     display: grid;
     gap: 1rem;
     margin: 1rem 0;
+    > div.error {
+      display: none;
+    }
   }
   #paypal-payment-card #paypal-card-form {
     display: grid;
diff --git a/pass/resources/js/checkout_paypal.js b/pass/resources/js/checkout_paypal.js
index ee19b9e..fecea2f 100644
--- a/pass/resources/js/checkout_paypal.js
+++ b/pass/resources/js/checkout_paypal.js
@@ -86,9 +86,14 @@ function get_paypal_checkout_data(funding_source) {
     fundingSource: funding_source,
     onClick: () => {
       let revocation_checkbox = document.getElementById("revocation");
+      console.log(revocation_checkbox);
       if (!revocation_checkbox.checkValidity()) {
-        revocation_checkbox.reportValidity();
+        if (!revocation_checkbox.reportValidity()) {
+          document.querySelector("#revocation-container > div.revocation-required-error").style.display = "block";
+        }
         return;
+      } else {
+        document.querySelector("#revocation-container > div.revocation-required-error").style.display = "none";
       }
     },
     createOrder: () => {
diff --git a/pass/views/templates/revocation.ejs b/pass/views/templates/revocation.ejs
index 1077425..8d2e43b 100644
--- a/pass/views/templates/revocation.ejs
+++ b/pass/views/templates/revocation.ejs
@@ -1,3 +1,4 @@
+<div class="error revocation-required-error"><%= req.t("revocation.input.error", {ns: "order"}) _%></div>
 <div class="input-group checkbox">
   <input type="checkbox" name="revocation" id="revocation" required />
   <label for="revocation"><%- req.t("revocation.input.label", {ns: "order", revocation_link: `${baseDir}/agb#revocation`, refundlink: `${baseDir}/agb#refund`}) _%></label>
-- 
GitLab