@agentpaid/paid-nextjs-client 0.3.0-test.2 → 0.3.1

package/dist/components/PaidPaymentsTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaidPaymentsTable.d.ts","sourceRoot":"","sources":["../../src/components/PaidPaymentsTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,mCAAmC,CAAC;AAE3C,UAAU,mBAAmB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAeD,UAAU,sBAAsB;IAC5B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAsK9D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"PaidPaymentsTable.d.ts","sourceRoot":"","sources":["../../src/components/PaidPaymentsTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,mCAAmC,CAAC;AAG3C,UAAU,mBAAmB;IAEzB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAGpC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IAGjC,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAeD,UAAU,sBAAsB;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6M9D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/PaidPaymentsTable.js

@@ -2,33 +2,70 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { useIsInContainer } from './PaidContainer';
+import { getCacheKey } from '../utils/cache';
+import { Pagination } from './ui/Pagination';
 import '../styles/paid-payments-table.css';
-export const PaidPaymentsTable = ({ accountExternalId, paidStyle = {} }) => {
+import { fetchPaidData } from '../utils/apiClient';
+export const PaidPaymentsTable = ({ customerExternalId, paidStyle = {} }) => {
     const [payments, setPayments] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
+    const [currentPage, setCurrentPage] = useState(1);
+    const itemsPerPage = 8;
     const isInContainer = useIsInContainer();
+    // Calculate pagination
+    const totalPages = Math.ceil(payments.length / itemsPerPage);
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    const currentPayments = payments.slice(startIndex, endIndex);
+    const handlePageChange = (page) => {
+        setCurrentPage(page);
+    };
     // Convert paidStyle entries into CSS custom properties
     const cssVariables = Object.entries(paidStyle).reduce((vars, [key, value]) => {
-        let varName;
-        if (key.startsWith('--')) {
-            varName = key;
-        }
-        else {
-            const raw = key.replace(/([A-Z])/g, '-$1').toLowerCase();
-            varName = raw.startsWith('--') ? raw : `--${raw}`;
+        if (value !== undefined && value !== null && value !== '') {
+            // Map simplified properties to CSS custom properties
+            const propertyMap = {
+                fontFamily: '--paid-font-family',
+                primaryColor: '--paid-primary-color',
+                secondaryColor: '--paid-secondary-color',
+                containerBackgroundColor: '--paid-container-background-color',
+                tableBackgroundColor: '--paid-table-background-color',
+                tableHeaderBackgroundColor: '--paid-table-header-background-color',
+                tabBackgroundColor: '--paid-tab-background-color',
+                tabActiveBackgroundColor: '--paid-tab-active-background-color',
+                tabHoverBackgroundColor: '--paid-tab-hover-background-color',
+                tableHoverColor: '--paid-table-hover-color',
+                buttonBgColor: '--paid-button-bg-color'
+            };
+            const cssProperty = propertyMap[key];
+            if (cssProperty) {
+                // @ts-ignore allow custom property
+                vars[cssProperty] = value;
+            }
         }
-        // @ts-ignore allow custom property
-        vars[varName] = value;
         return vars;
     }, {});
-    const formatCurrency = (amount) => {
+    const formatCurrency = (amount, currency) => {
+        const symbol = getCurrencySymbol(currency);
         return new Intl.NumberFormat("en-US", {
             style: "currency",
             currency: "USD",
-            minimumFractionDigits: 0,
-            maximumFractionDigits: 0,
-        }).format(amount / 100);
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }).format(amount / 100).replace('$', symbol);
+    };
+    const getCurrencySymbol = (currency) => {
+        switch (currency.toUpperCase()) {
+            case 'USD':
+                return '$';
+            case 'EUR':
+                return '€';
+            case 'GBP':
+                return '£';
+            default:
+                return '$'; // Default to USD symbol
+        }
     };
     const formatDate = (dateString) => {
         return new Date(dateString).toLocaleDateString('en-US', {
@@ -50,19 +87,16 @@ export const PaidPaymentsTable = ({ accountExternalId, paidStyle = {} }) => {
         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}`);
+                console.log('PaidPaymentsTable: Fetching payment data for', customerExternalId);
+                // Use cached fetch for payment data
+                const cacheKey = getCacheKey.payments(customerExternalId);
+                console.log('PaidPaymentsTable: Using cache key', cacheKey);
+                const response = await fetchPaidData({
+                    paidEndpoint: 'payments',
+                    customerExternalId
+                });
                 if (!response.ok) {
-                    throw new Error(`Failed to fetch: ${response.statusText}`);
+                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                 }
                 const data = await response.json();
                 console.log('PaidPaymentsTable: Received data', data);
@@ -81,7 +115,7 @@ export const PaidPaymentsTable = ({ accountExternalId, paidStyle = {} }) => {
         const handleCacheRefresh = (event) => {
             var _a, _b;
             console.log('PaidPaymentsTable: Cache refresh event received', event.detail);
-            if (((_a = event.detail) === null || _a === void 0 ? void 0 : _a.accountId) === accountExternalId || ((_b = event.detail) === null || _b === void 0 ? void 0 : _b.type) === 'all') {
+            if (((_a = event.detail) === null || _a === void 0 ? void 0 : _a.customerId) === customerExternalId || ((_b = event.detail) === null || _b === void 0 ? void 0 : _b.type) === 'all') {
                 console.log('PaidPaymentsTable: Refetching data due to cache refresh');
                 fetchPaymentData();
             }
@@ -90,14 +124,14 @@ export const PaidPaymentsTable = ({ accountExternalId, paidStyle = {} }) => {
         return () => {
             window.removeEventListener('cache-refresh', handleCacheRefresh);
         };
-    }, [accountExternalId]);
+    }, [customerExternalId]);
     if (loading) {
         return _jsx("div", { children: "Loading payment data..." });
     }
     if (error) {
         return _jsxs("div", { children: ["Error: ", error] });
     }
-    return (_jsx("div", { className: "paid-payment-container", style: { position: 'relative', minWidth: 0, ...cssVariables }, children: _jsxs("div", { className: "paid-payment-table-wrapper", style: { position: 'static', width: '100%', height: 'auto', left: undefined, top: undefined, boxShadow: undefined, cursor: undefined }, children: [!isInContainer && (_jsx("div", { className: "paid-payment-header", children: _jsx("h3", { className: "paid-payment-title", children: "Payments" }) })), _jsx("div", { style: { background: '#fff', overflow: 'auto' }, children: _jsxs("table", { className: "paid-payment-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Payment Number" }), _jsx("th", { children: "Payment type" }), _jsx("th", { children: "Due date" }), _jsx("th", { children: "Status" }), _jsx("th", { style: { textAlign: 'right' }, children: "Amount" }), _jsx("th", {})] }) }), _jsx("tbody", { children: payments.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: 6, className: "paid-payment-empty", children: "No payments found" }) })) : (payments.map((payment) => (_jsxs("tr", { children: [_jsx("td", { children: _jsxs("div", { className: "paid-payment-number", children: [_jsx("span", { className: "paid-payment-dollar", children: "$" }), _jsx("span", { children: "PAY-1" })] }) }), _jsx("td", { children: payment.paymentType }), _jsx("td", { children: formatDate(payment.paymentDate) }), _jsx("td", { children: getStatusBadge(payment.status) }), _jsx("td", { style: { textAlign: 'right' }, children: _jsxs("div", { className: "paid-payment-amount", children: [_jsx("span", { children: formatCurrency(payment.amount) }), _jsx("span", { className: "paid-payment-dollar-right", children: "$" })] }) }), _jsx("td", { style: { textAlign: 'center' }, children: _jsx("span", { className: "paid-payment-currency", children: payment.currency }) })] }, payment.id)))) })] }) })] }) }));
+    return (_jsx("div", { className: "paid-payment-container", style: { position: 'relative', minWidth: 0, ...cssVariables }, children: _jsxs("div", { className: "paid-payment-table-wrapper", style: { position: 'relative', width: '100%', height: 'auto', left: undefined, top: undefined, boxShadow: undefined, cursor: undefined }, children: [!isInContainer && (_jsx("div", { className: "paid-payment-header", children: _jsx("h3", { className: "paid-payment-title", children: "Payments" }) })), _jsx("div", { style: { background: '#fff', overflow: 'auto', width: '100%', boxSizing: 'border-box' }, children: _jsxs("table", { className: "paid-payment-table", style: { width: '100%', maxWidth: '100%', tableLayout: 'fixed' }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Payment Number" }), _jsx("th", { children: "Payment type" }), _jsx("th", { children: "Due date" }), _jsx("th", { children: "Status" }), _jsx("th", { style: { textAlign: 'center' }, children: "Amount" })] }) }), _jsx("tbody", { children: currentPayments.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: 5, className: "paid-payment-empty", children: "No payments found" }) })) : (currentPayments.map((payment) => (_jsxs("tr", { children: [_jsx("td", { style: { fontWeight: 500 }, children: _jsx("div", { className: "paid-payment-number", children: _jsx("span", { children: "PAY-1" }) }) }), _jsx("td", { children: payment.paymentType }), _jsx("td", { children: formatDate(payment.paymentDate) }), _jsx("td", { children: getStatusBadge(payment.paymentStatus) }), _jsx("td", { style: { textAlign: 'center' }, children: _jsx("div", { className: "paid-payment-amount", children: _jsx("span", { className: "amount-number", children: formatCurrency(payment.amount, payment.currency) }) }) })] }, payment.id)))) })] }) }), _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: handlePageChange })] }) }));
 };
 export default PaidPaymentsTable;
 //# sourceMappingURL=PaidPaymentsTable.js.map

package/dist/components/PaidPaymentsTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaidPaymentsTable.js","sourceRoot":"","sources":["../../src/components/PaidPaymentsTable.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,mCAAmC,CAAC;AA+C3C,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAChE,iBAAiB,EACjB,SAAS,GAAG,EAAE,EACjB,EAAE,EAAE;IACD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAY,EAAE,CAAC,CAAC;IACxD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IACxD,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IAEzC,uDAAuD;IACvD,MAAM,YAAY,GAAwB,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QAC9F,IAAI,OAAe,CAAC;QACpB,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;YACvB,OAAO,GAAG,GAAG,CAAC;QAClB,CAAC;aAAM,CAAC;YACJ,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;YACzD,OAAO,GAAG,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;QACtD,CAAC;QACD,mCAAmC;QACnC,IAAI,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC;QACtB,OAAO,IAAI,CAAC;IAChB,CAAC,EAAE,EAAyB,CAAC,CAAC;IAE9B,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,EAAE;QACtC,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;YAClC,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE,KAAK;YACf,qBAAqB,EAAE,CAAC;YACxB,qBAAqB,EAAE,CAAC;SAC3B,CAAC,CAAC,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,UAAkB,EAAE,EAAE;QACtC,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,kBAAkB,CAAC,OAAO,EAAE;YACpD,GAAG,EAAE,SAAS;YACd,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,SAAS;SAClB,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,EAAE;QACtC,+BAA+B;QAC/B,IAAI,CAAC,MAAM,EAAE,CAAC;YACV,OAAO,eAAM,SAAS,EAAC,qBAAqB,wBAAe,CAAC;QAChE,CAAC;QAED,MAAM,WAAW,GAAG,2CAA2C,MAAM,CAAC,WAAW,EAAE,EAAE,CAAC;QACtF,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QACrF,OAAO,eAAM,SAAS,EAAE,WAAW,YAAG,aAAa,GAAQ,CAAC;IAChE,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,gBAAgB,GAAG,KAAK,IAAI,EAAE;YAChC,IAAI,CAAC;gBACD,UAAU,CAAC,IAAI,CAAC,CAAC;gBACjB,OAAO,CAAC,GAAG,CAAC,8CAA8C,EAAE,iBAAiB,CAAC,CAAC;gBAE/E,0DAA0D;gBAC1D,4DAA4D;gBAC5D,+DAA+D;gBAC/D,sDAAsD;gBACtD,4CAA4C;gBAC5C,gBAAgB;gBAChB,qBAAqB;gBACrB,KAAK;gBAEL,+BAA+B;gBAC/B,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,iBAAiB,iBAAiB,EAAE,CAAC,CAAC;gBACnE,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;oBACf,MAAM,IAAI,KAAK,CAAC,oBAAoB,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;gBAC/D,CAAC;gBACD,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;gBAEnC,OAAO,CAAC,GAAG,CAAC,kCAAkC,EAAE,IAAI,CAAC,CAAC;gBACtD,WAAW,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;YACjC,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACX,OAAO,CAAC,KAAK,CAAC,wCAAwC,EAAE,GAAG,CAAC,CAAC;gBAC7D,QAAQ,CAAC,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC;YACvE,CAAC;oBAAS,CAAC;gBACP,UAAU,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;QACL,CAAC,CAAC;QAEF,gBAAgB,EAAE,CAAC;QAEnB,kCAAkC;QAClC,MAAM,kBAAkB,GAAG,CAAC,KAAkB,EAAE,EAAE;;YAC9C,OAAO,CAAC,GAAG,CAAC,iDAAiD,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAC7E,IAAI,CAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,SAAS,MAAK,iBAAiB,IAAI,CAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,IAAI,MAAK,KAAK,EAAE,CAAC;gBAChF,OAAO,CAAC,GAAG,CAAC,yDAAyD,CAAC,CAAC;gBACvE,gBAAgB,EAAE,CAAC;YACvB,CAAC;QACL,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,eAAe,EAAE,kBAAmC,CAAC,CAAC;QAE9E,OAAO,GAAG,EAAE;YACR,MAAM,CAAC,mBAAmB,CAAC,eAAe,EAAE,kBAAmC,CAAC,CAAC;QACrF,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,IAAI,OAAO,EAAE,CAAC;QACV,OAAO,oDAAkC,CAAC;IAC9C,CAAC;IAED,IAAI,KAAK,EAAE,CAAC;QACR,OAAO,qCAAa,KAAK,IAAO,CAAC;IACrC,CAAC;IAED,OAAO,CACH,cAAK,SAAS,EAAC,wBAAwB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,YAAY,EAAE,YACjG,eAAK,SAAS,EAAC,4BAA4B,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,aAC7K,CAAC,aAAa,IAAI,CACf,cAAK,SAAS,EAAC,qBAAqB,YAChC,aAAI,SAAS,EAAC,oBAAoB,yBAAc,GAC9C,CACT,EACD,cAAK,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAChD,iBAAO,SAAS,EAAC,oBAAoB,aACjC,0BACI,yBACI,0CAAuB,EACvB,wCAAqB,EACrB,oCAAiB,EACjB,kCAAe,EACf,aAAI,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,uBAAa,EAC9C,cAAS,IACR,GACD,EACR,0BACK,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACrB,uBACI,aAAI,OAAO,EAAE,CAAC,EAAE,SAAS,EAAC,oBAAoB,kCAEzC,GACJ,CACR,CAAC,CAAC,CAAC,CACA,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CACtB,yBACI,uBACI,eAAK,SAAS,EAAC,qBAAqB,aAChC,eAAM,SAAS,EAAC,qBAAqB,kBAAS,EAC9C,mCAAkB,IAChB,GACL,EACL,uBAAK,OAAO,CAAC,WAAW,GAAM,EAC9B,uBAAK,UAAU,CAAC,OAAO,CAAC,WAAW,CAAC,GAAM,EAC1C,uBAAK,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,GAAM,EACzC,aAAI,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,YAC7B,eAAK,SAAS,EAAC,qBAAqB,aAChC,yBAAO,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,GAAQ,EAC7C,eAAM,SAAS,EAAC,2BAA2B,kBAAS,IAClD,GACL,EACL,aAAI,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,YAC9B,eAAM,SAAS,EAAC,uBAAuB,YAAE,OAAO,CAAC,QAAQ,GAAQ,GAChE,KAlBA,OAAO,CAAC,EAAE,CAmBd,CACR,CAAC,CACL,GACG,IACJ,GACN,IACJ,GACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"PaidPaymentsTable.js","sourceRoot":"","sources":["../../src/components/PaidPaymentsTable.tsx"],"names":[],"mappings":"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"}

package/dist/components/components/PaidActivityLog.js

@@ -2,35 +2,35 @@
 
 import React, { useEffect, useState } from 'react';
 import { useIsInContainer } from './PaidContainer';
-import { cachedFetch, getCacheKey, CACHE_TTL } from '../utils/cache';
-import '../styles/activity-log-table.css';
+import { Pagination } from './ui/Pagination';
+import { fetchPaidData } from '../utils/apiClient';
+import '../styles/paid-activity-log.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;
+    // Global - Font
+    fontFamily?: string;
+    
+    // Global - Font Colors
+    primaryColor?: string;
+    secondaryColor?: string;
+    
+    // Background Colors
+    containerBackgroundColor?: string;
+    tableBackgroundColor?: string;
+    tableHeaderBackgroundColor?: string;
+    
+    // Tab Colors
+    tabBackgroundColor?: string;
+    tabActiveBackgroundColor?: string;
+    tabHoverBackgroundColor?: string;
+    
+    // Table Hover
+    tableHoverColor?: string;
+    
+    // Button Background (Status badges & Pagination)
+    buttonBgColor?: string;
 }
+
 interface UsageSummary {
     id: string;
     updatedAt: string;
@@ -47,6 +47,7 @@ interface UsageSummary {
     orderLineAttributeId: string;
     invoiceId: string | null;
     invoiceLineId: string | null;
+    currency?: string;
 }
 
 interface UsageApiResponse {
@@ -56,40 +57,82 @@ interface UsageApiResponse {
 }
 
 interface PaidActivityLogProps {
-    accountExternalId: string;
+    customerExternalId: string;
     paidStyle?: PaidStyleProperties;
 }
 
 export const PaidActivityLog: React.FC<PaidActivityLogProps> = ({ 
-    accountExternalId, 
+    customerExternalId, 
     paidStyle = {}
 }) => {
     const [usageSummaries, setUsageSummaries] = useState<UsageSummary[]>([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
+    const [currentPage, setCurrentPage] = useState(1);
+    const itemsPerPage = 8;
     const isInContainer = useIsInContainer();
 
+    // Calculate pagination
+    const totalPages = Math.ceil(usageSummaries.length / itemsPerPage);
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    const currentUsageSummaries = usageSummaries.slice(startIndex, endIndex);
+
+    const handlePageChange = (page: number) => {
+        setCurrentPage(page);
+    };
+
     // 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}`;
+        // Only set CSS variables if they are explicitly provided
+        // This allows inheritance from parent PaidContainer
+        if (value !== undefined && value !== null && value !== '') {
+            // Map simplified properties to CSS custom properties
+            const propertyMap: Record<string, string> = {
+                fontFamily: '--paid-font-family',
+                primaryColor: '--paid-primary-color',
+                secondaryColor: '--paid-secondary-color',
+                containerBackgroundColor: '--paid-container-background-color',
+                tableBackgroundColor: '--paid-table-background-color',
+                tableHeaderBackgroundColor: '--paid-table-header-background-color',
+                tabBackgroundColor: '--paid-tab-background-color',
+                tabActiveBackgroundColor: '--paid-tab-active-background-color',
+                tabHoverBackgroundColor: '--paid-tab-hover-background-color',
+                tableHoverColor: '--paid-table-hover-color',
+                buttonBgColor: '--paid-button-bg-color'
+            };
+
+            const cssProperty = propertyMap[key];
+            if (cssProperty) {
+                // @ts-ignore allow custom property
+                vars[cssProperty] = value;
+            }
         }
-        // @ts-ignore allow custom property
-        vars[varName] = value;
+        
         return vars;
     }, {} as React.CSSProperties);
 
-    const formatCurrency = (amount: number) => {
+    const formatCurrency = (amount: number, currency?: string) => {
+        const symbol = getCurrencySymbol(currency || 'USD');
         return new Intl.NumberFormat("en-US", {
             style: "currency",
             currency: "USD",
             minimumFractionDigits: 2,
             maximumFractionDigits: 2,
-        }).format(amount / 100);
+        }).format(amount / 100).replace('$', symbol);
+    };
+
+    const getCurrencySymbol = (currency: string) => {
+        switch (currency.toUpperCase()) {
+            case 'USD':
+                return '$';
+            case 'EUR':
+                return '€';
+            case 'GBP':
+                return '£';
+            default:
+                return '$'; // Default to USD symbol
+        }
     };
 
     const formatEventName = (eventName: string) => {
@@ -112,21 +155,17 @@ export const PaidActivityLog: React.FC<PaidActivityLogProps> = ({
             try {
                 setLoading(true);
                 
-                // TEMPORARILY DISABLED: Use cached fetch for usage data
-                // const cacheKey = getCacheKey.usage(accountExternalId);
-                // const data = await cachedFetch<UsageApiResponse>(
-                //     `/api/usage/${accountExternalId}`,
-                //     cacheKey,
-                //     CACHE_TTL.DATA
-                // );
+                // Use new API client for usage data
+                const response = await fetchPaidData({
+                    paidEndpoint: 'usage',
+                    customerExternalId
+                });
                 
-                // Direct fetch without caching
-                const response = await fetch(`/api/usage/${accountExternalId}`);
                 if (!response.ok) {
-                    throw new Error(`Failed to fetch: ${response.statusText}`);
+                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                 }
-                const data = await response.json();
                 
+                const data = await response.json() as UsageApiResponse;
                 const mappedUsageSummaries = (data.data.usageSummary || []).map((summary: any) => ({
                     ...summary,
                     accountId: summary.customerId,
@@ -140,9 +179,20 @@ export const PaidActivityLog: React.FC<PaidActivityLogProps> = ({
         };
 
         fetchUsageData();
-    }, [accountExternalId]);
 
-    const displayedSummaries = usageSummaries;
+        // Listen for cache refresh events
+        const handleCacheRefresh = (event: CustomEvent) => {
+            if (event.detail?.customerId === customerExternalId || event.detail?.type === 'all') {
+                fetchUsageData();
+            }
+        };
+
+        window.addEventListener('cache-refresh', handleCacheRefresh as EventListener);
+
+        return () => {
+            window.removeEventListener('cache-refresh', handleCacheRefresh as EventListener);
+        };
+    }, [customerExternalId]);
 
     if (loading) {
         return <div>Loading usage data...</div>;
@@ -154,14 +204,14 @@ export const PaidActivityLog: React.FC<PaidActivityLogProps> = ({
 
     return (
         <div className="paid-activity-log-container" style={{ position: 'relative', minWidth: 0, ...cssVariables }}>
-            <div className="paid-activity-log-table-wrapper" style={{ position: 'static', width: '100%', height: 'auto', left: undefined, top: undefined, boxShadow: undefined, cursor: undefined }}>
+            <div className="paid-activity-log-table-wrapper" style={{ position: 'relative', width: '100%', height: 'auto', left: undefined, top: undefined, boxShadow: undefined, cursor: undefined }}>
                 {!isInContainer && (
                     <div className="paid-activity-log-header">
-                        <h3 className="paid-activity-log-title">Paid.ai Activity Log</h3>
+                        <h3 className="paid-activity-log-title">Activity Log</h3>
                     </div>
                 )}
-                <div style={{ background: '#fff', overflow: 'auto' }}>
-                    <table className="paid-activity-log-table">
+                <div style={{ background: '#fff', overflow: 'auto', width: '100%', boxSizing: 'border-box' }}>
+                    <table className="paid-activity-log-table" style={{ width: '100%', maxWidth: '100%', tableLayout: 'fixed' }}>
                         <thead>
                             <tr>
                                 <th>Event</th>
@@ -172,26 +222,33 @@ export const PaidActivityLog: React.FC<PaidActivityLogProps> = ({
                             </tr>
                         </thead>
                         <tbody>
-                            {displayedSummaries.length === 0 ? (
+                            {currentUsageSummaries.length === 0 ? (
                                 <tr>
                                     <td colSpan={5} className="paid-activity-log-empty">
                                         No usage data found
                                     </td>
                                 </tr>
                             ) : (
-                                displayedSummaries.map((summary) => (
+                                currentUsageSummaries.map((summary) => (
                                     <tr key={summary.id}>
                                         <td style={{ fontWeight: 500 }}>{formatEventName(summary.eventName)}</td>
                                         <td>{formatDate(summary.startDate)}</td>
                                         <td>{formatDate(summary.endDate)}</td>
                                         <td style={{ textAlign: 'center' }}>{summary.eventsQuantity}</td>
-                                        <td style={{ textAlign: 'center', fontWeight: 500 }}>{formatCurrency(summary.subtotal)}</td>
+                                        <td style={{ textAlign: 'center', fontWeight: 500 }}>{formatCurrency(summary.subtotal, summary.currency)}</td>
                                     </tr>
                                 ))
                             )}
                         </tbody>
                     </table>
                 </div>
+                
+                {/* Pagination */}
+                <Pagination
+                    currentPage={currentPage}
+                    totalPages={totalPages}
+                    onPageChange={handlePageChange}
+                />
             </div>
         </div>
     );

package/dist/components/components/PaidContainer.js

@@ -10,30 +10,28 @@ const PaidContainerContext = createContext<boolean>(false);
 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;
+    // Global - Font
+    fontFamily?: string;
+    
+    // Global - Font Colors
+    primaryColor?: string;
+    secondaryColor?: string;
+    
+    // Background Colors
+    containerBackgroundColor?: string;
+    tableBackgroundColor?: string;
+    tableHeaderBackgroundColor?: string;
+    
+    // Tab Colors
+    tabBackgroundColor?: string;
+    tabActiveBackgroundColor?: string;
+    tabHoverBackgroundColor?: string;
+    
+    // Table Hover
+    tableHoverColor?: string;
+    
+    // Button Background (Status badges & Pagination)
+    buttonBgColor?: string;
 }
 
 interface PaidContainerTab {
@@ -63,15 +61,27 @@ export const PaidContainer: React.FC<PaidContainerProps> = ({
 
     // 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}`;
+        // Map simplified properties to CSS custom properties
+        const propertyMap: Record<string, string> = {
+            fontFamily: '--paid-font-family',
+            primaryColor: '--paid-primary-color',
+            secondaryColor: '--paid-secondary-color',
+            containerBackgroundColor: '--paid-container-background-color',
+            tableBackgroundColor: '--paid-table-background-color',
+            tableHeaderBackgroundColor: '--paid-table-header-background-color',
+            tabBackgroundColor: '--paid-tab-background-color',
+            tabActiveBackgroundColor: '--paid-tab-active-background-color',
+            tabHoverBackgroundColor: '--paid-tab-hover-background-color',
+            tableHoverColor: '--paid-table-hover-color',
+            buttonBgColor: '--paid-button-bg-color'
+        };
+
+        const cssProperty = propertyMap[key];
+        if (cssProperty) {
+            // @ts-ignore allow custom property
+            vars[cssProperty] = value;
         }
-        // @ts-ignore allow custom property
-        vars[varName] = value;
+        
         return vars;
     }, {} as React.CSSProperties);