gitscope
/
← marzneshin / app/dashboard/src/pages/hosts/users/modals/revoke-subscription-modal.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
app/dashboard/src/pages/hosts/users/modals/revoke-subscription-modal.tsx · v0.1.0
Source
1 6aab6f0 Mrdn 2y ago import {
2 6aab6f0 Mrdn 2y ago Button,
3 6aab6f0 Mrdn 2y ago chakra,
4 6aab6f0 Mrdn 2y ago Modal,
5 6aab6f0 Mrdn 2y ago ModalBody,
6 6aab6f0 Mrdn 2y ago ModalCloseButton,
7 6aab6f0 Mrdn 2y ago ModalContent,
8 6aab6f0 Mrdn 2y ago ModalFooter,
9 6aab6f0 Mrdn 2y ago ModalHeader,
10 6aab6f0 Mrdn 2y ago ModalOverlay,
11 6aab6f0 Mrdn 2y ago Spinner,
12 6aab6f0 Mrdn 2y ago Text,
13 6aab6f0 Mrdn 2y ago useToast,
14 6aab6f0 Mrdn 2y ago } from '@chakra-ui/react';
15 6aab6f0 Mrdn 2y ago import { ArrowPathIcon } from '@heroicons/react/24/outline';
16 6aab6f0 Mrdn 2y ago import { useUsers } from 'stores';
17 6aab6f0 Mrdn 2y ago import { FC, useState } from 'react';
18 6aab6f0 Mrdn 2y ago import { Trans, useTranslation } from 'react-i18next';
19 6aab6f0 Mrdn 2y ago import { Icon } from 'components/icon';
20 6aab6f0 Mrdn 2y ago
21 6aab6f0 Mrdn 2y ago const ResetIcon = chakra(ArrowPathIcon, {
22 6aab6f0 Mrdn 2y ago baseStyle: {
23 6aab6f0 Mrdn 2y ago w: 5,
24 6aab6f0 Mrdn 2y ago h: 5,
25 6aab6f0 Mrdn 2y ago },
26 6aab6f0 Mrdn 2y ago });
27 6aab6f0 Mrdn 2y ago
28 6aab6f0 Mrdn 2y ago export type RevokeSubscriptionModalProps = {};
29 6aab6f0 Mrdn 2y ago
30 6aab6f0 Mrdn 2y ago export const RevokeSubscriptionModal: FC<RevokeSubscriptionModalProps> = () => {
31 6aab6f0 Mrdn 2y ago const [loading, setLoading] = useState(false);
32 6aab6f0 Mrdn 2y ago const { revokeSubscriptionUser: user, revokeSubscription } = useUsers();
33 6aab6f0 Mrdn 2y ago const { t } = useTranslation();
34 6aab6f0 Mrdn 2y ago const toast = useToast();
35 6aab6f0 Mrdn 2y ago const onClose = () => {
36 6aab6f0 Mrdn 2y ago useUsers.setState({ revokeSubscriptionUser: null });
37 6aab6f0 Mrdn 2y ago };
38 6aab6f0 Mrdn 2y ago const onReset = () => {
39 6aab6f0 Mrdn 2y ago if (user) {
40 6aab6f0 Mrdn 2y ago setLoading(true);
41 6aab6f0 Mrdn 2y ago revokeSubscription(user)
42 6aab6f0 Mrdn 2y ago .then(() => {
43 6aab6f0 Mrdn 2y ago toast({
44 6aab6f0 Mrdn 2y ago title: t('revokeUserSub.success', { username: user.username }),
45 6aab6f0 Mrdn 2y ago status: 'success',
46 6aab6f0 Mrdn 2y ago isClosable: true,
47 6aab6f0 Mrdn 2y ago position: 'top',
48 6aab6f0 Mrdn 2y ago duration: 3000,
49 6aab6f0 Mrdn 2y ago });
50 6aab6f0 Mrdn 2y ago })
51 6aab6f0 Mrdn 2y ago .catch(() => {
52 6aab6f0 Mrdn 2y ago toast({
53 6aab6f0 Mrdn 2y ago title: t('revokeUserSub.error'),
54 6aab6f0 Mrdn 2y ago status: 'error',
55 6aab6f0 Mrdn 2y ago isClosable: true,
56 6aab6f0 Mrdn 2y ago position: 'top',
57 6aab6f0 Mrdn 2y ago duration: 3000,
58 6aab6f0 Mrdn 2y ago });
59 6aab6f0 Mrdn 2y ago })
60 6aab6f0 Mrdn 2y ago .finally(() => {
61 6aab6f0 Mrdn 2y ago setLoading(false);
62 6aab6f0 Mrdn 2y ago });
63 6aab6f0 Mrdn 2y ago }
64 6aab6f0 Mrdn 2y ago };
65 6aab6f0 Mrdn 2y ago return (
66 6aab6f0 Mrdn 2y ago <Modal isCentered isOpen={!!user} onClose={onClose} size="sm">
67 6aab6f0 Mrdn 2y ago <ModalOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />
68 6aab6f0 Mrdn 2y ago <ModalContent mx="3">
69 6aab6f0 Mrdn 2y ago <ModalHeader pt={6}>
70 6aab6f0 Mrdn 2y ago <Icon color="blue">
71 6aab6f0 Mrdn 2y ago <ResetIcon />
72 6aab6f0 Mrdn 2y ago </Icon>
73 6aab6f0 Mrdn 2y ago </ModalHeader>
74 6aab6f0 Mrdn 2y ago <ModalCloseButton mt={3} />
75 6aab6f0 Mrdn 2y ago <ModalBody>
76 6aab6f0 Mrdn 2y ago <Text fontWeight="semibold" fontSize="lg">
77 6aab6f0 Mrdn 2y ago {t('revokeUserSub.title')}
78 6aab6f0 Mrdn 2y ago </Text>
79 6aab6f0 Mrdn 2y ago {user && (
80 6aab6f0 Mrdn 2y ago <Text
81 6aab6f0 Mrdn 2y ago mt={1}
82 6aab6f0 Mrdn 2y ago fontSize="sm"
83 6aab6f0 Mrdn 2y ago _dark={{ color: 'gray.400' }}
84 6aab6f0 Mrdn 2y ago color="gray.600"
85 6aab6f0 Mrdn 2y ago >
86 6aab6f0 Mrdn 2y ago <Trans components={{ b: <b /> }}>
87 6aab6f0 Mrdn 2y ago {t('revokeUserSub.prompt', { username: user.username })}
88 6aab6f0 Mrdn 2y ago </Trans>
89 6aab6f0 Mrdn 2y ago </Text>
90 6aab6f0 Mrdn 2y ago )}
91 6aab6f0 Mrdn 2y ago </ModalBody>
92 6aab6f0 Mrdn 2y ago <ModalFooter display="flex">
93 6aab6f0 Mrdn 2y ago <Button size="sm" onClick={onClose} mr={3} w="full" variant="outline">
94 6aab6f0 Mrdn 2y ago {t('cancel')}
95 6aab6f0 Mrdn 2y ago </Button>
96 6aab6f0 Mrdn 2y ago <Button
97 6aab6f0 Mrdn 2y ago size="sm"
98 6aab6f0 Mrdn 2y ago w="full"
99 6aab6f0 Mrdn 2y ago colorScheme="blue"
100 6aab6f0 Mrdn 2y ago onClick={onReset}
101 6aab6f0 Mrdn 2y ago leftIcon={loading ? <Spinner size="xs" /> : undefined}
102 6aab6f0 Mrdn 2y ago >
103 6aab6f0 Mrdn 2y ago {t('revoke')}
104 6aab6f0 Mrdn 2y ago </Button>
105 6aab6f0 Mrdn 2y ago </ModalFooter>
106 6aab6f0 Mrdn 2y ago </ModalContent>
107 6aab6f0 Mrdn 2y ago </Modal>
108 6aab6f0 Mrdn 2y ago );
109 6aab6f0 Mrdn 2y ago };