823 lines
30 KiB
TypeScript
823 lines
30 KiB
TypeScript
import React, { FormEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
|
import { Button } from '@/components/ui/button';
|
|
import { LoaderCircle, CheckCircle2, XCircle, ShieldCheck, Receipt, Headphones } from 'lucide-react';
|
|
import { useCheckoutWizard } from '../WizardContext';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { previewCoupon as requestCouponPreview } from '@/lib/coupons';
|
|
import type { CouponPreviewResponse } from '@/types/coupon';
|
|
import { cn } from '@/lib/utils';
|
|
import toast from 'react-hot-toast';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
|
|
type PaymentStatus = 'idle' | 'processing' | 'ready' | 'error';
|
|
|
|
declare global {
|
|
interface Window {
|
|
Paddle?: {
|
|
Environment?: {
|
|
set: (environment: string) => void;
|
|
};
|
|
Initialize?: (options: { token: string }) => void;
|
|
Checkout: {
|
|
open: (options: Record<string, unknown>) => void;
|
|
};
|
|
};
|
|
}
|
|
}
|
|
|
|
const PADDLE_SCRIPT_URL = 'https://cdn.paddle.com/paddle/v2/paddle.js';
|
|
const PADDLE_SUPPORTED_LOCALES = ['en', 'de', 'fr', 'es', 'it', 'nl', 'pt', 'sv', 'da', 'fi', 'no'];
|
|
const PRIMARY_CTA_STYLES = 'min-w-[200px] disabled:bg-muted disabled:text-muted-foreground disabled:hover:bg-muted disabled:hover:text-muted-foreground';
|
|
|
|
export function resolvePaddleLocale(rawLocale?: string | null): string {
|
|
if (!rawLocale) {
|
|
return 'en';
|
|
}
|
|
|
|
const normalized = rawLocale.toLowerCase();
|
|
|
|
if (PADDLE_SUPPORTED_LOCALES.includes(normalized)) {
|
|
return normalized;
|
|
}
|
|
|
|
const short = normalized.split('-')[0];
|
|
if (short && PADDLE_SUPPORTED_LOCALES.includes(short)) {
|
|
return short;
|
|
}
|
|
|
|
return 'en';
|
|
}
|
|
|
|
type PaddleEnvironment = 'sandbox' | 'production';
|
|
|
|
let paddleLoaderPromise: Promise<typeof window.Paddle | null> | null = null;
|
|
|
|
function configurePaddle(paddle: typeof window.Paddle | undefined | null, environment: PaddleEnvironment): typeof window.Paddle | null {
|
|
if (!paddle) {
|
|
return null;
|
|
}
|
|
|
|
try {
|
|
paddle.Environment?.set?.(environment);
|
|
} catch (error) {
|
|
console.warn('[Paddle] Failed to set environment', error);
|
|
}
|
|
|
|
return paddle;
|
|
}
|
|
|
|
async function loadPaddle(environment: PaddleEnvironment): Promise<typeof window.Paddle | null> {
|
|
if (typeof window === 'undefined') {
|
|
return null;
|
|
}
|
|
|
|
if (window.Paddle) {
|
|
return configurePaddle(window.Paddle, environment);
|
|
}
|
|
|
|
if (!paddleLoaderPromise) {
|
|
paddleLoaderPromise = new Promise<typeof window.Paddle | null>((resolve, reject) => {
|
|
const script = document.createElement('script');
|
|
script.src = PADDLE_SCRIPT_URL;
|
|
script.async = true;
|
|
script.onload = () => resolve(window.Paddle ?? null);
|
|
script.onerror = (error) => reject(error);
|
|
document.head.appendChild(script);
|
|
}).catch((error) => {
|
|
console.error('Failed to load Paddle.js', error);
|
|
paddleLoaderPromise = null;
|
|
return null;
|
|
});
|
|
}
|
|
|
|
const paddle = await paddleLoaderPromise;
|
|
|
|
return configurePaddle(paddle, environment);
|
|
}
|
|
|
|
const PaddleCta: React.FC<{ onCheckout: () => Promise<void>; disabled: boolean; isProcessing: boolean; className?: string }> = ({ onCheckout, disabled, isProcessing, className }) => {
|
|
const { t } = useTranslation('marketing');
|
|
|
|
return (
|
|
<Button
|
|
size="lg"
|
|
className={cn('w-full sm:w-auto', className)}
|
|
disabled={disabled}
|
|
onClick={onCheckout}
|
|
>
|
|
{isProcessing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />}
|
|
{t('checkout.payment_step.pay_with_paddle')}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export const PaymentStep: React.FC = () => {
|
|
const { t, i18n } = useTranslation('marketing');
|
|
const { selectedPackage, nextStep, paddleConfig, authUser, setPaymentCompleted } = useCheckoutWizard();
|
|
const [status, setStatus] = useState<PaymentStatus>('idle');
|
|
const [message, setMessage] = useState<string>('');
|
|
const [initialised, setInitialised] = useState(false);
|
|
const [inlineActive, setInlineActive] = useState(false);
|
|
const [acceptedTerms, setAcceptedTerms] = useState(false);
|
|
const [acceptedWaiver, setAcceptedWaiver] = useState(false);
|
|
const [consentError, setConsentError] = useState<string | null>(null);
|
|
const [couponCode, setCouponCode] = useState<string>(() => {
|
|
if (typeof window === 'undefined') {
|
|
return '';
|
|
}
|
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
const fromQuery = params.get('coupon');
|
|
if (fromQuery) {
|
|
return fromQuery;
|
|
}
|
|
|
|
return localStorage.getItem('preferred_coupon_code') ?? '';
|
|
});
|
|
const [couponPreview, setCouponPreview] = useState<CouponPreviewResponse | null>(null);
|
|
const [couponError, setCouponError] = useState<string | null>(null);
|
|
const [couponNotice, setCouponNotice] = useState<string | null>(null);
|
|
const [couponLoading, setCouponLoading] = useState(false);
|
|
const paddleRef = useRef<typeof window.Paddle | null>(null);
|
|
const checkoutContainerRef = useRef<HTMLDivElement | null>(null);
|
|
const eventCallbackRef = useRef<(event: Record<string, unknown>) => void>();
|
|
const hasAutoAppliedCoupon = useRef(false);
|
|
const checkoutContainerClass = 'paddle-checkout-container';
|
|
const [showWithdrawalModal, setShowWithdrawalModal] = useState(false);
|
|
const [withdrawalHtml, setWithdrawalHtml] = useState<string | null>(null);
|
|
const [withdrawalTitle, setWithdrawalTitle] = useState<string | null>(null);
|
|
const [withdrawalLoading, setWithdrawalLoading] = useState(false);
|
|
const [withdrawalError, setWithdrawalError] = useState<string | null>(null);
|
|
|
|
const paddleLocale = useMemo(() => {
|
|
const sourceLocale = i18n.language || (typeof document !== 'undefined' ? document.documentElement.lang : null);
|
|
return resolvePaddleLocale(sourceLocale ?? undefined);
|
|
}, [i18n.language]);
|
|
|
|
const isFree = useMemo(() => (selectedPackage ? Number(selectedPackage.price) <= 0 : false), [selectedPackage]);
|
|
const requiresImmediateWaiver = useMemo(() => Boolean(selectedPackage?.activates_immediately), [selectedPackage]);
|
|
|
|
const applyCoupon = useCallback(async (code: string) => {
|
|
if (!selectedPackage) {
|
|
return;
|
|
}
|
|
|
|
const trimmed = code.trim();
|
|
|
|
if (!trimmed) {
|
|
setCouponError(t('coupon.errors.required'));
|
|
setCouponPreview(null);
|
|
setCouponNotice(null);
|
|
return;
|
|
}
|
|
|
|
setCouponLoading(true);
|
|
setCouponError(null);
|
|
setCouponNotice(null);
|
|
|
|
try {
|
|
const preview = await requestCouponPreview(selectedPackage.id, trimmed);
|
|
setCouponPreview(preview);
|
|
setCouponNotice(
|
|
t('coupon.applied', {
|
|
code: preview.coupon.code,
|
|
amount: preview.pricing.formatted.discount,
|
|
})
|
|
);
|
|
if (typeof window !== 'undefined') {
|
|
localStorage.setItem('preferred_coupon_code', preview.coupon.code);
|
|
}
|
|
} catch (error) {
|
|
setCouponPreview(null);
|
|
setCouponNotice(null);
|
|
setCouponError(error instanceof Error ? error.message : t('coupon.errors.generic'));
|
|
} finally {
|
|
setCouponLoading(false);
|
|
}
|
|
}, [selectedPackage, t]);
|
|
|
|
useEffect(() => {
|
|
if (hasAutoAppliedCoupon.current) {
|
|
return;
|
|
}
|
|
|
|
if (couponCode && selectedPackage) {
|
|
hasAutoAppliedCoupon.current = true;
|
|
applyCoupon(couponCode);
|
|
}
|
|
}, [applyCoupon, couponCode, selectedPackage]);
|
|
|
|
useEffect(() => {
|
|
setCouponPreview(null);
|
|
setCouponNotice(null);
|
|
setCouponError(null);
|
|
hasAutoAppliedCoupon.current = false;
|
|
}, [selectedPackage?.id]);
|
|
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
const queryCoupon = params.get('coupon');
|
|
if (queryCoupon) {
|
|
const normalized = queryCoupon.toUpperCase();
|
|
setCouponCode((current) => current || normalized);
|
|
localStorage.setItem('preferred_coupon_code', normalized);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (typeof window !== 'undefined' && couponCode) {
|
|
localStorage.setItem('preferred_coupon_code', couponCode);
|
|
}
|
|
}, [couponCode]);
|
|
|
|
const handleFreeActivation = async () => {
|
|
if (!acceptedTerms || (requiresImmediateWaiver && !acceptedWaiver)) {
|
|
setConsentError(t('checkout.legal.checkbox_terms_error'));
|
|
return;
|
|
}
|
|
|
|
setPaymentCompleted(true);
|
|
nextStep();
|
|
};
|
|
|
|
const startPaddleCheckout = async () => {
|
|
if (!selectedPackage) {
|
|
return;
|
|
}
|
|
|
|
if (!acceptedTerms || (requiresImmediateWaiver && !acceptedWaiver)) {
|
|
setConsentError(t('checkout.legal.checkbox_terms_error'));
|
|
return;
|
|
}
|
|
|
|
if (!selectedPackage.paddle_price_id) {
|
|
setStatus('error');
|
|
setMessage(t('checkout.payment_step.paddle_not_configured'));
|
|
return;
|
|
}
|
|
|
|
setPaymentCompleted(false);
|
|
setStatus('processing');
|
|
setMessage(t('checkout.payment_step.paddle_preparing'));
|
|
setInlineActive(false);
|
|
|
|
try {
|
|
const inlineSupported = initialised && !!paddleConfig?.client_token;
|
|
|
|
if (typeof window !== 'undefined') {
|
|
|
|
console.info('[Checkout] Paddle inline status', {
|
|
inlineSupported,
|
|
initialised,
|
|
hasClientToken: Boolean(paddleConfig?.client_token),
|
|
environment: paddleConfig?.environment,
|
|
paddlePriceId: selectedPackage.paddle_price_id,
|
|
});
|
|
}
|
|
|
|
if (inlineSupported) {
|
|
const paddle = paddleRef.current;
|
|
|
|
if (!paddle || !paddle.Checkout || typeof paddle.Checkout.open !== 'function') {
|
|
throw new Error('Inline Paddle checkout is not available.');
|
|
}
|
|
|
|
const inlinePayload: Record<string, unknown> = {
|
|
items: [
|
|
{
|
|
priceId: selectedPackage.paddle_price_id,
|
|
quantity: 1,
|
|
},
|
|
],
|
|
settings: {
|
|
displayMode: 'inline',
|
|
frameTarget: checkoutContainerClass,
|
|
frameInitialHeight: '550',
|
|
frameStyle: 'width: 100%; min-width: 320px; background-color: transparent; border: none;',
|
|
theme: 'light',
|
|
locale: paddleLocale,
|
|
},
|
|
customData: {
|
|
package_id: String(selectedPackage.id),
|
|
locale: paddleLocale,
|
|
accepted_terms: acceptedTerms ? '1' : '0',
|
|
accepted_waiver: requiresImmediateWaiver && acceptedWaiver ? '1' : '0',
|
|
},
|
|
};
|
|
|
|
const customerEmail = authUser?.email ?? null;
|
|
if (customerEmail) {
|
|
inlinePayload.customer = { email: customerEmail };
|
|
}
|
|
|
|
if (typeof window !== 'undefined') {
|
|
|
|
console.info('[Checkout] Opening inline Paddle checkout', inlinePayload);
|
|
}
|
|
|
|
paddle.Checkout.open(inlinePayload);
|
|
|
|
setInlineActive(true);
|
|
setStatus('ready');
|
|
setMessage(t('checkout.payment_step.paddle_overlay_ready'));
|
|
if (typeof window !== 'undefined' && checkoutContainerRef.current) {
|
|
window.requestAnimationFrame(() => {
|
|
const rect = checkoutContainerRef.current?.getBoundingClientRect();
|
|
if (!rect) {
|
|
return;
|
|
}
|
|
const offset = 120;
|
|
const target = Math.max(window.scrollY + rect.top - offset, 0);
|
|
window.scrollTo({ top: target, behavior: 'smooth' });
|
|
});
|
|
}
|
|
return;
|
|
}
|
|
|
|
const response = await fetch('/paddle/create-checkout', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
|
|
},
|
|
body: JSON.stringify({
|
|
package_id: selectedPackage.id,
|
|
locale: paddleLocale,
|
|
coupon_code: couponPreview?.coupon.code ?? undefined,
|
|
accepted_terms: acceptedTerms,
|
|
accepted_waiver: requiresImmediateWaiver ? acceptedWaiver : false,
|
|
}),
|
|
});
|
|
|
|
const rawBody = await response.text();
|
|
if (typeof window !== 'undefined') {
|
|
|
|
console.info('[Checkout] Hosted checkout response', { status: response.status, rawBody });
|
|
}
|
|
|
|
let data: { checkout_url?: string; message?: string } | null = null;
|
|
try {
|
|
data = rawBody && rawBody.trim().startsWith('{') ? JSON.parse(rawBody) : null;
|
|
} catch (parseError) {
|
|
console.warn('Failed to parse Paddle checkout payload as JSON', parseError);
|
|
data = null;
|
|
}
|
|
|
|
let checkoutUrl: string | null = typeof data?.checkout_url === 'string' ? data.checkout_url : null;
|
|
|
|
if (!checkoutUrl) {
|
|
const trimmed = rawBody.trim();
|
|
if (/^https?:\/\//i.test(trimmed)) {
|
|
checkoutUrl = trimmed;
|
|
} else if (trimmed.startsWith('<')) {
|
|
const match = trimmed.match(/https?:\/\/["'a-zA-Z0-9._~:/?#@!$&'()*+,;=%-]+/);
|
|
if (match) {
|
|
checkoutUrl = match[0];
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!response.ok || !checkoutUrl) {
|
|
const message = data?.message || rawBody || 'Unable to create Paddle checkout.';
|
|
throw new Error(message);
|
|
}
|
|
|
|
window.open(checkoutUrl, '_blank', 'noopener');
|
|
setInlineActive(false);
|
|
setStatus('ready');
|
|
setMessage(t('checkout.payment_step.paddle_ready'));
|
|
} catch (error) {
|
|
console.error('Failed to start Paddle checkout', error);
|
|
setStatus('error');
|
|
setMessage(t('checkout.payment_step.paddle_error'));
|
|
setInlineActive(false);
|
|
setPaymentCompleted(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
|
|
const environment = paddleConfig?.environment === 'sandbox' ? 'sandbox' : 'production';
|
|
const clientToken = paddleConfig?.client_token ?? null;
|
|
|
|
eventCallbackRef.current = (event) => {
|
|
if (!event?.name) {
|
|
return;
|
|
}
|
|
|
|
if (typeof window !== 'undefined') {
|
|
|
|
console.debug('[Checkout] Paddle event', event);
|
|
}
|
|
|
|
if (event.name === 'checkout.completed') {
|
|
setStatus('ready');
|
|
setMessage(t('checkout.payment_step.paddle_overlay_ready'));
|
|
setInlineActive(false);
|
|
setPaymentCompleted(true);
|
|
toast.success(t('checkout.payment_step.toast_success'));
|
|
}
|
|
|
|
if (event.name === 'checkout.closed') {
|
|
setStatus('idle');
|
|
setMessage('');
|
|
setInlineActive(false);
|
|
setPaymentCompleted(false);
|
|
}
|
|
|
|
if (event.name === 'checkout.error') {
|
|
setStatus('error');
|
|
setMessage(t('checkout.payment_step.paddle_error'));
|
|
setInlineActive(false);
|
|
setPaymentCompleted(false);
|
|
}
|
|
};
|
|
|
|
(async () => {
|
|
const paddle = await loadPaddle(environment);
|
|
|
|
if (cancelled || !paddle) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
let inlineReady = false;
|
|
if (typeof paddle.Initialize === 'function' && clientToken) {
|
|
if (typeof window !== 'undefined') {
|
|
|
|
console.info('[Checkout] Initializing Paddle.js', { environment, hasToken: Boolean(clientToken) });
|
|
}
|
|
|
|
paddle.Initialize({
|
|
token: clientToken,
|
|
checkout: {
|
|
settings: {
|
|
displayMode: 'inline',
|
|
frameTarget: checkoutContainerClass,
|
|
frameInitialHeight: '550',
|
|
frameStyle: 'width: 100%; min-width: 320px; background-color: transparent; border: none;',
|
|
locale: paddleLocale,
|
|
},
|
|
},
|
|
eventCallback: (event: Record<string, unknown>) => eventCallbackRef.current?.(event),
|
|
});
|
|
|
|
inlineReady = true;
|
|
}
|
|
|
|
paddleRef.current = paddle;
|
|
setInitialised(inlineReady);
|
|
} catch (error) {
|
|
console.error('Failed to initialize Paddle', error);
|
|
setInitialised(false);
|
|
setStatus('error');
|
|
setMessage(t('checkout.payment_step.paddle_error'));
|
|
setPaymentCompleted(false);
|
|
}
|
|
})();
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [paddleConfig?.environment, paddleConfig?.client_token, paddleLocale, setPaymentCompleted, t]);
|
|
|
|
useEffect(() => {
|
|
setPaymentCompleted(false);
|
|
}, [selectedPackage?.id, setPaymentCompleted]);
|
|
|
|
const handleCouponSubmit = useCallback((event: FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
|
|
if (!selectedPackage) {
|
|
return;
|
|
}
|
|
|
|
applyCoupon(couponCode);
|
|
}, [applyCoupon, couponCode, selectedPackage]);
|
|
|
|
const handleRemoveCoupon = useCallback(() => {
|
|
setCouponPreview(null);
|
|
setCouponNotice(null);
|
|
setCouponError(null);
|
|
setCouponCode('');
|
|
if (typeof window !== 'undefined') {
|
|
localStorage.removeItem('preferred_coupon_code');
|
|
}
|
|
}, []);
|
|
|
|
const openWithdrawalModal = useCallback(async () => {
|
|
setShowWithdrawalModal(true);
|
|
|
|
if (withdrawalHtml || withdrawalLoading) {
|
|
return;
|
|
}
|
|
|
|
setWithdrawalLoading(true);
|
|
setWithdrawalError(null);
|
|
|
|
try {
|
|
const response = await fetch(`/api/v1/legal/widerrufsbelehrung?lang=${paddleLocale}`);
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to load withdrawal page (${response.status})`);
|
|
}
|
|
const data = await response.json();
|
|
setWithdrawalHtml(data.body_html || '');
|
|
setWithdrawalTitle(data.title || t('checkout.legal.link_cancellation'));
|
|
} catch (error) {
|
|
setWithdrawalError(t('checkout.legal.modal_error'));
|
|
} finally {
|
|
setWithdrawalLoading(false);
|
|
}
|
|
}, [paddleLocale, t, withdrawalHtml, withdrawalLoading]);
|
|
|
|
if (!selectedPackage) {
|
|
return (
|
|
<Alert variant="destructive">
|
|
<AlertTitle>{t('checkout.payment_step.no_package_title')}</AlertTitle>
|
|
<AlertDescription>{t('checkout.payment_step.no_package_description')}</AlertDescription>
|
|
</Alert>
|
|
);
|
|
}
|
|
|
|
if (isFree) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<Alert>
|
|
<AlertTitle>{t('checkout.payment_step.free_package_title')}</AlertTitle>
|
|
<AlertDescription>{t('checkout.payment_step.free_package_desc')}</AlertDescription>
|
|
</Alert>
|
|
<div className="flex justify-end">
|
|
<Button size="lg" onClick={handleFreeActivation}>
|
|
{t('checkout.payment_step.activate_package')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const TrustPill = ({ icon: Icon, label }: { icon: React.ElementType; label: string }) => (
|
|
<div className="flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-white backdrop-blur-sm">
|
|
<Icon className="h-4 w-4 text-white/80" />
|
|
<span>{label}</span>
|
|
</div>
|
|
);
|
|
|
|
const PaddleLogo = () => (
|
|
<div className="flex items-center gap-3 rounded-full bg-white/15 px-4 py-2 text-white shadow-inner backdrop-blur-sm">
|
|
<img
|
|
src="/paddle.logo.svg"
|
|
alt="Paddle"
|
|
className="h-6 w-auto brightness-0 invert"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
<span className="text-xs font-semibold">{t('checkout.payment_step.paddle_partner')}</span>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="rounded-2xl border bg-card p-6 shadow-sm">
|
|
<div className="space-y-6">
|
|
{!inlineActive && (
|
|
<div className="overflow-hidden rounded-2xl border bg-gradient-to-br from-[#001835] via-[#002b55] to-[#00407c] p-6 text-white shadow-md">
|
|
<div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
|
|
<div className="space-y-4">
|
|
<PaddleLogo />
|
|
<div className="space-y-2">
|
|
<h3 className="text-2xl font-semibold">{t('checkout.payment_step.guided_title')}</h3>
|
|
<p className="text-sm text-white/80">{t('checkout.payment_step.guided_body')}</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<TrustPill icon={ShieldCheck} label={t('checkout.payment_step.trust_secure')} />
|
|
<TrustPill icon={Receipt} label={t('checkout.payment_step.trust_tax')} />
|
|
<TrustPill icon={Headphones} label={t('checkout.payment_step.trust_support')} />
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col items-stretch gap-3 w-full max-w-sm">
|
|
<div className="space-y-3 rounded-xl border border-white/30 bg-white/10 p-4">
|
|
<div className="space-y-2">
|
|
<div className="flex items-start gap-3">
|
|
<Checkbox
|
|
id="checkout-terms-hero"
|
|
checked={acceptedTerms}
|
|
onCheckedChange={(checked) => {
|
|
setAcceptedTerms(Boolean(checked));
|
|
if (consentError) {
|
|
setConsentError(null);
|
|
}
|
|
}}
|
|
className="border-white/60 data-[state=checked]:bg-white data-[state=checked]:text-[#001835]"
|
|
/>
|
|
<div className="space-y-1 text-sm">
|
|
<Label htmlFor="checkout-terms-hero" className="cursor-pointer text-white">
|
|
{t('checkout.legal.checkbox_terms_label')}
|
|
</Label>
|
|
<p className="text-xs text-white/80">
|
|
{t('checkout.legal.legal_links_intro')}{' '}
|
|
<button
|
|
type="button"
|
|
className="underline underline-offset-2"
|
|
onClick={(event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
openWithdrawalModal();
|
|
}}
|
|
>
|
|
{t('checkout.legal.open_withdrawal')}
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{requiresImmediateWaiver && (
|
|
<div className="flex items-start gap-3">
|
|
<Checkbox
|
|
id="checkout-waiver-hero"
|
|
checked={acceptedWaiver}
|
|
onCheckedChange={(checked) => {
|
|
setAcceptedWaiver(Boolean(checked));
|
|
if (consentError) {
|
|
setConsentError(null);
|
|
}
|
|
}}
|
|
className="border-white/60 data-[state=checked]:bg-white data-[state=checked]:text-[#001835]"
|
|
/>
|
|
<div className="space-y-1 text-sm">
|
|
<Label htmlFor="checkout-waiver-hero" className="cursor-pointer text-white">
|
|
{t('checkout.legal.checkbox_digital_content_label')}
|
|
</Label>
|
|
<p className="text-xs text-white/80">
|
|
{t('checkout.legal.hint_subscription_withdrawal')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{consentError && (
|
|
<div className="flex items-center gap-2 text-sm text-red-200">
|
|
<XCircle className="h-4 w-4" />
|
|
<span>{consentError}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<PaddleCta
|
|
onCheckout={startPaddleCheckout}
|
|
disabled={status === 'processing' || !acceptedTerms || (requiresImmediateWaiver && !acceptedWaiver)}
|
|
isProcessing={status === 'processing'}
|
|
className={cn('bg-white text-[#001835] hover:bg-white/90', PRIMARY_CTA_STYLES)}
|
|
/>
|
|
<p className="text-xs text-white/70 text-center">
|
|
{t('checkout.payment_step.guided_cta_hint')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-3">
|
|
<form className="flex flex-col gap-2 sm:flex-row" onSubmit={handleCouponSubmit}>
|
|
<Input
|
|
value={couponCode}
|
|
onChange={(event) => setCouponCode(event.target.value.toUpperCase())}
|
|
placeholder={t('coupon.placeholder')}
|
|
className="flex-1"
|
|
/>
|
|
<div className="flex gap-2">
|
|
<Button type="submit" disabled={couponLoading || !couponCode.trim()}>
|
|
{couponLoading ? t('checkout.payment_step.status_processing_title') : t('coupon.apply')}
|
|
</Button>
|
|
{couponPreview && (
|
|
<Button type="button" variant="outline" onClick={handleRemoveCoupon}>
|
|
{t('coupon.remove')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</form>
|
|
{couponError && (
|
|
<div className="flex items-center gap-2 text-sm text-destructive">
|
|
<XCircle className="h-4 w-4" />
|
|
<span>{couponError}</span>
|
|
</div>
|
|
)}
|
|
{couponNotice && (
|
|
<div className="flex items-center gap-2 text-sm text-emerald-600">
|
|
<CheckCircle2 className="h-4 w-4" />
|
|
<span>{couponNotice}</span>
|
|
</div>
|
|
)}
|
|
{couponPreview && (
|
|
<div className="rounded-lg border bg-muted/20 p-4 text-sm">
|
|
<p className="mb-3 font-medium text-muted-foreground">{t('coupon.summary_title')}</p>
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between">
|
|
<span>{t('coupon.fields.subtotal')}</span>
|
|
<span>{couponPreview.pricing.formatted.subtotal}</span>
|
|
</div>
|
|
<div className="flex justify-between text-emerald-600">
|
|
<span>{t('coupon.fields.discount')}</span>
|
|
<span>{couponPreview.pricing.formatted.discount}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span>{t('coupon.fields.tax')}</span>
|
|
<span>{couponPreview.pricing.formatted.tax}</span>
|
|
</div>
|
|
<Separator />
|
|
<div className="flex justify-between font-semibold">
|
|
<span>{t('coupon.fields.total')}</span>
|
|
<span>{couponPreview.pricing.formatted.total}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{!inlineActive && (
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('checkout.payment_step.paddle_intro')}
|
|
</p>
|
|
<PaddleCta
|
|
onCheckout={startPaddleCheckout}
|
|
disabled={status === 'processing' || !acceptedTerms || (requiresImmediateWaiver && !acceptedWaiver)}
|
|
isProcessing={status === 'processing'}
|
|
className={PRIMARY_CTA_STYLES}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{status !== 'idle' && (
|
|
<Alert variant={status === 'error' ? 'destructive' : 'default'}>
|
|
<AlertTitle>
|
|
{status === 'processing'
|
|
? t('checkout.payment_step.status_processing_title')
|
|
: status === 'ready'
|
|
? t('checkout.payment_step.status_ready_title')
|
|
: status === 'error'
|
|
? t('checkout.payment_step.status_error_title')
|
|
: t('checkout.payment_step.status_info_title')}
|
|
</AlertTitle>
|
|
<AlertDescription className="flex items-center gap-3">
|
|
<span>{message}</span>
|
|
{status === 'processing' && <LoaderCircle className="h-4 w-4 animate-spin" />}
|
|
</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
<div ref={checkoutContainerRef} className={`${checkoutContainerClass} min-h-[360px]`} />
|
|
|
|
<p className={`text-xs text-muted-foreground ${inlineActive ? 'text-center' : 'sm:text-right'}`}>
|
|
{t('checkout.payment_step.paddle_disclaimer')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Dialog open={showWithdrawalModal} onOpenChange={setShowWithdrawalModal}>
|
|
<DialogContent className="max-w-3xl">
|
|
<DialogHeader>
|
|
<DialogTitle>{withdrawalTitle || t('checkout.legal.link_cancellation')}</DialogTitle>
|
|
<DialogDescription>{t('checkout.legal.modal_description')}</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="min-h-[200px]">
|
|
{withdrawalLoading && (
|
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
|
<LoaderCircle className="h-4 w-4 animate-spin" />
|
|
<span>{t('checkout.legal.modal_loading')}</span>
|
|
</div>
|
|
)}
|
|
{withdrawalError && (
|
|
<div className="flex items-center gap-2 text-sm text-destructive">
|
|
<XCircle className="h-4 w-4" />
|
|
<span>{withdrawalError}</span>
|
|
</div>
|
|
)}
|
|
{!withdrawalLoading && !withdrawalError && withdrawalHtml && (
|
|
<ScrollArea className="max-h-[60vh] rounded-md border" viewportClassName="p-3">
|
|
<div
|
|
className="prose prose-sm dark:prose-invert"
|
|
dangerouslySetInnerHTML={{ __html: withdrawalHtml }}
|
|
/>
|
|
</ScrollArea>
|
|
)}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
};
|