import { useRouter } from "next/router"; import type { ReactNode } from "react"; import { useEffect, useRef, useState } from "react"; import { z } from "zod"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery"; import { Badge, ListItemText } from "@calcom/ui"; import { FiAlertCircle } 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; } & 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, } = props; const { data: { hl }, } = useTypedQuery(schema); const router = useRouter(); const [highlight, setHighlight] = useState(shouldHighlight && hl === slug); const timeoutRef = useRef(null); useEffect(() => { if (shouldHighlight && highlight) { const timer = setTimeout(() => { setHighlight(false); const url = new URL(window.location.href); url.searchParams.delete("hl"); router.replace(url.pathname, undefined, { shallow: true }); }, 3000); timeoutRef.current = timer; } return () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); timeoutRef.current = null; } }; }, []); return (
{logo ? {`${title} : null}

{title}

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