From 68a2661a692b4194bbf8592a3f73e01387e727e6 Mon Sep 17 00:00:00 2001 From: Maria Clara Date: Thu, 3 Nov 2022 16:56:09 -0300 Subject: [PATCH 01/13] wip --- .../utils.ts => hooks/useCreateCustomerPortal.ts} | 3 --- .../TeamSettings/ManageSubscription/stripe.tsx | 7 +++---- .../UserSettings/ManageSubscription/Stripe.tsx | 2 +- .../pages/Pro/{upgrade => components}/Switcher.tsx | 2 +- .../pages/Pro/{upgrade => components}/elements.ts | 12 ++---------- packages/app/src/app/pages/Pro/index.tsx | 4 ++-- packages/app/src/app/pages/Pro/upgrade.tsx | 8 +++++--- 7 files changed, 14 insertions(+), 24 deletions(-) rename packages/app/src/app/{pages/Pro/upgrade/utils.ts => hooks/useCreateCustomerPortal.ts} (89%) rename packages/app/src/app/pages/Pro/{upgrade => components}/Switcher.tsx (99%) rename packages/app/src/app/pages/Pro/{upgrade => components}/elements.ts (89%) diff --git a/packages/app/src/app/pages/Pro/upgrade/utils.ts b/packages/app/src/app/hooks/useCreateCustomerPortal.ts similarity index 89% rename from packages/app/src/app/pages/Pro/upgrade/utils.ts rename to packages/app/src/app/hooks/useCreateCustomerPortal.ts index 838047cf11e..b98f53a4802 100644 --- a/packages/app/src/app/pages/Pro/upgrade/utils.ts +++ b/packages/app/src/app/hooks/useCreateCustomerPortal.ts @@ -2,9 +2,6 @@ import { useState } from 'react'; import { useEffects } from 'app/overmind'; import { dashboard } from '@codesandbox/common/lib/utils/url-generator'; -export type WorkspaceType = 'pro' | 'teamPro'; -export type Interval = 'month' | 'year'; - export const useCreateCustomerPortal = ( activeTeam: string ): [boolean, () => void] => { diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/Settings/TeamSettings/ManageSubscription/stripe.tsx b/packages/app/src/app/pages/Dashboard/Content/routes/Settings/TeamSettings/ManageSubscription/stripe.tsx index a57888c135f..cbc60070db3 100644 --- a/packages/app/src/app/pages/Dashboard/Content/routes/Settings/TeamSettings/ManageSubscription/stripe.tsx +++ b/packages/app/src/app/pages/Dashboard/Content/routes/Settings/TeamSettings/ManageSubscription/stripe.tsx @@ -1,10 +1,9 @@ import React from 'react'; -import { Stack, Text, Link, Button } from '@codesandbox/components'; -import { useAppState } from 'app/overmind'; import { format } from 'date-fns'; - import css from '@styled-system/css'; -import { useCreateCustomerPortal } from 'app/pages/Pro/upgrade/utils'; +import { Stack, Text, Link, Button } from '@codesandbox/components'; +import { useAppState } from 'app/overmind'; +import { useCreateCustomerPortal } from 'app/hooks/useCreateCustomerPortal'; export const Stripe = () => { const { activeTeam, activeTeamInfo: team } = useAppState(); diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/Settings/UserSettings/ManageSubscription/Stripe.tsx b/packages/app/src/app/pages/Dashboard/Content/routes/Settings/UserSettings/ManageSubscription/Stripe.tsx index f586eea1737..ea1605a4ef1 100644 --- a/packages/app/src/app/pages/Dashboard/Content/routes/Settings/UserSettings/ManageSubscription/Stripe.tsx +++ b/packages/app/src/app/pages/Dashboard/Content/routes/Settings/UserSettings/ManageSubscription/Stripe.tsx @@ -4,7 +4,7 @@ import { useAppState } from 'app/overmind'; import { format } from 'date-fns'; import css from '@styled-system/css'; -import { useCreateCustomerPortal } from '../../../../../../Pro/upgrade/utils'; +import { useCreateCustomerPortal } from 'app/hooks/useCreateCustomerPortal'; export const Stripe = () => { const { activeTeam, activeTeamInfo: team } = useAppState(); diff --git a/packages/app/src/app/pages/Pro/upgrade/Switcher.tsx b/packages/app/src/app/pages/Pro/components/Switcher.tsx similarity index 99% rename from packages/app/src/app/pages/Pro/upgrade/Switcher.tsx rename to packages/app/src/app/pages/Pro/components/Switcher.tsx index 643cb78d657..0bd2a9a1cb7 100644 --- a/packages/app/src/app/pages/Pro/upgrade/Switcher.tsx +++ b/packages/app/src/app/pages/Pro/components/Switcher.tsx @@ -56,7 +56,7 @@ export const Switcher: React.FC<{ name={activeTeamInfo.name} /> - + {activeTeamInfo.name} diff --git a/packages/app/src/app/pages/Pro/upgrade/elements.ts b/packages/app/src/app/pages/Pro/components/elements.ts similarity index 89% rename from packages/app/src/app/pages/Pro/upgrade/elements.ts rename to packages/app/src/app/pages/Pro/components/elements.ts index 872efdefd4e..2821b04b948 100644 --- a/packages/app/src/app/pages/Pro/upgrade/elements.ts +++ b/packages/app/src/app/pages/Pro/components/elements.ts @@ -1,16 +1,8 @@ import { Button } from '@codesandbox/components'; -import styled, { createGlobalStyle, css } from 'styled-components'; - -export const GlobalFonts = createGlobalStyle` - @font-face { - font-family: "TWKEverett"; - src: url("/static/fonts/TWKEverett-Medium-web.woff") format("woff"), - url("/static/fonts/TWKEverett-Medium-web.ttf") format("ttf"); - } -`; +import styled, { css } from 'styled-components'; export const PlanTitle = styled.h1` - font-family: 'TWKEverett', sans-serif; + font-family: 'Everett', sans-serif; font-weight: 500; letter-spacing: -0.018em; transition: all 0.6s ease; diff --git a/packages/app/src/app/pages/Pro/index.tsx b/packages/app/src/app/pages/Pro/index.tsx index cb8abc215ad..25f3f2f88dc 100644 --- a/packages/app/src/app/pages/Pro/index.tsx +++ b/packages/app/src/app/pages/Pro/index.tsx @@ -7,8 +7,8 @@ import { import { useHistory } from 'react-router-dom'; import { signInPageUrl } from '@codesandbox/common/lib/utils/url-generator'; -import { ProLegacy } from './legacy'; -import { ProUpgrade } from './upgrade'; +import { ProLegacy } from './Legacy'; +import { ProUpgrade } from './Upgrade'; export const ProPage: React.FC = () => { const { pageMounted } = useActions().pro; diff --git a/packages/app/src/app/pages/Pro/upgrade.tsx b/packages/app/src/app/pages/Pro/upgrade.tsx index ea50495f5c2..78b0a5b1479 100644 --- a/packages/app/src/app/pages/Pro/upgrade.tsx +++ b/packages/app/src/app/pages/Pro/upgrade.tsx @@ -9,6 +9,7 @@ import { } from '@codesandbox/components'; import { Helmet } from 'react-helmet'; import { Navigation } from 'app/pages/common/Navigation'; +import { useCreateCustomerPortal } from 'app/hooks/useCreateCustomerPortal'; import css from '@styled-system/css'; import { sortBy } from 'lodash-es'; import { AnimatePresence, motion } from 'framer-motion'; @@ -16,7 +17,6 @@ import { dashboard as dashboardUrls } from '@codesandbox/common/lib/utils/url-ge import { useLocation, useHistory } from 'react-router-dom'; import { formatCurrency } from 'app/utils/currency'; import { useCreateCheckout } from 'app/hooks'; -import { useCreateCustomerPortal, Interval } from './upgrade/utils'; import { UpgradeButton, Caption, @@ -24,14 +24,16 @@ import { BoxPlaceholder, SwitchPlan, PlanTitle, -} from './upgrade/elements'; -import { Switcher } from './upgrade/Switcher'; +} from './components/elements'; +import { Switcher } from './components/Switcher'; import { SubscriptionPaymentProvider, SubscriptionType, TeamMemberAuthorization, } from '../../graphql/types'; +type Interval = 'month' | 'year'; + export const ProUpgrade = () => { const { pro: { pageMounted }, From 26764dc7fc76c427d70fdcdd3d8ed6c434cb7ec9 Mon Sep 17 00:00:00 2001 From: Maria Clara Date: Fri, 4 Nov 2022 17:49:12 +0000 Subject: [PATCH 02/13] rename --- packages/app/src/app/pages/Pro/{legacy.tsx => Legacy.tsx} | 0 packages/app/src/app/pages/Pro/{upgrade.tsx => Upgrade.tsx} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename packages/app/src/app/pages/Pro/{legacy.tsx => Legacy.tsx} (100%) rename packages/app/src/app/pages/Pro/{upgrade.tsx => Upgrade.tsx} (100%) diff --git a/packages/app/src/app/pages/Pro/legacy.tsx b/packages/app/src/app/pages/Pro/Legacy.tsx similarity index 100% rename from packages/app/src/app/pages/Pro/legacy.tsx rename to packages/app/src/app/pages/Pro/Legacy.tsx diff --git a/packages/app/src/app/pages/Pro/upgrade.tsx b/packages/app/src/app/pages/Pro/Upgrade.tsx similarity index 100% rename from packages/app/src/app/pages/Pro/upgrade.tsx rename to packages/app/src/app/pages/Pro/Upgrade.tsx From e4a4a096b84350ac0e4c603646620521f74c522e Mon Sep 17 00:00:00 2001 From: Maria Clara Date: Fri, 4 Nov 2022 18:08:07 +0000 Subject: [PATCH 03/13] show 'Free' badge next to team names --- .../src/app/pages/Pro/components/Switcher.tsx | 20 +++---------------- 1 file changed, 3 insertions(+), 17 deletions(-) diff --git a/packages/app/src/app/pages/Pro/components/Switcher.tsx b/packages/app/src/app/pages/Pro/components/Switcher.tsx index 0bd2a9a1cb7..27e4c8d0008 100644 --- a/packages/app/src/app/pages/Pro/components/Switcher.tsx +++ b/packages/app/src/app/pages/Pro/components/Switcher.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { TeamAvatar } from 'app/components/TeamAvatar'; import styled from 'styled-components'; import { + Badge, Stack, Avatar, Menu, @@ -115,9 +116,9 @@ export const Switcher: React.FC<{ direction="vertical" css={{ flex: 1, marginLeft: 19 }} > - + {workspace.name} - {isPro && Pro} + {!isPro && Free} @@ -331,18 +332,3 @@ const MenuItem = styled(Menu.Item)` } } `; - -const ProBadge = styled.p` - border-radius: 2px; - background-color: rgba(229, 229, 229, 0.1); - color: #c5c5c5; - - width: 35px; - height: 18px; - - text-align: center; - line-height: 18px; - font-size: 13px; - - margin: 0 0 0 8px; -`; From ae9bca9205541b630478b737004bc93a3efcac57 Mon Sep 17 00:00:00 2001 From: Maria Clara Date: Fri, 4 Nov 2022 18:11:40 +0000 Subject: [PATCH 04/13] fix font-family name --- packages/app/src/app/pages/Pro/components/Switcher.tsx | 2 +- packages/app/src/app/pages/Pro/components/elements.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app/src/app/pages/Pro/components/Switcher.tsx b/packages/app/src/app/pages/Pro/components/Switcher.tsx index 27e4c8d0008..481d4e7cd51 100644 --- a/packages/app/src/app/pages/Pro/components/Switcher.tsx +++ b/packages/app/src/app/pages/Pro/components/Switcher.tsx @@ -248,7 +248,7 @@ const Dialog = styled.div` `; const WorkspaceName = styled.p` - font-family: 'TWKEverett', sans-serif; + font-family: 'Everett', sans-serif; font-style: normal; font-weight: 500; diff --git a/packages/app/src/app/pages/Pro/components/elements.ts b/packages/app/src/app/pages/Pro/components/elements.ts index 2821b04b948..a6e25f1087b 100644 --- a/packages/app/src/app/pages/Pro/components/elements.ts +++ b/packages/app/src/app/pages/Pro/components/elements.ts @@ -122,7 +122,7 @@ export const SwitchPlan = styled.button` line-height: 42px; margin-top: 18px; margin-bottom: 4px; - font-family: 'TWKEverett', sans-serif; + font-family: 'Everett', sans-serif; span { color: #434343; From fb5e8e768a4c241fe90b89b8fd3a2f46ac3b6e4a Mon Sep 17 00:00:00 2001 From: Maria Clara Date: Fri, 4 Nov 2022 19:01:15 +0000 Subject: [PATCH 05/13] show 'Free' badge next to active team name --- .../src/app/pages/Pro/components/Switcher.tsx | 52 +++++++++++++------ 1 file changed, 36 insertions(+), 16 deletions(-) diff --git a/packages/app/src/app/pages/Pro/components/Switcher.tsx b/packages/app/src/app/pages/Pro/components/Switcher.tsx index 481d4e7cd51..c2cd0d18ec5 100644 --- a/packages/app/src/app/pages/Pro/components/Switcher.tsx +++ b/packages/app/src/app/pages/Pro/components/Switcher.tsx @@ -42,6 +42,10 @@ export const Switcher: React.FC<{ const members = activeTeamInfo.users.length; const memberLabel = `${members} member${members > 1 ? 's' : ''}`; const isPersonalWorkspace = workspaceType === 'pro'; + const isFreeWorkspace = ![ + SubscriptionType.TeamPro, + SubscriptionType.PersonalPro, + ].includes(activeTeamInfo.subscription?.type); return ( - - {activeTeamInfo.name} - + + + {activeTeamInfo.name} + + {isFreeWorkspace && ( + + Free + + )} + {isPersonalWorkspace ? 'personal team' : memberLabel} @@ -247,18 +263,31 @@ const Dialog = styled.div` } `; +const WorkspaceNameWrapper = styled(Stack)` + position: relative; + + &:after { + content: ''; + position: absolute; + right: -20px; + top: calc(50% - 4px); + border: 5px solid transparent; + border-top: 7px solid white; + } +`; + const WorkspaceName = styled.p` - font-family: 'Everett', sans-serif; + font-family: 'Inter', sans-serif; font-style: normal; + font-size: 28px; font-weight: 500; + line-height: 36px; + letter-spacing: -0.01em; margin: 0; - position: relative; text-align: left; color: #e5e5e5; - font-size: 24px; - & span::-moz-selection { -webkit-text-stroke: 1px #e5e5e5; color: transparent; @@ -270,15 +299,6 @@ const WorkspaceName = styled.p` color: transparent; background: transparent; } - - &:after { - content: ''; - position: absolute; - right: -20px; - top: calc(50% - 4px); - border: 5px solid transparent; - border-top: 7px solid white; - } `; const WorkspaceType = styled.p` From 080755eab5a017ddab99e0e3acd541760d6b9b2a Mon Sep 17 00:00:00 2001 From: Maria Clara Date: Fri, 4 Nov 2022 19:08:46 +0000 Subject: [PATCH 06/13] rename around personal teams --- .../app/src/app/pages/Pro/components/Switcher.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/app/src/app/pages/Pro/components/Switcher.tsx b/packages/app/src/app/pages/Pro/components/Switcher.tsx index c2cd0d18ec5..22cf00ebea4 100644 --- a/packages/app/src/app/pages/Pro/components/Switcher.tsx +++ b/packages/app/src/app/pages/Pro/components/Switcher.tsx @@ -78,7 +78,7 @@ export const Switcher: React.FC<{ )} - {isPersonalWorkspace ? 'personal team' : memberLabel} + {isPersonalWorkspace ? 'Personal' : memberLabel} @@ -133,14 +133,18 @@ export const Switcher: React.FC<{ css={{ flex: 1, marginLeft: 19 }} > - {workspace.name} + + {workspace.id === personalWorkspaceId + ? 'Personal' + : workspace.name} + {!isPro && Free} - {workspace.id === personalWorkspaceId - ? 'personal team' - : seatsLabel} + {workspace.id !== personalWorkspaceId + ? seatsLabel + : null} From 0018b08fa06d084e293cb452dc1a4a4fb81ce976 Mon Sep 17 00:00:00 2001 From: Maria Clara Date: Fri, 4 Nov 2022 19:21:40 +0000 Subject: [PATCH 07/13] link to team settings --- packages/app/src/app/pages/Pro/Upgrade.tsx | 90 ++++++++++++++++------ 1 file changed, 65 insertions(+), 25 deletions(-) diff --git a/packages/app/src/app/pages/Pro/Upgrade.tsx b/packages/app/src/app/pages/Pro/Upgrade.tsx index 78b0a5b1479..eb45517d03c 100644 --- a/packages/app/src/app/pages/Pro/Upgrade.tsx +++ b/packages/app/src/app/pages/Pro/Upgrade.tsx @@ -4,6 +4,7 @@ import { ThemeProvider, Stack, Element, + Link as StyledLink, Tooltip, Text, } from '@codesandbox/components'; @@ -14,7 +15,7 @@ import css from '@styled-system/css'; import { sortBy } from 'lodash-es'; import { AnimatePresence, motion } from 'framer-motion'; import { dashboard as dashboardUrls } from '@codesandbox/common/lib/utils/url-generator'; -import { useLocation, useHistory } from 'react-router-dom'; +import { useLocation, useHistory, Link as RouterLink } from 'react-router-dom'; import { formatCurrency } from 'app/utils/currency'; import { useCreateCheckout } from 'app/hooks'; import { @@ -331,32 +332,71 @@ export const ProUpgrade = () => { exit={{ opacity: 0, height: 0 }} style={{ overflow: 'hidden' }} > - - - Paid seats - - + + + Paid seats + + + + + + + + + + + + + - + {/** Temporary copy. */} + + - - - - - - + + + + + + + + {amountPaidMember} From 841a1b5cf4fe283223b9b6e4dcd1eb64f366a27f Mon Sep 17 00:00:00 2001 From: Maria Clara Date: Fri, 4 Nov 2022 19:26:02 +0000 Subject: [PATCH 08/13] remove active icon --- packages/app/src/app/pages/Pro/components/Switcher.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/app/src/app/pages/Pro/components/Switcher.tsx b/packages/app/src/app/pages/Pro/components/Switcher.tsx index 22cf00ebea4..7ae1825ec6f 100644 --- a/packages/app/src/app/pages/Pro/components/Switcher.tsx +++ b/packages/app/src/app/pages/Pro/components/Switcher.tsx @@ -138,7 +138,6 @@ export const Switcher: React.FC<{ ? 'Personal' : workspace.name} - {!isPro && Free} @@ -148,9 +147,7 @@ export const Switcher: React.FC<{ - {workspace.id === activeTeamInfo.id && ( - - )} + {!isPro && Free} ); From 5ce9443a6273aa34f2449f81e34c144a49ea53a9 Mon Sep 17 00:00:00 2001 From: Maria Clara Date: Fri, 4 Nov 2022 19:34:29 +0000 Subject: [PATCH 09/13] update dropdown arrow --- .../src/app/pages/Pro/components/Switcher.tsx | 18 +++--------------- 1 file changed, 3 insertions(+), 15 deletions(-) diff --git a/packages/app/src/app/pages/Pro/components/Switcher.tsx b/packages/app/src/app/pages/Pro/components/Switcher.tsx index 7ae1825ec6f..22886a4e6e6 100644 --- a/packages/app/src/app/pages/Pro/components/Switcher.tsx +++ b/packages/app/src/app/pages/Pro/components/Switcher.tsx @@ -62,7 +62,7 @@ export const Switcher: React.FC<{ /> - + {activeTeamInfo.name} @@ -76,7 +76,8 @@ export const Switcher: React.FC<{ Free )} - + + {isPersonalWorkspace ? 'Personal' : memberLabel} @@ -264,19 +265,6 @@ const Dialog = styled.div` } `; -const WorkspaceNameWrapper = styled(Stack)` - position: relative; - - &:after { - content: ''; - position: absolute; - right: -20px; - top: calc(50% - 4px); - border: 5px solid transparent; - border-top: 7px solid white; - } -`; - const WorkspaceName = styled.p` font-family: 'Inter', sans-serif; font-style: normal; From c38976b15a99e9f5ce4eee436a69d3ae93cff066 Mon Sep 17 00:00:00 2001 From: Maria Clara Date: Tue, 8 Nov 2022 16:51:09 +0000 Subject: [PATCH 10/13] replace tooltip with external link --- packages/app/src/app/pages/Pro/Upgrade.tsx | 42 +++++----------------- 1 file changed, 9 insertions(+), 33 deletions(-) diff --git a/packages/app/src/app/pages/Pro/Upgrade.tsx b/packages/app/src/app/pages/Pro/Upgrade.tsx index eb45517d03c..0e2372437de 100644 --- a/packages/app/src/app/pages/Pro/Upgrade.tsx +++ b/packages/app/src/app/pages/Pro/Upgrade.tsx @@ -6,6 +6,7 @@ import { Element, Link as StyledLink, Tooltip, + Icon, Text, } from '@codesandbox/components'; import { Helmet } from 'react-helmet'; @@ -361,40 +362,15 @@ export const ProUpgrade = () => { - - - Go to team settings - - {/** Temporary copy. */} - - - - - - - - + + Go to team settings + + + From e3f6740be58798c3a6867945967d2152c3bb9bff Mon Sep 17 00:00:00 2001 From: Maria Clara Date: Tue, 8 Nov 2022 16:59:52 +0000 Subject: [PATCH 11/13] fixup --- .../app/src/app/pages/Pro/components/Switcher.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/app/src/app/pages/Pro/components/Switcher.tsx b/packages/app/src/app/pages/Pro/components/Switcher.tsx index 22886a4e6e6..04df32161cb 100644 --- a/packages/app/src/app/pages/Pro/components/Switcher.tsx +++ b/packages/app/src/app/pages/Pro/components/Switcher.tsx @@ -66,16 +66,7 @@ export const Switcher: React.FC<{ {activeTeamInfo.name} - {isFreeWorkspace && ( - - Free - - )} + {isFreeWorkspace && Free} From 290875bb48946f2cb9eb0e8c4ba8e09fb2985f32 Mon Sep 17 00:00:00 2001 From: Maria Clara Date: Tue, 8 Nov 2022 17:02:28 +0000 Subject: [PATCH 12/13] fix extra padding around disabled items --- packages/app/src/app/pages/Pro/components/Switcher.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/app/pages/Pro/components/Switcher.tsx b/packages/app/src/app/pages/Pro/components/Switcher.tsx index 04df32161cb..fb2a71a4972 100644 --- a/packages/app/src/app/pages/Pro/components/Switcher.tsx +++ b/packages/app/src/app/pages/Pro/components/Switcher.tsx @@ -111,7 +111,7 @@ export const Switcher: React.FC<{ onSelect={() => setActiveTeam(workspace)} key={workspace.id} disabled={disabled} - style={{ opacity: disabled ? 0.5 : 1 }} + style={{ opacity: disabled ? 0.5 : 1, padding: 0 }} > Date: Tue, 8 Nov 2022 16:36:23 -0300 Subject: [PATCH 13/13] fixup --- .../pages/Dashboard/Sidebar/BottomMessages/TrialExpiring.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/app/pages/Dashboard/Sidebar/BottomMessages/TrialExpiring.tsx b/packages/app/src/app/pages/Dashboard/Sidebar/BottomMessages/TrialExpiring.tsx index c9804ee47c4..ee0eb52fbc7 100644 --- a/packages/app/src/app/pages/Dashboard/Sidebar/BottomMessages/TrialExpiring.tsx +++ b/packages/app/src/app/pages/Dashboard/Sidebar/BottomMessages/TrialExpiring.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Stack, Text, Button } from '@codesandbox/components'; -import { useCreateCustomerPortal } from 'app/pages/Pro/upgrade/utils'; +import { useCreateCustomerPortal } from 'app/hooks/useCreateCustomerPortal'; export const TrialExpiring: React.FC<{ activeTeam: string;