import { useRouter } from "next/router"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { HttpError } from "@calcom/lib/http-error"; import { trpc } from "@calcom/trpc/react"; import type { SVGComponent } from "@calcom/types/SVGComponent"; import { CreateButton, showToast, EmptyScreen as ClassicEmptyScreen } from "@calcom/ui"; import { FiSmartphone, FiMail, FiZap } from "@calcom/ui/components/icon"; type WorkflowExampleType = { Icon: SVGComponent; text: string; }; function WorkflowExample(props: WorkflowExampleType) { const { Icon, text } = props; return (
{text}
); } export default function EmptyScreen(props: { profileOptions: { label: string | null; image?: string | null; teamId: number | null | undefined; slug: string | null; }[]; isFilteredView: boolean; }) { const { t } = useLocale(); const router = useRouter(); const createMutation = trpc.viewer.workflows.create.useMutation({ onSuccess: async ({ workflow }) => { await router.replace("/workflows/" + workflow.id); }, onError: (err) => { if (err instanceof HttpError) { const message = `${err.statusCode}: ${err.message}`; showToast(message, "error"); } if (err.data?.code === "UNAUTHORIZED") { const message = `${err.data.code}: You are not authorized to create this workflow`; showToast(message, "error"); } }, }); const workflowsExamples = [ { icon: FiSmartphone, text: t("workflow_example_1") }, { icon: FiSmartphone, text: t("workflow_example_2") }, { icon: FiMail, text: t("workflow_example_3") }, { icon: FiMail, text: t("workflow_example_4") }, { icon: FiMail, text: t("workflow_example_5") }, { icon: FiSmartphone, text: t("workflow_example_6") }, ]; // new workflow example when 'after meetings ends' trigger is implemented: Send custom thank you email to attendee after event (FiSmile icon), if (props.isFilteredView) { return ; } return ( <>

{t("workflows")}

{t("no_workflows_description")}

createMutation.mutate({ teamId })} buttonText={t("create_workflow")} isLoading={createMutation.isLoading} />
{workflowsExamples.map((example, index) => ( ))}
); }