wehub-resource-sync
95 lines
3.3 KiB
TypeScript
95 lines
3.3 KiB
TypeScript
import { Header3 } from "~/components/primitives/Headers";
|
|
import { InfoIconTooltip, SimpleTooltip } from "~/components/primitives/Tooltip";
|
|
import { useOrganization } from "~/hooks/useOrganizations";
|
|
import { v3SchedulesAddOnPath } from "~/utils/pathBuilder";
|
|
import { ScheduleLimitActions } from "./ScheduleLimitActions";
|
|
import { type SchedulePricing } from "./PurchaseSchedulesModal";
|
|
|
|
type Props = {
|
|
limits: { used: number; limit: number };
|
|
/** True when the user has used all available schedules and cannot exceed the plan limit. */
|
|
requiresUpgrade: boolean;
|
|
/** True when the plan would let them upgrade (vs being already on the highest plan). */
|
|
canUpgrade: boolean;
|
|
canPurchaseSchedules: boolean;
|
|
extraSchedules: number;
|
|
maxScheduleQuota: number;
|
|
planScheduleLimit: number;
|
|
schedulePricing: SchedulePricing | null;
|
|
};
|
|
|
|
export function SchedulesUsageBar({
|
|
limits,
|
|
requiresUpgrade,
|
|
canUpgrade,
|
|
canPurchaseSchedules,
|
|
extraSchedules,
|
|
maxScheduleQuota,
|
|
planScheduleLimit,
|
|
schedulePricing,
|
|
}: Props) {
|
|
const organization = useOrganization();
|
|
const actionPath = v3SchedulesAddOnPath(organization);
|
|
const ratio = limits.limit > 0 ? Math.min(limits.used / limits.limit, 1) : 0;
|
|
|
|
return (
|
|
<div className="flex w-full items-start justify-between">
|
|
<div className="flex h-fit w-full items-center gap-4 border-t border-grid-bright bg-background-bright p-[0.86rem] pl-4">
|
|
<SimpleTooltip
|
|
button={
|
|
<div className="size-6">
|
|
<svg className="h-full w-full -rotate-90 overflow-visible">
|
|
<circle
|
|
className="fill-none stroke-grid-bright"
|
|
strokeWidth="4"
|
|
r="10"
|
|
cx="12"
|
|
cy="12"
|
|
/>
|
|
<circle
|
|
className={`fill-none ${requiresUpgrade ? "stroke-error" : "stroke-success"}`}
|
|
strokeWidth="4"
|
|
r="10"
|
|
cx="12"
|
|
cy="12"
|
|
strokeDasharray={`${ratio * 62.8} 62.8`}
|
|
strokeDashoffset="0"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
}
|
|
content={`${Math.round(ratio * 100)}%`}
|
|
/>
|
|
<div className="flex w-full items-center justify-between gap-6">
|
|
{requiresUpgrade ? (
|
|
<Header3 className="text-error">
|
|
You've used all {limits.limit} of your available schedules. Upgrade your plan to
|
|
enable more.
|
|
</Header3>
|
|
) : (
|
|
<div className="flex items-center gap-1">
|
|
<Header3>
|
|
You've used {limits.used}/{limits.limit} of your schedules
|
|
</Header3>
|
|
<InfoIconTooltip content="Schedules created in Dev don't count towards your limit." />
|
|
</div>
|
|
)}
|
|
|
|
<ScheduleLimitActions
|
|
actionPath={actionPath}
|
|
canPurchaseSchedules={canPurchaseSchedules}
|
|
schedulePricing={schedulePricing}
|
|
extraSchedules={extraSchedules}
|
|
limits={limits}
|
|
maxScheduleQuota={maxScheduleQuota}
|
|
planScheduleLimit={planScheduleLimit}
|
|
canUpgrade={canUpgrade}
|
|
organization={organization}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|