feat: SaaS price plan frontend (#1683)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
This commit is contained in:
Joel
2023-12-03 22:10:16 +08:00
committed by GitHub
parent 053102f433
commit 75a6122173
73 changed files with 2919 additions and 266 deletions

View File

@@ -3,10 +3,12 @@
import type { Dispatch, SetStateAction } from 'react'
import { useState } from 'react'
import { createContext, useContext } from 'use-context-selector'
import { useRouter, useSearchParams } from 'next/navigation'
import AccountSetting from '@/app/components/header/account-setting'
import ApiBasedExtensionModal from '@/app/components/header/account-setting/api-based-extension-page/modal'
import ModerationSettingModal from '@/app/components/app/configuration/toolbox/moderation/moderation-setting-modal'
import ExternalDataToolModal from '@/app/components/app/configuration/tools/external-data-tool-modal'
import Pricing from '@/app/components/billing/pricing'
import type { ModerationConfig } from '@/models/debug'
import type {
ApiBasedExtension,
@@ -25,11 +27,13 @@ const ModalContext = createContext<{
setShowApiBasedExtensionModal: Dispatch<SetStateAction<ModalState<ApiBasedExtension> | null>>
setShowModerationSettingModal: Dispatch<SetStateAction<ModalState<ModerationConfig> | null>>
setShowExternalDataToolModal: Dispatch<SetStateAction<ModalState<ExternalDataTool> | null>>
setShowPricingModal: Dispatch<SetStateAction<any>>
}>({
setShowAccountSettingModal: () => {},
setShowApiBasedExtensionModal: () => {},
setShowModerationSettingModal: () => {},
setShowExternalDataToolModal: () => {},
setShowPricingModal: () => {},
})
export const useModalContext = () => useContext(ModalContext)
@@ -44,6 +48,9 @@ export const ModalContextProvider = ({
const [showApiBasedExtensionModal, setShowApiBasedExtensionModal] = useState<ModalState<ApiBasedExtension> | null>(null)
const [showModerationSettingModal, setShowModerationSettingModal] = useState<ModalState<ModerationConfig> | null>(null)
const [showExternalDataToolModal, setShowExternalDataToolModal] = useState<ModalState<ExternalDataTool> | null>(null)
const searchParams = useSearchParams()
const router = useRouter()
const [showPricingModal, setShowPricingModal] = useState(searchParams.get('show-pricing') === '1')
const handleCancelAccountSettingModal = () => {
setShowAccountSettingModal(null)
@@ -93,6 +100,7 @@ export const ModalContextProvider = ({
setShowApiBasedExtensionModal,
setShowModerationSettingModal,
setShowExternalDataToolModal,
setShowPricingModal: () => setShowPricingModal(true),
}}>
<>
{children}
@@ -104,6 +112,7 @@ export const ModalContextProvider = ({
/>
)
}
{
!!showApiBasedExtensionModal && (
<ApiBasedExtensionModal
@@ -132,6 +141,17 @@ export const ModalContextProvider = ({
/>
)
}
{
!!showPricingModal && (
<Pricing onCancel={() => {
if (searchParams.get('show-pricing') === '1')
router.push(location.pathname, { forceOptimisticNavigation: true })
setShowPricingModal(false)
}} />
)
}
</>
</ModalContext.Provider>
)