calcom/pages/settings/teams.tsx
Jamie Pine 5567721431
Team Billing (#1552)
* added base logic for team billing

- moved Stripe customer related logic to customer.ts
- implemented unstable logic for team owner upgrading, downgrading and adding/removing seats

* logic improvements

* - improved Alert style
- hide free team members on public team page
- upgraded textarea to ui component TextArea in SAML setup
- added Alert on team settings for hidden members
- hide CreateEventTypeButton if not admin
- fixed missing locale strings in team settings

* remove random import

* - show hidden status on team list
- refactor team pill

* - improved logic (mostly functional)
- added Alerts for members & owners
- added local strings
- created upgrade modal
- added info notice on invite member modal
- fixed router redirect after leaving team

* - improved logic in team-billing
- error display on upgrade modal
- added better launch.json for VSCode debugger
- fixed bug with missing inviteeUserId

* code cleanup

* nit pick fixes i should sleep now

* fixed leave team bug
- quantity would not decrease upon leave or removal

* added stripe billing callback handler

* - better launch.json
- teams empty component

* - fixed error not removing after successful pro upgrade
- fixed silent fail on team create name conflict
- fixed input border radius on member invite modal

* updated local strings

* improved logic for edge cases, such as:
- team owned by member sponsored by another team can smoothly upgrade to pro if kicked from sponsored team
- logic to calculate if owner is specifically missing pro subscription (ownerIsMissingSeat)
- corrected calculation of members missing seats, shouldn't care for proPaidForByTeamId as that only matters for removing member and preserving pro if they pay for it themselves
- added react query devtools
- added missing locale string

* - allow type override for LinkIconButton
- consolidate filter logic for getMembersMissingSeats

* - only activate team billing for hosted cal
- fix prod price keys

* fix requiresUpgrade when not hosted by cal

* added HOSTED_CAL_FEATURES

* fixed failing build

- fixed broken import path
- added support for premium price plan. (will consider premium as a valid seat)
- remove rouge console log

* fix customer id type error

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
2022-02-07 23:35:26 +00:00

89 lines
3 KiB
TypeScript

import { PlusIcon, UserGroupIcon } from "@heroicons/react/solid";
import classNames from "classnames";
import { useSession } from "next-auth/react";
import { Trans } from "next-i18next";
import { useState } from "react";
import { useLocale } from "@lib/hooks/useLocale";
import { trpc } from "@lib/trpc";
import EmptyScreen from "@components/EmptyScreen";
import Loader from "@components/Loader";
import SettingsShell from "@components/SettingsShell";
import Shell, { useMeQuery } from "@components/Shell";
import TeamCreateModal from "@components/team/TeamCreateModal";
import TeamList from "@components/team/TeamList";
import { Alert } from "@components/ui/Alert";
import Button from "@components/ui/Button";
export default function Teams() {
const { t } = useLocale();
const { status } = useSession();
const loading = status === "loading";
const [showCreateTeamModal, setShowCreateTeamModal] = useState(false);
const [errorMessage, setErrorMessage] = useState("");
const me = useMeQuery();
const { data, isLoading } = trpc.useQuery(["viewer.teams.list"], {
onError: (e) => {
setErrorMessage(e.message);
},
});
if (loading) return <Loader />;
const teams = data?.filter((m) => m.accepted) || [];
const invites = data?.filter((m) => !m.accepted) || [];
const isFreePlan = me.data?.plan === "FREE";
return (
<Shell heading={t("teams")} subtitle={t("create_manage_teams_collaborative")}>
<SettingsShell>
{!!errorMessage && <Alert severity="error" title={errorMessage} />}
{isFreePlan && (
<Alert
severity="warning"
title={<>{t("plan_upgrade_teams")}</>}
message={
<Trans i18nKey="plan_upgrade_instructions">
You can
<a href="/api/upgrade" className="underline">
upgrade here
</a>
.
</Trans>
}
className="my-4"
/>
)}
{showCreateTeamModal && <TeamCreateModal onClose={() => setShowCreateTeamModal(false)} />}
<div className={classNames("flex justify-end my-4", isFreePlan && "opacity-50")}>
<Button
disabled={isFreePlan}
type="button"
className="btn btn-white"
onClick={() => setShowCreateTeamModal(true)}>
<PlusIcon className="group-hover:text-black text-gray-700 w-3.5 h-3.5 ltr:mr-2 rtl:ml-2 inline-block" />
{t("new_team")}
</Button>
</div>
{invites.length > 0 && (
<div className="mb-4">
<h1 className="mb-2 text-lg font-medium">{t("open_invitations")}</h1>
<TeamList teams={invites}></TeamList>
</div>
)}
{!isLoading && !teams.length && (
<EmptyScreen
Icon={UserGroupIcon}
headline={t("no_teams")}
description={t("no_teams_description")}
/>
)}
{teams.length > 0 && <TeamList teams={teams}></TeamList>}
</SettingsShell>
</Shell>
);
}