@@ -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
(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 (
+
+ {/* Backdrop */}
+
+
+ {/* Modal content */}
+ e.stopPropagation()}
+ >
+ {/* Header */}
+
+
+
+
+
+
+
{t('gift.shareModalTitle')}
+
{t('gift.shareModalDesc')}
+
+
+
+
+
+
{t('gift.shareText')}
+
+ {botLink && (
+
+ )}
+
+
+
+
+
+
+
+
+ );
+}
+
+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 (
{/* 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 })}
{/* Gift code + actions (only when not activated) */}
@@ -1035,20 +1161,10 @@ function SentGiftCard({ gift }: { gift: SentGift }) {
- {/* Copy button */}
+ {/* Share button — opens modal */}
-
- {/* Share button */}
-