useBanner.tsx raw

   1  import { compare } from "compare-versions";
   2  import React from "react";
   3  import { useAlbyInfo } from "src/hooks/useAlbyInfo";
   4  import { useAlbyMe } from "src/hooks/useAlbyMe";
   5  import { useInfo } from "src/hooks/useInfo";
   6  
   7  export function useBanner() {
   8    const { data: info } = useInfo();
   9    const { data: albyInfo } = useAlbyInfo();
  10    const { data: albyMe } = useAlbyMe();
  11    const [showBanner, setShowBanner] = React.useState(false);
  12    const isDismissedRef = React.useRef(false);
  13  
  14    React.useEffect(() => {
  15      if (!info || !albyInfo || info.hideUpdateBanner || isDismissedRef.current) {
  16        return;
  17      }
  18  
  19      // vss migration (alby cloud only)
  20      // TODO: remove after 2026-08-01
  21      const vssMigrationRequired =
  22        info.oauthRedirect &&
  23        !!albyMe?.subscription.plan_code.includes("buzz") &&
  24        info.vssSupported &&
  25        !info.ldkVssEnabled;
  26  
  27      const upToDate =
  28        Boolean(info.version) &&
  29        info.version.startsWith("v") &&
  30        compare(info.version.substring(1), albyInfo.hub.latestVersion, ">=");
  31  
  32      setShowBanner(!upToDate || vssMigrationRequired);
  33    }, [info, albyInfo, albyMe?.subscription.plan_code]);
  34  
  35    const dismissBanner = () => {
  36      isDismissedRef.current = true;
  37      setShowBanner(false);
  38    };
  39  
  40    return { showBanner, dismissBanner };
  41  }
  42