package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -35,7 +35,6 @@
     ]
   },
   "devDependencies": {
-    "html-react-parser": "^5.2.5",
+    "html-react-parser": "^5.2.5"
-    "react-imask": "^7.6.1"
   }
 }

src/BandForm.js

@@ -1,5 +1,4 @@
 import { useState, useRef } from 'react';
-import { IMaskInput } from 'react-imask';
 
 const CentsInADollar = 100;
 const DefaultTotal = 0;
@@ -22,11 +21,12 @@ function BandForm({ band }) {
     const formData = new FormData(formRef.current);
     const ticketQuantities = formData.getAll('ticketQuantity');
 
-    const total = ticketQuantities.reduce((total, quantity, index) => {
-      return total += (band.ticketTypes[index].cost * quantity);
-    }, 0)
 
-    setTotal(total > 0 ? total : 0)
+    setTotal(
+      ticketQuantities.reduce((total, quantity, index) => {
+        return total += (band.ticketTypes[index].cost * quantity);
+      }, 0)
+    )
   }
 
   return (
@@ -50,7 +50,6 @@ function BandForm({ band }) {
                 id={name}
                 type="number"
                 step="1"
-                min="0"
                 onChange={ticketQuantityChanged}
               />
             </div>
@@ -67,14 +66,12 @@ function BandForm({ band }) {
       <div className="information">
         <div className="form-row">
           <input
-            required
             name="first_name"
             label="First Name"
             placeholder="First Name"
             type="text"
           />
           <input
-            required
             name="last_name"
             label="Last Name"
             placeholder="Last Name"
@@ -82,8 +79,6 @@ function BandForm({ band }) {
           />
         </div>
         <input
-          required
-          {/* TODO: third party library address verification */}
           name="address"
           label="Address"
           placeholder="Address"
@@ -93,39 +88,6 @@ function BandForm({ band }) {
 
       <fieldset className="payment">
         <legend>Payment Details</legend>
-
-        <IMaskInput
-          required
-          mask="0000 0000 0000 0000"
-          {/* TODO: regex pattern */}
-          name="cardNumber"
-          label="Card Number"
-          placeholder="0000 0000 0000 0000"
-          type="text"
-        ></IMaskInput>
-
-        <div className="form-row">
-          <IMaskInput
-            required
-            {/* TODO: regex pattern */}
-            mask="00 / 00"
-            pattern="\d*"
-            name="cardExpiration"
-            label="Card Expiration (MM/YY)"
-            placeholder="MM / YY"
-            type="text"
-          ></IMaskInput>
-
-          <IMaskInput
-            required
-            {/* TODO: regex pattern */}
-            mask={Number}
-            name="cardCVV"
-            label="Card CVV"
-            placeholder="CVV"
-            type="text"
-          ></IMaskInput>
-        </div>
       </fieldset>
 
       <button type="submit" disabled={formIsPending}>Get Tickets</button>

src/index.css

@@ -112,9 +112,5 @@ h4 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-md);
-
-    legend {
-      margin-bottom: var(--spacing-md);
-    }
   }
 }