Skip to content

Commit

Permalink
refactor(console,core): remove isAddOnAvailable (#6689)
Browse files Browse the repository at this point in the history
* refactor: update cloud dependency and remove isAddOnAvailable

* chore: undo dependency updates
  • Loading branch information
darcyYe authored Oct 21, 2024
1 parent 61aa13f commit 671be26
Show file tree
Hide file tree
Showing 16 changed files with 192 additions and 204 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ type Props = {
function Footer({ selectedType, isLoading, onClickCreate, isThirdParty }: Props) {
const {
currentSku,
currentSubscription: { planId, isAddOnAvailable, isEnterprisePlan },
currentSubscription: { planId, isEnterprisePlan },
currentSubscriptionQuota,
} = useContext(SubscriptionDataContext);
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.upsell' });
Expand All @@ -44,7 +44,6 @@ function Footer({ selectedType, isLoading, onClickCreate, isThirdParty }: Props)
if (selectedType) {
if (
selectedType === ApplicationType.MachineToMachine &&
isAddOnAvailable &&
hasMachineToMachineAppsReachedLimit &&
// Just in case the enterprise plan has reached the resource limit, we still need to show charge notice.
isPaidPlan(planId, isEnterprisePlan) &&
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import TypeDescription from '@/pages/Applications/components/TypeDescription';
import modalStyles from '@/scss/modal.module.scss';
import { applicationTypeI18nKey } from '@/types/applications';
import { trySubmitSafe } from '@/utils/form';
import { isPaidPlan } from '@/utils/subscription';

import Footer from './Footer';
import styles from './index.module.scss';
Expand Down Expand Up @@ -57,10 +58,11 @@ function CreateForm({
defaultValues: { type: defaultCreateType, isThirdParty: isDefaultCreateThirdParty },
});
const {
currentSubscription: { isAddOnAvailable, planId },
currentSubscription: { planId, isEnterprisePlan },
} = useContext(SubscriptionDataContext);
const { user } = useCurrentUser();
const { mutate: mutateGlobal } = useSWRConfig();
const isPaidTenant = isPaidPlan(planId, isEnterprisePlan);

const {
field: { onChange, value, name, ref },
Expand Down Expand Up @@ -125,13 +127,13 @@ function CreateForm({
title="applications.create"
subtitle={subtitleElement}
paywall={conditional(
isAddOnAvailable &&
isPaidTenant &&
watch('type') === ApplicationType.MachineToMachine &&
planId !== ReservedPlanId.Pro &&
ReservedPlanId.Pro
)}
hasAddOnTag={
isAddOnAvailable &&
isPaidTenant &&
watch('type') === ApplicationType.MachineToMachine &&
hasMachineToMachineAppsReachedLimit
}
Expand Down
6 changes: 3 additions & 3 deletions packages/console/src/components/FeatureTag/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,16 +80,16 @@ type CombinedAddOnAndFeatureTagProps = {
export function CombinedAddOnAndFeatureTag(props: CombinedAddOnAndFeatureTagProps) {
const { hasAddOnTag, className, paywall } = props;
const {
currentSubscription: { planId, isAddOnAvailable, isEnterprisePlan },
currentSubscription: { planId, isEnterprisePlan },
} = useContext(SubscriptionDataContext);

// We believe that the enterprise plan has already allocated sufficient resource quotas in the deal negotiation, so there is no need for upselling, nor will it trigger the add-on tag prompt.
if (isEnterprisePlan) {
return null;
}

// Show the "Add-on" tag for Pro plan when dev features enabled.
if (hasAddOnTag && isAddOnAvailable && isCloud && planId === ReservedPlanId.Pro) {
// Show the "Add-on" tag for Pro plan.
if (hasAddOnTag && isCloud && planId === ReservedPlanId.Pro) {
return (
<div className={classNames(styles.tag, styles.beta, styles.addOn, className)}>Add-on</div>
);
Expand Down
18 changes: 3 additions & 15 deletions packages/console/src/components/PlanUsage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,13 +63,7 @@ function PlanUsage({ periodicUsage: rawPeriodicUsage }: Props) {
currentSubscriptionQuota,
currentSubscriptionBasicQuota,
currentSubscriptionUsage,
currentSubscription: {
currentPeriodStart,
currentPeriodEnd,
planId,
isAddOnAvailable,
isEnterprisePlan,
},
currentSubscription: { currentPeriodStart, currentPeriodEnd, planId, isEnterprisePlan },
} = useContext(SubscriptionDataContext);
const { currentTenant } = useContext(TenantsContext);

Expand All @@ -90,19 +84,13 @@ function PlanUsage({ periodicUsage: rawPeriodicUsage }: Props) {
}

const isPaidTenant = isPaidPlan(planId, isEnterprisePlan);
const onlyShowPeriodicUsage =
planId === ReservedPlanId.Free || (!isAddOnAvailable && planId === ReservedPlanId.Pro);
const onlyShowPeriodicUsage = planId === ReservedPlanId.Free;

const usages: PlanUsageCardProps[] = usageKeys
// Show all usages for Pro plan and only show MAU and token usage for Free plan
.filter(
(key) =>
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
isAddOnAvailable ||
// TODO: design a flow for enterprise tenants onboarding.
// Show all usages for Enterprise plan since some of the enterprise tenants does not have Stripe subscription, as a result, the `isAddOnAvailable` will be undefined in this case, even if we will deprecate `isAddOnAvailable` soon, the plan usage will not be automatically fixed for these enterprise tenants.
isEnterprisePlan ||
(onlyShowPeriodicUsage && (key === 'mauLimit' || key === 'tokenLimit'))
isPaidTenant || (onlyShowPeriodicUsage && (key === 'mauLimit' || key === 'tokenLimit'))
)
.map((key) => ({
usage: getUsageByKey(key, {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ type Props = {
function Footer({ isCreationLoading, onClickCreate }: Props) {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const {
currentSubscription: { planId, isAddOnAvailable, isEnterprisePlan },
currentSubscription: { planId, isEnterprisePlan },
currentSubscriptionUsage: { resourcesLimit },
currentSku,
} = useContext(SubscriptionDataContext);
Expand Down Expand Up @@ -59,7 +59,6 @@ function Footer({ isCreationLoading, onClickCreate }: Props) {
}

if (
isAddOnAvailable &&
hasReachedLimit &&
// Just in case the enterprise plan has reached the resource limit, we still need to show charge notice.
isPaidPlan(planId, isEnterprisePlan) &&
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import useApi from '@/hooks/use-api';
import useApiResourcesUsage from '@/hooks/use-api-resources-usage';
import modalStyles from '@/scss/modal.module.scss';
import { trySubmitSafe } from '@/utils/form';
import { isPaidPlan } from '@/utils/subscription';

import Footer from './Footer';

Expand All @@ -31,7 +32,7 @@ type Props = {
function CreateForm({ onClose }: Props) {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const {
currentSubscription: { planId, isAddOnAvailable },
currentSubscription: { planId, isEnterprisePlan },
} = useContext(SubscriptionDataContext);

const {
Expand Down Expand Up @@ -69,7 +70,7 @@ function CreateForm({ onClose }: Props) {
title="api_resources.create"
subtitle="api_resources.subtitle"
paywall={conditional(planId !== ReservedPlanId.Pro && ReservedPlanId.Pro)}
hasAddOnTag={isAddOnAvailable && hasReachedLimit}
hasAddOnTag={isPaidPlan(planId, isEnterprisePlan) && hasReachedLimit}
footer={<Footer isCreationLoading={isSubmitting} onClickCreate={onSubmit} />}
onClose={onClose}
>
Expand Down
57 changes: 27 additions & 30 deletions packages/console/src/pages/EnterpriseSso/SsoCreationModal/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const duplicateConnectorNameErrorCode = 'single_sign_on.duplicate_connector_name
function SsoCreationModal({ isOpen, onClose: rawOnClose }: Props) {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const {
currentSubscription: { planId, isAddOnAvailable, isEnterprisePlan },
currentSubscription: { planId, isEnterprisePlan },
currentSubscriptionQuota,
} = useContext(SubscriptionDataContext);
const {
Expand All @@ -65,6 +65,7 @@ function SsoCreationModal({ isOpen, onClose: rawOnClose }: Props) {
currentSubscriptionQuota.enterpriseSsoLimit === null ||
currentSubscriptionQuota.enterpriseSsoLimit > 0 ||
planId === ReservedPlanId.Pro;
const isPaidTenant = isPaidPlan(planId, isEnterprisePlan);

const { data, error } = useSWR<SsoConnectorProvidersResponse, RequestError>(
'api/sso-connector-providers'
Expand Down Expand Up @@ -154,39 +155,35 @@ function SsoCreationModal({ isOpen, onClose: rawOnClose }: Props) {
>
<ModalLayout
title="enterprise_sso.create_modal.title"
paywall={conditional(
isAddOnAvailable && planId !== ReservedPlanId.Pro && ReservedPlanId.Pro
)}
hasAddOnTag={isAddOnAvailable}
paywall={conditional(isPaidTenant && planId !== ReservedPlanId.Pro && ReservedPlanId.Pro)}
hasAddOnTag={isPaidTenant}
footer={
conditional(
isAddOnAvailable &&
// Just in case the enterprise plan has reached the resource limit, we still need to show charge notice.
isPaidPlan(planId, isEnterprisePlan) &&
!enterpriseSsoUpsellNoticeAcknowledged && (
<AddOnNoticeFooter
buttonTitle="enterprise_sso.create_modal.create_button_text"
isCreateButtonDisabled={isCreateButtonDisabled}
onClick={async () => {
void update({ enterpriseSsoUpsellNoticeAcknowledged: true });
await onSubmit();
// Just in case the enterprise plan has reached the resource limit, we still need to show charge notice.
isPaidTenant && !enterpriseSsoUpsellNoticeAcknowledged && (
<AddOnNoticeFooter
buttonTitle="enterprise_sso.create_modal.create_button_text"
isCreateButtonDisabled={isCreateButtonDisabled}
onClick={async () => {
void update({ enterpriseSsoUpsellNoticeAcknowledged: true });
await onSubmit();
}}
>
<Trans
components={{
span: <span className={styles.strong} />,
a: <TextLink to={addOnPricingExplanationLink} />,
}}
>
<Trans
components={{
span: <span className={styles.strong} />,
a: <TextLink to={addOnPricingExplanationLink} />,
}}
>
{t('upsell.add_on.footer.enterprise_sso', {
price: enterpriseSsoAddOnUnitPrice,
planName: t(
isEnterprisePlan ? 'subscription.enterprise' : 'subscription.pro_plan'
),
})}
</Trans>
</AddOnNoticeFooter>
)
{t('upsell.add_on.footer.enterprise_sso', {
price: enterpriseSsoAddOnUnitPrice,
planName: t(
isEnterprisePlan ? 'subscription.enterprise' : 'subscription.pro_plan'
),
})}
</Trans>
</AddOnNoticeFooter>
)
) ??
(isSsoEnabled ? (
<Button
Expand Down
5 changes: 3 additions & 2 deletions packages/console/src/pages/EnterpriseSso/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import Tag from '@/ds-components/Tag';
import type { RequestError } from '@/hooks/use-api';
import useSearchParametersWatcher from '@/hooks/use-search-parameters-watcher';
import useTenantPathname from '@/hooks/use-tenant-pathname';
import { isPaidPlan } from '@/utils/subscription';
import { buildUrl } from '@/utils/url';

import SsoConnectorLogo from './SsoConnectorLogo';
Expand All @@ -37,7 +38,7 @@ function EnterpriseSso() {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const { isDevTenant } = useContext(TenantsContext);
const {
currentSubscription: { planId, isAddOnAvailable },
currentSubscription: { planId, isEnterprisePlan },
currentSubscriptionQuota,
} = useContext(SubscriptionDataContext);

Expand Down Expand Up @@ -66,7 +67,7 @@ function EnterpriseSso() {
paywall: conditional((!isSsoEnabled || isDevTenant) && ReservedPlanId.Pro),
title: 'enterprise_sso.title',
subtitle: 'enterprise_sso.subtitle',
hasAddOnTag: isAddOnAvailable,
hasAddOnTag: isPaidPlan(planId, isEnterprisePlan),
}}
pageMeta={{ titleKey: 'enterprise_sso.page_title' }}
createButton={conditional(
Expand Down
5 changes: 3 additions & 2 deletions packages/console/src/pages/Mfa/PageWrapper/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { isCloud } from '@/consts/env';
import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
import { TenantsContext } from '@/contexts/TenantsProvider';
import CardTitle from '@/ds-components/CardTitle';
import { isPaidPlan } from '@/utils/subscription';

import styles from './index.module.scss';

Expand All @@ -17,7 +18,7 @@ type Props = {
function PageWrapper({ children }: Props) {
const { isDevTenant } = useContext(TenantsContext);
const {
currentSubscription: { planId, isAddOnAvailable },
currentSubscription: { planId, isEnterprisePlan },
currentSubscriptionQuota: { mfaEnabled },
} = useContext(SubscriptionDataContext);
const isMfaEnabled = !isCloud || mfaEnabled || planId === ReservedPlanId.Pro;
Expand All @@ -27,7 +28,7 @@ function PageWrapper({ children }: Props) {
<PageMeta titleKey="mfa.title" />
<CardTitle
paywall={cond((!isMfaEnabled || isDevTenant) && ReservedPlanId.Pro)}
hasAddOnTag={isAddOnAvailable}
hasAddOnTag={isPaidPlan(planId, isEnterprisePlan)}
title="mfa.title"
subtitle="mfa.description"
className={styles.cardTitle}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ function CreateOrganizationModal({ isOpen, onClose }: Props) {
const api = useApi();
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const {
currentSubscription: { planId, isAddOnAvailable, isEnterprisePlan },
currentSubscription: { planId, isEnterprisePlan },
currentSubscriptionQuota,
} = useContext(SubscriptionDataContext);
const {
Expand All @@ -45,6 +45,7 @@ function CreateOrganizationModal({ isOpen, onClose }: Props) {
isCloud &&
!isFeatureEnabled(currentSubscriptionQuota.organizationsLimit) &&
planId !== ReservedPlanId.Pro;
const isPaidTenant = isPaidPlan(planId, isEnterprisePlan);

const {
reset,
Expand Down Expand Up @@ -81,39 +82,35 @@ function CreateOrganizationModal({ isOpen, onClose }: Props) {
>
<ModalLayout
title="organizations.create_organization"
paywall={conditional(
isAddOnAvailable && planId !== ReservedPlanId.Pro && ReservedPlanId.Pro
)}
hasAddOnTag={isAddOnAvailable}
paywall={conditional(isPaidTenant && planId !== ReservedPlanId.Pro && ReservedPlanId.Pro)}
hasAddOnTag={isPaidTenant}
footer={
cond(
isAddOnAvailable &&
// Just in case the enterprise plan has reached the resource limit, we still need to show charge notice.
isPaidPlan(planId, isEnterprisePlan) &&
!organizationUpsellNoticeAcknowledged && (
<AddOnNoticeFooter
isLoading={isSubmitting}
buttonTitle="general.create"
onClick={async () => {
void update({ organizationUpsellNoticeAcknowledged: true });
await submit();
// Just in case the enterprise plan has reached the resource limit, we still need to show charge notice.
isPaidTenant && !organizationUpsellNoticeAcknowledged && (
<AddOnNoticeFooter
isLoading={isSubmitting}
buttonTitle="general.create"
onClick={async () => {
void update({ organizationUpsellNoticeAcknowledged: true });
await submit();
}}
>
<Trans
components={{
span: <span className={styles.strong} />,
a: <TextLink to={addOnPricingExplanationLink} />,
}}
>
<Trans
components={{
span: <span className={styles.strong} />,
a: <TextLink to={addOnPricingExplanationLink} />,
}}
>
{t('upsell.add_on.footer.organization', {
price: organizationAddOnUnitPrice,
planName: t(
isEnterprisePlan ? 'subscription.enterprise' : 'subscription.pro_plan'
),
})}
</Trans>
</AddOnNoticeFooter>
)
{t('upsell.add_on.footer.organization', {
price: organizationAddOnUnitPrice,
planName: t(
isEnterprisePlan ? 'subscription.enterprise' : 'subscription.pro_plan'
),
})}
</Trans>
</AddOnNoticeFooter>
)
) ??
(isOrganizationsDisabled ? (
<QuotaGuardFooter>
Expand Down
6 changes: 3 additions & 3 deletions packages/console/src/pages/Organizations/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import CardTitle from '@/ds-components/CardTitle';
import useDocumentationUrl from '@/hooks/use-documentation-url';
import useTenantPathname from '@/hooks/use-tenant-pathname';
import pageLayout from '@/scss/page-layout.module.scss';
import { isFeatureEnabled } from '@/utils/subscription';
import { isFeatureEnabled, isPaidPlan } from '@/utils/subscription';

import CreateOrganizationModal from './CreateOrganizationModal';
import OrganizationsTable from './OrganizationsTable';
Expand All @@ -27,7 +27,7 @@ const organizationsPathname = '/organizations';
function Organizations() {
const { getDocumentationUrl } = useDocumentationUrl();
const {
currentSubscription: { planId, isAddOnAvailable },
currentSubscription: { planId, isEnterprisePlan },
currentSubscriptionQuota,
} = useContext(SubscriptionDataContext);
const { isDevTenant } = useContext(TenantsContext);
Expand Down Expand Up @@ -64,7 +64,7 @@ function Organizations() {
<div className={pageLayout.headline}>
<CardTitle
paywall={cond((isOrganizationsDisabled || isDevTenant) && ReservedPlanId.Pro)}
hasAddOnTag={isAddOnAvailable}
hasAddOnTag={isPaidPlan(planId, isEnterprisePlan)}
title="organizations.title"
subtitle="organizations.subtitle"
learnMoreLink={{
Expand Down
Loading

0 comments on commit 671be26

Please sign in to comment.