Migrate guest v2 achievements and refresh share page

resources/js/guest-v2/screens/ShareScreen.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Button } from '@tamagui/button';
-import { Share2, QrCode, Link, Users } from 'lucide-react';
+import { Share2, QrCode, Link, Users, Loader2, RefreshCcw } from 'lucide-react';
 import AppShell from '../components/AppShell';
 import { useEventData } from '../context/EventDataContext';
 import { buildEventShareLink } from '../services/eventLink';
@@ -10,19 +10,37 @@ import { usePollStats } from '../hooks/usePollStats';
 import { fetchEventQrCode } from '../services/qrApi';
 import { useGuestThemeVariant } from '../lib/guestTheme';
 import { useTranslation } from '@/guest/i18n/useTranslation';
+import { getBentoSurfaceTokens } from '../lib/bento';
+import { pushGuestToast } from '../lib/toast';
 
 export default function ShareScreen() {
   const { event, token } = useEventData();
   const { t } = useTranslation();
   const { isDark } = useGuestThemeVariant();
-  const cardBorder = isDark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(15, 23, 42, 0.12)';
-  const cardShadow = isDark ? '0 18px 40px rgba(2, 6, 23, 0.4)' : '0 16px 30px rgba(15, 23, 42, 0.12)';
+  const surface = getBentoSurfaceTokens(isDark);
   const [copyState, setCopyState] = React.useState<'idle' | 'copied' | 'failed'>('idle');
   const { stats } = usePollStats(token ?? null);
   const [qrCodeDataUrl, setQrCodeDataUrl] = React.useState('');
   const [qrLoading, setQrLoading] = React.useState(false);
+  const [qrError, setQrError] = React.useState(false);
   const shareUrl = buildEventShareLink(event, token);
 
+  const loadQrCode = React.useCallback(async () => {
+    if (!token) return;
+    setQrLoading(true);
+    setQrError(false);
+    try {
+      const payload = await fetchEventQrCode(token, 240);
+      setQrCodeDataUrl(payload.qr_code_data_url ?? '');
+    } catch (error) {
+      console.error('Failed to load QR code', error);
+      setQrCodeDataUrl('');
+      setQrError(true);
+    } finally {
+      setQrLoading(false);
+    }
+  }, [token]);
+
   const handleCopy = React.useCallback(async () => {
     if (!shareUrl) {
       return;
@@ -30,13 +48,15 @@ export default function ShareScreen() {
     try {
       await navigator.clipboard?.writeText(shareUrl);
       setCopyState('copied');
+      pushGuestToast({ text: t('share.copySuccess', 'Link copied!'), type: 'success' });
     } catch (error) {
       console.error('Copy failed', error);
       setCopyState('failed');
+      pushGuestToast({ text: t('share.copyError', 'Link could not be copied.'), type: 'error' });
     } finally {
       window.setTimeout(() => setCopyState('idle'), 2000);
     }
-  }, [shareUrl]);
+  }, [shareUrl, t]);
 
   const handleShare = React.useCallback(async () => {
     if (!shareUrl) return;
@@ -57,52 +77,29 @@ export default function ShareScreen() {
     if (!token) {
       setQrCodeDataUrl('');
       setQrLoading(false);
+      setQrError(false);
       return;
     }
+    loadQrCode();
+  }, [loadQrCode, token]);
 
-    let active = true;
-    setQrLoading(true);
-
-    fetchEventQrCode(token, 240)
-      .then((payload) => {
-        if (!active) {
-          return;
-        }
-        setQrCodeDataUrl(payload.qr_code_data_url ?? '');
-      })
-      .catch((error) => {
-        if (!active) {
-          return;
-        }
-        console.error('Failed to load QR code', error);
-        setQrCodeDataUrl('');
-      })
-      .finally(() => {
-        if (active) {
-          setQrLoading(false);
-        }
-      });
-
-    return () => {
-      active = false;
-    };
-  }, [token]);
-
-  const guestCountLabel = stats.onlineGuests.toString();
+  const guestCountLabel = (stats.onlineGuests ?? 0).toString();
   const inviteDisabled = !shareUrl;
 
   return (
     <AppShell>
-      <YStack gap="$4">
+      <YStack gap="$4" paddingBottom={80}>
         <YStack
           padding="$4"
           borderRadius="$card"
-          backgroundColor="$surface"
+          backgroundColor={surface.backgroundColor}
           borderWidth={1}
-          borderColor={cardBorder}
+          borderBottomWidth={3}
+          borderColor={surface.borderColor}
+          borderBottomColor={surface.borderBottomColor}
           gap="$2"
           style={{
-            boxShadow: cardShadow,
+            boxShadow: surface.shadow,
           }}
         >
           <XStack alignItems="center" gap="$2">
@@ -116,18 +113,22 @@ export default function ShareScreen() {
           </Text>
         </YStack>
 
-        <XStack gap="$3">
+        <XStack gap="$3" flexWrap="wrap">
           <YStack
             flex={1}
             height={180}
+            minWidth={220}
             borderRadius="$card"
-            backgroundColor="$muted"
+            backgroundColor={surface.backgroundColor}
             borderWidth={1}
-            borderColor={cardBorder}
+            borderBottomWidth={3}
+            borderColor={surface.borderColor}
+            borderBottomColor={surface.borderBottomColor}
             alignItems="center"
             justifyContent="center"
             gap="$2"
             style={{
+              boxShadow: surface.shadow,
               backgroundImage: isDark
                 ? 'radial-gradient(circle at 30% 30%, rgba(255, 79, 216, 0.2), transparent 55%)'
                 : 'radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--guest-primary, #FF5A5F) 18%, white), transparent 60%)',
@@ -139,25 +140,52 @@ export default function ShareScreen() {
                 alt={t('share.invite.qrAlt', 'Event QR code')}
                 style={{ width: 120, height: 120, borderRadius: 16 }}
               />
+            ) : qrLoading ? (
+              <Loader2 size={22} className="animate-spin" color={isDark ? '#F8FAFF' : '#0F172A'} />
             ) : (
-              <QrCode size={qrLoading ? 22 : 28} color={isDark ? '#F8FAFF' : '#0F172A'} />
+              <QrCode size={28} color={isDark ? '#F8FAFF' : '#0F172A'} />
             )}
             <Text fontSize="$3" fontWeight="$7">
               {t('share.invite.qrLabel', 'Show QR')}
             </Text>
+            {qrLoading ? (
+              <Text fontSize="$1" color="$color" opacity={0.7}>
+                {t('share.invite.qrLoading', 'Generating QR…')}
+              </Text>
+            ) : null}
+            {qrError ? (
+              <Button
+                size="$2"
+                borderRadius="$pill"
+                backgroundColor={isDark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(15, 23, 42, 0.08)'}
+                borderWidth={1}
+                borderColor={surface.borderColor}
+                onPress={loadQrCode}
+              >
+                <XStack alignItems="center" gap="$2">
+                  <RefreshCcw size={14} color={isDark ? '#F8FAFF' : '#0F172A'} />
+                  <Text fontSize="$1" fontWeight="$6">
+                    {t('share.invite.qrRetry', 'Retry')}
+                  </Text>
+                </XStack>
+              </Button>
+            ) : null}
           </YStack>
           <YStack
             flex={1}
             height={180}
+            minWidth={220}
             borderRadius="$card"
-            backgroundColor="$surface"
+            backgroundColor={surface.backgroundColor}
             borderWidth={1}
-            borderColor={cardBorder}
+            borderBottomWidth={3}
+            borderColor={surface.borderColor}
+            borderBottomColor={surface.borderBottomColor}
             alignItems="center"
             justifyContent="center"
             gap="$2"
             style={{
-              boxShadow: isDark ? '0 16px 30px rgba(2, 6, 23, 0.35)' : '0 14px 24px rgba(15, 23, 42, 0.12)',
+              boxShadow: surface.shadow,
             }}
           >
             <Link size={24} color={isDark ? '#F8FAFF' : '#0F172A'} />
@@ -168,6 +196,16 @@ export default function ShareScreen() {
                   ? t('share.copyError', 'Copy failed')
                   : t('share.invite.copyLabel', 'Copy link')}
             </Text>
+            {shareUrl ? (
+              <Text
+                fontSize="$1"
+                color="$color"
+                opacity={0.7}
+                style={{ wordBreak: 'break-all', overflowWrap: 'anywhere' }}
+              >
+                {shareUrl}
+              </Text>
+            ) : null}
             <Button size="$2" backgroundColor="$primary" borderRadius="$pill" onPress={handleCopy} disabled={!shareUrl}>
               {t('share.copyLink', 'Copy link')}
             </Button>
@@ -177,15 +215,17 @@ export default function ShareScreen() {
         <YStack
           padding="$4"
           borderRadius="$card"
-          backgroundColor="$surface"
+          backgroundColor={surface.backgroundColor}
           borderWidth={1}
-          borderColor={cardBorder}
+          borderBottomWidth={3}
+          borderColor={surface.borderColor}
+          borderBottomColor={surface.borderBottomColor}
           gap="$3"
           style={{
             backgroundImage: isDark
               ? 'linear-gradient(135deg, rgba(79, 209, 255, 0.12), rgba(255, 79, 216, 0.18))'
               : 'linear-gradient(135deg, color-mix(in oklab, var(--guest-secondary, #F43F5E) 8%, white), color-mix(in oklab, var(--guest-primary, #FF5A5F) 12%, white))',
-            boxShadow: isDark ? '0 22px 44px rgba(2, 6, 23, 0.45)' : '0 18px 32px rgba(15, 23, 42, 0.12)',
+            boxShadow: surface.shadow,
           }}
         >
           <XStack alignItems="center" gap="$2">
@@ -204,7 +244,7 @@ export default function ShareScreen() {
           </YStack>
           <Text fontSize="$2" color="$color" opacity={0.7}>
             {event?.name
-              ? t('share.invite.guestsSubtitleEvent', 'Share {event} with your guests.', { event: event.name })
+              ? t('share.invite.guestsSubtitleEvent', { event: event.name }, 'Share {event} with your guests.')
               : t('share.invite.guestsSubtitle', 'Share the event with your guests.')}
           </Text>
           <Button