From c7482be8551cbed8898ed0af15921c74dde4ebc6 Mon Sep 17 00:00:00 2001
From: Abi Raja <abimanyuraja@gmail.com>
Date: Wed, 3 Jan 2024 16:48:04 -0500
Subject: [PATCH] fix up frontend ux for subscriptions

---
 frontend/src/components/OnboardingNote.tsx         | 10 +++++++---
 frontend/src/components/hosted/AvatarDropdown.tsx  |  8 ++------
 frontend/src/components/payments/PricingDialog.tsx | 11 ++++++++---
 frontend/src/store/store.ts                        |  5 +++++
 4 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/OnboardingNote.tsx b/frontend/src/components/OnboardingNote.tsx
index 238bbf0..7a26cda 100644
--- a/frontend/src/components/OnboardingNote.tsx
+++ b/frontend/src/components/OnboardingNote.tsx
@@ -1,14 +1,18 @@
+import { useStore } from "../store/store";
+
 export function OnboardingNote() {
+  const setPricingDialogOpen = useStore((state) => state.setPricingDialogOpen);
+
   return (
     <div className="flex flex-col space-y-4 bg-green-700 p-2 rounded text-stone-200 text-sm">
       <span>
         To use Screenshot to Code,{" "}
         <a
-          className="inline underline hover:opacity-70"
-          href="https://buy.stripe.com/8wM6sre70gBW1nqaEE"
+          className="inline underline hover:opacity-70 cursor-pointer"
+          onClick={() => setPricingDialogOpen(true)}
           target="_blank"
         >
-          buy some credits (100 generations for $15)
+          subscribe (100 generations for $15)
         </a>{" "}
         or use your own OpenAI API key with GPT4 vision access (
         <a
diff --git a/frontend/src/components/hosted/AvatarDropdown.tsx b/frontend/src/components/hosted/AvatarDropdown.tsx
index 65dda6f..2ea8f11 100644
--- a/frontend/src/components/hosted/AvatarDropdown.tsx
+++ b/frontend/src/components/hosted/AvatarDropdown.tsx
@@ -15,6 +15,7 @@ export default function AvatarDropdown() {
   const { user, isLoaded, isSignedIn } = useUser();
   const { signOut } = useClerk();
   const subscriberTier = useStore((state) => state.subscriberTier);
+  const setPricingDialogOpen = useStore((state) => state.setPricingDialogOpen);
   const isFreeUser = subscriberTier === "free";
 
   // If Clerk is still loading or user is logged out, don't show anything
@@ -33,12 +34,7 @@ export default function AvatarDropdown() {
           {/* Free users */}
           {isFreeUser && (
             <DropdownMenuItem asChild={true}>
-              <a
-                href="https://buy.stripe.com/8wM6sre70gBW1nqaEE"
-                target="_blank"
-              >
-                Buy credits
-              </a>
+              <a onClick={() => setPricingDialogOpen(true)}>Get pro</a>
             </DropdownMenuItem>
           )}
           {/* Paying user */}
diff --git a/frontend/src/components/payments/PricingDialog.tsx b/frontend/src/components/payments/PricingDialog.tsx
index 89d20d1..ff07873 100644
--- a/frontend/src/components/payments/PricingDialog.tsx
+++ b/frontend/src/components/payments/PricingDialog.tsx
@@ -11,24 +11,29 @@ import { FaCheckCircle } from "react-icons/fa";
 import Spinner from "../custom-ui/Spinner";
 import useStripeCheckout from "./useStripeCheckout";
 import { Button } from "../ui/button";
+import { useStore } from "../../store/store";
 
 const LOGOS = ["microsoft", "amazon", "mit", "stanford", "bytedance", "baidu"];
 
-const SELL_SUBSCRIPTIONS = false;
+const SELL_SUBSCRIPTIONS = true;
 
 const PricingDialog: React.FC = () => {
   const { checkout, isLoadingCheckout } = useStripeCheckout();
   const [paymentInterval, setPaymentInterval] = React.useState<
     "monthly" | "yearly"
   >("monthly");
+  const [showDialog, setShowDialog] = useStore((state) => [
+    state.isPricingDialogOpen,
+    state.setPricingDialogOpen,
+  ]);
 
   return (
-    <Dialog>
+    <Dialog open={showDialog} onOpenChange={(isOpen) => setShowDialog(isOpen)}>
       <DialogTrigger
         className="fixed z-50 bottom-28 right-5 rounded-md shadow-lg bg-black
           text-white  px-4 text-xs py-3 cursor-pointer"
       >
-        buy 100 code generations for $15
+        get 100 code generations for $15
       </DialogTrigger>
       <DialogContent className="max-w-2xl">
         <DialogHeader>
diff --git a/frontend/src/store/store.ts b/frontend/src/store/store.ts
index 2dfe689..50ffb2e 100644
--- a/frontend/src/store/store.ts
+++ b/frontend/src/store/store.ts
@@ -1,11 +1,16 @@
 import { create } from "zustand";
 
 interface Store {
+  isPricingDialogOpen: boolean;
+  setPricingDialogOpen: (isOpen: boolean) => void;
   subscriberTier: string;
   setSubscriberTier: (tier: string) => void;
 }
 
 export const useStore = create<Store>((set) => ({
+  isPricingDialogOpen: false,
+  setPricingDialogOpen: (isOpen: boolean) =>
+    set(() => ({ isPricingDialogOpen: isOpen })),
   subscriberTier: "",
   setSubscriberTier: (tier: string) => set(() => ({ subscriberTier: tier })),
 }));