feat: guest purchase activation UI & landing editor improvements

- Add PendingActivationState component with activate button
- Add double-click ref guard on activation handler
- Add activatePurchase API function
- Update PurchaseStatus type with new fields
- Show gift message and recipient contact in success state
- Add pending activation i18n translations (ru, en, zh, fa)
- Improve AdminLandingEditor with allowed_periods support
This commit is contained in:
Fringg
2026-03-06 19:56:38 +03:00
parent 9bd58cb914
commit b852e1e4cd
7 changed files with 378 additions and 57 deletions

View File

@@ -33,8 +33,22 @@ export interface LandingPaymentMethod {
description: string | null; description: string | null;
icon_url: string | null; icon_url: string | null;
sort_order: number; sort_order: number;
min_amount_kopeks: number | null;
max_amount_kopeks: number | null;
currency: string | null;
return_url: string | null;
} }
/** Editable fields on a payment method in the landing editor */
export type EditableMethodField =
| 'display_name'
| 'description'
| 'icon_url'
| 'min_amount_kopeks'
| 'max_amount_kopeks'
| 'currency'
| 'return_url';
export interface LandingConfig { export interface LandingConfig {
slug: string; slug: string;
title: string; title: string;
@@ -67,13 +81,15 @@ export interface PurchaseResponse {
} }
export interface PurchaseStatus { export interface PurchaseStatus {
status: 'pending' | 'paid' | 'delivered' | 'failed' | 'expired'; status: 'pending' | 'paid' | 'delivered' | 'pending_activation' | 'failed' | 'expired';
subscription_url: string | null; subscription_url: string | null;
subscription_crypto_link: string | null; subscription_crypto_link: string | null;
is_gift: boolean; is_gift: boolean;
contact_value: string | null; contact_value: string | null;
recipient_contact_value: string | null;
period_days: number | null; period_days: number | null;
tariff_name: string | null; tariff_name: string | null;
gift_message: string | null;
} }
// ============================================================ // ============================================================
@@ -203,6 +219,11 @@ export const landingApi = {
const response = await apiClient.get(`/cabinet/landing/purchase/${token}`); const response = await apiClient.get(`/cabinet/landing/purchase/${token}`);
return response.data; return response.data;
}, },
activatePurchase: async (token: string): Promise<PurchaseStatus> => {
const response = await apiClient.post(`/cabinet/landing/activate/${token}`);
return response.data;
},
}; };
// ============================================================ // ============================================================

View File

@@ -3964,6 +3964,12 @@
"copyLink": "Copy link", "copyLink": "Copy link",
"giftToggleLabel": "Purchase type", "giftToggleLabel": "Purchase type",
"pollTimedOut": "Taking longer than expected", "pollTimedOut": "Taking longer than expected",
"pollTimedOutDesc": "Payment processing is taking longer than usual. You can try checking again." "pollTimedOutDesc": "Payment processing is taking longer than usual. You can try checking again.",
"pendingActivation": "Subscription ready to activate",
"pendingActivationDesc": "You already have an active subscription. Activating will replace it.",
"activateNow": "Activate now",
"activating": "Activating...",
"activationFailed": "Activation failed",
"giftMessage": "Message"
} }
} }

View File

