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 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | 7x 7x | import { Box, Stack, Typography } from "@mui/material";
import { alpha, useTheme } from "@mui/material/styles";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import {
getPlanLabel,
resolvePlanKey,
resolveRecommendedUpgradePlan,
resolveRequiredPlanForFeature,
} from "@/utils/features/featureAccess";
import PlanChip from "@/utils/components/feature-access/PlanChip";
const emphasisSx = {
fontWeight: 600,
color: "text.primary",
fontFamily: "inherit",
};
const UpgradeDialogContent = ({
title = "This feature is locked",
showTitle = true,
featureKey = null,
featureLabel = null,
featureMeta = null,
minPlan = null,
currentPlan = null,
planName = null,
}) => {
const theme = useTheme();
const currentPlanKey = resolvePlanKey(currentPlan, planName);
const requiredPlan = resolveRequiredPlanForFeature(featureKey, featureMeta, minPlan);
const recommendedPlan = resolveRecommendedUpgradePlan({
featureKey,
featureMeta,
minPlan,
currentPlan,
planName,
});
const showCurrentChip = Boolean(currentPlanKey);
const showRecommendedChip = Boolean(recommendedPlan && recommendedPlan !== currentPlanKey);
const showPlanRow = showCurrentChip || showRecommendedChip;
const description = (() => {
if (featureLabel && showRecommendedChip) {
return (
<>
Upgrade to the <Box component="span" sx={emphasisSx}>{getPlanLabel(recommendedPlan)}</Box> plan to
access <Box component="span" sx={emphasisSx}>{featureLabel}</Box>.
</>
);
}
if (showRecommendedChip) {
return (
<>
Upgrade to the <Box component="span" sx={emphasisSx}>{getPlanLabel(recommendedPlan)}</Box> plan to
unlock this feature.
</>
);
}
if (featureLabel) {
return (
<>
<Box component="span" sx={emphasisSx}>{featureLabel}</Box>{" "}
{currentPlanKey && requiredPlan
? "is not enabled for your district on your current plan."
: "is not included on your district's current plan."}
</>
);
}
return "This feature is not included on your district's current plan.";
})();
return (
<Stack spacing={2.5} alignItems="stretch">
{showTitle ? (
<Typography variant="subtitle1" component="h2" sx={{ fontWeight: 600, lineHeight: 1.4 }}>
{title}
</Typography>
) : null}
<Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.7, fontFamily: "inherit" }}>
{description}
</Typography>
{showPlanRow ? (
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
flexWrap: "wrap",
gap: 1.5,
py: 2,
px: 2,
borderRadius: 2,
bgcolor: alpha(theme.palette.grey[500], theme.palette.mode === "light" ? 0.08 : 0.16),
}}
>
{showCurrentChip ? <PlanChip plan={currentPlan} planName={planName} size="sm" showIcon /> : null}
{showCurrentChip && showRecommendedChip ? (
<ArrowForwardIcon sx={{ fontSize: 18, color: "text.disabled", flexShrink: 0 }} />
) : null}
{showRecommendedChip ? <PlanChip plan={recommendedPlan} size="sm" showIcon /> : null}
</Box>
) : null}
<Typography variant="caption" color="text.secondary" sx={{ lineHeight: 1.6, display: "block" }}>
Contact your district administrator to upgrade.
</Typography>
</Stack>
);
};
export default UpgradeDialogContent;
|