dify
This commit is contained in:
4
dify/web/app/education-apply/constants.ts
Normal file
4
dify/web/app/education-apply/constants.ts
Normal file
@@ -0,0 +1,4 @@
|
||||
export const EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION = 'getEducationVerify'
|
||||
export const EDUCATION_VERIFYING_LOCALSTORAGE_ITEM = 'educationVerifying'
|
||||
export const EDUCATION_PRICING_SHOW_ACTION = 'educationPricing'
|
||||
export const EDUCATION_RE_VERIFY_ACTION = 'educationReVerify'
|
||||
179
dify/web/app/education-apply/education-apply-page.tsx
Normal file
179
dify/web/app/education-apply/education-apply-page.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
'use client'
|
||||
|
||||
import {
|
||||
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 { noop } from 'lodash-es'
|
||||
import DifyLogo from '../components/base/logo/dify-logo'
|
||||
import { useDocLink } from '@/context/i18n'
|
||||
const EducationApplyAge = () => {
|
||||
const { t } = useTranslation()
|
||||
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: noop })
|
||||
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 = useDocLink()
|
||||
|
||||
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] box-content flex h-7 items-center justify-between p-6'>
|
||||
<DifyLogo size='large' style='monochromeWhite' />
|
||||
</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-px 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('/getting-started/dify-for-education')}
|
||||
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 || noop}
|
||||
onCancel={modalShow?.onConfirm || noop}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default EducationApplyAge
|
||||
96
dify/web/app/education-apply/expire-notice-modal.tsx
Normal file
96
dify/web/app/education-apply/expire-notice-modal.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
'use client'
|
||||
import React from 'react'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import { useDocLink } from '@/context/i18n'
|
||||
import Link from 'next/link'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiExternalLinkLine } from '@remixicon/react'
|
||||
import { SparklesSoftAccent } from '../components/base/icons/src/public/common'
|
||||
import useTimestamp from '@/hooks/use-timestamp'
|
||||
import { useModalContextSelector } from '@/context/modal-context'
|
||||
import { useEducationVerify } from '@/service/use-education'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
export type ExpireNoticeModalPayloadProps = {
|
||||
expireAt: number
|
||||
expired: boolean
|
||||
}
|
||||
export type Props = {
|
||||
onClose: () => void
|
||||
} & ExpireNoticeModalPayloadProps
|
||||
|
||||
const i18nPrefix = 'education.notice'
|
||||
|
||||
const ExpireNoticeModal: React.FC<Props> = ({ expireAt, expired, onClose }) => {
|
||||
const { t } = useTranslation()
|
||||
const docLink = useDocLink()
|
||||
const eduDocLink = docLink('/getting-started/dify-for-education')
|
||||
const { formatTime } = useTimestamp()
|
||||
const setShowPricingModal = useModalContextSelector(s => s.setShowPricingModal)
|
||||
const { mutateAsync } = useEducationVerify()
|
||||
const router = useRouter()
|
||||
const handleVerify = async () => {
|
||||
const { token } = await mutateAsync()
|
||||
if (token)
|
||||
router.push(`/education-apply?token=${token}`)
|
||||
}
|
||||
const handleConfirm = async () => {
|
||||
await handleVerify()
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isShow
|
||||
onClose={onClose}
|
||||
title={expired ? t(`${i18nPrefix}.expired.title`) : t(`${i18nPrefix}.isAboutToExpire.title`, { date: formatTime(expireAt, t(`${i18nPrefix}.dateFormat`) as string), interpolation: { escapeValue: false } })}
|
||||
closable
|
||||
className='max-w-[600px]'
|
||||
>
|
||||
<div className='body-md-regular mt-5 space-y-5 text-text-secondary'>
|
||||
<div>
|
||||
{expired ? (<>
|
||||
<div>{t(`${i18nPrefix}.expired.summary.line1`)}</div>
|
||||
<div>{t(`${i18nPrefix}.expired.summary.line2`)}</div>
|
||||
</>
|
||||
) : t(`${i18nPrefix}.isAboutToExpire.summary`)}
|
||||
</div>
|
||||
<div>
|
||||
<strong className='title-md-semi-bold block'>{t(`${i18nPrefix}.stillInEducation.title`)}</strong>
|
||||
{t(`${i18nPrefix}.stillInEducation.${expired ? 'expired' : 'isAboutToExpire'}`)}
|
||||
</div>
|
||||
<div>
|
||||
<strong className='title-md-semi-bold block'>{t(`${i18nPrefix}.alreadyGraduated.title`)}</strong>
|
||||
{t(`${i18nPrefix}.alreadyGraduated.${expired ? 'expired' : 'isAboutToExpire'}`)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-7 flex items-center justify-between space-x-2">
|
||||
<Link className='system-xs-regular flex items-center space-x-1 text-text-accent' href={eduDocLink} target="_blank" rel="noopener noreferrer">
|
||||
<div>{t('education.learn')}</div>
|
||||
<RiExternalLinkLine className='size-3' />
|
||||
</Link>
|
||||
<div className='flex space-x-2'>
|
||||
{expired ? (
|
||||
<Button onClick={() => {
|
||||
onClose()
|
||||
setShowPricingModal()
|
||||
}} className='flex items-center space-x-1'>
|
||||
<SparklesSoftAccent className='size-4' />
|
||||
<div className='text-components-button-secondary-accent-text'>{t(`${i18nPrefix}.action.upgrade`)}</div>
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={onClose}>
|
||||
{t(`${i18nPrefix}.action.dismiss`)}
|
||||
</Button>
|
||||
)}
|
||||
<Button variant='primary' onClick={handleConfirm}>
|
||||
{t(`${i18nPrefix}.action.reVerify`)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ExpireNoticeModal)
|
||||
169
dify/web/app/education-apply/hooks.ts
Normal file
169
dify/web/app/education-apply/hooks.ts
Normal file
@@ -0,0 +1,169 @@
|
||||
import {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { useDebounceFn, useLocalStorageState } from 'ahooks'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
import type { SearchParams } from './types'
|
||||
import {
|
||||
EDUCATION_PRICING_SHOW_ACTION,
|
||||
EDUCATION_RE_VERIFY_ACTION,
|
||||
EDUCATION_VERIFYING_LOCALSTORAGE_ITEM,
|
||||
EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION,
|
||||
} from './constants'
|
||||
import { useEducationAutocomplete, useEducationVerify } from '@/service/use-education'
|
||||
import { useModalContextSelector } from '@/context/modal-context'
|
||||
import dayjs from 'dayjs'
|
||||
import utc from 'dayjs/plugin/utc'
|
||||
import timezone from 'dayjs/plugin/timezone'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useProviderContext } from '@/context/provider-context'
|
||||
import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
|
||||
|
||||
dayjs.extend(utc)
|
||||
dayjs.extend(timezone)
|
||||
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,
|
||||
}
|
||||
}
|
||||
|
||||
type useEducationReverifyNoticeParams = {
|
||||
onNotice: ({
|
||||
expireAt,
|
||||
expired,
|
||||
}: {
|
||||
expireAt: number
|
||||
expired: boolean
|
||||
}) => void
|
||||
}
|
||||
|
||||
const isExpired = (expireAt?: number, timezone?: string) => {
|
||||
if (!expireAt || !timezone)
|
||||
return false
|
||||
const today = dayjs().tz(timezone).startOf('day')
|
||||
const expiredDay = dayjs.unix(expireAt).tz(timezone).startOf('day')
|
||||
return today.isSame(expiredDay) || today.isAfter(expiredDay)
|
||||
}
|
||||
|
||||
const useEducationReverifyNotice = ({
|
||||
onNotice,
|
||||
}: useEducationReverifyNoticeParams) => {
|
||||
const { userProfile: { timezone } } = useAppContext()
|
||||
// const [educationInfo, setEducationInfo] = useState<{ is_student: boolean, allow_refresh: boolean, expire_at: number | null } | null>(null)
|
||||
// const isLoading = !educationInfo
|
||||
const { educationAccountExpireAt, allowRefreshEducationVerify, isLoadingEducationAccountInfo: isLoading } = useProviderContext()
|
||||
const [prevExpireAt, setPrevExpireAt] = useLocalStorageState<number | undefined>('education-reverify-prev-expire-at', {
|
||||
defaultValue: 0,
|
||||
})
|
||||
const [reverifyHasNoticed, setReverifyHasNoticed] = useLocalStorageState<boolean | undefined>('education-reverify-has-noticed', {
|
||||
defaultValue: false,
|
||||
})
|
||||
const [expiredHasNoticed, setExpiredHasNoticed] = useLocalStorageState<boolean | undefined>('education-expired-has-noticed', {
|
||||
defaultValue: false,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoading || !timezone)
|
||||
return
|
||||
if (allowRefreshEducationVerify) {
|
||||
const expired = isExpired(educationAccountExpireAt!, timezone)
|
||||
const isExpireAtChanged = prevExpireAt !== educationAccountExpireAt
|
||||
if (isExpireAtChanged) {
|
||||
setPrevExpireAt(educationAccountExpireAt!)
|
||||
setReverifyHasNoticed(false)
|
||||
setExpiredHasNoticed(false)
|
||||
}
|
||||
const shouldNotice = (() => {
|
||||
if (isExpireAtChanged)
|
||||
return true
|
||||
return expired ? !expiredHasNoticed : !reverifyHasNoticed
|
||||
})()
|
||||
if (shouldNotice) {
|
||||
onNotice({
|
||||
expireAt: educationAccountExpireAt!,
|
||||
expired,
|
||||
})
|
||||
if (expired)
|
||||
setExpiredHasNoticed(true)
|
||||
else
|
||||
setReverifyHasNoticed(true)
|
||||
}
|
||||
}
|
||||
}, [allowRefreshEducationVerify, timezone])
|
||||
|
||||
return {
|
||||
isLoading,
|
||||
expireAt: educationAccountExpireAt!,
|
||||
expired: isExpired(educationAccountExpireAt!, timezone),
|
||||
}
|
||||
}
|
||||
|
||||
export const useEducationInit = () => {
|
||||
const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)
|
||||
const setShowPricingModal = useModalContextSelector(s => s.setShowPricingModal)
|
||||
const setShowEducationExpireNoticeModal = useModalContextSelector(s => s.setShowEducationExpireNoticeModal)
|
||||
const educationVerifying = localStorage.getItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
|
||||
const searchParams = useSearchParams()
|
||||
const educationVerifyAction = searchParams.get('action')
|
||||
|
||||
useEducationReverifyNotice({
|
||||
onNotice: (payload) => {
|
||||
setShowEducationExpireNoticeModal({ payload })
|
||||
},
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const { mutateAsync } = useEducationVerify()
|
||||
const handleVerify = async () => {
|
||||
const { token } = await mutateAsync()
|
||||
if (token)
|
||||
router.push(`/education-apply?token=${token}`)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (educationVerifying === 'yes' || educationVerifyAction === EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION) {
|
||||
setShowAccountSettingModal({ payload: ACCOUNT_SETTING_TAB.BILLING })
|
||||
|
||||
if (educationVerifyAction === EDUCATION_VERIFY_URL_SEARCHPARAMS_ACTION)
|
||||
localStorage.setItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM, 'yes')
|
||||
}
|
||||
if (educationVerifyAction === EDUCATION_PRICING_SHOW_ACTION)
|
||||
setShowPricingModal()
|
||||
if (educationVerifyAction === EDUCATION_RE_VERIFY_ACTION)
|
||||
handleVerify()
|
||||
}, [setShowAccountSettingModal, educationVerifying, educationVerifyAction])
|
||||
}
|
||||
53
dify/web/app/education-apply/role-selector.tsx
Normal file
53
dify/web/app/education-apply/role-selector.tsx
Normal file
@@ -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
|
||||
122
dify/web/app/education-apply/search-input.tsx
Normal file
122
dify/web/app/education-apply/search-input.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import type { ChangeEventHandler } from 'react'
|
||||
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: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
|
||||
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
|
||||
11
dify/web/app/education-apply/types.ts
Normal file
11
dify/web/app/education-apply/types.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
export type SearchParams = {
|
||||
keywords?: string
|
||||
page?: number
|
||||
limit?: number
|
||||
}
|
||||
|
||||
export type EducationAddParams = {
|
||||
token: string
|
||||
institution: string
|
||||
role: string
|
||||
}
|
||||
58
dify/web/app/education-apply/user-info.tsx
Normal file
58
dify/web/app/education-apply/user-info.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import Avatar from '@/app/components/base/avatar'
|
||||
import { Triangle } from '@/app/components/base/icons/src/public/education'
|
||||
import { useLogout } from '@/service/use-common'
|
||||
|
||||
const UserInfo = () => {
|
||||
const router = useRouter()
|
||||
const { t } = useTranslation()
|
||||
const { userProfile } = useAppContext()
|
||||
|
||||
const { mutateAsync: logout } = useLogout()
|
||||
const handleLogout = async () => {
|
||||
await logout()
|
||||
|
||||
localStorage.removeItem('setup_status')
|
||||
// Tokens are now stored in cookies and cleared by backend
|
||||
|
||||
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
|
||||
115
dify/web/app/education-apply/verify-state-modal.tsx
Normal file
115
dify/web/app/education-apply/verify-state-modal.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import React, { useEffect, 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 { useDocLink } from '@/context/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 docLink = useDocLink()
|
||||
const dialogRef = useRef<HTMLDivElement>(null)
|
||||
const [isVisible, setIsVisible] = useState(isShow)
|
||||
const eduDocLink = docLink('/getting-started/dify-for-education')
|
||||
|
||||
const handleClick = () => {
|
||||
window.open(eduDocLink, '_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={eduDocLink} 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)
|
||||
Reference in New Issue
Block a user