Subscribe Using Stripe

client/src/components/Capture.jsx

@@ -4,27 +4,49 @@ import { useAuth0 } from '@auth0/auth0-react'
 export default function Capture() {
   const { user } = useAuth0()
   const [metadata, setMetadata] = useState({ customerId: '' })
-  const [userId, setUserId] = useState('userId')
+  const [userInfo, setUserInfo] = useState('userId')
   const [productId, setProductId] = useState(import.meta.env.VITE_STRIPE_PRODUCT_ID)
+  const quarterlyId = import.meta.env.VITE_STRIPE_QUARTERLY_PRODUCT_ID
+  const yearlyId = import.meta.env.VITE_STRIPE_YEARLY_PRODUCT_ID
 
   useEffect(() => {
     if (user) {
       setMetadata(user[`${import.meta.env.VITE_AUTH0_NAMESPACE}/app_metadata`])
-      setUserId(user.sub)
+      setUserInfo({userId: user.sub, email: user.email})
     }
   }, [user])
 
   return (
     <>
+    <h3>You need to subscribe to access the app.</h3>
+    <h5>Select an option below</h5>
       <div>
-        <h3>You need to subscribe</h3>
-        <div>Price is $35 / month</div>
+        <div>Monthly Subscription - $35 / month</div>
         <form action="/stripe/create-checkout-session" method="POST">
-          <input type="hidden" id="customer" name="customer" value={userId} />
+          <input type="hidden" id="customer" name="customer" value={userInfo.userId} />
+          <input type="hidden" id="email" name="email" value={userInfo.email} />
           <input type="hidden" id="productId" name="productId" value={productId} />
           <button type="submit">Checkout now!</button>
         </form>
       </div>
+      <div>
+        <div>Quarterly Subscription - $100 / 3 months (save $5)</div>
+        <form action="/stripe/create-checkout-session" method="POST">
+          <input type="hidden" id="customer" name="customer" value={userInfo.userId} />
+          <input type="hidden" id="email" name="email" value={userInfo.email} />
+          <input type="hidden" id="productId" name="productId" value={quarterlyId} />
+          <button type="submit">Checkout now!</button>
+        </form>
+      </div>
+      <div>
+        <div>Yearly Subscription - $350 / year (save $70)</div>
+        <form action="/stripe/create-checkout-session" method="POST">
+          <input type="hidden" id="customer" name="customer" value={userInfo.userId} />
+          <input type="hidden" id="email" name="email" value={userInfo.email} />
+          <input type="hidden" id="productId" name="productId" value={yearlyId} />
+          <button type="submit">Checkout now!</button>
+        </form>
+      </div>
     </>
   )
 }

client/src/components/Sidebar.jsx

@@ -16,7 +16,9 @@ import { Link } from 'react-router-dom';
 
 const Sidebar = () => {
     // Retrieve the isAdmin context from the Outlet context
-    const { isAdmin } = useOutletContext();
+    // const { isAdmin } = useOutletContext();
+    // temporary sidebar adjustment (how do we get isAdmin)
+    const isAdmin = false
     const { logout } = useAuth0();
 
     const handleLogout = () => {

client/src/routes/AdminDashboard.jsx

@@ -48,7 +48,7 @@ export const AdminDashboard = ({admin}) => {
     const { logout, user } = useAuth0();
     const { getAllFileMetadata } = useFileMetadataContext();
     const navigate = useNavigate()
-    const metadata = user[`${import.meta.env.VITE_AUTH0_NAMESPACE}/user_metadata`]
+    const metadata = user[`${import.meta.env.VITE_AUTH0_NAMESPACE}/app_metadata`]
 
     useEffect(() => {
         getAllFileMetadata()

routes/stripeRouter.js

@@ -43,6 +43,11 @@ stripeRouter.get('/confirm', async (req, res, next) => {
 
 stripeRouter.post('/create-checkout-session', async (req, res, next) => {
   const userId = req.body.customer
+  const userEmail = req.body.email
+  // error handling for userId
+  if (!userId || !userEmail) {
+    res.status(400).send('User ID & Email is required');
+  }
   //   price comes from the frontend form, which stores productIds inside of env variables instead of loooking them up via stripe api
   const subscriptionPriceLookupKey = req.body.productId
 
@@ -58,6 +63,7 @@ stripeRouter.post('/create-checkout-session', async (req, res, next) => {
     // sucess_url provides auth0 userId & stripe session.id
     success_url: `${process.env.STRIPE_SUCCESS_URI}&userId=${userId}&session_id={CHECKOUT_SESSION_ID}`,
     cancel_url: `${process.env.STRIPE_FAILURE_URI}&userId=${userId}`,
+    customer_email: userEmail
   })
 
   res.redirect(303, session.url)