feat(console): add paywall for organization template (#5679)

packages/console/src/pages/OrganizationTemplate/index.module.scss

@@ -4,5 +4,12 @@
   > *:not(:first-child) {
     margin-top: _.unit(4);
   }
+
+  .paywallCard {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 

packages/console/src/pages/OrganizationTemplate/index.tsx

@@ -1,17 +1,28 @@
 import { withAppInsights } from '@logto/app-insights/react/AppInsightsReact';
+import { ReservedPlanId } from '@logto/schemas';
+import { cond } from '@silverhand/essentials';
 import classNames from 'classnames';
-import { useState } from 'react';
+import { useCallback, useContext, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 
 import Research from '@/assets/icons/research.svg';
+import OrganizationEmptyDark from '@/assets/images/organization-empty-dark.svg';
+import OrganizationEmpty from '@/assets/images/organization-empty.svg';
 import Drawer from '@/components/Drawer';
 import PageMeta from '@/components/PageMeta';
 import { OrganizationTemplateTabs, organizationTemplateLink } from '@/consts';
+import { isCloud } from '@/consts/env';
+import { subscriptionPage } from '@/consts/pages';
+import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
+import { TenantsContext } from '@/contexts/TenantsProvider';
 import Button from '@/ds-components/Button';
+import Card from '@/ds-components/Card';
 import CardTitle from '@/ds-components/CardTitle';
 import DynamicT from '@/ds-components/DynamicT';
 import TabNav, { TabNavItem } from '@/ds-components/TabNav';
+import TablePlaceholder from '@/ds-components/Table/TablePlaceholder';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
+import useTenantPathname from '@/hooks/use-tenant-pathname';
 import * as pageLayout from '@/scss/page-layout.module.scss';
 
 import Introduction from '../Organizations/Guide/Introduction';
@@ -23,6 +34,14 @@ const basePathname = '/organization-template';
 function OrganizationTemplate() {
   const { getDocumentationUrl } = useDocumentationUrl();
   const [isGuideDrawerOpen, setIsGuideDrawerOpen] = useState(false);
+  const { currentPlan } = useContext(SubscriptionDataContext);
+  const { isDevTenant } = useContext(TenantsContext);
+  const isOrganizationsDisabled = isCloud && !currentPlan.quota.organizationsEnabled;
+  const { navigate } = useTenantPathname();
+
+  const handleUpgradePlan = useCallback(() => {
+    navigate(subscriptionPage);
+  }, [navigate]);
 
   return (
     <div className={classNames(pageLayout.container, styles.container)}>
@@ -35,6 +54,7 @@ function OrganizationTemplate() {
             href: getDocumentationUrl(organizationTemplateLink),
             targetBlank: 'noopener',
           }}
+          paywall={cond((isOrganizationsDisabled || isDevTenant) && ReservedPlanId.Pro)}
         />
         <Button
           icon={<Research />}
@@ -55,15 +75,39 @@ function OrganizationTemplate() {
           <Introduction isReadonly />
         </Drawer>
       </div>
-      <TabNav>
-        <TabNavItem href={`${basePathname}/${OrganizationTemplateTabs.OrganizationRoles}`}>
-          <DynamicT forKey="organization_template.roles.tab_name" />
-        </TabNavItem>
-        <TabNavItem href={`${basePathname}/${OrganizationTemplateTabs.OrganizationPermissions}`}>
-          <DynamicT forKey="organization_template.permissions.tab_name" />
-        </TabNavItem>
-      </TabNav>
-      <Outlet />
+      {isOrganizationsDisabled && (
+        <Card className={styles.paywallCard}>
+          <TablePlaceholder
+            title="organization_template.title"
+            description="organization_template.subtitle"
+            image={<OrganizationEmpty />}
+            imageDark={<OrganizationEmptyDark />}
+            action={
+              <Button
+                title="upsell.upgrade_plan"
+                type="primary"
+                size="large"
+                onClick={handleUpgradePlan}
+              />
+            }
+          />
+        </Card>
+      )}
+      {!isOrganizationsDisabled && (
+        <>
+          <TabNav>
+            <TabNavItem href={`${basePathname}/${OrganizationTemplateTabs.OrganizationRoles}`}>
+              <DynamicT forKey="organization_template.roles.tab_name" />
+            </TabNavItem>
+            <TabNavItem
+              href={`${basePathname}/${OrganizationTemplateTabs.OrganizationPermissions}`}
+            >
+              <DynamicT forKey="organization_template.permissions.tab_name" />
+            </TabNavItem>
+          </TabNav>
+          <Outlet />
+        </>
+      )}
     </div>
   );
 }