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

src/pages/AdminLandingEditor.tsx

@@ -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}
                         />
                       ))}

src/pages/PurchaseSuccess.tsx

@@ -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 ? (