fix: gift UI improvements — declension, GB display, share modal, deep links

- Fix Russian device count declension (_one/_few/_many) - Show traffic GB and tariff description in buy tab - Replace copy/share buttons with share modal (bot + cabinet links) - GiftResult: code-only success state with formatted share message - Support ?tab=activate&code=TOKEN for auto-activation via cabinet link - Add is_code_only + purchase_token to API types
2026-07-28 09:33:46 +00:00 · 2026-03-10 06:03:28 +03:00
parent af3e535c69
commit 1bafcca1ef
5 changed files with 380 additions and 59 deletions
--- a/src/api/gift.ts
+++ b/src/api/gift.ts
@@ -70,6 +70,8 @@ export type GiftPurchaseStatusValue =
 export interface GiftPurchaseStatus {
  status: GiftPurchaseStatusValue;
  is_gift: boolean;
+  is_code_only: boolean;
+  purchase_token: string | null;
  recipient_contact_value: string | null;
  gift_message: string | null;
  tariff_name: string | null;
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -4233,9 +4233,21 @@
    "codeCopied": "Code copied!",
    "shareGift": "SHARE",
    "shareText": "I have a gift for you! Activate it here:",
+    "codeReadyTitle": "Gift code is ready!",
+    "codeLabel": "Gift code",
+    "sharePreview": "Message to share",
+    "copyMessage": "Copy",
    "activatedBy": "Activated by {{username}}",
    "sentTo": "Sent to {{recipient}}",
    "daysShort": "days",
-    "devicesShort": "dev."
+    "devicesShort": "dev.",
+    "gbShort": "GB",
+    "unlimitedTraffic": "Unlimited",
+    "shareModalTitle": "Share gift",
+    "shareModalDesc": "Send this message to the gift recipient",
+    "shareModalActivateVia": "Activate via bot:",
+    "shareModalActivateViaCabinet": "Or via website:",
+    "shareModalCopyAll": "Copy message",
+    "shareModalCopied": "Copied!"
  }
 }
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -4770,8 +4770,10 @@
    "tabMyGifts": "Мои подарки",
    "selectTariff": "ВЫБЕРИТЕ ТАРИФ",
    "selectPeriod": "ПЕРИОД ПОДПИСКИ",
-    "deviceCount": "{{count}} устройство",
-    "deviceCount_other": "{{count}} устройств",
+    "deviceCount": "{{count}} устройств",
+    "deviceCount_one": "{{count}} устройство",
+    "deviceCount_few": "{{count}} устройства",
+    "deviceCount_many": "{{count}} устройств",
    "activateTitle": "Введите код подарка",
    "activateDescription": "Введите код подарка, полученный от друга или знакомого",
    "activateCodePlaceholder": "GIFT-XXXXXXXXXXXX",
@@ -4795,9 +4797,24 @@
    "codeCopied": "Код скопирован!",
    "shareGift": "ПОДЕЛИТЬСЯ",
    "shareText": "У меня есть подарок для тебя! Активируй его здесь:",
+    "codeReadyTitle": "Код подарка готов!",
+    "codeLabel": "Код подарка",
+    "sharePreview": "Сообщение для отправки",
+    "copyMessage": "Копировать",
    "activatedBy": "Активирован пользователем {{username}}",
    "sentTo": "Отправлен {{recipient}}",
    "daysShort": "дн.",
-    "devicesShort": "устр."
+    "devicesShort": "устр.",
+    "devicesShort_one": "устр.",
+    "devicesShort_few": "устр.",
+    "devicesShort_many": "устр.",
+    "gbShort": "ГБ",
+    "unlimitedTraffic": "Безлимит",
+    "shareModalTitle": "Поделиться подарком",
+    "shareModalDesc": "Отправьте это сообщение получателю подарка",
+    "shareModalActivateVia": "Активировать через бота:",
+    "shareModalActivateViaCabinet": "Или через сайт:",
+    "shareModalCopyAll": "Скопировать сообщение",
+    "shareModalCopied": "Скопировано!"
  }
 }
--- a/src/pages/GiftResult.tsx
+++ b/src/pages/GiftResult.tsx
@@ -7,6 +7,11 @@ import { giftApi } from '../api/gift';
 import { Spinner } from '@/components/ui/Spinner';
 import { AnimatedCheckmark } from '@/components/ui/AnimatedCheckmark';
 import { AnimatedCrossmark } from '@/components/ui/AnimatedCrossmark';
