diff --git a/apps/web/components/v2/apps/CalendarListContainer.tsx b/apps/web/components/v2/apps/CalendarListContainer.tsx index 009a22182d..a81d3bbf6c 100644 --- a/apps/web/components/v2/apps/CalendarListContainer.tsx +++ b/apps/web/components/v2/apps/CalendarListContainer.tsx @@ -163,6 +163,7 @@ function ConnectedCalendarsList(props: Props) { title={item.integration.title} logo={item.integration.logo} description={item.primary?.externalId || "No external Id"} + separate={true} actions={
}> - {!fromOnboarding && ( - <> -

{t("toggle_calendars_conflict")}

- - - )} +
+ {!fromOnboarding && ( + <> +

+ {t("toggle_calendars_conflict")} +

+ + + )} +
) : ( {!!data.connectedCalendars.length && ( -
+
)} diff --git a/apps/web/components/v2/apps/IntegrationListItem.tsx b/apps/web/components/v2/apps/IntegrationListItem.tsx index d138a282b7..dc12aef017 100644 --- a/apps/web/components/v2/apps/IntegrationListItem.tsx +++ b/apps/web/components/v2/apps/IntegrationListItem.tsx @@ -16,6 +16,7 @@ function IntegrationListItem(props: { children?: ReactNode; logo: string; destination?: boolean; + separate?: boolean; }): JSX.Element { const router = useRouter(); const { hl } = router.query; @@ -32,7 +33,8 @@ function IntegrationListItem(props: {
@@ -45,7 +47,7 @@ function IntegrationListItem(props: {
{props.actions}
- {props.children &&
{props.children}
} + {props.children &&
{props.children}
} ); } diff --git a/apps/web/pages/v2/apps/installed/[category].tsx b/apps/web/pages/v2/apps/installed/[category].tsx index 88c0c074cb..87ddbbe8b9 100644 --- a/apps/web/pages/v2/apps/installed/[category].tsx +++ b/apps/web/pages/v2/apps/installed/[category].tsx @@ -1,8 +1,10 @@ import { InferGetServerSidePropsType } from "next"; import z from "zod"; +import { AppSettings } from "@calcom/app-store/_components/AppSettings"; import { InstallAppButton } from "@calcom/app-store/components"; import { InstalledAppVariants } from "@calcom/app-store/utils"; +import { classNames } from "@calcom/lib"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { inferQueryOutput, trpc } from "@calcom/trpc/react"; import { App } from "@calcom/types/App"; @@ -89,9 +91,15 @@ interface IntegrationsContainerProps { exclude?: (keyof typeof InstalledAppVariants)[]; } -const IntegrationsList = ({ data }: { data: inferQueryOutput<"viewer.integrations"> }) => { +interface IntegrationsListProps { + variant?: IntegrationsContainerProps["variant"]; + data: inferQueryOutput<"viewer.integrations">; +} + +const IntegrationsList = ({ data, variant }: IntegrationsListProps) => { + const separateItems = variant === "automation"; return ( - + {data.items.map((item) => ( +
- } - /> + }> + {separateItems && } + ))} ); @@ -153,7 +163,7 @@ const IntegrationsContainer = ({ variant, exclude }: IntegrationsContainerProps) } /> - + ) : ( import("../zapier/components/AppSettings")), +}; + +export const AppSettings = (props: { slug: string }) => { + return componentMap={AppSettingsMap} {...props} />; +}; diff --git a/packages/app-store/n8n/config.json b/packages/app-store/n8n/config.json index 4385e24810..5f929129d7 100644 --- a/packages/app-store/n8n/config.json +++ b/packages/app-store/n8n/config.json @@ -6,7 +6,7 @@ "imageSrc": "/api/app-store/n8n/icon.svg", "logo": "/api/app-store/n8n/icon.svg", "url": "https://cal.com/apps/n8n", - "variant": "other", + "variant": "automation", "categories": ["automation"], "publisher": "Cal.com, Inc.", "email": "help@cal.com", diff --git a/packages/app-store/zapier/_metadata.ts b/packages/app-store/zapier/_metadata.ts index 2de419b737..a67c213f75 100644 --- a/packages/app-store/zapier/_metadata.ts +++ b/packages/app-store/zapier/_metadata.ts @@ -17,7 +17,7 @@ export const metadata = { trending: true, type: "zapier_automation", url: "https://cal.com/apps/zapier", - variant: "other", + variant: "automation", verified: true, email: "help@cal.com", } as AppMeta; diff --git a/packages/app-store/zapier/components/AppSettings.tsx b/packages/app-store/zapier/components/AppSettings.tsx new file mode 100644 index 0000000000..655c98fca8 --- /dev/null +++ b/packages/app-store/zapier/components/AppSettings.tsx @@ -0,0 +1,69 @@ +import TemplateCard from "./TemplateCard"; + +export type Template = { + icon: string; + app: string; + text: string; + link: string; +}; + +const templates: Template[] = [ + { + icon: "gmail.svg", + app: "Gmail", + text: "Send emails via Gmail for scheduled events", + link: "https://zapier.com/editor/170116665?attempt_id=6e954288-db41-43e8-8417-4a7b8f1a1166", + }, + { + icon: "googleSheets.svg", + app: "Google Sheets", + text: "Create Google Sheets rows for scheduled events", + link: "https://workflows.zapier.com/?attempt_id=a086d136-b084-45bc-a6aa-c9f460b05b7d&template=1082047", + }, + { + icon: "salesforce.svg", + app: "Salesforce", + text: "Create Salesforce leads from new bookings", + link: "https://zapier.com/editor/170116721?attempt_id=9f939229-ee89-4391-b9c7-f4645c60dbd4", + }, + { + icon: "todoist.svg", + app: "Todoist", + text: "Create Todoist tasks for scheduled events", + link: "https://zapier.com/editor/170116746?attempt_id=d4501c34-c3f2-4e62-b5a2-034fbf39320d", + }, + { + icon: "gmail.svg", + app: "Gmail", + text: "Send emails via Gmail for rescheduled events", + link: "https://zapier.com/editor/170116757?attempt_id=40e837b6-93e1-4bff-9cd7-5c8df1b0741e", + }, + { + icon: "gmail.svg", + app: "Gmail", + text: "Send emails via Gmail for cancelled events", + link: "https://zapier.com/editor/170116884?attempt_id=e52a2a0a-cea8-4d95-93ca-f010b3aceda1", + }, + { + icon: "gmail.svg", + app: "Gmail", + text: "Send emails via Gmail after scheduled meetings end", + link: "https://zapier.com/editor/170116896?attempt_id=28a54a64-e1e4-4a93-b5e9-1258a083581d", + }, + { + icon: "googleCalendar.svg", + app: "Google Calendar", + text: "Add new bookings to Google Calendar", + link: "https://zapier.com/editor/170116908?attempt_id=e2b7f20c-8825-42f8-a031-5134a02b7311", + }, +]; + +export default function AppSettings() { + return ( +
+ {templates.map((template, index) => ( + + ))} +
+ ); +} diff --git a/packages/app-store/zapier/components/TemplateCard.tsx b/packages/app-store/zapier/components/TemplateCard.tsx new file mode 100644 index 0000000000..ffc3ab11f7 --- /dev/null +++ b/packages/app-store/zapier/components/TemplateCard.tsx @@ -0,0 +1,35 @@ +import { Button } from "@calcom/ui/v2"; + +import { Template } from "./AppSettings"; + +export default function TemplateCard({ template }: { template: Template }) { + return ( +
+
+
+
+ {template.app} +
+
+
+
+

{template.app}

+

{template.text}

+
+
+
+ +
+
+
+
+ +
+
+
+ ); +} diff --git a/packages/app-store/zapier/package.json b/packages/app-store/zapier/package.json index 0949ab1d05..f4cd5a9d75 100644 --- a/packages/app-store/zapier/package.json +++ b/packages/app-store/zapier/package.json @@ -4,7 +4,7 @@ "name": "@calcom/zapier", "version": "0.0.0", "main": "./index.ts", - "description": "Workflow automation for everyone. Use the Cal.com Zapier app to trigger your workflows when a booking was created, rescheduled or cancelled.", + "description": "Workflow automation for everyone. Use the Cal.com Zapier app to trigger your workflows when a booking is created, rescheduled, or cancelled, or after a meeting ends.", "dependencies": { "@calcom/lib": "*", "node-schedule": "2.1.0" diff --git a/packages/app-store/zapier/static/gmail.svg b/packages/app-store/zapier/static/gmail.svg new file mode 100644 index 0000000000..99c348ecd8 --- /dev/null +++ b/packages/app-store/zapier/static/gmail.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/app-store/zapier/static/googleCalendar.svg b/packages/app-store/zapier/static/googleCalendar.svg new file mode 100644 index 0000000000..bd0155bd2d --- /dev/null +++ b/packages/app-store/zapier/static/googleCalendar.svg @@ -0,0 +1 @@ + diff --git a/packages/app-store/zapier/static/googleSheets.svg b/packages/app-store/zapier/static/googleSheets.svg new file mode 100644 index 0000000000..ba2cbc1f60 --- /dev/null +++ b/packages/app-store/zapier/static/googleSheets.svg @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/app-store/zapier/static/salesforce.svg b/packages/app-store/zapier/static/salesforce.svg new file mode 100644 index 0000000000..2dfe013fb4 --- /dev/null +++ b/packages/app-store/zapier/static/salesforce.svg @@ -0,0 +1,24 @@ + +Salesforce.com logo +A cloud computing company based in San Francisco, California, United States + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/packages/app-store/zapier/static/todoist.svg b/packages/app-store/zapier/static/todoist.svg new file mode 100644 index 0000000000..9d0c6b7a03 --- /dev/null +++ b/packages/app-store/zapier/static/todoist.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/types/App.d.ts b/packages/types/App.d.ts index 8fed12bcc0..d326dc5dcd 100644 --- a/packages/types/App.d.ts +++ b/packages/types/App.d.ts @@ -73,7 +73,15 @@ export interface App { */ imageSrc?: string; /** TODO determine if we should use this instead of category */ - variant: "calendar" | "payment" | "conferencing" | "video" | "other" | "other_calendar" | "web3"; + variant: + | "calendar" + | "payment" + | "conferencing" + | "video" + | "other" + | "other_calendar" + | "web3" + | "automation"; /** The slug for the app store public page inside `/apps/[slug] */ slug: string; diff --git a/packages/ui/v2/core/Shell.tsx b/packages/ui/v2/core/Shell.tsx index 66f5c5ddbc..e2a0c73683 100644 --- a/packages/ui/v2/core/Shell.tsx +++ b/packages/ui/v2/core/Shell.tsx @@ -116,7 +116,7 @@ export function ShellSubHeading(props: { {props.subtitle &&

{props.subtitle}

} - {props.actions &&
{props.actions}
} + {props.actions &&
{props.actions}
} ); } @@ -657,7 +657,7 @@ const MobileNavigationMoreItem: React.FC<{ {item.icon && ( - @@ -712,13 +712,13 @@ function SideBar() { @@ -739,7 +739,7 @@ function SideBar() { {isCalcom && } {/* Save it for next preview version -
+
*/} @@ -781,7 +781,7 @@ export function ShellMain(props: LayoutProps) { {props.HeadingLeftIcon &&
{props.HeadingLeftIcon}
}
{props.heading && ( -

+

{!isLocaleReady ? : props.heading}

)} diff --git a/packages/ui/v2/core/layouts/InstalledAppsLayout.tsx b/packages/ui/v2/core/layouts/InstalledAppsLayout.tsx index 7d5399749f..2cd88bbf90 100644 --- a/packages/ui/v2/core/layouts/InstalledAppsLayout.tsx +++ b/packages/ui/v2/core/layouts/InstalledAppsLayout.tsx @@ -27,12 +27,12 @@ const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [ icon: Icon.FiCreditCard, }, { - name: "Automation", + name: "automation", href: "/apps/installed/automation", icon: Icon.FiShare2, }, { - name: "Analytics", + name: "analytics", href: "/apps/installed/analytics", icon: Icon.FiBarChart, },