import * as React from "react";
import bytes from "pretty-bytes";
import styled from "styled-components";
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";
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 }) => (
{children}
);
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 }) => (
);
const bandwidth = (value) => `${bytes(value, { bits: true })}/s`;
const storage = (value) => bytes(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();
if (userError || plansError) {
return (
Oooops!
Something went wrong, please try again later.
);
}
return (
Upgrade
{settings.isSubscriptionRequired && !activePlan && (
This Skynet portal requires a paid subscription.
If you're not ready for that yet, you can use your account on{" "}
SkynetFree.net
{" "}
to store up to 100GB for free.
)}
{!loading && (
{
const isHigherThanCurrent = plan.tier > activePlan?.tier;
const isCurrent = plan.tier === activePlan?.tier;
return (
{plan.name}
{plan.description}
{isHigherThanCurrent && "Upgrade"}
{isCurrent && "Current"}
{!isHigherThanCurrent && !isCurrent && "Choose"}
{plan.limits && (
Pin up to {storage(plan.limits.storageLimit)} of censorship-resistant storage
Support for up to {localizedNumber(plan.limits.maxNumberUploads)} files
{bandwidth(plan.limits.uploadBandwidth)} upload bandwidth
{bandwidth(plan.limits.downloadBandwidth)} download bandwidth
)}
);
})}
breakpoints={settings.isSubscriptionRequired ? PAID_PORTAL_BREAKPOINTS : FREE_PORTAL_BREAKPOINTS}
className="px-8 sm:px-4 md:px-0 lg:px-0"
/>
)}
);
};
const UpgradePage = () => (
);
UpgradePage.Layout = DashboardLayout;
export default UpgradePage;