diff --git a/src/components/settingComponents/FreeBox.jsx b/src/components/settingComponents/FreeBox.jsx index 9492dc6e..2091bf27 100644 --- a/src/components/settingComponents/FreeBox.jsx +++ b/src/components/settingComponents/FreeBox.jsx @@ -1,132 +1,134 @@ -import { Context } from '@/context'; -import { useContext } from 'react'; +import { Context } from '@/context' +import { useContext } from 'react' -export default function FreeBox() { - const { role } = useContext(Context); +export default function FreeBox () { + const { role } = useContext(Context) return ( <> -
-
-
Standard plan
-
- +
+
+
Standard plan
+
+ Free
-
    -
  • +
      +
    • - + Access to challenge catalog
      • -
    • +
    • - + Limited terminal time
      • -
    • +
    • - + Limited ads
      • -
    • +
    • - + Custom banner images
      • -
    • +
    • - + PRO badge
      • -
    • +
    • - + Colored Username
      • -
    • +
    • - + Access to upcoming beta features
    -
    - {role == 'USER' ? ( -
    - Current plan -
    - ): ( -
    - Free Plan -
    - )} +
    + {role == 'USER' + ? ( +
    + Current plan +
    + ) + : ( +
    + Free Plan +
    + )}
    {' '} - ); + ) } diff --git a/src/components/settingComponents/UpgradeBox.jsx b/src/components/settingComponents/UpgradeBox.jsx index 9e86adaf..5c444f37 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! +
      + )}
      - ); + ) }