Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 4x 18x 18x 18x 18x 18x 18x 5x 18x 1x 17x 6x 11x 1x 10x | import { Box, LinearProgress } from "@mui/material";
import { useCallback } from "react";
import useFeatureFlag from "@/utils/hooks/useFeatureFlag";
import { useUpgradeDialog } from "@/utils/components/feature-access/UpgradeDialogProvider";
import FeatureLockedBlur from "@/utils/components/feature-access/FeatureLockedBlur";
/**
* Renders children when access is allowed; otherwise shows blurred mock UI.
* Pass `enabled` to override the feature flag (e.g. composite checks).
*/
const FeatureAccessGate = ({
userType = "teacher",
featureKey = null,
enabled: enabledOverride = null,
title = "This feature is locked",
featureLabel = null,
description = null,
minPlan = null,
mockContent = null,
children,
blurMinHeight = 360,
id,
}) => {
const { loading, isFeatureEnabled, getFeature } = useFeatureFlag(userType);
const { openUpgradeDialog } = useUpgradeDialog();
const featureMeta = featureKey ? getFeature(featureKey) : null;
const enabledFromFlag = featureKey ? isFeatureEnabled(featureKey) : true;
const enabled = enabledOverride ?? enabledFromFlag;
const handleUpgrade = useCallback(() => {
openUpgradeDialog({
title,
featureKey,
featureLabel: featureLabel ?? title.replace(/\s*locked$/i, "").trim(),
featureMeta,
minPlan: minPlan ?? featureMeta?.min_plan ?? null,
});
}, [openUpgradeDialog, title, featureKey, featureLabel, featureMeta, minPlan]);
if (loading && enabledOverride === null && featureKey) {
return (
<Box sx={{ py: 4 }}>
<LinearProgress />
</Box>
);
}
if (enabled) {
return children;
}
if (!mockContent) {
return null;
}
return (
<FeatureLockedBlur
id={id}
title={title}
description={description}
featureLabel={featureLabel}
onUpgrade={handleUpgrade}
mockContent={mockContent}
minHeight={blurMinHeight}
/>
);
};
export default FeatureAccessGate;
|