diff --git a/src/components/CookiesBanner/index.tsx b/src/components/CookiesBanner/index.tsx index 2bae1916..90612465 100644 --- a/src/components/CookiesBanner/index.tsx +++ b/src/components/CookiesBanner/index.tsx @@ -14,6 +14,7 @@ import { loadGoogleAnalytics, removeCookies } from 'src/utils/googleAnalytics' import { closeIntercom, isIntercomLoaded, loadIntercom } from 'src/utils/intercom' import AlertRedIcon from './assets/alert-red.svg' import IntercomIcon from './assets/intercom.png' +import { useSafeAppUrl } from 'src/logic/hooks/useSafeAppUrl' const isDesktop = process.env.REACT_APP_BUILD_FOR_DESKTOP @@ -97,14 +98,23 @@ interface CookiesBannerFormProps { const CookiesBanner = (): ReactElement => { const classes = useStyles() const dispatch = useRef(useDispatch()) + const intercomLoaded = isIntercomLoaded() const [showAnalytics, setShowAnalytics] = useState(false) const [showIntercom, setShowIntercom] = useState(false) const [localNecessary, setLocalNecessary] = useState(true) const [localAnalytics, setLocalAnalytics] = useState(false) const [localIntercom, setLocalIntercom] = useState(false) + const { getAppUrl } = useSafeAppUrl() const showBanner = useSelector(cookieBannerOpen) + const newAppUrl = getAppUrl() + + useEffect(() => { + if (intercomLoaded && newAppUrl !== null) { + closeIntercom() + } + }, [newAppUrl, intercomLoaded]) useEffect(() => { async function fetchCookiesFromStorage() { @@ -171,7 +181,7 @@ const CookiesBanner = (): ReactElement => { dispatch.current(openCookieBanner({ cookieBannerOpen: false })) } - if (showIntercom) { + if (showIntercom && newAppUrl === null) { loadIntercom() } diff --git a/src/logic/hooks/useSafeAppUrl.tsx b/src/logic/hooks/useSafeAppUrl.tsx new file mode 100644 index 00000000..a0c672cb --- /dev/null +++ b/src/logic/hooks/useSafeAppUrl.tsx @@ -0,0 +1,19 @@ +import { useLocation } from 'react-router-dom' +import { useCallback } from 'react' + +type AppUrlReturnType = { + getAppUrl: () => string | null +} + +export const useSafeAppUrl = (): AppUrlReturnType => { + const { search } = useLocation() + + const getAppUrl = useCallback(() => { + const query = new URLSearchParams(search) + return query.get('appUrl') + }, [search]) + + return { + getAppUrl, + } +} diff --git a/src/routes/safe/components/Apps/index.tsx b/src/routes/safe/components/Apps/index.tsx index 5fa825c0..f9301b78 100644 --- a/src/routes/safe/components/Apps/index.tsx +++ b/src/routes/safe/components/Apps/index.tsx @@ -1,20 +1,14 @@ import React from 'react' - -import { useLocation } from 'react-router-dom' +import { useSafeAppUrl } from 'src/logic/hooks/useSafeAppUrl' import AppFrame from './components/AppFrame' import AppsList from './components/AppsList' -const useQuery = () => { - return new URLSearchParams(useLocation().search) -} - const Apps = (): React.ReactElement => { - const query = useQuery() - const appUrl = query.get('appUrl') - - if (appUrl) { - return + const { getAppUrl } = useSafeAppUrl() + const url = getAppUrl() + if (url) { + return } else { return }