Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
yoginth.com
refactor: remove logEvent calls and related code from components to streamline functionality
1import { CheckBadgeIcon, XCircleIcon } from "@heroicons/react/24/solid";
2import { BANNER_IDS } from "@hey/data/constants";
3import { useAddPostNotInterestedMutation } from "@hey/indexer";
4import type { ApolloClientError } from "@hey/types/errors";
5import { useCallback } from "react";
6import { toast } from "sonner";
7import { Button, Card, H5 } from "@/components/Shared/UI";
8import errorToast from "@/helpers/errorToast";
9import { useProModalStore } from "@/store/non-persisted/modal/useProModalStore";
10import { useAccountStore } from "@/store/persisted/useAccountStore";
11import { useProStore } from "@/store/persisted/useProStore";
12
13const ProBanner = () => {
14 const { currentAccount } = useAccountStore();
15 const { proBannerDismissed, setProBannerDismissed } = useProStore();
16 const { setShow: setShowProModal } = useProModalStore();
17
18 const onError = useCallback((error: ApolloClientError) => {
19 errorToast(error);
20 }, []);
21
22 const [dismissProBanner, { loading }] = useAddPostNotInterestedMutation({
23 onCompleted: () => {
24 toast.success("Dismissed");
25 setProBannerDismissed(true);
26 },
27 onError,
28 variables: { request: { post: BANNER_IDS.BETA } }
29 });
30
31 if (currentAccount?.hasSubscribed || proBannerDismissed) {
32 return null;
33 }
34
35 const handleDismissProBanner = async () => {
36 return await dismissProBanner();
37 };
38
39 return (
40 <Card className="relative space-y-2">
41 <button
42 className="absolute top-3 right-3 cursor-pointer text-gray-400 hover:text-gray-600"
43 disabled={loading}
44 onClick={handleDismissProBanner}
45 type="button"
46 >
47 <XCircleIcon className="size-5" />
48 </button>
49 <div className="m-5">
50 <div className="flex items-center gap-2">
51 <CheckBadgeIcon className="size-5 text-brand-500" />
52 <H5>Join Hey Pro</H5>
53 </div>
54 <div className="mb-5 text-sm">
55 Get your badge and access exclusive features.
56 </div>
57 <Button
58 className="w-full"
59 onClick={() => setShowProModal(true)}
60 outline
61 >
62 Subscribe now
63 </Button>
64 </div>
65 </Card>
66 );
67};
68
69export default ProBanner;