calcom/components/team/MemberInvitationModal.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

149 lines
5.8 KiB
TypeScript

import { UserIcon } from "@heroicons/react/outline";
import { InformationCircleIcon } from "@heroicons/react/solid";
import { MembershipRole } from "@prisma/client";
import { useState } from "react";
import React, { SyntheticEvent } from "react";
import { useLocale } from "@lib/hooks/useLocale";
import { TeamWithMembers } from "@lib/queries/teams";
import { trpc } from "@lib/trpc";
import { TextField } from "@components/form/fields";
import Button from "@components/ui/Button";
export default function MemberInvitationModal(props: { team: TeamWithMembers | null; onExit: () => void }) {
const [errorMessage, setErrorMessage] = useState("");
const { t, i18n } = useLocale();
const utils = trpc.useContext();
const inviteMemberMutation = trpc.useMutation("viewer.teams.inviteMember", {
async onSuccess() {
await utils.invalidateQueries(["viewer.teams.get"]);
props.onExit();
},
async onError(err) {
setErrorMessage(err.message);
},
});
function inviteMember(e: SyntheticEvent) {
e.preventDefault();
if (!props.team) return;
const target = e.target as typeof e.target & {
elements: {
role: { value: MembershipRole };
inviteUser: { value: string };
sendInviteEmail: { checked: boolean };
};
};
inviteMemberMutation.mutate({
teamId: props.team.id,
language: i18n.language,
role: target.elements["role"].value,
usernameOrEmail: target.elements["inviteUser"].value,
sendEmailInvitation: target.elements["sendInviteEmail"].checked,
});
}
return (
<div
className="fixed inset-0 z-50 overflow-y-auto"
aria-labelledby="modal-title"
role="dialog"
aria-modal="true">
<div className="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div
className="fixed inset-0 z-0 transition-opacity bg-gray-500 bg-opacity-75"
aria-hidden="true"></div>
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
&#8203;
</span>
<div className="inline-block px-4 pt-5 pb-4 text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
<div className="mb-4 sm:flex sm:items-start">
<div className="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto rounded-full bg-brand text-brandcontrast bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
<UserIcon className="w-6 h-6 text-brandcontrast" />
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
{t("invite_new_member")}
</h3>
<div>
<p className="text-sm text-gray-400">{t("invite_new_team_member")}</p>
</div>
</div>
</div>
<form onSubmit={inviteMember}>
<div className="space-y-4">
<TextField
label={t("email_or_username")}
id="inviteUser"
name="inviteUser"
placeholder="email@example.com"
required
/>
<div>
<label className="block mb-1 text-sm font-medium tracking-wide text-gray-700" htmlFor="role">
{t("role")}
</label>
<select
id="role"
className="block w-full mt-1 border-gray-300 rounded-sm shadow-sm focus:ring-black focus:border-brand sm:text-sm">
<option value="MEMBER">{t("member")}</option>
<option value="ADMIN">{t("admin")}</option>
</select>
</div>
<div className="relative flex items-start">
<div className="flex items-center h-5">
<input
type="checkbox"
name="sendInviteEmail"
defaultChecked
id="sendInviteEmail"
className="text-black border-gray-300 rounded-sm shadow-sm focus:ring-black focus:border-brand sm:text-sm"
/>
</div>
<div className="ltr:ml-2 rtl:mr-2text-sm">
<label htmlFor="sendInviteEmail" className="font-medium text-gray-700">
{t("send_invite_email")}
</label>
</div>
</div>
<div className="flex flex-row px-3 py-2 rounded-sm bg-gray-50">
<InformationCircleIcon className="flex-shrink-0 w-5 h-5 fill-gray-400" aria-hidden="true" />
<span className="ml-2 text-sm leading-tight text-gray-500">
Note: This will cost an extra seat ($12/m) on your subscription if this invitee does not
have a pro account.{" "}
<a href="#" className="underline">
Learn More
</a>
</span>
</div>
</div>
{errorMessage && (
<p className="text-sm text-red-700">
<span className="font-bold">Error: </span>
{errorMessage}
</p>
)}
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<Button
type="submit"
color="primary"
className="ltr:ml-2 rtl:mr-2"
data-testid="invite-new-member-button">
{t("invite")}
</Button>
<Button type="button" color="secondary" onClick={props.onExit}>
{t("cancel")}
</Button>
</div>
</form>
</div>
</div>
</div>
);
}