Added checkout buttons to pro and mini pages (#485)

kscalelabs · Oct 17, 2024 · ac23d97 · ac23d97
1 parent ab9c0fc
commit ac23d97
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 20 deletions.
diff --git a/frontend/src/components/pages/StompyMini.tsx b/frontend/src/components/pages/StompyMini.tsx
@@ -1,13 +1,24 @@
 import React from "react";
 
 import Container from "@/components/Container";
+import CheckoutButton from "@/components/stripe/CheckoutButton";
 
 const StompyMini: React.FC = () => {
   return (
     <Container>
       <div className="flex flex-col items-center justify-center h-full">
         <h1 className="text-2xl font-bold">Stompy Mini</h1>
         <p className="text-xl text-gray-11">PAGE IS UNDER CONSTRUCTION</p>
+        {/* Developer Mode Stompy Mini */}
+        {/* <CheckoutButton
+          productId="prod_R1I3mYImsmLKGe"
+          label="Buy Stompy Mini"
+        /> */}
+        {/* Production Stompy Mini */}
+        <CheckoutButton
+          productId="prod_R1IAtdBONHzXCb"
+          label="Buy Stompy Mini"
+        />
       </div>
     </Container>
   );

diff --git a/frontend/src/components/pages/StompyPro.tsx b/frontend/src/components/pages/StompyPro.tsx
@@ -1,13 +1,18 @@
 import React from "react";
 
 import Container from "@/components/Container";
+import CheckoutButton from "@/components/stripe/CheckoutButton";
 
 const StompyPro: React.FC = () => {
   return (
     <Container>
       <div className="flex flex-col items-center justify-center h-full">
         <h1 className="text-2xl font-bold">Stompy Pro</h1>
         <p className="text-xl text-gray-11">PAGE IS UNDER CONSTRUCTION</p>
+        {/* Developer Mode Stompy Pro */}
+        {/* <CheckoutButton productId="prod_Qyzd8f0gFMis7c" /> */}
+        {/* Production Stompy Pro */}
+        <CheckoutButton productId="prod_R0n3nkCO4aQdlg" />
       </div>
     </Container>
   );

diff --git a/frontend/src/components/stripe/CheckoutButton.tsx b/frontend/src/components/stripe/CheckoutButton.tsx
@@ -92,32 +92,34 @@ const CheckoutButton: React.FC<{ productId: string; label?: string }> = ({
       </Button>
 
       <Drawer open={isDrawerOpen} setOpen={setIsDrawerOpen}>
-        <div className="p-4">
+        <div className="p-4 flex flex-col items-center justify-center">
           <h2 className="text-gray-1 text-2xl font-bold mb-4">
             You must be logged in to place an order.
           </h2>
           <p className="text-gray-3 mb-4">
             This is so you can track and receive updates on your order.
           </p>
-          <Button
-            onClick={() => {
-              setIsDrawerOpen(false);
-              navigate("/login");
-            }}
-            variant="secondary"
-          >
-            Sign In
-          </Button>
-          <Button
-            onClick={() => {
-              setIsDrawerOpen(false);
-              navigate("/signup");
-            }}
-            variant="primary"
-            className="ml-2"
-          >
-            Sign Up
-          </Button>
+          <div className="flex flex-row items-center justify-center">
+            <Button
+              onClick={() => {
+                setIsDrawerOpen(false);
+                navigate("/login");
+              }}
+              variant="secondary"
+            >
+              Sign In
+            </Button>
+            <Button
+              onClick={() => {
+                setIsDrawerOpen(false);
+                navigate("/signup");
+              }}
+              variant="primary"
+              className="ml-2"
+            >
+              Sign Up
+            </Button>
+          </div>
         </div>
       </Drawer>
     </>