Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Poké: rework display active subscription/plan #4576

Merged
merged 4 commits into from
Apr 5, 2024
Merged

Poké: rework display active subscription/plan #4576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3cafce6
Poké: rework display active subscription/plan
PopDaph Apr 4, 2024
d4dfda6
Apply feedback
PopDaph Apr 4, 2024
4e02fbb
lint
PopDaph Apr 4, 2024
da5c451
Improve look
PopDaph Apr 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
199 changes: 198 additions & 1 deletion front/components/poke/subscriptions/table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,25 @@
import {
CloudArrowDownIcon,
ConfluenceLogo,
GithubLogo,
GoogleLogo,
IntercomLogo,
NotionLogo,
SlackLogo,
} from "@dust-tt/sparkle";
import type { SubscriptionType, WorkspaceType } from "@dust-tt/types";
import { format } from "date-fns/format";
import Link from "next/link";

import { PokeDataTable } from "@app/components/poke/shadcn/ui/data_table";
import {
PokeTable,
PokeTableBody,
PokeTableCell,
PokeTableRow,
} from "@app/components/poke/shadcn/ui/table";
import { makeColumnsForSubscriptions } from "@app/components/poke/subscriptions/columns";
import { isDevelopment } from "@app/lib/development";

interface SubscriptionsDataTableProps {
owner: WorkspaceType;
Expand Down Expand Up @@ -31,11 +49,190 @@ export function SubscriptionsDataTable({
}: SubscriptionsDataTableProps) {
return (
<div className="border-material-200 my-4 flex flex-col rounded-lg border p-4">
<h2 className="text-md mb-4 font-bold">Subscriptions:</h2>
<h2 className="text-md mb-4 font-bold">History of subscriptions:</h2>
<PokeDataTable
columns={makeColumnsForSubscriptions()}
data={prepareSubscriptionsForDisplay(owner, subscriptions)}
/>
</div>
);
}

export function ActiveSubscriptionTable({
subscription,
}: {
subscription: SubscriptionType;
}) {
const activePlan = subscription.plan;
return (
<div className="flex flex-col space-y-8 pt-4">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any chance we could factorize this? Like having an object like we do for data_table?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes! Merging as is so I can focus on the new Enterprise form this morning, I'll open a new PR to handle this feedback right after 🙇🏻‍♀️

<div className="flex justify-between gap-3">
<div className="border-material-200 my-4 flex flex-grow flex-col rounded-lg border p-4">
<h2 className="text-md pb-4 font-bold">Active Subscription:</h2>
<PokeTable>
<PokeTableBody>
<PokeTableRow>
<PokeTableCell>Plan Name</PokeTableCell>
<PokeTableCell>{subscription.plan.name}</PokeTableCell>
</PokeTableRow>
<PokeTableRow>
<PokeTableCell>Plan Code</PokeTableCell>
<PokeTableCell>{subscription.plan.code}</PokeTableCell>
</PokeTableRow>
<PokeTableRow>
<PokeTableCell>Is in Trial?</PokeTableCell>
<PokeTableCell>
{subscription.trialing ? "✅" : "❌"}
</PokeTableCell>
</PokeTableRow>
<PokeTableRow>
<PokeTableCell>Stripe Subscription Id</PokeTableCell>
<PokeTableCell>
{subscription.stripeSubscriptionId ? (
<Link
href={
isDevelopment()
? `https://dashboard.stripe.com/test/subscriptions/${subscription.stripeSubscriptionId}`
: `https://dashboard.stripe.com/subscriptions/${subscription.stripeSubscriptionId}`
}
target="_blank"
className="text-xs text-action-400"
>
{subscription.stripeSubscriptionId}
</Link>
) : (
"No subscription id"
)}
</PokeTableCell>
</PokeTableRow>
<PokeTableRow>
<PokeTableCell>Stripe Customer Id</PokeTableCell>
<PokeTableCell>
{subscription.stripeCustomerId ? (
<Link
href={
isDevelopment()
? `https://dashboard.stripe.com/test/customers/${subscription.stripeCustomerId}`
: `https://dashboard.stripe.com/customers/${subscription.stripeCustomerId}`
}
target="_blank"
className="text-xs text-action-400"
>
{subscription.stripeCustomerId}
</Link>
) : (
"No customer id"
)}
</PokeTableCell>
</PokeTableRow>
<PokeTableRow>
<PokeTableCell>Start Date</PokeTableCell>
<PokeTableCell>
{subscription.startDate
? format(subscription.startDate, "yyyy-MM-dd")
: "/"}
</PokeTableCell>
</PokeTableRow>
<PokeTableRow>
<PokeTableCell>End Date</PokeTableCell>
<PokeTableCell>
{subscription.endDate
? format(subscription.endDate, "yyyy-MM-dd")
: "/"}
</PokeTableCell>
</PokeTableRow>
</PokeTableBody>
</PokeTable>
</div>
<div className="border-material-200 my-4 flex flex-grow flex-col rounded-lg border p-4">
<h2 className="text-md pb-4 font-bold">Plan limitations:</h2>
<PokeTable>
<PokeTableBody>
<PokeTableRow>
<PokeTableCell>SlackBot allowed</PokeTableCell>
<PokeTableCell>
{activePlan.limits.assistant.isSlackBotAllowed ? "✅" : "❌"}
</PokeTableCell>
</PokeTableRow>
<PokeTableRow>
<PokeTableCell>Connections allowed</PokeTableCell>
<PokeTableCell>
<div className="flex gap-2">
{activePlan.limits.connections.isSlackAllowed ? (
<SlackLogo />
) : null}
{activePlan.limits.connections.isGoogleDriveAllowed ? (
<GoogleLogo />
) : null}
{activePlan.limits.connections.isGithubAllowed ? (
<GithubLogo />
) : null}
{activePlan.limits.connections.isNotionAllowed ? (
<NotionLogo />
) : null}
{activePlan.limits.connections.isIntercomAllowed ? (
<IntercomLogo />
) : null}
{activePlan.limits.connections.isConfluenceAllowed ? (
<ConfluenceLogo />
) : null}
{activePlan.limits.connections.isWebCrawlerAllowed ? (
<CloudArrowDownIcon />
) : null}
</div>
</PokeTableCell>
</PokeTableRow>

<PokeTableRow>
<PokeTableCell>Max number of users</PokeTableCell>
<PokeTableCell>
{activePlan.limits.users.maxUsers === -1
? "unlimited"
: activePlan.limits.users.maxUsers}
</PokeTableCell>
</PokeTableRow>

<PokeTableRow>
<PokeTableCell>Max number of messages</PokeTableCell>
<PokeTableCell>
{activePlan.limits.assistant.maxMessages === -1
? "unlimited"
: `${activePlan.limits.assistant.maxMessages} / ${activePlan.limits.assistant.maxMessagesTimeframe}`}
</PokeTableCell>
</PokeTableRow>

<PokeTableRow>
<PokeTableCell>Max number of data sources</PokeTableCell>
<PokeTableCell>
{activePlan.limits.dataSources.count === -1
? "unlimited"
: activePlan.limits.dataSources.count}
</PokeTableCell>
</PokeTableRow>

<PokeTableRow>
<PokeTableCell>
Max number of documents in data sources
</PokeTableCell>
<PokeTableCell>
{activePlan.limits.dataSources.documents.count === -1
? "unlimited"
: activePlan.limits.dataSources.documents.count}
</PokeTableCell>
</PokeTableRow>

<PokeTableRow>
<PokeTableCell>Max documents size</PokeTableCell>
<PokeTableCell>
{activePlan.limits.dataSources.documents.sizeMb === -1
? "unlimited"
: `${activePlan.limits.dataSources.documents.sizeMb}Mb`}
</PokeTableCell>
</PokeTableRow>
</PokeTableBody>
</PokeTable>
</div>
</div>
</div>
);
}
117 changes: 51 additions & 66 deletions front/pages/poke/[wId]/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import type {
import type { WorkspaceType } from "@dust-tt/types";
import type { PlanType, SubscriptionType } from "@dust-tt/types";
import { DustProdActionRegistry, WHITELISTABLE_FEATURES } from "@dust-tt/types";
import { JsonViewer } from "@textea/json-viewer";
import { keyBy } from "lodash";
import type { InferGetServerSidePropsType } from "next";
import Link from "next/link";
Expand All @@ -25,7 +24,10 @@ import { AssistantsDataTable } from "@app/components/poke/assistants/table";
import { DataSourceDataTable } from "@app/components/poke/data_sources/table";
import { FeatureFlagsDataTable } from "@app/components/poke/features/table";
import PokeNavbar from "@app/components/poke/PokeNavbar";
import { SubscriptionsDataTable } from "@app/components/poke/subscriptions/table";
import {
ActiveSubscriptionTable,
SubscriptionsDataTable,
} from "@app/components/poke/subscriptions/table";
import { SendNotificationsContext } from "@app/components/sparkle/Notification";
import { getAgentConfigurations } from "@app/lib/api/assistant/configuration";
import { getDataSources } from "@app/lib/api/data_sources";
Expand All @@ -34,7 +36,6 @@ import {
orderDatasourceByImportance,
} from "@app/lib/assistant";
import { useSubmitFunction } from "@app/lib/client/utils";
import { isDevelopment } from "@app/lib/development";
import { withSuperUserAuthRequirements } from "@app/lib/iam/session";
import { Plan, Subscription } from "@app/lib/models";
import { FREE_NO_PLAN_CODE } from "@app/lib/plans/plan_codes";
Expand Down Expand Up @@ -282,59 +283,39 @@ const WorkspacePage = ({
View dust app logs
</a>
</div>
{activeSubscription.stripeSubscriptionId && (
<div>
<Link
href={
isDevelopment()
? `https://dashboard.stripe.com/test/subscriptions/${activeSubscription.stripeSubscriptionId}`
: `https://dashboard.stripe.com/subscriptions/${activeSubscription.stripeSubscriptionId}`
}
target="_blank"
className="text-xs text-action-400"
>
View Stripe Subscription
</Link>
</div>
)}
</div>

<div className="flex-col justify-center">
<div className="mx-2">
<h2 className="text-md mb-4 font-bold">Segmentation:</h2>
<div>
<DropdownMenu>
<DropdownMenu.Button>
<Button
type="select"
labelVisible={true}
label={owner.segmentation ?? "none"}
variant="secondary"
hasMagnifying={false}
size="sm"
/>
</DropdownMenu.Button>
<DropdownMenu.Items origin="auto" width={240}>
{[null, "interesting"].map((segment) => (
<DropdownMenu.Item
label={segment ?? "none"}
key={segment ?? "all"}
onClick={() => {
void onWorkspaceUpdate(
segment as WorkspaceSegmentationType
);
}}
></DropdownMenu.Item>
))}
</DropdownMenu.Items>
</DropdownMenu>
</div>
<DropdownMenu>
<DropdownMenu.Button>
<Button
type="select"
labelVisible={true}
label={`Segmentation: ${owner.segmentation ?? "none"}`}
variant="secondary"
hasMagnifying={false}
size="sm"
/>
</DropdownMenu.Button>
<DropdownMenu.Items origin="auto" width={240}>
{[null, "interesting"].map((segment) => (
<DropdownMenu.Item
label={segment ?? "none"}
key={segment ?? "all"}
onClick={() => {
void onWorkspaceUpdate(
segment as WorkspaceSegmentationType
);
}}
></DropdownMenu.Item>
))}
</DropdownMenu.Items>
</DropdownMenu>

<h2 className="text-md mb-4 mt-8 font-bold">Plan:</h2>
<JsonViewer value={activeSubscription} rootName={false} />
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-4">
{plans && (
<div className="pt-8">
<div className="pt-4">
<Collapsible>
<Collapsible.Button label="Manage plan" />
<Collapsible.Panel>
Expand Down Expand Up @@ -368,6 +349,16 @@ const WorkspacePage = ({
workspaceHasManagedDataSources
}
/>
{activeSubscription.plan.code !==
FREE_NO_PLAN_CODE &&
workspaceHasManagedDataSources && (
<div className="pl-2 pt-4">
<p className="text-warning mb-4 text-sm">
Delete managed data sources before
downgrading.
</p>
</div>
)}
</div>
</div>
</Collapsible.Panel>
Expand Down Expand Up @@ -415,25 +406,11 @@ const WorkspacePage = ({
</Collapsible>
</div>
</div>
{activeSubscription.plan.code !== FREE_NO_PLAN_CODE &&
workspaceHasManagedDataSources && (
<div className="pl-2 pt-4">
<p className="text-warning mb-4 text-sm">
Delete managed data sources before downgrading.
</p>
</div>
)}
</div>

<div className="flex flex-col space-y-8 pt-4">
<SubscriptionsDataTable
owner={owner}
subscriptions={subscriptions}
/>
<FeatureFlagsDataTable
owner={owner}
whitelistableFeatures={whitelistableFeatures}
/>
<ActiveSubscriptionTable subscription={activeSubscription} />

<DataSourceDataTable
owner={owner}
dataSources={dataSources}
Expand All @@ -443,6 +420,14 @@ const WorkspacePage = ({
owner={owner}
agentConfigurations={agentConfigurations}
/>
<FeatureFlagsDataTable
owner={owner}
whitelistableFeatures={whitelistableFeatures}
/>
<SubscriptionsDataTable
owner={owner}
subscriptions={subscriptions}
/>
</div>
</div>
</div>
Expand Down
Loading