From f2f39f4c223391dda24f2d4273ebd87ddd885ef9 Mon Sep 17 00:00:00 2001
From: mzivil <158518982+mzivil@users.noreply.github.com>
Date: Sat, 3 Feb 2024 16:42:10 -0500
Subject: [PATCH] fix clicks on billing types label not toggling correct radio

Currently, all the billing types radios are being assigned the
same "billingType" id, so clicking on any of the labels
always selects the monthly one. If you inspect the HTML, all the
billing type labels have 'for="billingType"' which is how the HTML
knows which input to select.

We have to keep the "name" attribute the same because that's how
the input values are linked to the billingType form field.

To fix, we explicitly assign the "id" prop for each radio so
that the <label>'s "for" attribute is tied to the correct
radio input.
---
 components/territory-form.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/territory-form.js b/components/territory-form.js
index d84701ff..960878fc 100644
--- a/components/territory-form.js
+++ b/components/territory-form.js
@@ -172,6 +172,7 @@ export default function TerritoryForm ({ sub }) {
               label='100k sats/month'
               value='MONTHLY'
               name='billingType'
+              id='monthly-checkbox'
               readOnly={!!sub}
               handleChange={checked => checked && setBilling('monthly')}
               groupClassName='ms-1 mb-0'
@@ -182,6 +183,7 @@ export default function TerritoryForm ({ sub }) {
               label='1m sats/year'
               value='YEARLY'
               name='billingType'
+              id='yearly-checkbox'
               readOnly={!!sub}
               handleChange={checked => checked && setBilling('yearly')}
               groupClassName='ms-1 mb-0'
@@ -192,6 +194,7 @@ export default function TerritoryForm ({ sub }) {
               label='3m sats once'
               value='ONCE'
               name='billingType'
+              id='once-checkbox'
               readOnly={!!sub}
               handleChange={checked => checked && setBilling('once')}
               groupClassName='ms-1 mb-0'