add a subscription pricing table
This commit is contained in:
Abi Raja
parent
231d334679
commit
a974c91c76
@ -10,11 +10,17 @@ import {
|
||||
import { FaCheckCircle } from "react-icons/fa";
|
||||
import Spinner from "../custom-ui/Spinner";
|
||||
import useStripeCheckout from "./useStripeCheckout";
|
||||
import { Button } from "../ui/button";
|
||||
|
||||
const LOGOS = ["microsoft", "amazon", "mit", "stanford", "bytedance", "baidu"];
|
||||
|
||||
const SELL_SUBSCRIPTIONS = false;
|
||||
|
||||
const PricingDialog: React.FC = () => {
|
||||
const { checkout, isLoadingCheckout } = useStripeCheckout();
|
||||
const [paymentInterval, setPaymentInterval] = React.useState<
|
||||
"monthly" | "yearly"
|
||||
>("monthly");
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
@ -31,97 +37,173 @@ const PricingDialog: React.FC = () => {
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{SELL_SUBSCRIPTIONS && (
|
||||
<div className="flex justify-center gap-x-2 mt-2">
|
||||
<Button
|
||||
variant={paymentInterval === "monthly" ? "default" : "secondary"}
|
||||
onClick={() => setPaymentInterval("monthly")}
|
||||
>
|
||||
Monthly
|
||||
</Button>
|
||||
<Button
|
||||
variant={paymentInterval === "yearly" ? "default" : "secondary"}
|
||||
onClick={() => setPaymentInterval("yearly")}
|
||||
>
|
||||
Yearly (2 months free)
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-center items-center">
|
||||
<div className="grid grid-cols-2 gap-8 p-2">
|
||||
{/* Free Plan */}
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="font-semibold">Hobby</h2>
|
||||
<p className="text-gray-500">Great to start</p>
|
||||
<div className="my-4">
|
||||
<span className="text-4xl font-bold">$15</span>
|
||||
{/* <span className="text-gray-500"> / month</span> */}
|
||||
</div>
|
||||
<a
|
||||
href="https://buy.stripe.com/8wM6sre70gBW1nqaEE"
|
||||
target="_blank"
|
||||
>
|
||||
<button className="bg-black text-white rounded py-2 px-4 w-full text-sm">
|
||||
Purchase Credits
|
||||
</button>
|
||||
</a>
|
||||
<ul className="mt-4 space-y-2">
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
100 credits
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
Email support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{!SELL_SUBSCRIPTIONS && (
|
||||
<>
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="font-semibold">Hobby</h2>
|
||||
<p className="text-gray-500">Great to start</p>
|
||||
<div className="my-4">
|
||||
<span className="text-4xl font-bold">$15</span>
|
||||
</div>
|
||||
<a
|
||||
href="https://buy.stripe.com/8wM6sre70gBW1nqaEE"
|
||||
target="_blank"
|
||||
>
|
||||
<button className="bg-black text-white rounded py-2 px-4 w-full text-sm">
|
||||
Purchase Credits
|
||||
</button>
|
||||
</a>
|
||||
<ul className="mt-4 space-y-2">
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
100 credits
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
Email support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Economy Plan */}
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="font-semibold">Pro</h2>
|
||||
<p className="text-gray-500">Higher limits</p>
|
||||
<div className="my-4">
|
||||
<span className="text-4xl font-bold">$40</span>
|
||||
{/* <span className="text-gray-500"> / month</span> */}
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="font-semibold">Pro</h2>
|
||||
<p className="text-gray-500">Higher limits</p>
|
||||
<div className="my-4">
|
||||
<span className="text-4xl font-bold">$40</span>
|
||||
{/* <span className="text-gray-500"> / month</span> */}
|
||||
</div>
|
||||
|
||||
<a
|
||||
href="https://buy.stripe.com/dR69ED3sm85qgikcMN"
|
||||
target="_blank"
|
||||
>
|
||||
<button className="bg-black text-white rounded py-2 px-4 w-full text-sm">
|
||||
Purchase Credits
|
||||
</button>
|
||||
</a>
|
||||
<a
|
||||
href="https://buy.stripe.com/dR69ED3sm85qgikcMN"
|
||||
target="_blank"
|
||||
>
|
||||
<button className="bg-black text-white rounded py-2 px-4 w-full text-sm">
|
||||
Purchase Credits
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<ul className="mt-4 space-y-2">
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
300 credits
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
Slack support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul className="mt-4 space-y-2">
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
300 credits
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
Slack support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Economy Plan */}
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="font-semibold">Hobby</h2>
|
||||
<p className="text-gray-500">Higher limits</p>
|
||||
<div className="my-4">
|
||||
<span className="text-4xl font-bold">$15</span>
|
||||
<span className="text-gray-500"> / month</span>
|
||||
</div>
|
||||
{SELL_SUBSCRIPTIONS && (
|
||||
<>
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="font-semibold">Hobby</h2>
|
||||
<p className="text-gray-500">Great to start</p>
|
||||
<div className="my-4">
|
||||
<span className="text-4xl font-bold">
|
||||
{paymentInterval === "monthly" ? "$15" : "$150"}
|
||||
</span>
|
||||
<span className="text-gray-500">
|
||||
{paymentInterval === "monthly" ? "/ month" : "/ year"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="bg-black text-white rounded py-2 px-4 w-full text-sm"
|
||||
onClick={() => checkout("test")}
|
||||
>
|
||||
Subscribe {isLoadingCheckout && <Spinner />}
|
||||
</button>
|
||||
<button
|
||||
className="bg-black text-white rounded py-2 px-4 w-full text-sm
|
||||
flex justify-center items-center gap-x-2"
|
||||
onClick={() =>
|
||||
checkout(
|
||||
paymentInterval === "monthly"
|
||||
? "hobby_monthly"
|
||||
: "hobby_yearly"
|
||||
)
|
||||
}
|
||||
>
|
||||
Subscribe {isLoadingCheckout && <Spinner />}
|
||||
</button>
|
||||
|
||||
<ul className="mt-4 space-y-2">
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
300 credits
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
Slack support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul className="mt-4 space-y-2">
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
100 credits / mo
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
Email support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow p-6">
|
||||
<h2 className="font-semibold">Pro</h2>
|
||||
<p className="text-gray-500">Higher limits</p>
|
||||
<div className="my-4">
|
||||
<span className="text-4xl font-bold">
|
||||
{paymentInterval === "monthly" ? "$40" : "$400"}
|
||||
</span>
|
||||
<span className="text-gray-500">
|
||||
{paymentInterval === "monthly" ? "/ month" : "/ year"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="bg-black text-white rounded py-2 px-4 w-full text-sm
|
||||
flex justify-center items-center gap-x-2"
|
||||
onClick={() =>
|
||||
checkout(
|
||||
paymentInterval === "monthly"
|
||||
? "pro_monthly"
|
||||
: "pro_yearly"
|
||||
)
|
||||
}
|
||||
>
|
||||
Subscribe {isLoadingCheckout && <Spinner />}
|
||||
</button>
|
||||
|
||||
<ul className="mt-4 space-y-2">
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
300 credits / mo
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<FaCheckCircle className="text-black mr-2" />
|
||||
Slack support
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center text-xs text-gray-600 mt-1">
|
||||
1 credit = 1 code generation. Unused credits expire after 90 days.
|
||||
{SELL_SUBSCRIPTIONS && (
|
||||
<>
|
||||
<br />
|
||||
Cancel anytime.
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
|
||||
<DialogFooter></DialogFooter>
|
||||
|
||||
@ -28,7 +28,7 @@ export default function useStripeCheckout() {
|
||||
|
||||
// Create a Checkout Session
|
||||
const res: CreateCheckoutSessionResponse = await authenticatedFetch(
|
||||
`${SAAS_BACKEND_URL}/create_checkout_session` +
|
||||
`${SAAS_BACKEND_URL}/payments/create_checkout_session` +
|
||||
`?price_lookup_key=${priceLookupKey}` +
|
||||
`&rewardful_referral_id=${rewardfulReferralId}`,
|
||||
"POST"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user