dify
This commit is contained in:
506
dify/web/context/modal-context.tsx
Normal file
506
dify/web/context/modal-context.tsx
Normal file
@@ -0,0 +1,506 @@
|
||||
'use client'
|
||||
|
||||
import type { Dispatch, SetStateAction } from 'react'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { createContext, useContext, useContextSelector } from 'use-context-selector'
|
||||
import { useSearchParams } from 'next/navigation'
|
||||
import type {
|
||||
ConfigurationMethodEnum,
|
||||
Credential,
|
||||
CustomConfigurationModelFixedFields,
|
||||
CustomModel,
|
||||
ModelProvider,
|
||||
} from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
import {
|
||||
EDUCATION_PRICING_SHOW_ACTION,
|
||||
EDUCATION_VERIFYING_LOCALSTORAGE_ITEM,
|
||||
} from '@/app/education-apply/constants'
|
||||
import type { AccountSettingTab } from '@/app/components/header/account-setting/constants'
|
||||
import {
|
||||
ACCOUNT_SETTING_MODAL_ACTION,
|
||||
DEFAULT_ACCOUNT_SETTING_TAB,
|
||||
isValidAccountSettingTab,
|
||||
} from '@/app/components/header/account-setting/constants'
|
||||
import type { ModerationConfig, PromptVariable } from '@/models/debug'
|
||||
import type {
|
||||
ApiBasedExtension,
|
||||
ExternalDataTool,
|
||||
} from '@/models/common'
|
||||
import type { CreateExternalAPIReq } from '@/app/components/datasets/external-api/declarations'
|
||||
import type { ModelLoadBalancingModalProps } from '@/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal'
|
||||
import type { OpeningStatement } from '@/app/components/base/features/types'
|
||||
import type { InputVar } from '@/app/components/workflow/types'
|
||||
import type { UpdatePluginPayload } from '@/app/components/plugins/types'
|
||||
import { removeSpecificQueryParam } from '@/utils'
|
||||
import { noop } from 'lodash-es'
|
||||
import dynamic from 'next/dynamic'
|
||||
import type { ExpireNoticeModalPayloadProps } from '@/app/education-apply/expire-notice-modal'
|
||||
import type { ModelModalModeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
import { useProviderContext } from '@/context/provider-context'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import {
|
||||
type TriggerEventsLimitModalPayload,
|
||||
useTriggerEventsLimitModal,
|
||||
} from './hooks/use-trigger-events-limit-modal'
|
||||
|
||||
const AccountSetting = dynamic(() => import('@/app/components/header/account-setting'), {
|
||||
ssr: false,
|
||||
})
|
||||
const ApiBasedExtensionModal = dynamic(() => import('@/app/components/header/account-setting/api-based-extension-page/modal'), {
|
||||
ssr: false,
|
||||
})
|
||||
const ModerationSettingModal = dynamic(() => import('@/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal'), {
|
||||
ssr: false,
|
||||
})
|
||||
const ExternalDataToolModal = dynamic(() => import('@/app/components/app/configuration/tools/external-data-tool-modal'), {
|
||||
ssr: false,
|
||||
})
|
||||
const Pricing = dynamic(() => import('@/app/components/billing/pricing'), {
|
||||
ssr: false,
|
||||
})
|
||||
const AnnotationFullModal = dynamic(() => import('@/app/components/billing/annotation-full/modal'), {
|
||||
ssr: false,
|
||||
})
|
||||
const ModelModal = dynamic(() => import('@/app/components/header/account-setting/model-provider-page/model-modal'), {
|
||||
ssr: false,
|
||||
})
|
||||
const ExternalAPIModal = dynamic(() => import('@/app/components/datasets/external-api/external-api-modal'), {
|
||||
ssr: false,
|
||||
})
|
||||
const ModelLoadBalancingModal = dynamic(() => import('@/app/components/header/account-setting/model-provider-page/provider-added-card/model-load-balancing-modal'), {
|
||||
ssr: false,
|
||||
})
|
||||
const OpeningSettingModal = dynamic(() => import('@/app/components/base/features/new-feature-panel/conversation-opener/modal'), {
|
||||
ssr: false,
|
||||
})
|
||||
const UpdatePlugin = dynamic(() => import('@/app/components/plugins/update-plugin'), {
|
||||
ssr: false,
|
||||
})
|
||||
|
||||
const ExpireNoticeModal = dynamic(() => import('@/app/education-apply/expire-notice-modal'), {
|
||||
ssr: false,
|
||||
})
|
||||
const TriggerEventsLimitModal = dynamic(() => import('@/app/components/billing/trigger-events-limit-modal'), {
|
||||
ssr: false,
|
||||
})
|
||||
|
||||
export type ModalState<T> = {
|
||||
payload: T
|
||||
onCancelCallback?: () => void
|
||||
onSaveCallback?: (newPayload?: T, formValues?: Record<string, any>) => void
|
||||
onRemoveCallback?: (newPayload?: T, formValues?: Record<string, any>) => void
|
||||
onEditCallback?: (newPayload: T) => void
|
||||
onValidateBeforeSaveCallback?: (newPayload: T) => boolean
|
||||
isEditMode?: boolean
|
||||
datasetBindings?: { id: string; name: string }[]
|
||||
}
|
||||
|
||||
export type ModelModalType = {
|
||||
currentProvider: ModelProvider
|
||||
currentConfigurationMethod: ConfigurationMethodEnum
|
||||
currentCustomConfigurationModelFixedFields?: CustomConfigurationModelFixedFields
|
||||
isModelCredential?: boolean
|
||||
credential?: Credential
|
||||
model?: CustomModel
|
||||
mode?: ModelModalModeEnum
|
||||
}
|
||||
|
||||
export type ModalContextState = {
|
||||
setShowAccountSettingModal: Dispatch<SetStateAction<ModalState<AccountSettingTab> | null>>
|
||||
setShowApiBasedExtensionModal: Dispatch<SetStateAction<ModalState<ApiBasedExtension> | null>>
|
||||
setShowModerationSettingModal: Dispatch<SetStateAction<ModalState<ModerationConfig> | null>>
|
||||
setShowExternalDataToolModal: Dispatch<SetStateAction<ModalState<ExternalDataTool> | null>>
|
||||
setShowPricingModal: () => void
|
||||
setShowAnnotationFullModal: () => void
|
||||
setShowModelModal: Dispatch<SetStateAction<ModalState<ModelModalType> | null>>
|
||||
setShowExternalKnowledgeAPIModal: Dispatch<SetStateAction<ModalState<CreateExternalAPIReq> | null>>
|
||||
setShowModelLoadBalancingModal: Dispatch<SetStateAction<ModelLoadBalancingModalProps | null>>
|
||||
setShowOpeningModal: Dispatch<SetStateAction<ModalState<OpeningStatement & {
|
||||
promptVariables?: PromptVariable[]
|
||||
workflowVariables?: InputVar[]
|
||||
onAutoAddPromptVariable?: (variable: PromptVariable[]) => void
|
||||
}> | null>>
|
||||
setShowUpdatePluginModal: Dispatch<SetStateAction<ModalState<UpdatePluginPayload> | null>>
|
||||
setShowEducationExpireNoticeModal: Dispatch<SetStateAction<ModalState<ExpireNoticeModalPayloadProps> | null>>
|
||||
setShowTriggerEventsLimitModal: Dispatch<SetStateAction<ModalState<TriggerEventsLimitModalPayload> | null>>
|
||||
}
|
||||
const PRICING_MODAL_QUERY_PARAM = 'pricing'
|
||||
const PRICING_MODAL_QUERY_VALUE = 'open'
|
||||
|
||||
const ModalContext = createContext<ModalContextState>({
|
||||
setShowAccountSettingModal: noop,
|
||||
setShowApiBasedExtensionModal: noop,
|
||||
setShowModerationSettingModal: noop,
|
||||
setShowExternalDataToolModal: noop,
|
||||
setShowPricingModal: noop,
|
||||
setShowAnnotationFullModal: noop,
|
||||
setShowModelModal: noop,
|
||||
setShowExternalKnowledgeAPIModal: noop,
|
||||
setShowModelLoadBalancingModal: noop,
|
||||
setShowOpeningModal: noop,
|
||||
setShowUpdatePluginModal: noop,
|
||||
setShowEducationExpireNoticeModal: noop,
|
||||
setShowTriggerEventsLimitModal: noop,
|
||||
})
|
||||
|
||||
export const useModalContext = () => useContext(ModalContext)
|
||||
|
||||
// Adding a dangling comma to avoid the generic parsing issue in tsx, see:
|
||||
// https://github.com/microsoft/TypeScript/issues/15713
|
||||
export const useModalContextSelector = <T,>(selector: (state: ModalContextState) => T): T =>
|
||||
useContextSelector(ModalContext, selector)
|
||||
|
||||
type ModalContextProviderProps = {
|
||||
children: React.ReactNode
|
||||
}
|
||||
export const ModalContextProvider = ({
|
||||
children,
|
||||
}: ModalContextProviderProps) => {
|
||||
const searchParams = useSearchParams()
|
||||
|
||||
const [showAccountSettingModal, setShowAccountSettingModal] = useState<ModalState<AccountSettingTab> | null>(() => {
|
||||
if (searchParams.get('action') === ACCOUNT_SETTING_MODAL_ACTION) {
|
||||
const tabParam = searchParams.get('tab')
|
||||
const tab = isValidAccountSettingTab(tabParam) ? tabParam : DEFAULT_ACCOUNT_SETTING_TAB
|
||||
return { payload: tab }
|
||||
}
|
||||
return null
|
||||
})
|
||||
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 [showModelModal, setShowModelModal] = useState<ModalState<ModelModalType> | null>(null)
|
||||
const [showExternalKnowledgeAPIModal, setShowExternalKnowledgeAPIModal] = useState<ModalState<CreateExternalAPIReq> | null>(null)
|
||||
const [showModelLoadBalancingModal, setShowModelLoadBalancingModal] = useState<ModelLoadBalancingModalProps | null>(null)
|
||||
const [showOpeningModal, setShowOpeningModal] = useState<ModalState<OpeningStatement & {
|
||||
promptVariables?: PromptVariable[]
|
||||
workflowVariables?: InputVar[]
|
||||
onAutoAddPromptVariable?: (variable: PromptVariable[]) => void
|
||||
}> | null>(null)
|
||||
const [showUpdatePluginModal, setShowUpdatePluginModal] = useState<ModalState<UpdatePluginPayload> | null>(null)
|
||||
const [showEducationExpireNoticeModal, setShowEducationExpireNoticeModal] = useState<ModalState<ExpireNoticeModalPayloadProps> | null>(null)
|
||||
const { currentWorkspace } = useAppContext()
|
||||
|
||||
const [showPricingModal, setShowPricingModal] = useState(
|
||||
searchParams.get(PRICING_MODAL_QUERY_PARAM) === PRICING_MODAL_QUERY_VALUE,
|
||||
)
|
||||
const [showAnnotationFullModal, setShowAnnotationFullModal] = useState(false)
|
||||
const handleCancelAccountSettingModal = () => {
|
||||
const educationVerifying = localStorage.getItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
|
||||
|
||||
if (educationVerifying === 'yes')
|
||||
localStorage.removeItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
|
||||
|
||||
removeSpecificQueryParam('action')
|
||||
removeSpecificQueryParam('tab')
|
||||
setShowAccountSettingModal(null)
|
||||
if (showAccountSettingModal?.onCancelCallback)
|
||||
showAccountSettingModal?.onCancelCallback()
|
||||
}
|
||||
|
||||
const handleAccountSettingTabChange = useCallback((tab: AccountSettingTab) => {
|
||||
setShowAccountSettingModal((prev) => {
|
||||
if (!prev)
|
||||
return { payload: tab }
|
||||
if (prev.payload === tab)
|
||||
return prev
|
||||
return { ...prev, payload: tab }
|
||||
})
|
||||
}, [setShowAccountSettingModal])
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === 'undefined')
|
||||
return
|
||||
const url = new URL(window.location.href)
|
||||
if (!showAccountSettingModal?.payload) {
|
||||
if (url.searchParams.get('action') !== ACCOUNT_SETTING_MODAL_ACTION)
|
||||
return
|
||||
url.searchParams.delete('action')
|
||||
url.searchParams.delete('tab')
|
||||
window.history.replaceState(null, '', url.toString())
|
||||
return
|
||||
}
|
||||
url.searchParams.set('action', ACCOUNT_SETTING_MODAL_ACTION)
|
||||
url.searchParams.set('tab', showAccountSettingModal.payload)
|
||||
window.history.replaceState(null, '', url.toString())
|
||||
}, [showAccountSettingModal])
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === 'undefined')
|
||||
return
|
||||
const url = new URL(window.location.href)
|
||||
if (showPricingModal) {
|
||||
url.searchParams.set(PRICING_MODAL_QUERY_PARAM, PRICING_MODAL_QUERY_VALUE)
|
||||
}
|
||||
else {
|
||||
url.searchParams.delete(PRICING_MODAL_QUERY_PARAM)
|
||||
if (url.searchParams.get('action') === EDUCATION_PRICING_SHOW_ACTION)
|
||||
url.searchParams.delete('action')
|
||||
}
|
||||
window.history.replaceState(null, '', url.toString())
|
||||
}, [showPricingModal])
|
||||
|
||||
const { plan, isFetchedPlan } = useProviderContext()
|
||||
const {
|
||||
showTriggerEventsLimitModal,
|
||||
setShowTriggerEventsLimitModal,
|
||||
persistTriggerEventsLimitModalDismiss,
|
||||
} = useTriggerEventsLimitModal({
|
||||
plan,
|
||||
isFetchedPlan,
|
||||
currentWorkspaceId: currentWorkspace?.id,
|
||||
})
|
||||
|
||||
const handleCancelModerationSettingModal = () => {
|
||||
setShowModerationSettingModal(null)
|
||||
if (showModerationSettingModal?.onCancelCallback)
|
||||
showModerationSettingModal.onCancelCallback()
|
||||
}
|
||||
|
||||
const handleCancelExternalDataToolModal = () => {
|
||||
setShowExternalDataToolModal(null)
|
||||
if (showExternalDataToolModal?.onCancelCallback)
|
||||
showExternalDataToolModal.onCancelCallback()
|
||||
}
|
||||
|
||||
const handleCancelModelModal = useCallback(() => {
|
||||
setShowModelModal(null)
|
||||
if (showModelModal?.onCancelCallback)
|
||||
showModelModal.onCancelCallback()
|
||||
}, [showModelModal])
|
||||
|
||||
const handleSaveModelModal = useCallback((formValues?: Record<string, any>) => {
|
||||
if (showModelModal?.onSaveCallback)
|
||||
showModelModal.onSaveCallback(showModelModal.payload, formValues)
|
||||
setShowModelModal(null)
|
||||
}, [showModelModal])
|
||||
|
||||
const handleRemoveModelModal = useCallback((formValues?: Record<string, any>) => {
|
||||
if (showModelModal?.onRemoveCallback)
|
||||
showModelModal.onRemoveCallback(showModelModal.payload, formValues)
|
||||
setShowModelModal(null)
|
||||
}, [showModelModal])
|
||||
|
||||
const handleCancelExternalApiModal = useCallback(() => {
|
||||
setShowExternalKnowledgeAPIModal(null)
|
||||
if (showExternalKnowledgeAPIModal?.onCancelCallback)
|
||||
showExternalKnowledgeAPIModal.onCancelCallback()
|
||||
}, [showExternalKnowledgeAPIModal])
|
||||
|
||||
const handleSaveExternalApiModal = useCallback(async (updatedFormValue: CreateExternalAPIReq) => {
|
||||
if (showExternalKnowledgeAPIModal?.onSaveCallback)
|
||||
showExternalKnowledgeAPIModal.onSaveCallback(updatedFormValue)
|
||||
setShowExternalKnowledgeAPIModal(null)
|
||||
}, [showExternalKnowledgeAPIModal])
|
||||
|
||||
const handleEditExternalApiModal = useCallback(async (updatedFormValue: CreateExternalAPIReq) => {
|
||||
if (showExternalKnowledgeAPIModal?.onEditCallback)
|
||||
showExternalKnowledgeAPIModal.onEditCallback(updatedFormValue)
|
||||
setShowExternalKnowledgeAPIModal(null)
|
||||
}, [showExternalKnowledgeAPIModal])
|
||||
|
||||
const handleCancelOpeningModal = useCallback(() => {
|
||||
setShowOpeningModal(null)
|
||||
if (showOpeningModal?.onCancelCallback)
|
||||
showOpeningModal.onCancelCallback()
|
||||
}, [showOpeningModal])
|
||||
|
||||
const handleSaveApiBasedExtension = (newApiBasedExtension: ApiBasedExtension) => {
|
||||
if (showApiBasedExtensionModal?.onSaveCallback)
|
||||
showApiBasedExtensionModal.onSaveCallback(newApiBasedExtension)
|
||||
setShowApiBasedExtensionModal(null)
|
||||
}
|
||||
|
||||
const handleSaveModeration = (newModerationConfig: ModerationConfig) => {
|
||||
if (showModerationSettingModal?.onSaveCallback)
|
||||
showModerationSettingModal.onSaveCallback(newModerationConfig)
|
||||
setShowModerationSettingModal(null)
|
||||
}
|
||||
|
||||
const handleSaveExternalDataTool = (newExternalDataTool: ExternalDataTool) => {
|
||||
if (showExternalDataToolModal?.onSaveCallback)
|
||||
showExternalDataToolModal.onSaveCallback(newExternalDataTool)
|
||||
setShowExternalDataToolModal(null)
|
||||
}
|
||||
|
||||
const handleValidateBeforeSaveExternalDataTool = (newExternalDataTool: ExternalDataTool) => {
|
||||
if (showExternalDataToolModal?.onValidateBeforeSaveCallback)
|
||||
return showExternalDataToolModal?.onValidateBeforeSaveCallback(newExternalDataTool)
|
||||
return true
|
||||
}
|
||||
|
||||
const handleSaveOpeningModal = (newOpening: OpeningStatement) => {
|
||||
if (showOpeningModal?.onSaveCallback)
|
||||
showOpeningModal.onSaveCallback(newOpening)
|
||||
setShowOpeningModal(null)
|
||||
}
|
||||
|
||||
const handleShowPricingModal = useCallback(() => {
|
||||
setShowPricingModal(true)
|
||||
}, [])
|
||||
|
||||
const handleCancelPricingModal = useCallback(() => {
|
||||
setShowPricingModal(false)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<ModalContext.Provider value={{
|
||||
setShowAccountSettingModal,
|
||||
setShowApiBasedExtensionModal,
|
||||
setShowModerationSettingModal,
|
||||
setShowExternalDataToolModal,
|
||||
setShowPricingModal: handleShowPricingModal,
|
||||
setShowAnnotationFullModal: () => setShowAnnotationFullModal(true),
|
||||
setShowModelModal,
|
||||
setShowExternalKnowledgeAPIModal,
|
||||
setShowModelLoadBalancingModal,
|
||||
setShowOpeningModal,
|
||||
setShowUpdatePluginModal,
|
||||
setShowEducationExpireNoticeModal,
|
||||
setShowTriggerEventsLimitModal,
|
||||
}}>
|
||||
<>
|
||||
{children}
|
||||
{
|
||||
!!showAccountSettingModal && (
|
||||
<AccountSetting
|
||||
activeTab={showAccountSettingModal.payload}
|
||||
onCancel={handleCancelAccountSettingModal}
|
||||
onTabChange={handleAccountSettingTabChange}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
!!showApiBasedExtensionModal && (
|
||||
<ApiBasedExtensionModal
|
||||
data={showApiBasedExtensionModal.payload}
|
||||
onCancel={() => setShowApiBasedExtensionModal(null)}
|
||||
onSave={handleSaveApiBasedExtension}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
!!showModerationSettingModal && (
|
||||
<ModerationSettingModal
|
||||
data={showModerationSettingModal.payload}
|
||||
onCancel={handleCancelModerationSettingModal}
|
||||
onSave={handleSaveModeration}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
!!showExternalDataToolModal && (
|
||||
<ExternalDataToolModal
|
||||
data={showExternalDataToolModal.payload}
|
||||
onCancel={handleCancelExternalDataToolModal}
|
||||
onSave={handleSaveExternalDataTool}
|
||||
onValidateBeforeSave={handleValidateBeforeSaveExternalDataTool}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
!!showPricingModal && (
|
||||
<Pricing onCancel={handleCancelPricingModal} />
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
showAnnotationFullModal && (
|
||||
<AnnotationFullModal
|
||||
show={showAnnotationFullModal}
|
||||
onHide={() => setShowAnnotationFullModal(false)} />
|
||||
)
|
||||
}
|
||||
{
|
||||
!!showModelModal && (
|
||||
<ModelModal
|
||||
provider={showModelModal.payload.currentProvider}
|
||||
configurateMethod={showModelModal.payload.currentConfigurationMethod}
|
||||
currentCustomConfigurationModelFixedFields={showModelModal.payload.currentCustomConfigurationModelFixedFields}
|
||||
isModelCredential={showModelModal.payload.isModelCredential}
|
||||
credential={showModelModal.payload.credential}
|
||||
model={showModelModal.payload.model}
|
||||
mode={showModelModal.payload.mode}
|
||||
onCancel={handleCancelModelModal}
|
||||
onSave={handleSaveModelModal}
|
||||
onRemove={handleRemoveModelModal}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
!!showExternalKnowledgeAPIModal && (
|
||||
<ExternalAPIModal
|
||||
data={showExternalKnowledgeAPIModal.payload}
|
||||
datasetBindings={showExternalKnowledgeAPIModal.datasetBindings ?? []}
|
||||
onSave={handleSaveExternalApiModal}
|
||||
onCancel={handleCancelExternalApiModal}
|
||||
onEdit={handleEditExternalApiModal}
|
||||
isEditMode={showExternalKnowledgeAPIModal.isEditMode ?? false}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
Boolean(showModelLoadBalancingModal) && (
|
||||
<ModelLoadBalancingModal {...showModelLoadBalancingModal!} />
|
||||
)
|
||||
}
|
||||
{showOpeningModal && (
|
||||
<OpeningSettingModal
|
||||
data={showOpeningModal.payload}
|
||||
onSave={handleSaveOpeningModal}
|
||||
onCancel={handleCancelOpeningModal}
|
||||
promptVariables={showOpeningModal.payload.promptVariables}
|
||||
workflowVariables={showOpeningModal.payload.workflowVariables}
|
||||
onAutoAddPromptVariable={showOpeningModal.payload.onAutoAddPromptVariable}
|
||||
/>
|
||||
)}
|
||||
|
||||
{
|
||||
!!showUpdatePluginModal && (
|
||||
<UpdatePlugin
|
||||
{...showUpdatePluginModal.payload}
|
||||
onCancel={() => {
|
||||
setShowUpdatePluginModal(null)
|
||||
showUpdatePluginModal.onCancelCallback?.()
|
||||
}}
|
||||
onSave={() => {
|
||||
setShowUpdatePluginModal(null)
|
||||
showUpdatePluginModal.onSaveCallback?.({} as any)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
!!showEducationExpireNoticeModal && (
|
||||
<ExpireNoticeModal
|
||||
{...showEducationExpireNoticeModal.payload}
|
||||
onClose={() => setShowEducationExpireNoticeModal(null)}
|
||||
/>
|
||||
)}
|
||||
{
|
||||
!!showTriggerEventsLimitModal && (
|
||||
<TriggerEventsLimitModal
|
||||
show
|
||||
usage={showTriggerEventsLimitModal.payload.usage}
|
||||
total={showTriggerEventsLimitModal.payload.total}
|
||||
planType={showTriggerEventsLimitModal.payload.planType}
|
||||
resetInDays={showTriggerEventsLimitModal.payload.resetInDays}
|
||||
onDismiss={() => {
|
||||
persistTriggerEventsLimitModalDismiss()
|
||||
setShowTriggerEventsLimitModal(null)
|
||||
}}
|
||||
onUpgrade={() => {
|
||||
persistTriggerEventsLimitModalDismiss()
|
||||
setShowTriggerEventsLimitModal(null)
|
||||
handleShowPricingModal()
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
</ModalContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export default ModalContext
|
||||
Reference in New Issue
Block a user