Server Actions in Next.js 16 — Missing useActionState Allowed Double-Submit Payments

// ============================================
// Server Action with useActionState
// ============================================

'use client'

import { useActionState } from 'react'
import { checkout } from './actions'
import { ZodFieldErrors } from './types'

// ---- Initial state type ----

interface CheckoutState {
  success: boolean
  errors?: ZodFieldErrors
  message?: string
  idempotencyKey?: string
}

const initialState: CheckoutState = {
  success: false,
}

// ---- Form component with pending state ----

export function CheckoutForm({ cartId }: { cartId: string }) {
  const [state, formAction, isPending] = useActionState(
    checkout,
    initialState
  )

  // Generate idempotency key on mount — ensures uniqueness per form mount
  const idempotencyKey = useMemo(
    () => `${cartId}-${Date.now()}`,
    [cartId]
  )

  return (
    <form action={formAction}>
      {/* Pass idempotency key as hidden field */}
      <input
        type="hidden"
        name="idempotencyKey"
        value={idempotencyKey}
      />

      <label htmlFor="email">Email</label>
      <input
        id="email"
        name="email"
        type="email"
        required
        aria-describedby={state.errors?.email ? 'email-error' : undefined}
      />
      {state.errors?.email && (
        <p id="email-error" className="text-red-500 text-sm">
          {state.errors.email}
        </p>
      )}

      <label htmlFor="card">Card Number</label>
      <input id="card" name="card" type="text" required />
      {state.errors?.card && (
        <p className="text-red-500 text-sm">{state.errors.card}</p>
      )}

      <button
        type="submit"
        disabled={isPending}
        className="w-full rounded bg-blue-600 py-2 text-white disabled:opacity-50"
      >
        {isPending ? 'Processing Payment...' : 'Pay Now'}
      </button>

      {state.success && (
        <p className="text-green-600 mt-2">
          Payment successful! Order #{state.message}
        </p>
      )}

      {state.errors?.form && (
        <p className="text-red-500 mt-2">{state.errors.form}</p>
      )}
    </form>
  )
}

// ============================================
// Shared Schema: Used on Client and Server
// ============================================

import { z } from 'zod'

// ---- Shared schema ----

export const checkoutSchema = z.object({
  email: z
    .string()
    .email('Please enter a valid email address')
    .min(1, 'Email is required'),
  card: z
    .string()
    .regex(/^\d{16}$/, 'Card number must be 16 digits'),
  cvv: z
    .string()
    .regex(/^\d{3,4}$/, 'CVV must be 3 or 4 digits'),
  idempotencyKey: z.string().min(1, 'Invalid form session'),
})

export type CheckoutInput = z.infer<typeof checkoutSchema>

// ---- Field error type for form display ----

export type ZodFieldErrors = Partial<
  Record<keyof CheckoutInput | 'form', string>
>

// ---- Server Action with Zod validation ----

'use server'

import { checkoutSchema, ZodFieldErrors } from './schema'
import { revalidateTag } from 'next/cache'

interface CheckoutState {
  success: boolean
  errors?: ZodFieldErrors
  message?: string
}

export async function checkout(
  prevState: CheckoutState,
  formData: FormData
): Promise<CheckoutState> {
  // Validate with safeParse — no throw
  const result = checkoutSchema.safeParse({
    email: formData.get('email'),
    card: formData.get('card'),
    cvv: formData.get('cvv'),
    idempotencyKey: formData.get('idempotencyKey'),
  })

  if (!result.success) {
    // Map Zod errors to field names
    const fieldErrors: ZodFieldErrors = {}
    for (const issue of result.error.issues) {
      const field = issue.path[0] as keyof ZodFieldErrors
      fieldErrors[field] = issue.message
    }

    return {
      success: false,
      errors: fieldErrors,
    }
  }

  // Process payment (simplified)
  try {
    const payment = await processPayment(result.data)

    revalidateTag('orders')

    return {
      success: true,
      message: payment.orderId,
    }
  } catch (error) {
    return {
      success: false,
      errors: {
        form: error instanceof Error
          ? error.message
          : 'Payment processing failed. Please try again.',
      },
    }
  }
}

async function processPayment(data: CheckoutInput) {
  // ... payment gateway call
  return { orderId: 'ORD-123' }
}

// ============================================
// Progressively Enhanced Form
// ============================================

'use client'

import { useActionState } from 'react'
import { subscribe } from './actions'

interface SubscribeState {
  success: boolean
  message: string
  errors?: {
    email?: string
    form?: string
  }
}

const initialState: SubscribeState = {
  success: false,
  message: '',
}

// ---- This form works with OR without JavaScript ----

export function NewsletterForm() {
  const [state, formAction, isPending] = useActionState(
    subscribe,
    initialState
  )

  return (
    <form action={formAction} className="flex gap-2">
      {/* Standard HTML input — works without JS */}
      <label htmlFor="newsletter-email" className="sr-only">
        Email address
      </label>
      <input
        id="newsletter-email"
        name="email"
        type="email"
        placeholder="you@example.com"
        required
        className="rounded border px-3 py-2"
        aria-describedby={
          state.errors?.email ? 'email-error' : undefined
        }
      />

      {/* Submit button — disabled while pending (JS only) */}
      <button
        type="submit"
        disabled={isPending}
        className="rounded bg-black px-4 py-2 text-white disabled:opacity-50"
      >
        {isPending ? 'Subscribing...' : 'Subscribe'}
      </button>

      {/* Success/error messages */}
      {state.success && !isPending && (
        <p className="text-green-600">{state.message}</p>
      )}
      {state.errors?.form && !isPending && (
        <p className="text-red-500">{state.errors.form}</p>
      )}
      {state.errors?.email && (
        <p id="email-error" className="text-red-500 text-sm">
          {state.errors.email}
        </p>
      )}
    </form>
  )
}

