@micha.bigler/ui-core-micha 4.4.0 → 4.5.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 4.5.0 - UCM-BILL-3
+
+"Withdraw contract here" for EU/EEA consumers, against the `django-core-micha` 3.5.0 withdrawal API
+(`withdrawal/`, `withdrawal/<id>/preview/`, `POST withdrawal/<id>/`). `WithdrawalSection` lists only the purchases the
+server calls eligible, with the 14-day deadline (purchase date plus 14 days) and a button; `WithdrawalDialog` shows the
+server's refund amount and a calculation composed from the server's numbers (`describeCalculation`), confirms exactly
+once and shows the result. The kit never decides eligibility or the amount itself; a 409 shows "not possible". The
+section is part of `SubscriptionSection` (prop `withdrawal`, default `true`, `false` hides it). `createBillingApi`
+gets `listWithdrawals`, `previewWithdrawal`, `confirmWithdrawal`; `formatPrice` takes an optional currency and
+`formatDateTime` is new. New keys `Billing.WITHDRAWAL_*` (de formal, de_informal, en, fr, sw).
+
 ## 4.4.0 - UCM-BILL-1
 
 Subscription and token surfaces in the main entry, against the `django-core-micha` billing API (DCM-BILL-1, `me/`,

package/dist/billing/SubscriptionSection.js

@@ -9,15 +9,17 @@ import { formatDate, formatPrice, formatTokens } from './format';
 import { PlanPicker } from './PlanPicker';
 import { TokenBalanceBadge } from './TokenBalanceBadge';
 import { AccessEndedBanner } from './AccessEndedBanner';
+import { WithdrawalSection } from './WithdrawalSection';
 export const SUBSCRIPTION_SECTION_ALERT_SX = { width: '100%' };
 function isStatus(error, status) { var _a; return ((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.status) === status; }
 function activeUntil(access, t, language) {
     const date = formatDate(access === null || access === void 0 ? void 0 : access.ends_at, language);
     return date ? t('Billing.ACTIVE_UNTIL', { date }) : null;
 }
-export function SubscriptionSection({ api = defaultBillingApi, redirect = (url) => window.location.assign(url), allowedHosts = DEFAULT_PAYMENT_HOSTS, onRenew, describePlan, sx }) {
+export function SubscriptionSection({ api = defaultBillingApi, redirect = (url) => window.location.assign(url), allowedHosts = DEFAULT_PAYMENT_HOSTS, onRenew, describePlan, withdrawal = true, sx }) {
     const { t, i18n } = useTranslation();
     const { state, me, reload } = useBilling(api);
+    const [withdrawnPurchases, setWithdrawnPurchases] = useState({});
     const [seats, setSeats] = useState(null);
     const [seatError, setSeatError] = useState(null);
     const [seatInput, setSeatInput] = useState('');
@@ -90,6 +92,10 @@ export function SubscriptionSection({ api = defaultBillingApi, redirect = (url)
                             var _a, _b, _c, _d;
                             (_b = (_a = renewalPickerRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { behavior: 'smooth', block: 'start' });
                             (_d = (_c = renewalPickerRef.current) === null || _c === void 0 ? void 0 : _c.querySelector('input[type="radio"]')) === null || _d === void 0 ? void 0 : _d.focus();
-                        }) }), _jsx("div", { ref: renewalPickerRef, children: _jsx(PlanPicker, { plans: me.plans || [], api: api, redirect: redirect, allowedHosts: allowedHosts, describePlan: describePlan }) })] }) : _jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h5", children: t('Billing.HEADING') }), _jsx(Typography, { children: sourceLine }), access.source !== 'free' && dateLine && _jsx(Typography, { children: dateLine }), access.source === 'subscription' && _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Button, { disabled: busy, onClick: () => safeRedirect(() => api.openPortal(), 'Billing.ERROR_PORTAL'), children: t('Billing.MANAGE') }), _jsx(Typography, { children: t('Billing.MANAGE_DETAILS') })] }), access.source === 'team' && seatError && !seats && _jsx(Alert, { severity: "error", sx: SUBSCRIPTION_SECTION_ALERT_SX, children: t('Billing.ERROR_LOAD') }), access.source === 'team' && seats && _jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { children: t('Billing.TEAM_SEATS') }), seats.map((seat) => _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { children: String(seat.user_id) }), _jsx(Button, { disabled: busy, onClick: () => updateSeat(() => api.removeSeat({ userId: seat.user_id })), children: t('Billing.SEAT_REMOVE') })] }, seat.user_id)), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(TextField, { size: "small", label: t('Billing.SEAT_USER'), value: seatInput, onChange: (event) => setSeatInput(event.target.value) }), _jsx(Button, { disabled: busy || !seatInput.trim(), onClick: () => updateSeat(() => seatInput.includes('@') ? api.addSeat({ email: seatInput.trim() }) : api.addSeat({ userId: seatInput.trim() })), children: t('Billing.SEATS_ADD') })] }), seatError && _jsx(Alert, { severity: "error", sx: SUBSCRIPTION_SECTION_ALERT_SX, children: typeof seatError === 'string' ? t(seatError) : t('Billing.ERROR_LOAD') })] }), actionError && _jsx(Alert, { severity: "error", sx: SUBSCRIPTION_SECTION_ALERT_SX, children: t(actionError) })] }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { children: t('Billing.BALANCE_LABEL') }), _jsx(TokenBalanceBadge, { balance: tokens.balance })] }), _jsx(Typography, { children: t('Billing.BALANCE', { tokens: formatTokens(tokens.balance, i18n.language) }) }), packagePlans.length > 0 && _jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('Billing.BUY_PACKAGE') }), packagePlans.map((plan) => _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsxs(Typography, { children: [formatPrice(plan.amount_cents, i18n.language), " \u00B7 ", t('Billing.PACKAGE_TOKENS', { tokens: formatTokens(plan.tokens, i18n.language) })] }), _jsx(Button, { disabled: busy, onClick: () => safeRedirect(() => api.startCheckout(plan.key), 'Billing.ERROR_CHECKOUT'), children: t('Billing.PACKAGE_BUY') })] }, plan.key))] })] });
+                        }) }), _jsx("div", { ref: renewalPickerRef, children: _jsx(PlanPicker, { plans: me.plans || [], api: api, redirect: redirect, allowedHosts: allowedHosts, describePlan: describePlan }) })] }) : _jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h5", children: t('Billing.HEADING') }), _jsx(Typography, { children: sourceLine }), access.source !== 'free' && dateLine && _jsx(Typography, { children: dateLine }), access.source === 'subscription' && _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Button, { disabled: busy, onClick: () => safeRedirect(() => api.openPortal(), 'Billing.ERROR_PORTAL'), children: t('Billing.MANAGE') }), _jsx(Typography, { children: t('Billing.MANAGE_DETAILS') })] }), access.source === 'team' && seatError && !seats && _jsx(Alert, { severity: "error", sx: SUBSCRIPTION_SECTION_ALERT_SX, children: t('Billing.ERROR_LOAD') }), access.source === 'team' && seats && _jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { children: t('Billing.TEAM_SEATS') }), seats.map((seat) => _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { children: String(seat.user_id) }), _jsx(Button, { disabled: busy, onClick: () => updateSeat(() => api.removeSeat({ userId: seat.user_id })), children: t('Billing.SEAT_REMOVE') })] }, seat.user_id)), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(TextField, { size: "small", label: t('Billing.SEAT_USER'), value: seatInput, onChange: (event) => setSeatInput(event.target.value) }), _jsx(Button, { disabled: busy || !seatInput.trim(), onClick: () => updateSeat(() => seatInput.includes('@') ? api.addSeat({ email: seatInput.trim() }) : api.addSeat({ userId: seatInput.trim() })), children: t('Billing.SEATS_ADD') })] }), seatError && _jsx(Alert, { severity: "error", sx: SUBSCRIPTION_SECTION_ALERT_SX, children: typeof seatError === 'string' ? t(seatError) : t('Billing.ERROR_LOAD') })] }), actionError && _jsx(Alert, { severity: "error", sx: SUBSCRIPTION_SECTION_ALERT_SX, children: t(actionError) })] }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { children: t('Billing.BALANCE_LABEL') }), _jsx(TokenBalanceBadge, { balance: tokens.balance })] }), _jsx(Typography, { children: t('Billing.BALANCE', { tokens: formatTokens(tokens.balance, i18n.language) }) }), packagePlans.length > 0 && _jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('Billing.BUY_PACKAGE') }), packagePlans.map((plan) => _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsxs(Typography, { children: [formatPrice(plan.amount_cents, i18n.language), " \u00B7 ", t('Billing.PACKAGE_TOKENS', { tokens: formatTokens(plan.tokens, i18n.language) })] }), _jsx(Button, { disabled: busy, onClick: () => safeRedirect(() => api.startCheckout(plan.key), 'Billing.ERROR_CHECKOUT'), children: t('Billing.PACKAGE_BUY') })] }, plan.key))] }), withdrawal && _jsx(WithdrawalSection, { api: api, plans: me.plans, sessionWithdrawals: withdrawnPurchases, onWithdrawn: (result, purchase) => {
+                    if ((purchase === null || purchase === void 0 ? void 0 : purchase.id) != null)
+                        setWithdrawnPurchases((current) => (Object.assign(Object.assign({}, current), { [purchase.id]: { result, purchase } })));
+                    reload();
+                } })] });
 }
 export default SubscriptionSection;

