@sudobility/consumables_pages 0.0.30 → 0.0.31
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/dist/CreditStorePage.js
CHANGED
|
@@ -12,7 +12,7 @@ import { LoadingSpinner } from './LoadingSpinner';
|
|
|
12
12
|
* @param props - See {@link CreditStorePageProps} for full prop documentation.
|
|
13
13
|
*/
|
|
14
14
|
export function CreditStorePage({ isAuthenticated, balance, packages, isLoading, isPurchasing, error, onPurchase, onLoginClick, labels, formatters, className, }) {
|
|
15
|
-
return (_jsxs("div", { className: className, children: [_jsx("h1", { className: 'text-2xl font-bold mb-6
|
|
15
|
+
return (_jsxs("div", { className: className, children: [_jsx("h1", { className: 'text-2xl font-bold mb-6 text-foreground', children: labels.title }), isAuthenticated && balance !== null && (_jsxs("div", { className: `mb-8 p-4 rounded-lg border ${colors.component.alert.info.base} ${colors.component.alert.info.dark}`, children: [_jsx("p", { className: `text-sm font-medium ${colors.component.alert.info.icon}`, children: labels.currentBalanceLabel }), _jsx("p", { className: 'text-3xl font-bold', children: formatters.formatCredits(balance) })] })), error && (_jsxs("div", { className: `mb-6 p-4 rounded-lg border ${colors.component.alert.error.base} ${colors.component.alert.error.dark}`, role: 'alert', children: [_jsx("p", { className: 'text-sm font-medium', children: labels.errorTitle }), _jsx("p", { className: `text-sm ${colors.component.alert.error.icon}`, children: error })] })), !isAuthenticated && (_jsxs("div", { className: `mb-6 p-4 rounded-lg border ${colors.component.alert.warning.base} ${colors.component.alert.warning.dark}`, children: [_jsx("p", { className: 'text-sm', children: labels.loginRequired }), _jsx("button", { onClick: onLoginClick, className: `mt-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors ${colors.component.button.primary.base} ${colors.component.button.primary.dark}`, children: labels.loginButton ?? 'Log in' })] })), isLoading && _jsx(LoadingSpinner, {}), !isLoading && packages.length === 0 && (_jsx("p", { className: `${ui.text.muted} text-center py-8`, children: labels.noProducts })), !isLoading && packages.length > 0 && (_jsx("div", { className: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4', children: packages.map(pkg => (_jsx("div", { className: `p-6 rounded-xl border shadow-sm hover:shadow-md transition-shadow ${colors.component.card.default.base} ${colors.component.card.default.dark}`, children: _jsxs("div", { className: 'text-center', children: [_jsx("p", { className: 'text-3xl font-bold text-foreground', children: formatters.formatCredits(pkg.credits) }), formatters.getPackageDescription && (_jsx("p", { className: 'text-sm text-muted-foreground mt-1', children: formatters.getPackageDescription(pkg.packageId) })), _jsx("p", { className: `text-xl font-semibold mt-3 ${colors.component.alert.info.icon}`, children: pkg.priceString }), _jsx("button", { onClick: () => onPurchase(pkg.packageId), disabled: isPurchasing || !isAuthenticated, className: `mt-4 w-full px-4 py-2.5 font-medium rounded-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 ${colors.component.button.primary.base} ${colors.component.button.primary.dark}`, children: isPurchasing
|
|
16
16
|
? labels.purchasingButton
|
|
17
17
|
: labels.purchaseButton })] }) }, pkg.packageId))) }))] }));
|
|
18
18
|
}
|
|
@@ -12,7 +12,7 @@ import { LoadingSpinner } from './LoadingSpinner';
|
|
|
12
12
|
* @param props - See {@link PurchaseHistoryPageProps} for full prop documentation.
|
|
13
13
|
*/
|
|
14
14
|
export function PurchaseHistoryPage({ purchases, isLoading, error, onLoadMore, hasMore, labels, formatters, className, emptyStateComponent, }) {
|
|
15
|
-
return (_jsxs("div", { className: className, children: [_jsx("h1", { className: 'text-2xl font-bold mb-6
|
|
15
|
+
return (_jsxs("div", { className: className, children: [_jsx("h1", { className: 'text-2xl font-bold mb-6 text-foreground', children: labels.title }), error && (_jsx("div", { className: `mb-4 p-3 rounded-lg border ${colors.component.alert.error.base} ${colors.component.alert.error.dark}`, role: 'alert', children: _jsx("p", { className: `text-sm ${colors.component.alert.error.icon}`, children: error }) })), isLoading && _jsx(LoadingSpinner, {}), !isLoading && purchases.length === 0 && (_jsx(_Fragment, { children: emptyStateComponent ?? (_jsx("p", { className: `${ui.text.muted} text-center py-8`, children: labels.noRecords })) })), !isLoading && purchases.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: 'hidden sm:block overflow-x-auto', children: _jsxs("table", { className: 'w-full text-sm', "aria-label": labels.title, children: [_jsx("thead", { children: _jsxs("tr", { className: `border-b ${ui.border.default}`, children: [_jsx("th", { className: `text-left py-3 px-4 font-medium ${ui.text.muted}`, children: labels.columnDate }), _jsx("th", { className: `text-right py-3 px-4 font-medium ${ui.text.muted}`, children: labels.columnCredits }), _jsx("th", { className: `text-left py-3 px-4 font-medium ${ui.text.muted}`, children: labels.columnSource }), _jsx("th", { className: `text-right py-3 px-4 font-medium ${ui.text.muted}`, children: labels.columnAmount })] }) }), _jsx("tbody", { children: purchases.map(purchase => (_jsxs("tr", { className: `border-b ${ui.border.subtle} hover:bg-accent`, children: [_jsx("td", { className: 'py-3 px-4 text-foreground', children: formatters.formatDate(purchase.created_at) }), _jsxs("td", { className: 'py-3 px-4 text-right font-medium text-success', children: ["+", purchase.credits] }), _jsx("td", { className: 'py-3 px-4 text-muted-foreground', children: formatters.formatSource(purchase.source) }), _jsx("td", { className: 'py-3 px-4 text-right text-muted-foreground', children: purchase.price_cents != null && purchase.currency
|
|
16
16
|
? formatters.formatAmount(purchase.price_cents, purchase.currency)
|
|
17
|
-
: '-' })] }, purchase.id))) })] }) }), _jsx("div", { className: 'sm:hidden space-y-3', children: purchases.map(purchase => (_jsx("div", { className: `p-4 rounded-lg border ${colors.component.card.default.base} ${colors.component.card.default.dark}`, children: _jsxs("div", { className: 'flex justify-between items-start', children: [_jsxs("div", { children: [_jsx("p", { className: 'text-sm text-
|
|
17
|
+
: '-' })] }, purchase.id))) })] }) }), _jsx("div", { className: 'sm:hidden space-y-3', children: purchases.map(purchase => (_jsx("div", { className: `p-4 rounded-lg border ${colors.component.card.default.base} ${colors.component.card.default.dark}`, children: _jsxs("div", { className: 'flex justify-between items-start', children: [_jsxs("div", { children: [_jsx("p", { className: 'text-sm text-muted-foreground', children: formatters.formatDate(purchase.created_at) }), _jsx("p", { className: 'text-sm text-muted-foreground', children: formatters.formatSource(purchase.source) })] }), _jsxs("div", { className: 'text-right', children: [_jsxs("p", { className: 'font-medium text-success', children: ["+", purchase.credits] }), purchase.price_cents != null && purchase.currency && (_jsx("p", { className: 'text-sm text-muted-foreground', children: formatters.formatAmount(purchase.price_cents, purchase.currency) }))] })] }) }, purchase.id))) }), hasMore && onLoadMore && (_jsx("div", { className: 'mt-4 text-center', children: _jsx("button", { onClick: onLoadMore, className: `px-4 py-2 text-sm font-medium ${ui.text.link}`, children: labels.loadMore }) }))] }))] }));
|
|
18
18
|
}
|
package/dist/UsageHistoryPage.js
CHANGED
|
@@ -12,5 +12,5 @@ import { LoadingSpinner } from './LoadingSpinner';
|
|
|
12
12
|
* @param props - See {@link UsageHistoryPageProps} for full prop documentation.
|
|
13
13
|
*/
|
|
14
14
|
export function UsageHistoryPage({ usages, isLoading, error, onLoadMore, hasMore, labels, formatters, className, emptyStateComponent, }) {
|
|
15
|
-
return (_jsxs("div", { className: className, children: [_jsx("h1", { className: 'text-2xl font-bold mb-6
|
|
15
|
+
return (_jsxs("div", { className: className, children: [_jsx("h1", { className: 'text-2xl font-bold mb-6 text-foreground', children: labels.title }), error && (_jsx("div", { className: `mb-4 p-3 rounded-lg border ${colors.component.alert.error.base} ${colors.component.alert.error.dark}`, role: 'alert', children: _jsx("p", { className: `text-sm ${colors.component.alert.error.icon}`, children: error }) })), isLoading && _jsx(LoadingSpinner, {}), !isLoading && usages.length === 0 && (_jsx(_Fragment, { children: emptyStateComponent ?? (_jsx("p", { className: `${ui.text.muted} text-center py-8`, children: labels.noRecords })) })), !isLoading && usages.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: 'hidden sm:block overflow-x-auto', children: _jsxs("table", { className: 'w-full text-sm', "aria-label": labels.title, children: [_jsx("thead", { children: _jsxs("tr", { className: `border-b ${ui.border.default}`, children: [_jsx("th", { className: `text-left py-3 px-4 font-medium ${ui.text.muted}`, children: labels.columnDate }), _jsx("th", { className: `text-left py-3 px-4 font-medium ${ui.text.muted}`, children: labels.columnFilename })] }) }), _jsx("tbody", { children: usages.map(usage => (_jsxs("tr", { className: `border-b ${ui.border.subtle} hover:bg-accent`, children: [_jsx("td", { className: 'py-3 px-4 text-foreground', children: formatters.formatDate(usage.created_at) }), _jsx("td", { className: 'py-3 px-4 text-muted-foreground', children: usage.filename || '-' })] }, usage.id))) })] }) }), _jsx("div", { className: 'sm:hidden space-y-3', children: usages.map(usage => (_jsxs("div", { className: `p-4 rounded-lg border ${colors.component.card.default.base} ${colors.component.card.default.dark}`, children: [_jsx("p", { className: 'text-sm text-muted-foreground', children: formatters.formatDate(usage.created_at) }), _jsx("p", { className: 'text-sm text-foreground font-medium', children: usage.filename || '-' })] }, usage.id))) }), hasMore && onLoadMore && (_jsx("div", { className: 'mt-4 text-center', children: _jsx("button", { onClick: onLoadMore, className: `px-4 py-2 text-sm font-medium ${ui.text.link}`, children: labels.loadMore }) }))] }))] }));
|
|
16
16
|
}
|
package/package.json
CHANGED