@vertesia/ui 0.70.0 → 0.71.0

package/src/shell/VertesiaShell.tsx

@@ -3,19 +3,21 @@ import { UserPermissionProvider } from "@vertesia/ui/features";
 import { UserSessionProvider } from "@vertesia/ui/session";
 import { SplashScreen } from "./SplashScreen";
 import { SigninScreen } from "./login/SigninScreen";
+import { ReactNode } from "react";
 
 
 interface VertesiaShellProps {
     children: React.ReactNode;
     lightLogo?: string;
     darkLogo?: string;
+    loadingIcon?: ReactNode;
 }
-export function VertesiaShell({ children, lightLogo, darkLogo }: VertesiaShellProps) {
+export function VertesiaShell({ children, lightLogo, darkLogo, loadingIcon }: VertesiaShellProps) {
     return (
         <ToastProvider>
             <UserSessionProvider>
                 <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
-                    <SplashScreen />
+                    <SplashScreen icon={loadingIcon} />
                     <SigninScreen allowedPrefix="/shared/" lightLogo={lightLogo} darkLogo={darkLogo} />
                     <UserPermissionProvider>
                         {children}

package/src/shell/login/InviteAcceptModal.tsx

@@ -1,5 +1,5 @@
 import { TransientToken, UserInviteTokenData } from "@vertesia/common"
-import { Button, Modal, ModalBody, ModalTitle } from "@vertesia/ui/core"
+import { Button, VModal, VModalBody, VModalTitle } from "@vertesia/ui/core"
 import { useEffect, useState } from "react"
 import { useUserSession } from "@vertesia/ui/session"
 
@@ -14,15 +14,22 @@ export function InviteAcceptModal() {
     useEffect(() => {
         client.account.listInvites().then(invites => {
             if (invites.length > 0) {
-                console.log("Got invites - showing modal")
-                setInvites(invites)
-                /*toast({
-                    status: 'info',
-                    title: 'You have pending invites',
-                    description: 'Click the button on the top right to review them.'
-                })*/
+                // Filter out legacy invites that do not have account data
+                const notLegacyInvites = invites.filter(i => i.data.account);
+                if (notLegacyInvites.length === 0) {
+                    console.log("No valid invites found, closing modal")
+                    return;
+                }
+                // If we have valid invites, show the modal
+                console.log("Found valid invites", notLegacyInvites.length)
                 setShowModal(true);
+                setInvites(notLegacyInvites);
+            } else {
+                console.log("No invites found, closing modal")
+                setShowModal(false);
             }
+        }).catch(err => {
+            console.error("Error fetching invites", err);
         })
     }, [account?.id])
 
@@ -32,8 +39,11 @@ export function InviteAcceptModal() {
         await client.account.acceptInvite(invite.id);
         await session.fetchAccounts();
         const remainingInvites = invites.filter(i => i.id !== invite.id)
-        setInvites(remainingInvites)
-        if (remainingInvites.length === 0) {
+
+        const notLegacyInvites = remainingInvites.filter(i => i.data.account);
+        if (notLegacyInvites.length > 0) {
+            setInvites(notLegacyInvites);
+        } else {
             closeModal();
         }
     }
@@ -47,31 +57,37 @@ export function InviteAcceptModal() {
         }
     }
 
-    const inviteList = invites.map(invite => (
-        <div key={invite.id} className="flex flex-row w-full justify-between border rounded-sm px-2 py-2 ">
+    const inviteList = invites.map(invite => {
+        if (!invite.data.account) {
+            console.warn("Invite has no account data", invite);
+            return null; // Skip rendering this invite
+        }
+
+        return (<div key={invite.id} className="flex flex-row w-full justify-between border rounded-sm px-2 py-2 ">
             <div className="flex flex-col">
-                <div className="w-full font-semibold">{invite.data.account.name}</div>
+                <div className="w-full font-semibold">{invite.data.account.name ?? invite.data.account}</div>
+                {invite.data.project && <div className="w-full text-base">- {invite.data.project.name}</div>}
                 <div className="text-xs">Role: {invite.data.role}</div>
                 <div className="text-xs">by {invite.data.invitedBy.name}</div>
             </div>
             <div className="flex flex-col gap-4">
                 <Button size={'xs'} onClick={() => accept(invite)}>Accept</Button> <Button size={'xs'} variant="secondary" onClick={() => reject(invite)}>Reject</Button>
             </div>
-        </div>
-    ))
+        </div>)
+    })
 
     return (
         <div>
-            <Modal isOpen={showModal} onClose={closeModal}>
-                <ModalTitle>Review Invites</ModalTitle>
-                <ModalBody>
+            <VModal isOpen={showModal} onClose={closeModal}>
+                <VModalTitle>Review Invites</VModalTitle>
+                <VModalBody>
                     <div className="text-sm pb-4">
                         You have received the following invites to join other accounts.
                         Please review and accept or declined them.
                     </div>
                     {inviteList}
-                </ModalBody>
-            </Modal>
+                </VModalBody>
+            </VModal>
         </div>
     )