This commit is contained in:
Karol Wypchlo 2021-03-04 15:07:57 +01:00
parent 27968dd087
commit 62068f4f54
1 changed files with 13 additions and 10 deletions

View File

@ -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>