blocks-dusted 0.1.10 → 0.1.11

package/templates/blocks/DD-Thanks/Component.tsx

@@ -0,0 +1,500 @@
+'use client'
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import Link from 'next/link'
+import {
+  Check,
+  DownloadCloud,
+  Home,
+  LayoutGrid,
+  MailCheck,
+  ShieldCheck,
+  Sparkles
+} from 'lucide-react'
+import { cn } from '@/utilities/ui'
+
+type InfoPill = {
+  id?: string | null
+  label?: string | null
+  icon?: 'mail' | 'download' | 'shield' | null
+}
+
+type CtaLink = {
+  label?: string | null
+  href?: string | null
+  variant?: 'primary' | 'secondary' | null
+  icon?: 'home' | 'grid' | 'download' | null
+}
+
+type ThanksConfettiProps = {
+  sectionId?: string | null
+  customCSS?: string | null
+  headline?: string | null
+  description?: string | null
+  subDescription?: string | null
+  replayLabel?: string | null
+  brandLabel?: string | null
+  showBrandLabel?: boolean | null
+  showReplayButton?: boolean | null
+  autoPlayConfetti?: boolean | null
+  confettiDuration?: number | null
+  infoPills?: InfoPill[] | null
+  ctaLinks?: CtaLink[] | null
+  className?: string
+  disableInnerContainer?: boolean
+}
+
+type ConfettiParticle = {
+  x: number
+  y: number
+  vx: number
+  vy: number
+  size: number
+  rotation: number
+  rotationSpeed: number
+  color: string
+  shape: 'circle' | 'square'
+  life: number
+  maxLife: number
+}
+
+const CONFETTI_COLORS = ['#d6d3d1', '#a8a29e', '#10b981', '#6ee7b7', '#ffffff', '#f5f5f4']
+
+const defaultInfoPills: Required<Pick<InfoPill, 'label' | 'icon'>>[] = [
+  { icon: 'mail', label: 'Confirmation sent' },
+  { icon: 'download', label: 'Files ready' },
+  { icon: 'shield', label: 'License activated' }
+]
+
+const defaultCtaLinks: Required<Pick<CtaLink, 'label' | 'href' | 'variant' | 'icon'>>[] = [
+  { label: 'Back to Home', href: '/', variant: 'primary', icon: 'home' },
+  { label: 'Continue Browsing', href: '/components', variant: 'secondary', icon: 'grid' }
+]
+
+function PillIcon({ icon }: { icon?: InfoPill['icon'] }) {
+  if (icon === 'download') return <DownloadCloud className="h-3.5 w-3.5" />
+  if (icon === 'shield') return <ShieldCheck className="h-3.5 w-3.5" />
+
+  return <MailCheck className="h-3.5 w-3.5" />
+}
+
+function CtaIcon({ icon }: { icon?: CtaLink['icon'] }) {
+  if (icon === 'grid') return <LayoutGrid className="h-4 w-4" />
+  if (icon === 'download') return <DownloadCloud className="h-4 w-4" />
+
+  return <Home className="h-4 w-4" />
+}
+
+function getSafeDuration(duration?: number | null) {
+  if (typeof duration !== 'number' || !Number.isFinite(duration)) return 3000
+  return Math.min(Math.max(duration, 1000), 8000)
+}
+
+function createParticles({
+  amount,
+  originX,
+  originY,
+  angle,
+  spread,
+  velocity,
+  width,
+  height
+}: {
+  amount: number
+  originX: number
+  originY: number
+  angle?: number
+  spread: number
+  velocity: number
+  width: number
+  height: number
+}): ConfettiParticle[] {
+  return Array.from({ length: amount }, () => {
+    const baseAngle = typeof angle === 'number' ? angle : Math.random() * 360
+    const randomAngle = (baseAngle - spread / 2 + Math.random() * spread) * (Math.PI / 180)
+    const speed = velocity * (0.45 + Math.random() * 0.75)
+
+    return {
+      x: originX * width,
+      y: originY * height,
+      vx: Math.cos(randomAngle) * speed,
+      vy: Math.sin(randomAngle) * speed,
+      size: 4 + Math.random() * 7,
+      rotation: Math.random() * Math.PI,
+      rotationSpeed: -0.22 + Math.random() * 0.44,
+      color: CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)] ?? '#ffffff',
+      shape: Math.random() > 0.5 ? 'circle' : 'square',
+      life: 0,
+      maxLife: 90 + Math.random() * 70
+    }
+  })
+}
+
+export function DDThanks({
+  sectionId,
+  headline = 'Thank you! 🎉',
+  description = 'Your order has been confirmed and is on its way.',
+  subDescription = "We've sent a confirmation email with your download links and license keys. Check your inbox — and maybe your spam folder too.",
+  replayLabel = 'Replay confetti',
+  brandLabel = 'DesignsDusted',
+  showBrandLabel = true,
+  showReplayButton = true,
+  autoPlayConfetti = true,
+  confettiDuration = 3000,
+  infoPills,
+  ctaLinks,
+  className
+}: ThanksConfettiProps) {
+  const hasRun = useRef(false)
+  const canvasRef = useRef<HTMLCanvasElement | null>(null)
+  const animationRef = useRef<number | null>(null)
+  const particlesRef = useRef<ConfettiParticle[]>([])
+  const [visible, setVisible] = useState(false)
+
+  const pills = useMemo(() => {
+    const source = infoPills?.length ? infoPills : defaultInfoPills
+    return source.filter((pill) => pill.label)
+  }, [infoPills])
+
+  const links = useMemo(() => {
+    const source = ctaLinks?.length ? ctaLinks : defaultCtaLinks
+    return source.filter((link) => link.label && link.href)
+  }, [ctaLinks])
+
+  const stopAnimation = useCallback(() => {
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current)
+      animationRef.current = null
+    }
+  }, [])
+
+  const fireConfetti = useCallback(() => {
+    const canvas = canvasRef.current
+    const ctx = canvas?.getContext('2d')
+    if (!canvas || !ctx) return
+
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    if (reducedMotion) return
+
+    const pixelRatio = Math.min(window.devicePixelRatio || 1, 2)
+    const width = window.innerWidth
+    const height = window.innerHeight
+
+    canvas.width = width * pixelRatio
+    canvas.height = height * pixelRatio
+    canvas.style.width = `${width}px`
+    canvas.style.height = `${height}px`
+    ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0)
+
+    const duration = getSafeDuration(confettiDuration)
+    const end = performance.now() + duration
+
+    particlesRef.current = [
+      ...particlesRef.current,
+      ...createParticles({
+        amount: 120,
+        originX: 0.5,
+        originY: 0.5,
+        spread: 100,
+        velocity: 20,
+        width,
+        height
+      }),
+      ...createParticles({
+        amount: 60,
+        originX: 0,
+        originY: 0.6,
+        angle: -35,
+        spread: 70,
+        velocity: 18,
+        width,
+        height
+      }),
+      ...createParticles({
+        amount: 60,
+        originX: 1,
+        originY: 0.6,
+        angle: 215,
+        spread: 70,
+        velocity: 18,
+        width,
+        height
+      })
+    ]
+
+    stopAnimation()
+
+    const frame = (now: number) => {
+      ctx.clearRect(0, 0, width, height)
+
+      if (now < end && Math.random() > 0.35) {
+        particlesRef.current.push(
+          ...createParticles({
+            amount: 2,
+            originX: 0,
+            originY: 0.3,
+            angle: -25,
+            spread: 55,
+            velocity: 10,
+            width,
+            height
+          }),
+          ...createParticles({
+            amount: 2,
+            originX: 1,
+            originY: 0.3,
+            angle: 205,
+            spread: 55,
+            velocity: 10,
+            width,
+            height
+          })
+        )
+      }
+
+      particlesRef.current = particlesRef.current.filter((particle) => {
+        particle.life += 1
+        particle.x += particle.vx
+        particle.y += particle.vy
+        particle.vy += 0.28
+        particle.vx *= 0.992
+        particle.rotation += particle.rotationSpeed
+
+        const opacity = Math.max(0, 1 - particle.life / particle.maxLife)
+        if (opacity <= 0 || particle.y > height + 40) return false
+
+        ctx.save()
+        ctx.globalAlpha = opacity
+        ctx.translate(particle.x, particle.y)
+        ctx.rotate(particle.rotation)
+        ctx.fillStyle = particle.color
+
+        if (particle.shape === 'circle') {
+          ctx.beginPath()
+          ctx.arc(0, 0, particle.size * 0.5, 0, Math.PI * 2)
+          ctx.fill()
+        } else {
+          ctx.fillRect(-particle.size / 2, -particle.size / 2, particle.size, particle.size)
+        }
+
+        ctx.restore()
+        return true
+      })
+
+      if (particlesRef.current.length || now < end) {
+        animationRef.current = requestAnimationFrame(frame)
+      } else {
+        ctx.clearRect(0, 0, width, height)
+        animationRef.current = null
+      }
+    }
+
+    animationRef.current = requestAnimationFrame(frame)
+  }, [confettiDuration, stopAnimation])
+
+  useEffect(() => {
+    if (hasRun.current) return
+    hasRun.current = true
+
+    const timer = window.setTimeout(() => {
+      setVisible(true)
+      if (autoPlayConfetti !== false) fireConfetti()
+    }, 200)
+
+    return () => window.clearTimeout(timer)
+  }, [autoPlayConfetti, fireConfetti])
+
+  useEffect(() => {
+    return () => {
+      stopAnimation()
+      particlesRef.current = []
+    }
+  }, [stopAnimation])
+
+  return (
+    <section
+      id={sectionId ?? undefined}
+      className={cn(
+        'thanks-confetti-section relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-stone-950 px-4 py-24 text-center',
+        className
+      )}
+    >
+      <canvas
+        ref={canvasRef}
+        aria-hidden="true"
+        className="pointer-events-none fixed inset-0 z-[60] h-screen w-screen"
+      />
+
+      <div className="pointer-events-none absolute inset-0">
+        <div
+          className="absolute inset-0 opacity-20"
+          style={{
+            backgroundImage:
+              'radial-gradient(circle at 20% 50%, rgba(16,185,129,0.12) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255,255,255,0.05) 0%, transparent 50%)'
+          }}
+        />
+        <div
+          className="absolute inset-0 opacity-5"
+          style={{
+            backgroundImage:
+              'linear-gradient(rgba(255,255,255,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.5) 1px, transparent 1px)',
+            backgroundSize: '60px 60px'
+          }}
+        />
+      </div>
+
+      <div
+        className="relative z-10 flex w-full max-w-lg flex-col items-center px-2"
+        style={{
+          opacity: visible ? 1 : 0,
+          transform: visible ? 'translateY(0) scale(1)' : 'translateY(32px) scale(0.96)',
+          transition:
+            'opacity 0.7s cubic-bezier(0.34,1.56,0.64,1), transform 0.7s cubic-bezier(0.34,1.56,0.64,1)'
+        }}
+      >
+        <div className="relative mb-8">
+          <div
+            className="flex h-24 w-24 items-center justify-center rounded-full"
+            style={{
+              background: 'linear-gradient(135deg, #10b981 0%, #6ee7b7 100%)',
+              boxShadow: '0 0 60px rgba(16,185,129,0.35), 0 0 120px rgba(16,185,129,0.15)',
+              opacity: visible ? 1 : 0,
+              transform: visible ? 'scale(1)' : 'scale(0.5)',
+              transition:
+                'opacity 0.5s ease 0.3s, transform 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.3s'
+            }}
+          >
+            <Check className="h-11 w-11 stroke-[3px] text-white" />
+          </div>
+          <div
+            className="absolute inset-0 rounded-full bg-emerald-500/20"
+            style={{
+              animation: visible
+                ? 'thanks-confetti-ping 2s cubic-bezier(0,0,0.2,1) infinite 0.8s'
+                : 'none'
+            }}
+          />
+        </div>
+
+        <div
+          style={{
+            opacity: visible ? 1 : 0,
+            transform: visible ? 'translateY(0)' : 'translateY(20px)',
+            transition: 'opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s'
+          }}
+        >
+          {headline && (
+            <h1 className="mb-3 text-4xl font-bold tracking-tight text-white md:text-5xl">
+              {headline}
+            </h1>
+          )}
+
+          {description && (
+            <p className="mb-2 text-lg leading-relaxed text-stone-400">{description}</p>
+          )}
+
+          {subDescription && (
+            <p className="mb-10 text-sm leading-relaxed text-stone-500">{subDescription}</p>
+          )}
+        </div>
+
+        {pills.length > 0 && (
+          <div
+            className="mb-10 flex flex-wrap items-center justify-center gap-3"
+            style={{
+              opacity: visible ? 1 : 0,
+              transform: visible ? 'translateY(0)' : 'translateY(16px)',
+              transition: 'opacity 0.6s ease 0.7s, transform 0.6s ease 0.7s'
+            }}
+          >
+            {pills.map((item, index) => (
+              <div
+                key={
+                  'id' in item ? (item.id ?? `${item.label}-${index}`) : `${item.label}-${index}`
+                }
+                className="flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2"
+              >
+                <span className="flex h-4 w-4 items-center justify-center text-emerald-400">
+                  <PillIcon icon={item.icon} />
+                </span>
+                <span className="whitespace-nowrap text-sm text-stone-400">{item.label}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {links.length > 0 && (
+          <div
+            className="flex w-full flex-col gap-3 sm:flex-row"
+            style={{
+              opacity: visible ? 1 : 0,
+              transform: visible ? 'translateY(0)' : 'translateY(16px)',
+              transition: 'opacity 0.6s ease 0.9s, transform 0.6s ease 0.9s'
+            }}
+          >
+            {links.map((link, index) => {
+              const isPrimary =
+                (link.variant ?? (index === 0 ? 'primary' : 'secondary')) === 'primary'
+
+              return (
+                <Link
+                  key={`${link.href}-${index}`}
+                  href={link.href ?? '#'}
+                  className={cn(
+                    'inline-flex flex-1 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg px-6 py-3.5 text-sm font-semibold transition-colors',
+                    isPrimary
+                      ? 'bg-white text-stone-900 hover:bg-stone-100'
+                      : 'border border-white/15 bg-white/10 text-white hover:bg-white/20'
+                  )}
+                >
+                  <CtaIcon icon={link.icon} />
+                  {link.label}
+                </Link>
+              )
+            })}
+          </div>
+        )}
+
+        {showReplayButton !== false && replayLabel && (
+          <div
+            className="mt-8"
+            style={{
+              opacity: visible ? 1 : 0,
+              transition: 'opacity 0.6s ease 1.1s'
+            }}
+          >
+            <button
+              type="button"
+              onClick={fireConfetti}
+              className="flex cursor-pointer items-center gap-1.5 text-xs text-stone-600 transition-colors hover:text-stone-400"
+            >
+              <Sparkles className="h-3 w-3" />
+              {replayLabel}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {showBrandLabel !== false && brandLabel && (
+        <div
+          className="absolute bottom-8 left-1/2 z-10 -translate-x-1/2 text-xs font-black uppercase tracking-[0.35em] text-stone-500"
+          style={{
+            opacity: visible ? 0.4 : 0,
+            transition: 'opacity 0.6s ease 1.2s'
+          }}
+        >
+          {brandLabel}
+        </div>
+      )}
+
+      <style>{`
+        @keyframes thanks-confetti-ping {
+          75%, 100% {
+            transform: scale(2);
+            opacity: 0;
+          }
+        }
+      `}</style>
+    </section>
+  )
+}

package/templates/blocks/DD-Thanks/README.md

@@ -0,0 +1,4 @@
+# DD-Thanks
+
+Portable first-pass conversion of `ThanksConfetti` from ROUND-TWO-CONVERSION. Project-specific roots and nested unconverted block dependencies were intentionally replaced with local rendering so the template can install into a clean Payload project.
+