mirror of
https://github.com/formbricks/formbricks.git
synced 2026-05-07 19:30:07 -05:00
fix: members table UI, tweak upsell UI (#1949)
This commit is contained in:
Johannes
+17
-20
@@ -56,25 +56,6 @@ export default function AddMemberModal({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{!canDoRoleManagement &&
|
||||
(isFormbricksCloud ? (
|
||||
<div className="mx-6 mt-2">
|
||||
<UpgradePlanNotice
|
||||
message="To manage access roles for your team"
|
||||
url={`/environments/${environmentId}/settings/billing`}
|
||||
textForUrl="Upgrade to the App Surveys plan."
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mx-6 mt-2">
|
||||
<UpgradePlanNotice
|
||||
message="To manage access roles for your team,"
|
||||
url="mailto:hola@formbricks.com"
|
||||
textForUrl="get a self-hosted license (free to get started)."
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<form onSubmit={handleSubmit(submitEventClass)}>
|
||||
<div className="flex justify-between rounded-lg p-6">
|
||||
<div className="w-full space-y-4">
|
||||
@@ -95,7 +76,23 @@ export default function AddMemberModal({
|
||||
{...register("email", { required: true })}
|
||||
/>
|
||||
</div>
|
||||
{canDoRoleManagement && <AddMemberRole control={control} />}
|
||||
<div>
|
||||
<AddMemberRole control={control} canDoRoleManagement={canDoRoleManagement} />
|
||||
{!canDoRoleManagement &&
|
||||
(!isFormbricksCloud ? (
|
||||
<UpgradePlanNotice
|
||||
message="To manage access roles,"
|
||||
url={`/environments/${environmentId}/settings/billing`}
|
||||
textForUrl="please add your credit card (free)."
|
||||
/>
|
||||
) : (
|
||||
<UpgradePlanNotice
|
||||
message="To manage access roles for your team,"
|
||||
url="https://formbricks.com/docs/self-hosting/license"
|
||||
textForUrl="get a self-hosting license (free)."
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end border-t border-slate-200 p-6">
|
||||
|
||||
+2
-4
@@ -1,5 +1,4 @@
|
||||
import MembersInfo from "@/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/MembersInfo";
|
||||
import React from "react";
|
||||
|
||||
import { getRoleManagementPermission } from "@formbricks/ee/lib/service";
|
||||
import { getInvitesByTeamId } from "@formbricks/lib/invite/service";
|
||||
@@ -29,11 +28,10 @@ export async function EditMemberships({
|
||||
return (
|
||||
<div>
|
||||
<div className="rounded-lg border border-slate-200">
|
||||
<div className="grid-cols-20 grid h-12 content-center rounded-t-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
|
||||
<div className="col-span-2"></div>
|
||||
<div className="grid-cols-20 grid h-12 content-center rounded-t-lg bg-slate-100 px-4 text-left text-sm font-semibold text-slate-900">
|
||||
<div className="col-span-5">Fullname</div>
|
||||
<div className="col-span-5">Email</div>
|
||||
{canDoRoleManagement && <div className="col-span-3">Role</div>}
|
||||
{canDoRoleManagement && <div className="col-span-5">Role</div>}
|
||||
<div className="col-span-5"></div>
|
||||
</div>
|
||||
|
||||
|
||||
+2
-11
@@ -1,12 +1,10 @@
|
||||
import MemberActions from "@/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/MemberActions";
|
||||
import { isInviteExpired } from "@/app/lib/utils";
|
||||
import React from "react";
|
||||
|
||||
import { EditMembershipRole } from "@formbricks/ee/RoleManagement/components/EditMembershipRole";
|
||||
import { TInvite } from "@formbricks/types/invites";
|
||||
import { TMember, TMembershipRole } from "@formbricks/types/memberships";
|
||||
import { TTeam } from "@formbricks/types/teams";
|
||||
import { ProfileAvatar } from "@formbricks/ui/Avatars";
|
||||
import { Badge } from "@formbricks/ui/Badge";
|
||||
|
||||
type MembersInfoProps = {
|
||||
@@ -39,15 +37,8 @@ const MembersInfo = async ({
|
||||
<div className="grid-cols-20" id="membersInfoWrapper">
|
||||
{allMembers.map((member) => (
|
||||
<div
|
||||
className="singleMemberInfo grid-cols-20 grid h-auto w-full content-center rounded-lg p-0.5 py-2 text-left text-sm text-slate-900"
|
||||
className="singleMemberInfo grid-cols-20 grid h-auto w-full content-center rounded-lg px-4 py-3 text-left text-sm text-slate-900"
|
||||
key={member.email}>
|
||||
<div className="h-58 col-span-2 pl-4">
|
||||
{isInvitee(member) ? (
|
||||
<ProfileAvatar userId={member.email} />
|
||||
) : (
|
||||
<ProfileAvatar userId={member.userId} />
|
||||
)}
|
||||
</div>
|
||||
<div className="ph-no-capture col-span-5 flex flex-col justify-center break-all">
|
||||
<p>{member.name}</p>
|
||||
</div>
|
||||
@@ -55,7 +46,7 @@ const MembersInfo = async ({
|
||||
{member.email}
|
||||
</div>
|
||||
|
||||
<div className="ph-no-capture col-span-3 flex flex-col items-start justify-center break-all">
|
||||
<div className="ph-no-capture col-span-5 flex flex-col items-start justify-center break-all">
|
||||
{canDoRoleManagement && allMembers?.length > 0 && (
|
||||
<EditMembershipRole
|
||||
isAdminOrOwner={isUserAdminOrOwner}
|
||||
|
||||
+7
-2
@@ -5,8 +5,9 @@ import {
|
||||
leaveTeamAction,
|
||||
} from "@/app/(app)/environments/[environmentId]/settings/members/actions";
|
||||
import AddMemberModal from "@/app/(app)/environments/[environmentId]/settings/members/components/AddMemberModal";
|
||||
import { XIcon } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import React, { useState } from "react";
|
||||
import { useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
import { TMembershipRole } from "@formbricks/types/memberships";
|
||||
@@ -70,7 +71,11 @@ export default function TeamActions({
|
||||
<>
|
||||
<div className="mb-6 text-right">
|
||||
{role !== "owner" && (
|
||||
<Button variant="minimal" className="mr-2" onClick={() => setLeaveTeamModalOpen(true)}>
|
||||
<Button
|
||||
EndIcon={XIcon}
|
||||
variant="secondary"
|
||||
className="mr-2"
|
||||
onClick={() => setLeaveTeamModalOpen(true)}>
|
||||
Leave Team
|
||||
</Button>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user