// ============================================
// Cache Revalidation After Server Actions
// ============================================

'use server'

import { revalidatePath, revalidateTag } from 'next/cache'
import { z } from 'zod'
import { db } from '@/lib/db'

// ---- Update product title with cache invalidation ----

const updateProductSchema = z.object({
  slug: z.string().min(1),
  title: z.string().min(1, 'Title is required').max(200),
})

interface UpdateState {
  success: boolean
  errors?: Record<string, string>
}

export async function updateProduct(
  prevState: UpdateState,
  formData: FormData
): Promise<UpdateState> {
  const result = updateProductSchema.safeParse({
    slug: formData.get('slug'),
    title: formData.get('title'),
  })

  if (!result.success) {
    return { success: false, errors: { form: 'Invalid input' } }
  }

  await db.query(
    'UPDATE products SET title = $1 WHERE slug = $2',
    [result.data.title, result.data.slug]
  )

  // === CRITICAL: Invalidate cache ===
  revalidatePath(`/products/${result.data.slug}`) // Full Route Cache
  revalidateTag(`product-${result.data.slug}`) // Data Cache
  revalidateTag('products') // All product queries

  return { success: true }
}

// ---- For list pages: revalidate the listing ----

export async function deleteProduct(
  prevState: { success: boolean },
  formData: FormData
) {
  const slug = formData.get('slug') as string

  await db.query('DELETE FROM products WHERE slug = $1', [slug])

  // Revalidate the list page and the product detail page
  revalidatePath('/products')
  revalidatePath(`/products/${slug}`)
  revalidateTag('products')

  return { success: true }
}

// ============================================
// Multi-Step Checkout with Server Actions
// ============================================

'use client'

import { useActionState } from 'react'
import { processCheckoutStep } from './actions'

interface CheckoutStep {
  email?: string
  shipping?: {
    address: string
    city: string
    zip: string
  }
  payment?: {
    card: string
    cvv: string
  }
}

interface CheckoutState {
  step: number
  data: CheckoutStep
  errors?: Record<string, string>
  success?: boolean
}

const initialState: CheckoutState = {
  step: 1,
  data: {},
}

export function CheckoutWizard() {
  const [state, formAction, isPending] = useActionState(
    processCheckoutStep,
    initialState
  )

  if (state.success) {
    return <p className="text-green-600">Order placed successfully!</p>
  }

  return (
    <form action={formAction}>
      <input type="hidden" name="step" value={state.step} />
      <input
        type="hidden"
        name="accumulatedData"
        value={JSON.stringify(state.data)}
      />

      {state.step === 1 && (
        <div>
          <h2>Step 1: Contact</h2>
          <input name="email" type="email" defaultValue={state.data.email} />
          {state.errors?.email && <p className="text-red-500">{state.errors.email}</p>}
        </div>
      )}

      {state.step === 2 && <div>{/* Shipping fields */}</div>}
      {state.step === 3 && <div>{/* Payment fields */}</div>}

      <button type="submit" disabled={isPending}>
        {isPending ? 'Processing...' : state.step < 3 ? 'Next' : 'Place Order'}
      </button>
    </form>
  )
}

// ============================================
// Error Handling Patterns
// ============================================

'use server'

import { revalidateTag } from 'next/cache'
import { z } from 'zod'
import { db } from '@/lib/db'

interface ActionState {
  success: boolean
  error?: {
    type: 'validation' | 'business' | 'system'
    message: string
    fields?: Record<string, string>
  }
}

// ---- Structured error handling ----

export async function placeOrder(
  prevState: ActionState,
  formData: FormData
): Promise<ActionState> {
  try {
    const schema = z.object({
      productId: z.string().min(1),
      quantity: z.coerce.number().min(1).max(99),
    })

    const result = schema.safeParse({
      productId: formData.get('productId'),
      quantity: formData.get('quantity'),
    })

    if (!result.success) {
      return {
        success: false,
        error: {
          type: 'validation',
          message: 'Please check the form fields.',
          fields: result.error.issues.reduce(
            (acc, issue) => ({
              ...acc,
              [issue.path[0]]: issue.message,
            }),
            {} as Record<string, string>
          ),
        },
      }
    }

    // Business logic check
    const product = await db.query(
      'SELECT * FROM products WHERE id = $1',
      [result.data.productId]
    )

    if (!product) {
      return {
        success: false,
        error: {
          type: 'business',
          message: 'This product is no longer available.',
        },
      }
    }

    if (product.stock < result.data.quantity) {
      return {
        success: false,
        error: {
          type: 'business',
          message: `Only ${product.stock} items in stock. Please reduce your quantity.`,
        },
      }
    }

    await db.query(
      'INSERT INTO orders (product_id, quantity) VALUES ($1, $2)',
      [result.data.productId, result.data.quantity]
    )

    revalidateTag('products')
    revalidateTag('orders')

    return { success: true }
  } catch (error) {
    console.error('Order placement failed:', error)

    // System error — user-friendly message
    return {
      success: false,
      error: {
        type: 'system',
        message:
          'We encountered an error processing your order. Please try again. If the issue persists, contact support.',
      },
    }
  }
}