From 497f0f791ae9d0b332cb02bcb7fd876163e5f070 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 22:41:51 +0100
Subject: [PATCH] fix: hide mollie spinners, add placeholders, errors only on
 submit, sliding interval toggle

---
 components/checkout/PaymentForm.tsx | 44 ++++++++++++++---------------
 components/checkout/PlanSummary.tsx | 44 ++++++++++++++---------------
 2 files changed, 43 insertions(+), 45 deletions(-)

diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 9b0ae0d..b3d5b5f 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -17,8 +17,8 @@ interface PaymentFormProps {
 
 const inputClass =
   'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-2.5 text-sm text-white placeholder:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-brand-orange focus:border-brand-orange transition-colors'
-const mollieFieldClass =
-  'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-2.5 h-[42px] transition-colors focus-within:ring-1 focus-within:ring-brand-orange focus-within:border-brand-orange'
+const mollieFieldBase =
+  'w-full rounded-lg border border-neutral-700 bg-neutral-800/50 px-3 py-2.5 h-[42px] transition-all focus-within:ring-1 focus-within:ring-brand-orange focus-within:border-brand-orange'
 
 export default function PaymentForm({ plan, interval, limit }: PaymentFormProps) {
   const router = useRouter()
@@ -31,7 +31,7 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
   const [mollieError, setMollieError] = useState(false)
   const [formError, setFormError] = useState<string | null>(null)
   const [cardErrors, setCardErrors] = useState<Record<string, string>>({})
-  const [touchedFields, setTouchedFields] = useState<Set<string>>(new Set())
+  const [submitted, setSubmitted] = useState(false)
   const [submitting, setSubmitting] = useState(false)
 
   const componentsRef = useRef<Record<string, MollieComponent | null>>({
@@ -56,26 +56,25 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
       }
 
       try {
-        const fields: Array<{ type: string; selector: string }> = [
-          { type: 'cardHolder', selector: '#mollie-card-holder' },
-          { type: 'cardNumber', selector: '#mollie-card-number' },
-          { type: 'expiryDate', selector: '#mollie-card-expiry' },
-          { type: 'verificationCode', selector: '#mollie-card-cvc' },
+        const fields: Array<{ type: string; selector: string; placeholder?: string }> = [
+          { type: 'cardHolder', selector: '#mollie-card-holder', placeholder: 'John Doe' },
+          { type: 'cardNumber', selector: '#mollie-card-number', placeholder: '1234 5678 9012 3456' },
+          { type: 'expiryDate', selector: '#mollie-card-expiry', placeholder: 'MM / YY' },
+          { type: 'verificationCode', selector: '#mollie-card-cvc', placeholder: 'CVC' },
         ]
 
-        for (const { type, selector } of fields) {
+        for (const { type, selector, placeholder } of fields) {
           const el = document.querySelector(selector) as HTMLElement | null
           if (!el) {
             setMollieError(true)
             return
           }
-          const component = mollie.createComponent(type, { styles: MOLLIE_FIELD_STYLES })
+          const opts: Record<string, unknown> = { styles: MOLLIE_FIELD_STYLES }
+          if (placeholder) opts.placeholder = placeholder
+          const component = mollie.createComponent(type, opts)
           component.mount(el)
           component.addEventListener('change', (event: unknown) => {
-            const e = event as { error?: string; touched?: boolean }
-            if (e.touched) {
-              setTouchedFields((prev) => new Set(prev).add(type))
-            }
+            const e = event as { error?: string }
             setCardErrors((prev) => {
               const next = { ...prev }
               if (e.error) next[type] = e.error
@@ -104,6 +103,7 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
   }, [])
 
   const handleSubmit = async (e: React.FormEvent) => {
+    setSubmitted(true)
     e.preventDefault()
     setFormError(null)
     if (!country) {
@@ -162,8 +162,8 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         {/* Cardholder name */}
         <div className="mb-4">
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Cardholder name</label>
-          <div id="mollie-card-holder" className={mollieFieldClass} />
-          {touchedFields.has('cardHolder') && cardErrors.cardHolder && (
+          <div id="mollie-card-holder" className={`${mollieFieldBase} ${mollieReady ? 'opacity-100' : 'opacity-0'}`} />
+          {submitted && cardErrors.cardHolder && (
             <p className="mt-1 text-xs text-red-400">{cardErrors.cardHolder}</p>
           )}
         </div>
@@ -171,8 +171,8 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         {/* Card number */}
         <div className="mb-4">
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Card number</label>
-          <div id="mollie-card-number" className={mollieFieldClass} />
-          {touchedFields.has('cardNumber') && cardErrors.cardNumber && (
+          <div id="mollie-card-number" className={`${mollieFieldBase} ${mollieReady ? 'opacity-100' : 'opacity-0'}`} />
+          {submitted && cardErrors.cardNumber && (
             <p className="mt-1 text-xs text-red-400">{cardErrors.cardNumber}</p>
           )}
         </div>
@@ -181,15 +181,15 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         <div className="mb-4 grid grid-cols-2 gap-4">
           <div>
             <label className="block text-sm font-medium text-neutral-300 mb-1.5">Expiry date</label>
-            <div id="mollie-card-expiry" className={mollieFieldClass} />
-            {touchedFields.has('expiryDate') && cardErrors.expiryDate && (
+            <div id="mollie-card-expiry" className={`${mollieFieldBase} ${mollieReady ? 'opacity-100' : 'opacity-0'}`} />
+            {submitted && cardErrors.expiryDate && (
               <p className="mt-1 text-xs text-red-400">{cardErrors.expiryDate}</p>
             )}
           </div>
           <div>
             <label className="block text-sm font-medium text-neutral-300 mb-1.5">CVC</label>
-            <div id="mollie-card-cvc" className={mollieFieldClass} />
-            {touchedFields.has('verificationCode') && cardErrors.verificationCode && (
+            <div id="mollie-card-cvc" className={`${mollieFieldBase} ${mollieReady ? 'opacity-100' : 'opacity-0'}`} />
+            {submitted && cardErrors.verificationCode && (
               <p className="mt-1 text-xs text-red-400">{cardErrors.verificationCode}</p>
             )}
           </div>
diff --git a/components/checkout/PlanSummary.tsx b/components/checkout/PlanSummary.tsx
index 5982492..f9af880 100644
--- a/components/checkout/PlanSummary.tsx
+++ b/components/checkout/PlanSummary.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
+import { motion } from 'framer-motion'
 import { Check } from '@phosphor-icons/react'
 import {
   TRAFFIC_TIERS,
@@ -83,29 +84,26 @@ export default function PlanSummary({ plan, interval, limit }: PlanSummaryProps)
       </div>
 
       {/* Interval toggle */}
-      <div className="mb-6 flex rounded-lg bg-neutral-800/60 p-1">
-        <button
-          type="button"
-          onClick={() => handleIntervalToggle('month')}
-          className={`flex-1 rounded-md px-4 py-2 text-sm font-medium transition-colors ${
-            currentInterval === 'month'
-              ? 'bg-neutral-700 text-white shadow-sm'
-              : 'text-neutral-400 hover:text-neutral-200'
-          }`}
-        >
-          Monthly
-        </button>
-        <button
-          type="button"
-          onClick={() => handleIntervalToggle('year')}
-          className={`flex-1 rounded-md px-4 py-2 text-sm font-medium transition-colors ${
-            currentInterval === 'year'
-              ? 'bg-neutral-700 text-white shadow-sm'
-              : 'text-neutral-400 hover:text-neutral-200'
-          }`}
-        >
-          Yearly
-        </button>
+      <div className="mb-6 flex items-center gap-1 p-1 bg-neutral-800/50 rounded-xl">
+        {(['month', 'year'] as const).map((iv) => (
+          <button
+            key={iv}
+            type="button"
+            onClick={() => handleIntervalToggle(iv)}
+            className={`relative flex-1 px-4 py-2 text-sm font-medium rounded-lg transition-colors duration-200 ${
+              currentInterval === iv ? 'text-white' : 'text-neutral-400 hover:text-white'
+            }`}
+          >
+            {currentInterval === iv && (
+              <motion.div
+                layoutId="checkout-interval-bg"
+                className="absolute inset-0 bg-neutral-700 rounded-lg shadow-sm"
+                transition={{ type: 'spring', bounce: 0.15, duration: 0.35 }}
+              />
+            )}
+            <span className="relative z-10">{iv === 'month' ? 'Monthly' : 'Yearly'}</span>
+          </button>
+        ))}
       </div>
 
       {/* Divider */}