Feat：edu frontend (#17251)

Co-authored-by: crazywoola <427733928@qq.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>

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'

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<undefined | { title: string; desc: string; onConfirm?: () => 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 (
+    <div className='fixed inset-0 z-[31] overflow-y-auto bg-background-body p-6'>
+      <div className='mx-auto w-full max-w-[1408px] rounded-2xl border border-effects-highlight bg-background-default-subtle'>
+        <div
+          className="h-[349px] w-full overflow-hidden rounded-t-2xl bg-cover bg-center bg-no-repeat"
+          style={{
+            backgroundImage: 'url(/education/bg.png)',
+          }}
+        >
+        </div>
+        <div className='mt-[-349px] flex h-[88px] items-center justify-between px-8 py-6'>
+          <img
+            src='/logo/logo-site-dark.png'
+            alt='dify logo'
+            className='h-10'
+          />
+        </div>
+        <div className='mx-auto max-w-[720px] px-8 pb-[180px]'>
+          <div className='mb-2 flex h-[192px] flex-col justify-end pb-4 pt-3 text-text-primary-on-surface'>
+            <div className='title-5xl-bold mb-2 shadow-xs'>{t('education.toVerified')}</div>
+            <div className='system-md-medium shadow-xs'>
+              {t('education.toVerifiedTip.front')}&nbsp;
+              <span className='system-md-semibold underline'>{t('education.toVerifiedTip.coupon')}</span>&nbsp;
+              {t('education.toVerifiedTip.end')}
+            </div>
+          </div>
+          <div className='mb-7'>
+            <UserInfo />
+          </div>
+          <div className='mb-7'>
+            <div className='system-md-semibold mb-1 flex h-6 items-center text-text-secondary'>
+              {t('education.form.schoolName.title')}
+            </div>
+            <SearchInput
+              value={schoolName}
+              onChange={setSchoolName}
+            />
+          </div>
+          <div className='mb-7'>
+            <div className='system-md-semibold mb-1 flex h-6 items-center text-text-secondary'>
+              {t('education.form.schoolRole.title')}
+            </div>
+            <RoleSelector
+              value={role}
+              onChange={setRole}
+            />
+          </div>
+          <div className='mb-7'>
+            <div className='system-md-semibold mb-1 flex h-6 items-center text-text-secondary'>
+              {t('education.form.terms.title')}
+            </div>
+            <div className='system-md-regular mb-1 text-text-tertiary'>
+              {t('education.form.terms.desc.front')}&nbsp;
+              <a href='https://dify.ai/terms' target='_blank' className='text-text-secondary hover:underline'>{t('education.form.terms.desc.termsOfService')}</a>&nbsp;
+              {t('education.form.terms.desc.and')}&nbsp;
+              <a href='https://dify.ai/privacy' target='_blank' className='text-text-secondary hover:underline'>{t('education.form.terms.desc.privacyPolicy')}</a>
+              {t('education.form.terms.desc.end')}
+            </div>
+            <div className='system-md-regular py-2 text-text-primary'>
+              <div className='mb-2 flex'>
+                <Checkbox
+                  className='mr-2 shrink-0'
+                  checked={ageChecked}
+                  onCheck={() => setAgeChecked(!ageChecked)}
+                />
+                {t('education.form.terms.option.age')}
+              </div>
+              <div className='flex'>
+                <Checkbox
+                  className='mr-2 shrink-0'
+                  checked={inSchoolChecked}
+                  onCheck={() => setInSchoolChecked(!inSchoolChecked)}
+                />
+                {t('education.form.terms.option.inSchool')}
+              </div>
+            </div>
+          </div>
+          <Button
+            variant='primary'
+            disabled={!ageChecked || !inSchoolChecked || !schoolName || !role || isPending}
+            onClick={handleSubmit}
+          >
+            {t('education.submit')}
+          </Button>
+          <div className='mb-4 mt-5 h-[1px] bg-gradient-to-r from-[rgba(16,24,40,0.08)]'></div>
+          <a
+            className='system-xs-regular flex items-center text-text-accent'
+            href={docLink}
+            target='_blank'
+          >
+            {t('education.learn')}
+            <RiExternalLinkLine className='ml-1 h-3 w-3' />
+          </a>
+        </div>
+      </div>
+      <Confirm
+        isShow={!!modalShow}
+        title={modalShow?.title || ''}
+        content={modalShow?.desc}
+        onConfirm={modalShow?.onConfirm || (() => {})}
+        onCancel={modalShow?.onConfirm || (() => {})}
+      />
+    </div>
+  )
+}
+
+export default EducationApplyAge

web/app/education-apply/hooks.ts

@@ -0,0 +1,67 @@
+import {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
+import { useDebounceFn } from 'ahooks'
+import { useSearchParams } from 'next/navigation'
+import type { SearchParams } from './types'
+import {
+  EDUCATION_VERIFYING_LOCALSTORAGE_ITEM,
+  EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION,
+} from './constants'
+import { useEducationAutocomplete } from '@/service/use-education'
+import { useModalContextSelector } from '@/context/modal-context'
+
+export const useEducation = () => {
+  const {
+    mutateAsync,
+    isPending,
+    data,
+  } = useEducationAutocomplete()
+
+  const [prevSchools, setPrevSchools] = useState<string[]>([])
+  const handleUpdateSchools = useCallback((searchParams: SearchParams) => {
+    if (searchParams.keywords) {
+      mutateAsync(searchParams).then((res) => {
+        const currentPage = searchParams.page || 0
+        const resSchools = res.data
+        if (currentPage > 0)
+          setPrevSchools(prevSchools => [...(prevSchools || []), ...resSchools])
+        else
+          setPrevSchools(resSchools)
+      })
+    }
+  }, [mutateAsync])
+
+  const { run: querySchoolsWithDebounced } = useDebounceFn((searchParams: SearchParams) => {
+    handleUpdateSchools(searchParams)
+  }, {
+    wait: 300,
+  })
+
+  return {
+    schools: prevSchools,
+    setSchools: setPrevSchools,
+    querySchoolsWithDebounced,
+    handleUpdateSchools,
+    isLoading: isPending,
+    hasNext: data?.has_next,
+  }
+}
+
+export const useEducationInit = () => {
+  const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)
+  const educationVerifying = localStorage.getItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
+  const searchParams = useSearchParams()
+  const educationVerifyAction = searchParams.get('action')
+
+  useEffect(() => {
+    if (educationVerifying === 'yes' || educationVerifyAction === EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION) {
+      setShowAccountSettingModal({ payload: 'billing' })
+
+      if (educationVerifyAction === EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION)
+        localStorage.setItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM, 'yes')
+    }
+  }, [setShowAccountSettingModal, educationVerifying, educationVerifyAction])
+}

