diff --git a/packages/console/src/components/ProTag/index.tsx b/packages/console/src/components/ProTag/index.tsx
index e118492e8..77e83f9a8 100644
--- a/packages/console/src/components/ProTag/index.tsx
+++ b/packages/console/src/components/ProTag/index.tsx
@@ -1,10 +1,16 @@
+import classNames from 'classnames';
+
import DynamicT from '@/ds-components/DynamicT';
import * as styles from './index.module.scss';
-function ProTag() {
+type Props = {
+ className?: string;
+};
+
+function ProTag({ className }: Props) {
return (
-
+
);
diff --git a/packages/console/src/pages/Applications/components/GuideCard/index.module.scss b/packages/console/src/pages/Applications/components/GuideCard/index.module.scss
index bc8355ff3..c87131f53 100644
--- a/packages/console/src/pages/Applications/components/GuideCard/index.module.scss
+++ b/packages/console/src/pages/Applications/components/GuideCard/index.module.scss
@@ -34,9 +34,16 @@
gap: _.unit(1);
}
+ .flexRow {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
.name {
font: var(--font-label-2);
color: var(--color-text);
+ margin-right: _.unit(1);
}
.description {
diff --git a/packages/console/src/pages/Applications/components/GuideCard/index.tsx b/packages/console/src/pages/Applications/components/GuideCard/index.tsx
index e9dda6529..0a42e3c9b 100644
--- a/packages/console/src/pages/Applications/components/GuideCard/index.tsx
+++ b/packages/console/src/pages/Applications/components/GuideCard/index.tsx
@@ -1,8 +1,15 @@
+import { ApplicationType } from '@logto/schemas';
import classNames from 'classnames';
-import { Suspense } from 'react';
+import { Suspense, useContext } from 'react';
import { type Guide, type GuideMetadata } from '@/assets/docs/guides/types';
+import ProTag from '@/components/ProTag';
+import { isCloud } from '@/consts/env';
+import { subscriptionPage } from '@/consts/pages';
+import { TenantsContext } from '@/contexts/TenantsProvider';
import Button from '@/ds-components/Button';
+import useSubscriptionPlan from '@/hooks/use-subscription-plan';
+import useTenantPathname from '@/hooks/use-tenant-pathname';
import * as styles from './index.module.scss';
@@ -22,6 +29,13 @@ function LogoSkeleton() {
}
function GuideCard({ data, onClick, hasBorder }: Props) {
+ const { navigate } = useTenantPathname();
+ const { currentTenantId } = useContext(TenantsContext);
+ const { data: currentPlan } = useSubscriptionPlan(currentTenantId);
+ const isM2mDisabled = isCloud && currentPlan?.quota.machineToMachineLimit === 0;
+ const isSubscriptionRequired =
+ isM2mDisabled && data.metadata.target === ApplicationType.MachineToMachine;
+
const {
id,
Logo,
@@ -35,15 +49,22 @@ function GuideCard({ data, onClick, hasBorder }: Props) {
-
{name}
+
+
{name}
+ {isSubscriptionRequired &&
}
+
{description}