${t( "schedule_a_meeting" )}

import { ClipboardIcon } from "@heroicons/react/solid"; import Image from "next/image"; import React, { useEffect, useState } from "react"; import { JSONObject } from "superjson/dist/types"; import showToast from "@calcom/lib/notification"; import { Alert } from "@calcom/ui/Alert"; import Button from "@calcom/ui/Button"; import { QueryCell } from "@lib/QueryCell"; import classNames from "@lib/classNames"; import { HttpError } from "@lib/core/http/error"; import { useLocale } from "@lib/hooks/useLocale"; import { trpc } from "@lib/trpc"; import { ClientSuspense } from "@components/ClientSuspense"; import { List, ListItem, ListItemText, ListItemTitle } from "@components/List"; import Loader from "@components/Loader"; import Shell, { ShellSubHeading } from "@components/Shell"; import { CalendarListContainer } from "@components/integrations/CalendarListContainer"; import ConnectIntegration from "@components/integrations/ConnectIntegrations"; import DisconnectIntegration from "@components/integrations/DisconnectIntegration"; import IntegrationListItem from "@components/integrations/IntegrationListItem"; import SubHeadingTitleWithConnections from "@components/integrations/SubHeadingTitleWithConnections"; import WebhookListContainer from "@components/webhook/WebhookListContainer"; function IframeEmbedContainer() { const { t } = useLocale(); // doesn't need suspense as it should already be loaded const user = trpc.useQuery(["viewer.me"]).data; const iframeTemplate = ``; const htmlTemplate = `${t( "schedule_a_meeting" )}${iframeTemplate}`; return ( <>

{t("standard_iframe")} {t("embed_your_calendar")}

{t("responsive_fullscreen_iframe")} A fullscreen scheduling experience on your website

); } function ConnectOrDisconnectIntegrationButton(props: { // credentialIds: number[]; type: string; installed: boolean; }) { const { t } = useLocale(); const [credentialId] = props.credentialIds; const utils = trpc.useContext(); const handleOpenChange = () => { utils.invalidateQueries(["viewer.integrations"]); }; if (credentialId) { return ( ( )} onOpenChange={handleOpenChange} /> ); } if (!props.installed) { return (

); } /** We don't need to "Connect", just show that it's installed */ if (["daily_video", "huddle01_video", "jitsi_video"].includes(props.type)) { return (

{t("installed")}

); } return ( ( )} onOpenChange={handleOpenChange} /> ); } function IntegrationsContainer() { const { t } = useLocale(); const query = trpc.useQuery(["viewer.integrations"], { suspense: true }); return ( ( <> } /> {data.conferencing.items.map((item) => ( } /> ))} } /> {data.payment.items.map((item) => ( } /> ))} )}> ); } function Web3Container() { const { t } = useLocale(); return ( <>

MetaMask ( Read more ) {t("only_book_people_and_allow")}

); } function Web3ConnectBtn() { const { t } = useLocale(); const utils = trpc.useContext(); const [connectionBtn, setConnection] = useState(false); const result = trpc.useQuery(["viewer.web3Integration"]); const mutation = trpc.useMutation("viewer.enableOrDisableWeb3", { onSuccess: async (result) => { const { key = {} } = result as JSONObject; if ((key as JSONObject).isWeb3Active) { showToast(t("web3_metamask_added"), "success"); } else { showToast(t("web3_metamask_disconnected"), "success"); } }, onError: (err) => { if (err instanceof HttpError) { const message = `${err.statusCode}: ${err.message}`; showToast(message, "error"); } }, }); useEffect(() => { if (result.data) { setConnection(result.data.isWeb3Active as boolean); } }, [result]); const enableOrDisableWeb3 = async (mutation: any) => { const result = await mutation.mutateAsync({}); setConnection(result.key.isWeb3Active); utils.invalidateQueries("viewer.web3Integration"); }; return ( ); } export default function IntegrationsPage() { const { t } = useLocale(); return ( }> ); }