Files
standardnotes-app-web/app/assets/javascripts/Hooks/usePremiumModal.tsx
2022-05-03 10:51:40 -05:00

60 lines
1.7 KiB
TypeScript

import { WebApplication } from '@/UIModels/Application'
import { AppState } from '@/UIModels/AppState'
import { observer } from 'mobx-react-lite'
import { FunctionalComponent } from 'preact'
import { useContext } from 'preact/hooks'
import { createContext } from 'react'
import { PremiumFeaturesModal } from '@/Components/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
appState: AppState
}
export const PremiumModalProvider: FunctionalComponent<Props> = observer(({ application, appState, children }) => {
const featureName = appState.features.premiumAlertFeatureName
const activate = appState.features.showPremiumAlert
const close = appState.features.closePremiumAlert
const showModal = !!featureName
const hasSubscription = Boolean(
appState.subscription.userSubscription &&
!appState.subscription.isUserSubscriptionExpired &&
!appState.subscription.isUserSubscriptionCanceled,
)
return (
<>
{showModal && (
<PremiumFeaturesModal
application={application}
featureName={featureName}
hasSubscription={hasSubscription}
onClose={close}
showModal={!!featureName}
/>
)}
<PremiumModalProvider_ value={{ activate }}>{children}</PremiumModalProvider_>
</>
)
})