Files
calendar/apps/web/components/settings/platform/dashboard/HelpCards.tsx
T
devin-ai-integration[bot]GitHubDevin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>lauris@cal.com <lauris@cal.com>
d25094a152 feat: allow paid users to see report issue option (#20687)
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: lauris@cal.com <lauris@cal.com>
2025-04-14 18:19:05 +05:30

44 lines
1.5 KiB
TypeScript

import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Card } from "@calcom/ui/components/card";
import { Icon } from "@calcom/ui/components/icon";
import { helpCards } from "@lib/settings/platform/utils";
import { useGetUserAttributes } from "@components/settings/platform/hooks/useGetUserAttributes";
export const HelpCards = () => {
const { t } = useLocale();
const { userBillingData } = useGetUserAttributes();
const isPaidUser = userBillingData?.valid && userBillingData?.plan?.toLowerCase() !== "free";
return (
<>
<div className="grid-col-1 mb-4 grid gap-2 md:grid-cols-3">
{helpCards.map((card) => {
if (card.title === "Contact us" && !isPaidUser) return null;
const title = card.title === "Report issue" ? t("report_issue") : card.title;
const description =
card.title === "Report issue" ? t("report_issue_description") : card.description;
const actionButtonChild = card.title === "Report issue" ? t("open_issue") : card.actionButton.child;
return (
<div key={card.title}>
<Card
icon={<Icon name={card.icon} className="h-5 w-5 text-green-700" />}
variant={card.variant}
title={title}
description={description}
actionButton={{
href: `${card.actionButton.href}`,
child: actionButtonChild,
}}
/>
</div>
);
})}
</div>
</>
);
};