@@ -3515,6 +3515,12 @@
"copyLink": "کپی لینک", "copyLink": "کپی لینک",
"giftToggleLabel": "\u0646\u0648\u0639 \u062e\u0631\u06cc\u062f", "giftToggleLabel": "\u0646\u0648\u0639 \u062e\u0631\u06cc\u062f",
"pollTimedOut": "\u0632\u0645\u0627\u0646 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0637\u0648\u0644 \u06a9\u0634\u06cc\u062f", "pollTimedOut": "\u0632\u0645\u0627\u0646 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0637\u0648\u0644 \u06a9\u0634\u06cc\u062f",
"pollTimedOutDesc": "\u067e\u0631\u062f\u0627\u0632\u0634 \u067e\u0631\u062f\u0627\u062e\u062a \u0628\u06cc\u0634\u062a\u0631 \u0627\u0632 \u062d\u062f \u0645\u0639\u0645\u0648\u0644 \u0637\u0648\u0644 \u06a9\u0634\u06cc\u062f\u0647 \u0627\u0633\u062a. \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0648\u0628\u0627\u0631\u0647 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f." "pollTimedOutDesc": "\u067e\u0631\u062f\u0627\u0632\u0634 \u067e\u0631\u062f\u0627\u062e\u062a \u0628\u06cc\u0634\u062a\u0631 \u0627\u0632 \u062d\u062f \u0645\u0639\u0645\u0648\u0644 \u0637\u0648\u0644 \u06a9\u0634\u06cc\u062f\u0647 \u0627\u0633\u062a. \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0648\u0628\u0627\u0631\u0647 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.",
"pendingActivation": "اشتراک آماده فعال‌سازی",
"pendingActivationDesc": "شما قبلاً اشتراک فعالی دارید. فعال‌سازی اشتراک جدید جایگزین اشتراک فعلی می‌شود.",
"activateNow": "فعال‌سازی",
"activating": "در حال فعال‌سازی...",
"activationFailed": "خطا در فعال‌سازی",
"giftMessage": "پیام"
} }
} }

View File

@@ -4527,6 +4527,12 @@
"copyLink": "Скопировать ссылку", "copyLink": "Скопировать ссылку",
"giftToggleLabel": "Тип покупки", "giftToggleLabel": "Тип покупки",
"pollTimedOut": "Занимает больше времени, чем ожидалось", "pollTimedOut": "Занимает больше времени, чем ожидалось",
"pollTimedOutDesc": "Обработка платежа занимает больше времени, чем обычно. Вы можете попробовать проверить ещё раз." "pollTimedOutDesc": "Обработка платежа занимает больше времени, чем обычно. Вы можете попробовать проверить ещё раз.",
"pendingActivation": "Подписка готова к активации",
"pendingActivationDesc": "У вас уже есть активная подписка. Активация новой заменит текущую.",
"activateNow": "Активировать",
"activating": "Активация...",
"activationFailed": "Ошибка активации",
"giftMessage": "Сообщение"
} }
} }

View File

@@ -3514,6 +3514,12 @@
"copyLink": "复制链接", "copyLink": "复制链接",
"giftToggleLabel": "\u8d2d\u4e70\u7c7b\u578b", "giftToggleLabel": "\u8d2d\u4e70\u7c7b\u578b",
"pollTimedOut": "\u5904\u7406\u65f6\u95f4\u8f83\u957f", "pollTimedOut": "\u5904\u7406\u65f6\u95f4\u8f83\u957f",
"pollTimedOutDesc": "\u4ed8\u6b3e\u5904\u7406\u65f6\u95f4\u6bd4\u5e73\u65f6\u957f\u3002\u60a8\u53ef\u4ee5\u5c1d\u8bd5\u518d\u6b21\u68c0\u67e5\u3002" "pollTimedOutDesc": "\u4ed8\u6b3e\u5904\u7406\u65f6\u95f4\u6bd4\u5e73\u65f6\u957f\u3002\u60a8\u53ef\u4ee5\u5c1d\u8bd5\u518d\u6b21\u68c0\u67e5\u3002",
"pendingActivation": "订阅准备激活",
"pendingActivationDesc": "您已有活跃订阅。激活新订阅将替换当前订阅。",
"activateNow": "立即激活",
"activating": "激活中...",
"activationFailed": "激活失败",
"giftMessage": "留言"
} }
} }

View File

