payment info gathering

package.json

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

src/BandForm.js

@@ -1,4 +1,5 @@
 import { useState, useRef } from 'react';
+import { IMaskInput } from 'react-imask';
 
 const CentsInADollar = 100;
 const DefaultTotal = 0;
@@ -21,12 +22,11 @@ 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(
-      ticketQuantities.reduce((total, quantity, index) => {
-        return total += (band.ticketTypes[index].cost * quantity);
-      }, 0)
-    )
+    setTotal(total > 0 ? total : 0)
   }
 
   return (
@@ -50,6 +50,7 @@ function BandForm({ band }) {
                 id={name}
                 type="number"
                 step="1"
+                min="0"
                 onChange={ticketQuantityChanged}
               />
             </div>
@@ -66,12 +67,14 @@ 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"
@@ -79,6 +82,8 @@ function BandForm({ band }) {
           />
         </div>
         <input
+          required
+          {/* TODO: third party library address verification */}
           name="address"
           label="Address"
           placeholder="Address"
@@ -88,6 +93,39 @@ 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,5 +112,9 @@ h4 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-md);
+
+    legend {
+      margin-bottom: var(--spacing-md);
+    }
   }
 }