mirror of
https://github.com/fergalmoran/supanextail.git
synced 2026-01-04 15:44:12 +00:00
WIP new pricing page (simplified version)
This commit is contained in:
Michael
@@ -9,17 +9,14 @@ https://dashboard.stripe.com/test/settings/billing/portal
|
|||||||
import { getSub, supabase } from 'utils/supabaseClient';
|
import { getSub, supabase } from 'utils/supabaseClient';
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
import { Switch } from '@headlessui/react';
|
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import router from 'next/router';
|
import router from 'next/router';
|
||||||
import { useAuth } from 'utils/AuthContext';
|
import { useAuth } from 'utils/AuthContext';
|
||||||
|
|
||||||
const Pricing = (): JSX.Element => {
|
const Pricing = (): JSX.Element => {
|
||||||
const [yearly, setyearly] = useState(false);
|
|
||||||
const { user, session } = useAuth();
|
const { user, session } = useAuth();
|
||||||
const [customerId, setCustomerId] = useState(null);
|
const [customerId, setCustomerId] = useState(null);
|
||||||
const [sub, setSub] = useState(false);
|
const [sub, setSub] = useState(false);
|
||||||
const flat = false; // Switch between subscription system or flat prices
|
|
||||||
|
|
||||||
const portal = () => {
|
const portal = () => {
|
||||||
axios
|
axios
|
||||||
@@ -45,57 +42,6 @@ const Pricing = (): JSX.Element => {
|
|||||||
}
|
}
|
||||||
}, [user]);
|
}, [user]);
|
||||||
|
|
||||||
const Prices = {
|
|
||||||
personal: {
|
|
||||||
monthly: {
|
|
||||||
id: 'price_1J5q2yDMjD0UnVmMXzEWYDnl',
|
|
||||||
desc: 'Personal plan (monthly)',
|
|
||||||
},
|
|
||||||
annually: {
|
|
||||||
id: 'price_1J5q45DMjD0UnVmMQxXHKGAv',
|
|
||||||
desc: 'Personal plan (annually)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
team: {
|
|
||||||
monthly: {
|
|
||||||
id: 'price_1J5q3GDMjD0UnVmMlHc5Eedq',
|
|
||||||
desc: 'Team plan (monthly)',
|
|
||||||
},
|
|
||||||
annually: {
|
|
||||||
id: 'price_1J5q8zDMjD0UnVmMqsngM91X',
|
|
||||||
desc: 'Team plan (annually)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
pro: {
|
|
||||||
monthly: {
|
|
||||||
id: 'price_1J6KRuDMjD0UnVmMIItaOdT3',
|
|
||||||
desc: 'Pro plan (monthly)',
|
|
||||||
},
|
|
||||||
annually: {
|
|
||||||
id: 'price_1J5q9VDMjD0UnVmMIQtVDSZ9',
|
|
||||||
desc: 'Pro plan (annually)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const pricing = {
|
|
||||||
monthly: {
|
|
||||||
personal: '$5/mo',
|
|
||||||
team: '$15/mo',
|
|
||||||
pro: '$35/mo',
|
|
||||||
},
|
|
||||||
yearly: {
|
|
||||||
personal: '$50/yr',
|
|
||||||
team: '$150/yr',
|
|
||||||
pro: '$350/yr',
|
|
||||||
},
|
|
||||||
flat: {
|
|
||||||
personal: '€49',
|
|
||||||
team: '€99',
|
|
||||||
pro: '€149',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.SyntheticEvent<HTMLButtonElement>, priceId: string) => {
|
const handleSubmit = async (e: React.SyntheticEvent<HTMLButtonElement>, priceId: string) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
// Create a Checkout Session. This will redirect the user to the Stripe website for the payment.
|
// Create a Checkout Session. This will redirect the user to the Stripe website for the payment.
|
||||||
@@ -106,174 +52,91 @@ const Pricing = (): JSX.Element => {
|
|||||||
customerId,
|
customerId,
|
||||||
userId: user.id,
|
userId: user.id,
|
||||||
tokenId: session.access_token,
|
tokenId: session.access_token,
|
||||||
pay_mode: flat ? 'payment' : 'subscription',
|
pay_mode: 'subscription',
|
||||||
})
|
})
|
||||||
.then((result) => router.push(result.data.url));
|
.then((result) => router.push(result.data.url));
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<div className="w-full mx-auto px-5 py-10 mb-10">
|
<div>
|
||||||
<div className="text-center max-w-xl mx-auto">
|
<div className="container px-6 py-8 mx-auto text-base-100">
|
||||||
<h1 className="text-3xl sm:text-5xl font-bold font-title mb-5">Pricing</h1>
|
<h2 className="text-3xl sm:text-4xl text-center mb-5 mt-0 font-bold font-title text-base-content">
|
||||||
<h3 className="text-lg font-light leading-8 p-3 mb-5">
|
Pricing
|
||||||
This is an example of a pricing page. You can choose a payment method, monthly or yearly.
|
</h2>
|
||||||
|
<div className="mt-16 flex flex-col items-center justify-center space-y-8 lg:-mx-4 lg:flex-row lg:items-stretch lg:space-y-0">
|
||||||
|
<div className="flex flex-col w-full max-w-sm p-8 space-y-8 text-center bg-base-100 rounded-lg lg:mx-4 shadow-lg text-base-content">
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<h3 className="inline-flex items-center badge-neutral badge badge-lg bg-base-content text-base-100">
|
||||||
|
Casual
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
{!flat && (
|
<div className="flex-shrink-0">
|
||||||
<div className="flex justify-between max-w-xs m-auto mb-3">
|
<span className="pt-2 text-4xl font-bold uppercase">FREE</span>
|
||||||
<div>
|
|
||||||
<p className={`${yearly ? 'text-gray-500' : null}`}>Billed monthly</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<ul className="flex-1 space-y-4 text-base-content">
|
||||||
<Switch
|
<li>Up to 10 projects</li>
|
||||||
checked={yearly}
|
<li>Up to 20 collaborators</li>
|
||||||
onChange={setyearly}
|
<li>10Gb of storage</li>
|
||||||
className={`bg-primary relative inline-flex flex-shrink-0 h-[38px] w-[74px]
|
</ul>
|
||||||
border-2 border-transparent rounded-full cursor-pointer transition-colors
|
|
||||||
ease-in-out duration-200 focus:outline-none focus-visible:ring-2
|
<button className="btn btn-primary">Start for free</button>
|
||||||
focus-visible:ring-white focus-visible:ring-opacity-75`}
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col w-full max-w-sm p-8 space-y-8 text-center bg-base-100 rounded-lg lg:mx-4 shadow-lg text-base-content">
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<h3 className="inline-flex items-center badge-neutral badge badge-lg bg-base-content text-base-100">
|
||||||
|
Professional
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<span className="pt-2 text-4xl font-bold uppercase">$4.90</span>
|
||||||
|
<span>/month</span>
|
||||||
|
</div>
|
||||||
|
<ul className="flex-1 space-y-4 text-base-content">
|
||||||
|
<li>Up to 30 projects</li>
|
||||||
|
<li>Up to 25 collaborators</li>
|
||||||
|
<li>100Gb of storage</li>
|
||||||
|
<li>Real-time collaborations</li>
|
||||||
|
</ul>
|
||||||
|
{user ? (
|
||||||
|
<button
|
||||||
|
className="btn btn-primary"
|
||||||
|
onClick={(e) => {
|
||||||
|
handleSubmit(e, 'price_1JtHhaDMjD0UnVmM5uCyyrWn');
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<span className="sr-only">Switch bill</span>
|
Subscribe
|
||||||
<span
|
</button>
|
||||||
aria-hidden="true"
|
) : (
|
||||||
className={`${yearly ? 'translate-x-9' : 'translate-x-0'}
|
<button className="btn btn-primary" onClick={() => router.push('/login')}>
|
||||||
pointer-events-none inline-block h-[34px] w-[34px] rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200`}
|
Log in
|
||||||
/>
|
</button>
|
||||||
</Switch>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className={`${!yearly ? 'text-gray-500' : null}`}>Billed annually</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
<div className="max-w-4xl mx-auto md:flex space-x-4">
|
</div>
|
||||||
<div className="w-full md:w-1/3 md:max-w-none px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col">
|
|
||||||
<div className="w-full flex-grow">
|
<div className="flex flex-col w-full max-w-sm p-8 space-y-8 text-center bg-base-100 rounded-lg lg:mx-4 shadow-lg text-base-content">
|
||||||
<h2 className="text-center font-bold uppercase mb-4">Personal</h2>
|
<div className="flex-shrink-0">
|
||||||
<h3 className="text-center font-bold text-4xl mb-5">
|
<h3 className="inline-flex items-center badge-neutral badge badge-lg bg-base-content text-base-100">
|
||||||
{flat
|
Business
|
||||||
? pricing.flat.personal
|
|
||||||
: yearly
|
|
||||||
? pricing.yearly.personal
|
|
||||||
: pricing.monthly.personal}
|
|
||||||
</h3>
|
</h3>
|
||||||
<ul className="text-sm px-5 mb-8 text-left">
|
</div>
|
||||||
<li className="leading-tight">
|
<div className="flex-shrink-0">
|
||||||
<i className="mdi mdi-check-bold text-lg" /> A cool feature
|
<span className="pt-2 text-4xl font-bold uppercase">$24.90</span>
|
||||||
</li>
|
<span>/month</span>
|
||||||
<li className="leading-tight">
|
</div>
|
||||||
<i className="mdi mdi-check-bold text-lg" /> Another feature
|
<ul className="flex-1 space-y-4 text-base-content">
|
||||||
</li>
|
<li>Up to 60 projects</li>
|
||||||
|
<li>Up to 200 collaborators</li>
|
||||||
|
<li>1Tb of storage</li>
|
||||||
|
<li>Real-time collaborations</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
<div className="w-full">
|
{user ? (
|
||||||
<button
|
<button className="btn btn-primary">Subscribe</button>
|
||||||
className="btn btn-primary w-full"
|
) : (
|
||||||
onClick={
|
<button className="btn btn-primary" onClick={() => router.push('/login')}>
|
||||||
user
|
Log in
|
||||||
? sub
|
|
||||||
? () => {
|
|
||||||
portal();
|
|
||||||
}
|
|
||||||
: (e) =>
|
|
||||||
handleSubmit(
|
|
||||||
e,
|
|
||||||
yearly ? Prices.personal.annually.id : Prices.personal.monthly.id
|
|
||||||
)
|
|
||||||
: () => {
|
|
||||||
router.push('/signup');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{user ? (sub ? 'Upgrade' : 'Buy Now') : 'Register'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-full md:w-1/3 md:max-w-none px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col">
|
|
||||||
<div className="w-full flex-grow">
|
|
||||||
<h2 className="text-center font-bold uppercase mb-4">Team</h2>
|
|
||||||
<h3 className="text-center font-bold text-4xl mb-5">
|
|
||||||
{flat ? pricing.flat.team : yearly ? pricing.yearly.team : pricing.monthly.team}
|
|
||||||
</h3>
|
|
||||||
<ul className="text-sm px-5 mb-8 text-left">
|
|
||||||
<li className="leading-tight">
|
|
||||||
<i className="mdi mdi-check-bold text-lg" /> All basic features
|
|
||||||
</li>
|
|
||||||
<li className="leading-tight">
|
|
||||||
<i className="mdi mdi-check-bold text-lg" /> Dolor sit amet
|
|
||||||
</li>
|
|
||||||
<li className="leading-tight">
|
|
||||||
<i className="mdi mdi-check-bold text-lg" /> Consectetur
|
|
||||||
</li>
|
|
||||||
<li className="leading-tight">
|
|
||||||
<i className="mdi mdi-check-bold text-lg" /> Adipisicing
|
|
||||||
</li>
|
|
||||||
<li className="leading-tight">
|
|
||||||
<i className="mdi mdi-check-bold text-lg" /> Elit repellat
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div className="w-full">
|
|
||||||
<button
|
|
||||||
className="btn btn-primary w-full"
|
|
||||||
onClick={
|
|
||||||
user
|
|
||||||
? sub
|
|
||||||
? () => {
|
|
||||||
portal();
|
|
||||||
}
|
|
||||||
: (e) =>
|
|
||||||
handleSubmit(e, yearly ? Prices.team.annually.id : Prices.team.monthly.id)
|
|
||||||
: () => {
|
|
||||||
router.push('/signup');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{user ? (sub ? 'Upgrade' : 'Buy Now') : 'Register'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-full md:w-1/3 md:max-w-none px-8 md:px-10 py-8 md:py-10 mb-3 mx-auto md:my-6 rounded-md shadow-lg shadow-gray-600 md:flex md:flex-col">
|
|
||||||
<div className="w-full flex-grow">
|
|
||||||
<h2 className="text-center font-bold uppercase mb-4">Pro</h2>
|
|
||||||
<h3 className="text-center font-bold text-4xl mb-5">
|
|
||||||
{flat ? pricing.flat.pro : yearly ? pricing.yearly.pro : pricing.monthly.pro}
|
|
||||||
</h3>
|
|
||||||
<ul className="text-sm px-5 mb-8 text-left">
|
|
||||||
<li className="leading-tight">
|
|
||||||
<i className="mdi mdi-check-bold text-lg" /> Lorem ipsum
|
|
||||||
</li>
|
|
||||||
<li className="leading-tight">
|
|
||||||
<i className="mdi mdi-check-bold text-lg" /> Dolor sit amet
|
|
||||||
</li>
|
|
||||||
<li className="leading-tight">
|
|
||||||
<i className="mdi mdi-check-bold text-lg" /> Consectetur
|
|
||||||
</li>
|
|
||||||
<li className="leading-tight">
|
|
||||||
<i className="mdi mdi-check-bold text-lg" /> Adipisicing
|
|
||||||
</li>
|
|
||||||
<li className="leading-tight">
|
|
||||||
<i className="mdi mdi-check-bold text-lg" /> Much more...
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div className="w-full">
|
|
||||||
<button
|
|
||||||
className="btn btn-primary w-full"
|
|
||||||
onClick={
|
|
||||||
user
|
|
||||||
? sub
|
|
||||||
? () => {
|
|
||||||
portal();
|
|
||||||
}
|
|
||||||
: (e) =>
|
|
||||||
handleSubmit(e, yearly ? Prices.pro.annually.id : Prices.pro.monthly.id)
|
|
||||||
: () => {
|
|
||||||
router.push('/signup');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{user ? (sub ? 'Upgrade' : 'Buy Now') : 'Register'}
|
|
||||||
</button>
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user