54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import { FeaturesState } from '@/ui_models/app_state/features_state';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { FunctionalComponent } from 'preact';
|
|
import { useCallback, useContext, useState } 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 {
|
|
state: FeaturesState;
|
|
}
|
|
|
|
export const PremiumModalProvider: FunctionalComponent<Props> = observer(
|
|
({ state, children }) => {
|
|
const featureName = state._premiumAlertFeatureName;
|
|
const activate = state.showPremiumAlert;
|
|
const close = state.closePremiumAlert;
|
|
|
|
const showModal = !!featureName;
|
|
|
|
return (
|
|
<>
|
|
{showModal && (
|
|
<PremiumFeaturesModal
|
|
showModal={!!featureName}
|
|
featureName={featureName}
|
|
onClose={close}
|
|
/>
|
|
)}
|
|
<PremiumModalProvider_ value={{ activate }}>
|
|
{children}
|
|
</PremiumModalProvider_>
|
|
</>
|
|
);
|
|
}
|
|
);
|