From 48f71ee65b019043e81a5880ad68503146cecacb Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 26 Mar 2026 22:33:30 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20checkout=20UI=20polish=20=E2=80=94=20bra?=
 =?UTF-8?q?nd=20colors,=20Pulse=20Select,=20logo,=20touched-only=20errors,?=
 =?UTF-8?q?=20no=20skeletons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/checkout/page.tsx               | 13 ++++---
 components/checkout/PaymentForm.tsx | 57 +++++++++--------------------
 components/checkout/PlanSummary.tsx |  6 +--
 3 files changed, 28 insertions(+), 48 deletions(-)

diff --git a/app/checkout/page.tsx b/app/checkout/page.tsx
index d93e67f..87613ef 100644
--- a/app/checkout/page.tsx
+++ b/app/checkout/page.tsx
@@ -11,7 +11,7 @@ import { getSubscription } from '@/lib/api/billing'
 import { PLAN_PRICES, TRAFFIC_TIERS } from '@/lib/plans'
 import PlanSummary from '@/components/checkout/PlanSummary'
 import PaymentForm from '@/components/checkout/PaymentForm'
-import pulseLogo from '@/public/pulse_logo_no_margins.png'
+import pulseIcon from '@/public/pulse_icon_no_margins.png'
 
 // ---------------------------------------------------------------------------
 // Validation helpers
