Feat：edu frontend (#17251)
Co-authored-by: crazywoola <427733928@qq.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com>pull/17264/head
KVOJJJin
10 months ago
committed by
GitHub
parent
4b5ec242e7
commit
d1801b1f2e
@ -0,0 +1,29 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import {
|
||||||
|
useEffect,
|
||||||
|
useMemo,
|
||||||
|
} from 'react'
|
||||||
|
import {
|
||||||
|
useRouter,
|
||||||
|
useSearchParams,
|
||||||
|
} from 'next/navigation'
|
||||||
|
import EducationApplyPage from '@/app/education-apply/education-apply-page'
|
||||||
|
import { useProviderContext } from '@/context/provider-context'
|
||||||
|
|
||||||
|
export default function EducationApply() {
|
||||||
|
const router = useRouter()
|
||||||
|
const { enableEducationPlan, isEducationAccount } = useProviderContext()
|
||||||
|
const searchParams = useSearchParams()
|
||||||
|
const token = searchParams.get('token')
|
||||||
|
const showEducationApplyPage = useMemo(() => {
|
||||||
|
return enableEducationPlan && !isEducationAccount && token
|
||||||
|
}, [enableEducationPlan, isEducationAccount, token])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!showEducationApplyPage)
|
||||||
|
router.replace('/')
|
||||||
|
}, [showEducationApplyPage, router])
|
||||||
|
|
||||||
|
return <EducationApplyPage />
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="16" height="22" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path id="Rectangle 979" d="M0 0H16L9.91493 16.7339C8.76529 19.8955 5.76063 22 2.39658 22H0V0Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 214 B |
@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"icon": {
|
||||||
|
"type": "element",
|
||||||
|
"isRootNode": true,
|
||||||
|
"name": "svg",
|
||||||
|
"attributes": {
|
||||||
|
"width": "16",
|
||||||
|
"height": "22",
|
||||||
|
"viewBox": "0 0 16 22",
|
||||||
|
"fill": "none",
|
||||||
|
"xmlns": "http://www.w3.org/2000/svg"
|
||||||
|
},
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"type": "element",
|
||||||
|
"name": "path",
|
||||||
|
"attributes": {
|
||||||
|
"id": "Rectangle 979",
|
||||||
|
"d": "M0 0H16L9.91493 16.7339C8.76529 19.8955 5.76063 22 2.39658 22H0V0Z",
|
||||||
|
"fill": "white"
|
||||||
|
},
|
||||||
|
"children": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"name": "Triangle"
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
// GENERATE BY script
|
||||||
|
// DON NOT EDIT IT MANUALLY
|
||||||
|
|
||||||
|
import * as React from 'react'
|
||||||
|
import data from './Triangle.json'
|
||||||
|
import IconBase from '@/app/components/base/icons/IconBase'
|
||||||
|
import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
|
||||||
|
|
||||||
|
const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
|
||||||
|
props,
|
||||||
|
ref,
|
||||||
|
) => <IconBase {...props} ref={ref} data={data as IconData} />)
|
||||||
|
|
||||||
|
Icon.displayName = 'Triangle'
|
||||||
|
|
||||||
|
export default Icon
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export { default as Triangle } from './Triangle'
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
export const EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION = 'getEducationVerify'
|
||||||
|
export const EDUCATION_VERIFYING_LOCALSTORAGE_ITEM = 'educationVerifying'
|
||||||
@ -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')}
|
||||||
|
<span className='system-md-semibold underline'>{t('education.toVerifiedTip.coupon')}</span>
|
||||||
|
{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')}
|
||||||
|
<a href='https://dify.ai/terms' target='_blank' className='text-text-secondary hover:underline'>{t('education.form.terms.desc.termsOfService')}</a>
|
||||||
|
{t('education.form.terms.desc.and')}
|
||||||
|
<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
|
||||||
@ -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])
|
||||||
|
}
|
||||||
@ -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
|
||||||
@ -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
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
export type SearchParams = {
|
||||||
|
keywords?: string
|
||||||
|
page?: number
|
||||||
|
limit?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export type EducationAddParams = {
|
||||||
|
token: string
|
||||||
|
institution: string
|
||||||
|
role: string
|
||||||
|
}
|
||||||
@ -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
|
||||||
@ -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)
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
const translation = {
|
||||||
|
toVerified: '获取教育版认证',
|
||||||
|
toVerifiedTip: {
|
||||||
|
front: '您现在符合教育版认证的资格。请在下方输入您的教育信息，以完成认证流程，并领取 Dify Professional 版的',
|
||||||
|
coupon: '50% 独家优惠券',
|
||||||
|
end: '。',
|
||||||
|
},
|
||||||
|
currentSigned: '您当前登录的账户是',
|
||||||
|
form: {
|
||||||
|
schoolName: {
|
||||||
|
title: '您的学校名称',
|
||||||
|
placeholder: '请输入您的学校的官方全称（不得缩写）',
|
||||||
|
},
|
||||||
|
schoolRole: {
|
||||||
|
title: '您在学校的身份',
|
||||||
|
option: {
|
||||||
|
student: '学生',
|
||||||
|
teacher: '教师',
|
||||||
|
administrator: '学校管理员',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
terms: {
|
||||||
|
title: '条款与协议',
|
||||||
|
desc: {
|
||||||
|
front: '您的信息和教育版认证资格的使用需遵守我们的',
|
||||||
|
and: '和',
|
||||||
|
end: '。提交即表示：',
|
||||||
|
termsOfService: '服务条款',
|
||||||
|
privacyPolicy: '隐私政策',
|
||||||
|
},
|
||||||
|
option: {
|
||||||
|
age: '我确认我已年满 18 周岁。',
|
||||||
|
inSchool: '我确认我目前已在提供的学校入学或受雇。Dify 可能会要求提供入学/雇佣证明。如我虚报资格，我同意支付因教育版认证而被减免的费用。',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
submit: '提交',
|
||||||
|
submitError: '提交表单失败，请稍后重新提交问卷。',
|
||||||
|
learn: '了解如何获取教育版认证',
|
||||||
|
successTitle: '您已成功获得 Dify 教育版认证！',
|
||||||
|
successContent: '我们已向您的账户发放 Dify Professional 版 50% 折扣优惠券。该优惠券有效期为一年，请在有效期内使用。',
|
||||||
|
rejectTitle: '您的 Dify 教育版认证已被拒绝',
|
||||||
|
rejectContent: '非常遗憾，您无法使用此电子邮件以获得教育版认证资格，也无法领取 Dify Professional 版的 50% 独家优惠券。',
|
||||||
|
emailLabel: '您当前的邮箱',
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default translation
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
@ -0,0 +1,67 @@
|
|||||||
|
import { get, post } from './base'
|
||||||
|
import {
|
||||||
|
useMutation,
|
||||||
|
useQuery,
|
||||||
|
} from '@tanstack/react-query'
|
||||||
|
import { useInvalid } from './use-base'
|
||||||
|
import type { EducationAddParams } from '@/app/education-apply/types'
|
||||||
|
|
||||||
|
const NAME_SPACE = 'education'
|
||||||
|
|
||||||
|
export const useEducationVerify = () => {
|
||||||
|
return useMutation({
|
||||||
|
mutationKey: [NAME_SPACE, 'education-verify'],
|
||||||
|
mutationFn: () => {
|
||||||
|
return get<{ token: string }>('/account/education/verify', {}, { silent: true })
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useEducationAdd = ({
|
||||||
|
onSuccess,
|
||||||
|
}: {
|
||||||
|
onSuccess?: () => void
|
||||||
|
}) => {
|
||||||
|
return useMutation({
|
||||||
|
mutationKey: [NAME_SPACE, 'education-add'],
|
||||||
|
mutationFn: (params: EducationAddParams) => {
|
||||||
|
return post<{ message: string }>('/account/education', {
|
||||||
|
body: params,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onSuccess,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
type SearchParams = {
|
||||||
|
keywords?: string
|
||||||
|
page?: number
|
||||||
|
limit?: number
|
||||||
|
}
|
||||||
|
export const useEducationAutocomplete = () => {
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: (searchParams: SearchParams) => {
|
||||||
|
const {
|
||||||
|
keywords = '',
|
||||||
|
page = 0,
|
||||||
|
limit = 40,
|
||||||
|
} = searchParams
|
||||||
|
return get<{ data: string[]; has_next: boolean; curr_page: number }>(`/account/education/autocomplete?keywords=${keywords}&page=${page}&limit=${limit}`)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useEducationStatus = (disable?: boolean) => {
|
||||||
|
return useQuery({
|
||||||
|
enabled: !disable,
|
||||||
|
queryKey: [NAME_SPACE, 'education-status'],
|
||||||
|
queryFn: () => {
|
||||||
|
return get<{ result: boolean }>('/account/education')
|
||||||
|
},
|
||||||
|
retry: false,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useInvalidateEducationStatus = () => {
|
||||||
|
return useInvalid([NAME_SPACE, 'education-status'])
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue