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

Add links to Zapier templates in installed apps (#4982) 

* add automation cateogry for n8n and zapier

* fix border radius for seperated apps

* create app specific settings in installed apps

* Fixed design issues caused by app settings

* add first version of template cards with logos

* Add link to zapier template

* Add missing translations

* fix mobile view

* better readable app description in mobile view

* code clean up

* fix issue that lisItem was always expanded

* code clean up

* code clean up

* fix import

* fix typo

* code clean up

* add missing alt to img

* use FiShare2 icon instead of FiZap

* Remove duplicate entries

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: Alex van Andel <me@alexvanandel.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
This commit is contained in:
Carina Wollendorfer 2022-10-15 10:05:37 +02:00 committed by GitHub
parent e54bdb4c46
commit 6ee9de6dd8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 303 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
apps/web/components/v2/apps/CalendarListContainer.tsx
View File

@ -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={
<div className="flex w-32 justify-end">
<DisconnectIntegration
@ -173,23 +174,27 @@ function ConnectedCalendarsList(props: Props) {
/>
</div>
}>
{!fromOnboarding && (
<>
<p className="px-4 pt-4 text-sm text-neutral-500">{t("toggle_calendars_conflict")}</p>
<ul className="space-y-2 p-4">
{item.calendars.map((cal) => (
<CalendarSwitch
key={cal.externalId}
externalId={cal.externalId}
title={cal.name || "Nameless calendar"}
type={item.integration.type}
defaultSelected={cal.isSelected}
destination={cal.externalId === props.destinationCalendarId}
/>
))}
</ul>
</>
)}
<div className="border-t border-gray-200">
{!fromOnboarding && (
<>
<p className="px-4 pt-4 text-sm text-neutral-500">
{t("toggle_calendars_conflict")}
</p>
<ul className="space-y-2 p-4">
{item.calendars.map((cal) => (
<CalendarSwitch
key={cal.externalId}
externalId={cal.externalId}
title={cal.name || "Nameless calendar"}
type={item.integration.type}
defaultSelected={cal.isSelected}
destination={cal.externalId === props.destinationCalendarId}
/>
))}
</ul>
</>
)}
</div>
</IntegrationListItem>
) : (
<Alert
@ -262,7 +267,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
actions={
<div className="flex flex-col xl:flex-row xl:space-x-5">
{!!data.connectedCalendars.length && (
<div className=" flex items-center">
<div className="flex items-center">
<AdditionalCalendarSelector isLoading={mutation.isLoading} />
</div>
)}

6
apps/web/components/v2/apps/IntegrationListItem.tsx
View File

@ -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: {
<ListItem
expanded={!!props.children}
className={classNames(
"my-0 flex-col border transition-colors duration-500 first:rounded-t-md last:rounded-b-md",
props.separate ? "rounded-md" : "first:rounded-t-md last:rounded-b-md",
"my-0 flex-col border transition-colors duration-500 ",
highlight ? "bg-yellow-100" : ""
)}>
<div className={classNames("flex w-full flex-1 items-center space-x-2 p-4 rtl:space-x-reverse")}>
@ -45,7 +47,7 @@ function IntegrationListItem(props: {
</div>
<div>{props.actions}</div>
</div>
{props.children && <div className="w-full border-t border-gray-200">{props.children}</div>}
{props.children && <div className="w-full">{props.children}</div>}
</ListItem>
);
}

22
apps/web/pages/v2/apps/installed/[category].tsx
View File

@ -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 (
<List noBorderTreatment>
<List className={classNames(separateItems ? "flex flex-col gap-6" : "")} noBorderTreatment>
{data.items.map((item) => (
<IntegrationListItem
name={item.name}
@ -100,8 +108,9 @@ const IntegrationsList = ({ data }: { data: inferQueryOutput<"viewer.integration
title={item.title}
logo={item.logo}
description={item.description}
separate={separateItems}
actions={
<div className="flex w-32 justify-end">
<div className="flex w-16 justify-end">
<ConnectOrDisconnectIntegrationButton
credentialIds={item.credentialIds}
type={item.type}
@ -109,8 +118,9 @@ const IntegrationsList = ({ data }: { data: inferQueryOutput<"viewer.integration
installed
/>
</div>
}
/>
}>
{separateItems && <AppSettings slug={item.slug} />}
</IntegrationListItem>
))}
</List>
);
@ -153,7 +163,7 @@ const IntegrationsContainer = ({ variant, exclude }: IntegrationsContainerProps)
</Button>
}
/>
<IntegrationsList data={data} />
<IntegrationsList data={data} variant={variant} />
</div>
) : (
<EmptyScreen

11
packages/app-store/_components/AppSettings.tsx Normal file
View File

@ -0,0 +1,11 @@
import dynamic from "next/dynamic";
import { DynamicComponent } from "./DynamicComponent";
export const AppSettingsMap = {
zapier: dynamic(() => import("../zapier/components/AppSettings")),
};
export const AppSettings = (props: { slug: string }) => {
return <DynamicComponent<typeof AppSettingsMap> componentMap={AppSettingsMap} {...props} />;
};

2
packages/app-store/n8n/config.json
View File

@ -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",

2
packages/app-store/zapier/_metadata.ts
View File

@ -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;

69
packages/app-store/zapier/components/AppSettings.tsx Normal file
View File

@ -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 (
<div className="grid gap-4 border-t border-gray-200 p-4 md:grid-cols-2">
{templates.map((template, index) => (
<TemplateCard key={index} template={template} />
))}
</div>
);
}

35
packages/app-store/zapier/components/TemplateCard.tsx Normal file
View File

@ -0,0 +1,35 @@
import { Button } from "@calcom/ui/v2";
import { Template } from "./AppSettings";
export default function TemplateCard({ template }: { template: Template }) {
return (
<div className="rounded-md border border-gray-200 p-4 ">
<div className="flex items-center justify-center">
<div>
<div className="mr-4 flex h-12 w-12 items-center justify-center rounded-md border p-1 ">
<img className="h-8" alt={template.app} src={`/api/app-store/zapier/${template.icon}`} />
</div>
</div>
<div className="mr-4 ">
<div>
<p className="truncate text-sm font-medium text-neutral-900">{template.app}</p>
<p className="mt-[2px] text-xs text-gray-500 ">{template.text}</p>
</div>
</div>
<div className="ml-auto hidden sm:block">
<Button color="secondary" className="w-[90px] " target="_blank" href={template.link}>
Use Zap
</Button>
</div>
</div>
<div className="mt-2 block w-full sm:hidden">
<div className="float-right">
<Button color="secondary" className="w-[90px]" target="_blank" href={template.link}>
Use Zap
</Button>
</div>
</div>
</div>
);
}

2
packages/app-store/zapier/package.json
View File

@ -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"

7
packages/app-store/zapier/static/gmail.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="52 42 88 66">
<path fill="#4285f4" d="M58 108h14V74L52 59v43c0 3.32 2.69 6 6 6"/>
<path fill="#34a853" d="M120 108h14c3.32 0 6-2.69 6-6V59l-20 15"/>
<path fill="#fbbc04" d="M120 48v26l20-15v-8c0-7.42-8.47-11.65-14.4-7.2"/>
<path fill="#ea4335" d="M72 74V48l24 18 24-18v26L96 92"/>
<path fill="#c5221f" d="M52 51v8l20 15V48l-5.6-4.2c-5.94-4.45-14.4-.22-14.4 7.2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 420 B

1
packages/app-store/zapier/static/googleCalendar.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="186 38 76 76"><path fill="#fff" d="M244 56h-40v40h40V56z"/><path fill="#EA4335" d="M244 114l18-18h-18v18z"/><path fill="#FBBC04" d="M262 56h-18v40h18V56z"/><path fill="#34A853" d="M244 96h-40v18h40V96z"/><path fill="#188038" d="M186 96v12c0 3.315 2.685 6 6 6h12V96h-18z"/><path fill="#1967D2" d="M262 56V44c0-3.315-2.685-6-6-6h-12v18h18z"/><path fill="#4285F4" d="M244 38h-52c-3.315 0 -6 2.685-6 6v52h18V56h40V38z"/><path fill="#4285F4" d="M212.205 87.03c-1.495-1.01-2.53-2.485-3.095-4.435l3.47-1.43c.315 1.2.865 2.13 1.65 2.79.78.66 1.73.985 2.84.985 1.135 0 2.11-.345 2.925-1.035s1.225-1.57 1.225-2.635c0-1.09-.43-1.98-1.29-2.67-.86-.69-1.94-1.035-3.23-1.035h-2.005V74.13h1.8c1.11 0 2.045-.3 2.805-.9.76-.6 1.14-1.42 1.14-2.465 0 -.93-.34-1.67-1.02-2.225-.68-.555-1.54-.835-2.585-.835-1.02 0 -1.83.27-2.43.815a4.784 4.784 0 0 0 -1.31 2.005l-3.435-1.43c.455-1.29 1.29-2.43 2.515-3.415 1.225-.985 2.79-1.48 4.69-1.48 1.405 0 2.67.27 3.79.815 1.12.545 2 1.3 2.635 2.26.635.965.95 2.045.95 3.245 0 1.225-.295 2.26-.885 3.11-.59.85-1.315 1.5-2.175 1.955v.205a6.605 6.605 0 0 1 2.79 2.175c.725.975 1.09 2.14 1.09 3.5 0 1.36-.345 2.575-1.035 3.64s-1.645 1.905-2.855 2.515c-1.215.61-2.58.92-4.095.92-1.755.005-3.375-.5-4.87-1.51zM233.52 69.81l-3.81 2.755-1.905-2.89 6.835-4.93h2.62V88h-3.74V69.81z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

85
packages/app-store/zapier/static/googleSheets.svg Normal file
View File

@ -0,0 +1,85 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="49px" height="67px" viewBox="0 0 49 67" version="1.1">
<defs>
<path d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z" id="path-1"/>
<path d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z" id="path-3"/>
<path d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z" id="path-5"/>
<linearGradient x1="50.0053945%" y1="8.58610612%" x2="50.0053945%" y2="100.013939%" id="linearGradient-7">
<stop stop-color="#263238" stop-opacity="0.2" offset="0%"/>
<stop stop-color="#263238" stop-opacity="0.02" offset="100%"/>
</linearGradient>
<path d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z" id="path-8"/>
<path d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z" id="path-10"/>
<path d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z" id="path-12"/>
<path d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z" id="path-14"/>
<radialGradient cx="3.16804688%" cy="2.71744318%" fx="3.16804688%" fy="2.71744318%" r="161.248516%" gradientTransform="translate(0.031680,0.027174),scale(1.000000,0.727273),translate(-0.031680,-0.027174)" id="radialGradient-16">
<stop stop-color="#FFFFFF" stop-opacity="0.1" offset="0%"/>
<stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"/>
</radialGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Consumer-Apps-Sheets-Large-VD-R8-" transform="translate(-451.000000, -451.000000)">
<g id="Hero" transform="translate(0.000000, 63.000000)">
<g id="Personal" transform="translate(277.000000, 299.000000)">
<g id="Sheets-icon" transform="translate(174.833333, 89.958333)">
<g id="Group">
<g id="Clipped">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"/>
</mask>
<g id="SVGID_1_"/>
<path d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L36.9791667,10.3541667 L29.5833333,0 Z" id="Path" fill="#0F9D58" fill-rule="nonzero" mask="url(#mask-2)"/>
</g>
<g id="Clipped">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"/>
</mask>
<g id="SVGID_1_"/>
<path d="M11.8333333,31.8020833 L11.8333333,53.25 L35.5,53.25 L35.5,31.8020833 L11.8333333,31.8020833 Z M22.1875,50.2916667 L14.7916667,50.2916667 L14.7916667,46.59375 L22.1875,46.59375 L22.1875,50.2916667 Z M22.1875,44.375 L14.7916667,44.375 L14.7916667,40.6770833 L22.1875,40.6770833 L22.1875,44.375 Z M22.1875,38.4583333 L14.7916667,38.4583333 L14.7916667,34.7604167 L22.1875,34.7604167 L22.1875,38.4583333 Z M32.5416667,50.2916667 L25.1458333,50.2916667 L25.1458333,46.59375 L32.5416667,46.59375 L32.5416667,50.2916667 Z M32.5416667,44.375 L25.1458333,44.375 L25.1458333,40.6770833 L32.5416667,40.6770833 L32.5416667,44.375 Z M32.5416667,38.4583333 L25.1458333,38.4583333 L25.1458333,34.7604167 L32.5416667,34.7604167 L32.5416667,38.4583333 Z" id="Shape" fill="#F1F1F1" fill-rule="nonzero" mask="url(#mask-4)"/>
</g>
<g id="Clipped">
<mask id="mask-6" fill="white">
<use xlink:href="#path-5"/>
</mask>
<g id="SVGID_1_"/>
<polygon id="Path" fill="url(#linearGradient-7)" fill-rule="nonzero" mask="url(#mask-6)" points="30.8813021 16.4520313 47.3333333 32.9003646 47.3333333 17.75"/>
</g>
<g id="Clipped">
<mask id="mask-9" fill="white">
<use xlink:href="#path-8"/>
</mask>
<g id="SVGID_1_"/>
<g id="Group" mask="url(#mask-9)">
<g transform="translate(26.625000, -2.958333)">
<path d="M2.95833333,2.95833333 L2.95833333,16.2708333 C2.95833333,18.7225521 4.94411458,20.7083333 7.39583333,20.7083333 L20.7083333,20.7083333 L2.95833333,2.95833333 Z" id="Path" fill="#87CEAC" fill-rule="nonzero"/>
</g>
</g>
</g>
<g id="Clipped">
<mask id="mask-11" fill="white">
<use xlink:href="#path-10"/>
</mask>
<g id="SVGID_1_"/>
<path d="M4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,4.80729167 C0,2.36666667 1.996875,0.369791667 4.4375,0.369791667 L29.5833333,0.369791667 L29.5833333,0 L4.4375,0 Z" id="Path" fill-opacity="0.2" fill="#FFFFFF" fill-rule="nonzero" mask="url(#mask-11)"/>
</g>
<g id="Clipped">
<mask id="mask-13" fill="white">
<use xlink:href="#path-12"/>
</mask>
<g id="SVGID_1_"/>
<path d="M42.8958333,64.7135417 L4.4375,64.7135417 C1.996875,64.7135417 0,62.7166667 0,60.2760417 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,60.2760417 C47.3333333,62.7166667 45.3364583,64.7135417 42.8958333,64.7135417 Z" id="Path" fill-opacity="0.2" fill="#263238" fill-rule="nonzero" mask="url(#mask-13)"/>
</g>
<g id="Clipped">
<mask id="mask-15" fill="white">
<use xlink:href="#path-14"/>
</mask>
<g id="SVGID_1_"/>
<path d="M34.0208333,17.75 C31.5691146,17.75 29.5833333,15.7642188 29.5833333,13.3125 L29.5833333,13.6822917 C29.5833333,16.1340104 31.5691146,18.1197917 34.0208333,18.1197917 L47.3333333,18.1197917 L47.3333333,17.75 L34.0208333,17.75 Z" id="Path" fill-opacity="0.1" fill="#263238" fill-rule="nonzero" mask="url(#mask-15)"/>
</g>
</g>
<path d="M29.5833333,0 L4.4375,0 C1.996875,0 0,1.996875 0,4.4375 L0,60.6458333 C0,63.0864583 1.996875,65.0833333 4.4375,65.0833333 L42.8958333,65.0833333 C45.3364583,65.0833333 47.3333333,63.0864583 47.3333333,60.6458333 L47.3333333,17.75 L29.5833333,0 Z" id="Path" fill="url(#radialGradient-16)" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

24
packages/app-store/zapier/static/salesforce.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

8
packages/app-store/zapier/static/todoist.svg Normal file
View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256px" height="256px" viewBox="0 0 256 256" version="1.1" preserveAspectRatio="xMidYMid">
<g>
<path d="M224.001997,0 L31.9980026,0 C14.3579381,0.0394964443 0.0614809418,14.336846 0,32 L0,224 C0,241.6 14.3971038,256 31.9980026,256 L224.001997,256 C241.602896,256 256,241.6 256,224 L256,32 C256,14.4 241.602896,0 224.001997,0" fill="#E44332"/>
<path d="M54.132778,120.802491 C58.5960224,118.196275 154.476075,62.477451 156.667847,61.1862981 C158.859619,59.9110855 158.97917,55.9898065 156.508446,54.5711324 C154.053661,53.1604284 149.391165,50.4824817 147.661658,49.4543415 C145.192242,48.0957707 142.191169,48.132074 139.755339,49.5499825 C138.527947,50.2672896 56.6035026,97.8486625 53.8697654,99.4107981 C50.5781227,101.291737 46.5372925,101.323617 43.2695601,99.4107981 L0,74.0181257 L0,95.6011002 C10.5205046,101.801822 36.7181549,117.200015 43.062338,120.826401 C46.8481256,122.978322 50.4745117,122.930502 54.1407481,120.802491" fill="#FFFFFF"/>
<path d="M54.132778,161.609296 C58.5960224,159.00308 154.476075,103.284257 156.667847,101.993104 C158.859619,100.717891 158.97917,96.7966121 156.508446,95.377938 C154.053661,93.9672339 149.391165,91.2892873 147.661658,90.2611471 C145.192242,88.9025763 142.191169,88.9388796 139.755339,90.3567881 C138.527947,91.0740952 56.6035026,138.655468 53.8697654,140.217604 C50.5781227,142.098542 46.5372925,142.130423 43.2695601,140.217604 L0,114.824931 L0,136.407906 C10.5205046,142.608627 36.7181549,158.00682 43.062338,161.633206 C46.8481256,163.785128 50.4745117,163.737307 54.1407481,161.609296" fill="#FFFFFF"/>
<path d="M54.132778,204.966527 C58.5960224,202.360311 154.476075,146.641487 156.667847,145.350335 C158.859619,144.075122 158.97917,140.153843 156.508446,138.735169 C154.053661,137.324465 149.391165,134.646518 147.661658,133.618378 C145.192242,132.259807 142.191169,132.29611 139.755339,133.714019 C138.527947,134.431326 56.6035026,182.012699 53.8697654,183.574835 C50.5781227,185.455773 46.5372925,185.487654 43.2695601,183.574835 L0,158.182162 L0,179.765137 C10.5205046,185.965858 36.7181549,201.364051 43.062338,204.990437 C46.8481256,207.142359 50.4745117,207.094538 54.1407481,204.966527" fill="#FFFFFF"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

10
packages/types/App.d.ts vendored
View File

@ -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;

12
packages/ui/v2/core/Shell.tsx
View File

@ -116,7 +116,7 @@ export function ShellSubHeading(props: {
</h2>
{props.subtitle && <p className="text-sm text-neutral-500 ltr:mr-4">{props.subtitle}</p>}
</div>
{props.actions && <div className="flex-shrink-0">{props.actions}</div>}
{props.actions && <div className="mt-2 flex-shrink-0 sm:mt-0">{props.actions}</div>}
</header>
);
}
@ -657,7 +657,7 @@ const MobileNavigationMoreItem: React.FC<{
<a className="flex items-center justify-between p-5 hover:bg-gray-100">
<span className="flex items-center font-semibold text-gray-700 ">
{item.icon && (
<item.icon className="h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3" aria-hidden="true" />
<item.icon className="h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3" aria-hidden="true" />
)}
{isLocaleReady ? t(item.name) : <SkeletonText />}
</span>
@ -712,13 +712,13 @@ function SideBar() {
<button
color="minimal"
onClick={() => window.history.back()}
className="desktop-only group flex text-sm font-medium text-neutral-500 hover:text-neutral-900">
className="desktop-only group flex text-sm font-medium text-neutral-500 hover:text-neutral-900">
<Icon.FiArrowLeft className="h-4 w-4 flex-shrink-0 text-neutral-500 group-hover:text-neutral-900" />
</button>
<button
color="minimal"
onClick={() => window.history.forward()}
className="desktop-only group flex text-sm font-medium text-neutral-500 hover:text-neutral-900">
className="desktop-only group flex text-sm font-medium text-neutral-500 hover:text-neutral-900">
<Icon.FiArrowRight className="h-4 w-4 flex-shrink-0 text-neutral-500 group-hover:text-neutral-900" />
</button>
<KBarTrigger />
@ -739,7 +739,7 @@ function SideBar() {
{isCalcom && <Tips />}
{/* Save it for next preview version
<div className="mb-4 hidden lg:block">
<div className="hidden mb-4 lg:block">
<UserV2OptInBanner />
</div> */}
@ -781,7 +781,7 @@ export function ShellMain(props: LayoutProps) {
{props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
<div className="w-full ltr:mr-4 rtl:ml-4 sm:block">
{props.heading && (
<h1 className="font-cal mb-1 text-xl font-bold tracking-wide text-black">
<h1 className="font-cal mb-1 text-xl font-bold tracking-wide text-black">
{!isLocaleReady ? <SkeletonText invisible /> : props.heading}
</h1>
)}

4
packages/ui/v2/core/layouts/InstalledAppsLayout.tsx
View File

@ -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,
},