Skip to content

Commit

Permalink
Improve look
Browse files Browse the repository at this point in the history
  • Loading branch information
@PopDaph
PopDaph committed Apr 4, 2024
1 parent 4e02fbb commit da5c451
Showing 1 changed file with 161 additions and 173 deletions.
334 changes: 161 additions & 173 deletions front/components/poke/subscriptions/table.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {
CloudArrowDownIcon,
ConfluenceLogo,
GithubLogo,
GoogleLogo,
Expand Down Expand Up @@ -65,184 +66,171 @@ export function ActiveSubscriptionTable({
const activePlan = subscription.plan;
return (
<div className="flex flex-col space-y-8 pt-4">
<div className="border-material-200 my-4 flex flex-col rounded-lg border p-4">
<div className="flex justify-between gap-3">
<div className="flex-grow">
<div>
<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>
<div className="flex-grow">
<div>
<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>Websites allowed</PokeTableCell>
<PokeTableCell>
{activePlan.limits.connections.isWebCrawlerAllowed
? "✅"
: "❌"}
</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}
</div>
</PokeTableCell>
</PokeTableRow>
<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 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 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 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 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>
<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>
Expand Down

0 comments on commit da5c451

Please sign in to comment.