etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: guest purchase activation UI & landing editor improvements

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

23
src/api/landings.ts
View File

@@ -33,8 +33,22 @@ export interface LandingPaymentMethod {
description: string | null;
icon_url: string | null;
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 {
slug: string;
title: string;
@@ -67,13 +81,15 @@ export interface PurchaseResponse {
}
export interface PurchaseStatus {
status: 'pending' | 'paid' | 'delivered' | 'failed' | 'expired';
status: 'pending' | 'paid' | 'delivered' | 'pending_activation' | 'failed' | 'expired';
subscription_url: string | null;
subscription_crypto_link: string | null;
is_gift: boolean;
contact_value: string | null;
recipient_contact_value: string | null;
period_days: number | 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}`);
return response.data;
},
activatePurchase: async (token: string): Promise<PurchaseStatus> => {
const response = await apiClient.post(`/cabinet/landing/activate/${token}`);
return response.data;
},
};
// ============================================================

8
src/locales/en.json
View File

@@ -3964,6 +3964,12 @@
"copyLink": "Copy link",
"giftToggleLabel": "Purchase type",
"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"
}
}

8
src/locales/fa.json
View File

@@ -3515,6 +3515,12 @@
"copyLink": "کپی لینک",
"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",
"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": "پیام"
}
}

8
src/locales/ru.json
View File

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

8
src/locales/zh.json
View File

@@ -3514,6 +3514,12 @@
"copyLink": "复制链接",
"giftToggleLabel": "\u8d2d\u4e70\u7c7b\u578b",
"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": "留言"
}
}

230
src/pages/AdminLandingEditor.tsx
View File

@@ -7,6 +7,7 @@ import {
type LandingCreateRequest,
type AdminLandingFeature,
type LandingPaymentMethod,
type EditableMethodField,
type LocaleDict,
type SupportedLocale,
toLocaleDict,
@@ -139,10 +140,13 @@ function SortableFeatureItem({
interface SortableSelectedMethodProps {
method: MethodWithId;
onUpdate: (methodId: string, field: EditableMethodField, value: string | number | null) => 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({
id: method._id,
});
@@ -159,24 +163,142 @@ function SortableSelectedMethodCard({ method, onRemove }: SortableSelectedMethod
ref={setNodeRef}
style={style}
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',
)}
>
<button
{...attributes}
{...listeners}
className="flex-shrink-0 cursor-grab touch-none text-dark-500 hover:text-dark-300 active:cursor-grabbing"
>
<GripIcon />
</button>
<span className="min-w-0 flex-1 truncate text-sm text-dark-100">{method.display_name}</span>
<button
onClick={() => onRemove(method.method_id)}
className="flex-shrink-0 text-dark-500 hover:text-error-400"
>
<TrashIcon />
</button>
<div className="flex items-center gap-2 px-3 py-2">
<button
{...attributes}
{...listeners}
className="flex-shrink-0 cursor-grab touch-none text-dark-500 hover:text-dark-300 active:cursor-grabbing"
>
<GripIcon />
</button>
<button onClick={() => setExpanded((v) => !v)} className="min-w-0 flex-1 text-start">
<span className="truncate text-sm text-dark-100">{method.display_name}</span>
</button>
<button
onClick={() => setExpanded((v) => !v)}
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>
);
}
@@ -336,7 +458,14 @@ export default function AdminLandingEditor() {
setSelectedTariffIds(landingData.allowed_tariff_ids ?? []);
setAllowedPeriods(landingData.allowed_periods ?? {});
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);
setFooterText(toLocaleDict(landingData.footer_text));
@@ -410,6 +539,10 @@ export default function AdminLandingEditor() {
...rest,
description: rest.description || 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
@@ -480,31 +613,47 @@ export default function AdminLandingEditor() {
}, []);
// ---- Payment methods helpers ----
const togglePaymentMethod = (methodId: string) => {
setPaymentMethods((prev) => {
const exists = prev.find((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;
return [
...prev,
{
_id: crypto.randomUUID(),
method_id: systemMethod.method_id,
display_name: systemMethod.display_name ?? systemMethod.default_display_name,
description: '',
icon_url: '',
sort_order: prev.length,
},
];
});
};
const togglePaymentMethod = useCallback(
(methodId: string) => {
setPaymentMethods((prev) => {
const exists = prev.find((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;
return [
...prev,
{
_id: crypto.randomUUID(),
method_id: systemMethod.method_id,
display_name: systemMethod.display_name ?? systemMethod.default_display_name,
description: null,
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));
};
}, []);
const handleMethodDragEnd = useCallback((event: DragEndEvent) => {
const { active, over } = event;
@@ -857,6 +1006,7 @@ export default function AdminLandingEditor() {
<SortableSelectedMethodCard
key={method._id}
method={method}
onUpdate={updatePaymentMethod}
onRemove={removePaymentMethod}
/>
))}

150
src/pages/PurchaseSuccess.tsx
View File

@@ -49,16 +49,20 @@ function SuccessState({
subscriptionUrl,
cryptoLink,
contactValue,
recipientContactValue,
tariffName,
periodDays,
isGift,
giftMessage,
}: {
subscriptionUrl: string | null;
cryptoLink: string | null;
contactValue: string | null;
recipientContactValue: string | null;
tariffName: string | null;
periodDays: number | null;
isGift: boolean;
giftMessage: string | null;
}) {
const { t } = useTranslation();
const [copied, setCopied] = useState(false);
@@ -85,6 +89,7 @@ function SuccessState({
}, [subscriptionUrl, cryptoLink]);
const displayUrl = subscriptionUrl ?? cryptoLink;
const displayContact = isGift ? recipientContactValue : contactValue;
return (
<motion.div
@@ -128,11 +133,16 @@ function SuccessState({
{tariffName} — {periodDays} {t('landing.daysAccess')}
</p>
)}
{contactValue && (
{displayContact && (
<p className="mt-2 text-sm text-dark-400">
{isGift
? t('landing.giftSentTo', { contact: contactValue })
: t('landing.keySentTo', { contact: contactValue })}
? t('landing.giftSentTo', { contact: displayContact })
: t('landing.keySentTo', { contact: displayContact })}
</p>
)}
{isGift && giftMessage && (
<p className="mt-2 text-sm italic text-dark-400">
{t('landing.giftMessage')}: {giftMessage}
</p>
)}
</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() {
const { t } = useTranslation();
@@ -278,9 +367,13 @@ function PollTimedOutState({ onRetry }: { onRetry: () => void }) {
// ============================================================
export default function PurchaseSuccess() {
const { t } = useTranslation();
const { token } = useParams<{ token: string }>();
const pollStart = useRef(Date.now());
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
useEffect(() => {
@@ -294,7 +387,7 @@ export default function PurchaseSuccess() {
}, []);
const {
data: status,
data: purchaseStatus,
isError,
refetch,
} = useQuery({
@@ -321,8 +414,25 @@ export default function PurchaseSuccess() {
refetch();
}, [refetch]);
const isSuccess = status?.status === 'delivered';
const isFailed = status?.status === 'failed' || status?.status === 'expired';
const handleActivate = useCallback(async () => {
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 (
<div className="flex min-h-dvh items-center justify-center bg-dark-950 px-4">
@@ -331,13 +441,29 @@ export default function PurchaseSuccess() {
<FailedState />
) : isSuccess ? (
<SuccessState
subscriptionUrl={status.subscription_url}
cryptoLink={status.subscription_crypto_link}
contactValue={status.contact_value}
tariffName={status.tariff_name}
periodDays={status.period_days}
isGift={status.is_gift}
subscriptionUrl={purchaseStatus.subscription_url}
cryptoLink={purchaseStatus.subscription_crypto_link}
contactValue={purchaseStatus.contact_value}
recipientContactValue={purchaseStatus.recipient_contact_value}
tariffName={purchaseStatus.tariff_name}
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 ? (
<FailedState />
) : pollTimedOut ? (