Banner.tsx raw

   1  import { XIcon } from "lucide-react";
   2  import { Link } from "react-router";
   3  import ExternalLink from "src/components/ExternalLink";
   4  
   5  import { useAlbyInfo } from "src/hooks/useAlbyInfo";
   6  import { useAlbyMe } from "src/hooks/useAlbyMe";
   7  import { useInfo } from "src/hooks/useInfo";
   8  
   9  export function Banner({ onDismiss }: { onDismiss: () => void }) {
  10    const { data: info } = useInfo();
  11    const { data: albyInfo } = useAlbyInfo();
  12    const { data: albyMe } = useAlbyMe();
  13  
  14    if (!info || !albyInfo) {
  15      return null;
  16    }
  17  
  18    // vss migration (alby cloud only)
  19    // TODO: remove after 2026-01-01
  20    const vssMigrationRequired =
  21      info.oauthRedirect &&
  22      !!albyMe?.subscription.plan_code.includes("buzz") &&
  23      info.vssSupported &&
  24      !info.ldkVssEnabled;
  25  
  26    if (vssMigrationRequired) {
  27      return (
  28        <div className="fixed w-full bg-foreground text-background z-20 py-2 text-sm flex items-center justify-center">
  29          <Link
  30            to={`/settings/backup?dynamic=true`}
  31            className="w-full px-12 md:px-24"
  32          >
  33            <p className="line-clamp-2 md:block whitespace-normal md:whitespace-nowrap overflow-hidden text-ellipsis text-center">
  34              <span className="font-semibold mr-2">
  35                Enable Dynamic Channels Backup
  36              </span>
  37              <span>•</span>
  38              <span className="ml-2">Upgrade your channel backups now</span>
  39            </p>
  40          </Link>
  41          <XIcon
  42            className="absolute right-4 cursor-pointer w-4 text-background"
  43            onClick={onDismiss}
  44          />
  45        </div>
  46      );
  47    }
  48  
  49    return (
  50      <div className="fixed w-full bg-foreground text-background z-20 py-2 text-sm flex items-center justify-center">
  51        <ExternalLink
  52          to={`https://getalby.com/update/hub?version=${info?.version}`}
  53          className="w-full px-12 md:px-24"
  54        >
  55          <p className="line-clamp-2 md:block whitespace-normal md:whitespace-nowrap overflow-hidden text-ellipsis text-center">
  56            <span className="font-semibold mr-2">Update Available</span>
  57            <span>•</span>
  58            <span className="ml-2">{albyInfo.hub.latestReleaseNotes}</span>
  59          </p>
  60        </ExternalLink>
  61        <XIcon
  62          className="absolute right-4 cursor-pointer w-4 text-background"
  63          onClick={onDismiss}
  64        />
  65      </div>
  66    );
  67  }
  68