@@ -7,6 +7,7 @@ import {
type LandingCreateRequest, type LandingCreateRequest,
type AdminLandingFeature, type AdminLandingFeature,
type LandingPaymentMethod, type LandingPaymentMethod,
type EditableMethodField,
type LocaleDict, type LocaleDict,
type SupportedLocale, type SupportedLocale,
toLocaleDict, toLocaleDict,
@@ -139,10 +140,13 @@ function SortableFeatureItem({
interface SortableSelectedMethodProps { interface SortableSelectedMethodProps {
method: MethodWithId; method: MethodWithId;
onUpdate: (methodId: string, field: EditableMethodField, value: string | number | null) => void;
onRemove: (methodId: string) => void; onRemove: (methodId: string) => void;
} }
function SortableSelectedMethodCard({ method, onRemove }: SortableSelectedMethodProps) { function SortableSelectedMethodCard({ method, onUpdate, onRemove }: SortableSelectedMethodProps) {
const { t } = useTranslation();
const [expanded, setExpanded] = useState(false);
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id: method._id, id: method._id,
}); });
@@ -159,24 +163,142 @@ function SortableSelectedMethodCard({ method, onRemove }: SortableSelectedMethod
ref={setNodeRef} ref={setNodeRef}
style={style} style={style}
className={cn( className={cn(
'flex items-center gap-2 rounded-lg border px-3 py-2', 'rounded-lg border',
isDragging ? 'border-accent-500/50 bg-dark-700' : 'border-dark-700 bg-dark-800/50', isDragging ? 'border-accent-500/50 bg-dark-700' : 'border-dark-700 bg-dark-800/50',
)} )}
> >
<button <div className="flex items-center gap-2 px-3 py-2">
{...attributes} <button
{...listeners} {...attributes}
className="flex-shrink-0 cursor-grab touch-none text-dark-500 hover:text-dark-300 active:cursor-grabbing" {...listeners}
> className="flex-shrink-0 cursor-grab touch-none text-dark-500 hover:text-dark-300 active:cursor-grabbing"
<GripIcon /> >
</button> <GripIcon />
<span className="min-w-0 flex-1 truncate text-sm text-dark-100">{method.display_name}</span> </button>
<button <button onClick={() => setExpanded((v) => !v)} className="min-w-0 flex-1 text-start">
onClick={() => onRemove(method.method_id)} <span className="truncate text-sm text-dark-100">{method.display_name}</span>
className="flex-shrink-0 text-dark-500 hover:text-error-400" </button>
> <button
<TrashIcon /> onClick={() => setExpanded((v) => !v)}
</button> className="flex-shrink-0 text-dark-500 hover:text-dark-300"
>
<ChevronDownIcon open={expanded} />
</button>
<button
onClick={() => onRemove(method.method_id)}
className="flex-shrink-0 text-dark-500 hover:text-error-400"
>
<TrashIcon />
</button>
</div>
{expanded && (
<div className="space-y-3 border-t border-dark-700 px-3 py-3">
<div>
<label className="mb-1 block text-xs text-dark-500">
{t('admin.landings.methodDisplayName', 'Display name')}
</label>
<input
type="text"
value={method.display_name}
onChange={(e) => onUpdate(method.method_id, 'display_name', e.target.value)}
className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
/>
</div>
<div>
<label className="mb-1 block text-xs text-dark-500">
{t('admin.landings.methodDescription', 'Description')}
</label>
<input
type="text"
value={method.description ?? ''}
onChange={(e) => onUpdate(method.method_id, 'description', e.target.value || null)}
placeholder={t('admin.landings.methodDescPlaceholder', 'Optional description')}
className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
/>
</div>
<div>
<label className="mb-1 block text-xs text-dark-500">
{t('admin.landings.methodIconUrl', 'Icon URL')}
</label>
<input
type="text"
value={method.icon_url ?? ''}
onChange={(e) => onUpdate(method.method_id, 'icon_url', e.target.value || null)}
placeholder="https://..."
className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
/>
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="mb-1 block text-xs text-dark-500">
{t('admin.landings.methodMinAmount', 'Min amount (kopeks)')}
</label>
<input
type="number"
min={0}
step={1}
value={method.min_amount_kopeks ?? ''}
onChange={(e) =>
onUpdate(
method.method_id,
'min_amount_kopeks',
e.target.value ? Math.max(0, Math.floor(Number(e.target.value))) : null,
)
}
placeholder="—"
className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
/>
</div>
<div>
<label className="mb-1 block text-xs text-dark-500">
{t('admin.landings.methodMaxAmount', 'Max amount (kopeks)')}
</label>
<input
type="number"
min={0}
step={1}
value={method.max_amount_kopeks ?? ''}
onChange={(e) =>
onUpdate(
method.method_id,
'max_amount_kopeks',
e.target.value ? Math.max(0, Math.floor(Number(e.target.value))) : null,
)
}
placeholder="—"
className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
/>
</div>
</div>
<div>
<label className="mb-1 block text-xs text-dark-500">
{t('admin.landings.methodCurrency', 'Currency')}
</label>
<input
type="text"
value={method.currency ?? ''}
onChange={(e) => onUpdate(method.method_id, 'currency', e.target.value || null)}
placeholder="RUB"
className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
/>
</div>
<div>
<label className="mb-1 block text-xs text-dark-500">
{t('admin.landings.methodReturnUrl', 'Return URL after payment')}
</label>
<input
type="text"
value={method.return_url ?? ''}
onChange={(e) => onUpdate(method.method_id, 'return_url', e.target.value || null)}
placeholder={t(
'admin.landings.methodReturnUrlPlaceholder',
'Default: cabinet success page. Use {token} for purchase token',
)}
className="w-full rounded-lg border border-dark-700 bg-dark-800 px-3 py-1.5 text-sm text-dark-100 outline-none focus:border-accent-500"
/>
</div>
</div>
)}
</div> </div>
); );
} }
@@ -336,7 +458,14 @@ export default function AdminLandingEditor() {
setSelectedTariffIds(landingData.allowed_tariff_ids ?? []); setSelectedTariffIds(landingData.allowed_tariff_ids ?? []);
setAllowedPeriods(landingData.allowed_periods ?? {}); setAllowedPeriods(landingData.allowed_periods ?? {});
setPaymentMethods( setPaymentMethods(
(landingData.payment_methods ?? []).map((m) => ({ ...m, _id: crypto.randomUUID() })), (landingData.payment_methods ?? []).map((m) => ({
...m,
_id: crypto.randomUUID(),
min_amount_kopeks: m.min_amount_kopeks ?? null,
max_amount_kopeks: m.max_amount_kopeks ?? null,
currency: m.currency ?? null,
return_url: m.return_url ?? null,
})),
); );
setGiftEnabled(landingData.gift_enabled); setGiftEnabled(landingData.gift_enabled);
setFooterText(toLocaleDict(landingData.footer_text)); setFooterText(toLocaleDict(landingData.footer_text));
@@ -410,6 +539,10 @@ export default function AdminLandingEditor() {
...rest, ...rest,
description: rest.description || null, description: rest.description || null,
icon_url: rest.icon_url || null, icon_url: rest.icon_url || null,
min_amount_kopeks: rest.min_amount_kopeks ?? null,
max_amount_kopeks: rest.max_amount_kopeks ?? null,
currency: rest.currency || null,
return_url: rest.return_url || null,
})); }));
// Filter out empty period arrays and periods for non-selected tariffs // Filter out empty period arrays and periods for non-selected tariffs
@@ -480,31 +613,47 @@ export default function AdminLandingEditor() {
}, []); }, []);
// ---- Payment methods helpers ---- // ---- Payment methods helpers ----
const togglePaymentMethod = (methodId: string) => { const togglePaymentMethod = useCallback(
setPaymentMethods((prev) => { (methodId: string) => {
const exists = prev.find((m) => m.method_id === methodId); setPaymentMethods((prev) => {
if (exists) { const exists = prev.find((m) => m.method_id === methodId);
return prev.filter((m) => m.method_id !== methodId); if (exists) {
} return prev.filter((m) => m.method_id !== methodId);
const systemMethod = availablePaymentMethods.find((m) => m.method_id === methodId); }
if (!systemMethod) return prev; const systemMethod = availablePaymentMethods.find((m) => m.method_id === methodId);
return [ if (!systemMethod) return prev;
...prev, return [
{ ...prev,
_id: crypto.randomUUID(), {
method_id: systemMethod.method_id, _id: crypto.randomUUID(),
display_name: systemMethod.display_name ?? systemMethod.default_display_name, method_id: systemMethod.method_id,
description: '', display_name: systemMethod.display_name ?? systemMethod.default_display_name,
icon_url: '', description: null,
sort_order: prev.length, icon_url: null,
}, sort_order: prev.length,
]; min_amount_kopeks: systemMethod.min_amount_kopeks ?? null,
}); max_amount_kopeks: systemMethod.max_amount_kopeks ?? null,
}; currency: null,
return_url: null,
},
];
});
},
[availablePaymentMethods],
);
const removePaymentMethod = (methodId: string) => { const updatePaymentMethod = useCallback(
(methodId: string, field: EditableMethodField, value: string | number | null) => {
setPaymentMethods((prev) =>
prev.map((m) => (m.method_id === methodId ? { ...m, [field]: value } : m)),
);
},
[],
);
const removePaymentMethod = useCallback((methodId: string) => {
setPaymentMethods((prev) => prev.filter((m) => m.method_id !== methodId)); setPaymentMethods((prev) => prev.filter((m) => m.method_id !== methodId));
}; }, []);
const handleMethodDragEnd = useCallback((event: DragEndEvent) => { const handleMethodDragEnd = useCallback((event: DragEndEvent) => {
const { active, over } = event; const { active, over } = event;
@@ -857,6 +1006,7 @@ export default function AdminLandingEditor() {
<SortableSelectedMethodCard <SortableSelectedMethodCard
key={method._id} key={method._id}
method={method} method={method}
onUpdate={updatePaymentMethod}
onRemove={removePaymentMethod} onRemove={removePaymentMethod}
/> />
))} ))}

