69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
import { WebApplication } from '@/Application/WebApplication'
|
|
import { observer } from 'mobx-react-lite'
|
|
import { FunctionComponent, createContext, useCallback, useContext, ReactNode } from 'react'
|
|
import PremiumFeaturesModal from '@/Components/PremiumFeaturesModal/PremiumFeaturesModal'
|
|
|
|
type PremiumModalContextData = {
|
|
activate: (featureName: string) => void
|
|
}
|
|
|
|
const PremiumModalContext = createContext<PremiumModalContextData | null>(null)
|
|
|
|
const PremiumModalProvider_ = PremiumModalContext.Provider
|
|
|
|
export const usePremiumModal = (): PremiumModalContextData => {
|
|
const value = useContext(PremiumModalContext)
|
|
|
|
if (!value) {
|
|
throw new Error('invalid PremiumModal context')
|
|
}
|
|
|
|
return value
|
|
}
|
|
|
|
interface Props {
|
|
application: WebApplication
|
|
children: ReactNode
|
|
}
|
|
|
|
const PremiumModalProvider: FunctionComponent<Props> = observer(({ application, children }: Props) => {
|
|
const featureName = application.featuresController.premiumAlertFeatureName || ''
|
|
|
|
const hasSubscription = application.hasValidFirstPartySubscription()
|
|
|
|
const activate = useCallback(
|
|
(feature: string) => {
|
|
application.featuresController.showPremiumAlert(feature).catch(console.error)
|
|
},
|
|
[application.featuresController],
|
|
)
|
|
|
|
const close = useCallback(() => {
|
|
application.featuresController.closePremiumAlert()
|
|
}, [application.featuresController])
|
|
|
|
return (
|
|
<>
|
|
{application.featuresController.premiumAlertType != undefined && (
|
|
<PremiumFeaturesModal
|
|
application={application}
|
|
featureName={featureName}
|
|
hasSubscription={hasSubscription}
|
|
onClose={close}
|
|
showModal={application.featuresController.premiumAlertType != undefined}
|
|
type={application.featuresController.premiumAlertType}
|
|
/>
|
|
)}
|
|
<PremiumModalProvider_ value={{ activate }}>{children}</PremiumModalProvider_>
|
|
</>
|
|
)
|
|
})
|
|
|
|
PremiumModalProvider.displayName = 'PremiumModalProvider'
|
|
|
|
const PremiumModalProviderWithDeallocateHandling: FunctionComponent<Props> = ({ application, children }) => {
|
|
return <PremiumModalProvider application={application} children={children} />
|
|
}
|
|
|
|
export default observer(PremiumModalProviderWithDeallocateHandling)
|