@agentpaid/paid-nextjs-client 0.3.0-test.1 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +246 -72
- package/dist/components/PaidActivityLog.d.ts +11 -24
- package/dist/components/PaidActivityLog.d.ts.map +1 -1
- package/dist/components/PaidActivityLog.js +53 -26
- package/dist/components/PaidActivityLog.js.map +1 -1
- package/dist/components/PaidContainer.d.ts +11 -24
- package/dist/components/PaidContainer.d.ts.map +1 -1
- package/dist/components/PaidContainer.js +18 -9
- package/dist/components/PaidContainer.js.map +1 -1
- package/dist/components/PaidInvoiceTable.d.ts +11 -24
- package/dist/components/PaidInvoiceTable.d.ts.map +1 -1
- package/dist/components/PaidInvoiceTable.js +57 -30
- package/dist/components/PaidInvoiceTable.js.map +1 -1
- package/dist/components/PaidPaymentsTable.d.ts +11 -24
- package/dist/components/PaidPaymentsTable.d.ts.map +1 -1
- package/dist/components/PaidPaymentsTable.js +58 -28
- package/dist/components/PaidPaymentsTable.js.map +1 -1
- package/dist/components/components/PaidActivityLog.js +98 -57
- package/dist/components/components/PaidContainer.js +42 -32
- package/dist/components/components/PaidInvoiceTable.js +103 -86
- package/dist/components/components/PaidPaymentsTable.js +107 -69
- package/dist/components/components/ui/Pagination.js +168 -0
- package/dist/components/ui/Pagination.d.ts +10 -0
- package/dist/components/ui/Pagination.d.ts.map +1 -0
- package/dist/components/ui/Pagination.js +111 -0
- package/dist/components/ui/Pagination.js.map +1 -0
- package/dist/index.d.ts +3 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -1
- package/dist/index.js.map +1 -1
- package/dist/styles/activity-log-table.css +94 -78
- package/dist/styles/paid-container.css +25 -16
- package/dist/styles/paid-invoice-table.css +135 -120
- package/dist/styles/paid-payments-table.css +65 -109
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/utils/cache.js +1 -1
- package/dist/utils/cache.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
# Paid Next.js Client SDK
|
|
2
2
|
|
|
3
|
-
Easily embed
|
|
3
|
+
Easily embed Paid.ai blocks in your Next.js app to display payments, invoices, and activity logs for specific accounts.
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
7
7
|
## Features
|
|
8
8
|
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
-
|
|
12
|
-
-
|
|
9
|
+
- **PaidContainer**: A universal container block with tabbed interface for all data views
|
|
10
|
+
- **Individual Blocks**: Standalone blocks for payments, invoices, and activity logs
|
|
11
|
+
- **Universal Styling**: Consistent styling system across all blocks
|
|
12
|
+
- **Plug-and-play**: Designed for Next.js 13+ (App Router)
|
|
13
|
+
- **Fully Responsive**: Works seamlessly across all device sizes
|
|
13
14
|
|
|
14
15
|
---
|
|
15
16
|
|
|
@@ -23,68 +24,195 @@ yarn add @agentpaid/paid-nextjs-client
|
|
|
23
24
|
|
|
24
25
|
---
|
|
25
26
|
|
|
26
|
-
##
|
|
27
|
+
## Blocks
|
|
27
28
|
|
|
28
|
-
|
|
29
|
+
### PaidContainer (Recommended)
|
|
30
|
+
|
|
31
|
+
The `PaidContainer` is an all-in-one tabbed interface that displays payments, invoices, and activity logs in a single block. This is the easiest way to integrate all Paid.ai data views.
|
|
29
32
|
|
|
30
33
|
```tsx
|
|
31
|
-
import {
|
|
34
|
+
import {
|
|
35
|
+
PaidContainer,
|
|
36
|
+
PaidActivityLog,
|
|
37
|
+
PaidInvoiceTable,
|
|
38
|
+
PaidPaymentsTable
|
|
39
|
+
} from '@agentpaid/paid-nextjs-client';
|
|
40
|
+
|
|
41
|
+
<PaidContainer
|
|
42
|
+
title="Customer Overview"
|
|
43
|
+
description="Here's a breakdown of recent activity for your customer."
|
|
44
|
+
defaultActiveTab="payments"
|
|
45
|
+
tabs={[
|
|
46
|
+
{
|
|
47
|
+
id: 'payments',
|
|
48
|
+
label: 'Payments',
|
|
49
|
+
component: <PaidPaymentsTable accountExternalId="customer_123" />
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
id: 'invoices',
|
|
53
|
+
label: 'Invoices',
|
|
54
|
+
component: <PaidInvoiceTable accountExternalId="customer_123" />
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
id: 'activity-log',
|
|
58
|
+
label: 'Activity Log',
|
|
59
|
+
component: <PaidActivityLog accountExternalId="customer_123" />
|
|
60
|
+
}
|
|
61
|
+
]}
|
|
62
|
+
paidStyle={{
|
|
63
|
+
fontFamily: 'Inter',
|
|
64
|
+
primaryColor: '#1f2937',
|
|
65
|
+
containerBackgroundColor: '#f8fafc',
|
|
66
|
+
buttonBgColor: '#3b82f6'
|
|
67
|
+
}}
|
|
68
|
+
/>
|
|
32
69
|
```
|
|
33
70
|
|
|
34
|
-
|
|
71
|
+
### Individual Blocks
|
|
72
|
+
|
|
73
|
+
For more granular control, you can use individual blocks:
|
|
35
74
|
|
|
36
75
|
```tsx
|
|
37
|
-
|
|
38
|
-
|
|
76
|
+
import {
|
|
77
|
+
PaidPaymentsTable,
|
|
78
|
+
PaidInvoiceTable,
|
|
79
|
+
PaidActivityLog
|
|
80
|
+
} from '@agentpaid/paid-nextjs-client';
|
|
39
81
|
|
|
40
|
-
|
|
82
|
+
// Payments only
|
|
83
|
+
<PaidPaymentsTable accountExternalId="customer_123" />
|
|
41
84
|
|
|
42
|
-
|
|
85
|
+
// Invoices only
|
|
86
|
+
<PaidInvoiceTable accountExternalId="customer_123" />
|
|
43
87
|
|
|
44
|
-
|
|
88
|
+
// Activity log only
|
|
89
|
+
<PaidActivityLog accountExternalId="customer_123" />
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
---
|
|
45
93
|
|
|
46
|
-
|
|
94
|
+
## API Routes Setup
|
|
47
95
|
|
|
48
|
-
|
|
96
|
+
You need to create API routes for each data type. **First, add your Paid.ai API key to `.env.local`:**
|
|
49
97
|
|
|
50
98
|
```env
|
|
51
99
|
PAID_API_KEY=your_paid_ai_api_key_here
|
|
52
100
|
```
|
|
53
101
|
|
|
54
|
-
|
|
102
|
+
### Required API Routes
|
|
55
103
|
|
|
104
|
+
**1. Payments API Route**
|
|
56
105
|
```bash
|
|
57
|
-
mkdir -p "src/app/api/
|
|
106
|
+
mkdir -p "src/app/api/payments/[accountExternalId]" && touch "src/app/api/payments/[accountExternalId]/route.ts"
|
|
58
107
|
```
|
|
59
108
|
|
|
60
|
-
|
|
109
|
+
Add to `src/app/api/payments/[accountExternalId]/route.ts`:
|
|
110
|
+
```ts
|
|
111
|
+
import { handlePaidPayments } from '@agentpaid/paid-nextjs-client';
|
|
112
|
+
|
|
113
|
+
export const GET = handlePaidPayments(process.env.PAID_API_KEY!);
|
|
114
|
+
```
|
|
61
115
|
|
|
116
|
+
**2. Invoices API Route**
|
|
117
|
+
```bash
|
|
118
|
+
mkdir -p "src/app/api/invoices/[accountExternalId]" && touch "src/app/api/invoices/[accountExternalId]/route.ts"
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
Add to `src/app/api/invoices/[accountExternalId]/route.ts`:
|
|
122
|
+
```ts
|
|
123
|
+
import { handlePaidInvoices } from '@agentpaid/paid-nextjs-client';
|
|
124
|
+
|
|
125
|
+
export const GET = handlePaidInvoices(process.env.PAID_API_KEY!);
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
**3. Activity Log API Route**
|
|
129
|
+
```bash
|
|
130
|
+
mkdir -p "src/app/api/usage/[accountExternalId]" && touch "src/app/api/usage/[accountExternalId]/route.ts"
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
Add to `src/app/api/usage/[accountExternalId]/route.ts`:
|
|
62
134
|
```ts
|
|
63
135
|
import { handlePaidUsage } from '@agentpaid/paid-nextjs-client';
|
|
64
136
|
|
|
65
137
|
export const GET = handlePaidUsage(process.env.PAID_API_KEY!);
|
|
66
138
|
```
|
|
67
139
|
|
|
68
|
-
|
|
140
|
+
**4. Invoice PDF API Route**
|
|
141
|
+
```bash
|
|
142
|
+
mkdir -p "src/app/api/invoice-pdf/[invoiceId]" && touch "src/app/api/invoice-pdf/[invoiceId]/route.ts"
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
Add to `src/app/api/invoice-pdf/[invoiceId]/route.ts`:
|
|
146
|
+
```ts
|
|
147
|
+
import { handlePaidInvoicePdf } from '@agentpaid/paid-nextjs-client';
|
|
148
|
+
|
|
149
|
+
export const GET = handlePaidInvoicePdf(process.env.PAID_API_KEY!);
|
|
150
|
+
```
|
|
69
151
|
|
|
70
152
|
---
|
|
71
153
|
|
|
72
|
-
## Example
|
|
154
|
+
## Complete Example
|
|
73
155
|
|
|
74
156
|
```tsx
|
|
75
|
-
import {
|
|
76
|
-
|
|
77
|
-
|
|
157
|
+
import {
|
|
158
|
+
PaidContainer,
|
|
159
|
+
PaidActivityLog,
|
|
160
|
+
PaidInvoiceTable,
|
|
161
|
+
PaidPaymentsTable
|
|
162
|
+
} from '@agentpaid/paid-nextjs-client';
|
|
163
|
+
|
|
164
|
+
export default function CustomerDashboard() {
|
|
78
165
|
return (
|
|
79
166
|
<div style={{ padding: '2rem', fontFamily: 'sans-serif' }}>
|
|
80
|
-
<h1>
|
|
167
|
+
<h1>Customer Dashboard</h1>
|
|
81
168
|
|
|
82
169
|
<section style={{ marginBottom: '2rem' }}>
|
|
83
170
|
<p><strong>Welcome back!</strong></p>
|
|
84
|
-
<p>Here
|
|
171
|
+
<p>Here's a complete overview for account <code>customer_123</code>.</p>
|
|
85
172
|
</section>
|
|
86
173
|
|
|
87
|
-
<
|
|
174
|
+
<PaidContainer
|
|
175
|
+
title="Customer Overview"
|
|
176
|
+
description="Complete breakdown of payments, invoices, and activity."
|
|
177
|
+
defaultActiveTab="payments"
|
|
178
|
+
tabs={[
|
|
179
|
+
{
|
|
180
|
+
id: 'payments',
|
|
181
|
+
label: 'Payments',
|
|
182
|
+
component: <PaidPaymentsTable accountExternalId="customer_123" />
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
id: 'invoices',
|
|
186
|
+
label: 'Invoices',
|
|
187
|
+
component: <PaidInvoiceTable accountExternalId="customer_123" />
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
id: 'activity-log',
|
|
191
|
+
label: 'Activity Log',
|
|
192
|
+
component: <PaidActivityLog accountExternalId="customer_123" />
|
|
193
|
+
}
|
|
194
|
+
]}
|
|
195
|
+
paidStyle={{
|
|
196
|
+
// Global styling
|
|
197
|
+
fontFamily: 'Inter, sans-serif',
|
|
198
|
+
primaryColor: '#1f2937',
|
|
199
|
+
secondaryColor: '#6b7280',
|
|
200
|
+
|
|
201
|
+
// Container & backgrounds
|
|
202
|
+
containerBackgroundColor: '#f8fafc',
|
|
203
|
+
tableBackgroundColor: '#ffffff',
|
|
204
|
+
tableHeaderBackgroundColor: '#f1f5f9',
|
|
205
|
+
|
|
206
|
+
// Tabs
|
|
207
|
+
tabBackgroundColor: '#e2e8f0',
|
|
208
|
+
tabActiveBackgroundColor: '#3b82f6',
|
|
209
|
+
tabHoverBackgroundColor: '#cbd5e1',
|
|
210
|
+
|
|
211
|
+
// Interactive elements
|
|
212
|
+
tableHoverColor: '#f1f5f9',
|
|
213
|
+
buttonBgColor: '#3b82f6'
|
|
214
|
+
}}
|
|
215
|
+
/>
|
|
88
216
|
|
|
89
217
|
<section style={{ marginTop: '2rem' }}>
|
|
90
218
|
<p>Need help? Visit our <a href="/support">support center</a>.</p>
|
|
@@ -96,58 +224,104 @@ export default function AgentDashboard() {
|
|
|
96
224
|
|
|
97
225
|
---
|
|
98
226
|
|
|
99
|
-
## Styling
|
|
227
|
+
## Styling System
|
|
228
|
+
|
|
229
|
+
The Paid.ai blocks use a simplified, universal styling system. All blocks accept a `paidStyle` prop with the following properties:
|
|
230
|
+
|
|
231
|
+
### Universal Style Properties
|
|
100
232
|
|
|
101
|
-
|
|
233
|
+
| Property | Description | Default |
|
|
234
|
+
|----------|-------------|---------|
|
|
235
|
+
| `fontFamily` | Global font family for all text | `'Roboto'` |
|
|
236
|
+
| `primaryColor` | Primary text color | `'#374151'` |
|
|
237
|
+
| `secondaryColor` | Secondary text color | `'#6b7280'` |
|
|
238
|
+
| `containerBackgroundColor` | Main container background | `'#f8f9fa'` |
|
|
239
|
+
| `tableBackgroundColor` | Table body background | `'#ffffff'` |
|
|
240
|
+
| `tableHeaderBackgroundColor` | Table header background | `'#f9fafb'` |
|
|
241
|
+
| `tabBackgroundColor` | Tab background (PaidContainer only) | `'#e2e8f0'` |
|
|
242
|
+
| `tabActiveBackgroundColor` | Active tab background | `'#3b82f6'` |
|
|
243
|
+
| `tabHoverBackgroundColor` | Tab hover background | `'#cbd5e1'` |
|
|
244
|
+
| `tableHoverColor` | Table row hover background | `'#f3f4f6'` |
|
|
245
|
+
| `buttonBgColor` | Background for buttons, status badges, and pagination | `'#ffffff'` |
|
|
102
246
|
|
|
103
|
-
|
|
247
|
+
### Styling Inheritance
|
|
248
|
+
|
|
249
|
+
- **PaidContainer**: Styles applied here automatically inherit to all child blocks
|
|
250
|
+
- **Individual Blocks**: Can override inherited styles or define their own when used standalone
|
|
251
|
+
- **Flexible**: Mix and match - style globally via PaidContainer or individually per block
|
|
252
|
+
|
|
253
|
+
### Example: Dark Theme
|
|
254
|
+
|
|
255
|
+
```tsx
|
|
256
|
+
<PaidContainer
|
|
257
|
+
title="Customer Overview"
|
|
258
|
+
description="Dark theme example"
|
|
259
|
+
defaultActiveTab="payments"
|
|
260
|
+
tabs={[
|
|
261
|
+
{
|
|
262
|
+
id: 'payments',
|
|
263
|
+
label: 'Payments',
|
|
264
|
+
component: <PaidPaymentsTable accountExternalId="customer_123" />
|
|
265
|
+
}
|
|
266
|
+
]}
|
|
267
|
+
paidStyle={{
|
|
268
|
+
fontFamily: 'Inter',
|
|
269
|
+
primaryColor: '#f9fafb',
|
|
270
|
+
secondaryColor: '#d1d5db',
|
|
271
|
+
containerBackgroundColor: '#1f2937',
|
|
272
|
+
tableBackgroundColor: '#374151',
|
|
273
|
+
tableHeaderBackgroundColor: '#4b5563',
|
|
274
|
+
tabBackgroundColor: '#4b5563',
|
|
275
|
+
tabActiveBackgroundColor: '#3b82f6',
|
|
276
|
+
tabHoverBackgroundColor: '#6b7280',
|
|
277
|
+
tableHoverColor: '#4b5563',
|
|
278
|
+
buttonBgColor: '#6b7280'
|
|
279
|
+
}}
|
|
280
|
+
/>
|
|
281
|
+
```
|
|
104
282
|
|
|
105
|
-
|
|
283
|
+
### Example: Individual Block Styling
|
|
106
284
|
|
|
107
|
-
```
|
|
108
|
-
<
|
|
109
|
-
accountExternalId="customer_123"
|
|
285
|
+
```tsx
|
|
286
|
+
<PaidPaymentsTable
|
|
287
|
+
accountExternalId="customer_123"
|
|
110
288
|
paidStyle={{
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
paidWrapperBorder: 'none',
|
|
115
|
-
paidHeaderBorderBottom: 'none',
|
|
116
|
-
paidThBorderBottom: 'none',
|
|
117
|
-
paidTdBorderBottom: 'none',
|
|
118
|
-
paidTdColor: '#00ff00',
|
|
119
|
-
paidTdBg: '#0000ff',
|
|
120
|
-
paidRowHoverBg: '#000000',
|
|
289
|
+
primaryColor: '#dc2626',
|
|
290
|
+
buttonBgColor: '#fef2f2',
|
|
291
|
+
tableHoverColor: '#fee2e2'
|
|
121
292
|
}}
|
|
122
293
|
/>
|
|
123
294
|
```
|
|
124
295
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
|
132
|
-
|
|
133
|
-
| `
|
|
134
|
-
| `
|
|
135
|
-
| `
|
|
136
|
-
| `
|
|
137
|
-
| `
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
|
142
|
-
|
|
143
|
-
| `
|
|
144
|
-
| `
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
| `paidThBorderBottom` | `--paid-th-border-bottom` | Header cell bottom border |
|
|
150
|
-
| `paidTdBg` | `--paid-td-bg` | Data cell background |
|
|
151
|
-
| `paidTdBorderBottom` | `--paid-td-border-bottom` | Data cell bottom border |
|
|
152
|
-
| `paidRowHoverBg` | `--paid-row-hover-bg` | Data row hover background |
|
|
296
|
+
---
|
|
297
|
+
|
|
298
|
+
## Props
|
|
299
|
+
|
|
300
|
+
### PaidContainer
|
|
301
|
+
|
|
302
|
+
| Prop | Type | Required | Description |
|
|
303
|
+
|------|------|----------|-------------|
|
|
304
|
+
| `title` | `string` | ❌ | Container title |
|
|
305
|
+
| `description` | `string` | ❌ | Container description |
|
|
306
|
+
| `defaultActiveTab` | `string` | ❌ | Default active tab ID |
|
|
307
|
+
| `tabs` | `Tab[]` | ✅ | Array of tab configurations |
|
|
308
|
+
| `paidStyle` | `PaidStyleProperties` | ❌ | Styling configuration |
|
|
309
|
+
|
|
310
|
+
### Individual Blocks
|
|
311
|
+
|
|
312
|
+
| Prop | Type | Required | Description |
|
|
313
|
+
|------|------|----------|-------------|
|
|
314
|
+
| `accountExternalId` | `string` | ✅ | Customer external ID |
|
|
315
|
+
| `paidStyle` | `PaidStyleProperties` | ❌ | Styling configuration |
|
|
316
|
+
|
|
317
|
+
---
|
|
318
|
+
|
|
319
|
+
## Features
|
|
153
320
|
|
|
321
|
+
- **Tabbed Interface**: PaidContainer provides easy navigation between data views
|
|
322
|
+
- **Pagination**: All tables include built-in pagination for large datasets
|
|
323
|
+
- **Responsive Design**: Works seamlessly on desktop, tablet, and mobile
|
|
324
|
+
- **Loading States**: Elegant loading indicators while data fetches
|
|
325
|
+
- **Error Handling**: Graceful error messages for failed requests
|
|
326
|
+
- **Caching**: Built-in request caching for improved performance
|
|
327
|
+
- **PDF Preview**: Invoice table includes PDF preview and download functionality
|
|
@@ -1,30 +1,17 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import '../styles/activity-log-table.css';
|
|
3
3
|
interface PaidStyleProperties {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
paidToggleFontWeight?: string;
|
|
16
|
-
paidToggleColor?: string;
|
|
17
|
-
paidThFontSize?: string;
|
|
18
|
-
paidThFontWeight?: string;
|
|
19
|
-
paidThColor?: string;
|
|
20
|
-
paidTdFontSize?: string;
|
|
21
|
-
paidTdColor?: string;
|
|
22
|
-
paidEmptyColor?: string;
|
|
23
|
-
paidWrapperBg?: string;
|
|
24
|
-
paidHeaderBg?: string;
|
|
25
|
-
paidTableBg?: string;
|
|
26
|
-
paidThBg?: string;
|
|
27
|
-
paidRowHoverBg?: string;
|
|
4
|
+
fontFamily?: string;
|
|
5
|
+
primaryColor?: string;
|
|
6
|
+
secondaryColor?: string;
|
|
7
|
+
containerBackgroundColor?: string;
|
|
8
|
+
tableBackgroundColor?: string;
|
|
9
|
+
tableHeaderBackgroundColor?: string;
|
|
10
|
+
tabBackgroundColor?: string;
|
|
11
|
+
tabActiveBackgroundColor?: string;
|
|
12
|
+
tabHoverBackgroundColor?: string;
|
|
13
|
+
tableHoverColor?: string;
|
|
14
|
+
buttonBgColor?: string;
|
|
28
15
|
}
|
|
29
16
|
interface PaidActivityLogProps {
|
|
30
17
|
accountExternalId: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaidActivityLog.d.ts","sourceRoot":"","sources":["../../src/components/PaidActivityLog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"PaidActivityLog.d.ts","sourceRoot":"","sources":["../../src/components/PaidActivityLog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,kCAAkC,CAAC;AAE1C,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;AA2BD,UAAU,oBAAoB;IAC1B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,mBAAmB,CAAC;CACnC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA+K1D,CAAC"}
|
|
@@ -2,33 +2,71 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useEffect, useState } from 'react';
|
|
4
4
|
import { useIsInContainer } from './PaidContainer';
|
|
5
|
+
import { cachedFetch, getCacheKey, CACHE_TTL } from '../utils/cache';
|
|
6
|
+
import { Pagination } from './ui/Pagination';
|
|
5
7
|
import '../styles/activity-log-table.css';
|
|
6
8
|
export const PaidActivityLog = ({ accountExternalId, paidStyle = {} }) => {
|
|
7
9
|
const [usageSummaries, setUsageSummaries] = useState([]);
|
|
8
10
|
const [loading, setLoading] = useState(true);
|
|
9
11
|
const [error, setError] = useState(null);
|
|
12
|
+
const [currentPage, setCurrentPage] = useState(1);
|
|
13
|
+
const itemsPerPage = 8;
|
|
10
14
|
const isInContainer = useIsInContainer();
|
|
15
|
+
// Calculate pagination
|
|
16
|
+
const totalPages = Math.ceil(usageSummaries.length / itemsPerPage);
|
|
17
|
+
const startIndex = (currentPage - 1) * itemsPerPage;
|
|
18
|
+
const endIndex = startIndex + itemsPerPage;
|
|
19
|
+
const currentUsageSummaries = usageSummaries.slice(startIndex, endIndex);
|
|
20
|
+
const handlePageChange = (page) => {
|
|
21
|
+
setCurrentPage(page);
|
|
22
|
+
};
|
|
11
23
|
// Convert paidStyle entries into CSS custom properties
|
|
12
24
|
const cssVariables = Object.entries(paidStyle).reduce((vars, [key, value]) => {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
25
|
+
// Only set CSS variables if they are explicitly provided
|
|
26
|
+
// This allows inheritance from parent PaidContainer
|
|
27
|
+
if (value !== undefined && value !== null && value !== '') {
|
|
28
|
+
// Map simplified properties to CSS custom properties
|
|
29
|
+
const propertyMap = {
|
|
30
|
+
fontFamily: '--paid-font-family',
|
|
31
|
+
primaryColor: '--paid-primary-color',
|
|
32
|
+
secondaryColor: '--paid-secondary-color',
|
|
33
|
+
containerBackgroundColor: '--paid-container-background-color',
|
|
34
|
+
tableBackgroundColor: '--paid-table-background-color',
|
|
35
|
+
tableHeaderBackgroundColor: '--paid-table-header-background-color',
|
|
36
|
+
tabBackgroundColor: '--paid-tab-background-color',
|
|
37
|
+
tabActiveBackgroundColor: '--paid-tab-active-background-color',
|
|
38
|
+
tabHoverBackgroundColor: '--paid-tab-hover-background-color',
|
|
39
|
+
tableHoverColor: '--paid-table-hover-color',
|
|
40
|
+
buttonBgColor: '--paid-button-bg-color'
|
|
41
|
+
};
|
|
42
|
+
const cssProperty = propertyMap[key];
|
|
43
|
+
if (cssProperty) {
|
|
44
|
+
// @ts-ignore allow custom property
|
|
45
|
+
vars[cssProperty] = value;
|
|
46
|
+
}
|
|
20
47
|
}
|
|
21
|
-
// @ts-ignore allow custom property
|
|
22
|
-
vars[varName] = value;
|
|
23
48
|
return vars;
|
|
24
49
|
}, {});
|
|
25
|
-
const formatCurrency = (amount) => {
|
|
50
|
+
const formatCurrency = (amount, currency) => {
|
|
51
|
+
const symbol = getCurrencySymbol(currency || 'USD');
|
|
26
52
|
return new Intl.NumberFormat("en-US", {
|
|
27
53
|
style: "currency",
|
|
28
54
|
currency: "USD",
|
|
29
55
|
minimumFractionDigits: 2,
|
|
30
56
|
maximumFractionDigits: 2,
|
|
31
|
-
}).format(amount / 100);
|
|
57
|
+
}).format(amount / 100).replace('$', symbol);
|
|
58
|
+
};
|
|
59
|
+
const getCurrencySymbol = (currency) => {
|
|
60
|
+
switch (currency.toUpperCase()) {
|
|
61
|
+
case 'USD':
|
|
62
|
+
return '$';
|
|
63
|
+
case 'EUR':
|
|
64
|
+
return '€';
|
|
65
|
+
case 'GBP':
|
|
66
|
+
return '£';
|
|
67
|
+
default:
|
|
68
|
+
return '$'; // Default to USD symbol
|
|
69
|
+
}
|
|
32
70
|
};
|
|
33
71
|
const formatEventName = (eventName) => {
|
|
34
72
|
return eventName
|
|
@@ -47,19 +85,9 @@ export const PaidActivityLog = ({ accountExternalId, paidStyle = {} }) => {
|
|
|
47
85
|
const fetchUsageData = async () => {
|
|
48
86
|
try {
|
|
49
87
|
setLoading(true);
|
|
50
|
-
//
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
// `/api/usage/${accountExternalId}`,
|
|
54
|
-
// cacheKey,
|
|
55
|
-
// CACHE_TTL.DATA
|
|
56
|
-
// );
|
|
57
|
-
// Direct fetch without caching
|
|
58
|
-
const response = await fetch(`/api/usage/${accountExternalId}`);
|
|
59
|
-
if (!response.ok) {
|
|
60
|
-
throw new Error(`Failed to fetch: ${response.statusText}`);
|
|
61
|
-
}
|
|
62
|
-
const data = await response.json();
|
|
88
|
+
// Use cached fetch for usage data
|
|
89
|
+
const cacheKey = getCacheKey.usage(accountExternalId);
|
|
90
|
+
const data = await cachedFetch(`/api/usage/${accountExternalId}`, cacheKey, CACHE_TTL.DATA);
|
|
63
91
|
const mappedUsageSummaries = (data.data.usageSummary || []).map((summary) => ({
|
|
64
92
|
...summary,
|
|
65
93
|
accountId: summary.customerId,
|
|
@@ -75,13 +103,12 @@ export const PaidActivityLog = ({ accountExternalId, paidStyle = {} }) => {
|
|
|
75
103
|
};
|
|
76
104
|
fetchUsageData();
|
|
77
105
|
}, [accountExternalId]);
|
|
78
|
-
const displayedSummaries = usageSummaries;
|
|
79
106
|
if (loading) {
|
|
80
107
|
return _jsx("div", { children: "Loading usage data..." });
|
|
81
108
|
}
|
|
82
109
|
if (error) {
|
|
83
110
|
return _jsxs("div", { children: ["Error: ", error] });
|
|
84
111
|
}
|
|
85
|
-
return (_jsx("div", { className: "paid-activity-log-container", style: { position: 'relative', minWidth: 0, ...cssVariables }, children: _jsxs("div", { className: "paid-activity-log-table-wrapper", style: { position: '
|
|
112
|
+
return (_jsx("div", { className: "paid-activity-log-container", style: { position: 'relative', minWidth: 0, ...cssVariables }, children: _jsxs("div", { className: "paid-activity-log-table-wrapper", style: { position: 'relative', width: '100%', height: 'auto', left: undefined, top: undefined, boxShadow: undefined, cursor: undefined }, children: [!isInContainer && (_jsx("div", { className: "paid-activity-log-header", children: _jsx("h3", { className: "paid-activity-log-title", children: "Activity Log" }) })), _jsx("div", { style: { background: '#fff', overflow: 'auto', width: '100%', boxSizing: 'border-box' }, children: _jsxs("table", { className: "paid-activity-log-table", style: { width: '100%', maxWidth: '100%', tableLayout: 'fixed' }, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Event" }), _jsx("th", { children: "Start Date" }), _jsx("th", { children: "End Date" }), _jsx("th", { style: { textAlign: 'center' }, children: "Current Usage" }), _jsx("th", { style: { textAlign: 'center' }, children: "Total" })] }) }), _jsx("tbody", { children: currentUsageSummaries.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: 5, className: "paid-activity-log-empty", children: "No usage data found" }) })) : (currentUsageSummaries.map((summary) => (_jsxs("tr", { children: [_jsx("td", { style: { fontWeight: 500 }, children: formatEventName(summary.eventName) }), _jsx("td", { children: formatDate(summary.startDate) }), _jsx("td", { children: formatDate(summary.endDate) }), _jsx("td", { style: { textAlign: 'center' }, children: summary.eventsQuantity }), _jsx("td", { style: { textAlign: 'center', fontWeight: 500 }, children: formatCurrency(summary.subtotal, summary.currency) })] }, summary.id)))) })] }) }), _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: handlePageChange })] }) }));
|
|
86
113
|
};
|
|
87
114
|
//# sourceMappingURL=PaidActivityLog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaidActivityLog.js","sourceRoot":"","sources":["../../src/components/PaidActivityLog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"PaidActivityLog.js","sourceRoot":"","sources":["../../src/components/PaidActivityLog.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,30 +2,17 @@ import React from 'react';
|
|
|
2
2
|
import '../styles/paid-container.css';
|
|
3
3
|
export declare const useIsInContainer: () => boolean;
|
|
4
4
|
interface PaidStyleProperties {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
paidToggleFontWeight?: string;
|
|
17
|
-
paidToggleColor?: string;
|
|
18
|
-
paidThFontSize?: string;
|
|
19
|
-
paidThFontWeight?: string;
|
|
20
|
-
paidThColor?: string;
|
|
21
|
-
paidTdFontSize?: string;
|
|
22
|
-
paidTdColor?: string;
|
|
23
|
-
paidEmptyColor?: string;
|
|
24
|
-
paidWrapperBg?: string;
|
|
25
|
-
paidHeaderBg?: string;
|
|
26
|
-
paidTableBg?: string;
|
|
27
|
-
paidThBg?: string;
|
|
28
|
-
paidRowHoverBg?: string;
|
|
5
|
+
fontFamily?: string;
|
|
6
|
+
primaryColor?: string;
|
|
7
|
+
secondaryColor?: string;
|
|
8
|
+
containerBackgroundColor?: string;
|
|
9
|
+
tableBackgroundColor?: string;
|
|
10
|
+
tableHeaderBackgroundColor?: string;
|
|
11
|
+
tabBackgroundColor?: string;
|
|
12
|
+
tabActiveBackgroundColor?: string;
|
|
13
|
+
tabHoverBackgroundColor?: string;
|
|
14
|
+
tableHoverColor?: string;
|
|
15
|
+
buttonBgColor?: string;
|
|
29
16
|
}
|
|
30
17
|
interface PaidContainerTab {
|
|
31
18
|
id: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaidContainer.d.ts","sourceRoot":"","sources":["../../src/components/PaidContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8C,MAAM,OAAO,CAAC;AACnE,OAAO,8BAA8B,CAAC;AAMtC,eAAO,MAAM,gBAAgB,eAAyC,CAAC;AAEvE,UAAU,mBAAmB;
|
|
1
|
+
{"version":3,"file":"PaidContainer.d.ts","sourceRoot":"","sources":["../../src/components/PaidContainer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8C,MAAM,OAAO,CAAC;AACnE,OAAO,8BAA8B,CAAC;AAMtC,eAAO,MAAM,gBAAgB,eAAyC,CAAC;AAEvE,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,gBAAgB;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,UAAU,kBAAkB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuEtD,CAAC"}
|