diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
index 387e7bfb29..70b6ece5fd 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -4,10 +4,10 @@ import { useTranslation } from 'react-i18next'
import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
import { RiArrowDownSLine } from '@remixicon/react'
import cn from '@/utils/classnames'
+import PlanBadge from '@/app/components/header/plan-badge'
import { switchWorkspace } from '@/service/common'
import { useWorkspacesContext } from '@/context/workspace-context'
import { ToastContext } from '@/app/components/base/toast'
-import PlanBadge from '../../plan-badge'
import type { Plan } from '@/app/components/billing/type'
const WorkplaceSelector = () => {
diff --git a/web/app/components/header/index.tsx b/web/app/components/header/index.tsx
index 7e46e000d5..13c587dc19 100644
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@@ -94,10 +94,10 @@ const Header = () => {
}
-
{
(isMobile && isShowNavMenu) && (
diff --git a/web/app/components/header/plan-badge/index.tsx b/web/app/components/header/plan-badge/index.tsx
index 22f7a0fa05..37cbe2a710 100644
--- a/web/app/components/header/plan-badge/index.tsx
+++ b/web/app/components/header/plan-badge/index.tsx
@@ -1,6 +1,9 @@
import { useProviderContext } from '@/context/provider-context'
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
+import {
+ RiGraduationCapFill,
+} from '@remixicon/react'
import { SparklesSoft } from '../../base/icons/src/public/common'
import PremiumBadge from '../../base/premium-badge'
import { Plan } from '../../billing/type'
@@ -13,7 +16,7 @@ type PlanBadgeProps = {
}
const PlanBadge: FC
= ({ plan, allowHover, sandboxAsUpgrade = false, onClick }) => {
- const { isFetchedPlan } = useProviderContext()
+ const { isFetchedPlan, isEducationWorkspace } = useProviderContext()
const { t } = useTranslation()
if (!isFetchedPlan) return null
@@ -39,7 +42,8 @@ const PlanBadge: FC = ({ plan, allowHover, sandboxAsUpgrade = fa
if (plan === Plan.professional) {
return
-
+
+ {isEducationWorkspace && }
pro
diff --git a/web/app/components/swr-initor.tsx b/web/app/components/swr-initor.tsx
index 2a119df996..d6a7f23f3a 100644
--- a/web/app/components/swr-initor.tsx
+++ b/web/app/components/swr-initor.tsx
@@ -5,6 +5,10 @@ import { useCallback, useEffect, useState } from 'react'
import type { ReactNode } from 'react'
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
import { fetchSetupStatus } from '@/service/common'
+import {
+ EDUCATION_VERIFYING_LOCALSTORAGE_ITEM,
+ EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION,
+} from '@/app/education-apply/constants'
type SwrInitorProps = {
children: ReactNode
@@ -41,6 +45,11 @@ const SwrInitor = ({
useEffect(() => {
(async () => {
+ const action = searchParams.get('action')
+
+ if (action === EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION)
+ localStorage.setItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM, 'yes')
+
try {
const isFinished = await isSetupFinished()
if (!isFinished) {
diff --git a/web/app/education-apply/constants.ts b/web/app/education-apply/constants.ts
new file mode 100644
index 0000000000..a5672d19f9
--- /dev/null
+++ b/web/app/education-apply/constants.ts
@@ -0,0 +1,2 @@
+export const EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION = 'getEducationVerify'
+export const EDUCATION_VERIFYING_LOCALSTORAGE_ITEM = 'educationVerifying'
diff --git a/web/app/education-apply/education-apply-page.tsx b/web/app/education-apply/education-apply-page.tsx
new file mode 100644
index 0000000000..8d822f2ab0
--- /dev/null
+++ b/web/app/education-apply/education-apply-page.tsx
@@ -0,0 +1,191 @@
+'use client'
+
+import {
+ useMemo,
+ useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiExternalLinkLine } from '@remixicon/react'
+import {
+ useRouter,
+ useSearchParams,
+} from 'next/navigation'
+import UserInfo from './user-info'
+import SearchInput from './search-input'
+import RoleSelector from './role-selector'
+import Confirm from './verify-state-modal'
+import Button from '@/app/components/base/button'
+import Checkbox from '@/app/components/base/checkbox'
+import {
+ useEducationAdd,
+ useInvalidateEducationStatus,
+} from '@/service/use-education'
+import { useProviderContext } from '@/context/provider-context'
+import { useToastContext } from '@/app/components/base/toast'
+import { EDUCATION_VERIFYING_LOCALSTORAGE_ITEM } from '@/app/education-apply/constants'
+import { getLocaleOnClient } from '@/i18n'
+
+const EducationApplyAge = () => {
+ const { t } = useTranslation()
+ const locale = getLocaleOnClient()
+ const [schoolName, setSchoolName] = useState('')
+ const [role, setRole] = useState('Student')
+ const [ageChecked, setAgeChecked] = useState(false)
+ const [inSchoolChecked, setInSchoolChecked] = useState(false)
+ const {
+ isPending,
+ mutateAsync: educationAdd,
+ } = useEducationAdd({ onSuccess: () => {} })
+ const [modalShow, setShowModal] = useState void }>(undefined)
+ const { onPlanInfoChanged } = useProviderContext()
+ const updateEducationStatus = useInvalidateEducationStatus()
+ const { notify } = useToastContext()
+ const router = useRouter()
+
+ const docLink = useMemo(() => {
+ if (locale === 'zh-Hans')
+ return 'https://docs.dify.ai/zh-hans/getting-started/dify-for-education'
+ if (locale === 'ja-JP')
+ return 'https://docs.dify.ai/ja-jp/getting-started/dify-for-education'
+ return 'https://docs.dify.ai/getting-started/dify-for-education'
+ }, [locale])
+
+ const handleModalConfirm = () => {
+ setShowModal(undefined)
+ onPlanInfoChanged()
+ updateEducationStatus()
+ localStorage.removeItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
+ router.replace('/')
+ }
+
+ const searchParams = useSearchParams()
+ const token = searchParams.get('token')
+ const handleSubmit = () => {
+ educationAdd({
+ token: token || '',
+ role,
+ institution: schoolName,
+ }).then((res) => {
+ if (res.message === 'success') {
+ setShowModal({
+ title: t('education.successTitle'),
+ desc: t('education.successContent'),
+ onConfirm: handleModalConfirm,
+ })
+ }
+ else {
+ notify({
+ type: 'error',
+ message: t('education.submitError'),
+ })
+ }
+ })
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
{t('education.toVerified')}
+
+ {t('education.toVerifiedTip.front')}
+ {t('education.toVerifiedTip.coupon')}
+ {t('education.toVerifiedTip.end')}
+
+
+
+
+
+
+
+ {t('education.form.schoolName.title')}
+
+
+
+
+
+ {t('education.form.schoolRole.title')}
+
+
+
+
+
+ {t('education.form.terms.title')}
+
+
+
+
+ setAgeChecked(!ageChecked)}
+ />
+ {t('education.form.terms.option.age')}
+
+
+ setInSchoolChecked(!inSchoolChecked)}
+ />
+ {t('education.form.terms.option.inSchool')}
+
+
+
+
+
+
+ {t('education.learn')}
+
+
+
+
+
{})}
+ onCancel={modalShow?.onConfirm || (() => {})}
+ />
+
+ {
+ options.map(option => (
+
onChange(option.key)}
+ >
+
+
+ {option.value}
+
+ ))
+ }
+
+ {
+ schools.map((school, index) => (
+
{
+ onChange(school)
+ setOpen(false)
+ }}
+ >
+ {school}
+
+ ))
+ }
+
+
+
+ {t('education.currentSigned')}
+
+
+
+
+
+
+
+ {userProfile.name}
+
+
+ {userProfile.email}
+
+
+
+
+
{
+ e.preventDefault()
+ e.stopPropagation()
+ }}
+ >
+
+
+
+ {email && (
+
+
{t('education.emailLabel')}
+
{email}
+
+ )}
+
+
+
+
+
+
+