web/app/education-apply/role-selector.tsx

@@ -0,0 +1,53 @@
+import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
+
+type RoleSelectorProps = {
+  onChange: (value: string) => void
+  value: string
+}
+
+const RoleSelector = ({
+  onChange,
+  value,
+}: RoleSelectorProps) => {
+  const { t } = useTranslation()
+  const options = [
+    {
+      key: 'Student',
+      value: t('education.form.schoolRole.option.student'),
+    },
+    {
+      key: 'Teacher',
+      value: t('education.form.schoolRole.option.teacher'),
+    },
+    {
+      key: 'School-Administrator',
+      value: t('education.form.schoolRole.option.administrator'),
+    },
+  ]
+
+  return (
+    <div className='flex'>
+      {
+        options.map(option => (
+          <div
+            key={option.key}
+            className='system-md-regular mr-6 flex h-5 cursor-pointer items-center text-text-primary'
+            onClick={() => onChange(option.key)}
+          >
+            <div
+              className={cn(
+                'mr-2 h-4 w-4 rounded-full border border-components-radio-border bg-components-radio-bg shadow-xs',
+                option.key === value && 'border-[5px] border-components-radio-border-checked ',
+              )}
+            >
+            </div>
+            {option.value}
+          </div>
+        ))
+      }
+    </div>
+  )
+}
+
+export default RoleSelector

web/app/education-apply/search-input.tsx

