Function FeatureModal

frontend/src/react/components/ui/feature-modal.tsx:45–178

({ open, feature, instance, onOpenChange }: Props)

 *  - Required plan equals FREE → trial-for-days line.
 */
export function FeatureModal({ open, feature, instance, onOpenChange }: Props) {
  const { t } = useTranslation();
  const { showTrial, trialingDays } = useSubscriptionState();
  const hasPermission = hasWorkspacePermissionV2("bb.settings.set");

  const resolvedFeature = feature ?? PlanFeature.FEATURE_UNSPECIFIED;
  const instanceMissingLicense = useAppStore((state) =>
    state.instanceMissingLicense(resolvedFeature, instance)
  );
  const requiredPlan = useAppStore((state) =>
    state.getMinimumRequiredPlan(resolvedFeature)
  );

  if (!feature) {
    return null;
  }

  const featureKey = PlanFeature[feature].split(".").join("-");
  const title = instanceMissingLicense
    ? t("subscription.instance-assignment.require-license")
    : t("subscription.disabled-feature");

  const close = () => onOpenChange(false);

  const confirmLabel = instanceMissingLicense
    ? t("subscription.instance-assignment.assign-license")
    : t("common.learn-more");

  const handleConfirm = () => {
    if (instanceMissingLicense) {
      void router.push({
        name: INSTANCE_ROUTE_DASHBOARD,
        query: {
          assignLicense: "1",
          instances: instance?.name,
        },
      });
    } else {
      void router.push(autoSubscriptionRoute());
    }
    close();
  };

  const requiredPlanLabel = t(
    `subscription.plan.${planLabel[requiredPlan] ?? "enterprise"}.title`
  );
  const startTrialLabel = hasPermission
    ? t("subscription.trial-for-days", { days: trialingDays })
    : t("subscription.contact-to-upgrade");

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <div>
          <div className="flex items-center justify-between border-b pb-2 mb-4">
            <DialogTitle className="text-base font-medium">{title}</DialogTitle>
            {/* Vue's BBModal had a built-in X close affordance; the React
                Dialog primitive does not, so render one explicitly so