feat: agreements

src/app/components/Checks.tsx

@@ -1,18 +1,22 @@
 'use client';
 
-import { AlertDialog, Button, Flex } from '@radix-ui/themes';
+import { AlertDialog, Button, Flex, Heading, Text } from '@radix-ui/themes';
 import { useEffect, useState } from 'react';
+import { Link } from '../../components/Link';
 import { extendAuth } from '../../core/blitz/extendAuth';
 import { logout } from '../../core/blitz/logout';
 import isDev from '../../core/blitzkit/isDev';
 import { isLocalhost } from '../../core/blitzkit/isLocalhost';
-import { useApp } from '../../stores/app';
+import { CURRENT_POLICIES_AGREEMENT_INDEX, useApp } from '../../stores/app';
 
 const DEV_BUILD_AGREEMENT_COOLDOWN = 8 * 24 * 60 * 60 * 1000;
 
 export function Checks() {
   const [showDevBuildAlert, setShowDevBuildAlert] = useState(false);
   const login = useApp((state) => state.login);
+  const policiesAgreementIndex = useApp(
+    (state) => state.policiesAgreementIndex,
+  );
 
   useEffect(() => {
     setShowDevBuildAlert(
@@ -37,31 +41,96 @@ export function Checks() {
   });
 
   return (
-    <AlertDialog.Root open={showDevBuildAlert}>
+    <>
-      <AlertDialog.Content>
+      <AlertDialog.Root open={showDevBuildAlert}>
-        <AlertDialog.Title>Experimental version!</AlertDialog.Title>
+        <AlertDialog.Content>
-        <AlertDialog.Description>
+          <AlertDialog.Title>Experimental version!</AlertDialog.Title>
-          This version may have a lot of issues. Report issues to{' '}
+          <AlertDialog.Description>
-          <a href="https://discord.gg/nDt7AjGJQH" target="_blank">
+            This version may have a lot of issues. Report issues to{' '}
-            the official Discord server
+            <a href="https://discord.gg/nDt7AjGJQH" target="_blank">
-          </a>
+              the official Discord server
-          . Also consider using{' '}
+            </a>
-          <a href="https://blitzkit.app/">the more stable release version</a>.
+            . Also consider using{' '}
-          You will be asked again in 8 days.
+            <a href="https://blitzkit.app/">the more stable release version</a>.
-        </AlertDialog.Description>
+            You will be asked again in 8 days.
+          </AlertDialog.Description>
 
-        <Flex justify="end">
+          <Flex justify="end">
-          <Button
+            <Button
-            variant="solid"
+              variant="solid"
-            onClick={() => {
+              onClick={() => {
-              setShowDevBuildAlert(false);
+                setShowDevBuildAlert(false);
-              useApp.setState({ devBuildAgreementTime: Date.now() });
+                useApp.setState({ devBuildAgreementTime: Date.now() });
+              }}
+            >
+              Continue
+            </Button>
+          </Flex>
+        </AlertDialog.Content>
+      </AlertDialog.Root>
+
+      {policiesAgreementIndex !== CURRENT_POLICIES_AGREEMENT_INDEX && (
+        <Flex
+          align="end"
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            background: 'var(--color-overlay)',
+            zIndex: 2,
+          }}
+        >
+          <Flex
+            p="8"
+            style={{
+              width: '100%',
+              background: 'var(--color-panel-solid)',
             }}
+            justify="center"
           >
-            Continue
+            <Flex
-          </Button>
+              align="start"
+              gap="4"
+              style={{
+                maxWidth: 640 * 2,
+              }}
+              direction="column"
+            >
+              <Flex direction="column" gap="2">
+                <Heading>
+                  {policiesAgreementIndex === -1
+                    ? "BlitzKit's cookies"
+                    : "BlitzKit's policies have changed"}
+                </Heading>
+
+                <Text>
+                  This website utilizes cookies to perform analytics and
+                  personalize your experience. You can learn more through{' '}
+                  <Link href="/legal/privacy-policy">our privacy policy</Link>.
+                  You may opt out of personalized advertizement by visiting{' '}
+                  <Link href="https://www.google.com/settings/ads">
+                    Google Ad Settings
+                  </Link>
+                  . By using BlitzKit, you also agree to our{' '}
+                  <Link href="/legal/terms-of-service">terms of service</Link>.
+                </Text>
+              </Flex>
+
+              <Button
+                onClick={() => {
+                  useApp.setState({
+                    policiesAgreementIndex: CURRENT_POLICIES_AGREEMENT_INDEX,
+                  });
+                }}
+              >
+                I Agree
+              </Button>
+            </Flex>
+          </Flex>
         </Flex>
-      </AlertDialog.Content>
+      )}
-    </AlertDialog.Root>
+    </>
   );
 }

src/stores/app.ts

@@ -13,13 +13,17 @@ export interface App {
   devBuildAgreementTime: number;
   developerMode: boolean;
   login?: Login;
+  policiesAgreementIndex: number;
 }
 
+export const CURRENT_POLICIES_AGREEMENT_INDEX = 0;
+
 export const useApp = create<App>()(
   persist(
     (set) => ({
       devBuildAgreementTime: 0,
       developerMode: false,
+      policiesAgreementIndex: -1,
     }),
     { name: 'app', merge: (a, b) => merge(b, a) },
   ),