@@ -0,0 +1,121 @@
+import {
+  useCallback,
+  useRef,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { useEducation } from './hooks'
+import Input from '@/app/components/base/input'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+
+type SearchInputProps = {
+  value?: string
+  onChange: (value: string) => void
+}
+const SearchInput = ({
+  value,
+  onChange,
+}: SearchInputProps) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const {
+    schools,
+    setSchools,
+    querySchoolsWithDebounced,
+    handleUpdateSchools,
+    hasNext,
+  } = useEducation()
+  const pageRef = useRef(0)
+  const valueRef = useRef(value)
+
+  const handleSearch = useCallback((debounced?: boolean) => {
+    const keywords = valueRef.current
+    const page = pageRef.current
+    if (debounced) {
+      querySchoolsWithDebounced({
+        keywords,
+        page,
+      })
+      return
+    }
+
+    handleUpdateSchools({
+      keywords,
+      page,
+    })
+  }, [querySchoolsWithDebounced, handleUpdateSchools])
+
+  const handleValueChange = useCallback((e: any) => {
+    setOpen(true)
+    setSchools([])
+    pageRef.current = 0
+    const inputValue = e.target.value
+    valueRef.current = inputValue
+    onChange(inputValue)
+    handleSearch(true)
+  }, [onChange, handleSearch, setSchools])
+
+  const handleScroll = useCallback((e: Event) => {
+    const target = e.target as HTMLDivElement
+    const {
+      scrollTop,
+      scrollHeight,
+      clientHeight,
+    } = target
+    if (scrollTop + clientHeight >= scrollHeight - 5 && scrollTop > 0 && hasNext) {
+      pageRef.current += 1
+      handleSearch()
+    }
+  }, [handleSearch, hasNext])
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom'
+      offset={4}
+      triggerPopupSameWidth
+    >
+      <PortalToFollowElemTrigger className='block w-full'>
+        <Input
+          className='w-full'
+          placeholder={t('education.form.schoolName.placeholder')}
+          value={value}
+          onChange={handleValueChange}
+        />
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[32]'>
+        {
+          !!schools.length && value && (
+            <div
+              className='max-h-[330px] overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1'
+              onScroll={handleScroll as any}
+            >
+              {
+                schools.map((school, index) => (
+                  <div
+                    key={index}
+                    className='system-md-regular flex h-8 cursor-pointer items-center truncate rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover'
+                    title={school}
+                    onClick={() => {
+                      onChange(school)
+                      setOpen(false)
+                    }}
+                  >
+                    {school}
+                  </div>
+                ))
+              }
+            </div>
+          )
+        }
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default SearchInput

web/app/education-apply/types.ts

@@ -0,0 +1,11 @@
+export type SearchParams = {
+  keywords?: string
+  page?: number
+  limit?: number
+}
+
+export type EducationAddParams = {
+  token: string
+  institution: string
+  role: string
+}

web/app/education-apply/user-info.tsx

@@ -0,0 +1,61 @@
+import { useTranslation } from 'react-i18next'
+import { useRouter } from 'next/navigation'
+import Button from '@/app/components/base/button'
+import { useAppContext } from '@/context/app-context'
+import { logout } from '@/service/common'
+import Avatar from '@/app/components/base/avatar'
+import { Triangle } from '@/app/components/base/icons/src/public/education'
+
+const UserInfo = () => {
+  const router = useRouter()
+  const { t } = useTranslation()
+  const { userProfile } = useAppContext()
+
+  const handleLogout = async () => {
+    await logout({
+      url: '/logout',
+      params: {},
+    })
+
+    localStorage.removeItem('setup_status')
+    localStorage.removeItem('console_token')
+    localStorage.removeItem('refresh_token')
+
+    router.push('/signin')
+  }
+
+  return (
+    <div className='relative flex items-center justify-between rounded-xl border-[4px] border-components-panel-on-panel-item-bg bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 pb-6 pl-6 pr-8 pt-9 shadow-shadow-shadow-5'>
+      <div className='absolute left-0 top-0 flex items-center'>
+        <div className='system-2xs-semibold-uppercase flex h-[22px] items-center bg-components-panel-on-panel-item-bg pl-2 pt-1 text-text-accent-light-mode-only'>
+          {t('education.currentSigned')}
+        </div>
+        <Triangle className='h-[22px] w-4 text-components-panel-on-panel-item-bg' />
+      </div>
+      <div className='flex items-center'>
+        <Avatar
+          className='mr-4'
+          avatar={userProfile.avatar_url}
+          name={userProfile.name}
+          size={48}
+        />
+        <div className='pt-1.5'>
+          <div className='system-md-semibold text-text-primary'>
+            {userProfile.name}
+          </div>
+          <div className='system-sm-regular text-text-secondary'>
+            {userProfile.email}
+          </div>
+        </div>
+      </div>
+      <Button
+        variant='secondary'
+        onClick={handleLogout}
+      >
+        {t('common.userProfile.logout')}
+      </Button>
+    </div>
+  )
+}
+
+export default UserInfo

web/app/education-apply/verify-state-modal.tsx

@@ -0,0 +1,122 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { useTranslation } from 'react-i18next'
+import {
+  RiExternalLinkLine,
+} from '@remixicon/react'
+import Button from '@/app/components/base/button'
+import { getLocaleOnClient } from '@/i18n'
+
+export type IConfirm = {
+  className?: string
+  isShow: boolean
+  title: string
+  content?: React.ReactNode
+  onConfirm: () => void
+  onCancel: () => void
+  maskClosable?: boolean
+  email?: string
+  showLink?: boolean
+}
+
+function Confirm({
+  isShow,
+  title,
+  content,
+  onConfirm,
+  onCancel,
+  maskClosable = true,
+  showLink,
+  email,
+}: IConfirm) {
+  const { t } = useTranslation()
+  const locale = getLocaleOnClient()
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const [isVisible, setIsVisible] = useState(isShow)
+
+  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 handleClick = () => {
+    window.open(docLink, '_blank', 'noopener,noreferrer')
+  }
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape')
+        onCancel()
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [onCancel])
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (maskClosable && dialogRef.current && !dialogRef.current.contains(event.target as Node))
+      onCancel()
+  }
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [maskClosable])
+
+  useEffect(() => {
+    if (isShow) {
+      setIsVisible(true)
+    }
+    else {
+      const timer = setTimeout(() => setIsVisible(false), 200)
+      return () => clearTimeout(timer)
+    }
+  }, [isShow])
+
+  if (!isVisible)
+    return null
+
+  return createPortal(
+    <div className={'fixed inset-0 z-[10000000] flex items-center justify-center bg-background-overlay'}
+      onClick={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
+    >
+      <div ref={dialogRef} className={'relative w-full max-w-[481px] overflow-hidden'}>
+        <div className='shadows-shadow-lg flex max-w-full flex-col items-start rounded-2xl border-[0.5px] border-solid border-components-panel-border bg-components-panel-bg'>
+          <div className='flex flex-col items-start gap-2 self-stretch pb-4 pl-6 pr-6 pt-6'>
+            <div className='title-2xl-semi-bold text-text-primary'>{title}</div>
+            <div className='system-md-regular w-full text-text-tertiary'>{content}</div>
+          </div>
+          {email && (
+            <div className='w-full space-y-1 px-6 py-3'>
+              <div className='system-sm-semibold py-1 text-text-secondary'>{t('education.emailLabel')}</div>
+              <div className='system-sm-regular rounded-lg bg-components-input-bg-disabled px-3 py-2 text-components-input-text-filled-disabled'>{email}</div>
+            </div>
+          )}
+          <div className='flex items-center justify-between gap-2 self-stretch p-6'>
+            <div className='flex items-center gap-1'>
+              {showLink && (
+                <>
+                  <a onClick={handleClick} href={docLink} target='_blank' className='system-xs-regular cursor-pointer text-text-accent'>{t('education.learn')}</a>
+                  <RiExternalLinkLine className='h-3 w-3 text-text-accent' />
+                </>
+              )}
+            </div>
+            <Button variant='primary' className='!w-20' onClick={onConfirm}>{t('common.operation.ok')}</Button>
+          </div>
+        </div>
+      </div>
+    </div>, document.body,
+  )
+}
+
+export default React.memo(Confirm)