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 classNames from "@calcom/lib/classNames"; 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 && searchParams !== null && pathname !== null) { timeoutRef.current = setTimeout(() => { const _searchParams = new URLSearchParams(searchParams); _searchParams.delete("hl"); _searchParams.delete("category"); // this comes from params, not from search params setHighlight(false); const stringifiedSearchParams = _searchParams.toString(); router.replace(`${pathname}${stringifiedSearchParams !== "" ? `?${stringifiedSearchParams}` : ""}`); }, 3000); } return () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); timeoutRef.current = null; } }; }, [highlight, pathname, router, searchParams, shouldHighlight]); return (
{logo ? ( {`${title} ) : null}

{title}

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