Safari only has to disgard warning once per session
This commit is contained in:
parent
9abd9f03f2
commit
296dd194a4
|
@ -3,7 +3,7 @@ import { useRouter } from "next/router";
|
|||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useSwipeable } from "react-swipeable";
|
||||
import UAParser from "ua-parser-js";
|
||||
import { useBoolean, useIsClient } from "usehooks-ts";
|
||||
import { useIsClient } from "usehooks-ts";
|
||||
import Script from "next/script";
|
||||
import { layout } from "../../design.config";
|
||||
import { Ico, Icon } from "./Ico";
|
||||
|
@ -69,6 +69,8 @@ export const AppLayout = ({
|
|||
preferredLanguages,
|
||||
selectedThemeMode,
|
||||
subPanelOpen,
|
||||
hasDisgardedSafariWarning,
|
||||
setHasDisgardedSafariWarning,
|
||||
setConfigPanelOpen,
|
||||
setCurrency,
|
||||
setDarkMode,
|
||||
|
@ -144,7 +146,7 @@ export const AppLayout = ({
|
|||
}, [currencyOptions, currencySelect, setCurrency]);
|
||||
|
||||
const isClient = useIsClient();
|
||||
const { value: hasDisgardSafariWarning, setTrue: disgardSafariWarning } = useBoolean(false);
|
||||
|
||||
const isSafari = useMemo<boolean>(() => {
|
||||
if (isClient) {
|
||||
const parser = new UAParser();
|
||||
|
@ -309,7 +311,7 @@ export const AppLayout = ({
|
|||
)}
|
||||
</div>
|
||||
|
||||
<Popup state={isSafari && !hasDisgardSafariWarning} onClose={() => null}>
|
||||
<Popup state={isSafari && !hasDisgardedSafariWarning} onClose={() => null}>
|
||||
<h1 className="text-2xl">Hi, you are using Safari!</h1>
|
||||
<p className="max-w-lg text-center">
|
||||
In most cases this wouldn’t be a problem but our website is—for some obscure
|
||||
|
@ -324,7 +326,7 @@ export const AppLayout = ({
|
|||
text="Let me in regardless"
|
||||
className="mt-8"
|
||||
onClick={() => {
|
||||
disgardSafariWarning();
|
||||
setHasDisgardedSafariWarning(true);
|
||||
sendAnalytics("Safari", "Disgard warning");
|
||||
}}
|
||||
/>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, { ReactNode, useContext, useEffect, useLayoutEffect, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { useLocalStorage } from "usehooks-ts";
|
||||
import { useLocalStorage, useSessionStorage } from "usehooks-ts";
|
||||
import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
|
||||
import { LibraryItemUserStatus, RequiredNonNullable } from "types/types";
|
||||
import { useDarkMode } from "hooks/useDarkMode";
|
||||
|
@ -72,6 +72,11 @@ interface AppLayoutState {
|
|||
langui: Langui;
|
||||
languages: Languages;
|
||||
currencies: Currencies;
|
||||
|
||||
hasDisgardedSafariWarning: boolean;
|
||||
setHasDisgardedSafariWarning: React.Dispatch<
|
||||
React.SetStateAction<AppLayoutState["hasDisgardedSafariWarning"]>
|
||||
>;
|
||||
}
|
||||
|
||||
const initialState: RequiredNonNullable<AppLayoutState> = {
|
||||
|
@ -134,6 +139,9 @@ const initialState: RequiredNonNullable<AppLayoutState> = {
|
|||
currencies: [],
|
||||
languages: [],
|
||||
langui: {},
|
||||
|
||||
hasDisgardedSafariWarning: false,
|
||||
setHasDisgardedSafariWarning: () => null,
|
||||
};
|
||||
|
||||
const AppContext = React.createContext<AppLayoutState>(initialState);
|
||||
|
@ -192,6 +200,11 @@ export const AppContextProvider = (props: Props): JSX.Element => {
|
|||
initialState.libraryItemUserStatus
|
||||
);
|
||||
|
||||
const [hasDisgardedSafariWarning, setHasDisgardedSafariWarning] = useSessionStorage(
|
||||
"hasDisgardedSafariWarning",
|
||||
initialState.hasDisgardedSafariWarning
|
||||
);
|
||||
|
||||
const toggleSubPanelOpen = () => {
|
||||
setSubPanelOpen((current) => (isDefined(current) ? !current : current));
|
||||
};
|
||||
|
@ -294,6 +307,7 @@ export const AppContextProvider = (props: Props): JSX.Element => {
|
|||
screenWidth,
|
||||
contentPanelWidth,
|
||||
subPanelWidth,
|
||||
hasDisgardedSafariWarning,
|
||||
setSubPanelOpen,
|
||||
setConfigPanelOpen,
|
||||
setMainPanelReduced,
|
||||
|
@ -318,6 +332,7 @@ export const AppContextProvider = (props: Props): JSX.Element => {
|
|||
setScreenWidth,
|
||||
setContentPanelWidth,
|
||||
setSubPanelWidth,
|
||||
setHasDisgardedSafariWarning,
|
||||
languages,
|
||||
langui,
|
||||
currencies,
|
||||
|
|
|
@ -13,6 +13,3 @@ export const prettyTerminalBoxedTitle = (string: string | null | undefined): str
|
|||
│ ${string} │
|
||||
╰${"─".repeat(string.length + 2)}╯`
|
||||
: "";
|
||||
|
||||
export const prettyTerminalTitle = (title: string | null | undefined): string =>
|
||||
`\n\n-= ${title?.toUpperCase()} =-`;
|
||||
|
|
Loading…
Reference in New Issue