import React, { useEffect, useState } from "react"; import Head from "next/head"; import Plan from "~/components/billing/Plan"; import NavHeader from "~/components/navigation/NavHeader"; import { STRIPE_PRODUCT_PRO, STRIPE_PRODUCT_STARTER } from "~/utilities/config"; import getOrganizationSubscriptions from "../../api/organization/GetOrgSubscription"; import getOrganizationUsers from "../../api/organization/GetOrgUsers"; export default function SettingsBilling() { let [currentPlan, setCurrentPlan] = useState(""); let [numUsers, setNumUsers] = useState(""); const plans = [ { key: 1, name: "Starter", price: "Free", priceExplanation: "up to 5 team members", text: "Manage any project with 5 members for free!", subtext: "$5 per member/month afterwards.", buttonTextMain: "Downgrade", buttonTextSecondary: "Learn More", current: currentPlan == STRIPE_PRODUCT_STARTER, }, { key: 2, name: "Professional", price: "$9", priceExplanation: "/member/month", subtext: "Includes unlimited projects & members.", text: "Keep up with key management as you grow.", buttonTextMain: "Upgrade", buttonTextSecondary: "Learn More", current: currentPlan == STRIPE_PRODUCT_PRO, }, { key: 3, name: "Enterprise", price: "Custom Pricing", text: "More control for advanced organizations.", buttonTextMain: "Schedule a Demo", buttonTextSecondary: "Learn More", current: false, }, ]; useEffect(async () => { const subscriptions = await getOrganizationSubscriptions({ orgId: localStorage.getItem("orgData.id"), }); setCurrentPlan(subscriptions.data[0].plan.product); const orgUsers = await getOrganizationUsers({ orgId: localStorage.getItem("orgData.id"), }); setNumUsers(orgUsers.length); }, []); return (
Settings - Billing

Usage & Billing

View and manage your {"organization's"} subscription here.

Subscription

{plans.map((plan) => ( ))}

Current Usage

{numUsers}

{numUsers > 1 ? "Organization members" : "Organization member"}

{/*

1

Organization projects

*/}
); } SettingsBilling.requireAuth = true;