@@ -174,15 +174,16 @@ function CheckoutContent() {
     <div className="flex min-h-screen flex-col">
       {/* Header */}
       <div className="px-6 py-5">
-        <Link href="/pricing" className="inline-block">
+        <Link href="/pricing" className="flex items-center gap-2 w-fit hover:opacity-80 transition-opacity">
           <Image
-            src={pulseLogo}
+            src={pulseIcon}
             alt="Pulse"
-            width={90}
-            height={28}
+            width={36}
+            height={36}
             unoptimized
-            className="opacity-80 hover:opacity-100 transition-opacity"
+            className="object-contain w-8 h-8"
           />
+          <span className="text-xl font-bold text-white tracking-tight">Pulse</span>
         </Link>
       </div>
 
diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 1add585..9b0ae0d 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import Script from 'next/script'
 import { Lock, ShieldCheck } from '@phosphor-icons/react'
+import { Select } from '@ciphera-net/ui'
 import { COUNTRY_OPTIONS } from '@/lib/countries'
 import { initMollie, getMollie, MOLLIE_FIELD_STYLES, type MollieComponent } from '@/lib/mollie'
 import { createEmbeddedCheckout } from '@/lib/api/billing'
@@ -30,6 +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 [submitting, setSubmitting] = useState(false)
 
   const componentsRef = useRef<Record<string, MollieComponent | null>>({
@@ -71,6 +73,9 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
           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))
+            }
             setCardErrors((prev) => {
               const next = { ...prev }
               if (e.error) next[type] = e.error
@@ -157,13 +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 className="relative">
-            <div id="mollie-card-holder" className={mollieFieldClass} />
-            {!mollieReady && (
-              <div className="absolute inset-0 animate-pulse bg-neutral-700/30 rounded-lg" />
-            )}
-          </div>
-          {cardErrors.cardHolder && (
+          <div id="mollie-card-holder" className={mollieFieldClass} />
+          {touchedFields.has('cardHolder') && cardErrors.cardHolder && (
             <p className="mt-1 text-xs text-red-400">{cardErrors.cardHolder}</p>
           )}
         </div>
@@ -171,13 +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 className="relative">
-            <div id="mollie-card-number" className={mollieFieldClass} />
-            {!mollieReady && (
-              <div className="absolute inset-0 animate-pulse bg-neutral-700/30 rounded-lg" />
-            )}
-          </div>
-          {cardErrors.cardNumber && (
+          <div id="mollie-card-number" className={mollieFieldClass} />
+          {touchedFields.has('cardNumber') && cardErrors.cardNumber && (
             <p className="mt-1 text-xs text-red-400">{cardErrors.cardNumber}</p>
           )}
         </div>
@@ -186,25 +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 className="relative">
-              <div id="mollie-card-expiry" className={mollieFieldClass} />
-              {!mollieReady && (
-                <div className="absolute inset-0 animate-pulse bg-neutral-700/30 rounded-lg" />
-              )}
-            </div>
-            {cardErrors.expiryDate && (
+            <div id="mollie-card-expiry" className={mollieFieldClass} />
+            {touchedFields.has('expiryDate') && 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 className="relative">
-              <div id="mollie-card-cvc" className={mollieFieldClass} />
-              {!mollieReady && (
-                <div className="absolute inset-0 animate-pulse bg-neutral-700/30 rounded-lg" />
-              )}
-            </div>
-            {cardErrors.verificationCode && (
+            <div id="mollie-card-cvc" className={mollieFieldClass} />
+            {touchedFields.has('verificationCode') && cardErrors.verificationCode && (
               <p className="mt-1 text-xs text-red-400">{cardErrors.verificationCode}</p>
             )}
           </div>
@@ -213,18 +198,12 @@ export default function PaymentForm({ plan, interval, limit }: PaymentFormProps)
         {/* Country */}
         <div className="mb-4">
           <label className="block text-sm font-medium text-neutral-300 mb-1.5">Country</label>
-          <select
+          <Select
             value={country}
-            onChange={(e) => setCountry(e.target.value)}
-            className={`${inputClass} appearance-none`}
-          >
-            <option value="">Select country</option>
-            {COUNTRY_OPTIONS.map((c) => (
-              <option key={c.value} value={c.value}>
-                {c.label}
-              </option>
-            ))}
-          </select>
+            onChange={setCountry}
+            variant="input"
+            options={[{ value: '', label: 'Select country' }, ...COUNTRY_OPTIONS.map((c) => ({ value: c.value, label: c.label }))]}
+          />
         </div>
 
         {/* VAT ID */}
diff --git a/components/checkout/PlanSummary.tsx b/components/checkout/PlanSummary.tsx
index 7a6eab7..5982492 100644
--- a/components/checkout/PlanSummary.tsx
+++ b/components/checkout/PlanSummary.tsx
@@ -57,7 +57,7 @@ export default function PlanSummary({ plan, interval, limit }: PlanSummaryProps)
       {/* Plan header */}
       <div className="flex items-center gap-3 mb-6">
         <h2 className="text-xl font-semibold text-white capitalize">{plan}</h2>
-        <span className="rounded-full bg-orange-500/15 px-3 py-0.5 text-xs font-medium text-orange-400">
+        <span className="rounded-full bg-brand-orange/15 px-3 py-0.5 text-xs font-medium text-brand-orange">
           30-day trial
         </span>
       </div>
@@ -75,7 +75,7 @@ export default function PlanSummary({ plan, interval, limit }: PlanSummaryProps)
             <span className="text-sm text-neutral-400">
               &euro;{displayPrice.toFixed(2)} billed yearly
             </span>
-            <span className="rounded-full bg-orange-500/15 px-2.5 py-0.5 text-xs font-medium text-orange-400">
+            <span className="rounded-full bg-brand-orange/15 px-2.5 py-0.5 text-xs font-medium text-brand-orange">
               Save 1 month
             </span>
           </div>
@@ -115,7 +115,7 @@ export default function PlanSummary({ plan, interval, limit }: PlanSummaryProps)
       <ul className="space-y-3">
         {features.map((feature) => (
           <li key={feature} className="flex items-center gap-3 text-sm text-neutral-300">
-            <Check weight="bold" className="h-4 w-4 shrink-0 text-orange-400" />
+            <Check weight="bold" className="h-4 w-4 shrink-0 text-brand-orange" />
             {feature}
           </li>
         ))}