From 3cafce63bcf8ae74bca9822169acb0ecb81c8ae7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daphn=C3=A9=20Popin?= <daphne.popin@gmail.com>
Date: Thu, 4 Apr 2024 17:13:02 +0200
Subject: [PATCH] =?UTF-8?q?Pok=C3=A9:=20rework=20display=20active=20subscr?=
 =?UTF-8?q?iption/plan?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/pages/poke/[wId]/index.tsx | 241 ++++++++++++++++++++++++++++---
 1 file changed, 223 insertions(+), 18 deletions(-)

diff --git a/front/pages/poke/[wId]/index.tsx b/front/pages/poke/[wId]/index.tsx
index a0e66231126b..c8e4292a7004 100644
--- a/front/pages/poke/[wId]/index.tsx
+++ b/front/pages/poke/[wId]/index.tsx
@@ -1,8 +1,14 @@
 import {
   Button,
   Collapsible,
+  ConfluenceLogo,
   DropdownMenu,
+  GithubLogo,
+  GoogleLogo,
+  IntercomLogo,
   Modal,
+  NotionLogo,
+  SlackLogo,
   Spinner,
 } from "@dust-tt/sparkle";
 import type {
@@ -14,7 +20,7 @@ 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 { format } from "date-fns/format";
 import { keyBy } from "lodash";
 import type { InferGetServerSidePropsType } from "next";
 import Link from "next/link";
@@ -25,6 +31,12 @@ 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 {
+  PokeTable,
+  PokeTableBody,
+  PokeTableCell,
+  PokeTableRow,
+} from "@app/components/poke/shadcn/ui/table";
 import { SubscriptionsDataTable } from "@app/components/poke/subscriptions/table";
 import { SendNotificationsContext } from "@app/components/sparkle/Notification";
 import { getAgentConfigurations } from "@app/lib/api/assistant/configuration";
@@ -247,6 +259,8 @@ const WorkspacePage = ({
     (ds) => !!ds.connectorProvider
   );
 
+  const activePlan = activeSubscription.plan;
+
   return (
     <>
       <DustAppLogsModal
@@ -282,21 +296,6 @@ 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">
@@ -329,9 +328,215 @@ const WorkspacePage = ({
                   </DropdownMenu.Items>
                 </DropdownMenu>
               </div>
+              <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>
+                              {activeSubscription.plan.name}
+                            </PokeTableCell>
+                          </PokeTableRow>
+                          <PokeTableRow>
+                            <PokeTableCell>Plan Code</PokeTableCell>
+                            <PokeTableCell>
+                              {activeSubscription.plan.code}
+                            </PokeTableCell>
+                          </PokeTableRow>
+                          <PokeTableRow>
+                            <PokeTableCell>Is in Trial?</PokeTableCell>
+                            <PokeTableCell>
+                              {activeSubscription.trialing ? "✅" : "❌"}
+                            </PokeTableCell>
+                          </PokeTableRow>
+                          <PokeTableRow>
+                            <PokeTableCell>
+                              Stripe Subscription Id
+                            </PokeTableCell>
+                            <PokeTableCell>
+                              {activeSubscription.stripeSubscriptionId ? (
+                                <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"
+                                >
+                                  {activeSubscription.stripeSubscriptionId}
+                                </Link>
+                              ) : (
+                                "No subscription id"
+                              )}
+                            </PokeTableCell>
+                          </PokeTableRow>
+                          <PokeTableRow>
+                            <PokeTableCell>Stripe Customer Id</PokeTableCell>
+                            <PokeTableCell>
+                              {activeSubscription.stripeCustomerId ? (
+                                <Link
+                                  href={
+                                    isDevelopment()
+                                      ? `https://dashboard.stripe.com/test/customers/${activeSubscription.stripeCustomerId}`
+                                      : `https://dashboard.stripe.com/customers/${activeSubscription.stripeCustomerId}`
+                                  }
+                                  target="_blank"
+                                  className="text-xs text-action-400"
+                                >
+                                  {activeSubscription.stripeCustomerId}
+                                </Link>
+                              ) : (
+                                "No customer id"
+                              )}
+                            </PokeTableCell>
+                          </PokeTableRow>
+                          <PokeTableRow>
+                            <PokeTableCell>Start Date</PokeTableCell>
+                            <PokeTableCell>
+                              {activeSubscription.startDate
+                                ? format(
+                                    activeSubscription.startDate,
+                                    "yyyy-MM-dd"
+                                  )
+                                : "/"}
+                            </PokeTableCell>
+                          </PokeTableRow>
+                          <PokeTableRow>
+                            <PokeTableCell>End Date</PokeTableCell>
+                            <PokeTableCell>
+                              {activeSubscription.endDate
+                                ? format(
+                                    activeSubscription.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>
+
+                          <PokeTableRow>
+                            <PokeTableCell>Max number of users</PokeTableCell>
+                            <PokeTableCell>
+                              {activePlan.limits.users.maxUsers === -1
+                                ? "unlimited"
+                                : activePlan.limits.users.maxUsers}
+                            </PokeTableCell>
+                          </PokeTableRow>
 
-              <h2 className="text-md mb-4 mt-8 font-bold">Plan:</h2>
-              <JsonViewer value={activeSubscription} rootName={false} />
+                          <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>
+              </div>
               <div className="flex flex-col gap-8">
                 {plans && (
                   <div className="pt-8">