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

remove old non-subscription code

Browse Source
This commit is contained in:
Abi Raja 2024-07-22 14:47:09 -04:00
parent f9c35839de
commit 54557de762
1 changed files with 98 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

271
frontend/src/components/hosted/payments/PricingDialog.tsx
View File

@ -15,8 +15,6 @@ import { useStore } from "../../../store/store";
const LOGOS = ["microsoft", "amazon", "mit", "stanford", "bytedance", "baidu"]; const LOGOS = ["microsoft", "amazon", "mit", "stanford", "bytedance", "baidu"];
const SELL_SUBSCRIPTIONS = true;
const PricingDialog: React.FC = () => { const PricingDialog: React.FC = () => {
const { checkout, isLoadingCheckout } = useStripeCheckout(); const { checkout, isLoadingCheckout } = useStripeCheckout();
const [paymentInterval, setPaymentInterval] = React.useState< const [paymentInterval, setPaymentInterval] = React.useState<
@ -45,190 +43,117 @@ const PricingDialog: React.FC = () => {
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
{SELL_SUBSCRIPTIONS && ( <div className="flex justify-center gap-x-2 mt-2">
<div className="flex justify-center gap-x-2 mt-2"> <Button
<Button variant={paymentInterval === "monthly" ? "default" : "secondary"}
variant={paymentInterval === "monthly" ? "default" : "secondary"} onClick={() => setPaymentInterval("monthly")}
onClick={() => setPaymentInterval("monthly")} >
> Monthly
Monthly </Button>
</Button> <Button
<Button variant={paymentInterval === "yearly" ? "default" : "secondary"}
variant={paymentInterval === "yearly" ? "default" : "secondary"} onClick={() => setPaymentInterval("yearly")}
onClick={() => setPaymentInterval("yearly")} >
> Yearly (2 months free)
Yearly (2 months free) </Button>
</Button> </div>
</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">
{!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">
<div className="my-4"> {paymentInterval === "monthly" ? "$15" : "$150"}
<span className="text-4xl font-bold">$15</span> </span>
</div> <span className="text-gray-500">
<a {paymentInterval === "monthly" ? "/ month" : "/ year"}
href="https://buy.stripe.com/8wM6sre70gBW1nqaEE" </span>
target="_blank" </div>
>
<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>
<div className="bg-white rounded-lg shadow p-6"> <button
<h2 className="font-semibold">Pro</h2> className="bg-black text-white rounded py-2 px-4 w-full text-sm
<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>
<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" />
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">
{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
flex justify-center items-center gap-x-2" flex justify-center items-center gap-x-2"
onClick={() => onClick={() =>
checkout( checkout(
paymentInterval === "monthly" paymentInterval === "monthly"
? "hobby_monthly" ? "hobby_monthly"
: "hobby_yearly" : "hobby_yearly"
) )
} }
> >
Subscribe {isLoadingCheckout && <Spinner />} Subscribe {isLoadingCheckout && <Spinner />}
</button> </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" />
100 credits / mo 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" />
OpenAI models OpenAI models
</li> </li>
<li className="flex items-center"> <li className="flex items-center">
<FaCheckCircle className="text-black mr-2" /> <FaCheckCircle className="text-black mr-2" />
Claude models Claude models
</li> </li>
<li className="flex items-center"> <li className="flex items-center">
<FaCheckCircle className="text-black mr-2" /> <FaCheckCircle className="text-black mr-2" />
Chat support Chat support
</li> </li>
</ul> </ul>
</div> </div>
<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"> <span className="text-4xl font-bold">
{paymentInterval === "monthly" ? "$40" : "$400"} {paymentInterval === "monthly" ? "$40" : "$400"}
</span> </span>
<span className="text-gray-500"> <span className="text-gray-500">
{paymentInterval === "monthly" ? "/ month" : "/ year"} {paymentInterval === "monthly" ? "/ month" : "/ year"}
</span> </span>
</div> </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
flex justify-center items-center gap-x-2" flex justify-center items-center gap-x-2"
onClick={() => onClick={() =>
checkout( checkout(
paymentInterval === "monthly" paymentInterval === "monthly" ? "pro_monthly" : "pro_yearly"
? "pro_monthly" )
: "pro_yearly" }
) >
} Subscribe {isLoadingCheckout && <Spinner />}
> </button>
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 / mo 300 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" />
OpenAI models OpenAI models
</li> </li>
<li className="flex items-center"> <li className="flex items-center">
<FaCheckCircle className="text-black mr-2" /> <FaCheckCircle className="text-black mr-2" />
Claude models Claude models
</li> </li>
<li className="flex items-center"> <li className="flex items-center">
<FaCheckCircle className="text-black mr-2" /> <FaCheckCircle className="text-black mr-2" />
Chat support Chat support
</li> </li>
</ul> </ul>
</div> </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.{" "} 1 credit = 1 code generation. <br />
{!SELL_SUBSCRIPTIONS && <>Unused credits expire after 90 days.</>} Cancel subscription at any time.
{SELL_SUBSCRIPTIONS && (
<>
<br />
Cancel subscription at any time.
</>
)}
</p> </p>
<DialogFooter></DialogFooter> <DialogFooter></DialogFooter>