on 703ff86 help sign in
bridge/src/components/L2/CreatingInvitesModal.tsx
85 lines 2.5 kB history raw
1import { Col, H3, LoadingSpinner, Row, Text, Button } from '@tlon/indigo-react';
2import Modal from 'components/L2/Modal';
3import { ReactComponent as InviteIcon } from 'assets/invite.svg';
4import { InviteGeneratingStatus } from '../../views/Invite/useInvites';
5import BodyPane from './Window/BodyPane';
7interface CreatingInvitesModalProps {
8 status: InviteGeneratingStatus;
9 current: number;
10 total: number;
11 error?: string;
12 hide: () => void;
15export const CreatingInvitesModal = ({
16 status,
17 current,
18 total,
19 hide,
20 error,
21}: CreatingInvitesModalProps) => {
22 const successfulInvites = current > 1 ? current - 1 : 0;
23 return (
24 <Modal
25 small
26 show={status !== 'initial'}
27 hide={hide}
28 hideClose={status !== 'finished'}>
29 <BodyPane p={0}>
30 <Col width="350px">
31 {status === 'generating' && (
32 <Row alignItems="center">
33 <LoadingSpinner dark />
34 <Text bold marginLeft={2}>
35 Updating Invite {current}/{total}...
36 </Text>
37 </Row>
38 )}
39 {status === 'finished' && (
40 <>
41 <Row mb={3}>
42 <InviteIcon />
43 <Text bold ml={2}>
44 All Invites Updated
45 </Text>
46 </Row>
47 <Text mb={3}>
48 The planets you selected are re-ticketed and appear as new
49 invitation links under each star.
50 </Text>
51 <Row>
52 <Button className="secondary" ml="auto" onClick={hide}>
53 Close
54 </Button>
55 </Row>
56 </>
57 )}
58 {status === 'errored' && (
59 <>
60 <H3 marginBottom={2}>
61 There was an error while updating your invites:
62 </H3>
63 {error && (
64 <Text color="red" mono marginBottom={3}>
65 {error}
66 </Text>
67 )}
68 {!!successfulInvites && (
69 <Text marginY={3}>
70 At least {successfulInvites} planet
71 {successfulInvites > 1 ? 's' : ''} were successfully
72 re-ticketed and appear as new invitation links under each
73 star.
74 </Text>
75 )}
76 <Button className="secondary" onClick={hide}>
77 Back
78 </Button>
79 </>
80 )}
81 </Col>
82 </BodyPane>
83 </Modal>
84 );
85};