diff --git a/src/components/settingComponents/UpgradeBox.jsx b/src/components/settingComponents/UpgradeBox.jsx index 3611689b..f66df36e 100644 --- a/src/components/settingComponents/UpgradeBox.jsx +++ b/src/components/settingComponents/UpgradeBox.jsx @@ -1,187 +1,188 @@ -import request from '@/utils/request'; -import { loadStripe } from '@stripe/stripe-js'; -const STRIPE_KEY = process.env.NEXT_PUBLIC_APP_STRIPE_KEY; -import { useState } from 'react'; -import { motion } from 'framer-motion'; -const subscriptionTypes = ['PRO_MONTHLY', 'PRO_YEARLY']; -import { Context } from '@/context'; -import { useContext } from 'react'; +import request from '@/utils/request' +import { loadStripe } from '@stripe/stripe-js' +import { useState, useContext } from 'react' +import { motion } from 'framer-motion' +import { Context } from '@/context' +const STRIPE_KEY = process.env.NEXT_PUBLIC_APP_STRIPE_KEY +const subscriptionTypes = ['PRO_MONTHLY', 'PRO_YEARLY'] -export default function UpgradeBox() { - const { role } = useContext(Context); - const [loading, setLoading] = useState(-1); +export default function UpgradeBox () { + const { role } = useContext(Context) + const [loading, setLoading] = useState(-1) const redirectToCheckout = async (subIdx) => { - setLoading(subIdx); + setLoading(subIdx) try { - const stripe = await loadStripe(STRIPE_KEY); - const subscriptionType = subscriptionTypes[subIdx]; + const stripe = await loadStripe(STRIPE_KEY) + const subscriptionType = subscriptionTypes[subIdx] const body = { subType: subscriptionType, quantity: 1, operation: 'subscription', - data: {}, - }; + data: {} + } - const url = `${process.env.NEXT_PUBLIC_API_URL}/payments/stripe/create-checkout-session`; - const session = await request(url, 'POST', body); + const url = `${process.env.NEXT_PUBLIC_API_URL}/payments/stripe/create-checkout-session` + const session = await request(url, 'POST', body) if (session.error) { - console.log('Creating the stripe session failed'); - return; + console.log('Creating the stripe session failed') + return } const result = await stripe.redirectToCheckout({ - sessionId: session.sessionId, - }); + sessionId: session.sessionId + }) if (result.error) { - console.log(result.error.message); + console.log(result.error.message) } } catch (error) { - console.log('INTERNAL SERVER ERRROROOROR'); - console.log(error); + console.log('INTERNAL SERVER ERRROROOROR') + console.log(error) } - setLoading(-1); - }; + setLoading(-1) + } return ( <> -
-
-
Pro plan
-
- $ - 5 - /month +
+
+
Pro plan
+
+ $ + 5 + /month
-
+
Yearly subscribers save extra
-
    -
  • +
      +
    • - + Access to challenge catalog
      • -
    • +
    • - + Increased terminal time
      • -
    • +
    • - + No ads
      • -
    • +
    • - + Custom banner images
      • -
    • +
    • - + PRO badge
      • -
    • +
    • - + Colored username
      • -
    • +
    • - + Access to upcoming beta features
    -
    - {role !== 'PRO' ? ( - redirectToCheckout(0)} - disabled={loading !== -1} - className="text-md flex w-full justify-center rounded-lg bg-blue-600 py-2 text-center font-medium text-white" - whileHover={{ - scale: 1.1, - boxShadow: '0px 0px 8px rgb(255, 255, 255)', - }} - transition={{ type: 'spring', stiffness: 100 }} - > - {loading !== -1 ? 'Redirecting...' : 'Subscribe'} - - - ) : ( -
    - Thank You for Subscribing! -
    - )} +
    + {role !== 'PRO' + ? ( + redirectToCheckout(0)} + disabled={loading !== -1} + className='text-md flex w-full justify-center rounded-lg bg-blue-600 py-2 text-center font-medium text-white' + whileHover={{ + scale: 1.1, + boxShadow: '0px 0px 8px rgb(255, 255, 255)' + }} + transition={{ type: 'spring', stiffness: 100 }} + > + {loading !== -1 ? 'Redirecting...' : 'Subscribe'} + + + ) + : ( +
    + Thank You for Subscribing! +
    + )}
    - ); + ) } diff --git a/src/pages/settings/billing.jsx b/src/pages/settings/billing.jsx index 45c2af40..1a3dee06 100644 --- a/src/pages/settings/billing.jsx +++ b/src/pages/settings/billing.jsx @@ -1,24 +1,23 @@ -import { loadStripe } from '@stripe/stripe-js'; -const STRIPE_KEY = process.env.NEXT_PUBLIC_APP_STRIPE_KEY; -import Head from 'next/head'; -import { Footer } from '@/components/Footer'; -import { useState, useEffect } from 'react'; - -import { StandardNav } from '@/components/StandardNav'; -import Sidebar from '@/components/settingComponents/sidebar'; -import UpgradeBox from '@/components/settingComponents/UpgradeBox'; -import FreeBox from '@/components/settingComponents/FreeBox'; -import Dropdown from '@/components/settingComponents/dropdown'; // Import the new Dropdown component -import { motion } from 'framer-motion'; -import { Context } from '@/context'; -import { useContext } from 'react'; - -export default function Billing() { +import { loadStripe } from '@stripe/stripe-js' +import Head from 'next/head' +import { Footer } from '@/components/Footer' +import { useState, useEffect, useContext } from 'react' + +import { StandardNav } from '@/components/StandardNav' +import Sidebar from '@/components/settingComponents/sidebar' +import UpgradeBox from '@/components/settingComponents/UpgradeBox' +import FreeBox from '@/components/settingComponents/FreeBox' +import Dropdown from '@/components/settingComponents/dropdown' // Import the new Dropdown component +import { motion } from 'framer-motion' +import { Context } from '@/context' +const STRIPE_KEY = process.env.NEXT_PUBLIC_APP_STRIPE_KEY + +export default function Billing () { const updateCardInfo = async () => { try { - let test = "https://billing.stripe.com/p/login/test_dR6dQZdpX3Fh4ne4gg"; - let prod = 'https://billing.stripe.com/p/login/28o4i86t419hh1K3cc'; - window.location.href =test; + const test = 'https://billing.stripe.com/p/login/test_dR6dQZdpX3Fh4ne4gg' + const prod = 'https://billing.stripe.com/p/login/28o4i86t419hh1K3cc' + window.location.href = test /* const stripe = await loadStripe(STRIPE_KEY); const response = await fetch( @@ -41,54 +40,54 @@ export default function Billing() { }); */ } catch (error) { - console.log(error); + console.log(error) } - }; - const { role } = useContext(Context); + } + const { role } = useContext(Context) const cancelSubscription = async () => { try { - const subscriptionType = document.getElementById('paymentType').value; - const url = `${process.env.NEXT_PUBLIC_API_URL}/payments/stripe/cancel`; + const subscriptionType = document.getElementById('paymentType').value + const url = `${process.env.NEXT_PUBLIC_API_URL}/payments/stripe/cancel` const response = await fetch(url, { method: 'PUT', credentials: 'include', body: JSON.stringify({ - subType: subscriptionType, + subType: subscriptionType }), headers: { - 'Content-Type': 'application/json', - }, - }); - const data = await response.json(); + 'Content-Type': 'application/json' + } + }) + const data = await response.json() // console.log(data.message); } catch (err) { - console.log(err); + console.log(err) } - }; + } - const [isMobile, setIsMobile] = useState(false); + const [isMobile, setIsMobile] = useState(false) useEffect(() => { const handleResize = () => { - setIsMobile(window.innerWidth <= 768); - }; + setIsMobile(window.innerWidth <= 768) + } - handleResize(); // Check on initial render - window.addEventListener('resize', handleResize); + handleResize() // Check on initial render + window.addEventListener('resize', handleResize) return () => { - window.removeEventListener('resize', handleResize); - }; - }, []); + window.removeEventListener('resize', handleResize) + } + }, []) return ( <> User Settings