feat: ccpa

packages/website/package.json

@@ -22,6 +22,7 @@
     "@vanilla-extract/dynamic": "^2.1.2",
     "compare-versions": "^6.1.1",
     "immer": "^10.1.1",
+    "js-cookie": "^3.0.5",
     "markdown-to-jsx": "^7.5.0",
     "nanostores": "^0.11.3",
     "react": "^18.3.1",
@@ -34,6 +35,7 @@
     "@astrojs/check": "^0.9.3",
     "@astrojs/react": "^3.6.2",
     "@astrojs/vercel": "^7.8.1",
+    "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18",
     "@types/three": "^0.160.0",

packages/website/src/components/Footer.astro

@@ -116,6 +116,9 @@ const gameDefinitions = await fetchGameDefinitions();
           >
             Ad settings
           </Link>
+          <Link href="/legal/do-not-sell-my-personal-information" color="gray">
+            Do not sell my personal information
+          </Link>
         </Flex>
       </Flex>
     </Flex>

packages/website/src/pages/auth/[provider]/_index.tsx

@@ -23,7 +23,15 @@ interface AuthorizeProps {
   provider: AuthProvider;
 }
 
-export function Authorize({ provider }: AuthorizeProps) {
+export function Authorize(props: AuthorizeProps) {
+  return (
+    <App.Provider>
+      <Content {...props} />
+    </App.Provider>
+  );
+}
+
+function Content({ provider }: AuthorizeProps) {
   const mutateApp = App.useMutation();
 
   useEffect(() => {

packages/website/src/pages/legal/do-not-sell-my-personal-information/_index.tsx

@@ -0,0 +1,35 @@
+import { Flex, Switch, Text } from '@radix-ui/themes';
+import Cookies from 'js-cookie';
+import { useEffect, useState } from 'react';
+import { App } from '../../../stores/app';
+
+export function Toggles() {
+  return (
+    <App.Provider>
+      <Content />
+    </App.Provider>
+  );
+}
+
+function Content() {
+  const [doNotSell, setDoNotSell] = useState(false);
+
+  useEffect(() => {
+    setDoNotSell(Cookies.get('CCPAOPTOUT') !== undefined);
+  }, []);
+
+  useEffect(() => {
+    if (doNotSell) {
+      Cookies.set('CCPAOPTOUT', 'true', { sameSite: 'Lax', expires: Infinity });
+    } else {
+      Cookies.remove('CCPAOPTOUT');
+    }
+  }, [doNotSell]);
+
+  return (
+    <Flex gap="2" align="center">
+      <Text>Do not sell my personal information</Text>
+      <Switch checked={doNotSell} onCheckedChange={setDoNotSell} />
+    </Flex>
+  );
+}

packages/website/src/pages/legal/do-not-sell-my-personal-information/index.astro

@@ -0,0 +1,22 @@
+---
+import { Flex, Heading, Text } from '@radix-ui/themes';
+import { PageWrapper } from '../../../components/PageWrapper';
+import RootLayout from '../../../layouts/RootLayout.astro';
+import { Toggles } from './_index';
+---
+
+<RootLayout>
+  <PageWrapper justify="center">
+    <Flex direction="column" gap="1">
+      <Heading>Do not sell my personal information</Heading>
+      <Text>
+        BlitzKit does not sell any of your personal information. However,
+        third-party party services may use your personal information to enhance
+        your experience and to collect analytics. You can stop the sale of your
+        personal data using the option below.
+      </Text>
+    </Flex>
+
+    <Toggles client:load />
+  </PageWrapper>
+</RootLayout>