Files
edr-platform/apps/edr-freight-web/backoffice/src/pages/chat/ChatLaunchPage.tsx
2026-08-17 08:02:00 +00:00

63 lines
2.1 KiB
TypeScript

import { Alert, Button, Card, Center, Loader, Stack, Text } from "@mantine/core";
import { MessageSquare, TriangleAlert } from "lucide-react";
import { PageContainer, PageHeader } from "@/components/page";
import { useChatSso } from "@/features/chat/useChatSso";
/**
* Chat itself lives at chat.edr.et (Element), not in this app — this page's
* only job is a fresh one-click sign-in link into it. A real `<a>` (not
* `window.open()` in a click handler) so the browser never treats it as a
* blocked popup, and no iframe: Element's own CSP refuses to be framed.
*/
export default function ChatLaunchPage() {
const { data: url, isLoading, isError, refetch } = useChatSso();
return (
<PageContainer>
<PageHeader title="Chat" subtitle="Internal messaging for EDR staff" />
<Card withBorder radius="md" p="xl">
<Center>
<Stack align="center" gap="md" py="xl">
{isLoading && <Loader />}
{isError && (
<Stack align="center" gap="sm">
<Alert
icon={<TriangleAlert size={18} />}
color="red"
title="Couldn't get a sign-in link"
variant="light"
>
Something went wrong reaching chat. Try again.
</Alert>
<Button variant="light" onClick={() => refetch()}>
Retry
</Button>
</Stack>
)}
{url && (
<Stack align="center" gap="sm">
<MessageSquare size={40} strokeWidth={1.5} />
<Text c="dimmed" ta="center" maw={360}>
Opens EDR Chat in a new tab, already signed in as you.
</Text>
<Button
component="a"
href={url}
target="_blank"
rel="noopener noreferrer"
leftSection={<MessageSquare size={16} />}
>
Open EDR Chat
</Button>
</Stack>
)}
</Stack>
</Center>
</Card>
</PageContainer>
);
}