Skip to content
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
202 changes: 101 additions & 101 deletions src/components/settingComponents/UpgradeBox.jsx
Original file line number Diff line number Diff line change
@@ -1,176 +1,176 @@
import request from '@/utils/request'
import { loadStripe } from '@stripe/stripe-js'
import { useState } from 'react'
const STRIPE_KEY = process.env.NEXT_PUBLIC_APP_STRIPE_KEY
const subscriptionTypes = ['PRO_MONTHLY', 'PRO_YEARLY']

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';
const subscriptionTypes = ['PRO_MONTHLY', 'PRO_YEARLY'];

export default function UpgradeBox() {
const [loading, setLoading] = useState(-1);
export default function UpgradeBox () {
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: {}
}

console.log("Making a redirect to checkout...")
const url = `${process.env.NEXT_PUBLIC_API_URL}/payments/stripe/create-checkout-session`;
const session = await request(url, 'POST', body);
console.log("Data back from the server: ", session);
console.log('Making a redirect to checkout...')
const url = `${process.env.NEXT_PUBLIC_API_URL}/payments/stripe/create-checkout-session`
const session = await request(url, 'POST', body)
console.log('Data back from the server: ', session)

if (session.error) {
console.log('Creating the stripe session failed');
return;
console.log('Creating the stripe session failed')
return
}

console.log("redirect starting now...")
console.log('redirect starting now...')
const result = await stripe.redirectToCheckout({
sessionId: session.sessionId,
});
console.log("redirect ending now...")
sessionId: session.sessionId
})
console.log('redirect ending now...')

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 (
<>
<div className="rounded-lg bg-neutral-800 shadow">
<div className="to-amber-00 w-full rounded-t-lg bg-gradient-to-br from-amber-600 via-yellow-400 via-65% to-amber-600 pb-4 text-center">
<h5 className="pt-8 text-xl font-medium text-white">Pro plan</h5>
<div className="text-white">
<span class="text-3xl font-semibold">$</span>
<span class="text-5xl font-extrabold tracking-tight">5</span>
<span class="ms-1 text-xl font-normal">/month</span>
</div>
<div className="mx-4 rounded-3xl bg-gray-600/75 py-1 text-sm text-white">
Yearly subscribers save $2/month
</div>
<div className='rounded-lg bg-neutral-800 shadow'>
<div className='to-amber-00 w-full rounded-t-lg bg-gradient-to-br from-amber-600 via-yellow-400 via-65% to-amber-600 pb-4 text-center'>
<h5 className='pt-8 text-xl font-medium text-white'>Pro plan</h5>
<div className='text-white'>
<span class='text-3xl font-semibold'>$</span>
<span class='text-5xl font-extrabold tracking-tight'>5</span>
<span class='ms-1 text-xl font-normal'>/month</span>
</div>
<div className='mx-4 rounded-3xl bg-gray-600/75 py-1 text-sm text-white'>
Yearly subscribers save $2/month
</div>
</div>

<ul className="my-4 space-y-5 px-8">
<li className="flex items-center">
<ul className='my-4 space-y-5 px-8'>
<li className='flex items-center'>
<svg
className="h-4 w-4 flex-shrink-0 text-blue-600"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
className='h-4 w-4 flex-shrink-0 text-blue-600'
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
fill='currentColor'
viewBox='0 0 20 20'
>
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
<path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z' />
</svg>
<span className="ms-3 text-base font-normal leading-tight text-gray-500 dark:text-gray-400">
<span className='ms-3 text-base font-normal leading-tight text-gray-500 dark:text-gray-400'>
Acess to challenge catalog
</span>
</li>
<li className="flex">
<li className='flex'>
<svg
className="h-4 w-4 flex-shrink-0 text-blue-600"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
className='h-4 w-4 flex-shrink-0 text-blue-600'
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
fill='currentColor'
viewBox='0 0 20 20'
>
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
<path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z' />
</svg>
<span className="ms-3 text-base font-normal leading-tight text-gray-500 dark:text-gray-400">
<span className='ms-3 text-base font-normal leading-tight text-gray-500 dark:text-gray-400'>
Increased terminal time
</span>
</li>
<li className="flex">
<li className='flex'>
<svg
className="h-4 w-4 flex-shrink-0 text-blue-600"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
className='h-4 w-4 flex-shrink-0 text-blue-600'
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
fill='currentColor'
viewBox='0 0 20 20'
>
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
<path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z' />
</svg>
<span className="ms-3 text-base font-normal leading-tight text-gray-500 dark:text-gray-400">
<span className='ms-3 text-base font-normal leading-tight text-gray-500 dark:text-gray-400'>
No ads
</span>
</li>
<li className="flex decoration-gray-500">
<li className='flex decoration-gray-500'>
<svg
className="h-4 w-4 flex-shrink-0 text-blue-600"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
className='h-4 w-4 flex-shrink-0 text-blue-600'
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
fill='currentColor'
viewBox='0 0 20 20'
>
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
<path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z' />
</svg>
<span className="ms-3 text-base font-normal leading-tight text-gray-500 dark:text-gray-400">
<span className='ms-3 text-base font-normal leading-tight text-gray-500 dark:text-gray-400'>
Custom banner images
</span>
</li>
<li className="flex decoration-gray-500">
<li className='flex decoration-gray-500'>
<svg
className="h-4 w-4 flex-shrink-0 text-blue-600"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
className='h-4 w-4 flex-shrink-0 text-blue-600'
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
fill='currentColor'
viewBox='0 0 20 20'
>
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
<path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z' />
</svg>
<span className="ms-3 text-base font-normal leading-tight text-gray-500 dark:text-gray-400">
<span className='ms-3 text-base font-normal leading-tight text-gray-500 dark:text-gray-400'>
PRO badge
</span>
</li>
<li className="flex decoration-gray-500">
<li className='flex decoration-gray-500'>
<svg
className="h-4 w-4 flex-shrink-0 text-blue-600"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
className='h-4 w-4 flex-shrink-0 text-blue-600'
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
fill='currentColor'
viewBox='0 0 20 20'
>
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
<path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z' />
</svg>
<span className="ms-3 text-base font-normal leading-tight text-gray-500 dark:text-gray-400">
<span className='ms-3 text-base font-normal leading-tight text-gray-500 dark:text-gray-400'>
Colored username
</span>
</li>
<li className="flex decoration-gray-500">
<li className='flex decoration-gray-500'>
<svg
className="h-4 w-4 flex-shrink-0 text-blue-600"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
className='h-4 w-4 flex-shrink-0 text-blue-600'
aria-hidden='true'
xmlns='http://www.w3.org/2000/svg'
fill='currentColor'
viewBox='0 0 20 20'
>
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
<path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z' />
</svg>
<span className="ms-3 text-base font-normal leading-tight text-gray-500 dark:text-gray-400">
<span className='ms-3 text-base font-normal leading-tight text-gray-500 dark:text-gray-400'>
Acess to upcoming beta features
</span>
</li>
</ul>
<div className="px-8 pb-8 pt-4">
<div className='px-8 pb-8 pt-4'>

<button onClick={() => redirectToCheckout(0)}
<button
onClick={() => 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 ">
{loading !== -1? "Redirecting..." : "Subscribe"}
className='text-md flex w-full justify-center rounded-lg bg-blue-600 py-2 text-center font-medium text-white '
>
{loading !== -1 ? 'Redirecting...' : 'Subscribe'}
</button>
</div>
</div>
</>
);
)
}