feat(console): add guide for organization template page (#5647)

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

@@ -1,8 +1,10 @@
 import { withAppInsights } from '@logto/app-insights/react/AppInsightsReact';
 import classNames from 'classnames';
+import { useState } from 'react';
 import { Outlet } from 'react-router-dom';
 
 import Research from '@/assets/icons/research.svg';
+import Drawer from '@/components/Drawer';
 import PageMeta from '@/components/PageMeta';
 import { OrganizationTemplateTabs, organizationTemplateLink } from '@/consts';
 import Button from '@/ds-components/Button';
@@ -12,12 +14,15 @@ import TabNav, { TabNavItem } from '@/ds-components/TabNav';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
 import * as pageLayout from '@/scss/page-layout.module.scss';
 
+import Introduction from '../Organizations/Guide/Introduction';
+
 import * as styles from './index.module.scss';
 
 const basePathname = '/organization-template';
 
 function OrganizationTemplate() {
   const { getDocumentationUrl } = useDocumentationUrl();
+  const [isGuideDrawerOpen, setIsGuideDrawerOpen] = useState(false);
 
   return (
     <div className={classNames(pageLayout.container, styles.container)}>
@@ -36,9 +41,19 @@ function OrganizationTemplate() {
           title="application_details.check_guide"
           type="outline"
           onClick={() => {
-            // Todo @xiaoyijun implement guide
+            setIsGuideDrawerOpen(true);
           }}
         />
+        <Drawer
+          title="organizations.guide.title"
+          subtitle="organizations.guide.subtitle"
+          isOpen={isGuideDrawerOpen}
+          onClose={() => {
+            setIsGuideDrawerOpen(false);
+          }}
+        >
+          <Introduction isReadonly />
+        </Drawer>
       </div>
       <TabNav>
         <TabNavItem href={`${basePathname}/${OrganizationTemplateTabs.OrganizationRoles}`}>