This commit is contained in:
Karol Wypchlo 2021-03-03 16:12:24 +01:00
parent d55c3e217e
commit ccb3bfba71
1 changed files with 3 additions and 3 deletions

View File

@ -1,7 +1,6 @@
import dayjs from "dayjs"; import dayjs from "dayjs";
import Layout from "../components/Layout"; import Layout from "../components/Layout";
import useSWR from "swr"; import useSWR from "swr";
import { useEffect } from "react";
import ky from "ky/umd"; import ky from "ky/umd";
import { useState } from "react"; import { useState } from "react";
@ -55,6 +54,7 @@ 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(plans[0]);
const activePlan = plans.find(({ tier }) => user?.tier === tier); const activePlan = plans.find(({ tier }) => user?.tier === tier);
const isFreePlan = ({ tier }) => tier === 1;
const handleSubscribe = async () => { const handleSubscribe = async () => {
try { try {
const price = selectedPlan.stripe; const price = selectedPlan.stripe;
@ -75,14 +75,14 @@ export default function Payments() {
<div className="bg-white overflow-hidden shadow rounded-lg"> <div className="bg-white overflow-hidden shadow rounded-lg">
<div className="px-4 py-5 sm:p-6"> <div className="px-4 py-5 sm:p-6">
<dt className="text-sm font-medium text-gray-500 truncate">Current plan</dt> <dt className="text-sm font-medium text-gray-500 truncate">Current plan</dt>
<dd className="mt-1 text-3xl font-semibold text-gray-900">Free</dd> <dd className="mt-1 text-3xl font-semibold text-gray-900">{activePlan.name}</dd>
</div> </div>
</div> </div>
<div className="bg-white overflow-hidden shadow rounded-lg"> <div className="bg-white overflow-hidden shadow rounded-lg">
<div className="px-4 py-5 sm:p-6"> <div className="px-4 py-5 sm:p-6">
<dt className="text-sm font-medium text-gray-500 truncate">Subscription status</dt> <dt className="text-sm font-medium text-gray-500 truncate">Subscription status</dt>
<dd className="mt-1 text-3xl font-semibold text-gray-900 capitalize"> <dd className="mt-1 text-3xl font-semibold text-gray-900 capitalize">
{user?.subscriptionStatus ?? "—"} {isFreePlan(activePlan) ? "—" : user?.subscriptionStatus}
</dd> </dd>
</div> </div>
{user?.subscriptionCancelAtPeriodEnd && ( {user?.subscriptionCancelAtPeriodEnd && (