1
 2import {
 3    useUserSubscriptionRevokeCmd,
 4    UserType
 5} from '@marzneshin/features/users';
 6import QRCode from "react-qr-code";
 7import { QrCodeIcon } from "lucide-react";
 8import { FC } from 'react'
 9import {
10    Button,
11    Card,
12    CardContent,
13    CardHeader,
14    CardTitle
15} from '@marzneshin/components';
16import { useTranslation } from 'react-i18next';
17import { SubscriptionLinkButton } from './subcription-link-button';
18import { getSubscriptionLink } from '@marzneshin/utils';
19
20interface QRCodeProps {
21    entity: UserType
22}
23
24export const QRCodeSection: FC<QRCodeProps> = (
25    { entity }
26) => {
27    const subscribeQrLink = getSubscriptionLink(entity.subscription_url);
28    const { mutate: revokeSubscription } = useUserSubscriptionRevokeCmd()
29    const { t } = useTranslation()
30    return (
31        <Card>
32            <CardHeader className="flex flex-row justify-between items-center w-full">
33                <CardTitle className="flex flex-row gap-4 justify-start">
34                    <QrCodeIcon />
35                    {t('subscription')}
36                </CardTitle>
37                <Button className="w-[9rem]" onClick={() => revokeSubscription(entity)}>
38                    {t('page.users.revoke_subscription')}
39                </Button>
40            </CardHeader>
41            <CardContent className='flex flex-col justify-center items-center py-10 w-full h-full'>
42                <div className="flex flex-col gap-3 justify-center items-center w-1/2 h-1/2">
43                    <QRCode
44                        size={150}
45                        className="w-full h-full"
46                        value={subscribeQrLink}
47                    />
48                    <SubscriptionLinkButton subscriptionLink={subscribeQrLink} />
49                </div>
50            </CardContent>
51        </Card>
52    );
53}