feat(dashboard-v2): add Stripe integration

2022-04-15 16:09:03 +02:00 · 2022-04-15 16:09:03 +02:00 · 5a2a2b6508
parent 916a420b72
commit 5a2a2b6508
6 changed files with 128 additions and 25 deletions
--- a/packages/dashboard-v2/gatsby-browser.js
+++ b/packages/dashboard-v2/gatsby-browser.js
@ -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}>
-        <Layout {...props}>
-          {element}
-          <div id={MODAL_ROOT_ID} />
-        </Layout>
+        <Elements stripe={stripePromise}>
+          <Layout {...props}>
+            {element}
+            <div id={MODAL_ROOT_ID} />
+          </Layout>
+        </Elements>
      </SWRConfig>
    </PortalSettingsProvider>
  );
--- a/packages/dashboard-v2/gatsby-ssr.js
+++ b/packages/dashboard-v2/gatsby-ssr.js
@ -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}>
-        <Layout {...props}>
-          {element}
-          <div id={MODAL_ROOT_ID} />
-        </Layout>
+        <Elements stripe={stripePromise}>
+          <Layout {...props}>
+            {element}
+            <div id={MODAL_ROOT_ID} />
+          </Layout>
+        </Elements>
      </SWRConfig>
    </PortalSettingsProvider>
  );
--- a/packages/dashboard-v2/package.json
+++ b/packages/dashboard-v2/package.json
@ -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",
--- a/packages/dashboard-v2/src/contexts/plans/PlansProvider.js
+++ b/packages/dashboard-v2/src/contexts/plans/PlansProvider.js
@ -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) => {
-      const asssociatedPlan = sortedPlans.find((plan) => plan.tier === index) || {};
+    return limits
+      .map((limitsDescriptor, index) => {
+        const asssociatedPlan = sortedPlans.find((plan) => plan.tier === index) || {};

-      return {
-        ...asssociatedPlan,
-        limits: limitsDescriptor || null,
-      };
-    });
+        return {
+          ...asssociatedPlan,
+          limits: limitsDescriptor || null,
+        };
+      })
+      .slice(includeFreePlan ? 1 : 2);
  }

  // If we don't have the limits data yet, set just return the plans.
--- a/packages/dashboard-v2/src/pages/upgrade.js
+++ b/packages/dashboard-v2/src/pages/upgrade.js
@ -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"}
-                  </Button>
+                  {(!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>
  );
 };
--- a/packages/dashboard-v2/yarn.lock
+++ b/packages/dashboard-v2/yarn.lock
@ -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"