Files
calendar/packages/app-store/_components/AppNotInstalledMessage.tsx
T
Volnei MunhozGitHubAnik Dhabal BabuDevin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
19ac0139c1 fix: Remove all links legacyBehavior (#25585)
* Remove all links legacyBehavior

* fix: resolve type errors in Button and Dropdown when using Link without legacyBehavior

- Button.tsx: Only pass ref to button element, not to Link (Link manages its own anchor)
- Dropdown.tsx: Strip ref from props when using Link to avoid type incompatibility

This fixes the type errors that were causing API V1 and V2 builds to fail.

Co-Authored-By: Volnei Munhoz <volnei.munhoz@gmail.com>

* fix: only pass disabled and type props to button element, not to Link

Link component doesn't accept disabled or type props, so these should only be passed when rendering a button element.

Co-Authored-By: Volnei Munhoz <volnei.munhoz@gmail.com>

* fix: strip ref from passThroughProps when rendering Link

The passThroughProps spread was including a ref property that's incompatible with Link's expected ref type. This strips the ref when rendering a Link component.

Co-Authored-By: Volnei Munhoz <volnei.munhoz@gmail.com>

* fix: use type assertion for React.createElement props to handle union types

The Button component uses a union type for props that can be either Link or button props. TypeScript can't narrow the union type properly when using React.createElement with a dynamic element type, so we use a type assertion to cast the props to the correct type.

Co-Authored-By: Volnei Munhoz <volnei.munhoz@gmail.com>

* fix: render Link and button separately to avoid type conflicts

Co-Authored-By: Volnei Munhoz <volnei.munhoz@gmail.com>

* fix: preserve data-testid when rendering Button as Link

Co-Authored-By: Volnei Munhoz <volnei.munhoz@gmail.com>

---------

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2025-12-21 12:40:27 +00:00

27 lines
1.1 KiB
TypeScript

import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Button } from "@calcom/ui/components/button";
import { Icon } from "@calcom/ui/components/icon";
export default function AppNotInstalledMessage({ appName }: { appName: string }) {
const { t } = useLocale();
return (
<div className="flex h-full w-full items-center justify-center">
<div className="bg-default flex max-w-lg flex-col items-center rounded-xl border px-8 py-14 text-center shadow-md">
<div className="mb-5 rounded-full bg-gray-100 p-3 dark:bg-[#292929] ">
<Icon name="circle-alert" className="h-9 w-9 p-0.5" strokeWidth={1.5} />
</div>
<h3 className="font-cal mb-2 text-2xl font-semibold">{t("app_not_installed")}</h3>
<p className="text-subtle px-1 leading-normal">{t("visit_our_app_store")}</p>
<div className="mt-5">
<Button href={`/apps/${appName}`} type="button" color="secondary">
{t("go_to_app_store")}
<Icon name="arrow-up-right" className="ml-1" size={20} />
</Button>
</div>
</div>
</div>
);
}