[WEB-5608] chore: Hide "Pro" Features in Community Edition (#8288)
* chore: Hide "Pro" Features in Community Edition * refactor: remove time tracking feature and simplify project features list
This commit is contained in:
parent
df1a512a80
commit
43b3a7730e
4 changed files with 31 additions and 78 deletions
|
|
@ -1,10 +1,6 @@
|
||||||
import type { FC } from "react";
|
|
||||||
import { observer } from "mobx-react";
|
import { observer } from "mobx-react";
|
||||||
import { Pen, Trash } from "lucide-react";
|
import { Trash } from "lucide-react";
|
||||||
import { PROJECT_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
|
import { PROJECT_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
|
||||||
import { Tooltip } from "@plane/propel/tooltip";
|
|
||||||
// components
|
|
||||||
import { ProIcon } from "@/components/common/pro-icon";
|
|
||||||
|
|
||||||
type TEstimateListItem = {
|
type TEstimateListItem = {
|
||||||
estimateId: string;
|
estimateId: string;
|
||||||
|
|
@ -21,22 +17,6 @@ export const EstimateListItemButtons = observer(function EstimateListItemButtons
|
||||||
if (!isAdmin || !isEditable) return <></>;
|
if (!isAdmin || !isEditable) return <></>;
|
||||||
return (
|
return (
|
||||||
<div className="relative flex items-center gap-1">
|
<div className="relative flex items-center gap-1">
|
||||||
<Tooltip
|
|
||||||
tooltipContent={
|
|
||||||
<div className="relative flex items-center gap-2">
|
|
||||||
<div>Upgrade</div>
|
|
||||||
<ProIcon className="w-3 h-3" />
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
position="top"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
className="relative flex-shrink-0 w-6 h-6 flex justify-center items-center rounded cursor-pointer transition-colors overflow-hidden hover:bg-custom-background-80"
|
|
||||||
data-ph-element={PROJECT_SETTINGS_TRACKER_ELEMENTS.ESTIMATES_LIST_ITEM}
|
|
||||||
>
|
|
||||||
<Pen size={12} />
|
|
||||||
</button>
|
|
||||||
</Tooltip>
|
|
||||||
<button
|
<button
|
||||||
className="relative flex-shrink-0 w-6 h-6 flex justify-center items-center rounded cursor-pointer transition-colors overflow-hidden hover:bg-custom-background-80"
|
className="relative flex-shrink-0 w-6 h-6 flex justify-center items-center rounded cursor-pointer transition-colors overflow-hidden hover:bg-custom-background-80"
|
||||||
onClick={() => onDeleteClick && onDeleteClick(estimateId)}
|
onClick={() => onDeleteClick && onDeleteClick(estimateId)}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
import type { ReactNode } from "react";
|
import type { ReactNode } from "react";
|
||||||
import { Timer } from "lucide-react";
|
|
||||||
// plane imports
|
// plane imports
|
||||||
import { CycleIcon, IntakeIcon, ModuleIcon, PageIcon, ViewsIcon } from "@plane/propel/icons";
|
import { CycleIcon, IntakeIcon, ModuleIcon, PageIcon, ViewsIcon } from "@plane/propel/icons";
|
||||||
import type { IProject } from "@plane/types";
|
import type { IProject } from "@plane/types";
|
||||||
|
|
@ -17,7 +16,6 @@ export type TProperties = {
|
||||||
};
|
};
|
||||||
|
|
||||||
type TProjectBaseFeatureKeys = "cycles" | "modules" | "views" | "pages" | "inbox";
|
type TProjectBaseFeatureKeys = "cycles" | "modules" | "views" | "pages" | "inbox";
|
||||||
type TProjectOtherFeatureKeys = "is_time_tracking_enabled";
|
|
||||||
|
|
||||||
type TBaseFeatureList = {
|
type TBaseFeatureList = {
|
||||||
[key in TProjectBaseFeatureKeys]: TProperties;
|
[key in TProjectBaseFeatureKeys]: TProperties;
|
||||||
|
|
@ -71,22 +69,6 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
type TOtherFeatureList = {
|
|
||||||
[key in TProjectOtherFeatureKeys]: TProperties;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const PROJECT_OTHER_FEATURES_LIST: TOtherFeatureList = {
|
|
||||||
is_time_tracking_enabled: {
|
|
||||||
key: "time_tracking",
|
|
||||||
property: "is_time_tracking_enabled",
|
|
||||||
title: "Time Tracking",
|
|
||||||
description: "Log time, see timesheets, and download full CSVs for your entire workspace.",
|
|
||||||
icon: <Timer className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
|
|
||||||
isPro: true,
|
|
||||||
isEnabled: false,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
type TProjectFeatures = {
|
type TProjectFeatures = {
|
||||||
project_features: {
|
project_features: {
|
||||||
key: string;
|
key: string;
|
||||||
|
|
@ -94,12 +76,6 @@ type TProjectFeatures = {
|
||||||
description: string;
|
description: string;
|
||||||
featureList: TBaseFeatureList;
|
featureList: TBaseFeatureList;
|
||||||
};
|
};
|
||||||
project_others: {
|
|
||||||
key: string;
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
featureList: TOtherFeatureList;
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const PROJECT_FEATURES_LIST: TProjectFeatures = {
|
export const PROJECT_FEATURES_LIST: TProjectFeatures = {
|
||||||
|
|
@ -109,10 +85,4 @@ export const PROJECT_FEATURES_LIST: TProjectFeatures = {
|
||||||
description: "Toggle these on or off this project.",
|
description: "Toggle these on or off this project.",
|
||||||
featureList: PROJECT_BASE_FEATURES_LIST,
|
featureList: PROJECT_BASE_FEATURES_LIST,
|
||||||
},
|
},
|
||||||
project_others: {
|
|
||||||
key: "work_management",
|
|
||||||
title: "Work management",
|
|
||||||
description: "Available only on some plans as indicated by the label next to the feature below.",
|
|
||||||
featureList: PROJECT_OTHER_FEATURES_LIST,
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
import type { FC } from "react";
|
|
||||||
import { Info } from "lucide-react";
|
import { Info } from "lucide-react";
|
||||||
// plane imports
|
// plane imports
|
||||||
import { EEstimateSystem, ESTIMATE_SYSTEMS } from "@plane/constants";
|
import { EEstimateSystem, ESTIMATE_SYSTEMS } from "@plane/constants";
|
||||||
|
|
@ -32,29 +31,32 @@ export function EstimateCreateStageOne(props: TEstimateCreateStageOne) {
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<div className="sm:flex sm:items-center sm:space-x-10 sm:space-y-0 gap-2 mb-2">
|
<div className="sm:flex sm:items-center sm:space-x-10 sm:space-y-0 gap-2 mb-2">
|
||||||
<RadioInput
|
<RadioInput
|
||||||
options={Object.keys(ESTIMATE_SYSTEMS).map((system) => {
|
options={Object.keys(ESTIMATE_SYSTEMS)
|
||||||
const currentSystem = system as TEstimateSystemKeys;
|
.map((system) => {
|
||||||
const isEnabled = isEstimateSystemEnabled(currentSystem);
|
const currentSystem = system as TEstimateSystemKeys;
|
||||||
return {
|
const isEnabled = isEstimateSystemEnabled(currentSystem);
|
||||||
label: !ESTIMATE_SYSTEMS[currentSystem]?.is_available ? (
|
if (!isEnabled) return null;
|
||||||
<div className="relative flex items-center gap-2 cursor-no-drop text-custom-text-300">
|
return {
|
||||||
{t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
|
label: !ESTIMATE_SYSTEMS[currentSystem]?.is_available ? (
|
||||||
<Tooltip tooltipContent={t("common.coming_soon")}>
|
<div className="relative flex items-center gap-2 cursor-no-drop text-custom-text-300">
|
||||||
<Info size={12} />
|
{t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
|
||||||
</Tooltip>
|
<Tooltip tooltipContent={t("common.coming_soon")}>
|
||||||
</div>
|
<Info size={12} />
|
||||||
) : !isEnabled ? (
|
</Tooltip>
|
||||||
<div className="relative flex items-center gap-2 cursor-no-drop text-custom-text-300">
|
</div>
|
||||||
{t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
|
) : !isEnabled ? (
|
||||||
<UpgradeBadge />
|
<div className="relative flex items-center gap-2 cursor-no-drop text-custom-text-300">
|
||||||
</div>
|
{t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
|
||||||
) : (
|
<UpgradeBadge />
|
||||||
<div>{t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}</div>
|
</div>
|
||||||
),
|
) : (
|
||||||
value: system,
|
<div>{t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}</div>
|
||||||
disabled: !isEnabled,
|
),
|
||||||
};
|
value: system,
|
||||||
})}
|
disabled: !isEnabled,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.filter((option) => option !== null)}
|
||||||
name="estimate-radio-input"
|
name="estimate-radio-input"
|
||||||
label={t("project_settings.estimates.create.choose_estimate_system")}
|
label={t("project_settings.estimates.create.choose_estimate_system")}
|
||||||
labelClassName="text-sm font-medium text-custom-text-200 mb-1.5"
|
labelClassName="text-sm font-medium text-custom-text-200 mb-1.5"
|
||||||
|
|
@ -99,7 +101,7 @@ export function EstimateCreateStageOne(props: TEstimateCreateStageOne) {
|
||||||
<p className="text-xs text-custom-text-300">
|
<p className="text-xs text-custom-text-300">
|
||||||
{currentEstimateSystem.templates[name]?.values
|
{currentEstimateSystem.templates[name]?.values
|
||||||
?.map((template) =>
|
?.map((template) =>
|
||||||
estimateSystem === EEstimateSystem.TIME
|
estimateSystem === (EEstimateSystem.TIME as TEstimateSystemKeys)
|
||||||
? convertMinutesToHoursMinutesString(Number(template.value)).trim()
|
? convertMinutesToHoursMinutesString(Number(template.value)).trim()
|
||||||
: template.value
|
: template.value
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,7 @@ export const ProjectFeaturesList = observer(function ProjectFeaturesList(props:
|
||||||
// derived values
|
// derived values
|
||||||
const currentProjectDetails = getProjectById(projectId);
|
const currentProjectDetails = getProjectById(projectId);
|
||||||
|
|
||||||
const handleSubmit = async (featureKey: string, featureProperty: string) => {
|
const handleSubmit = (featureKey: string, featureProperty: string) => {
|
||||||
if (!workspaceSlug || !projectId || !currentProjectDetails) return;
|
if (!workspaceSlug || !projectId || !currentProjectDetails) return;
|
||||||
|
|
||||||
// making the request to update the project feature
|
// making the request to update the project feature
|
||||||
|
|
@ -52,13 +52,14 @@ export const ProjectFeaturesList = observer(function ProjectFeaturesList(props:
|
||||||
message: () => "Something went wrong while updating project feature. Please try again.",
|
message: () => "Something went wrong while updating project feature. Please try again.",
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
updateProjectPromise.then(() => {
|
void updateProjectPromise.then(() => {
|
||||||
captureSuccess({
|
captureSuccess({
|
||||||
eventName: PROJECT_TRACKER_EVENTS.feature_toggled,
|
eventName: PROJECT_TRACKER_EVENTS.feature_toggled,
|
||||||
payload: {
|
payload: {
|
||||||
feature_key: featureKey,
|
feature_key: featureKey,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
return undefined;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue