refactor(dashboard-v2): move upgrade screen under /payments url

This commit is contained in:
Michał Leszczyk 2022-04-15 16:53:49 +02:00
parent 525583af88
commit 910270bca4
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
5 changed files with 226 additions and 237 deletions

View File

@ -14,7 +14,7 @@ const SuggestedPlan = ({ plans, activePlan }) => {
<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">
<Button $primary as={Link} to="/payments" className="mt-6">
Upgrade
</Button>
</div>

View File

@ -99,7 +99,7 @@ export default function CurrentUsage() {
<span>Files</span>
<span className="inline-flex place-content-between w-[37%]">
<Link
to="/upgrade"
to="/payments"
className={cn(
"text-primary underline-offset-3 decoration-dotted hover:text-primary-light hover:underline",
{ invisible: !nextPlan }

View File

@ -17,7 +17,7 @@ export default function useUpgradeRedirect() {
if (isDataLoaded) {
if (settings.isSubscriptionRequired && !hasPaidSubscription) {
navigate("/upgrade");
navigate("/payments");
} else {
setVerifyingSubscription(false);
}

View File

@ -1,11 +1,232 @@
import * as React from "react";
import styled from "styled-components";
import { useStripe } from "@stripe/react-stripe-js";
import cn from "classnames";
import { useUser } from "../contexts/user";
import { PlansProvider } from "../contexts/plans/PlansProvider";
import useActivePlan from "../hooks/useActivePlan";
import DashboardLayout from "../layouts/DashboardLayout";
import { Panel } from "../components/Panel";
import Slider from "../components/Slider/Slider";
import { CheckmarkIcon } from "../components/Icons";
import { Button } from "../components/Button";
import { usePortalSettings } from "../contexts/portal-settings";
import { Alert } from "../components/Alert";
import HighlightedLink from "../components/HighlightedLink";
import { Metadata } from "../components/Metadata";
import accountsService from "../services/accountsService";
import humanBytes from "../lib/humanBytes";
import { Modal } from "../components/Modal";
const PaymentsPage = () => {
return <>PAYMENTS HISTORY</>;
const PAID_PORTAL_BREAKPOINTS = [
{
name: "lg",
scrollable: true,
visibleSlides: 3,
},
{
name: "sm",
scrollable: true,
visibleSlides: 2,
},
{
scrollable: true,
visibleSlides: 1,
},
];
const FREE_PORTAL_BREAKPOINTS = [
{
name: "xl",
scrollable: true,
visibleSlides: 4,
},
...PAID_PORTAL_BREAKPOINTS,
];
const PlanSummaryItem = ({ children }) => (
<li className="flex items-start gap-1 my-2">
<CheckmarkIcon size={32} className="text-primary shrink-0" />
<div className="mt-1">{children}</div>
</li>
);
const Description = styled.div`
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
flex-shrink: 0;
height: 6rem;
`;
const Price = ({ price }) => (
<div className="my-8 text-center">
<h2>
<sup className="text-lg -top-4">$</sup>
{price}
</h2>
<p className="uppercase text-sm font-light -mt-2">per month</p>
</div>
);
const bandwidth = (value) => `${humanBytes(value, { bits: true })}/s`;
const storage = (value) => humanBytes(value, { binary: true });
const localizedNumber = (value) => value.toLocaleString();
const PlansSlider = () => {
const { user, error: userError } = useUser();
const { plans, loading, activePlan, error: plansError } = useActivePlan(user);
const { settings } = usePortalSettings();
const [showPaymentError, setShowPaymentError] = React.useState(false);
const stripe = useStripe();
// This will be the base plan that we compare upload/download speeds against.
// On will either be the user's active plan or lowest of available tiers.
const basePlan = activePlan || plans[0];
if (userError || plansError) {
return (
<div className="flex flex-col items-center justify-center">
<h3>Oooops!</h3>
<p>Something went wrong, please try again later.</p>
</div>
);
}
const handleSubscribe = async (selectedPlan) => {
try {
const { sessionId } = await accountsService
.post("stripe/checkout", {
json: {
price: selectedPlan.stripe,
},
})
.json();
await stripe.redirectToCheckout({ sessionId });
} catch (error) {
setShowPaymentError(true);
console.error(error);
}
};
return (
<div className="w-full mb-24">
<Metadata>
<title>Payments</title>
</Metadata>
{settings.isSubscriptionRequired && !activePlan && (
<Alert $variant="info" className="mb-6">
<p className="font-semibold mt-0">This Skynet portal requires a paid subscription.</p>
<p>
If you're not ready for that yet, you can use your account on{" "}
<HighlightedLink as="a" href="https://skynetfree.net">
SkynetFree.net
</HighlightedLink>{" "}
to store up to 100GB for free.
</p>
</Alert>
)}
{!loading && (
<Slider
slides={plans.map((plan) => {
const isHigherThanCurrent = plan.tier > activePlan?.tier;
const isCurrentPlanPaid = activePlan?.tier > 1;
const isCurrent = plan.tier === activePlan?.tier;
const isLower = plan.tier < activePlan?.tier;
const speed = plan.limits.uploadBandwidth;
const currentSpeed = basePlan?.limits?.uploadBandwidth;
const speedChange = speed > currentSpeed ? speed / currentSpeed : currentSpeed / speed;
const hasActivePlan = Boolean(activePlan);
return (
<Panel
className={cn("min-h-[620px] px-6 py-10 flex flex-col relative h-full shadow-md", {
"border border-primary": isCurrent,
})}
wrapperClassName="h-full"
>
{isCurrent && (
<div className="absolute top-0 left-0 w-full h-6 bg-white px-6 rounded-t">
<span className="font-sans uppercase font-semibold text-xs bg-palette-100 px-2 py-1.5 rounded-b-md">
Current plan
</span>
</div>
)}
<h3>{plan.name}</h3>
<Description>{plan.description}</Description>
<Price price={plan.price} />
<div className="text-center my-6">
{(!hasActivePlan || isHigherThanCurrent) &&
(isCurrentPlanPaid ? (
<Button $primary as="a" href="/api/stripe/billing">
Upgrade
</Button>
) : (
<Button $primary onClick={() => handleSubscribe(plan)}>
Upgrade
</Button>
))}
{isCurrent && <Button disabled>Current</Button>}
{isLower && (
<Button as="a" href="/api/stripe/billing">
Choose
</Button>
)}
</div>
{plan.limits && (
<ul className="-ml-2">
<PlanSummaryItem>
Pin up to {storage(plan.limits.storageLimit)} on decentralized storage
</PlanSummaryItem>
<PlanSummaryItem>
Support for up to {localizedNumber(plan.limits.maxNumberUploads)} files
</PlanSummaryItem>
<PlanSummaryItem>
{speed === currentSpeed
? `${bandwidth(plan.limits.uploadBandwidth)} upload and ${bandwidth(
plan.limits.downloadBandwidth
)} download`
: `${speedChange}X ${
speed > currentSpeed ? "faster" : "slower"
} upload and download speeds (${bandwidth(plan.limits.uploadBandwidth)} and ${bandwidth(
plan.limits.downloadBandwidth
)})`}
</PlanSummaryItem>
<PlanSummaryItem>
{plan.limits.maxUploadSize === plan.limits.storageLimit
? "No limit to file upload size"
: `Upload files up to ${storage(plan.limits.maxUploadSize)}`}
</PlanSummaryItem>
</ul>
)}
</Panel>
);
})}
breakpoints={settings.isSubscriptionRequired ? PAID_PORTAL_BREAKPOINTS : FREE_PORTAL_BREAKPOINTS}
className="px-8 sm:px-4 md:px-0 lg:px-0 mt-10"
/>
)}
{showPaymentError && (
<Modal onClose={() => setShowPaymentError(false)}>
<h3>Oops! 😔</h3>
<p className="font-semibold">There was an error contacting our payments provider</p>
<p>Please try again later</p>
</Modal>
)}
</div>
);
};
const PaymentsPage = () => (
<PlansProvider>
<PlansSlider />
</PlansProvider>
);
PaymentsPage.Layout = DashboardLayout;
export default PaymentsPage;

View File

@ -1,232 +0,0 @@
import * as React from "react";
import styled from "styled-components";
import { useStripe } from "@stripe/react-stripe-js";
import cn from "classnames";
import { useUser } from "../contexts/user";
import { PlansProvider } from "../contexts/plans/PlansProvider";
import useActivePlan from "../hooks/useActivePlan";
import DashboardLayout from "../layouts/DashboardLayout";
import { Panel } from "../components/Panel";
import Slider from "../components/Slider/Slider";
import { CheckmarkIcon } from "../components/Icons";
import { Button } from "../components/Button";
import { usePortalSettings } from "../contexts/portal-settings";
import { Alert } from "../components/Alert";
import HighlightedLink from "../components/HighlightedLink";
import { Metadata } from "../components/Metadata";
import accountsService from "../services/accountsService";
import humanBytes from "../lib/humanBytes";
import { Modal } from "../components/Modal";
const PAID_PORTAL_BREAKPOINTS = [
{
name: "lg",
scrollable: true,
visibleSlides: 3,
},
{
name: "sm",
scrollable: true,
visibleSlides: 2,
},
{
scrollable: true,
visibleSlides: 1,
},
];
const FREE_PORTAL_BREAKPOINTS = [
{
name: "xl",
scrollable: true,
visibleSlides: 4,
},
...PAID_PORTAL_BREAKPOINTS,
];
const PlanSummaryItem = ({ children }) => (
<li className="flex items-start gap-1 my-2">
<CheckmarkIcon size={32} className="text-primary shrink-0" />
<div className="mt-1">{children}</div>
</li>
);
const Description = styled.div`
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
flex-shrink: 0;
height: 6rem;
`;
const Price = ({ price }) => (
<div className="my-8 text-center">
<h2>
<sup className="text-lg -top-4">$</sup>
{price}
</h2>
<p className="uppercase text-sm font-light -mt-2">per month</p>
</div>
);
const bandwidth = (value) => `${humanBytes(value, { bits: true })}/s`;
const storage = (value) => humanBytes(value, { binary: true });
const localizedNumber = (value) => value.toLocaleString();
const PlansSlider = () => {
const { user, error: userError } = useUser();
const { plans, loading, activePlan, error: plansError } = useActivePlan(user);
const { settings } = usePortalSettings();
const [showPaymentError, setShowPaymentError] = React.useState(true);
const stripe = useStripe();
// This will be the base plan that we compare upload/download speeds against.
// On will either be the user's active plan or lowest of available tiers.
const basePlan = activePlan || plans[0];
if (userError || plansError) {
return (
<div className="flex flex-col items-center justify-center">
<h3>Oooops!</h3>
<p>Something went wrong, please try again later.</p>
</div>
);
}
const handleSubscribe = async (selectedPlan) => {
try {
const { sessionId } = await accountsService
.post("stripe/checkout", {
json: {
price: selectedPlan.stripe,
},
})
.json();
await stripe.redirectToCheckout({ sessionId });
} catch (error) {
console.log(error);
setShowPaymentError(true);
}
};
return (
<div className="w-full mb-24">
<Metadata>
<title>Upgrade</title>
</Metadata>
{settings.isSubscriptionRequired && !activePlan && (
<Alert $variant="info" className="mb-6">
<p className="font-semibold mt-0">This Skynet portal requires a paid subscription.</p>
<p>
If you're not ready for that yet, you can use your account on{" "}
<HighlightedLink as="a" href="https://skynetfree.net">
SkynetFree.net
</HighlightedLink>{" "}
to store up to 100GB for free.
</p>
</Alert>
)}
{!loading && (
<Slider
slides={plans.map((plan) => {
const isHigherThanCurrent = plan.tier > activePlan?.tier;
const isCurrentPlanPaid = activePlan?.tier > 1;
const isCurrent = plan.tier === activePlan?.tier;
const isLower = plan.tier < activePlan?.tier;
const speed = plan.limits.uploadBandwidth;
const currentSpeed = basePlan?.limits?.uploadBandwidth;
const speedChange = speed > currentSpeed ? speed / currentSpeed : currentSpeed / speed;
const hasActivePlan = Boolean(activePlan);
return (
<Panel
className={cn("min-h-[620px] px-6 py-10 flex flex-col relative h-full shadow-md", {
"border border-primary": isCurrent,
})}
wrapperClassName="h-full"
>
{isCurrent && (
<div className="absolute top-0 left-0 w-full h-6 bg-white px-6 rounded-t">
<span className="font-sans uppercase font-semibold text-xs bg-palette-100 px-2 py-1.5 rounded-b-md">
Current plan
</span>
</div>
)}
<h3>{plan.name}</h3>
<Description>{plan.description}</Description>
<Price price={plan.price} />
<div className="text-center my-6">
{(!hasActivePlan || isHigherThanCurrent) &&
(isCurrentPlanPaid ? (
<Button $primary as="a" href="/api/stripe/billing">
Upgrade
</Button>
) : (
<Button $primary onClick={() => handleSubscribe(plan)}>
Upgrade
</Button>
))}
{isCurrent && <Button disabled>Current</Button>}
{isLower && (
<Button as="a" href="/api/stripe/billing">
Choose
</Button>
)}
</div>
{plan.limits && (
<ul className="-ml-2">
<PlanSummaryItem>
Pin up to {storage(plan.limits.storageLimit)} on decentralized storage
</PlanSummaryItem>
<PlanSummaryItem>
Support for up to {localizedNumber(plan.limits.maxNumberUploads)} files
</PlanSummaryItem>
<PlanSummaryItem>
{speed === currentSpeed
? `${bandwidth(plan.limits.uploadBandwidth)} upload and ${bandwidth(
plan.limits.downloadBandwidth
)} download`
: `${speedChange}X ${
speed > currentSpeed ? "faster" : "slower"
} upload and download speeds (${bandwidth(plan.limits.uploadBandwidth)} and ${bandwidth(
plan.limits.downloadBandwidth
)})`}
</PlanSummaryItem>
<PlanSummaryItem>
{plan.limits.maxUploadSize === plan.limits.storageLimit
? "No limit to file upload size"
: `Upload files up to ${storage(plan.limits.maxUploadSize)}`}
</PlanSummaryItem>
</ul>
)}
</Panel>
);
})}
breakpoints={settings.isSubscriptionRequired ? PAID_PORTAL_BREAKPOINTS : FREE_PORTAL_BREAKPOINTS}
className="px-8 sm:px-4 md:px-0 lg:px-0 mt-10"
/>
)}
{showPaymentError && (
<Modal onClose={() => setShowPaymentError(false)}>
<h3>Oops! 😔</h3>
<p className="font-semibold">There was an error contacting our payments provider</p>
<p>Please try again later</p>
</Modal>
)}
</div>
);
};
const UpgradePage = () => (
<PlansProvider>
<PlansSlider />
</PlansProvider>
);
UpgradePage.Layout = DashboardLayout;
export default UpgradePage;