@agentpaid/paid-nextjs-client 0.1.1 → 0.3.0-test.1

package/dist/components/components/PaidContainer.js

@@ -0,0 +1,113 @@
+'use client';
+
+import React, { useState, createContext, useContext } from 'react';
+import '../styles/paid-container.css';
+
+// Create context to detect if components are inside a container
+const PaidContainerContext = createContext<boolean>(false);
+
+// Export hook for components to use
+export const useIsInContainer = () => useContext(PaidContainerContext);
+
+interface PaidStyleProperties {
+    paidTitleColor?: string;
+    paidTitleFontWeight?: string;
+    paidFontFamily?: string;
+    paidWrapperBorder?: string;
+    paidHeaderBorderBottom?: string;
+    paidThBorderBottom?: string;
+    paidTdBorderBottom?: string;
+    paidTdBg?: string;
+    paidTdFontWeight?: string;
+    paidTitleFontSize?: string;
+    paidToggleFontSize?: string;
+    paidToggleFontWeight?: string;
+    paidToggleColor?: string;
+    paidThFontSize?: string;
+    paidThFontWeight?: string;
+    paidThColor?: string;
+    paidTdFontSize?: string;
+    paidTdColor?: string;
+    paidEmptyColor?: string;
+    paidWrapperBg?: string;
+    paidHeaderBg?: string;
+    paidTableBg?: string;
+    paidThBg?: string;
+    paidRowHoverBg?: string;
+}
+
+interface PaidContainerTab {
+    id: string;
+    label: string;
+    component: React.ReactNode;
+}
+
+interface PaidContainerProps {
+    title: string;
+    description?: string;
+    tabs?: PaidContainerTab[];
+    defaultActiveTab?: string;
+    paidStyle?: PaidStyleProperties;
+    children?: React.ReactNode;
+}
+
+export const PaidContainer: React.FC<PaidContainerProps> = ({ 
+    title, 
+    description, 
+    tabs = [], 
+    defaultActiveTab,
+    paidStyle = {},
+    children
+}) => {
+    const [activeTab, setActiveTab] = useState(defaultActiveTab || tabs[0]?.id);
+
+    // Convert paidStyle entries into CSS custom properties
+    const cssVariables: React.CSSProperties = Object.entries(paidStyle).reduce((vars, [key, value]) => {
+        let varName: string;
+        if (key.startsWith('--')) {
+            varName = key;
+        } else {
+            const raw = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+            varName = raw.startsWith('--') ? raw : `--${raw}`;
+        }
+        // @ts-ignore allow custom property
+        vars[varName] = value;
+        return vars;
+    }, {} as React.CSSProperties);
+
+    const activeTabData = tabs.find(tab => tab.id === activeTab);
+
+    return (
+        <PaidContainerContext.Provider value={true}>
+            <div className="paid-container" style={{ ...cssVariables }}>
+                <div className="paid-container-wrapper">
+                    <div className="paid-container-header">
+                        <div className="paid-container-header-content">
+                            <h2 className="paid-container-title">{title}</h2>
+                            {description && (
+                                <p className="paid-container-description">{description}</p>
+                            )}
+                        </div>
+                        
+                        {tabs.length > 1 && (
+                            <div className="paid-container-tabs">
+                                {tabs.map((tab) => (
+                                    <button
+                                        key={tab.id}
+                                        className={`paid-container-tab ${activeTab === tab.id ? 'active' : ''}`}
+                                        onClick={() => setActiveTab(tab.id)}
+                                    >
+                                        {tab.label}
+                                    </button>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                    <div className="paid-container-content">
+                        {children || activeTabData?.component}
+                    </div>
+                </div>
+            </div>
+        </PaidContainerContext.Provider>
+    );
+}; 

package/dist/components/components/PaidInvoiceTable.js

@@ -0,0 +1,321 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useIsInContainer } from './PaidContainer';
+import { cachedFetch, getCacheKey, CACHE_TTL, dataCache } from '../utils/cache';
+import '../styles/paid-invoice-table.css';
+
+interface PaidStyleProperties {
+    paidTitleColor?: string;
+    paidTitleFontWeight?: string;
+    paidFontFamily?: string;
+    paidWrapperBorder?: string;
+    paidHeaderBorderBottom?: string;
+    paidThBorderBottom?: string;
+    paidTdBorderBottom?: string;
+    paidTdBg?: string;
+    paidTdFontWeight?: string;
+    paidTitleFontSize?: string;
+    paidToggleFontSize?: string;
+    paidToggleFontWeight?: string;
+    paidToggleColor?: string;
+    paidThFontSize?: string;
+    paidThFontWeight?: string;
+    paidThColor?: string;
+    paidTdFontSize?: string;
+    paidTdColor?: string;
+    paidEmptyColor?: string;
+    paidWrapperBg?: string;
+    paidHeaderBg?: string;
+    paidTableBg?: string;
+    paidThBg?: string;
+    paidRowHoverBg?: string;
+}
+
+interface Invoice {
+    id: string;
+    number: string;
+    issueDate: string;
+    dueDate: string;
+    status: string;
+    invoiceTotal: number;
+    currency: string;
+    customer?: {
+        id: string;
+        name: string;
+        externalId: string;
+    };
+}
+
+interface InvoiceApiResponse {
+    data: Invoice[];
+}
+
+interface PaidInvoiceTableProps {
+    accountExternalId: string;
+    paidStyle?: PaidStyleProperties;
+}
+
+export const PaidInvoiceTable: React.FC<PaidInvoiceTableProps> = ({ 
+    accountExternalId, 
+    paidStyle = {}
+}) => {
+    const [invoices, setInvoices] = useState<Invoice[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+    const [pdfResponse, setPdfResponse] = useState<string | null>(null);
+    const [selectedInvoice, setSelectedInvoice] = useState<Invoice | null>(null);
+    const [loadingPdf, setLoadingPdf] = useState(false);
+    const isInContainer = useIsInContainer();
+
+    // Convert paidStyle entries into CSS custom properties
+    const cssVariables: React.CSSProperties = Object.entries(paidStyle).reduce((vars, [key, value]) => {
+        let varName: string;
+        if (key.startsWith('--')) {
+            varName = key;
+        } else {
+            const raw = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+            varName = raw.startsWith('--') ? raw : `--${raw}`;
+        }
+        // @ts-ignore allow custom property
+        vars[varName] = value;
+        return vars;
+    }, {} as React.CSSProperties);
+
+    const formatCurrency = (amount: number) => {
+        return new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: "USD",
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(amount / 100);
+    };
+
+    const formatDate = (dateString: string) => {
+        return new Date(dateString).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric'
+        });
+    };
+
+    const getStatusBadge = (status: string) => {
+        const statusClass = `paid-invoice-status paid-invoice-status-${status.toLowerCase()}`;
+        const displayStatus = status.charAt(0).toUpperCase() + status.slice(1).toLowerCase();
+        return <span className={statusClass}>{displayStatus}</span>;
+    };
+
+    const handlePreview = async (invoice: Invoice) => {
+        try {
+            setLoadingPdf(true);
+            setSelectedInvoice(invoice);
+            
+            // Check cache first for PDF
+            const pdfCacheKey = getCacheKey.invoicePdf(invoice.id);
+            const cachedPdf = dataCache.get<string>(pdfCacheKey);
+            
+            if (cachedPdf) {
+                setPdfResponse(cachedPdf);
+                setIsPreviewOpen(true);
+                setLoadingPdf(false);
+                return;
+            }
+            
+            // Fetch PDF if not cached
+            const response = await fetch(`/api/invoice-pdf/${invoice.id}`);
+            
+            if (!response.ok) {
+                throw new Error('Failed to fetch PDF');
+            }
+            
+            const data = await response.json();
+            const pdfData = "data:application/pdf;base64," + data.data.pdfBytes;
+            
+            // Cache the PDF data
+            dataCache.set(pdfCacheKey, pdfData, CACHE_TTL.PDF);
+            
+            setPdfResponse(pdfData);
+            setIsPreviewOpen(true);
+        } catch (error) {
+            console.error('Error fetching PDF:', error);
+            alert('Failed to load PDF preview');
+        } finally {
+            setLoadingPdf(false);
+        }
+    };
+
+    const handleDownload = () => {
+        if (!pdfResponse || !selectedInvoice) return;
+
+        const base64WithoutPrefix = pdfResponse.split(",")[1];
+        const byteCharacters = atob(base64WithoutPrefix);
+        const byteNumbers = new Array(byteCharacters.length)
+            .fill(0)
+            .map((_, i) => byteCharacters.charCodeAt(i));
+        const byteArray = new Uint8Array(byteNumbers);
+        const blob = new Blob([byteArray], { type: "application/pdf" });
+
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `invoice-${selectedInvoice.number}.pdf`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    };
+
+    useEffect(() => {
+        const fetchInvoiceData = async () => {
+            try {
+                setLoading(true);
+                
+                // TEMPORARILY DISABLED: Use cached fetch for invoice data
+                // const cacheKey = getCacheKey.invoices(accountExternalId);
+                // const data = await cachedFetch<InvoiceApiResponse>(
+                //     `/api/invoices/${accountExternalId}`,
+                //     cacheKey,
+                //     CACHE_TTL.DATA
+                // );
+                
+                // Direct fetch without caching
+                const response = await fetch(`/api/invoices/${accountExternalId}`);
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch: ${response.statusText}`);
+                }
+                const data = await response.json();
+                
+                setInvoices(data.data || []);
+            } catch (err) {
+                setError(err instanceof Error ? err.message : 'An error occurred');
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchInvoiceData();
+    }, [accountExternalId]);
+
+    if (loading) {
+        return <div>Loading invoice data...</div>;
+    }
+
+    if (error) {
+        return <div>Error: {error}</div>;
+    }
+
+    return (
+        <>
+            <div className="paid-invoice-container" style={{ ...cssVariables }}>
+                <div className="paid-invoice-table-wrapper">
+                    {!isInContainer && (
+                        <div className="paid-invoice-header">
+                            <h3 className="paid-invoice-title">Invoices</h3>
+                        </div>
+                    )}
+                    <div style={{ background: '#fff', overflow: 'auto' }}>
+                        <table className="paid-invoice-table">
+                            <thead>
+                                <tr>
+                                    <th>Invoice Number</th>
+                                    <th>Status</th>
+                                    <th>Invoice Date</th>
+                                    <th>Due Date</th>
+                                    <th style={{ textAlign: 'right' }}>Total amount</th>
+                                    <th style={{ textAlign: 'center' }}>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {invoices.length === 0 ? (
+                                    <tr>
+                                        <td colSpan={6} className="paid-invoice-empty">
+                                            No invoices found
+                                        </td>
+                                    </tr>
+                                ) : (
+                                    invoices.map((invoice) => (
+                                        <tr key={invoice.id}>
+                                            <td style={{ fontWeight: 500 }}>INV-{invoice.number}</td>
+                                            <td>{getStatusBadge(invoice.status)}</td>
+                                            <td>{formatDate(invoice.issueDate)}</td>
+                                            <td>{formatDate(invoice.dueDate)}</td>
+                                            <td style={{ textAlign: 'right', fontWeight: 500 }}>{formatCurrency(invoice.invoiceTotal)}</td>
+                                            <td style={{ textAlign: 'center' }}>
+                                                <button 
+                                                    className="paid-invoice-action-btn"
+                                                    onClick={() => handlePreview(invoice)}
+                                                    disabled={loadingPdf}
+                                                    title="Preview Invoice"
+                                                >
+                                                    {loadingPdf ? (
+                                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                                            <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="2" fill="none" strokeDasharray="37.7" strokeDashoffset="37.7">
+                                                                <animateTransform attributeName="transform" type="rotate" values="0 8 8;360 8 8" dur="1s" repeatCount="indefinite"/>
+                                                            </circle>
+                                                        </svg>
+                                                    ) : (
+                                                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                                                            <path d="M2 2h8l4 4v8a1 1 0 01-1 1H2a1 1 0 01-1-1V3a1 1 0 011-1z" stroke="currentColor" strokeWidth="1.5" fill="none"/>
+                                                            <path d="M10 2v4h4" stroke="currentColor" strokeWidth="1.5" fill="none"/>
+                                                            <path d="M5 9h6M5 11h4" stroke="currentColor" strokeWidth="1.5"/>
+                                                        </svg>
+                                                    )}
+                                                </button>
+                                            </td>
+                                        </tr>
+                                    ))
+                                )}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+            {/* PDF Preview Modal */}
+            {isPreviewOpen && (
+                <div className="paid-invoice-modal-overlay" onClick={() => setIsPreviewOpen(false)}>
+                    <div className="paid-invoice-modal-content" onClick={(e) => e.stopPropagation()}>
+                        <div className="paid-invoice-modal-header">
+                            <h3>Invoice Preview - INV-{selectedInvoice?.number}</h3>
+                            <div className="paid-invoice-modal-actions">
+                                <button
+                                    className="paid-invoice-modal-btn paid-invoice-modal-btn-download"
+                                    onClick={handleDownload}
+                                    title="Download PDF"
+                                >
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                                        <path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
+                                    </svg>
+                                </button>
+                                <button
+                                    className="paid-invoice-modal-btn paid-invoice-modal-btn-close"
+                                    onClick={() => setIsPreviewOpen(false)}
+                                    title="Close"
+                                >
+                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
+                        <div className="paid-invoice-modal-body">
+                            {pdfResponse ? (
+                                <iframe
+                                    src={pdfResponse}
+                                    width="100%"
+                                    height="100%"
+                                    style={{ border: 'none' }}
+                                    title="Invoice PDF"
+                                />
+                            ) : (
+                                <div className="paid-invoice-modal-loading">Loading PDF...</div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}; 

package/dist/components/components/PaidPaymentsTable.js

@@ -0,0 +1,216 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useIsInContainer } from './PaidContainer';
+import { cachedFetch, getCacheKey, CACHE_TTL } from '../utils/cache';
+import '../styles/paid-payments-table.css';
+
+interface PaidStyleProperties {
+    paidTitleColor?: string;
+    paidTitleFontWeight?: string;
+    paidFontFamily?: string;
+    paidWrapperBorder?: string;
+    paidHeaderBorderBottom?: string;
+    paidThBorderBottom?: string;
+    paidTdBorderBottom?: string;
+    paidTdBg?: string;
+    paidTdFontWeight?: string;
+    paidTitleFontSize?: string;
+    paidToggleFontSize?: string;
+    paidToggleFontWeight?: string;
+    paidToggleColor?: string;
+    paidThFontSize?: string;
+    paidThFontWeight?: string;
+    paidThColor?: string;
+    paidTdFontSize?: string;
+    paidTdColor?: string;
+    paidEmptyColor?: string;
+    paidWrapperBg?: string;
+    paidHeaderBg?: string;
+    paidTableBg?: string;
+    paidThBg?: string;
+    paidRowHoverBg?: string;
+}
+
+interface Payment {
+    id: string;
+    paymentType: string;
+    paymentDate: string;
+    status: string;
+    amount: number;
+    currency: string;
+}
+
+interface PaymentApiResponse {
+    data: Payment[];
+}
+
+interface PaidPaymentsTableProps {
+    accountExternalId: string;
+    paidStyle?: PaidStyleProperties;
+}
+
+export const PaidPaymentsTable: React.FC<PaidPaymentsTableProps> = ({ 
+    accountExternalId, 
+    paidStyle = {}
+}) => {
+    const [payments, setPayments] = useState<Payment[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const isInContainer = useIsInContainer();
+
+    // Convert paidStyle entries into CSS custom properties
+    const cssVariables: React.CSSProperties = Object.entries(paidStyle).reduce((vars, [key, value]) => {
+        let varName: string;
+        if (key.startsWith('--')) {
+            varName = key;
+        } else {
+            const raw = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+            varName = raw.startsWith('--') ? raw : `--${raw}`;
+        }
+        // @ts-ignore allow custom property
+        vars[varName] = value;
+        return vars;
+    }, {} as React.CSSProperties);
+
+    const formatCurrency = (amount: number) => {
+        return new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: "USD",
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+        }).format(amount / 100);
+    };
+
+    const formatDate = (dateString: string) => {
+        return new Date(dateString).toLocaleDateString('en-US', {
+            day: '2-digit',
+            month: 'short',
+            year: 'numeric'
+        });
+    };
+
+    const getStatusBadge = (status: string) => {
+        const statusClass = `paid-payment-status paid-payment-status-${status.toLowerCase()}`;
+        const displayStatus = status.charAt(0).toUpperCase() + status.slice(1).toLowerCase();
+        return <span className={statusClass}>{displayStatus}</span>;
+    };
+
+    useEffect(() => {
+        const fetchPaymentData = async () => {
+            try {
+                setLoading(true);
+                console.log('PaidPaymentsTable: Fetching payment data for', accountExternalId);
+                
+                // TEMPORARILY DISABLED: Use cached fetch for payment data
+                // const cacheKey = getCacheKey.payments(accountExternalId);
+                // console.log('PaidPaymentsTable: Using cache key', cacheKey);
+                // const data = await cachedFetch<PaymentApiResponse>(
+                //     `/api/payments/${accountExternalId}`,
+                //     cacheKey,
+                //     CACHE_TTL.DATA
+                // );
+                
+                // Direct fetch without caching
+                const response = await fetch(`/api/payments/${accountExternalId}`);
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch: ${response.statusText}`);
+                }
+                const data = await response.json();
+                
+                console.log('PaidPaymentsTable: Received data', data);
+                setPayments(data.data || []);
+            } catch (err) {
+                console.error('PaidPaymentsTable: Error fetching data', err);
+                setError(err instanceof Error ? err.message : 'An error occurred');
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchPaymentData();
+
+        // Listen for cache refresh events
+        const handleCacheRefresh = (event: CustomEvent) => {
+            console.log('PaidPaymentsTable: Cache refresh event received', event.detail);
+            if (event.detail?.accountId === accountExternalId || event.detail?.type === 'all') {
+                console.log('PaidPaymentsTable: Refetching data due to cache refresh');
+                fetchPaymentData();
+            }
+        };
+
+        window.addEventListener('cache-refresh', handleCacheRefresh as EventListener);
+
+        return () => {
+            window.removeEventListener('cache-refresh', handleCacheRefresh as EventListener);
+        };
+    }, [accountExternalId]);
+
+    if (loading) {
+        return <div>Loading payment data...</div>;
+    }
+
+    if (error) {
+        return <div>Error: {error}</div>;
+    }
+
+    return (
+        <div className="paid-payment-container" style={{ position: 'relative', minWidth: 0, ...cssVariables }}>
+            <div className="paid-payment-table-wrapper" style={{ position: 'static', width: '100%', height: 'auto', left: undefined, top: undefined, boxShadow: undefined, cursor: undefined }}>
+                {!isInContainer && (
+                    <div className="paid-payment-header">
+                        <h3 className="paid-payment-title">Payments</h3>
+                    </div>
+                )}
+                <div style={{ background: '#fff', overflow: 'auto' }}>
+                    <table className="paid-payment-table">
+                        <thead>
+                            <tr>
+                                <th>Payment Number</th>
+                                <th>Payment type</th>
+                                <th>Due date</th>
+                                <th>Status</th>
+                                <th style={{ textAlign: 'right' }}>Amount</th>
+                                <th></th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {payments.length === 0 ? (
+                                <tr>
+                                    <td colSpan={6} className="paid-payment-empty">
+                                        No payments found
+                                    </td>
+                                </tr>
+                            ) : (
+                                payments.map((payment) => (
+                                    <tr key={payment.id}>
+                                        <td>
+                                            <div className="paid-payment-number">
+                                                <span className="paid-payment-dollar">$</span>
+                                                <span>PAY-1</span>
+                                            </div>
+                                        </td>
+                                        <td>{payment.paymentType}</td>
+                                        <td>{formatDate(payment.paymentDate)}</td>
+                                        <td>{getStatusBadge(payment.status)}</td>
+                                        <td style={{ textAlign: 'right' }}>
+                                            <div className="paid-payment-amount">
+                                                <span>{formatCurrency(payment.amount)}</span>
+                                                <span className="paid-payment-dollar-right">$</span>
+                                            </div>
+                                        </td>
+                                        <td style={{ textAlign: 'center' }}>
+                                            <span className="paid-payment-currency">{payment.currency}</span>
+                                        </td>
+                                    </tr>
+                                ))
+                            )}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default PaidPaymentsTable;

package/dist/hooks/useCache.d.ts

@@ -0,0 +1,12 @@
+export declare const useCache: () => {
+    clearAllCache: () => void;
+    clearAccountCache: (accountId: string) => void;
+    clearInvoicePdfCache: (invoiceId: string) => void;
+    refreshAccountData: (accountId: string) => void;
+    getCacheStats: () => {
+        size: number;
+        keys: string[];
+    };
+    isCached: (key: string) => boolean;
+};
+//# sourceMappingURL=useCache.d.ts.map

package/dist/hooks/useCache.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCache.d.ts","sourceRoot":"","sources":["../../src/hooks/useCache.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ;;mCAO+B,MAAM;sCAOH,MAAM;oCAKR,MAAM;;;;;oBActB,MAAM;CAY1C,CAAC"}