import { usePathname, useRouter, useSearchParams } from "next/navigation"; import type { ReactNode } from "react"; import { useEffect, useRef, useState } from "react"; import { z } from "zod"; import type { CredentialOwner } from "@calcom/app-store/types"; import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery"; import { Badge, ListItemText, Avatar } from "@calcom/ui"; import { AlertCircle } from "@calcom/ui/components/icon"; type ShouldHighlight = | { slug: string; shouldHighlight: true; } | { shouldHighlight?: never; slug?: never; }; type AppListCardProps = { logo?: string; title: string; description: string; actions?: ReactNode; isDefault?: boolean; isTemplate?: boolean; invalidCredential?: boolean; children?: ReactNode; credentialOwner?: CredentialOwner; } & ShouldHighlight; const schema = z.object({ hl: z.string().optional() }); export default function AppListCard(props: AppListCardProps) { const { t } = useLocale(); const { logo, title, description, actions, isDefault, slug, shouldHighlight, isTemplate, invalidCredential, children, credentialOwner, } = props; const { data: { hl }, } = useTypedQuery(schema); const router = useRouter(); const [highlight, setHighlight] = useState(shouldHighlight && hl === slug); const timeoutRef = useRef(null); const searchParams = useSearchParams(); const pathname = usePathname(); useEffect(() => { if (shouldHighlight && highlight) { const timer = setTimeout(() => { setHighlight(false); const _searchParams = new URLSearchParams(searchParams); _searchParams.delete("hl"); router.replace(`${pathname}?${_searchParams.toString()}`); }, 3000); timeoutRef.current = timer; } return () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); timeoutRef.current = null; } }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return (
{logo ? {`${title} : null}

{title}

{isDefault && {t("default")}} {isTemplate && Template}
{description} {invalidCredential && (
{t("invalid_credential")}
)}
{credentialOwner && (
{credentialOwner.name}
)} {actions}
{children &&
{children}
}
); }