From 3bc25680529cdb6b5d407c8332e820aeb2e0b948 Mon Sep 17 00:00:00 2001
From: vagusx <vagusxl@gmail.com>
Date: Tue, 21 Nov 2023 16:55:46 +0800
Subject: [PATCH 1/4] feat: Add local storage functionality to track acceptance
 of terms of service

---
 frontend/src/components/TermsOfServiceDialog.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/TermsOfServiceDialog.tsx b/frontend/src/components/TermsOfServiceDialog.tsx
index 12b90ee..de079b0 100644
--- a/frontend/src/components/TermsOfServiceDialog.tsx
+++ b/frontend/src/components/TermsOfServiceDialog.tsx
@@ -8,8 +8,10 @@ import {
 } from "@/components/ui/dialog";
 import { useState } from "react";
 
+const termAcceptedCacheKey = 'term_of_service_accepted';
+
 function TermsOfServiceDialog() {
-  const [isOpen, setIsOpen] = useState(true);
+  const [isOpen, setIsOpen] = useState(() => !localStorage.getItem(termAcceptedCacheKey));
 
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
@@ -40,7 +42,9 @@ function TermsOfServiceDialog() {
         </div>
 
         <DialogFooter>
-          <DialogClose>Agree</DialogClose>
+          <DialogClose onClick={() => {
+            localStorage.setItem(termAcceptedCacheKey, 'true');
+          }}>Agree</DialogClose>
         </DialogFooter>
       </DialogContent>
     </Dialog>

From 9b9db3ac07ff01decb7d95179384b8a0911523a8 Mon Sep 17 00:00:00 2001
From: vagusx <vagusxl@gmail.com>
Date: Tue, 21 Nov 2023 20:25:19 +0800
Subject: [PATCH 2/4] feat: use usePersistedState

---
 backend/main.py                                 |  2 +-
 frontend/src/App.tsx                            | 10 +++++++++-
 .../src/components/TermsOfServiceDialog.tsx     | 17 +++++++----------
 frontend/src/types.ts                           |  1 +
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/backend/main.py b/backend/main.py
index 4eb09fa..396fefa 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -33,7 +33,7 @@ app.add_middleware(
 
 # Useful for debugging purposes when you don't want to waste GPT4-Vision credits
 # Setting to True will stream a mock response instead of calling the OpenAI API
-SHOULD_MOCK_AI_RESPONSE = False
+SHOULD_MOCK_AI_RESPONSE = True
 
 
 app.include_router(screenshot.router)
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c2ec3fe..1df8b05 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -40,6 +40,7 @@ function App() {
       screenshotOneApiKey: null,
       isImageGenerationEnabled: true,
       editorTheme: "cobalt",
+      termOfServiceAccepted: false,
     },
     "setting"
   );
@@ -111,10 +112,17 @@ function App() {
     setUpdateInstruction("");
   }
 
+  const onTermDialogOpenChange = (open: boolean) => {
+    setSettings((s) => ({
+      ...s,
+      termOfServiceAccepted: !open,
+    }));
+  };
+
   return (
     <div className="mt-2">
       {IS_RUNNING_ON_CLOUD && <PicoBadge />}
-      {IS_RUNNING_ON_CLOUD && <TermsOfServiceDialog />}
+      {IS_RUNNING_ON_CLOUD && <TermsOfServiceDialog open={!settings.termOfServiceAccepted} onOpenChange={onTermDialogOpenChange} />}
 
       <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-96 lg:flex-col">
         <div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6">
diff --git a/frontend/src/components/TermsOfServiceDialog.tsx b/frontend/src/components/TermsOfServiceDialog.tsx
index de079b0..2bd3178 100644
--- a/frontend/src/components/TermsOfServiceDialog.tsx
+++ b/frontend/src/components/TermsOfServiceDialog.tsx
@@ -6,15 +6,14 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { useState } from "react";
 
-const termAcceptedCacheKey = 'term_of_service_accepted';
-
-function TermsOfServiceDialog() {
-  const [isOpen, setIsOpen] = useState(() => !localStorage.getItem(termAcceptedCacheKey));
+const TermsOfServiceDialog: React.FC<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}> = ({ open, onOpenChange }) => {
 
   return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+    <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle className="mb-4">Terms of Service</DialogTitle>
@@ -42,13 +41,11 @@ function TermsOfServiceDialog() {
         </div>
 
         <DialogFooter>
-          <DialogClose onClick={() => {
-            localStorage.setItem(termAcceptedCacheKey, 'true');
-          }}>Agree</DialogClose>
+          <DialogClose>Agree</DialogClose>
         </DialogFooter>
       </DialogContent>
     </Dialog>
   );
-}
+};
 
 export default TermsOfServiceDialog;
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 6f44e9f..6ffabec 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -3,4 +3,5 @@ export interface Settings {
   screenshotOneApiKey: string | null;
   isImageGenerationEnabled: boolean;
   editorTheme: string;
+  termOfServiceAccepted: boolean;
 }

From 8199f14273a7eeb2e0f320f0fb482ea9c8e29989 Mon Sep 17 00:00:00 2001
From: vagusx <vagusxl@gmail.com>
Date: Wed, 22 Nov 2023 10:40:47 +0800
Subject: [PATCH 3/4] chore: clean up

---
 backend/main.py      |  2 +-
 frontend/src/App.tsx | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/backend/main.py b/backend/main.py
index aeb58da..72b4dd7 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -33,7 +33,7 @@ app.add_middleware(
 
 # Useful for debugging purposes when you don't want to waste GPT4-Vision credits
 # Setting to True will stream a mock response instead of calling the OpenAI API
-SHOULD_MOCK_AI_RESPONSE = True
+SHOULD_MOCK_AI_RESPONSE = False
 
 
 app.include_router(screenshot.router)
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d847285..73afbc6 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -120,22 +120,22 @@ function App() {
     setUpdateInstruction("");
   }
 
-  const onTermDialogOpenChange = (open: boolean) => {
+  const doCopyCode = useCallback(() => {
+    copy(generatedCode);
+    toast.success("Copied to clipboard");
+  }, [generatedCode]);
+
+  const handleTermDialogOpenChange = (open: boolean) => {
     setSettings((s) => ({
       ...s,
       termOfServiceAccepted: !open,
     }));
   };
 
-  const doCopyCode = useCallback(() => {
-    copy(generatedCode);
-    toast.success("Copied to clipboard");
-  }, [generatedCode]);
-
   return (
     <div className="mt-2">
       {IS_RUNNING_ON_CLOUD && <PicoBadge />}
-      {IS_RUNNING_ON_CLOUD && <TermsOfServiceDialog open={!settings.termOfServiceAccepted} onOpenChange={onTermDialogOpenChange} />}
+      {IS_RUNNING_ON_CLOUD && <TermsOfServiceDialog open={!settings.termOfServiceAccepted} onOpenChange={handleTermDialogOpenChange} />}
 
       <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-96 lg:flex-col">
         <div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6">

From 55be6a1595f01a94ed4e4dac93c276311442affd Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Tue, 21 Nov 2023 22:17:36 -0500
Subject: [PATCH 4/4] update variable name

---
 frontend/src/App.tsx  | 6 +++---
 frontend/src/types.ts | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 756bb57..5c946dc 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -42,7 +42,7 @@ function App() {
       screenshotOneApiKey: null,
       isImageGenerationEnabled: true,
       editorTheme: EditorTheme.COBALT,
-      termOfServiceAccepted: false,
+      isTermOfServiceAccepted: false,
     },
     "setting"
   );
@@ -128,7 +128,7 @@ function App() {
   const handleTermDialogOpenChange = (open: boolean) => {
     setSettings((s) => ({
       ...s,
-      termOfServiceAccepted: !open,
+      isTermOfServiceAccepted: !open,
     }));
   };
 
@@ -137,7 +137,7 @@ function App() {
       {IS_RUNNING_ON_CLOUD && <PicoBadge />}
       {IS_RUNNING_ON_CLOUD && (
         <TermsOfServiceDialog
-          open={!settings.termOfServiceAccepted}
+          open={!settings.isTermOfServiceAccepted}
           onOpenChange={handleTermDialogOpenChange}
         />
       )}
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index f050eac..d2ea696 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -8,7 +8,7 @@ export interface Settings {
   screenshotOneApiKey: string | null;
   isImageGenerationEnabled: boolean;
   editorTheme: EditorTheme;
-  termOfServiceAccepted: boolean;
+  isTermOfServiceAccepted: boolean; // Only relevant for hosted version
 }
 
 export enum AppState {