From 41bc73c65d6cc521b93213d9b7a92347291b622b Mon Sep 17 00:00:00 2001 From: Xiao Yijun Date: Fri, 21 Jul 2023 15:29:30 +0800 Subject: [PATCH] feat(console): add subscription info for tenant selector (#4200) --- .../Skeleton/index.module.scss | 8 +++ .../TenantDropdownItem/Skeleton/index.tsx | 7 ++ .../TenantDropdownItem/TenantStatusTag.tsx | 72 +++++++++++++++++++ .../TenantDropdownItem/index.module.scss | 60 ++++++++++++++++ .../TenantDropdownItem/index.tsx | 45 ++++++++++++ .../Topbar/TenantSelector/index.module.scss | 40 ----------- .../Topbar/TenantSelector/index.tsx | 23 +++--- packages/console/src/types/subscriptions.ts | 4 +- packages/console/src/utils/subscription.ts | 11 +++ 9 files changed, 215 insertions(+), 55 deletions(-) create mode 100644 packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/Skeleton/index.module.scss create mode 100644 packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/Skeleton/index.tsx create mode 100644 packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/TenantStatusTag.tsx create mode 100644 packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/index.module.scss create mode 100644 packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/index.tsx diff --git a/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/Skeleton/index.module.scss b/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/Skeleton/index.module.scss new file mode 100644 index 000000000..71a3f493e --- /dev/null +++ b/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/Skeleton/index.module.scss @@ -0,0 +1,8 @@ +@use '@/scss/underscore' as _; + +.skeleton { + @include _.shimmering-animation; + width: 48px; + height: 16px; + border-radius: 6px; +} diff --git a/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/Skeleton/index.tsx b/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/Skeleton/index.tsx new file mode 100644 index 000000000..953e0c3dd --- /dev/null +++ b/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/Skeleton/index.tsx @@ -0,0 +1,7 @@ +import * as styles from './index.module.scss'; + +function Skeleton() { + return
; +} + +export default Skeleton; diff --git a/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/TenantStatusTag.tsx b/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/TenantStatusTag.tsx new file mode 100644 index 000000000..ddb70c9f2 --- /dev/null +++ b/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/TenantStatusTag.tsx @@ -0,0 +1,72 @@ +import { conditional } from '@silverhand/essentials'; +import { useMemo } from 'react'; + +import DynamicT from '@/ds-components/DynamicT'; +import Tag from '@/ds-components/Tag'; +import useInvoices from '@/hooks/use-invoices'; +import useSubscriptionPlan from '@/hooks/use-subscription-plan'; +import useSubscriptionUsage from '@/hooks/use-subscription-usage'; +import { getLatestUnpaidInvoice } from '@/utils/subscription'; + +import Skeleton from './Skeleton'; + +type Props = { + tenantId: string; + className?: string; +}; + +function TenantStatusTag({ tenantId, className }: Props) { + const { data: usage, error: fetchUsageError } = useSubscriptionUsage(tenantId); + const { data: invoices, error: fetchInvoiceError } = useInvoices(tenantId); + const { data: subscriptionPlan, error: fetchSubscriptionError } = useSubscriptionPlan(tenantId); + + const isLoadingUsage = !usage && !fetchUsageError; + const isLoadingInvoice = !invoices && !fetchInvoiceError; + const isLoadingSubscription = !subscriptionPlan && !fetchSubscriptionError; + + const latestUnpaidInvoice = useMemo( + () => conditional(invoices && getLatestUnpaidInvoice(invoices)), + [invoices] + ); + + if (isLoadingUsage || isLoadingInvoice || isLoadingSubscription) { + return ; + } + + /** + * Tenant status priority: + * 1. suspend (WIP) @xiaoyijun + * 2. overdue + * 3. mau exceeded + */ + + if (invoices && latestUnpaidInvoice) { + return ( + + + + ); + } + + if (subscriptionPlan && usage) { + const { activeUsers } = usage; + + const { + quota: { mauLimit }, + } = subscriptionPlan; + + const isMauExceeded = mauLimit !== null && activeUsers >= mauLimit; + + if (isMauExceeded) { + return ( + + + + ); + } + } + + return null; +} + +export default TenantStatusTag; diff --git a/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/index.module.scss b/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/index.module.scss new file mode 100644 index 000000000..8f9954dc6 --- /dev/null +++ b/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/index.module.scss @@ -0,0 +1,60 @@ +@use '@/scss/underscore' as _; + +.item { + display: flex; + align-items: center; + padding: _.unit(2.5) _.unit(3) _.unit(2.5) _.unit(4); + margin: _.unit(1); + border-radius: 6px; + transition: background-color 0.2s ease-in-out; + justify-content: space-between; + + &:hover { + background: var(--color-hover); + } + + &:not(:disabled) { + cursor: pointer; + } + + .info { + display: flex; + flex-direction: column; + margin-right: _.unit(4); + + .meta { + display: flex; + align-items: center; + gap: _.unit(2); + + .name { + font: var(--font-body-2); + @include _.text-ellipsis; + } + + .statusTag { + background-color: var(--color-on-error-container); + color: var(--color-white); + font: var(--font-label-3); + } + } + + .planName { + margin-top: _.unit(0.5); + font: var(--font-body-3); + color: var(--color-text-secondary); + } + } + + + .checkIcon { + width: 20px; + height: 20px; + flex-shrink: 0; + color: transparent; + + &.visible { + color: var(--color-primary-40); + } + } +} diff --git a/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/index.tsx b/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/index.tsx new file mode 100644 index 000000000..873aefa4c --- /dev/null +++ b/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/TenantDropdownItem/index.tsx @@ -0,0 +1,45 @@ +import { type TenantInfo } from '@logto/schemas/models'; +import classNames from 'classnames'; + +import Tick from '@/assets/icons/tick.svg'; +import PlanName from '@/components/PlanName'; +import { isProduction } from '@/consts/env'; +import { DropdownItem } from '@/ds-components/Dropdown'; +import useSubscriptionPlan from '@/hooks/use-subscription-plan'; + +import TenantEnvTag from '../TenantEnvTag'; + +import Skeleton from './Skeleton'; +import TenantStatusTag from './TenantStatusTag'; +import * as styles from './index.module.scss'; + +type Props = { + tenantData: TenantInfo; + isSelected: boolean; + onClick: () => void; +}; + +function TenantDropdownItem({ tenantData, isSelected, onClick }: Props) { + const { id, name, tag } = tenantData; + const { data: tenantPlan } = useSubscriptionPlan(id); + + return ( + +
+
+
{name}
+ + {!isProduction && } +
+ {!isProduction && ( +
+ {tenantPlan ? : } +
+ )} +
+ + + ); +} + +export default TenantDropdownItem; diff --git a/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/index.module.scss b/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/index.module.scss index be3b6ee14..74d330892 100644 --- a/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/index.module.scss +++ b/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/index.module.scss @@ -71,46 +71,6 @@ $dropdown-item-height: 40px; } } -.dropdownItem { - display: flex; - align-items: center; - padding: _.unit(2.5) _.unit(3) _.unit(2.5) _.unit(4); - margin: _.unit(1); - border-radius: 6px; - transition: background-color 0.2s ease-in-out; - - &:hover { - background: var(--color-hover); - } - - &:not(:disabled) { - cursor: pointer; - } - - .dropdownName { - font: var(--font-body-2); - margin-right: _.unit(2); - @include _.text-ellipsis; - } - - .dropdownTag { - font: var(--font-body-3); - margin-right: _.unit(4); - } - - .checkIcon { - width: 20px; - height: 20px; - flex-shrink: 0; - color: transparent; - margin-left: auto; - - &.visible { - color: var(--color-primary-40); - } - } -} - .createTenantButton { all: unset; /** diff --git a/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/index.tsx b/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/index.tsx index 6e149dab1..514446eda 100644 --- a/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/index.tsx +++ b/packages/console/src/containers/AppContent/components/Topbar/TenantSelector/index.tsx @@ -6,14 +6,14 @@ import { useTranslation } from 'react-i18next'; import KeyboardArrowDown from '@/assets/icons/keyboard-arrow-down.svg'; import PlusSign from '@/assets/icons/plus.svg'; -import Tick from '@/assets/icons/tick.svg'; import CreateTenantModal from '@/components/CreateTenantModal'; import { TenantsContext } from '@/contexts/TenantsProvider'; import Divider from '@/ds-components/Divider'; -import Dropdown, { DropdownItem } from '@/ds-components/Dropdown'; +import Dropdown from '@/ds-components/Dropdown'; import OverlayScrollbar from '@/ds-components/OverlayScrollbar'; import { onKeyDownHandler } from '@/utils/a11y'; +import TenantDropdownItem from './TenantDropdownItem'; import TenantEnvTag from './TenantEnvTag'; import * as styles from './index.module.scss'; @@ -70,21 +70,16 @@ export default function TenantSelector() { }} > - {tenants.map(({ id, name, tag }) => ( - ( + { - navigateTenant(id); + navigateTenant(tenantData.id); setShowDropdown(false); }} - > -
{name}
- - - + /> ))} diff --git a/packages/console/src/types/subscriptions.ts b/packages/console/src/types/subscriptions.ts index 92fc38104..80e0001bb 100644 --- a/packages/console/src/types/subscriptions.ts +++ b/packages/console/src/types/subscriptions.ts @@ -60,4 +60,6 @@ export const localCheckoutSessionGuard = z.object({ export type LocalCheckoutSession = z.infer; -export type InvoiceStatus = InvoicesResponse['invoices'][number]['status']; +export type Invoice = InvoicesResponse['invoices'][number]; + +export type InvoiceStatus = Invoice['status']; diff --git a/packages/console/src/utils/subscription.ts b/packages/console/src/utils/subscription.ts index 20ecd427c..9e46a953e 100644 --- a/packages/console/src/utils/subscription.ts +++ b/packages/console/src/utils/subscription.ts @@ -6,6 +6,7 @@ import { reservedPlanIdOrder, ticketSupportResponseTimeMap, } from '@/consts/subscriptions'; +import { type Invoice } from '@/types/subscriptions'; export const addSupportQuotaToPlan = (subscriptionPlanResponse: SubscriptionPlanResponse) => { const { name, quota } = subscriptionPlanResponse; @@ -35,9 +36,19 @@ type FormatPeriodOptions = { periodEnd: Date; displayYear?: boolean; }; + export const formatPeriod = ({ periodStart, periodEnd, displayYear }: FormatPeriodOptions) => { const format = displayYear ? 'MMM D, YYYY' : 'MMM D'; const formattedStart = dayjs(periodStart).format(format); const formattedEnd = dayjs(periodEnd).format(format); return `${formattedStart} - ${formattedEnd}`; }; + +export const getLatestUnpaidInvoice = (invoices: Invoice[]) => + invoices + .slice() + .sort( + (invoiceA, invoiceB) => + new Date(invoiceB.createdAt).getTime() - new Date(invoiceA.createdAt).getTime() + ) + .find(({ status }) => status === 'uncollectible');