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 { Smartphone, Mail, Zap } from "@calcom/ui/components/icon";
type WorkflowExampleType = {
Icon: SVGComponent;
text: string;
};
function WorkflowExample(props: WorkflowExampleType) {
const { Icon, text } = props;
return (
);
}
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: Smartphone, text: t("workflow_example_1") },
{ icon: Smartphone, text: t("workflow_example_2") },
{ icon: Mail, text: t("workflow_example_3") },
{ icon: Mail, text: t("workflow_example_4") },
{ icon: Mail, text: t("workflow_example_5") },
{ icon: Smartphone, text: t("workflow_example_6") },
];
// new workflow example when 'after meetings ends' trigger is implemented: Send custom thank you email to attendee after event (Smile 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) => (
))}
>
);
}