"use client"; import * as AccordionPrimitive from "@radix-ui/react-accordion"; import React, { useEffect, useState } from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Dialog, DialogContent, DialogFooter, DialogTitle, } from "@/components/ui/dialog"; import { getCheckoutContent } from "@/lib/autumn/checkout-content"; import { useCustomer } from "autumn-js/react"; import { ArrowRight, ChevronDown, Loader2 } from "lucide-react"; import type { CheckoutResult, ProductItem } from "autumn-js"; import { Accordion, AccordionContent, AccordionItem, } from "@/components/ui/accordion"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { Input } from "@/components/ui/input"; import { useModelPricingContext } from "@/views/onboarding2/model-pricing/ModelPricingContext"; export interface CheckoutDialogProps { open: boolean; setOpen: (open: boolean) => void; checkoutResult: CheckoutResult; } const formatCurrency = ({ amount, currency, }: { amount: number; currency: string; }) => { return new Intl.NumberFormat("en-US", { style: "currency", currency: currency, }).format(amount); }; export default function CheckoutDialog(params: CheckoutDialogProps) { const { attach } = useCustomer(); const [checkoutResult, setCheckoutResult] = useState< CheckoutResult | undefined >(params?.checkoutResult); const { refetch } = useModelPricingContext(); useEffect(() => { if (params.checkoutResult) { setCheckoutResult(params.checkoutResult); } }, [params.checkoutResult]); const [loading, setLoading] = useState(false); if (!checkoutResult) { return <>; } const { open, setOpen } = params; const { title, message } = getCheckoutContent(checkoutResult); const isFree = checkoutResult?.product.properties?.is_free; const isPaid = isFree === false; return (