add a subscription pricing table

frontend/src/components/payments/PricingDialog.tsx

@@ -10,11 +10,17 @@ import {
 import { FaCheckCircle } from "react-icons/fa";
 import Spinner from "../custom-ui/Spinner";
 import useStripeCheckout from "./useStripeCheckout";
+import { Button } from "../ui/button";
 
 const LOGOS = ["microsoft", "amazon", "mit", "stanford", "bytedance", "baidu"];
 
+const SELL_SUBSCRIPTIONS = false;
+
 const PricingDialog: React.FC = () => {
   const { checkout, isLoadingCheckout } = useStripeCheckout();
+  const [paymentInterval, setPaymentInterval] = React.useState<
+    "monthly" | "yearly"
+  >("monthly");
 
   return (
     <Dialog>
@@ -31,15 +37,32 @@ const PricingDialog: React.FC = () => {
           </DialogTitle>
         </DialogHeader>
 
+        {SELL_SUBSCRIPTIONS && (
+          <div className="flex justify-center gap-x-2 mt-2">
+            <Button
+              variant={paymentInterval === "monthly" ? "default" : "secondary"}
+              onClick={() => setPaymentInterval("monthly")}
+            >
+              Monthly
+            </Button>
+            <Button
+              variant={paymentInterval === "yearly" ? "default" : "secondary"}
+              onClick={() => setPaymentInterval("yearly")}
+            >
+              Yearly (2 months free)
+            </Button>
+          </div>
+        )}
+
         <div className="flex justify-center items-center">
           <div className="grid grid-cols-2 gap-8 p-2">
-            {/* Free Plan */}
+            {!SELL_SUBSCRIPTIONS && (
+              <>
                 <div className="bg-white rounded-lg shadow p-6">
                   <h2 className="font-semibold">Hobby</h2>
                   <p className="text-gray-500">Great to start</p>
                   <div className="my-4">
                     <span className="text-4xl font-bold">$15</span>
-                {/* <span className="text-gray-500"> / month</span> */}
                   </div>
                   <a
                     href="https://buy.stripe.com/8wM6sre70gBW1nqaEE"
@@ -61,7 +84,6 @@ const PricingDialog: React.FC = () => {
                   </ul>
                 </div>
 
-            {/* Economy Plan */}
                 <div className="bg-white rounded-lg shadow p-6">
                   <h2 className="font-semibold">Pro</h2>
                   <p className="text-gray-500">Higher limits</p>
@@ -90,19 +112,33 @@ const PricingDialog: React.FC = () => {
                     </li>
                   </ul>
                 </div>
+              </>
+            )}
 
-            {/* Economy Plan */}
+            {SELL_SUBSCRIPTIONS && (
+              <>
                 <div className="bg-white rounded-lg shadow p-6">
                   <h2 className="font-semibold">Hobby</h2>
-              <p className="text-gray-500">Higher limits</p>
+                  <p className="text-gray-500">Great to start</p>
                   <div className="my-4">
-                <span className="text-4xl font-bold">$15</span>
+                    <span className="text-4xl font-bold">
-                <span className="text-gray-500"> / month</span>
+                      {paymentInterval === "monthly" ? "$15" : "$150"}
+                    </span>
+                    <span className="text-gray-500">
+                      {paymentInterval === "monthly" ? "/ month" : "/ year"}
+                    </span>
                   </div>
 
                   <button
-                className="bg-black text-white rounded py-2 px-4 w-full text-sm"
+                    className="bg-black text-white rounded py-2 px-4 w-full text-sm
-                onClick={() => checkout("test")}
+                    flex justify-center items-center gap-x-2"
+                    onClick={() =>
+                      checkout(
+                        paymentInterval === "monthly"
+                          ? "hobby_monthly"
+                          : "hobby_yearly"
+                      )
+                    }
                   >
                     Subscribe {isLoadingCheckout && <Spinner />}
                   </button>
@@ -110,7 +146,45 @@ const PricingDialog: React.FC = () => {
                   <ul className="mt-4 space-y-2">
                     <li className="flex items-center">
                       <FaCheckCircle className="text-black mr-2" />
-                  300 credits
+                      100 credits / mo
+                    </li>
+                    <li className="flex items-center">
+                      <FaCheckCircle className="text-black mr-2" />
+                      Email support
+                    </li>
+                  </ul>
+                </div>
+
+                <div className="bg-white rounded-lg shadow p-6">
+                  <h2 className="font-semibold">Pro</h2>
+                  <p className="text-gray-500">Higher limits</p>
+                  <div className="my-4">
+                    <span className="text-4xl font-bold">
+                      {paymentInterval === "monthly" ? "$40" : "$400"}
+                    </span>
+                    <span className="text-gray-500">
+                      {paymentInterval === "monthly" ? "/ month" : "/ year"}
+                    </span>
+                  </div>
+
+                  <button
+                    className="bg-black text-white rounded py-2 px-4 w-full text-sm 
+                      flex justify-center items-center gap-x-2"
+                    onClick={() =>
+                      checkout(
+                        paymentInterval === "monthly"
+                          ? "pro_monthly"
+                          : "pro_yearly"
+                      )
+                    }
+                  >
+                    Subscribe {isLoadingCheckout && <Spinner />}
+                  </button>
+
+                  <ul className="mt-4 space-y-2">
+                    <li className="flex items-center">
+                      <FaCheckCircle className="text-black mr-2" />
+                      300 credits / mo
                     </li>
                     <li className="flex items-center">
                       <FaCheckCircle className="text-black mr-2" />
@@ -118,10 +192,18 @@ const PricingDialog: React.FC = () => {
                     </li>
                   </ul>
                 </div>
+              </>
+            )}
           </div>
         </div>
         <p className="text-center text-xs text-gray-600 mt-1">
           1 credit = 1 code generation. Unused credits expire after 90 days.
+          {SELL_SUBSCRIPTIONS && (
+            <>
+              <br />
+              Cancel anytime.
+            </>
+          )}
         </p>
 
         <DialogFooter></DialogFooter>

frontend/src/components/payments/useStripeCheckout.ts

@@ -28,7 +28,7 @@ export default function useStripeCheckout() {
 
       // Create a Checkout Session
       const res: CreateCheckoutSessionResponse = await authenticatedFetch(
-        `${SAAS_BACKEND_URL}/create_checkout_session` +
+        `${SAAS_BACKEND_URL}/payments/create_checkout_session` +
           `?price_lookup_key=${priceLookupKey}` +
           `&rewardful_referral_id=${rewardfulReferralId}`,
         "POST"