first commit

common/resources/client/ui/cookie-notice/cookie-law-countries.ts

@@ -0,0 +1,32 @@
+export const COOKIE_LAW_COUNTRIES = [
+  'AT',
+  'BE',
+  'BG',
+  'BR',
+  'CY',
+  'CZ',
+  'DE',
+  'DK',
+  'EE',
+  'EL',
+  'ES',
+  'FI',
+  'FR',
+  'GB',
+  'HR',
+  'HU',
+  'IE',
+  'IT',
+  'LT',
+  'LU',
+  'LV',
+  'MT',
+  'NL',
+  'NO',
+  'PL',
+  'PT',
+  'RO',
+  'SE',
+  'SI',
+  'SK',
+];

common/resources/client/ui/cookie-notice/cookie-notice.tsx

@@ -0,0 +1,68 @@
+import clsx from 'clsx';
+import {Trans} from '../../i18n/trans';
+import {CustomMenuItem} from '../../menus/custom-menu';
+import {Button} from '../buttons/button';
+import {useSettings} from '../../core/settings/use-settings';
+import {useState} from 'react';
+import {getBootstrapData} from '@common/core/bootstrap-data/use-backend-bootstrap-data';
+import {useCookie} from '@common/utils/hooks/use-cookie';
+
+export function CookieNotice() {
+  const {
+    cookie_notice: {position, enable},
+  } = useSettings();
+
+  const [, setCookie] = useCookie('cookie_notice');
+
+  const [alreadyAccepted, setAlreadyAccepted] = useState(() => {
+    return !getBootstrapData().show_cookie_notice;
+  });
+
+  if (!enable || alreadyAccepted) {
+    return null;
+  }
+
+  return (
+    <div
+      className={clsx(
+        'fixed z-50 flex w-full justify-center gap-14 bg-toast p-14 text-sm text-white shadow max-md:flex-col md:items-center md:gap-30',
+        position == 'top' ? 'top-0' : 'bottom-0',
+      )}
+    >
+      <Trans
+        message="We use cookies to optimize site functionality and provide you with the
+      best possible experience."
+      />
+      <InfoLink />
+      <Button
+        variant="flat"
+        color="primary"
+        size="xs"
+        className="max-w-100"
+        onClick={() => {
+          setCookie('true', {days: 30, path: '/'});
+          setAlreadyAccepted(true);
+        }}
+      >
+        <Trans message="OK" />
+      </Button>
+    </div>
+  );
+}
+
+function InfoLink() {
+  const {
+    cookie_notice: {button},
+  } = useSettings();
+
+  if (!button?.label) {
+    return null;
+  }
+
+  return (
+    <CustomMenuItem
+      className={() => 'text-primary-light hover:underline'}
+      item={button}
+    />
+  );
+}

common/resources/client/ui/cookie-notice/use-user-is-from-eu.ts

@@ -0,0 +1,35 @@
+import {useQuery} from '@tanstack/react-query';
+import axios from 'axios';
+import {COOKIE_LAW_COUNTRIES} from './cookie-law-countries';
+
+const endpoint = 'https://freegeoip.app/json';
+
+interface Response {
+  userIsFromEu: boolean;
+}
+
+interface Props {
+  enabled: boolean;
+}
+export function useUserIsFromEu({enabled}: Props) {
+  return useQuery({
+    queryKey: [endpoint],
+    queryFn: () => checkIfFromEu(),
+    staleTime: Infinity,
+    enabled,
+  });
+}
+
+function checkIfFromEu(): Promise<Response> {
+  return axios
+    .get(endpoint)
+    .then(response => {
+      const userIsFromEu = COOKIE_LAW_COUNTRIES.includes(
+        response.data.country_code,
+      );
+      return {userIsFromEu};
+    })
+    .catch(() => {
+      return {userIsFromEu: true};
+    });
+}