1import { css } from '@emotion/core';
2import { useRouter } from 'next/router';
3import * as React from 'react';
4
5import { P } from '~/components/base/paragraph';
6import * as Constants from '~/constants/theme';
7
8const CONTAINER_STYLE = css`
9  background-color: ${Constants.expoColors.yellow[100]};
10  border: 1px solid ${Constants.expoColors.yellow[200]};
11  padding: 16px;
12  margin-bottom: 1rem;
13  border-radius: 4px;
14
15  div {
16    margin-bottom: 0;
17  }
18`;
19
20export default function VersionedRedirectNotification({ showForQuery = 'redirected' }) {
21  const router = useRouter();
22  const [visible, setVisible] = React.useState(false);
23
24  React.useEffect(() => {
25    if (router.query) {
26      setVisible(router.query.hasOwnProperty(showForQuery));
27    }
28  }, []);
29
30  if (visible) {
31    return (
32      <div css={CONTAINER_STYLE}>
33        <P>
34          ⚠️ The page you are looking for does not exist in this SDK version. It may have been
35          deprecated or added in a newer SDK version.
36        </P>
37      </div>
38    );
39  }
40
41  return null;
42}
43