feat(dashboard-v2): add Stripe integration

This commit is contained in:
Michał Leszczyk 2022-04-15 16:09:03 +02:00
parent 916a420b72
commit 5a2a2b6508
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
6 changed files with 128 additions and 25 deletions

View File

@ -1,5 +1,7 @@
import * as React from "react";
import { SWRConfig } from "swr";
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import "@fontsource/sora/300.css"; // light
import "@fontsource/sora/400.css"; // normal
import "@fontsource/sora/500.css"; // medium
@ -11,15 +13,19 @@ import swrConfig from "./src/lib/swrConfig";
import { MODAL_ROOT_ID } from "./src/components/Modal";
import { PortalSettingsProvider } from "./src/contexts/portal-settings";
const stripePromise = loadStripe(process.env.GATSBY_STRIPE_PUBLISHABLE_KEY);
export function wrapPageElement({ element, props }) {
const Layout = element.type.Layout ?? React.Fragment;
return (
<PortalSettingsProvider>
<SWRConfig value={swrConfig}>
<Elements stripe={stripePromise}>
<Layout {...props}>
{element}
<div id={MODAL_ROOT_ID} />
</Layout>
</Elements>
</SWRConfig>
</PortalSettingsProvider>
);

View File

@ -1,5 +1,7 @@
import * as React from "react";
import { SWRConfig } from "swr";
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import "@fontsource/sora/300.css"; // light
import "@fontsource/sora/400.css"; // normal
import "@fontsource/sora/500.css"; // medium
@ -11,15 +13,19 @@ import swrConfig from "./src/lib/swrConfig";
import { MODAL_ROOT_ID } from "./src/components/Modal";
import { PortalSettingsProvider } from "./src/contexts/portal-settings";
const stripePromise = loadStripe(process.env.GATSBY_STRIPE_PUBLISHABLE_KEY);
export function wrapPageElement({ element, props }) {
const Layout = element.type.Layout ?? React.Fragment;
return (
<PortalSettingsProvider>
<SWRConfig value={swrConfig}>
<Elements stripe={stripePromise}>
<Layout {...props}>
{element}
<div id={MODAL_ROOT_ID} />
</Layout>
</Elements>
</SWRConfig>
</PortalSettingsProvider>
);

View File

@ -22,6 +22,8 @@
"dependencies": {
"@fontsource/sora": "^4.5.3",
"@fontsource/source-sans-pro": "^4.5.3",
"@stripe/react-stripe-js": "^1.7.1",
"@stripe/stripe-js": "^1.27.0",
"classnames": "^2.3.1",
"copy-text-to-clipboard": "^3.0.1",
"dayjs": "^1.10.8",

View File

@ -19,14 +19,16 @@ const aggregatePlansAndLimits = (plans, limits, { includeFreePlan }) => {
// Decorate each plan with its corresponding limits data, if available.
if (limits?.length) {
return limits.map((limitsDescriptor, index) => {
return limits
.map((limitsDescriptor, index) => {
const asssociatedPlan = sortedPlans.find((plan) => plan.tier === index) || {};
return {
...asssociatedPlan,
limits: limitsDescriptor || null,
};
});
})
.slice(includeFreePlan ? 1 : 2);
}
// If we don't have the limits data yet, set just return the plans.

View File

@ -1,5 +1,7 @@
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";
@ -13,7 +15,9 @@ 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 = [
{
@ -77,6 +81,11 @@ 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 (
@ -87,6 +96,22 @@ const PlansSlider = () => {
);
}
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>
@ -108,40 +133,90 @@ const PlansSlider = () => {
<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="min-h-[620px] px-6 py-10 flex flex-col">
<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">
<Button $primary={isHigherThanCurrent} disabled={isCurrent}>
{isHigherThanCurrent && "Upgrade"}
{isCurrent && "Current"}
{!isHigherThanCurrent && !isCurrent && "Choose"}
{(!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)} of censorship-resistant storage
Pin up to {storage(plan.limits.storageLimit)} on decentralized storage
</PlanSummaryItem>
<PlanSummaryItem>
Support for up to {localizedNumber(plan.limits.maxNumberUploads)} files
</PlanSummaryItem>
<PlanSummaryItem>{bandwidth(plan.limits.uploadBandwidth)} upload bandwidth</PlanSummaryItem>
<PlanSummaryItem>{bandwidth(plan.limits.downloadBandwidth)} download bandwidth</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"
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>
);
};

View File

@ -3107,6 +3107,18 @@
resolve-from "^5.0.0"
store2 "^2.12.0"
"@stripe/react-stripe-js@^1.7.1":
version "1.7.1"
resolved "https://registry.yarnpkg.com/@stripe/react-stripe-js/-/react-stripe-js-1.7.1.tgz#6e1db8f4a0eaf2193b153173d4aa7c38b681310d"
integrity sha512-GiUPoMo0xVvmpRD6JR9JAhAZ0W3ZpnYZNi0KE+91+tzrSFVpChKZbeSsJ5InlZhHFk9NckJCt1wOYBTqNsvt3A==
dependencies:
prop-types "^15.7.2"
"@stripe/stripe-js@^1.27.0":
version "1.27.0"
resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.27.0.tgz#ab0c82fa89fd40260de4414f69868b769e810550"
integrity sha512-SEiybUBu+tlsFKuzdFFydxxjkbrdzHo0tz/naYC5Dt9or/Ux2gcKJBPYQ4RmqQCNHFxgyNj6UYsclywwhe2inQ==
"@szmarczak/http-timer@^1.1.2":
version "1.1.2"
resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"