View File

@@ -49,16 +49,20 @@ function SuccessState({
subscriptionUrl, subscriptionUrl,
cryptoLink, cryptoLink,
contactValue, contactValue,
recipientContactValue,
tariffName, tariffName,
periodDays, periodDays,
isGift, isGift,
giftMessage,
}: { }: {
subscriptionUrl: string | null; subscriptionUrl: string | null;
cryptoLink: string | null; cryptoLink: string | null;
contactValue: string | null; contactValue: string | null;
recipientContactValue: string | null;
tariffName: string | null; tariffName: string | null;
periodDays: number | null; periodDays: number | null;
isGift: boolean; isGift: boolean;
giftMessage: string | null;
}) { }) {
const { t } = useTranslation(); const { t } = useTranslation();
const [copied, setCopied] = useState(false); const [copied, setCopied] = useState(false);
@@ -85,6 +89,7 @@ function SuccessState({
}, [subscriptionUrl, cryptoLink]); }, [subscriptionUrl, cryptoLink]);
const displayUrl = subscriptionUrl ?? cryptoLink; const displayUrl = subscriptionUrl ?? cryptoLink;
const displayContact = isGift ? recipientContactValue : contactValue;
return ( return (
<motion.div <motion.div
@@ -128,11 +133,16 @@ function SuccessState({
{tariffName} {periodDays} {t('landing.daysAccess')} {tariffName} {periodDays} {t('landing.daysAccess')}
</p> </p>
)} )}
{contactValue && ( {displayContact && (
<p className="mt-2 text-sm text-dark-400"> <p className="mt-2 text-sm text-dark-400">
{isGift {isGift
? t('landing.giftSentTo', { contact: contactValue }) ? t('landing.giftSentTo', { contact: displayContact })
: t('landing.keySentTo', { contact: contactValue })} : t('landing.keySentTo', { contact: displayContact })}
</p>
)}
{isGift && giftMessage && (
<p className="mt-2 text-sm italic text-dark-400">
{t('landing.giftMessage')}: {giftMessage}
</p> </p>
)} )}
</div> </div>
@@ -199,6 +209,85 @@ function SuccessState({
); );
} }
function PendingActivationState({
tariffName,
periodDays,
giftMessage,
isGift,
isActivating,
onActivate,
}: {
tariffName: string | null;
periodDays: number | null;
giftMessage: string | null;
isGift: boolean;
isActivating: boolean;
onActivate: () => void;
}) {
const { t } = useTranslation();
return (
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
className="flex flex-col items-center gap-6 text-center"
>
{/* Warning icon */}
<div className="flex h-20 w-20 items-center justify-center rounded-full bg-warning-500/10">
<svg
className="h-10 w-10 text-warning-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
/>
</svg>
</div>
<div>
<h1 className="text-xl font-bold text-dark-50">{t('landing.pendingActivation')}</h1>
{tariffName && periodDays && (
<p className="mt-1 text-sm text-dark-300">
{tariffName} {periodDays} {t('landing.daysAccess')}
</p>
)}
<p className="mt-2 text-sm text-dark-400">{t('landing.pendingActivationDesc')}</p>
{isGift && giftMessage && (
<p className="mt-2 text-sm italic text-dark-400">
{t('landing.giftMessage')}: {giftMessage}
</p>
)}
</div>
<button
type="button"
onClick={onActivate}
disabled={isActivating}
className={cn(
'flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-medium text-white transition-colors',
isActivating
? 'cursor-not-allowed bg-accent-500/50'
: 'bg-accent-500 hover:bg-accent-400',
)}
>
{isActivating ? (
<>
<Spinner className="h-4 w-4" />
{t('landing.activating')}
</>
) : (
t('landing.activateNow')
)}
</button>
</motion.div>
);
}
function FailedState() { function FailedState() {
const { t } = useTranslation(); const { t } = useTranslation();
@@ -278,9 +367,13 @@ function PollTimedOutState({ onRetry }: { onRetry: () => void }) {
// ============================================================ // ============================================================
export default function PurchaseSuccess() { export default function PurchaseSuccess() {
const { t } = useTranslation();
const { token } = useParams<{ token: string }>(); const { token } = useParams<{ token: string }>();
const pollStart = useRef(Date.now()); const pollStart = useRef(Date.now());
const [pollTimedOut, setPollTimedOut] = useState(false); const [pollTimedOut, setPollTimedOut] = useState(false);
const [isActivating, setIsActivating] = useState(false);
const [activationError, setActivationError] = useState(false);
const activatingRef = useRef(false);
// Referrer-Policy: prevent leaking payment token via referer header // Referrer-Policy: prevent leaking payment token via referer header
useEffect(() => { useEffect(() => {
@@ -294,7 +387,7 @@ export default function PurchaseSuccess() {
}, []); }, []);
const { const {
data: status, data: purchaseStatus,
isError, isError,
refetch, refetch,
} = useQuery({ } = useQuery({
@@ -321,8 +414,25 @@ export default function PurchaseSuccess() {
refetch(); refetch();
}, [refetch]); }, [refetch]);
const isSuccess = status?.status === 'delivered'; const handleActivate = useCallback(async () => {
const isFailed = status?.status === 'failed' || status?.status === 'expired'; if (!token || activatingRef.current) return;
activatingRef.current = true;
setIsActivating(true);
setActivationError(false);
try {
await landingApi.activatePurchase(token);
await refetch();
} catch {
setActivationError(true);
} finally {
activatingRef.current = false;
setIsActivating(false);
}
}, [token, refetch]);
const isSuccess = purchaseStatus?.status === 'delivered';
const isPendingActivation = purchaseStatus?.status === 'pending_activation';
const isFailed = purchaseStatus?.status === 'failed' || purchaseStatus?.status === 'expired';
return ( return (
<div className="flex min-h-dvh items-center justify-center bg-dark-950 px-4"> <div className="flex min-h-dvh items-center justify-center bg-dark-950 px-4">
@@ -331,13 +441,29 @@ export default function PurchaseSuccess() {
<FailedState /> <FailedState />
) : isSuccess ? ( ) : isSuccess ? (
<SuccessState <SuccessState
subscriptionUrl={status.subscription_url} subscriptionUrl={purchaseStatus.subscription_url}
cryptoLink={status.subscription_crypto_link} cryptoLink={purchaseStatus.subscription_crypto_link}
contactValue={status.contact_value} contactValue={purchaseStatus.contact_value}
tariffName={status.tariff_name} recipientContactValue={purchaseStatus.recipient_contact_value}
periodDays={status.period_days} tariffName={purchaseStatus.tariff_name}
isGift={status.is_gift} periodDays={purchaseStatus.period_days}
isGift={purchaseStatus.is_gift}
giftMessage={purchaseStatus.gift_message}
/> />
) : isPendingActivation ? (
<div className="space-y-4">
<PendingActivationState
tariffName={purchaseStatus.tariff_name}
periodDays={purchaseStatus.period_days}
giftMessage={purchaseStatus.gift_message}
isGift={purchaseStatus.is_gift}
isActivating={isActivating}
onActivate={handleActivate}
/>
{activationError && (
<p className="text-center text-sm text-error-400">{t('landing.activationFailed')}</p>
)}
</div>
) : isFailed ? ( ) : isFailed ? (
<FailedState /> <FailedState />
) : pollTimedOut ? ( ) : pollTimedOut ? (