LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

payments

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/dashboard/src/pages/payments.js
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,14 +166,16 @@ 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">
<input {isFreeTier(activePlan.tier) && (
name="pricing_plan" <input
type="radio" name="pricing_plan"
className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300" type="radio"
aria-describedby="plan-option-pricing-0 plan-option-limit-0" className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
checked={plan === selectedPlan} aria-describedby="plan-option-pricing-0 plan-option-limit-0"
onChange={() => console.log(plan.name) || setSelectedPlan(plan)} checked={plan === selectedPlan}
/> 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>