Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add a subscription pricing table

Browse Source
This commit is contained in:
Abi Raja 2023-12-23 17:06:15 -05:00
parent 231d334679
commit a974c91c76
2 changed files with 162 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

240
frontend/src/components/payments/PricingDialog.tsx
View File

@ -10,11 +10,17 @@ import {
import { FaCheckCircle } from "react-icons/fa"; import { FaCheckCircle } from "react-icons/fa";
import Spinner from "../custom-ui/Spinner"; import Spinner from "../custom-ui/Spinner";
import useStripeCheckout from "./useStripeCheckout"; import useStripeCheckout from "./useStripeCheckout";
import { Button } from "../ui/button";
const LOGOS = ["microsoft", "amazon", "mit", "stanford", "bytedance", "baidu"]; const LOGOS = ["microsoft", "amazon", "mit", "stanford", "bytedance", "baidu"];
const SELL_SUBSCRIPTIONS = false;
const PricingDialog: React.FC = () => { const PricingDialog: React.FC = () => {
const { checkout, isLoadingCheckout } = useStripeCheckout(); const { checkout, isLoadingCheckout } = useStripeCheckout();
const [paymentInterval, setPaymentInterval] = React.useState<
"monthly" | "yearly"
>("monthly");
return ( return (
<Dialog> <Dialog>
@ -31,97 +37,173 @@ const PricingDialog: React.FC = () => {
</DialogTitle> </DialogTitle>
</DialogHeader> </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="flex justify-center items-center">
<div className="grid grid-cols-2 gap-8 p-2"> <div className="grid grid-cols-2 gap-8 p-2">
{/* Free Plan */} {!SELL_SUBSCRIPTIONS && (
<div className="bg-white rounded-lg shadow p-6"> <>
<h2 className="font-semibold">Hobby</h2> <div className="bg-white rounded-lg shadow p-6">
<p className="text-gray-500">Great to start</p> <h2 className="font-semibold">Hobby</h2>
<div className="my-4"> <p className="text-gray-500">Great to start</p>
<span className="text-4xl font-bold">$15</span> <div className="my-4">
{/* <span className="text-gray-500"> / month</span> */} <span className="text-4xl font-bold">$15</span>
</div> </div>
<a <a
href="https://buy.stripe.com/8wM6sre70gBW1nqaEE" href="https://buy.stripe.com/8wM6sre70gBW1nqaEE"
target="_blank" target="_blank"
> >
<button className="bg-black text-white rounded py-2 px-4 w-full text-sm"> <button className="bg-black text-white rounded py-2 px-4 w-full text-sm">
Purchase Credits Purchase Credits
</button> </button>
</a> </a>
<ul className="mt-4 space-y-2"> <ul className="mt-4 space-y-2">
<li className="flex items-center"> <li className="flex items-center">
<FaCheckCircle className="text-black mr-2" /> <FaCheckCircle className="text-black mr-2" />
100 credits 100 credits
</li> </li>
<li className="flex items-center"> <li className="flex items-center">
<FaCheckCircle className="text-black mr-2" /> <FaCheckCircle className="text-black mr-2" />
Email support Email support
</li> </li>
</ul> </ul>
</div> </div>
{/* Economy Plan */} <div className="bg-white rounded-lg shadow p-6">
<div className="bg-white rounded-lg shadow p-6"> <h2 className="font-semibold">Pro</h2>
<h2 className="font-semibold">Pro</h2> <p className="text-gray-500">Higher limits</p>
<p className="text-gray-500">Higher limits</p> <div className="my-4">
<div className="my-4"> <span className="text-4xl font-bold">$40</span>
<span className="text-4xl font-bold">$40</span> {/* <span className="text-gray-500"> / month</span> */}
{/* <span className="text-gray-500"> / month</span> */} </div>
</div>
<a <a
href="https://buy.stripe.com/dR69ED3sm85qgikcMN" href="https://buy.stripe.com/dR69ED3sm85qgikcMN"
target="_blank" target="_blank"
> >
<button className="bg-black text-white rounded py-2 px-4 w-full text-sm"> <button className="bg-black text-white rounded py-2 px-4 w-full text-sm">
Purchase Credits Purchase Credits
</button> </button>
</a> </a>
<ul className="mt-4 space-y-2"> <ul className="mt-4 space-y-2">
<li className="flex items-center"> <li className="flex items-center">
<FaCheckCircle className="text-black mr-2" /> <FaCheckCircle className="text-black mr-2" />
300 credits 300 credits
</li> </li>
<li className="flex items-center"> <li className="flex items-center">
<FaCheckCircle className="text-black mr-2" /> <FaCheckCircle className="text-black mr-2" />
Slack support Slack support
</li> </li>
</ul> </ul>
</div> </div>
</>
)}
{/* Economy Plan */} {SELL_SUBSCRIPTIONS && (
<div className="bg-white rounded-lg shadow p-6"> <>
<h2 className="font-semibold">Hobby</h2> <div className="bg-white rounded-lg shadow p-6">
<p className="text-gray-500">Higher limits</p> <h2 className="font-semibold">Hobby</h2>
<div className="my-4"> <p className="text-gray-500">Great to start</p>
<span className="text-4xl font-bold">$15</span> <div className="my-4">
<span className="text-gray-500"> / month</span> <span className="text-4xl font-bold">
</div> {paymentInterval === "monthly" ? "$15" : "$150"}
</span>
<span className="text-gray-500">
{paymentInterval === "monthly" ? "/ month" : "/ year"}
</span>
</div>
<button <button
className="bg-black text-white rounded py-2 px-4 w-full text-sm" className="bg-black text-white rounded py-2 px-4 w-full text-sm
onClick={() => checkout("test")} flex justify-center items-center gap-x-2"
> onClick={() =>
Subscribe {isLoadingCheckout && <Spinner />} checkout(
</button> paymentInterval === "monthly"
? "hobby_monthly"
: "hobby_yearly"
)
}
>
Subscribe {isLoadingCheckout && <Spinner />}
</button>
<ul className="mt-4 space-y-2"> <ul className="mt-4 space-y-2">
<li className="flex items-center"> <li className="flex items-center">
<FaCheckCircle className="text-black mr-2" /> <FaCheckCircle className="text-black mr-2" />
300 credits 100 credits / mo
</li> </li>
<li className="flex items-center"> <li className="flex items-center">
<FaCheckCircle className="text-black mr-2" /> <FaCheckCircle className="text-black mr-2" />
Slack support Email support
</li> </li>
</ul> </ul>
</div> </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>
</div> </div>
<p className="text-center text-xs text-gray-600 mt-1"> <p className="text-center text-xs text-gray-600 mt-1">
1 credit = 1 code generation. Unused credits expire after 90 days. 1 credit = 1 code generation. Unused credits expire after 90 days.
{SELL_SUBSCRIPTIONS && (
<>
<br />
Cancel anytime.
</>
)}
</p> </p>
<DialogFooter></DialogFooter> <DialogFooter></DialogFooter>

2
frontend/src/components/payments/useStripeCheckout.ts
View File

@ -28,7 +28,7 @@ export default function useStripeCheckout() {
// Create a Checkout Session // Create a Checkout Session
const res: CreateCheckoutSessionResponse = await authenticatedFetch( const res: CreateCheckoutSessionResponse = await authenticatedFetch(
`${SAAS_BACKEND_URL}/create_checkout_session` + `${SAAS_BACKEND_URL}/payments/create_checkout_session` +
`?price_lookup_key=${priceLookupKey}` + `?price_lookup_key=${priceLookupKey}` +
`&rewardful_referral_id=${rewardfulReferralId}`, `&rewardful_referral_id=${rewardfulReferralId}`,
"POST" "POST"