payments
This commit is contained in:
parent
27968dd087
commit
62068f4f54
|
@ -43,6 +43,7 @@ const fetcher = (url) => fetch(url).then((r) => r.json());
|
||||||
const apiPrefix = process.env.NODE_ENV === "development" ? "/api/stubs" : "";
|
const apiPrefix = process.env.NODE_ENV === "development" ? "/api/stubs" : "";
|
||||||
const isFreeTier = (tier) => tier === 1;
|
const isFreeTier = (tier) => tier === 1;
|
||||||
const isPaidTier = (tier) => !isFreeTier(tier);
|
const isPaidTier = (tier) => !isFreeTier(tier);
|
||||||
|
const freePlan = plans.find(({ tier }) => isFreeTier(tier));
|
||||||
|
|
||||||
const ActiveBadge = () => {
|
const ActiveBadge = () => {
|
||||||
return (
|
return (
|
||||||
|
@ -54,8 +55,8 @@ const ActiveBadge = () => {
|
||||||
|
|
||||||
export default function Payments() {
|
export default function Payments() {
|
||||||
const { data: user } = useSWR(`${apiPrefix}/user`, fetcher);
|
const { data: user } = useSWR(`${apiPrefix}/user`, fetcher);
|
||||||
const [selectedPlan, setSelectedPlan] = useState(plans[0]);
|
const [selectedPlan, setSelectedPlan] = useState(freePlan);
|
||||||
const activePlan = plans.find((plan) => user?.tier === plan?.tier);
|
const activePlan = user ? plans.find(({ tier }) => user.tier === tier) : freePlan;
|
||||||
const handleSubscribe = async () => {
|
const handleSubscribe = async () => {
|
||||||
try {
|
try {
|
||||||
const price = selectedPlan.stripe;
|
const price = selectedPlan.stripe;
|
||||||
|
@ -165,6 +166,7 @@ export default function Payments() {
|
||||||
} p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3`}
|
} p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3`}
|
||||||
>
|
>
|
||||||
<label className="flex items-center text-sm cursor-pointer">
|
<label className="flex items-center text-sm cursor-pointer">
|
||||||
|
{isFreeTier(activePlan.tier) && (
|
||||||
<input
|
<input
|
||||||
name="pricing_plan"
|
name="pricing_plan"
|
||||||
type="radio"
|
type="radio"
|
||||||
|
@ -173,6 +175,7 @@ export default function Payments() {
|
||||||
checked={plan === selectedPlan}
|
checked={plan === selectedPlan}
|
||||||
onChange={() => console.log(plan.name) || setSelectedPlan(plan)}
|
onChange={() => console.log(plan.name) || setSelectedPlan(plan)}
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
<span className="ml-3 font-medium text-gray-900">{plan.name}</span>
|
<span className="ml-3 font-medium text-gray-900">{plan.name}</span>
|
||||||
{activePlan === plan && <ActiveBadge />}
|
{activePlan === plan && <ActiveBadge />}
|
||||||
</label>
|
</label>
|
||||||
|
|
Reference in New Issue