diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index 8fe95e25c5..1935ad8d03 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -853,6 +853,11 @@ "copy_safe_api_key": "Copy this API key and save it somewhere safe. If you lose this key you have to generate a new one.", "zapier_setup_instructions": "<0>Log into your Zapier account and create a new Zap.<1>Select Cal.com as your Trigger app. Also choose a Trigger event.<2>Choose your account and then enter your Unique API Key.<3>Test your Trigger.<4>You're set!", "install_zapier_app": "Please first install the Zapier App in the app store.", + "connect_apple_server": "Connect to Apple Server", + "connect_caldav_server": "Connect to CalDav Server", + "calendar_url": "Calendar URL", + "apple_server_generate_password": "Generate an app specific password to use with Cal.com at", + "credentials_stored_encrypted": "Your credentials will be stored and encrypted.", "go_to_app_store": "Go to App Store", "calendar_error": "Something went wrong, try reconnecting your calendar with all necessary permissions", "set_your_phone_number": "Set a phone number for the meeting", diff --git a/packages/app-store/_pages/setup/_getStaticProps.tsx b/packages/app-store/_pages/setup/_getStaticProps.tsx index f7f497246f..c16f1537bf 100644 --- a/packages/app-store/_pages/setup/_getStaticProps.tsx +++ b/packages/app-store/_pages/setup/_getStaticProps.tsx @@ -5,6 +5,9 @@ export const AppSetupPageMap = { "apple-calendar": { getStaticProps: null, }, + "caldav-calendar": { + getStaticProps: null, + }, }; export const getStaticProps = async (ctx: GetStaticPropsContext) => { diff --git a/packages/app-store/_pages/setup/index.tsx b/packages/app-store/_pages/setup/index.tsx index 7229217326..d5abf0dc12 100644 --- a/packages/app-store/_pages/setup/index.tsx +++ b/packages/app-store/_pages/setup/index.tsx @@ -4,6 +4,7 @@ import { DynamicComponent } from "../../_components/DynamicComponent"; export const AppSetupMap = { "apple-calendar": dynamic(() => import("../../applecalendar/pages/setup")), + "caldav-calendar": dynamic(() => import("../../caldavcalendar/pages/setup")), zapier: dynamic(() => import("../../zapier/pages/setup")), }; diff --git a/packages/app-store/applecalendar/pages/setup/index.tsx b/packages/app-store/applecalendar/pages/setup/index.tsx index f850f92bbd..f34b47f55f 100644 --- a/packages/app-store/applecalendar/pages/setup/index.tsx +++ b/packages/app-store/applecalendar/pages/setup/index.tsx @@ -33,10 +33,10 @@ export default function AppleCalendarSetup() { />
-

Connect to Apple Server

+

{t("connect_apple_server")}

- Generate an app specific password to use with Cal.com at{" "} + {t("apple_server_generate_password")}{" "} https://appleid.apple.com/account/manage - . Your credentials will be stored and encrypted. + . {t("credentials_stored_encrypted")}
{errorMessage && } -
+
+
diff --git a/packages/app-store/caldavcalendar/api/add.ts b/packages/app-store/caldavcalendar/api/add.ts index 7318399997..314380cc57 100644 --- a/packages/app-store/caldavcalendar/api/add.ts +++ b/packages/app-store/caldavcalendar/api/add.ts @@ -44,6 +44,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) return res.status(500).json({ message: "Could not add this caldav account" }); } - return res.status(200).json({}); + return res.status(200).json({ url: "/apps/installed" }); + } + + if (req.method === "GET") { + return res.status(200).json({ url: "/apps/caldav-calendar/setup" }); } } diff --git a/packages/app-store/caldavcalendar/components/AddIntegration.tsx b/packages/app-store/caldavcalendar/components/AddIntegration.tsx deleted file mode 100644 index d6a73b070a..0000000000 --- a/packages/app-store/caldavcalendar/components/AddIntegration.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { useState } from "react"; -import { useForm } from "react-hook-form"; - -import { Alert } from "@calcom/ui/Alert"; -import Button from "@calcom/ui/Button"; -import { - Dialog, - DialogClose, - DialogContent, - DialogFooter, - DialogHeader, - DialogProps, -} from "@calcom/ui/Dialog"; -import { Form, TextField } from "@calcom/ui/form/fields"; - -export const ADD_INTEGRATION_FORM_TITLE = "addCalDav"; - -export type AddIntegrationRequest = { - url: string; - username: string; - password: string; -}; - -export function AddIntegrationModal(props: DialogProps) { - const form = useForm({ - defaultValues: { - url: "", - username: "", - password: "", - }, - }); - const [errorMessage, setErrorMessage] = useState(""); - return ( - - - - -
{ - setErrorMessage(""); - const res = await fetch("/api/integrations/caldavcalendar/add", { - method: "POST", - body: JSON.stringify(values), - headers: { - "Content-Type": "application/json", - }, - }); - const json = await res.json(); - if (!res.ok) { - setErrorMessage(json?.message || "Something went wrong"); - } else { - props.onOpenChange?.(false); - } - }}> -
- - - -
- - {errorMessage && } - - { - props.onOpenChange?.(false); - }} - asChild> - - - - - - -
- - ); -} - -export default AddIntegrationModal; diff --git a/packages/app-store/caldavcalendar/components/InstallAppButton.tsx b/packages/app-store/caldavcalendar/components/InstallAppButton.tsx index 3abb5da049..5cff6a6206 100644 --- a/packages/app-store/caldavcalendar/components/InstallAppButton.tsx +++ b/packages/app-store/caldavcalendar/components/InstallAppButton.tsx @@ -1,20 +1,18 @@ -import { useState } from "react"; +import type { InstallAppButtonProps } from "@calcom/app-store/types"; -import { InstallAppButtonProps } from "../../types"; -import AddIntegration from "./AddIntegration"; +import useAddAppMutation from "../../_utils/useAddAppMutation"; export default function InstallAppButton(props: InstallAppButtonProps) { - const [isModalOpen, setIsModalOpen] = useState(false); + const mutation = useAddAppMutation("caldav_calendar"); return ( <> {props.render({ onClick() { - setIsModalOpen(true); + mutation.mutate(""); }, - disabled: isModalOpen, + loading: mutation.isLoading, })} - ); } diff --git a/packages/app-store/caldavcalendar/components/index.ts b/packages/app-store/caldavcalendar/components/index.ts index 0cc9f478b3..0d6008d4ca 100644 --- a/packages/app-store/caldavcalendar/components/index.ts +++ b/packages/app-store/caldavcalendar/components/index.ts @@ -1,2 +1 @@ -export { default as AddIntegration } from "./AddIntegration"; export { default as InstallAppButton } from "./InstallAppButton"; diff --git a/packages/app-store/caldavcalendar/pages/setup/index.tsx b/packages/app-store/caldavcalendar/pages/setup/index.tsx new file mode 100644 index 0000000000..0d48187c13 --- /dev/null +++ b/packages/app-store/caldavcalendar/pages/setup/index.tsx @@ -0,0 +1,100 @@ +import { useRouter } from "next/router"; +import { useState } from "react"; +import { useForm } from "react-hook-form"; +import { Toaster } from "react-hot-toast"; + +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { Alert } from "@calcom/ui/Alert"; +import Button from "@calcom/ui/Button"; +import { Form, TextField } from "@calcom/ui/form/fields"; + +export default function AppleCalendarSetup() { + const { t } = useLocale(); + const router = useRouter(); + const form = useForm({ + defaultValues: { + url: "", + username: "", + password: "", + }, + }); + + const [errorMessage, setErrorMessage] = useState(""); + + return ( +
+
+
+
+ {/* eslint-disable @next/next/no-img-element */} + CalDav Calendar +
+
+

{t("connect_caldav_server")}

+
{t("credentials_stored_encrypted")}
+
+
{ + setErrorMessage(""); + const res = await fetch("/api/integrations/caldavcalendar/add", { + method: "POST", + body: JSON.stringify(values), + headers: { + "Content-Type": "application/json", + }, + }); + const json = await res.json(); + if (!res.ok) { + setErrorMessage(json?.message || t("something_went_wrong")); + } else { + router.push(json.url); + } + }}> +
+ + + +
+ + {errorMessage && } +
+ + +
+ +
+
+
+
+ +
+ ); +}