Files
standardnotes-app-web/app/assets/javascripts/Hooks/usePremiumModal.tsx

84 lines
2.5 KiB
TypeScript

import { WebApplication } from '@/Application/Application'
import { ViewControllerManager } from '@/Services/ViewControllerManager'
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
viewControllerManager: ViewControllerManager
children: ReactNode
}
const PremiumModalProvider: FunctionComponent<Props> = observer(
({ application, viewControllerManager, children }: Props) => {
const featureName = viewControllerManager.featuresController.premiumAlertFeatureName || ''
const showModal = !!featureName
const hasSubscription = Boolean(
viewControllerManager.subscriptionController.userSubscription &&
!viewControllerManager.subscriptionController.isUserSubscriptionExpired &&
!viewControllerManager.subscriptionController.isUserSubscriptionCanceled,
)
const activate = useCallback(
(feature: string) => {
viewControllerManager.featuresController.showPremiumAlert(feature).catch(console.error)
},
[viewControllerManager],
)
const close = useCallback(() => {
viewControllerManager.featuresController.closePremiumAlert()
}, [viewControllerManager])
return (
<>
{showModal && (
<PremiumFeaturesModal
application={application}
featureName={featureName}
hasSubscription={hasSubscription}
onClose={close}
showModal={!!featureName}
/>
)}
<PremiumModalProvider_ value={{ activate }}>{children}</PremiumModalProvider_>
</>
)
},
)
PremiumModalProvider.displayName = 'PremiumModalProvider'
const PremiumModalProviderWithDeallocateHandling: FunctionComponent<Props> = ({
application,
viewControllerManager,
children,
}) => {
return (
<PremiumModalProvider application={application} viewControllerManager={viewControllerManager} children={children} />
)
}
export default observer(PremiumModalProviderWithDeallocateHandling)