\n {/* Header */}\n

\n {step === 'details' && 'Shipping Details'}\n {step === 'payment' && 'Payment Details'}\n {step === 'processing' && 'Processing...'}\n

\n \n ×\n \n

\n\n {/* Trainer Summary */}\n

\n {\n const target = e.target as HTMLImageElement;\n target.src = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(trainer.brand + ' ' + trainer.name + ' trainers')}`;\n }}\n />\n

{trainer.name}

{trainer.brand} • Size {trainer.size}

£{trainer.price}

\n\n {/* Step Content */}\n

\n {step === 'details' && (\n

\n Full Name\n setCustomerDetails({ ...customerDetails, name: e.target.value })}\n className=\"input-genz\"\n placeholder=\"Your full name\"\n />\n {errors.name &&

{errors.name}

}\n

\n\n

\n Email\n setCustomerDetails({ ...customerDetails, email: e.target.value })}\n className=\"input-genz\"\n placeholder=\"your@email.com\"\n />\n {errors.email &&

{errors.email}

}\n

\n\n

\n Address Line 1\n setCustomerDetails({\n ...customerDetails,\n address: { ...customerDetails.address, line1: e.target.value }\n })}\n className=\"input-genz\"\n placeholder=\"Street address\"\n />\n {errors.address &&

{errors.address}

}\n

\n\n

\n Address Line 2 (Optional)\n setCustomerDetails({\n ...customerDetails,\n address: { ...customerDetails.address, line2: e.target.value }\n })}\n className=\"input-genz\"\n placeholder=\"Apartment, suite, etc.\"\n />\n

\n\n

\n City\n setCustomerDetails({\n ...customerDetails,\n address: { ...customerDetails.address, city: e.target.value }\n })}\n className=\"input-genz\"\n placeholder=\"City\"\n />\n {errors.city &&

{errors.city}

}\n

\n\n

\n Postal Code\n setCustomerDetails({\n ...customerDetails,\n address: { ...customerDetails.address, postalCode: e.target.value }\n })}\n className=\"input-genz\"\n placeholder=\"Postal code\"\n />\n {errors.postalCode &&

{errors.postalCode}

}\n

\n\n \n

\n )}\n\n {step === 'payment' && (\n

\n Card Number\n setCardDetails({ ...cardDetails, number: formatCardNumber(e.target.value) })}\n className=\"input-genz\"\n placeholder=\"1234 5678 9012 3456\"\n maxLength={19}\n />\n {errors.cardNumber &&

{errors.cardNumber}

}\n

\n\n

\n Expiry Date\n setCardDetails({ ...cardDetails, expiry: formatExpiry(e.target.value) })}\n className=\"input-genz\"\n placeholder=\"MM/YY\"\n maxLength={5}\n />\n {errors.expiry &&

{errors.expiry}

}\n

\n\n

\n CVC\n setCardDetails({ ...cardDetails, cvc: e.target.value.replace(/\\D/g, '') })}\n className=\"input-genz\"\n placeholder=\"123\"\n maxLength={4}\n />\n {errors.cvc &&

{errors.cvc}

}\n

\n\n

\n Cardholder Name\n setCardDetails({ ...cardDetails, name: e.target.value })}\n className=\"input-genz\"\n placeholder=\"Name on card\"\n />\n {errors.cardName &&

{errors.cardName}

}\n

\n\n {errors.payment && (\n

{errors.payment}

\n )}\n\n

\n setStep('details')}\n className=\"flex-1 px-4 py-3 rounded-xl border border-white/30 text-white font-semibold hover:bg-white/10 transition-colors\"\n >\n Back\n \n \n

\n )}\n\n {step === 'processing' && (\n

Processing your payment...

Please don't close this window

\n )}\n

\n );\n};\n\nexport default PaymentModal;","deleted","label",[176,177,157],"frontend","components","permalink","https://www.val.town/x/MRPRRSIDENT/Paymentsys/code/frontend/components/PaymentModal.tsx","extension","actionData","errors"]