53 lines
1.7 KiB
JavaScript
53 lines
1.7 KiB
JavaScript
import dayjs from "dayjs";
|
|
import relativeTime from "dayjs/plugin/relativeTime";
|
|
|
|
import { useUser } from "../../contexts/user";
|
|
import useActivePlan from "../../hooks/useActivePlan";
|
|
import humanBytes from "../../lib/humanBytes";
|
|
import { ContainerLoadingIndicator } from "../LoadingIndicator";
|
|
|
|
import LatestPayment from "./LatestPayment";
|
|
import SuggestedPlan from "./SuggestedPlan";
|
|
|
|
dayjs.extend(relativeTime);
|
|
|
|
const CurrentPlan = () => {
|
|
const { user, error: userError } = useUser();
|
|
const { plans, activePlan, error: plansError } = useActivePlan(user);
|
|
|
|
if (!user || !activePlan) {
|
|
return <ContainerLoadingIndicator />;
|
|
}
|
|
|
|
if (userError || plansError) {
|
|
return (
|
|
<div className="flex text-palette-300 flex-col space-y-4 h-full justify-center items-center">
|
|
<p>An error occurred while loading this data.</p>
|
|
<p>We'll retry automatically.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<h4>{activePlan.name}</h4>
|
|
<div className="text-palette-400 justify-between flex flex-col grow">
|
|
{activePlan.price === 0 && activePlan.limits && (
|
|
<p>{humanBytes(activePlan.limits.storageLimit)} without paying a dime! 🎉</p>
|
|
)}
|
|
{activePlan.price !== 0 &&
|
|
(user.subscriptionCancelAtPeriodEnd ? (
|
|
<p>Your subscription expires {dayjs(user.subscribedUntil).fromNow()}</p>
|
|
) : (
|
|
<p className="first-letter:uppercase">{dayjs(user.subscribedUntil).fromNow(true)} until the next payment</p>
|
|
))}
|
|
|
|
{user.subscriptionStatus && <LatestPayment user={user} />}
|
|
<SuggestedPlan plans={plans} activePlan={activePlan} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CurrentPlan;
|