s.setLocation);
- const currentLocation = useBannerStore((s) => s.location);
- const loc = props.location ?? null;
- const { pathname } = useLocation();
- const isEligible = !(
- /CrOS/.test(navigator.userAgent) ||
- /TV/.test(navigator.userAgent) ||
- /iPhone|iPad|iPod/i.test(navigator.userAgent)
- );
-
- useEffect(() => {
- if (loc) {
- setLocation(loc);
- return () => {
- setLocation(null);
- };
- }
- }, [setLocation, loc]);
-
- const hideBannerFlag = sessionStorage.getItem("hideBanner");
- if (hideBannerFlag) {
- return null;
- }
-
- if (currentLocation !== loc || pathname === "/onboarding/extension")
- return null;
-
- // Show the banner with a 36.5% chance or not if users don't meet requirements
- if (isEligible && Math.random() < 0.365) {
- let bannerText = "";
- switch (props.extensionState) {
- case "noperms":
- bannerText = "The extension does'nt have the necessary permissions.";
- break;
- case "outdated":
- bannerText =
- "Your extension is outdated. Please update it
here.";
- break;
- case "disallowed":
- bannerText =
- "The extension is not enabled, click
here to fix it.";
- break;
- case "failed":
- bannerText =
- "The extension is broken... Please click
here.";
- break;
- default:
- bannerText =
- "You don't have the extension! Download it
here for better quality.";
- break;
- }
-
- return (
-
- navigate("/onboarding/extension")}
- style={{ cursor: "pointer" }}
- >
- ,
- }}
- />
-
-
- );
- }
- return null;
-}
-
export function BannerLocation(props: { location?: string }) {
const { t } = useTranslation();
const isOnline = useBannerStore((s) => s.isOnline);