switched to paddle inline checkout, removed paypal and most of stripe. added product sync between app and paddle.
This commit is contained in:
Codex Agent
@@ -119,6 +119,20 @@ export type CreditBalance = {
|
||||
free_event_granted_at?: string | null;
|
||||
};
|
||||
|
||||
export type PaddleTransactionSummary = {
|
||||
id: string | null;
|
||||
status: string | null;
|
||||
amount: number | null;
|
||||
currency: string | null;
|
||||
origin: string | null;
|
||||
checkout_id: string | null;
|
||||
created_at: string | null;
|
||||
updated_at: string | null;
|
||||
receipt_url?: string | null;
|
||||
grand_total?: number | null;
|
||||
tax?: number | null;
|
||||
};
|
||||
|
||||
export type CreditLedgerEntry = {
|
||||
id: number;
|
||||
delta: number;
|
||||
@@ -444,6 +458,25 @@ function normalizeTenantPackage(pkg: JsonValue): TenantPackageSummary {
|
||||
};
|
||||
}
|
||||
|
||||
function normalizePaddleTransaction(entry: JsonValue): PaddleTransactionSummary {
|
||||
const amountValue = entry.amount ?? entry.grand_total ?? (entry.totals && entry.totals.grand_total);
|
||||
const taxValue = entry.tax ?? (entry.totals && entry.totals.tax_total);
|
||||
|
||||
return {
|
||||
id: typeof entry.id === 'string' ? entry.id : entry.id ? String(entry.id) : null,
|
||||
status: entry.status ?? null,
|
||||
amount: amountValue !== undefined && amountValue !== null ? Number(amountValue) : null,
|
||||
currency: entry.currency ?? entry.currency_code ?? 'EUR',
|
||||
origin: entry.origin ?? null,
|
||||
checkout_id: entry.checkout_id ?? (entry.details?.checkout_id ?? null),
|
||||
created_at: entry.created_at ?? null,
|
||||
updated_at: entry.updated_at ?? null,
|
||||
receipt_url: entry.receipt_url ?? entry.invoice_url ?? null,
|
||||
grand_total: entry.grand_total !== undefined && entry.grand_total !== null ? Number(entry.grand_total) : null,
|
||||
tax: taxValue !== undefined && taxValue !== null ? Number(taxValue) : null,
|
||||
};
|
||||
}
|
||||
|
||||
function normalizeTask(task: JsonValue): TenantTask {
|
||||
const titleTranslations = normalizeTranslationMap(task.title_translations ?? task.title ?? {});
|
||||
const descriptionTranslations = normalizeTranslationMap(task.description_translations ?? task.description ?? {});
|
||||
@@ -813,6 +846,35 @@ export async function getTenantPackagesOverview(): Promise<{
|
||||
return { packages, activePackage };
|
||||
}
|
||||
|
||||
export async function getTenantPaddleTransactions(cursor?: string): Promise<{
|
||||
data: PaddleTransactionSummary[];
|
||||
nextCursor: string | null;
|
||||
hasMore: boolean;
|
||||
}> {
|
||||
const query = cursor ? `?cursor=${encodeURIComponent(cursor)}` : '';
|
||||
const response = await authorizedFetch(`/api/v1/tenant/billing/transactions${query}`);
|
||||
|
||||
if (response.status === 404) {
|
||||
return { data: [], nextCursor: null, hasMore: false };
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
const payload = await safeJson(response);
|
||||
console.error('[API] Failed to load Paddle transactions', response.status, payload);
|
||||
throw new Error('Failed to load Paddle transactions');
|
||||
}
|
||||
|
||||
const payload = await safeJson(response) ?? {};
|
||||
const entries = Array.isArray(payload.data) ? payload.data : [];
|
||||
const meta = payload.meta ?? {};
|
||||
|
||||
return {
|
||||
data: entries.map(normalizePaddleTransaction),
|
||||
nextCursor: typeof meta.next === 'string' ? meta.next : null,
|
||||
hasMore: Boolean(meta.has_more),
|
||||
};
|
||||
}
|
||||
|
||||
export async function getCreditBalance(): Promise<CreditBalance> {
|
||||
const response = await authorizedFetch('/api/v1/tenant/credits/balance');
|
||||
if (response.status === 404) {
|
||||
@@ -868,17 +930,17 @@ export async function createTenantPackagePaymentIntent(packageId: number): Promi
|
||||
export async function completeTenantPackagePurchase(params: {
|
||||
packageId: number;
|
||||
paymentMethodId?: string;
|
||||
paypalOrderId?: string;
|
||||
paddleTransactionId?: string;
|
||||
}): Promise<void> {
|
||||
const { packageId, paymentMethodId, paypalOrderId } = params;
|
||||
const { packageId, paymentMethodId, paddleTransactionId } = params;
|
||||
const payload: Record<string, unknown> = { package_id: packageId };
|
||||
|
||||
if (paymentMethodId) {
|
||||
payload.payment_method_id = paymentMethodId;
|
||||
}
|
||||
|
||||
if (paypalOrderId) {
|
||||
payload.paypal_order_id = paypalOrderId;
|
||||
if (paddleTransactionId) {
|
||||
payload.paddle_transaction_id = paddleTransactionId;
|
||||
}
|
||||
|
||||
const response = await authorizedFetch('/api/v1/tenant/packages/complete', {
|
||||
@@ -904,8 +966,8 @@ export async function assignFreeTenantPackage(packageId: number): Promise<void>
|
||||
await jsonOrThrow(response, 'Failed to assign free package');
|
||||
}
|
||||
|
||||
export async function createTenantPayPalOrder(packageId: number): Promise<string> {
|
||||
const response = await authorizedFetch('/api/v1/tenant/packages/paypal-create', {
|
||||
export async function createTenantPaddleCheckout(packageId: number): Promise<{ checkout_url: string }> {
|
||||
const response = await authorizedFetch('/api/v1/tenant/packages/paddle-checkout', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
@@ -913,24 +975,12 @@ export async function createTenantPayPalOrder(packageId: number): Promise<string
|
||||
body: JSON.stringify({ package_id: packageId }),
|
||||
});
|
||||
|
||||
const data = await jsonOrThrow<{ orderID: string }>(response, 'Failed to create PayPal order');
|
||||
if (!data.orderID) {
|
||||
throw new Error('Missing PayPal order ID');
|
||||
const data = await jsonOrThrow<{ checkout_url: string }>(response, 'Failed to create Paddle checkout');
|
||||
if (!data.checkout_url) {
|
||||
throw new Error('Missing Paddle checkout URL');
|
||||
}
|
||||
|
||||
return data.orderID;
|
||||
}
|
||||
|
||||
export async function captureTenantPayPalOrder(orderId: string): Promise<void> {
|
||||
const response = await authorizedFetch('/api/v1/tenant/packages/paypal-capture', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ order_id: orderId }),
|
||||
});
|
||||
|
||||
await jsonOrThrow(response, 'Failed to capture PayPal order');
|
||||
return { checkout_url: data.checkout_url };
|
||||
}
|
||||
|
||||
export async function recordCreditPurchase(payload: {
|
||||
|
||||
@@ -58,6 +58,7 @@ export interface StoredTokens {
|
||||
refreshToken: string;
|
||||
expiresAt: number;
|
||||
scope?: string;
|
||||
clientId?: string;
|
||||
}
|
||||
|
||||
export interface TokenResponse {
|
||||
@@ -83,13 +84,14 @@ export function loadTokens(): StoredTokens | null {
|
||||
return stored;
|
||||
}
|
||||
|
||||
export function saveTokens(response: TokenResponse): StoredTokens {
|
||||
export function saveTokens(response: TokenResponse, clientId: string = getClientId()): StoredTokens {
|
||||
const expiresAt = Date.now() + Math.max(response.expires_in - 30, 0) * 1000;
|
||||
const stored: StoredTokens = {
|
||||
accessToken: response.access_token,
|
||||
refreshToken: response.refresh_token,
|
||||
expiresAt,
|
||||
scope: response.scope,
|
||||
clientId,
|
||||
};
|
||||
localStorage.setItem(TOKEN_STORAGE_KEY, JSON.stringify(stored));
|
||||
return stored;
|
||||
@@ -110,19 +112,21 @@ export async function ensureAccessToken(): Promise<string> {
|
||||
return tokens.accessToken;
|
||||
}
|
||||
|
||||
return refreshAccessToken(tokens.refreshToken);
|
||||
return refreshAccessToken(tokens);
|
||||
}
|
||||
|
||||
async function refreshAccessToken(refreshToken: string): Promise<string> {
|
||||
if (!refreshToken) {
|
||||
async function refreshAccessToken(tokens: StoredTokens): Promise<string> {
|
||||
const clientId = tokens.clientId ?? getClientId();
|
||||
|
||||
if (!tokens.refreshToken) {
|
||||
notifyAuthFailure();
|
||||
throw new AuthError('unauthenticated', 'Missing refresh token');
|
||||
}
|
||||
|
||||
const params = new URLSearchParams({
|
||||
grant_type: 'refresh_token',
|
||||
refresh_token: refreshToken,
|
||||
client_id: getClientId(),
|
||||
refresh_token: tokens.refreshToken,
|
||||
client_id: clientId,
|
||||
});
|
||||
|
||||
const response = await fetch(TOKEN_ENDPOINT, {
|
||||
@@ -138,7 +142,7 @@ async function refreshAccessToken(refreshToken: string): Promise<string> {
|
||||
}
|
||||
|
||||
const data = (await response.json()) as TokenResponse;
|
||||
const stored = saveTokens(data);
|
||||
const stored = saveTokens(data, clientId);
|
||||
return stored.accessToken;
|
||||
}
|
||||
|
||||
@@ -215,10 +219,12 @@ export async function completeOAuthCallback(params: URLSearchParams): Promise<st
|
||||
localStorage.removeItem(CODE_VERIFIER_KEY);
|
||||
localStorage.removeItem(STATE_KEY);
|
||||
|
||||
const clientId = getClientId();
|
||||
|
||||
const body = new URLSearchParams({
|
||||
grant_type: 'authorization_code',
|
||||
code,
|
||||
client_id: getClientId(),
|
||||
client_id: clientId,
|
||||
redirect_uri: buildRedirectUri(),
|
||||
code_verifier: verifier,
|
||||
});
|
||||
@@ -237,7 +243,7 @@ export async function completeOAuthCallback(params: URLSearchParams): Promise<st
|
||||
}
|
||||
|
||||
const data = (await response.json()) as TokenResponse;
|
||||
saveTokens(data);
|
||||
saveTokens(data, clientId);
|
||||
|
||||
const redirectTarget = sessionStorage.getItem(REDIRECT_KEY);
|
||||
if (redirectTarget) {
|
||||
|
||||
@@ -4,6 +4,7 @@ if (import.meta.env.DEV || import.meta.env.VITE_ENABLE_TENANT_SWITCHER === 'true
|
||||
refreshToken: string;
|
||||
expiresAt: number;
|
||||
scope?: string;
|
||||
clientId?: string;
|
||||
};
|
||||
|
||||
const CLIENTS: Record<string, string> = {
|
||||
@@ -29,11 +30,9 @@ if (import.meta.env.DEV || import.meta.env.VITE_ENABLE_TENANT_SWITCHER === 'true
|
||||
localStorage.setItem('tenant_oauth_tokens.v1', JSON.stringify(tokens));
|
||||
window.location.assign('/event-admin/dashboard');
|
||||
} catch (error) {
|
||||
if (error instanceof Error) {
|
||||
console.error('[DevAuth] Failed to login', error.message);
|
||||
} else {
|
||||
console.error('[DevAuth] Failed to login', error);
|
||||
}
|
||||
const message = error instanceof Error ? error.message : String(error);
|
||||
console.error('[DevAuth] Failed to login', message);
|
||||
throw error instanceof Error ? error : new Error(message);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -84,6 +83,7 @@ if (import.meta.env.DEV || import.meta.env.VITE_ENABLE_TENANT_SWITCHER === 'true
|
||||
refreshToken: body.refresh_token,
|
||||
expiresAt: Date.now() + Math.max(expiresIn - 30, 0) * 1000,
|
||||
scope: body.scope,
|
||||
clientId,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -126,9 +126,11 @@ function requestAuthorization(url: string): Promise<URL> {
|
||||
}
|
||||
|
||||
const responseUrl = xhr.responseURL || xhr.getResponseHeader('Location');
|
||||
if (xhr.status >= 200 && xhr.status < 400 && responseUrl) {
|
||||
resolve(new URL(responseUrl, window.location.origin));
|
||||
return;
|
||||
if ((xhr.status >= 200 && xhr.status < 400) || xhr.status === 0) {
|
||||
if (responseUrl) {
|
||||
resolve(new URL(responseUrl, window.location.origin));
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
reject(new Error(`Authorize failed with ${xhr.status}`));
|
||||
|
||||
@@ -45,6 +45,27 @@
|
||||
"available": "Verfügbar",
|
||||
"expires": "Läuft ab"
|
||||
}
|
||||
},
|
||||
"transactions": {
|
||||
"title": "Paddle-Transaktionen",
|
||||
"description": "Neueste Paddle-Transaktionen für diesen Tenant.",
|
||||
"empty": "Noch keine Paddle-Transaktionen.",
|
||||
"labels": {
|
||||
"transactionId": "Transaktion {{id}}",
|
||||
"checkoutId": "Checkout-ID: {{id}}",
|
||||
"origin": "Herkunft: {{origin}}",
|
||||
"receipt": "Beleg ansehen",
|
||||
"tax": "Steuer: {{value}}"
|
||||
},
|
||||
"status": {
|
||||
"completed": "Abgeschlossen",
|
||||
"processing": "Verarbeitung",
|
||||
"failed": "Fehlgeschlagen",
|
||||
"cancelled": "Storniert",
|
||||
"unknown": "Unbekannt"
|
||||
},
|
||||
"loadMore": "Weitere Transaktionen laden",
|
||||
"loadingMore": "Laden…"
|
||||
}
|
||||
},
|
||||
"packages": {
|
||||
@@ -149,8 +170,7 @@
|
||||
"high": "Hoch",
|
||||
"urgent": "Dringend"
|
||||
}
|
||||
}
|
||||
,
|
||||
},
|
||||
"collections": {
|
||||
"title": "Aufgabenvorlagen",
|
||||
"subtitle": "Durchstöbere kuratierte Vorlagen oder aktiviere sie für deine Events.",
|
||||
@@ -244,58 +264,56 @@
|
||||
"cancel": "Abbrechen",
|
||||
"submit": "Emotion speichern"
|
||||
}
|
||||
}
|
||||
,
|
||||
"management": {
|
||||
"billing": {
|
||||
"title": "Pakete & Abrechnung",
|
||||
"subtitle": "Verwalte deine gebuchten Pakete und behalte Laufzeiten im Blick.",
|
||||
"actions": {
|
||||
"refresh": "Aktualisieren",
|
||||
"exportCsv": "Export als CSV"
|
||||
},
|
||||
"errors": {
|
||||
"load": "Paketdaten konnten nicht geladen werden.",
|
||||
"more": "Weitere Einträge konnten nicht geladen werden."
|
||||
},
|
||||
"sections": {
|
||||
"overview": {
|
||||
"title": "Paketübersicht",
|
||||
"description": "Dein aktives Paket und die wichtigsten Kennzahlen.",
|
||||
"empty": "Noch kein Paket aktiv.",
|
||||
"emptyBadge": "Kein aktives Paket",
|
||||
"cards": {
|
||||
"package": {
|
||||
"label": "Aktives Paket",
|
||||
"helper": "Aktuell zugewiesen"
|
||||
},
|
||||
"used": {
|
||||
"label": "Genutzte Events",
|
||||
"helper": "Verfügbar: {{count}}"
|
||||
},
|
||||
"price": {
|
||||
"label": "Preis (netto)"
|
||||
},
|
||||
"expires": {
|
||||
"label": "Läuft ab",
|
||||
"helper": "Automatische Verlängerung, falls aktiv"
|
||||
}
|
||||
},
|
||||
"management": {
|
||||
"billing": {
|
||||
"title": "Pakete & Abrechnung",
|
||||
"subtitle": "Verwalte deine gebuchten Pakete und behalte Laufzeiten im Blick.",
|
||||
"actions": {
|
||||
"refresh": "Aktualisieren",
|
||||
"exportCsv": "Export als CSV"
|
||||
},
|
||||
"errors": {
|
||||
"load": "Paketdaten konnten nicht geladen werden.",
|
||||
"more": "Weitere Einträge konnten nicht geladen werden."
|
||||
},
|
||||
"sections": {
|
||||
"overview": {
|
||||
"title": "Paketübersicht",
|
||||
"description": "Dein aktives Paket und die wichtigsten Kennzahlen.",
|
||||
"empty": "Noch kein Paket aktiv.",
|
||||
"emptyBadge": "Kein aktives Paket",
|
||||
"cards": {
|
||||
"package": {
|
||||
"label": "Aktives Paket",
|
||||
"helper": "Aktuell zugewiesen"
|
||||
},
|
||||
"used": {
|
||||
"label": "Genutzte Events",
|
||||
"helper": "Verfügbar: {{count}}"
|
||||
},
|
||||
"price": {
|
||||
"label": "Preis (netto)"
|
||||
},
|
||||
"expires": {
|
||||
"label": "Läuft ab",
|
||||
"helper": "Automatische Verlängerung, falls aktiv"
|
||||
}
|
||||
}
|
||||
},
|
||||
"packages": {
|
||||
"title": "Paket-Historie",
|
||||
"description": "Übersicht über aktuelle und vergangene Pakete.",
|
||||
"empty": "Noch keine Pakete gebucht.",
|
||||
"card": {
|
||||
"statusActive": "Aktiv",
|
||||
"statusInactive": "Inaktiv",
|
||||
"used": "Genutzte Events",
|
||||
"available": "Verfügbar",
|
||||
"expires": "Läuft ab"
|
||||
}
|
||||
}
|
||||
},
|
||||
"packages": {
|
||||
"title": "Paket-Historie",
|
||||
"description": "Übersicht über aktuelle und vergangene Pakete.",
|
||||
"empty": "Noch keine Pakete gebucht.",
|
||||
"card": {
|
||||
"statusActive": "Aktiv",
|
||||
"statusInactive": "Inaktiv",
|
||||
"used": "Genutzte Events",
|
||||
"available": "Verfügbar",
|
||||
"expires": "Läuft ab"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -165,46 +165,25 @@
|
||||
"failureTitle": "Aktivierung fehlgeschlagen",
|
||||
"errorMessage": "Kostenloses Paket konnte nicht aktiviert werden."
|
||||
},
|
||||
"stripe": {
|
||||
"sectionTitle": "Kartenzahlung (Stripe)",
|
||||
"heading": "Kartenzahlung",
|
||||
"notReady": "Zahlungsmodul noch nicht bereit. Bitte lade die Seite neu.",
|
||||
"genericError": "Zahlung fehlgeschlagen. Bitte erneut versuchen.",
|
||||
"missingPaymentId": "Zahlung konnte nicht bestätigt werden (fehlende Zahlungs-ID).",
|
||||
"completionFailed": "Der Kauf wurde bei uns noch nicht verbucht. Bitte kontaktiere den Support mit deiner Zahlungsbestätigung.",
|
||||
"errorTitle": "Zahlung fehlgeschlagen",
|
||||
"submitting": "Zahlung wird bestätigt …",
|
||||
"submit": "Jetzt bezahlen",
|
||||
"hint": "Sicherer Checkout über Stripe. Du erhältst eine Bestätigung, sobald der Kauf verbucht wurde.",
|
||||
"loading": "Zahlungsdetails werden geladen …",
|
||||
"unavailableTitle": "Stripe nicht verfügbar",
|
||||
"unavailableDescription": "Stripe konnte nicht initialisiert werden.",
|
||||
"missingKey": "Stripe Publishable Key fehlt. Bitte konfiguriere VITE_STRIPE_PUBLISHABLE_KEY.",
|
||||
"intentFailed": "Stripe-Zahlung konnte nicht vorbereitet werden."
|
||||
},
|
||||
"paypal": {
|
||||
"sectionTitle": "PayPal",
|
||||
"heading": "PayPal",
|
||||
"createFailed": "PayPal-Bestellung konnte nicht erstellt werden. Bitte versuche es erneut.",
|
||||
"captureFailed": "PayPal-Zahlung konnte nicht abgeschlossen werden. Bitte kontaktiere den Support, falls der Betrag bereits abgebucht wurde.",
|
||||
"errorTitle": "PayPal-Fehler",
|
||||
"genericError": "PayPal hat ein Problem gemeldet. Bitte versuche es später erneut.",
|
||||
"missingOrderId": "PayPal hat keine Order-ID geliefert.",
|
||||
"cancelled": "PayPal-Zahlung wurde abgebrochen.",
|
||||
"hint": "PayPal leitet dich ggf. weiter, um die Zahlung zu bestätigen. Anschließend kommst du automatisch zurück.",
|
||||
"notConfiguredTitle": "PayPal nicht konfiguriert",
|
||||
"notConfiguredDescription": "Hinterlege VITE_PAYPAL_CLIENT_ID, damit Gastgeber optional mit PayPal bezahlen können."
|
||||
"paddle": {
|
||||
"sectionTitle": "Paddle",
|
||||
"heading": "Checkout mit Paddle",
|
||||
"genericError": "Der Paddle-Checkout konnte nicht geöffnet werden. Bitte versuche es erneut.",
|
||||
"errorTitle": "Paddle-Fehler",
|
||||
"processing": "Paddle-Checkout wird geöffnet …",
|
||||
"cta": "Paddle-Checkout öffnen",
|
||||
"hint": "Es öffnet sich ein neuer Tab über Paddle (Merchant of Record). Schließe dort die Zahlung ab und kehre anschließend zurück."
|
||||
},
|
||||
"nextStepsTitle": "Nächste Schritte",
|
||||
"nextSteps": [
|
||||
"Optional: Abrechnung abschließen (Stripe/PayPal) im Billing-Bereich.",
|
||||
"Optional: Abrechnung über Paddle im Billing-Bereich abschließen.",
|
||||
"Event-Setup durchlaufen und Aufgaben, Team & Galerie konfigurieren.",
|
||||
"Vor dem Go-Live Credits prüfen und Gäste-Link teilen."
|
||||
],
|
||||
"cta": {
|
||||
"billing": {
|
||||
"label": "Abrechnung starten",
|
||||
"description": "Öffnet den Billing-Bereich mit allen Kaufoptionen (Stripe, PayPal, Credits).",
|
||||
"description": "Öffnet den Billing-Bereich mit Paddle- und Credit-Optionen.",
|
||||
"button": "Zu Billing & Zahlung"
|
||||
},
|
||||
"setup": {
|
||||
@@ -261,8 +240,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
@@ -45,6 +45,27 @@
|
||||
"available": "Remaining",
|
||||
"expires": "Expires"
|
||||
}
|
||||
},
|
||||
"transactions": {
|
||||
"title": "Paddle transactions",
|
||||
"description": "Recent Paddle transactions for this tenant.",
|
||||
"empty": "No Paddle transactions yet.",
|
||||
"labels": {
|
||||
"transactionId": "Transaction {{id}}",
|
||||
"checkoutId": "Checkout ID: {{id}}",
|
||||
"origin": "Origin: {{origin}}",
|
||||
"receipt": "View receipt",
|
||||
"tax": "Tax: {{value}}"
|
||||
},
|
||||
"status": {
|
||||
"completed": "Completed",
|
||||
"processing": "Processing",
|
||||
"failed": "Failed",
|
||||
"cancelled": "Cancelled",
|
||||
"unknown": "Unknown"
|
||||
},
|
||||
"loadMore": "Load more transactions",
|
||||
"loadingMore": "Loading…"
|
||||
}
|
||||
},
|
||||
"packages": {
|
||||
@@ -149,8 +170,7 @@
|
||||
"high": "High",
|
||||
"urgent": "Urgent"
|
||||
}
|
||||
}
|
||||
,
|
||||
},
|
||||
"collections": {
|
||||
"title": "Task collections",
|
||||
"subtitle": "Browse curated task bundles or activate them for your events.",
|
||||
@@ -244,57 +264,56 @@
|
||||
"cancel": "Cancel",
|
||||
"submit": "Save emotion"
|
||||
}
|
||||
}
|
||||
,
|
||||
"management": {
|
||||
"billing": {
|
||||
"title": "Packages & billing",
|
||||
"subtitle": "Manage your purchased packages and track their durations.",
|
||||
"actions": {
|
||||
"refresh": "Refresh",
|
||||
"exportCsv": "Export CSV"
|
||||
},
|
||||
"errors": {
|
||||
"load": "Unable to load package data.",
|
||||
"more": "Unable to load more entries."
|
||||
},
|
||||
"sections": {
|
||||
"overview": {
|
||||
"title": "Package overview",
|
||||
"description": "Your active package and the most important metrics.",
|
||||
"empty": "No active package yet.",
|
||||
"emptyBadge": "No active package",
|
||||
"cards": {
|
||||
"package": {
|
||||
"label": "Active package",
|
||||
"helper": "Currently assigned"
|
||||
},
|
||||
"used": {
|
||||
"label": "Events used",
|
||||
"helper": "Remaining: {{count}}"
|
||||
},
|
||||
"price": {
|
||||
"label": "Price (net)"
|
||||
},
|
||||
"expires": {
|
||||
"label": "Expires",
|
||||
"helper": "Auto-renews if enabled"
|
||||
}
|
||||
},
|
||||
"management": {
|
||||
"billing": {
|
||||
"title": "Packages & billing",
|
||||
"subtitle": "Manage your purchased packages and track their durations.",
|
||||
"actions": {
|
||||
"refresh": "Refresh",
|
||||
"exportCsv": "Export CSV"
|
||||
},
|
||||
"errors": {
|
||||
"load": "Unable to load package data.",
|
||||
"more": "Unable to load more entries."
|
||||
},
|
||||
"sections": {
|
||||
"overview": {
|
||||
"title": "Package overview",
|
||||
"description": "Your active package and the most important metrics.",
|
||||
"empty": "No active package yet.",
|
||||
"emptyBadge": "No active package",
|
||||
"cards": {
|
||||
"package": {
|
||||
"label": "Active package",
|
||||
"helper": "Currently assigned"
|
||||
},
|
||||
"used": {
|
||||
"label": "Events used",
|
||||
"helper": "Remaining: {{count}}"
|
||||
},
|
||||
"price": {
|
||||
"label": "Price (net)"
|
||||
},
|
||||
"expires": {
|
||||
"label": "Expires",
|
||||
"helper": "Auto-renews if enabled"
|
||||
}
|
||||
}
|
||||
},
|
||||
"packages": {
|
||||
"title": "Package history",
|
||||
"description": "Overview of current and past packages.",
|
||||
"empty": "No packages purchased yet.",
|
||||
"card": {
|
||||
"statusActive": "Active",
|
||||
"statusInactive": "Inactive",
|
||||
"used": "Used events",
|
||||
"available": "Available",
|
||||
"expires": "Expires"
|
||||
}
|
||||
}
|
||||
},
|
||||
"packages": {
|
||||
"title": "Package history",
|
||||
"description": "Overview of current and past packages.",
|
||||
"empty": "No packages purchased yet.",
|
||||
"card": {
|
||||
"statusActive": "Active",
|
||||
"statusInactive": "Inactive",
|
||||
"used": "Used events",
|
||||
"available": "Available",
|
||||
"expires": "Expires"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -165,46 +165,25 @@
|
||||
"failureTitle": "Activation failed",
|
||||
"errorMessage": "The free package could not be activated."
|
||||
},
|
||||
"stripe": {
|
||||
"sectionTitle": "Card payment (Stripe)",
|
||||
"heading": "Card payment",
|
||||
"notReady": "Payment module not ready yet. Please refresh.",
|
||||
"genericError": "Payment failed. Please try again.",
|
||||
"missingPaymentId": "Could not confirm payment (missing payment ID).",
|
||||
"completionFailed": "Purchase not recorded yet. Contact support with your payment confirmation.",
|
||||
"errorTitle": "Payment failed",
|
||||
"submitting": "Confirming payment …",
|
||||
"submit": "Pay now",
|
||||
"hint": "Secure checkout via Stripe. You'll receive confirmation once recorded.",
|
||||
"loading": "Loading payment details …",
|
||||
"unavailableTitle": "Stripe unavailable",
|
||||
"unavailableDescription": "Stripe could not be initialised.",
|
||||
"missingKey": "Stripe publishable key missing. Configure VITE_STRIPE_PUBLISHABLE_KEY.",
|
||||
"intentFailed": "Stripe could not prepare the payment."
|
||||
},
|
||||
"paypal": {
|
||||
"sectionTitle": "PayPal",
|
||||
"heading": "PayPal",
|
||||
"createFailed": "PayPal order could not be created. Please try again.",
|
||||
"captureFailed": "PayPal payment could not be captured. Contact support if funds were withdrawn.",
|
||||
"errorTitle": "PayPal error",
|
||||
"genericError": "PayPal reported a problem. Please try again later.",
|
||||
"missingOrderId": "PayPal did not return an order ID.",
|
||||
"cancelled": "PayPal payment was cancelled.",
|
||||
"hint": "PayPal may redirect you briefly to confirm. You'll return automatically afterwards.",
|
||||
"notConfiguredTitle": "PayPal not configured",
|
||||
"notConfiguredDescription": "Provide VITE_PAYPAL_CLIENT_ID so hosts can pay with PayPal."
|
||||
"paddle": {
|
||||
"sectionTitle": "Paddle",
|
||||
"heading": "Checkout with Paddle",
|
||||
"genericError": "The Paddle checkout could not be opened. Please try again.",
|
||||
"errorTitle": "Paddle error",
|
||||
"processing": "Opening the Paddle checkout …",
|
||||
"cta": "Open Paddle checkout",
|
||||
"hint": "A new tab opens via Paddle (merchant of record). Complete the payment there, then return to continue."
|
||||
},
|
||||
"nextStepsTitle": "Next steps",
|
||||
"nextSteps": [
|
||||
"Optional: finish billing (Stripe/PayPal) inside the billing area.",
|
||||
"Optional: finish billing via Paddle inside the billing area.",
|
||||
"Complete the event setup and configure tasks, team, and gallery.",
|
||||
"Check credits before go-live and share your guest link."
|
||||
],
|
||||
"cta": {
|
||||
"billing": {
|
||||
"label": "Start billing",
|
||||
"description": "Opens the billing area with Stripe, PayPal, and credit options.",
|
||||
"description": "Opens the billing area with Paddle and credit options.",
|
||||
"button": "Go to billing"
|
||||
},
|
||||
"setup": {
|
||||
@@ -261,4 +240,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,176 +1,65 @@
|
||||
import React from 'react';
|
||||
import { describe, expect, it, vi, beforeEach } from 'vitest';
|
||||
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||
import {
|
||||
StripeCheckoutForm,
|
||||
PayPalCheckout,
|
||||
} from '../pages/WelcomeOrderSummaryPage';
|
||||
import { act, render, screen, waitFor } from '@testing-library/react';
|
||||
import { PaddleCheckout } from '../pages/WelcomeOrderSummaryPage';
|
||||
|
||||
const stripeRef: { current: any } = { current: null };
|
||||
const elementsRef: { current: any } = { current: null };
|
||||
const paypalPropsRef: { current: any } = { current: null };
|
||||
|
||||
const {
|
||||
confirmPaymentMock,
|
||||
completePurchaseMock,
|
||||
createPayPalOrderMock,
|
||||
capturePayPalOrderMock,
|
||||
} = vi.hoisted(() => ({
|
||||
confirmPaymentMock: vi.fn(),
|
||||
completePurchaseMock: vi.fn(),
|
||||
createPayPalOrderMock: vi.fn(),
|
||||
capturePayPalOrderMock: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('@stripe/react-stripe-js', () => ({
|
||||
useStripe: () => stripeRef.current,
|
||||
useElements: () => elementsRef.current,
|
||||
PaymentElement: () => <div data-testid="stripe-payment-element" />,
|
||||
Elements: ({ children }: { children: React.ReactNode }) => <>{children}</>,
|
||||
}));
|
||||
|
||||
vi.mock('@paypal/react-paypal-js', () => ({
|
||||
PayPalScriptProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
|
||||
PayPalButtons: (props: any) => {
|
||||
paypalPropsRef.current = props;
|
||||
return <button type="button" data-testid="paypal-button">PayPal</button>;
|
||||
},
|
||||
const { createPaddleCheckoutMock } = vi.hoisted(() => ({
|
||||
createPaddleCheckoutMock: vi.fn(),
|
||||
}));
|
||||
|
||||
vi.mock('../../api', () => ({
|
||||
completeTenantPackagePurchase: completePurchaseMock,
|
||||
createTenantPackagePaymentIntent: vi.fn(),
|
||||
assignFreeTenantPackage: vi.fn(),
|
||||
createTenantPayPalOrder: createPayPalOrderMock,
|
||||
captureTenantPayPalOrder: capturePayPalOrderMock,
|
||||
createTenantPaddleCheckout: createPaddleCheckoutMock,
|
||||
}));
|
||||
|
||||
describe('StripeCheckoutForm', () => {
|
||||
describe('PaddleCheckout', () => {
|
||||
beforeEach(() => {
|
||||
confirmPaymentMock.mockReset();
|
||||
completePurchaseMock.mockReset();
|
||||
stripeRef.current = { confirmPayment: confirmPaymentMock };
|
||||
elementsRef.current = {};
|
||||
createPaddleCheckoutMock.mockReset();
|
||||
});
|
||||
|
||||
const renderStripeForm = (overrides?: Partial<React.ComponentProps<typeof StripeCheckoutForm>>) =>
|
||||
render(
|
||||
<StripeCheckoutForm
|
||||
clientSecret="secret"
|
||||
packageId={42}
|
||||
onSuccess={vi.fn()}
|
||||
t={(key: string) => key}
|
||||
{...overrides}
|
||||
/>
|
||||
);
|
||||
|
||||
it('completes the purchase when Stripe reports a successful payment', async () => {
|
||||
const onSuccess = vi.fn();
|
||||
confirmPaymentMock.mockResolvedValue({
|
||||
error: null,
|
||||
paymentIntent: { payment_method: 'pm_123' },
|
||||
});
|
||||
completePurchaseMock.mockResolvedValue(undefined);
|
||||
|
||||
const { container } = renderStripeForm({ onSuccess });
|
||||
const form = container.querySelector('form');
|
||||
expect(form).toBeTruthy();
|
||||
fireEvent.submit(form!);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(completePurchaseMock).toHaveBeenCalledWith({
|
||||
packageId: 42,
|
||||
paymentMethodId: 'pm_123',
|
||||
});
|
||||
});
|
||||
expect(onSuccess).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('shows Stripe errors returned by confirmPayment', async () => {
|
||||
confirmPaymentMock.mockResolvedValue({
|
||||
error: { message: 'Card declined' },
|
||||
});
|
||||
|
||||
const { container } = renderStripeForm();
|
||||
fireEvent.submit(container.querySelector('form')!);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Card declined')).toBeInTheDocument();
|
||||
});
|
||||
expect(completePurchaseMock).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('reports missing payment method id', async () => {
|
||||
confirmPaymentMock.mockResolvedValue({
|
||||
error: null,
|
||||
paymentIntent: {},
|
||||
});
|
||||
|
||||
const { container } = renderStripeForm();
|
||||
fireEvent.submit(container.querySelector('form')!);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('summary.stripe.missingPaymentId')).toBeInTheDocument();
|
||||
});
|
||||
expect(completePurchaseMock).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('PayPalCheckout', () => {
|
||||
beforeEach(() => {
|
||||
paypalPropsRef.current = null;
|
||||
createPayPalOrderMock.mockReset();
|
||||
capturePayPalOrderMock.mockReset();
|
||||
});
|
||||
|
||||
it('creates and captures a PayPal order successfully', async () => {
|
||||
createPayPalOrderMock.mockResolvedValue('ORDER-123');
|
||||
capturePayPalOrderMock.mockResolvedValue(undefined);
|
||||
it('opens Paddle checkout when created successfully', async () => {
|
||||
createPaddleCheckoutMock.mockResolvedValue({ checkout_url: 'https://paddle.example/checkout' });
|
||||
const onSuccess = vi.fn();
|
||||
const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
|
||||
|
||||
render(
|
||||
<PayPalCheckout
|
||||
<PaddleCheckout
|
||||
packageId={99}
|
||||
onSuccess={onSuccess}
|
||||
t={(key: string) => key}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(paypalPropsRef.current).toBeTruthy();
|
||||
const { createOrder, onApprove } = paypalPropsRef.current;
|
||||
await act(async () => {
|
||||
const orderId = await createOrder();
|
||||
expect(orderId).toBe('ORDER-123');
|
||||
});
|
||||
await act(async () => {
|
||||
await onApprove({ orderID: 'ORDER-123' });
|
||||
screen.getByRole('button').click();
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(createPayPalOrderMock).toHaveBeenCalledWith(99);
|
||||
expect(capturePayPalOrderMock).toHaveBeenCalledWith('ORDER-123');
|
||||
expect(createPaddleCheckoutMock).toHaveBeenCalledWith(99);
|
||||
expect(openSpy).toHaveBeenCalledWith('https://paddle.example/checkout', '_blank', 'noopener');
|
||||
expect(onSuccess).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
openSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('surfaces missing order id errors', async () => {
|
||||
createPayPalOrderMock.mockResolvedValue('ORDER-123');
|
||||
it('shows an error message on failure', async () => {
|
||||
createPaddleCheckoutMock.mockRejectedValue(new Error('boom'));
|
||||
|
||||
render(
|
||||
<PayPalCheckout
|
||||
<PaddleCheckout
|
||||
packageId={99}
|
||||
onSuccess={vi.fn()}
|
||||
t={(key: string) => key}
|
||||
/>
|
||||
);
|
||||
|
||||
const { onApprove } = paypalPropsRef.current;
|
||||
await act(async () => {
|
||||
await onApprove({ orderID: undefined });
|
||||
screen.getByRole('button').click();
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('summary.paypal.missingOrderId')).toBeInTheDocument();
|
||||
expect(screen.getByText('summary.paddle.genericError')).toBeInTheDocument();
|
||||
});
|
||||
expect(capturePayPalOrderMock).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -10,8 +10,6 @@ import {
|
||||
AlertTriangle,
|
||||
Loader2,
|
||||
} from "lucide-react";
|
||||
import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
|
||||
import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
|
||||
|
||||
import {
|
||||
TenantWelcomeLayout,
|
||||
@@ -26,30 +24,15 @@ import { ADMIN_BILLING_PATH, ADMIN_WELCOME_EVENT_PATH, ADMIN_WELCOME_PACKAGES_PA
|
||||
import { useTenantPackages } from "../hooks/useTenantPackages";
|
||||
import {
|
||||
assignFreeTenantPackage,
|
||||
completeTenantPackagePurchase,
|
||||
createTenantPackagePaymentIntent,
|
||||
createTenantPayPalOrder,
|
||||
captureTenantPayPalOrder,
|
||||
createTenantPaddleCheckout,
|
||||
} from "../../api";
|
||||
import { getStripe } from '@/utils/stripe';
|
||||
|
||||
const stripePublishableKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY ?? "";
|
||||
const paypalClientId = import.meta.env.VITE_PAYPAL_CLIENT_ID ?? "";
|
||||
|
||||
type StripeCheckoutProps = {
|
||||
clientSecret: string;
|
||||
type PaddleCheckoutProps = {
|
||||
packageId: number;
|
||||
onSuccess: () => void;
|
||||
t: ReturnType<typeof useTranslation>["t"];
|
||||
};
|
||||
|
||||
type PayPalCheckoutProps = {
|
||||
packageId: number;
|
||||
onSuccess: () => void;
|
||||
t: ReturnType<typeof useTranslation>["t"];
|
||||
currency?: string;
|
||||
};
|
||||
|
||||
function useLocaleFormats(locale: string) {
|
||||
const currencyFormatter = React.useMemo(
|
||||
() =>
|
||||
@@ -86,175 +69,53 @@ function humanizeFeature(t: ReturnType<typeof useTranslation>["t"], key: string)
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
function StripeCheckoutForm({ clientSecret, packageId, onSuccess, t }: StripeCheckoutProps) {
|
||||
const stripe = useStripe();
|
||||
const elements = useElements();
|
||||
const [submitting, setSubmitting] = React.useState(false);
|
||||
function PaddleCheckout({ packageId, onSuccess, t }: PaddleCheckoutProps) {
|
||||
const [status, setStatus] = React.useState<'idle' | 'processing' | 'success' | 'error'>('idle');
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
|
||||
const handleSubmit = async (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
if (!stripe || !elements) {
|
||||
setError(t("summary.stripe.notReady"));
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
const result = await stripe.confirmPayment({
|
||||
elements,
|
||||
confirmParams: {
|
||||
return_url: window.location.href,
|
||||
},
|
||||
redirect: "if_required",
|
||||
});
|
||||
|
||||
if (result.error) {
|
||||
setError(result.error.message ?? t("summary.stripe.genericError"));
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const paymentIntent = result.paymentIntent;
|
||||
const paymentMethodId =
|
||||
typeof paymentIntent?.payment_method === "string"
|
||||
? paymentIntent.payment_method
|
||||
: typeof paymentIntent?.id === "string"
|
||||
? paymentIntent.id
|
||||
: null;
|
||||
|
||||
if (!paymentMethodId) {
|
||||
setError(t("summary.stripe.missingPaymentId"));
|
||||
setSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const handleCheckout = React.useCallback(async () => {
|
||||
try {
|
||||
await completeTenantPackagePurchase({
|
||||
packageId,
|
||||
paymentMethodId,
|
||||
});
|
||||
setStatus('processing');
|
||||
setError(null);
|
||||
const { checkout_url } = await createTenantPaddleCheckout(packageId);
|
||||
window.open(checkout_url, '_blank', 'noopener');
|
||||
setStatus('success');
|
||||
onSuccess();
|
||||
} catch (purchaseError) {
|
||||
console.error("[Onboarding] Purchase completion failed", purchaseError);
|
||||
setError(
|
||||
purchaseError instanceof Error
|
||||
? purchaseError.message
|
||||
: t("summary.stripe.completionFailed")
|
||||
);
|
||||
setSubmitting(false);
|
||||
} catch (err) {
|
||||
console.error('[Onboarding] Paddle checkout failed', err);
|
||||
setStatus('error');
|
||||
setError(err instanceof Error ? err.message : t('summary.paddle.genericError'));
|
||||
}
|
||||
};
|
||||
}, [packageId, onSuccess, t]);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="space-y-6 rounded-2xl border border-brand-rose-soft bg-brand-card p-6 shadow-brand-primary">
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-medium text-brand-slate">{t("summary.stripe.heading")}</p>
|
||||
<PaymentElement id="payment-element" />
|
||||
</div>
|
||||
<div className="space-y-3 rounded-2xl border border-brand-rose-soft bg-white/85 p-6 shadow-inner">
|
||||
<p className="text-sm font-medium text-brand-slate">{t('summary.paddle.heading')}</p>
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTitle>{t("summary.stripe.errorTitle")}</AlertTitle>
|
||||
<AlertTitle>{t('summary.paddle.errorTitle')}</AlertTitle>
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={submitting || !stripe || !elements}
|
||||
size="lg"
|
||||
className="w-full rounded-full bg-brand-rose text-white shadow-lg shadow-rose-400/40 hover:bg-[var(--brand-rose-strong)] disabled:opacity-60"
|
||||
disabled={status === 'processing'}
|
||||
onClick={handleCheckout}
|
||||
>
|
||||
{submitting ? (
|
||||
{status === 'processing' ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 size-4 animate-spin" />
|
||||
{t("summary.stripe.submitting")}
|
||||
{t('summary.paddle.processing')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CreditCard className="mr-2 size-4" />
|
||||
{t("summary.stripe.submit")}
|
||||
{t('summary.paddle.cta')}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<p className="text-xs text-brand-navy/70">{t("summary.stripe.hint")}</p>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
function PayPalCheckout({ packageId, onSuccess, t, currency = "EUR" }: PayPalCheckoutProps) {
|
||||
const [status, setStatus] = React.useState<"idle" | "creating" | "capturing" | "error" | "success">("idle");
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
|
||||
const handleCreateOrder = React.useCallback(async () => {
|
||||
try {
|
||||
setStatus("creating");
|
||||
const orderId = await createTenantPayPalOrder(packageId);
|
||||
setStatus("idle");
|
||||
setError(null);
|
||||
return orderId;
|
||||
} catch (err) {
|
||||
console.error("[Onboarding] PayPal create order failed", err);
|
||||
setStatus("error");
|
||||
setError(
|
||||
err instanceof Error ? err.message : t("summary.paypal.createFailed")
|
||||
);
|
||||
throw err;
|
||||
}
|
||||
}, [packageId, t]);
|
||||
|
||||
const handleApprove = React.useCallback(
|
||||
async (orderId: string) => {
|
||||
try {
|
||||
setStatus("capturing");
|
||||
await captureTenantPayPalOrder(orderId);
|
||||
setStatus("success");
|
||||
setError(null);
|
||||
onSuccess();
|
||||
} catch (err) {
|
||||
console.error("[Onboarding] PayPal capture failed", err);
|
||||
setStatus("error");
|
||||
setError(
|
||||
err instanceof Error ? err.message : t("summary.paypal.captureFailed")
|
||||
);
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
[onSuccess, t]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-3 rounded-2xl border border-brand-rose-soft bg-white/85 p-6 shadow-inner">
|
||||
<p className="text-sm font-medium text-brand-slate">{t("summary.paypal.heading")}</p>
|
||||
{error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTitle>{t("summary.paypal.errorTitle")}</AlertTitle>
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<PayPalButtons
|
||||
style={{ layout: "vertical" }}
|
||||
forceReRender={[packageId, currency]}
|
||||
createOrder={async () => handleCreateOrder()}
|
||||
onApprove={async (data) => {
|
||||
if (!data.orderID) {
|
||||
setError(t("summary.paypal.missingOrderId"));
|
||||
setStatus("error");
|
||||
return;
|
||||
}
|
||||
await handleApprove(data.orderID);
|
||||
}}
|
||||
onError={(err) => {
|
||||
console.error("[Onboarding] PayPal onError", err);
|
||||
setStatus("error");
|
||||
setError(t("summary.paypal.genericError"));
|
||||
}}
|
||||
onCancel={() => {
|
||||
setStatus("idle");
|
||||
setError(t("summary.paypal.cancelled"));
|
||||
}}
|
||||
disabled={status === "creating" || status === "capturing"}
|
||||
/>
|
||||
<p className="text-xs text-brand-navy/70">{t("summary.paypal.hint")}</p>
|
||||
<p className="text-xs text-brand-navy/70">{t('summary.paddle.hint')}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -267,7 +128,6 @@ export default function WelcomeOrderSummaryPage() {
|
||||
const { t, i18n } = useTranslation("onboarding");
|
||||
const locale = i18n.language?.startsWith("en") ? "en-GB" : "de-DE";
|
||||
const { currencyFormatter, dateFormatter } = useLocaleFormats(locale);
|
||||
const stripePromise = React.useMemo(() => getStripe(stripePublishableKey), [stripePublishableKey]);
|
||||
|
||||
const packageIdFromState = typeof location.state === "object" ? (location.state as any)?.packageId : undefined;
|
||||
const selectedPackageId = progress.selectedPackage?.id ?? packageIdFromState ?? null;
|
||||
@@ -295,48 +155,9 @@ export default function WelcomeOrderSummaryPage() {
|
||||
const isSubscription = Boolean(packageDetails?.features?.subscription);
|
||||
const requiresPayment = Boolean(packageDetails && packageDetails.price > 0);
|
||||
|
||||
const [clientSecret, setClientSecret] = React.useState<string | null>(null);
|
||||
const [intentStatus, setIntentStatus] = React.useState<"idle" | "loading" | "error" | "ready">("idle");
|
||||
const [intentError, setIntentError] = React.useState<string | null>(null);
|
||||
const [freeAssignStatus, setFreeAssignStatus] = React.useState<"idle" | "loading" | "success" | "error">("idle");
|
||||
const [freeAssignError, setFreeAssignError] = React.useState<string | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!requiresPayment || !packageDetails) {
|
||||
setClientSecret(null);
|
||||
setIntentStatus("idle");
|
||||
setIntentError(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!stripePromise) {
|
||||
setIntentError(t("summary.stripe.missingKey"));
|
||||
setIntentStatus("error");
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
setIntentStatus("loading");
|
||||
setIntentError(null);
|
||||
|
||||
createTenantPackagePaymentIntent(packageDetails.id)
|
||||
.then((secret) => {
|
||||
if (cancelled) return;
|
||||
setClientSecret(secret);
|
||||
setIntentStatus("ready");
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("[Onboarding] Payment intent failed", error);
|
||||
if (cancelled) return;
|
||||
setIntentStatus("error");
|
||||
setIntentError(error instanceof Error ? error.message : t("summary.stripe.intentFailed"));
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [requiresPayment, packageDetails, stripePromise, t]);
|
||||
|
||||
const priceText =
|
||||
progress.selectedPackage?.priceText ??
|
||||
(packageDetails && typeof packageDetails.price === "number"
|
||||
@@ -534,63 +355,16 @@ export default function WelcomeOrderSummaryPage() {
|
||||
)}
|
||||
|
||||
{requiresPayment && (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-lg font-semibold text-brand-slate">{t("summary.stripe.sectionTitle")}</h4>
|
||||
{intentStatus === "loading" && (
|
||||
<div className="flex items-center gap-3 rounded-2xl border border-brand-rose-soft bg-brand-card p-6 text-sm text-brand-navy/80">
|
||||
<Loader2 className="size-4 animate-spin text-brand-rose" />
|
||||
{t("summary.stripe.loading")}
|
||||
</div>
|
||||
)}
|
||||
{intentStatus === "error" && (
|
||||
<Alert variant="destructive">
|
||||
<AlertTitle>{t("summary.stripe.unavailableTitle")}</AlertTitle>
|
||||
<AlertDescription>{intentError ?? t("summary.stripe.unavailableDescription")}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
{intentStatus === "ready" && clientSecret && stripePromise && (
|
||||
<Elements stripe={stripePromise} options={{ clientSecret }}>
|
||||
<StripeCheckoutForm
|
||||
clientSecret={clientSecret}
|
||||
packageId={packageDetails.id}
|
||||
onSuccess={() => {
|
||||
markStep({ packageSelected: true });
|
||||
navigate(ADMIN_WELCOME_EVENT_PATH, { replace: true });
|
||||
}}
|
||||
t={t}
|
||||
/>
|
||||
</Elements>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{paypalClientId ? (
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-lg font-semibold text-brand-slate">{t("summary.paypal.sectionTitle")}</h4>
|
||||
<PayPalScriptProvider
|
||||
options={{
|
||||
clientId: paypalClientId,
|
||||
"client-id": paypalClientId,
|
||||
currency: "EUR",
|
||||
intent: "CAPTURE",
|
||||
}}
|
||||
>
|
||||
<PayPalCheckout
|
||||
packageId={packageDetails.id}
|
||||
onSuccess={() => {
|
||||
markStep({ packageSelected: true });
|
||||
navigate(ADMIN_WELCOME_EVENT_PATH, { replace: true });
|
||||
}}
|
||||
t={t}
|
||||
/>
|
||||
</PayPalScriptProvider>
|
||||
</div>
|
||||
) : (
|
||||
<Alert variant="default" className="border-amber-200 bg-amber-50 text-amber-700">
|
||||
<AlertTitle>{t("summary.paypal.notConfiguredTitle")}</AlertTitle>
|
||||
<AlertDescription>{t("summary.paypal.notConfiguredDescription")}</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-lg font-semibold text-brand-slate">{t('summary.paddle.sectionTitle')}</h4>
|
||||
<PaddleCheckout
|
||||
packageId={packageDetails.id}
|
||||
onSuccess={() => {
|
||||
markStep({ packageSelected: true });
|
||||
navigate(ADMIN_WELCOME_EVENT_PATH, { replace: true });
|
||||
}}
|
||||
t={t}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -634,4 +408,4 @@ export default function WelcomeOrderSummaryPage() {
|
||||
);
|
||||
}
|
||||
|
||||
export { StripeCheckoutForm, PayPalCheckout };
|
||||
export { PaddleCheckout };
|
||||
|
||||
@@ -9,7 +9,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
|
||||
import { AdminLayout } from '../components/AdminLayout';
|
||||
import { getTenantPackagesOverview, TenantPackageSummary } from '../api';
|
||||
import { getTenantPackagesOverview, getTenantPaddleTransactions, PaddleTransactionSummary, TenantPackageSummary } from '../api';
|
||||
import { isAuthError } from '../auth/tokens';
|
||||
|
||||
export default function BillingPage() {
|
||||
@@ -21,6 +21,10 @@ export default function BillingPage() {
|
||||
|
||||
const [packages, setPackages] = React.useState<TenantPackageSummary[]>([]);
|
||||
const [activePackage, setActivePackage] = React.useState<TenantPackageSummary | null>(null);
|
||||
const [transactions, setTransactions] = React.useState<PaddleTransactionSummary[]>([]);
|
||||
const [transactionCursor, setTransactionCursor] = React.useState<string | null>(null);
|
||||
const [transactionsHasMore, setTransactionsHasMore] = React.useState(false);
|
||||
const [transactionsLoading, setTransactionsLoading] = React.useState(false);
|
||||
const [loading, setLoading] = React.useState(true);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
|
||||
@@ -57,9 +61,18 @@ export default function BillingPage() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const packagesResult = await getTenantPackagesOverview();
|
||||
const [packagesResult, paddleTransactions] = await Promise.all([
|
||||
getTenantPackagesOverview(),
|
||||
getTenantPaddleTransactions().catch((err) => {
|
||||
console.warn('Failed to load Paddle transactions', err);
|
||||
return { data: [] as PaddleTransactionSummary[], nextCursor: null, hasMore: false };
|
||||
}),
|
||||
]);
|
||||
setPackages(packagesResult.packages);
|
||||
setActivePackage(packagesResult.activePackage);
|
||||
setTransactions(paddleTransactions.data);
|
||||
setTransactionCursor(paddleTransactions.nextCursor);
|
||||
setTransactionsHasMore(paddleTransactions.hasMore);
|
||||
} catch (err) {
|
||||
if (!isAuthError(err)) {
|
||||
setError(t('billing.errors.load'));
|
||||
@@ -69,6 +82,25 @@ export default function BillingPage() {
|
||||
}
|
||||
}, [t]);
|
||||
|
||||
const loadMoreTransactions = React.useCallback(async () => {
|
||||
if (!transactionsHasMore || transactionsLoading || !transactionCursor) {
|
||||
return;
|
||||
}
|
||||
|
||||
setTransactionsLoading(true);
|
||||
try {
|
||||
const result = await getTenantPaddleTransactions(transactionCursor);
|
||||
setTransactions((current) => [...current, ...result.data]);
|
||||
setTransactionCursor(result.nextCursor);
|
||||
setTransactionsHasMore(result.hasMore && Boolean(result.nextCursor));
|
||||
} catch (error) {
|
||||
console.warn('Failed to load additional Paddle transactions', error);
|
||||
setTransactionsHasMore(false);
|
||||
} finally {
|
||||
setTransactionsLoading(false);
|
||||
}
|
||||
}, [transactionCursor, transactionsHasMore, transactionsLoading]);
|
||||
|
||||
React.useEffect(() => {
|
||||
void loadAll();
|
||||
}, [loadAll]);
|
||||
@@ -176,11 +208,134 @@ export default function BillingPage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-0 bg-white/85 shadow-xl shadow-sky-100/60">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-xl text-slate-900">
|
||||
<Sparkles className="h-5 w-5 text-sky-500" />
|
||||
{t('billing.sections.transactions.title')}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm text-slate-600">
|
||||
{t('billing.sections.transactions.description')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{transactions.length === 0 ? (
|
||||
<EmptyState message={t('billing.sections.transactions.empty')} />
|
||||
) : (
|
||||
<div className="grid gap-3">
|
||||
{transactions.map((transaction) => (
|
||||
<TransactionCard
|
||||
key={transaction.id ?? Math.random().toString(36).slice(2)}
|
||||
transaction={transaction}
|
||||
formatCurrency={formatCurrency}
|
||||
formatDate={formatDate}
|
||||
locale={locale}
|
||||
t={t}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{transactionsHasMore && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => void loadMoreTransactions()}
|
||||
disabled={transactionsLoading}
|
||||
>
|
||||
{transactionsLoading ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
{t('billing.sections.transactions.loadingMore')}
|
||||
</>
|
||||
) : (
|
||||
t('billing.sections.transactions.loadMore')
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</>
|
||||
)}
|
||||
</AdminLayout>
|
||||
);
|
||||
}
|
||||
|
||||
function TransactionCard({
|
||||
transaction,
|
||||
formatCurrency,
|
||||
formatDate,
|
||||
locale,
|
||||
t,
|
||||
}: {
|
||||
transaction: PaddleTransactionSummary;
|
||||
formatCurrency: (value: number | null | undefined, currency?: string) => string;
|
||||
formatDate: (value: string | null | undefined) => string;
|
||||
locale: string;
|
||||
t: (key: string, options?: Record<string, unknown>) => string;
|
||||
}) {
|
||||
const amount = transaction.grand_total ?? transaction.amount ?? null;
|
||||
const currency = transaction.currency ?? 'EUR';
|
||||
const createdAtIso = transaction.created_at ?? null;
|
||||
const createdAt = createdAtIso ? new Date(createdAtIso) : null;
|
||||
const createdLabel = createdAt
|
||||
? createdAt.toLocaleString(locale, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
: formatDate(createdAtIso);
|
||||
const statusKey = transaction.status ? `billing.sections.transactions.status.${transaction.status}` : 'billing.sections.transactions.status.unknown';
|
||||
const statusText = t(statusKey, {
|
||||
defaultValue: (transaction.status ?? 'unknown').replace(/_/g, ' '),
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 rounded-2xl border border-slate-200 bg-white/80 p-4 shadow-sm md:flex-row md:items-center md:justify-between">
|
||||
<div className="space-y-1">
|
||||
<p className="text-sm font-semibold text-slate-800">
|
||||
{t('billing.sections.transactions.labels.transactionId', { id: transaction.id ?? '—' })}
|
||||
</p>
|
||||
<p className="text-xs uppercase tracking-wide text-slate-500">{createdLabel}</p>
|
||||
{transaction.checkout_id && (
|
||||
<p className="text-xs text-slate-500">
|
||||
{t('billing.sections.transactions.labels.checkoutId', { id: transaction.checkout_id })}
|
||||
</p>
|
||||
)}
|
||||
{transaction.origin && (
|
||||
<p className="text-xs text-slate-500">
|
||||
{t('billing.sections.transactions.labels.origin', { origin: transaction.origin })}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col items-start gap-2 text-sm font-medium text-slate-700 md:flex-row md:items-center md:gap-4">
|
||||
<Badge className="bg-sky-100 text-sky-700">
|
||||
{statusText}
|
||||
</Badge>
|
||||
<div className="text-base font-semibold text-slate-900">
|
||||
{formatCurrency(amount, currency)}
|
||||
</div>
|
||||
{transaction.tax !== undefined && transaction.tax !== null && (
|
||||
<span className="text-xs text-slate-500">
|
||||
{t('billing.sections.transactions.labels.tax', { value: formatCurrency(transaction.tax, currency) })}
|
||||
</span>
|
||||
)}
|
||||
{transaction.receipt_url && (
|
||||
<a
|
||||
href={transaction.receipt_url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-xs font-medium text-sky-600 hover:text-sky-700"
|
||||
>
|
||||
{t('billing.sections.transactions.labels.receipt')}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InfoCard({
|
||||
label,
|
||||
value,
|
||||
|
||||
Reference in New Issue
Block a user