From bd9c7239abf378ad1db1065ef3280d28f2a934a1 Mon Sep 17 00:00:00 2001
From: Nathan Chapman <nchapman@iworq.com>
Date: Fri, 30 Dec 2022 13:33:08 -0700
Subject: [PATCH] Add subscription form validation

---
 src/static/scripts/subscriptions.js           | 31 ++++++++++++++-----
 .../storefront/subscription/form.html         |  2 +-
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/static/scripts/subscriptions.js b/src/static/scripts/subscriptions.js
index b883041..5dc9c7e 100644
--- a/src/static/scripts/subscriptions.js
+++ b/src/static/scripts/subscriptions.js
@@ -15,6 +15,7 @@ class SubscriptionForm {
         this.total_quantity_input = this.form.querySelector('input[name=total_quantity]')
         this.total_weight_input = this.form.querySelector('input[name=total_weight]')
         this.products_and_quantities = this.form.querySelector('input[name=products_and_quantities]')
+        this.submitBtn = this.form.querySelector('input[type=submit]')
 
         this.connect()
     }
@@ -22,9 +23,6 @@ class SubscriptionForm {
     connect() {
         this.form.addEventListener('change', this.change.bind(this))
         const formData = new FormData(this.form)
-        for (const input of formData) {
-            console.log(input)
-        }
     }
 
     change(event) {
@@ -49,10 +47,7 @@ class SubscriptionForm {
 
         this.checkMaxQuantity()
 
-        console.log(`${this.stripe_price_input.name}: ${this.stripe_price_input.value}`)
-        console.log(`${this.total_weight_input.name}: ${this.total_weight_input.value}`)
-        console.log(`${this.total_quantity_input.name}: ${this.total_quantity_input.value}`)
-        console.log(`${this.products_and_quantities.name}: ${this.products_and_quantities.value}`)
+        this.submitBtn.disabled = !this.isValid
     }
 
     checkMaxQuantity() {
@@ -69,6 +64,28 @@ class SubscriptionForm {
         }
     }
 
+    get isValid() {
+        return this.validate();
+    }
+
+    validate() {
+        const inputs = new Set();
+        [this.stripe_price_input,
+        this.total_quantity_input,
+        this.total_weight_input,
+        this.products_and_quantities].forEach(input => {
+            if (input.value == '') {
+                inputs.add(false)
+            }
+        });
+        if (this.total_qty < 1) {
+            inputs.add(false)
+        }
+        const valid = (inputs.has(false)) ? false : true;
+
+        return valid;
+    }
+
     get total_qty() {
         return Array.from(this.products).reduce((total, current) => {
             return total + Number(current.value)
diff --git a/src/storefront/templates/storefront/subscription/form.html b/src/storefront/templates/storefront/subscription/form.html
index 80d62cd..17b1e18 100644
--- a/src/storefront/templates/storefront/subscription/form.html
+++ b/src/storefront/templates/storefront/subscription/form.html
@@ -53,7 +53,7 @@
             <section>
                 <table class="subscription-totals"></table>
                 <p>
-                    <input type="submit" value="Continue">
+                    <input type="submit" value="Continue" disabled>
                 </p>
             </section>
         </form>