"use client"; import * as React from "react"; import { cn } from "@/registry/berlin/lib/utils"; import { Badge, type BadgeProps } from "@/registry/berlin/circle-ui/badge"; import { Button, type ButtonProps } from "@/registry/berlin/circle-ui/button"; import { TextBox } from "@/registry/berlin/circle-ui/form"; function PlusIcon({ className }: { className?: string }) { return ( ); } function MinusIcon({ className }: { className?: string }) { return ( ); } function BinIcon({ className }: { className?: string }) { return ( ); } interface PricingDisplayProps { finalPrice?: string; initialPrice?: string; savings?: string; } export interface ProductItemProps extends React.HTMLAttributes { image?: string; title: string; pricing?: PricingDisplayProps; } function PricingDisplay({ finalPrice, initialPrice, savings, }: PricingDisplayProps) { return (

{finalPrice ?

{finalPrice}

: null} {initialPrice ? (

{initialPrice}

) : null} {savings ?

{savings}

: null}

); } export function ProductItem({ image, title, pricing, children, className, ...props }: ProductItemProps) { return (

{image ? ( {title}

) : null}

{title}

{children ? (

{children}

) : null} {pricing ? : null}

); } export interface ProductCardProps extends ProductItemProps { badge?: BadgeProps; button?: ButtonProps; } export function ProductCard({ badge, button, className, ...props }: ProductCardProps) { return (

{badge ? (

) : null} {button ?

); } type TableRowVariant = "highlight" | "default" | "total" | "totalLarge"; export interface TableRowProps extends React.HTMLAttributes { description: string; amount: string; variant?: TableRowVariant; truncateValue?: boolean; } export function PricingTableRow({ description, amount, variant = "default", truncateValue = false, className, ...props }: TableRowProps) { return (

{description}

{amount}

); } export interface PricingTableProps extends React.HTMLAttributes { lines?: TableRowProps[]; children?: React.ReactNode; } export function PricingTable({ lines, className, children, ...props }: PricingTableProps) { return (

{children ?? lines?.map((line, index) => )}

); } export interface QuantityAdjustorProps extends Omit< React.HTMLAttributes, "onChange" > { disabled?: boolean; value: number; onChange: (value: number) => void; onRemove?: () => void; min?: number; max?: number; renderRemoved?: (restore: () => void) => React.ReactNode; } export function QuantityAdjustor({ disabled = false, value, onChange, onRemove, min = 0, max = Infinity, className, renderRemoved, ...props }: QuantityAdjustorProps) { const restore = React.useCallback(() => onChange(1), [onChange]); if (value === 0) { return ( <> {renderRemoved ? ( renderRemoved(restore) ) : ( )} ); } return (

{value}

); } export interface CartLineItemProps extends QuantityAdjustorProps { product: ProductItemProps; } export function CartLineItem({ product, className, ...props }: CartLineItemProps) { return (

); } export interface SubmitButtonProps extends React.ButtonHTMLAttributes { name?: string; text: string; state?: "clear" | "error" | "success" | "default" | "notEmpty"; } function SubmitButton({ text, className, disabled, ...props }: SubmitButtonProps) { return ( ); } export interface DiscountInputProps { input: { label: string; name: string; placeholder: string; }; button: SubmitButtonProps; className?: string; initialValues?: Record; asyncCheck: ( data: Record, ) => Promise<{ message?: string } | unknown>; } export function DiscountInput({ input, button, className, initialValues, asyncCheck, }: DiscountInputProps) { const [value, setValue] = React.useState(initialValues?.[input.name] ?? ""); const [status, setStatus] = React.useState< "idle" | "loading" | "success" | "error" >("idle"); const [message, setMessage] = React.useState(null); return (

{ event.preventDefault(); setStatus("loading"); setMessage(null); try { const result = await asyncCheck({ [input.name]: value }); setStatus("success"); setMessage( (result as { message?: string })?.message ?? "Discount applied", ); } catch (error) { setStatus("error"); setMessage( error instanceof Error ? error.message : "Could not apply discount", ); } }} >

setValue(event.target.value)} /> {status === "success" && message ? (

{message}

) : null}

); } export interface InputDiscountProps extends Omit< React.InputHTMLAttributes, "defaultValue" | "name" | "onChange" | "value" > { name: string; error?: string; label?: string; placeholder?: string; successMessage?: string; errorMessage?: string; validCode?: string; buttonText?: string; buttonValidatingText?: string; onApplyCode?: (code: string, isValid: boolean) => void; } export function InputDiscount({ name, error, label, placeholder, successMessage = "Discount code applied successfully!", errorMessage = "Invalid discount code", validCode = "VALID", buttonText = "Apply", buttonValidatingText = "Validating...", onApplyCode, className, ...props }: InputDiscountProps) { const [inputValue, setInputValue] = React.useState(""); const [isValidating, setIsValidating] = React.useState(false); const [result, setResult] = React.useState<{ success?: string; error?: string; }>({}); async function handleApply() { if (!inputValue) return; setIsValidating(true); setResult({}); await new Promise((resolve) => setTimeout(resolve, 400)); const isValid = inputValue.toUpperCase() === validCode.toUpperCase(); const next = isValid ? { success: successMessage } : { error: errorMessage }; setResult(next); setIsValidating(false); onApplyCode?.(inputValue, isValid); } return (

{ setInputValue(event.target.value); if (result.success || result.error) setResult({}); }} />

{result.success ? (

{result.success}

) : null}

); }

Installation

About

Usage

Dependencies

Source