package/dist/billing/WithdrawalDialog.js

@@ -0,0 +1,95 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+import { Alert, Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, Stack, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { formatDateTime, formatPrice } from './format';
+export const WITHDRAWAL_DIALOG_ALERT_SX = { width: '100%' };
+export function describeCalculation(preview, t, language) {
+    const currency = (preview === null || preview === void 0 ? void 0 : preview.currency) || 'USD';
+    const price = (value) => formatPrice(value, language, currency);
+    const items = [t('Billing.WITHDRAWAL_PAID', { amount: price(preview === null || preview === void 0 ? void 0 : preview.amount_paid_cents) })];
+    const time = Number(preview === null || preview === void 0 ? void 0 : preview.time_share_cents) || 0;
+    const token = Number(preview === null || preview === void 0 ? void 0 : preview.token_share_cents) || 0;
+    if (time !== 0 || ((preview === null || preview === void 0 ? void 0 : preview.kind) !== 'token_package' && token === 0))
+        items.push(t('Billing.WITHDRAWAL_TIME_SHARE', { amount: price(time) }));
+    if (token !== 0 || (preview === null || preview === void 0 ? void 0 : preview.kind) === 'token_package')
+        items.push(t('Billing.WITHDRAWAL_TOKEN_SHARE', { amount: price(token) }));
+    const used = Number.isFinite(preview === null || preview === void 0 ? void 0 : preview.used_cents) ? preview.used_cents : Math.max(time, token);
+    items.push(t('Billing.WITHDRAWAL_USED', { amount: price(used) }));
+    items.push(t('Billing.WITHDRAWAL_REFUND', { amount: price(preview === null || preview === void 0 ? void 0 : preview.refund_cents) }));
+    return items.join(' · ');
+}
+export function WithdrawalDialog({ open, purchase, api, onClose, onWithdrawn }) {
+    const { t, i18n } = useTranslation();
+    const [state, setState] = useState('loading');
+    const [preview, setPreview] = useState(null);
+    const [result, setResult] = useState(null);
+    const [errorStatus, setErrorStatus] = useState(null);
+    const [attempt, setAttempt] = useState(0);
+    const confirmGuard = useRef(false);
+    const notified = useRef(false);
+    const previewRequest = useRef(null);
+    const titleId = `withdrawal-title-${purchase === null || purchase === void 0 ? void 0 : purchase.id}`;
+    useEffect(() => {
+        var _a;
+        if (!open || !purchase || typeof (api === null || api === void 0 ? void 0 : api.previewWithdrawal) !== 'function') {
+            if (!open)
+                previewRequest.current = null;
+            return undefined;
+        }
+        const requestKey = String(purchase.id) + ':' + attempt;
+        let live = true;
+        setState('loading');
+        setPreview(null);
+        setResult(null);
+        setErrorStatus(null);
+        confirmGuard.current = false;
+        notified.current = false;
+        let request = ((_a = previewRequest.current) === null || _a === void 0 ? void 0 : _a.key) === requestKey ? previewRequest.current.promise : null;
+        if (!request) {
+            request = Promise.resolve().then(() => api.previewWithdrawal(purchase.id));
+            previewRequest.current = { key: requestKey, promise: request };
+        }
+        request.then((data) => {
+            if (!live)
+                return;
+            setPreview(data);
+            setState((data === null || data === void 0 ? void 0 : data.eligible) === true ? 'ready' : 'not_possible');
+        }).catch((error) => {
+            var _a;
+            if (!live)
+                return;
+            setErrorStatus((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.status);
+            setState('preview_error');
+        });
+        return () => { live = false; };
+    }, [open, purchase === null || purchase === void 0 ? void 0 : purchase.id, api, attempt]);
+    const confirm = async () => {
+        var _a, _b;
+        if (confirmGuard.current || !['ready', 'confirm_error'].includes(state) || typeof (api === null || api === void 0 ? void 0 : api.confirmWithdrawal) !== 'function')
+            return;
+        confirmGuard.current = true;
+        setState('submitting');
+        setErrorStatus(null);
+        try {
+            const value = await api.confirmWithdrawal(purchase.id);
+            setResult(value);
+            setState('success');
+            if (!notified.current) {
+                notified.current = true;
+                onWithdrawn === null || onWithdrawn === void 0 ? void 0 : onWithdrawn(value, purchase);
+            }
+        }
+        catch (error) {
+            setErrorStatus((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.status);
+            setState(((_b = error === null || error === void 0 ? void 0 : error.response) === null || _b === void 0 ? void 0 : _b.status) === 409 ? 'not_possible' : 'confirm_error');
+            confirmGuard.current = false;
+        }
+    };
+    const close = () => { if (state !== 'submitting')
+        onClose === null || onClose === void 0 ? void 0 : onClose(); };
+    const amount = formatPrice(preview === null || preview === void 0 ? void 0 : preview.refund_cents, i18n.language, preview === null || preview === void 0 ? void 0 : preview.currency);
+    const none = !(Number(preview === null || preview === void 0 ? void 0 : preview.refund_cents) > 0);
+    return _jsxs(Dialog, { open: open, onClose: close, disableEscapeKeyDown: state === 'submitting', fullWidth: true, maxWidth: "sm", "aria-labelledby": titleId, children: [_jsx(DialogTitle, { id: titleId, children: t(state === 'success' ? 'Billing.WITHDRAWAL_DONE' : 'Billing.WITHDRAWAL_TITLE') }), _jsxs(DialogContent, { children: [state === 'loading' && _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", role: "status", children: [_jsx(CircularProgress, { size: 20 }), _jsx(Typography, { children: t('Billing.LOADING') })] }), state === 'preview_error' && _jsx(Alert, { severity: "error", sx: WITHDRAWAL_DIALOG_ALERT_SX, children: t('Billing.WITHDRAWAL_PREVIEW_ERROR') }), (state === 'not_possible') && _jsx(Alert, { severity: "info", children: t('Billing.WITHDRAWAL_NOT_POSSIBLE') }), (state === 'ready' || state === 'submitting' || state === 'confirm_error') && _jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { children: t('Billing.WITHDRAWAL_EFFECT') }), _jsx(Typography, { children: none ? t('Billing.WITHDRAWAL_REFUND_NONE') : t('Billing.WITHDRAWAL_REFUND', { amount }) }), _jsx(Typography, { children: t('Billing.WITHDRAWAL_CALCULATION', { explanation: describeCalculation(Object.assign(Object.assign({}, preview), { kind: purchase === null || purchase === void 0 ? void 0 : purchase.kind }), t, i18n.language) }) }), state === 'confirm_error' && _jsx(Alert, { severity: "error", sx: WITHDRAWAL_DIALOG_ALERT_SX, children: t('Billing.WITHDRAWAL_ERROR') }), state === 'submitting' && _jsxs(Typography, { role: "status", children: [_jsx(CircularProgress, { size: 16 }), " ", t('Billing.LOADING')] })] }), state === 'success' && _jsx(Typography, { children: t('Billing.WITHDRAWAL_DONE_DETAIL', { date: formatDateTime(result === null || result === void 0 ? void 0 : result.withdrawn_at, i18n.language) }) })] }), _jsx(DialogActions, { children: state === 'ready' || state === 'confirm_error' ? _jsxs(_Fragment, { children: [_jsx(Button, { onClick: close, disabled: state === 'submitting', children: t('Billing.WITHDRAWAL_CANCEL') }), _jsx(Button, { variant: "contained", onClick: confirm, disabled: state === 'submitting', children: t('Billing.WITHDRAWAL_CONFIRM') })] }) : state === 'preview_error' ? _jsxs(_Fragment, { children: [_jsx(Button, { onClick: close, children: t('Billing.WITHDRAWAL_CLOSE') }), _jsx(Button, { onClick: () => setAttempt((n) => n + 1), children: t('Billing.RETRY') })] }) : (state === 'success' || state === 'not_possible') && _jsx(Button, { onClick: close, children: t('Billing.WITHDRAWAL_CLOSE') }) })] });
+}
+export default WithdrawalDialog;

package/dist/billing/WithdrawalSection.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { Alert, Button, Stack, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { formatDate, formatDateTime } from './format';
+import { WithdrawalDialog } from './WithdrawalDialog';
+export const WITHDRAWAL_SECTION_ALERT_SX = { width: '100%' };
+const is404 = (error) => { var _a; return ((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.status) === 404; };
+const deadline = (purchase) => {
+    const date = new Date(purchase.purchased_at);
+    if (!Number.isFinite(date.getTime()))
+        return '';
+    date.setUTCDate(date.getUTCDate() + 14);
+    return date.toISOString();
+};
+export function WithdrawalSection({ api, plans = [], onWithdrawn, sessionWithdrawals = {}, sx }) {
+    const { t, i18n } = useTranslation();
+    const [purchases, setPurchases] = useState([]);
+    const [withdrawn, setWithdrawn] = useState({});
+    const [selected, setSelected] = useState(null);
+    const [loadError, setLoadError] = useState(false);
+    const [reload, setReload] = useState(0);
+    useEffect(() => {
+        if (typeof (api === null || api === void 0 ? void 0 : api.listWithdrawals) !== 'function')
+            return undefined;
+        let live = true;
+        Promise.resolve().then(() => api.listWithdrawals()).then((data) => {
+            if (live) {
+                setPurchases(Array.isArray(data === null || data === void 0 ? void 0 : data.purchases) ? data.purchases : []);
+                setLoadError(false);
+            }
+        }).catch((error) => {
+            if (!live)
+                return;
+            if (is404(error)) {
+                setPurchases([]);
+                setLoadError(false);
+            }
+            else
+                setLoadError(true);
+        });
+        return () => { live = false; };
+    }, [api, reload]);
+    const handleWithdrawn = (purchaseId, result) => {
+        setWithdrawn((current) => (Object.assign(Object.assign({}, current), { [purchaseId]: { purchase: purchases.find((item) => String(item.id) === String(purchaseId)), result } })));
+        setSelected(null);
+        onWithdrawn === null || onWithdrawn === void 0 ? void 0 : onWithdrawn(result, purchases.find((item) => String(item.id) === String(purchaseId)));
+        setReload((count) => count + 1);
+    };
+    const successful = Object.assign(Object.assign({}, sessionWithdrawals), withdrawn);
+    const eligible = purchases.filter((item) => (item === null || item === void 0 ? void 0 : item.eligible) === true && item.withdrawn_at == null && !successful[item.id]);
+    if (loadError)
+        return _jsxs(Stack, { sx: sx, spacing: 1, children: [_jsx(Alert, { severity: "error", sx: WITHDRAWAL_SECTION_ALERT_SX, children: t('Billing.WITHDRAWAL_LOAD_ERROR') }), _jsx(Button, { onClick: () => setReload((count) => count + 1), children: t('Billing.RETRY') }), Object.entries(successful).map(([id, entry]) => { var _a; return _jsxs(Stack, { spacing: 0.5, role: "status", children: [_jsx(Typography, { children: t('Billing.WITHDRAWAL_DONE') }), _jsx(Typography, { children: t('Billing.WITHDRAWAL_DONE_DETAIL', { date: formatDateTime((_a = ((entry === null || entry === void 0 ? void 0 : entry.result) || entry)) === null || _a === void 0 ? void 0 : _a.withdrawn_at, i18n.language) }) })] }, id); })] });
+    if (!eligible.length && !Object.keys(successful).length)
+        return null;
+    const findPlan = (key) => { var _a; return ((_a = plans.find((plan) => (plan === null || plan === void 0 ? void 0 : plan.key) === key)) === null || _a === void 0 ? void 0 : _a.name) || key; };
+    return _jsxs(Stack, { sx: sx, spacing: 1, children: [eligible.map((purchase) => _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", children: [_jsx(Typography, { children: findPlan(purchase.plan_key) }), _jsx(Typography, { children: formatDate(purchase.purchased_at, i18n.language) }), _jsx(Typography, { children: t('Billing.WITHDRAWAL_UNTIL', { date: formatDate(deadline(purchase), i18n.language) }) }), _jsx(Button, { onClick: () => setSelected(purchase), children: t('Billing.WITHDRAWAL_BUTTON') })] }, purchase.id)), Object.entries(successful).map(([id, entry]) => { var _a; return _jsxs(Stack, { spacing: 0.5, role: "status", children: [_jsx(Typography, { children: t('Billing.WITHDRAWAL_DONE') }), _jsx(Typography, { children: t('Billing.WITHDRAWAL_DONE_DETAIL', { date: formatDateTime((_a = ((entry === null || entry === void 0 ? void 0 : entry.result) || entry)) === null || _a === void 0 ? void 0 : _a.withdrawn_at, i18n.language) }) })] }, id); }), _jsx(WithdrawalDialog, { open: Boolean(selected), purchase: selected, api: api, onClose: () => setSelected(null), onWithdrawn: (result) => selected && handleWithdrawn(selected.id, result) })] });
+}
+export default WithdrawalSection;

package/dist/billing/api.js

@@ -10,6 +10,9 @@ export function createBillingApi(overrides = {}, { apiBase = '/api/billing/' } =
         listSeats: () => data(apiClient.get(urls.seats)),
         addSeat: ({ userId, email } = {}) => data(apiClient.post(urls.seats, userId !== undefined ? { user_id: userId } : { email })),
         removeSeat: ({ userId, email } = {}) => data(apiClient.delete(urls.seats, { data: userId !== undefined ? { user_id: userId } : { email } })),
+        listWithdrawals: () => data(apiClient.get(urls.withdrawals)),
+        previewWithdrawal: (id) => data(apiClient.get(urls.withdrawalPreview(id))),
+        confirmWithdrawal: (id) => data(apiClient.post(urls.withdrawalConfirm(id), { confirm: true })),
     };
     return Object.assign(Object.assign({}, defaults), overrides);
 }

package/dist/billing/format.js

@@ -1,12 +1,26 @@
-export function formatPrice(amountCents, language) {
+// The kit's own language codes (for example de_informal) are not valid Intl locales; use the base language.
+export function intlLocale(language) {
+    return typeof language === 'string' && language ? language.split('_')[0] : undefined;
+}
+export function formatPrice(amountCents, language, currency = 'USD') {
     if (!Number.isFinite(amountCents))
         return '';
-    return new Intl.NumberFormat(language, { style: 'currency', currency: 'USD' }).format(amountCents / 100);
+    const candidate = typeof currency === 'string' ? currency.toUpperCase() : '';
+    let validCurrency = 'USD';
+    try {
+        const supported = typeof Intl.supportedValuesOf === 'function' ? Intl.supportedValuesOf('currency') : null;
+        if (/^[A-Z]{3}$/.test(candidate) && (!supported || supported.includes(candidate))) {
+            new Intl.NumberFormat(intlLocale(language), { style: 'currency', currency: candidate });
+            validCurrency = candidate;
+        }
+    }
+    catch (_a) { /* use USD for unknown currency codes */ }
+    return new Intl.NumberFormat(intlLocale(language), { style: 'currency', currency: validCurrency }).format(amountCents / 100);
 }
 export function formatTokens(count, language) {
     if (!Number.isFinite(count))
         return '';
-    return new Intl.NumberFormat(language, { maximumFractionDigits: 0 }).format(count);
+    return new Intl.NumberFormat(intlLocale(language), { maximumFractionDigits: 0 }).format(count);
 }
 export function formatDate(iso, language) {
     if (typeof iso !== 'string' || !iso)
@@ -14,5 +28,13 @@ export function formatDate(iso, language) {
     const date = new Date(iso);
     if (!Number.isFinite(date.getTime()))
         return '';
-    return new Intl.DateTimeFormat(language, { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' }).format(date);
+    return new Intl.DateTimeFormat(intlLocale(language), { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' }).format(date);
+}
+export function formatDateTime(iso, language) {
+    if (typeof iso !== 'string' || !iso)
+        return '';
+    const date = new Date(iso);
+    if (!Number.isFinite(date.getTime()))
+        return '';
+    return new Intl.DateTimeFormat(intlLocale(language), { dateStyle: 'long', timeStyle: 'short' }).format(date);
 }

package/dist/billing/wire.js

@@ -9,5 +9,8 @@ export const billingApiUrls = (base = '/api/billing/') => {
         checkout: root + 'checkout/',
         portal: root + 'portal/',
         seats: root + 'team/seats/',
+        withdrawals: root + 'withdrawal/',
+        withdrawalPreview: (id) => root + `withdrawal/${encodeURIComponent(id)}/preview/`,
+        withdrawalConfirm: (id) => root + `withdrawal/${encodeURIComponent(id)}/`,
     };
 };

package/dist/i18n/billingTranslations.js

@@ -40,4 +40,24 @@ export const billingTranslations = {
     'Billing.TEAM_SEATS': { de: 'Sitzplätze im Team-Paket', en: 'Seats in the team package', fr: 'Places dans le forfait d’équipe', sw: 'Nafasi katika kifurushi cha timu' },
     'Billing.PACKAGE_TOKENS': { de: '{{tokens}} Token', en: '{{tokens}} tokens', fr: '{{tokens}} jetons', sw: 'Tokeni {{tokens}}' },
     'Billing.PLANS': { de: 'Pläne', en: 'Plans', fr: 'Offres', sw: 'Mipango' },
+    'Billing.WITHDRAWAL_BUTTON': { de: 'Vertrag hier widerrufen', de_informal: 'Vertrag hier widerrufen', en: 'Withdraw this contract', fr: 'Révoquer ce contrat ici', sw: 'Ondoa mkataba huu hapa' },
+    'Billing.WITHDRAWAL_UNTIL': { de: 'bis {{date}}', de_informal: 'bis {{date}}', en: 'until {{date}}', fr: 'jusqu’au {{date}}', sw: 'hadi {{date}}' },
+    'Billing.WITHDRAWAL_TITLE': { de: 'Vertrag widerrufen?', de_informal: 'Vertrag widerrufen?', en: 'Withdraw this contract?', fr: 'Révoquer ce contrat ?', sw: 'Uondoe mkataba huu?' },
+    'Billing.WITHDRAWAL_EFFECT': { de: 'Mit dem Widerruf endet der Zugang aus diesem Kauf sofort, und das Abo verlängert sich nicht.', de_informal: 'Mit dem Widerruf endet der Zugang aus diesem Kauf sofort, und das Abo verlängert sich nicht.', en: 'With the withdrawal, access from this purchase ends immediately and the subscription will not renew.', fr: 'La révocation met immédiatement fin à l’accès lié à cet achat et l’abonnement ne sera pas renouvelé.', sw: 'Ukiondoa, ufikiaji wa ununuzi huu utaisha mara moja na usajili hautasasishwa.' },
+    'Billing.WITHDRAWAL_REFUND': { de: 'Sie erhalten {{amount}} zurück.', de_informal: 'Du erhältst {{amount}} zurück.', en: 'You will receive {{amount}} back.', fr: 'Vous recevrez {{amount}} en remboursement.', sw: 'Utarejeshewa {{amount}}.' },
+    'Billing.WITHDRAWAL_REFUND_NONE': { de: 'Sie erhalten keine Rückzahlung.', de_informal: 'Du erhältst keine Rückzahlung.', en: 'You will receive no refund.', fr: 'Vous ne recevrez aucun remboursement.', sw: 'Hutapokea marejesho ya pesa.' },
+    'Billing.WITHDRAWAL_CALCULATION': { de: 'Berechnung: {{explanation}}', de_informal: 'Berechnung: {{explanation}}', en: 'Calculation: {{explanation}}', fr: 'Calcul : {{explanation}}', sw: 'Hesabu: {{explanation}}' },
+    'Billing.WITHDRAWAL_CONFIRM': { de: 'Widerruf bestätigen', de_informal: 'Widerruf bestätigen', en: 'Confirm withdrawal', fr: 'Confirmer la révocation', sw: 'Thibitisha uondoaji' },
+    'Billing.WITHDRAWAL_CANCEL': { de: 'Abbrechen', de_informal: 'Abbrechen', en: 'Cancel', fr: 'Annuler', sw: 'Ghairi' },
+    'Billing.WITHDRAWAL_DONE': { de: 'Widerruf eingegangen', de_informal: 'Widerruf eingegangen', en: 'Withdrawal received', fr: 'Révocation reçue', sw: 'Uondoaji umepokelewa' },
+    'Billing.WITHDRAWAL_DONE_DETAIL': { de: 'Eingegangen am {{date}}. Eine Bestätigung ist per E-Mail unterwegs; die Rückzahlung folgt innerhalb von 14 Tagen.', de_informal: 'Eingegangen am {{date}}. Eine Bestätigung ist per E-Mail unterwegs; die Rückzahlung folgt innert 14 Tagen.', en: 'Received on {{date}}. A confirmation email is on its way; the refund will follow within 14 days.', fr: 'Reçu le {{date}}. Un e-mail de confirmation est en route ; le remboursement suivra sous 14 jours.', sw: 'Imepokelewa {{date}}. Barua pepe ya uthibitisho inatumwa; marejesho yatafuata ndani ya siku 14.' },
+    'Billing.WITHDRAWAL_PREVIEW_ERROR': { de: 'Die Vorschau konnte nicht geladen werden.', de_informal: 'Die Vorschau konnte nicht geladen werden.', en: 'The preview could not be loaded.', fr: 'Impossible de charger l’aperçu.', sw: 'Muhtasari haukuweza kupakiwa.' },
+    'Billing.WITHDRAWAL_NOT_POSSIBLE': { de: 'Dieser Vertrag kann derzeit nicht widerrufen werden.', de_informal: 'Dieser Vertrag kann derzeit nicht widerrufen werden.', en: 'This contract cannot be withdrawn right now.', fr: 'Ce contrat ne peut pas être révoqué pour le moment.', sw: 'Mkataba huu hauwezi kuondolewa kwa sasa.' },
+    'Billing.WITHDRAWAL_ERROR': { de: 'Der Widerruf konnte nicht übermittelt werden. Bitte versuchen Sie es erneut.', de_informal: 'Der Widerruf konnte nicht übermittelt werden. Bitte versuche es erneut.', en: 'The withdrawal could not be submitted. Please try again.', fr: 'La révocation n’a pas pu être envoyée. Veuillez réessayer.', sw: 'Uondoaji haukuweza kutumwa. Tafadhali jaribu tena.' },
+    'Billing.WITHDRAWAL_LOAD_ERROR': { de: 'Widerrufsmöglichkeiten konnten nicht geladen werden.', de_informal: 'Widerrufsmöglichkeiten konnten nicht geladen werden.', en: 'Withdrawal options could not be loaded.', fr: 'Impossible de charger les possibilités de révocation.', sw: 'Chaguo za uondoaji hazikuweza kupakiwa.' },
+    'Billing.WITHDRAWAL_PAID': { de: 'Gezahlt: {{amount}}', de_informal: 'Gezahlt: {{amount}}', en: 'Paid: {{amount}}', fr: 'Payé : {{amount}}', sw: 'Imelipwa: {{amount}}' },
+    'Billing.WITHDRAWAL_TIME_SHARE': { de: 'Zeitanteil: {{amount}}', de_informal: 'Zeitanteil: {{amount}}', en: 'Time share: {{amount}}', fr: 'Part temporelle : {{amount}}', sw: 'Sehemu ya muda: {{amount}}' },
+    'Billing.WITHDRAWAL_TOKEN_SHARE': { de: 'Tokenanteil: {{amount}}', de_informal: 'Tokenanteil: {{amount}}', en: 'Token share: {{amount}}', fr: 'Part des jetons : {{amount}}', sw: 'Sehemu ya tokeni: {{amount}}' },
+    'Billing.WITHDRAWAL_USED': { de: 'Genutzt: {{amount}}', de_informal: 'Genutzt: {{amount}}', en: 'Used: {{amount}}', fr: 'Utilisé : {{amount}}', sw: 'Imetumika: {{amount}}' },
+    'Billing.WITHDRAWAL_CLOSE': { de: 'Schließen', de_informal: 'Schließen', en: 'Close', fr: 'Fermer', sw: 'Funga' },
 };

package/dist/index.js

@@ -48,6 +48,8 @@ export { TokenCostPreview } from './billing/TokenCostPreview';
 export { AccessEndedBanner } from './billing/AccessEndedBanner';
 export { PlanPicker } from './billing/PlanPicker';
 export { SubscriptionSection } from './billing/SubscriptionSection';
+export { WithdrawalSection } from './billing/WithdrawalSection';
+export { WithdrawalDialog } from './billing/WithdrawalDialog';
 export { useBilling } from './billing/useBilling';
 export { createBillingApi, defaultBillingApi } from './billing/api';
 // --- 6. Charts ---

package/dist/theme/kitSxRegistry.js

@@ -37,6 +37,8 @@ import { ACCESS_ENDED_BANNER_ALERT_SX } from '../billing/AccessEndedBanner';
 import { TOKEN_BALANCE_BADGE_SX } from '../billing/TokenBalanceBadge';
 import { PLAN_PICKER_ALERT_SX, PLAN_PICKER_CARD_SX, PLAN_PICKER_LABEL_SX, PLAN_PICKER_SELECTED_CARD_SX } from '../billing/PlanPicker';
 import { SUBSCRIPTION_SECTION_ALERT_SX } from '../billing/SubscriptionSection';
+import { WITHDRAWAL_DIALOG_ALERT_SX } from '../billing/WithdrawalDialog';
+import { WITHDRAWAL_SECTION_ALERT_SX } from '../billing/WithdrawalSection';
 const SX_EXPORTS = {
     ACCESS_CODE_ACTION_SX,
     ACCESS_ENDED_BANNER_ALERT_SX,
@@ -112,6 +114,8 @@ const SX_EXPORTS = {
     PLAN_PICKER_LABEL_SX,
     PLAN_PICKER_SELECTED_CARD_SX,
     SUBSCRIPTION_SECTION_ALERT_SX,
+    WITHDRAWAL_DIALOG_ALERT_SX,
+    WITHDRAWAL_SECTION_ALERT_SX,
     USER_INVITE_ACTION_SX,
     USER_INVITE_ALERT_SX,
     USER_LIST_ACTION_SX,
@@ -217,4 +221,6 @@ export const KIT_COMPONENT_SX_REGISTRY = [
     entry('PlanPicker.label', 'MuiFormControlLabel', PLAN_PICKER_LABEL_SX),
     entry('PlanPicker.alert', 'MuiAlert', PLAN_PICKER_ALERT_SX),
     entry('SubscriptionSection.alert', 'MuiAlert', SUBSCRIPTION_SECTION_ALERT_SX),
+    entry('WithdrawalDialog.alert', 'MuiAlert', WITHDRAWAL_DIALOG_ALERT_SX),
+    entry('WithdrawalSection.alert', 'MuiAlert', WITHDRAWAL_SECTION_ALERT_SX),
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {