mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 17:43:47 +00:00
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:
@@ -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;
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
// ============================================================
|
// ============================================================
|
||||||
|
|||||||
@@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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": "پیام"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4527,6 +4527,12 @@
|
|||||||
"copyLink": "Скопировать ссылку",
|
"copyLink": "Скопировать ссылку",
|
||||||
"giftToggleLabel": "Тип покупки",
|
"giftToggleLabel": "Тип покупки",
|
||||||
"pollTimedOut": "Занимает больше времени, чем ожидалось",
|
"pollTimedOut": "Занимает больше времени, чем ожидалось",
|
||||||
"pollTimedOutDesc": "Обработка платежа занимает больше времени, чем обычно. Вы можете попробовать проверить ещё раз."
|
"pollTimedOutDesc": "Обработка платежа занимает больше времени, чем обычно. Вы можете попробовать проверить ещё раз.",
|
||||||
|
"pendingActivation": "Подписка готова к активации",
|
||||||
|
"pendingActivationDesc": "У вас уже есть активная подписка. Активация новой заменит текущую.",
|
||||||
|
"activateNow": "Активировать",
|
||||||
|
"activating": "Активация...",
|
||||||
|
"activationFailed": "Ошибка активации",
|
||||||
|
"giftMessage": "Сообщение"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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": "留言"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@@ -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 ? (
|
||||||
|
|||||||
Reference in New Issue
Block a user