Files
standardnotes-app-web/app/assets/javascripts/components/Premium/usePremiumModal.tsx

64 lines
1.8 KiB
TypeScript

import { WebApplication } from '@/ui_models/application';
import { AppState } from '@/ui_models/app_state';
import { observer } from 'mobx-react-lite';
import { FunctionalComponent } from 'preact';
import { useContext } from 'preact/hooks';
import { createContext } from 'react';
import { PremiumFeaturesModal } from '../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_>
</>
);
}
);