@wakastellar/ui 2.0.0 → 2.1.1

package/src/components/waka-coupon-input/index.tsx

@@ -0,0 +1,592 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Tag, Check, X, Loader2, Percent, Ticket } from "lucide-react"
+import { Button } from "../button"
+import { Input } from "../input"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface Coupon {
+  /** Unique coupon code */
+  code: string
+  /** Discount value (percentage or fixed amount) */
+  discountValue: number
+  /** Discount type */
+  discountType: "percentage" | "fixed"
+  /** Optional description */
+  description?: string
+  /** Optional expiration date */
+  expiresAt?: Date
+}
+
+export interface CouponValidationResult {
+  /** Whether the coupon is valid */
+  isValid: boolean
+  /** The coupon data if valid */
+  coupon?: Coupon
+  /** Error message if invalid */
+  errorMessage?: string
+}
+
+export interface WakaCouponInputProps {
+  /** Currently applied coupons */
+  appliedCoupons?: Coupon[]
+  /** Callback when a coupon is applied */
+  onApply?: (coupon: Coupon) => void
+  /** Callback when a coupon is removed */
+  onRemove?: (code: string) => void
+  /** Validation function that returns a promise */
+  validateCoupon?: (code: string) => Promise<CouponValidationResult>
+  /** Allow multiple coupons */
+  allowMultiple?: boolean
+  /** Maximum number of coupons (when allowMultiple is true) */
+  maxCoupons?: number
+  /** Placeholder text */
+  placeholder?: string
+  /** Apply button text */
+  applyButtonText?: string
+  /** Currency symbol for fixed discounts */
+  currencySymbol?: string
+  /** Disabled state */
+  disabled?: boolean
+  /** Size variant */
+  size?: "sm" | "md" | "lg"
+  /** Custom class name */
+  className?: string
+  /** Custom input class name */
+  inputClassName?: string
+  /** Custom button class name */
+  buttonClassName?: string
+  /** Show applied coupons list */
+  showAppliedCoupons?: boolean
+  /** Format discount display */
+  formatDiscount?: (coupon: Coupon) => string
+  /** ID for accessibility */
+  id?: string
+  /** Name attribute */
+  name?: string
+}
+
+export type CouponInputStatus = "idle" | "loading" | "success" | "error"
+
+// ============================================================================
+// Hook: useCouponInput
+// ============================================================================
+
+export interface UseCouponInputOptions {
+  /** Initial applied coupons */
+  initialCoupons?: Coupon[]
+  /** Validation function */
+  validateCoupon?: (code: string) => Promise<CouponValidationResult>
+  /** Allow multiple coupons */
+  allowMultiple?: boolean
+  /** Maximum coupons */
+  maxCoupons?: number
+  /** Callback when coupon is applied */
+  onApply?: (coupon: Coupon) => void
+  /** Callback when coupon is removed */
+  onRemove?: (code: string) => void
+  /** Reset delay after success/error (ms) */
+  statusResetDelay?: number
+}
+
+export interface UseCouponInputReturn {
+  /** Current input value */
+  inputValue: string
+  /** Set input value */
+  setInputValue: (value: string) => void
+  /** Current status */
+  status: CouponInputStatus
+  /** Error message if any */
+  errorMessage: string | null
+  /** Applied coupons */
+  appliedCoupons: Coupon[]
+  /** Apply the current input value as a coupon */
+  applyCoupon: () => Promise<void>
+  /** Remove a coupon by code */
+  removeCoupon: (code: string) => void
+  /** Clear all coupons */
+  clearAllCoupons: () => void
+  /** Reset input and status */
+  resetInput: () => void
+  /** Check if can apply more coupons */
+  canApplyMore: boolean
+  /** Check if a code is already applied */
+  isCodeApplied: (code: string) => boolean
+}
+
+export function useCouponInput(
+  options: UseCouponInputOptions = {}
+): UseCouponInputReturn {
+  const {
+    initialCoupons = [],
+    validateCoupon,
+    allowMultiple = false,
+    maxCoupons = 5,
+    onApply,
+    onRemove,
+    statusResetDelay = 2000,
+  } = options
+
+  const [inputValue, setInputValue] = React.useState("")
+  const [status, setStatus] = React.useState<CouponInputStatus>("idle")
+  const [errorMessage, setErrorMessage] = React.useState<string | null>(null)
+  const [appliedCoupons, setAppliedCoupons] =
+    React.useState<Coupon[]>(initialCoupons)
+
+  const statusTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  // Cleanup timeout on unmount
+  React.useEffect(() => {
+    return () => {
+      if (statusTimeoutRef.current) {
+        clearTimeout(statusTimeoutRef.current)
+      }
+    }
+  }, [])
+
+  const resetStatus = React.useCallback(() => {
+    if (statusTimeoutRef.current) {
+      clearTimeout(statusTimeoutRef.current)
+    }
+    statusTimeoutRef.current = setTimeout(() => {
+      setStatus("idle")
+      setErrorMessage(null)
+    }, statusResetDelay)
+  }, [statusResetDelay])
+
+  const canApplyMore = React.useMemo(() => {
+    if (!allowMultiple) {
+      return appliedCoupons.length === 0
+    }
+    return appliedCoupons.length < maxCoupons
+  }, [allowMultiple, appliedCoupons.length, maxCoupons])
+
+  const isCodeApplied = React.useCallback(
+    (code: string) => {
+      return appliedCoupons.some(
+        (c) => c.code.toUpperCase() === code.toUpperCase()
+      )
+    },
+    [appliedCoupons]
+  )
+
+  const applyCoupon = React.useCallback(async () => {
+    const code = inputValue.trim().toUpperCase()
+
+    if (!code) {
+      setStatus("error")
+      setErrorMessage("Please enter a coupon code")
+      resetStatus()
+      return
+    }
+
+    if (isCodeApplied(code)) {
+      setStatus("error")
+      setErrorMessage("This coupon is already applied")
+      resetStatus()
+      return
+    }
+
+    if (!canApplyMore) {
+      setStatus("error")
+      setErrorMessage(
+        allowMultiple
+          ? `Maximum ${maxCoupons} coupons allowed`
+          : "Only one coupon can be applied"
+      )
+      resetStatus()
+      return
+    }
+
+    setStatus("loading")
+    setErrorMessage(null)
+
+    try {
+      if (validateCoupon) {
+        const result = await validateCoupon(code)
+
+        if (result.isValid && result.coupon) {
+          setAppliedCoupons((prev) => [...prev, result.coupon!])
+          onApply?.(result.coupon)
+          setStatus("success")
+          setInputValue("")
+          resetStatus()
+        } else {
+          setStatus("error")
+          setErrorMessage(result.errorMessage || "Invalid coupon code")
+          resetStatus()
+        }
+      } else {
+        // Default behavior without validation: create a mock coupon
+        const mockCoupon: Coupon = {
+          code,
+          discountValue: 10,
+          discountType: "percentage",
+          description: "Discount applied",
+        }
+        setAppliedCoupons((prev) => [...prev, mockCoupon])
+        onApply?.(mockCoupon)
+        setStatus("success")
+        setInputValue("")
+        resetStatus()
+      }
+    } catch (error) {
+      setStatus("error")
+      setErrorMessage(
+        error instanceof Error ? error.message : "Failed to validate coupon"
+      )
+      resetStatus()
+    }
+  }, [
+    inputValue,
+    isCodeApplied,
+    canApplyMore,
+    allowMultiple,
+    maxCoupons,
+    validateCoupon,
+    onApply,
+    resetStatus,
+  ])
+
+  const removeCoupon = React.useCallback(
+    (code: string) => {
+      setAppliedCoupons((prev) =>
+        prev.filter((c) => c.code.toUpperCase() !== code.toUpperCase())
+      )
+      onRemove?.(code)
+    },
+    [onRemove]
+  )
+
+  const clearAllCoupons = React.useCallback(() => {
+    const codes = appliedCoupons.map((c) => c.code)
+    setAppliedCoupons([])
+    codes.forEach((code) => onRemove?.(code))
+  }, [appliedCoupons, onRemove])
+
+  const resetInput = React.useCallback(() => {
+    setInputValue("")
+    setStatus("idle")
+    setErrorMessage(null)
+    if (statusTimeoutRef.current) {
+      clearTimeout(statusTimeoutRef.current)
+    }
+  }, [])
+
+  return {
+    inputValue,
+    setInputValue,
+    status,
+    errorMessage,
+    appliedCoupons,
+    applyCoupon,
+    removeCoupon,
+    clearAllCoupons,
+    resetInput,
+    canApplyMore,
+    isCodeApplied,
+  }
+}
+
+// ============================================================================
+// Size configurations
+// ============================================================================
+
+const sizeConfig = {
+  sm: {
+    input: "h-8 text-xs",
+    button: "h-8 px-3 text-xs",
+    icon: "h-3.5 w-3.5",
+    tag: "text-xs py-1 px-2",
+    tagIcon: "h-3 w-3",
+  },
+  md: {
+    input: "h-9 text-sm",
+    button: "h-9 px-4 text-sm",
+    icon: "h-4 w-4",
+    tag: "text-sm py-1.5 px-3",
+    tagIcon: "h-3.5 w-3.5",
+  },
+  lg: {
+    input: "h-10 text-base",
+    button: "h-10 px-5 text-base",
+    icon: "h-5 w-5",
+    tag: "text-base py-2 px-4",
+    tagIcon: "h-4 w-4",
+  },
+}
+
+// ============================================================================
+// Component: WakaCouponInput
+// ============================================================================
+
+export function WakaCouponInput({
+  appliedCoupons: controlledAppliedCoupons,
+  onApply,
+  onRemove,
+  validateCoupon,
+  allowMultiple = false,
+  maxCoupons = 5,
+  placeholder = "Enter coupon code",
+  applyButtonText = "Apply",
+  currencySymbol = "$",
+  disabled = false,
+  size = "md",
+  className,
+  inputClassName,
+  buttonClassName,
+  showAppliedCoupons = true,
+  formatDiscount,
+  id,
+  name,
+}: WakaCouponInputProps) {
+  const {
+    inputValue,
+    setInputValue,
+    status,
+    errorMessage,
+    appliedCoupons: hookAppliedCoupons,
+    applyCoupon,
+    removeCoupon,
+    canApplyMore,
+  } = useCouponInput({
+    initialCoupons: controlledAppliedCoupons,
+    validateCoupon,
+    allowMultiple,
+    maxCoupons,
+    onApply,
+    onRemove,
+  })
+
+  // Use controlled coupons if provided, otherwise use hook state
+  const appliedCoupons = controlledAppliedCoupons ?? hookAppliedCoupons
+
+  const [shakeKey, setShakeKey] = React.useState(0)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  const config = sizeConfig[size]
+
+  // Trigger shake animation on error
+  React.useEffect(() => {
+    if (status === "error") {
+      setShakeKey((prev) => prev + 1)
+    }
+  }, [status])
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // Auto-uppercase
+    setInputValue(e.target.value.toUpperCase())
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault()
+      applyCoupon()
+    }
+  }
+
+  const handleApply = () => {
+    applyCoupon()
+  }
+
+  const handleRemove = (code: string) => {
+    removeCoupon(code)
+  }
+
+  const getDiscountDisplay = (coupon: Coupon): string => {
+    if (formatDiscount) {
+      return formatDiscount(coupon)
+    }
+    if (coupon.discountType === "percentage") {
+      return `${coupon.discountValue}% off`
+    }
+    return `${currencySymbol}${coupon.discountValue} off`
+  }
+
+  const getButtonContent = () => {
+    switch (status) {
+      case "loading":
+        return <Loader2 className={cn(config.icon, "animate-spin")} />
+      case "success":
+        return <Check className={config.icon} />
+      default:
+        return applyButtonText
+    }
+  }
+
+  const isInputDisabled = disabled || status === "loading" || !canApplyMore
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {/* Input Row */}
+      <div className="flex gap-2">
+        <div
+          key={shakeKey}
+          className={cn(
+            "relative flex-1",
+            status === "error" && "waka-coupon-shake"
+          )}
+        >
+          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+            <Ticket className={config.icon} />
+          </div>
+          <Input
+            ref={inputRef}
+            id={id}
+            name={name}
+            type="text"
+            value={inputValue}
+            onChange={handleInputChange}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={isInputDisabled}
+            className={cn(
+              config.input,
+              "pl-10 font-mono uppercase tracking-wider",
+              status === "error" &&
+                "border-destructive focus-visible:ring-destructive",
+              status === "success" &&
+                "border-green-500 focus-visible:ring-green-500",
+              inputClassName
+            )}
+            aria-invalid={status === "error"}
+            aria-describedby={errorMessage ? "coupon-error" : undefined}
+          />
+          {/* Success checkmark inside input */}
+          {status === "success" && (
+            <div className="absolute right-3 top-1/2 -translate-y-1/2">
+              <div className="waka-coupon-success-check rounded-full bg-green-500 p-0.5">
+                <Check className="h-3 w-3 text-white" />
+              </div>
+            </div>
+          )}
+        </div>
+
+        <Button
+          type="button"
+          onClick={handleApply}
+          disabled={isInputDisabled || !inputValue.trim()}
+          className={cn(
+            config.button,
+            status === "success" && "bg-green-500 hover:bg-green-600",
+            buttonClassName
+          )}
+        >
+          {getButtonContent()}
+        </Button>
+      </div>
+
+      {/* Error Message */}
+      {status === "error" && errorMessage && (
+        <p
+          id="coupon-error"
+          className="text-sm text-destructive flex items-center gap-1.5"
+          role="alert"
+        >
+          <X className="h-3.5 w-3.5" />
+          {errorMessage}
+        </p>
+      )}
+
+      {/* Applied Coupons List */}
+      {showAppliedCoupons && appliedCoupons.length > 0 && (
+        <div className="space-y-2">
+          {appliedCoupons.map((coupon) => (
+            <div
+              key={coupon.code}
+              className={cn(
+                "flex items-center justify-between rounded-lg border bg-muted/50 waka-coupon-applied",
+                config.tag
+              )}
+            >
+              <div className="flex items-center gap-2">
+                <Tag className={cn(config.tagIcon, "text-primary")} />
+                <span className="font-mono font-medium">{coupon.code}</span>
+                <span className="text-muted-foreground">-</span>
+                <span className="flex items-center gap-1 text-green-600 font-medium">
+                  {coupon.discountType === "percentage" ? (
+                    <Percent className={config.tagIcon} />
+                  ) : null}
+                  {getDiscountDisplay(coupon)}
+                </span>
+              </div>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                onClick={() => handleRemove(coupon.code)}
+                disabled={disabled}
+                className="h-6 w-6 text-muted-foreground hover:text-destructive"
+                aria-label={`Remove coupon ${coupon.code}`}
+              >
+                <X className="h-3.5 w-3.5" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Multiple coupon info */}
+      {allowMultiple && appliedCoupons.length > 0 && canApplyMore && (
+        <p className="text-xs text-muted-foreground">
+          {appliedCoupons.length} of {maxCoupons} coupons applied
+        </p>
+      )}
+
+      {/* Animation Styles */}
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+            @keyframes waka-coupon-shake {
+              0%, 100% { transform: translateX(0); }
+              10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
+              20%, 40%, 60%, 80% { transform: translateX(4px); }
+            }
+
+            @keyframes waka-coupon-success-pop {
+              0% { transform: scale(0); opacity: 0; }
+              50% { transform: scale(1.2); }
+              100% { transform: scale(1); opacity: 1; }
+            }
+
+            @keyframes waka-coupon-slide-in {
+              0% {
+                opacity: 0;
+                transform: translateY(-10px);
+              }
+              100% {
+                opacity: 1;
+                transform: translateY(0);
+              }
+            }
+
+            .waka-coupon-shake {
+              animation: waka-coupon-shake 0.4s ease-in-out;
+            }
+
+            .waka-coupon-success-check {
+              animation: waka-coupon-success-pop 0.3s ease-out;
+            }
+
+            .waka-coupon-applied {
+              animation: waka-coupon-slide-in 0.3s ease-out;
+            }
+          `,
+        }}
+      />
+    </div>
+  )
+}
+
+WakaCouponInput.displayName = "WakaCouponInput"
+
+// ============================================================================
+// Exports
+// ============================================================================
+
+export default WakaCouponInput