dify

2025-12-01 17:21:38 +08:00
parent 32fee2b8ab
commit fab8c13cb3
7511 changed files with 996300 additions and 0 deletions
--- a/dify/web/app/education-apply/expire-notice-modal.tsx
+++ b/dify/web/app/education-apply/expire-notice-modal.tsx
@@ -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)