+import { cn } from '@/lib/utils';
+
+function formatGiftCode(token: string): string {
+  return `GIFT-${token.slice(0, 12).toUpperCase()}`;
+}

 const MAX_POLL_MS = 10 * 60 * 1000; // 10 minutes

@@ -38,6 +43,154 @@ function PendingState() {
  );
 }

+function CodeOnlySuccessState({
+  purchaseToken,
+  tariffName,
+  periodDays,
+}: {
+  purchaseToken: string;
+  tariffName: string | null;
+  periodDays: number | null;
+}) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [copied, setCopied] = useState(false);
+
+  const giftCode = formatGiftCode(purchaseToken);
+  const botUsername = import.meta.env.VITE_BOT_USERNAME as string | undefined;
+  const botLink = botUsername
+    ? `https://t.me/${botUsername}?start=GIFTCODE_${purchaseToken}`
+    : null;
+  const cabinetLink = `${window.location.origin}/gift?tab=activate&code=${purchaseToken}`;
+
+  const fullMessage = [
+    t('gift.shareText', 'I have a gift for you! Activate it here:'),
+    '',
+    botLink ? `${t('gift.shareModalActivateVia', 'Activate via bot:')} ${botLink}` : null,
+    `${t('gift.shareModalActivateViaCabinet', 'Or via website:')} ${cabinetLink}`,
+  ]
+    .filter(Boolean)
+    .join('\n');
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(fullMessage);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // fallback
+    }
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.9 }}
+      animate={{ opacity: 1, scale: 1 }}
+      className="flex flex-col items-center gap-6 text-center"
+    >
+      <AnimatedCheckmark />
+
+      <div>
+        <h1 className="text-xl font-bold text-dark-50">
+          {t('gift.codeReadyTitle', 'Gift code is ready!')}
+        </h1>
+        {tariffName && periodDays !== null && (
+          <p className="mt-1 text-sm text-dark-300">
+            {tariffName} — {periodDays} {t('gift.days', 'days')}
+          </p>
+        )}
+      </div>
+
+      {/* Gift code display */}
+      <div className="w-full rounded-xl border border-accent-500/20 bg-accent-500/5 p-4">
+        <p className="mb-1 text-xs font-medium uppercase tracking-wider text-dark-400">
+          {t('gift.codeLabel', 'Gift code')}
+        </p>
+        <p className="select-all font-mono text-lg font-bold text-accent-400">{giftCode}</p>
+      </div>
+
+      {/* Share message preview */}
+      <div className="w-full rounded-xl border border-dark-700/30 bg-dark-800/40 p-4 text-left">
+        <p className="mb-3 text-sm font-medium text-dark-100">
+          {t('gift.shareText', 'I have a gift for you! Activate it here:')}
+        </p>
+
+        {botLink && (
+          <div className="mb-2">
+            <p className="mb-1 text-xs font-medium text-dark-400">
+              {t('gift.shareModalActivateVia', 'Activate via bot:')}
+            </p>
+            <p className="truncate rounded-lg bg-dark-900/60 px-3 py-2 text-sm text-accent-400">
+              {botLink}
+            </p>
+          </div>
+        )}
+
+        <div>
+          <p className="mb-1 text-xs font-medium text-dark-400">
+            {t('gift.shareModalActivateViaCabinet', 'Or via website:')}
+          </p>
+          <p className="truncate rounded-lg bg-dark-900/60 px-3 py-2 text-sm text-accent-400">
+            {cabinetLink}
+          </p>
+        </div>
+      </div>
+
+      {/* Copy button */}
+      <button
+        type="button"
+        onClick={handleCopy}
+        className={cn(
+          'flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3.5 text-sm font-bold transition-all duration-200 active:scale-[0.98]',
+          copied
+            ? 'bg-success-500/20 text-success-400'
+            : 'bg-accent-500 text-white shadow-lg shadow-accent-500/25 hover:bg-accent-400',
+        )}
+      >
+        {copied ? (
+          <>
+            <svg
+              className="h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+            {t('gift.shareModalCopied', 'Copied!')}
+          </>
+        ) : (
+          <>
+            <svg
+              className="h-4 w-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+              />
+            </svg>
+            {t('gift.shareModalCopyAll', 'Copy message')}
+          </>
+        )}
+      </button>
+
+      <button
+        type="button"
+        onClick={() => navigate('/gift?tab=myGifts')}
+        className="w-full rounded-xl border border-dark-700/50 px-6 py-3 text-sm font-medium text-dark-300 transition-colors hover:bg-dark-800/50"
+      >
+        {t('gift.tabMyGifts', 'My Gifts')}
+      </button>
+    </motion.div>
+  );
+}
+
 function DeliveredState({
  recipientContact,
  tariffName,
@@ -375,9 +528,12 @@ export default function GiftResult() {
      // Balance mode: fetch once, no polling
      if (isBalanceMode) return false;

-      const s = query.state.data?.status;
+      const d = query.state.data;
+      const s = d?.status;
      if (s === 'delivered' || s === 'failed' || s === 'pending_activation' || s === 'expired')
        return false;
+      // Code-only gifts stay in 'paid' status — stop polling
+      if (s === 'paid' && d?.is_code_only) return false;

      // Check poll timeout
      if (Date.now() - pollStart.current > MAX_POLL_MS) {
@@ -411,6 +567,7 @@ export default function GiftResult() {
    );
  }

+  const isCodeOnlyPaid = status?.status === 'paid' && status?.is_code_only;
  const isDelivered = status?.status === 'delivered';
  const isPendingActivation = status?.status === 'pending_activation';
  const isFailed = status?.status === 'failed' || status?.status === 'expired';
@@ -429,6 +586,12 @@ export default function GiftResult() {
      >
        {isError ? (
          <PollErrorState />
+        ) : isCodeOnlyPaid ? (
+          <CodeOnlySuccessState
+            purchaseToken={status.purchase_token!}
+            tariffName={status.tariff_name}
+            periodDays={status.period_days}
+          />
        ) : isDelivered ? (
          <DeliveredState
            recipientContact={status.recipient_contact_value}
--- a/src/pages/GiftSubscription.tsx
+++ b/src/pages/GiftSubscription.tsx
@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect } from 'react';
-import { useNavigate, Link } from 'react-router';
+import { useNavigate, useSearchParams, Link } from 'react-router';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -329,6 +329,10 @@ function TariffCard({
            isSelected ? 'text-accent-400' : 'text-dark-400',
          )}
        >
+          {tariff.traffic_limit_gb > 0
+            ? `${tariff.traffic_limit_gb} ${t('gift.gbShort')}`
+            : t('gift.unlimitedTraffic')}
+          {' \u2022 '}
          {t('gift.deviceCount', { count: tariff.device_limit })}
        </p>
      </div>
@@ -699,6 +703,13 @@ function BuyTabContent({
        </div>
      )}

+      {/* Selected tariff description */}
+      {selectedTariff?.description && (
+        <div className="rounded-xl border border-dark-800/30 bg-dark-800/20 px-4 py-3">
+          <p className="text-sm text-dark-300">{selectedTariff.description}</p>
+        </div>
+      )}
+
      {/* Period selection */}
      {periodsForDisplay.length > 0 && (
        <div>
@@ -839,10 +850,15 @@ function BuyTabContent({
 // Sub-components: Activate Tab
 // ============================================================

-function ActivateTabContent() {
+function ActivateTabContent({ initialCode }: { initialCode?: string | null }) {
  const { t } = useTranslation();
  const queryClient = useQueryClient();
-  const [code, setCode] = useState('');
+  const [code, setCode] = useState(initialCode?.toUpperCase() ?? '');
+
+  // Sync when initialCode changes (e.g. URL param update while tab is active)
+  useEffect(() => {
+    if (initialCode) setCode(initialCode.toUpperCase());
+  }, [initialCode]);
  const [activateError, setActivateError] = useState<string | null>(null);

  const activateMutation = useMutation({
@@ -949,10 +965,154 @@ function ActivateTabContent() {
 // Sub-components: My Gifts Tab
 // ============================================================

-function SentGiftCard({ gift }: { gift: SentGift }) {
+function ShareModal({ gift, onClose }: { gift: SentGift; onClose: () => void }) {
  const { t } = useTranslation();
  const [copied, setCopied] = useState(false);

+  const botUsername = import.meta.env.VITE_BOT_USERNAME as string | undefined;
+  const botLink = botUsername ? `https://t.me/${botUsername}?start=GIFTCODE_${gift.token}` : null;
+  const cabinetLink = `${window.location.origin}/gift?tab=activate&code=${gift.token}`;
+
+  const fullMessage = [
+    t('gift.shareText'),
+    '',
+    botLink ? `${t('gift.shareModalActivateVia')} ${botLink}` : null,
+    `${t('gift.shareModalActivateViaCabinet')} ${cabinetLink}`,
+  ]
+    .filter(Boolean)
+    .join('\n');
+
+  const handleCopyAll = async () => {
+    try {
+      await navigator.clipboard.writeText(fullMessage);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // fallback
+    }
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.2 }}
+      className="fixed inset-0 z-50 flex items-end justify-center px-4 pb-6 sm:items-center sm:pb-0"
+      onClick={onClose}
+    >
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
+
+      {/* Modal content */}
+      <motion.div
+        initial={{ opacity: 0, y: 40, scale: 0.95 }}
+        animate={{ opacity: 1, y: 0, scale: 1 }}
+        exit={{ opacity: 0, y: 40, scale: 0.95 }}
+        transition={{ duration: 0.25, ease: 'easeOut' }}
+        className="relative w-full max-w-md overflow-hidden rounded-2xl border border-dark-700/50 bg-dark-900 shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-dark-800/50 px-5 py-4">
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-full bg-accent-500/20">
+              <ShareIcon className="h-4.5 w-4.5 text-accent-400" />
+            </div>
+            <div>
+              <h3 className="text-base font-bold text-dark-50">{t('gift.shareModalTitle')}</h3>
+              <p className="text-xs text-dark-400">{t('gift.shareModalDesc')}</p>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="flex h-8 w-8 items-center justify-center rounded-lg text-dark-400 transition-colors hover:bg-dark-800 hover:text-dark-200"
+            aria-label={t('common.cancel')}
+          >
+            <svg
+              className="h-5 w-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Message preview */}
+        <div className="px-5 py-4">
+          <div className="rounded-xl border border-dark-700/30 bg-dark-800/40 p-4">
+            <p className="mb-3 text-sm font-medium text-dark-100">{t('gift.shareText')}</p>
+
+            {botLink && (
+              <div className="mb-2">
+                <p className="mb-1 text-xs font-medium text-dark-400">
+                  {t('gift.shareModalActivateVia')}
+                </p>
+                <a
+                  href={botLink}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block truncate rounded-lg bg-dark-900/60 px-3 py-2 text-sm text-accent-400 transition-colors hover:bg-dark-900"
+                >
+                  {botLink}
+                </a>
+              </div>
+            )}
+
+            <div>
+              <p className="mb-1 text-xs font-medium text-dark-400">
+                {t('gift.shareModalActivateViaCabinet')}
+              </p>
+              <a
+                href={cabinetLink}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block truncate rounded-lg bg-dark-900/60 px-3 py-2 text-sm text-accent-400 transition-colors hover:bg-dark-900"
+              >
+                {cabinetLink}
+              </a>
+            </div>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="border-t border-dark-800/50 px-5 py-4">
+          <button
+            type="button"
+            onClick={handleCopyAll}
+            className={cn(
+              'flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3.5 text-sm font-bold transition-all duration-200 active:scale-[0.98]',
+              copied
+                ? 'bg-success-500/20 text-success-400'
+                : 'bg-accent-500 text-white shadow-lg shadow-accent-500/25 hover:bg-accent-400',
+            )}
+          >
+            {copied ? (
+              <>
+                <CheckIcon className="h-4 w-4" />
+                {t('gift.shareModalCopied')}
+              </>
+            ) : (
+              <>
+                <CopyIcon className="h-4 w-4" />
+                {t('gift.shareModalCopyAll')}
+              </>
+            )}
+          </button>
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+function SentGiftCard({ gift }: { gift: SentGift }) {
+  const { t } = useTranslation();
+  const [showShareModal, setShowShareModal] = useState(false);
+
  const giftCode = `GIFT-${gift.token.slice(0, 12).toUpperCase()}`;
  const isActivated = isGiftActivated(gift);
  const isAvailable = !isActivated && isGiftAvailable(gift.status);
@@ -963,40 +1123,6 @@ function SentGiftCard({ gift }: { gift: SentGift }) {
      ? t('gift.statusAvailable')
      : t(getGiftStatusKey(gift.status));

-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(gift.token);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch {
-      // Clipboard API not available
-    }
-  };
-
-  const handleShare = async () => {
-    const botUsername = import.meta.env.VITE_BOT_USERNAME as string | undefined;
-    if (!botUsername) return;
-    const shareUrl = `https://t.me/${botUsername}?start=GIFTCODE_${gift.token}`;
-    const shareText = t('gift.shareText');
-
-    if (navigator.share) {
-      try {
-        await navigator.share({
-          text: `${shareText} ${shareUrl}`,
-        });
-        return;
-      } catch {
-        // User cancelled or not available — fallback to clipboard
-      }
-    }
-
-    try {
-      await navigator.clipboard.writeText(shareUrl);
-    } catch {
-      // Clipboard API not available
-    }
-  };
-
  return (
    <div className="rounded-2xl border border-dark-800/50 bg-dark-900/50 p-4">
      {/* Header: tariff name + status badge */}
@@ -1022,7 +1148,7 @@ function SentGiftCard({ gift }: { gift: SentGift }) {
        {' \u2022 '}
        {gift.period_days} {t('gift.daysShort')}
        {' \u2022 '}
-        {gift.device_limit} {t('gift.devicesShort')}
+        {gift.device_limit} {t('gift.devicesShort', { count: gift.device_limit })}
      </p>

      {/* Gift code + actions (only when not activated) */}
@@ -1035,20 +1161,10 @@ function SentGiftCard({ gift }: { gift: SentGift }) {
            </p>
          </div>

-          {/* Copy button */}
+          {/* Share button — opens modal */}
          <button
            type="button"
-            onClick={handleCopy}
-            className="mb-2 flex w-full items-center justify-center gap-2 rounded-xl border border-dark-700/50 bg-dark-800/50 px-4 py-3 text-sm font-bold uppercase tracking-wider text-dark-200 transition-colors hover:bg-dark-700/50"
-          >
-            <CopyIcon className="h-4 w-4" />
-            {copied ? t('gift.codeCopied') : t('gift.copyCode')}
-          </button>
-
-          {/* Share button */}
-          <button
-            type="button"
-            onClick={handleShare}
+            onClick={() => setShowShareModal(true)}
            className="flex w-full items-center justify-center gap-2 rounded-xl bg-accent-500 px-4 py-3 text-sm font-bold uppercase tracking-wider text-white transition-colors hover:bg-accent-400 active:scale-[0.98]"
          >
            <ShareIcon className="h-4 w-4" />
@@ -1070,6 +1186,11 @@ function SentGiftCard({ gift }: { gift: SentGift }) {
          {t('gift.sentTo', { recipient: gift.gift_recipient_value })}
        </p>
      )}
+
+      {/* Share modal */}
+      <AnimatePresence>
+        {showShareModal && <ShareModal gift={gift} onClose={() => setShowShareModal(false)} />}
+      </AnimatePresence>
    </div>
  );
 }
@@ -1096,7 +1217,7 @@ function ReceivedGiftCard({ gift }: { gift: ReceivedGift }) {
        {' \u2022 '}
        {gift.period_days} {t('gift.daysShort')}
        {' \u2022 '}
-        {gift.device_limit} {t('gift.devicesShort')}
+        {gift.device_limit} {t('gift.devicesShort', { count: gift.device_limit })}
      </p>

      {/* Sender */}
@@ -1221,8 +1342,14 @@ const tabContentVariants = {

 export default function GiftSubscription() {
  const { t } = useTranslation();
+  const [searchParams] = useSearchParams();

-  const [activeTab, setActiveTab] = useState<TabId>('buy');
+  // URL params: ?tab=activate&code=TOKEN for auto-activation
+  const urlTab = searchParams.get('tab') as TabId | null;
+  const urlCode = searchParams.get('code');
+  const [activeTab, setActiveTab] = useState<TabId>(
+    urlTab === 'activate' || urlTab === 'myGifts' ? urlTab : 'buy',
+  );

  // Fetch config
  const {
@@ -1319,7 +1446,7 @@ export default function GiftSubscription() {
            {activeTab === 'buy' && (
              <BuyTabContent config={config} onPurchaseComplete={() => setActiveTab('myGifts')} />
            )}
-            {activeTab === 'activate' && <ActivateTabContent />}
+            {activeTab === 'activate' && <ActivateTabContent initialCode={urlCode} />}
            {activeTab === 'myGifts' && <MyGiftsTabContent />}
          </motion.div>
        </AnimatePresence>