feat(dashboard-v2): add CurrentPlan component with live data on main screen

This commit is contained in:
Michał Leszczyk 2022-03-02 12:51:16 +01:00
parent 3128a2e780
commit e9753d9adb
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
10 changed files with 141 additions and 6 deletions

View File

@ -23,6 +23,7 @@
"@fontsource/source-sans-pro": "^4.5.3", "@fontsource/source-sans-pro": "^4.5.3",
"classnames": "^2.3.1", "classnames": "^2.3.1",
"copy-text-to-clipboard": "^3.0.1", "copy-text-to-clipboard": "^3.0.1",
"dayjs": "^1.10.8",
"gatsby": "^4.6.2", "gatsby": "^4.6.2",
"gatsby-plugin-postcss": "^5.7.0", "gatsby-plugin-postcss": "^5.7.0",
"http-status-codes": "^2.2.0", "http-status-codes": "^2.2.0",

View File

@ -6,7 +6,7 @@ import styled from "styled-components";
*/ */
export const Button = styled.button.attrs(({ $primary }) => ({ export const Button = styled.button.attrs(({ $primary }) => ({
type: "button", type: "button",
className: `px-6 py-3 rounded-full font-sans uppercase text-xs tracking-wide text-palette-600 className: `px-6 py-3 rounded-full font-sans uppercase text-xs tracking-wide text-palette-600 transition-[filter] hover:brightness-90
${$primary ? "bg-primary" : "bg-white border-2 border-black"}`, ${$primary ? "bg-primary" : "bg-white border-2 border-black"}`,
}))``; }))``;
Button.propTypes = { Button.propTypes = {

View File

@ -0,0 +1,50 @@
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import { useUser } from "../../contexts/user";
import useSubscriptionPlans from "../../hooks/useSubscriptionPlans";
import LatestPayment from "./LatestPayment";
import SuggestedPlan from "./SuggestedPlan";
dayjs.extend(relativeTime);
const CurrentPlan = () => {
const { user, error: userError } = useUser();
const { activePlan, plans, error: plansError } = useSubscriptionPlans(user);
if (!user || !activePlan) {
return (
// TODO: a nicer loading indicator
<div className="flex flex-col space-y-4 h-full justify-center items-center">Loading...</div>
);
}
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>
<h4>{activePlan.name}</h4>
<div className="text-palette-400">
{activePlan.price === 0 && <p>100GB 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>
))}
<LatestPayment user={user} />
<SuggestedPlan plans={plans} activePlan={activePlan} />
</div>
</div>
);
};
export default CurrentPlan;

View File

@ -0,0 +1,18 @@
import dayjs from "dayjs";
// TODO: this is not an accurate information, we need this data from the backend
const LatestPayment = ({ user }) => (
<div className="flex mt-6 justify-between items-center bg-palette-100/50 py-4 px-6 border-l-2 border-primary">
<div className="flex flex-col lg:flex-row">
<span>Latest payment</span>
<span className="lg:before:content-['-'] lg:before:px-2 text-xs lg:text-base">
{dayjs(user.subscribedUntil).subtract(1, "month").format("MM/DD/YYYY")}
</span>
</div>
<div>
<span className="rounded py-1 px-2 bg-primary/10 font-sans text-primary uppercase text-xs">Success</span>
</div>
</div>
);
export default LatestPayment;

View File

@ -0,0 +1,24 @@
import { Link } from "gatsby";
import { useMemo } from "react";
import { Button } from "../Button";
const SuggestedPlan = ({ plans, activePlan }) => {
const nextPlan = useMemo(() => plans.find(({ tier }) => tier > activePlan.tier), [plans, activePlan]);
if (!nextPlan) {
return null;
}
return (
<div className="mt-7">
<p className="font-sans font-semibold text-xs uppercase text-primary">Discover {nextPlan.name}</p>
<p className="pt-1 text-xs sm:text-base">{nextPlan.description}</p>
<Button $primary as={Link} to={`/upgrade?selectedPlan=${nextPlan.id}`} className="mt-6">
Upgrade
</Button>
</div>
);
};
export default SuggestedPlan;

View File

@ -0,0 +1,3 @@
import CurrentPlan from "./CurrentPlan";
export default CurrentPlan;

View File

@ -0,0 +1,28 @@
import { useEffect, useState } from "react";
import useSWR from "swr";
import freeTier from "../lib/tiers";
export default function useSubscriptionPlans(user) {
const { data: paidPlans, error, mutate } = useSWR("stripe/prices");
const [plans, setPlans] = useState([freeTier]);
const [activePlan, setActivePlan] = useState(freeTier);
useEffect(() => {
if (paidPlans) {
setPlans((plans) => [...plans, ...paidPlans].sort((planA, planB) => planA.tier - planB.tier));
}
}, [paidPlans]);
useEffect(() => {
if (user) {
setActivePlan(plans.find((plan) => plan.tier === user.tier));
}
}, [plans, user]);
return {
error,
mutate,
plans,
activePlan,
};
}

View File

@ -0,0 +1,9 @@
const freeTier = {
id: "starter",
tier: 1,
name: "Free",
price: 0,
description: "100 GB - Casual user with a few files you want to access from around the world? Try the Free tier",
};
export default freeTier;

View File

@ -10,6 +10,7 @@ import DashboardLayout from "../layouts/DashboardLayout";
import Slider from "../components/Slider/Slider"; import Slider from "../components/Slider/Slider";
import CurrentUsage from "../components/CurrentUsage"; import CurrentUsage from "../components/CurrentUsage";
import Uploader from "../components/Uploader/Uploader"; import Uploader from "../components/Uploader/Uploader";
import CurrentPlan from "../components/CurrentPlan";
const IndexPage = () => { const IndexPage = () => {
const showRecentActivity = useMedia(`(min-width: ${theme.screens.md})`); const showRecentActivity = useMedia(`(min-width: ${theme.screens.md})`);
@ -49,11 +50,7 @@ const IndexPage = () => {
} }
className="h-[330px]" className="h-[330px]"
> >
<ul> <CurrentPlan />
<li>Current</li>
<li>Plan</li>
<li>Info</li>
</ul>
</Panel>, </Panel>,
]} ]}
/> />

View File

@ -6296,6 +6296,11 @@ date-fns@^2.25.0:
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2" resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw== integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
dayjs@^1.10.8:
version "1.10.8"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.8.tgz#267df4bc6276fcb33c04a6735287e3f429abec41"
integrity sha512-wbNwDfBHHur9UOzNUjeKUOJ0fCb0a52Wx0xInmQ7Y8FstyajiV1NmK1e00cxsr9YrE9r7yAChE0VvpuY5Rnlow==
debug@2, debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9: debug@2, debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
version "2.6.9" version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"