SupportAlbyWidget.tsx raw

   1  import { HeartIcon } from "lucide-react";
   2  import {
   3    Card,
   4    CardContent,
   5    CardDescription,
   6    CardFooter,
   7    CardHeader,
   8    CardTitle,
   9  } from "src/components/ui/card";
  10  import { LinkButton } from "src/components/ui/custom/link-button";
  11  import { SUPPORT_ALBY_CONNECTION_NAME } from "src/constants";
  12  import { useAlbyMe } from "src/hooks/useAlbyMe";
  13  import { useApps } from "src/hooks/useApps";
  14  import { useInfo } from "src/hooks/useInfo";
  15  
  16  export function SupportAlbyWidget() {
  17    const { data: info } = useInfo();
  18    const { data: albyMe, error: albyMeError } = useAlbyMe();
  19    const { data: supportAlbyAppsData } = useApps(undefined, undefined, {
  20      name: SUPPORT_ALBY_CONNECTION_NAME,
  21    });
  22  
  23    if (
  24      !info ||
  25      (info.albyAccountConnected && !albyMe && !albyMeError) ||
  26      albyMe?.subscription.plan_code ||
  27      supportAlbyAppsData?.apps.length
  28    ) {
  29      return null;
  30    }
  31  
  32    return (
  33      <Card>
  34        <CardHeader className="px-6 pb-0">
  35          <CardTitle className="text-base font-semibold">
  36            Support Open Source
  37          </CardTitle>
  38        </CardHeader>
  39        <CardContent className="px-6 py-0">
  40          <div className="flex items-center gap-4">
  41            <div className="flex size-12 items-center justify-center text-orange-500">
  42              <HeartIcon className="size-12 stroke-[1.75]" />
  43            </div>
  44            <CardDescription className="text-sm leading-5">
  45              Upgrade to Pro or donate to support the development of Alby Hub,
  46              Alby Go and Alby Extension.
  47            </CardDescription>
  48          </div>
  49        </CardContent>
  50        <CardFooter className="justify-end px-6 pt-0">
  51          <LinkButton to="/support-alby" variant="outline">
  52            Become a Supporter
  53          </LinkButton>
  54        </CardFooter>
  55      </Card>
  56    );
  57  }
  58