import React, { useEffect, useState } from "react"; import Head from "next/head"; import useTranslation from "next-translate/useTranslation"; 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 { t } = useTranslation(); const plans = [ { key: 1, name: t("common:starter"), price: t("common:free"), priceExplanation: t("billing:starter.price-explanation"), text: t("billing:starter.text"), subtext: t("billing:starter.subtext"), buttonTextMain: t("common:downgrade"), buttonTextSecondary: t("common:learn-more"), current: currentPlan == STRIPE_PRODUCT_STARTER, }, { key: 2, name: t("common:professional"), price: "$9", priceExplanation: t("billing:professional.price-explanation"), subtext: t("billing:professional.subtext"), text: t("billing:professional.text"), buttonTextMain: t("common:upgrade"), buttonTextSecondary: t("common:learn-more"), current: currentPlan == STRIPE_PRODUCT_PRO, }, { key: 3, name: t("common:enterprise"), price: t("common:custom-pricing"), text: t("billing:enterprise.text"), buttonTextMain: t("common:schedule-demo"), buttonTextSecondary: t("common: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 (
{t("common:head-title", { title: t("billing:title") })}

{t("billing:title")}

{t("billing:description")}

{t("billing:subscription")}

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

{t("billing:current-usage")}

{numUsers}

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

{/*

1

Organization projects

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