Require attentation of compatibility if ordering without PCSC

Stephen Paul Weber created

Change summary

views/esim_adapter.slim | 12 ++++++++++++
1 file changed, 12 insertions(+)

Detailed changes

views/esim_adapter.slim 🔗

@@ -31,6 +31,11 @@
 				}
 			});
 
+			document.querySelector("input[name=pcsc_quantity]").addEventListener("change", (e) => {
+				document.querySelector("#compatible").style.display = e.target.value < 1 ? "flex" : "none";
+				document.querySelector("#compatible input").required = e.target.value < 1;
+			});
+
 			country.trigger("change", document.querySelector("select[name=country-name]").value);
 		});
 
@@ -66,6 +71,9 @@ scss:
 			padding: 0.5em;
 			font-size: 1.2em;
 		}
+		#compatible input {
+			flex: 0 0 2em;
+		}
 	}
 	.htmx-indicator {
 		margin-top: 1em;
@@ -117,6 +125,10 @@ section data-hx-get="/esim-adapter/total" data-hx-trigger="input delay:1s,change
 		input type="hidden" name="atfd" value=antifraud
 		input type="hidden" name="braintree_nonce"
 
+		label.half#compatible
+			span I have verified that my Android device is compatible with <a target="_blank" href="https://jmp.chat/esim-adapter">the app</a>
+			input type="checkbox" required=true
+
 		button Place Order
 
 javascript: