maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated workflows empty screen (#4218) 

* updated workflows empty screen

* fix missing title

* small design fixes for cards

* add ... if workflow example exceeds 2 lines

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
This commit is contained in:
Peer Richelsen 2022-09-06 23:30:03 +02:00 committed by GitHub
parent 91bc6ae820
commit 7f2db86a83
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web/public/static/locales/en/common.json
View File

@ -1156,5 +1156,11 @@
"create_your_first_form_description": "With Routing Forms you can ask qualifying questions and route to the correct person or event type.",
"for_a_maximum_of": "For a maximum of",
"event_one": "event",
"event_other": "events"
"event_other": "events",
"workflow_example_1": "Send email reminder 24 hours before event starts to host",
"workflow_example_2": "Send SMS reminder 1 hour before event starts to host",
"workflow_example_3": "Send custom email when event is cancelled to host",
"workflow_example_4": "Send email reminder 24 hours before event starts to attendee",
"workflow_example_5": "Send SMS reminder 1 hour before event starts to attendee",
"workflow_example_6": "Send custom SMS when event is rescheduled to attendee"
}

33
packages/features/ee/workflows/components/v2/EmptyScreen.tsx
View File

@ -1,19 +1,11 @@
import React from "react";
import { Icon as FeatherIcon } from "react-feather";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { SVGComponent } from "@calcom/types/SVGComponent";
import { Icon } from "@calcom/ui/Icon";
import { Button } from "@calcom/ui/v2";
const workflowsExamples = [
{ icon: Icon.FiMail, text: "Send email reminder 24 hours before event starts to host" },
{ icon: Icon.FiSmartphone, text: "Send SMS reminder 1 hour before event starts to host" },
{ icon: Icon.FiMail, text: "Send custom email when event is cancelled to host" },
{ icon: Icon.FiMail, text: "Send email reminder 24 hours before event starts to attendee" },
{ icon: Icon.FiSmartphone, text: "Send SMS reminder 1 hour before event starts to attendee" },
{ icon: Icon.FiSmartphone, text: "Send custom SMS when event is rescheduled to attendee" },
];
type WorkflowExampleType = {
Icon: FeatherIcon;
text: string;
@ -23,15 +15,15 @@ function WorkflowExample(props: WorkflowExampleType) {
const { Icon, text } = props;
return (
<div className="mx-3 my-3 max-w-[600px] rounded-md border border-solid py-5 pr-5">
<div className="flex">
<div className="mx-3 my-3 max-h-24 max-w-[600px] rounded-md border border-solid p-6">
<div className="flex ">
<div className="flex w-24 items-center justify-center rounded-sm">
<div className="mr-2 ml-2 flex h-[40px] w-[40px] items-center justify-center rounded-full bg-gray-200 dark:bg-white">
<div className="mr-4 flex h-10 w-10 items-center justify-center rounded-full bg-gray-200 dark:bg-white">
<Icon className="h-6 w-6 stroke-[1.5px]" />
</div>
</div>
<div className="flex items-center justify-center">
<div className="w-full text-sm">{text}</div>
<div className="flex w-full items-center justify-center ">
<div className="line-clamp-2 w-full text-sm leading-none">{text}</div>
</div>
</div>
</div>
@ -55,6 +47,17 @@ export default function EmptyScreen({
isLoading: boolean;
showExampleWorkflows: boolean;
}) {
const { t } = useLocale();
const workflowsExamples = [
{ icon: Icon.FiMail, text: t("workflow_example_1") },
{ icon: Icon.FiSmartphone, text: t("workflow_example_2") },
{ icon: Icon.FiMail, text: t("workflow_example_3") },
{ icon: Icon.FiMail, text: t("workflow_example_4") },
{ icon: Icon.FiSmartphone, text: t("workflow_example_5") },
{ icon: Icon.FiSmartphone, text: t("workflow_example_6") },
];
return (
<>
<div className="min-h-80 flex w-full flex-col items-center justify-center rounded-md ">
@ -72,7 +75,7 @@ export default function EmptyScreen({
StartIcon={Icon.FiPlus}
onClick={(e) => buttonOnClick(e)}
loading={isLoading}
className="mt-8">
className="mx-auto mt-8">
{buttonText}
</Button>
)}

3
packages/features/ee/workflows/pages/v2/index.tsx
View File

@ -43,7 +43,8 @@ function WorkflowsPage() {
return session.data ? (
<Shell
heading={data?.workflows.length ? t("workflows") : ""}
heading={data?.workflows.length ? t("workflows") : undefined}
title={t("workflows")}
subtitle={data?.workflows.length ? t("workflows_to_automate_notifications") : ""}
CTA={
session.data?.hasValidLicense && !isFreeUser && data?.workflows && data?.workflows.length > 0 ? (