b3430c8efc
* refactor: move Segment, BookerLayoutSelector, CreateLicenseKeyForm from packages/features to apps/web/modules Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * fix: update relative imports to absolute paths in moved files Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * refactor: move useBookingLocation and blocklist components from packages/features to apps/web/modules Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * refactor: move EmbedTabs and embed hooks from packages/features to apps/web/modules Co-Authored-By: benny@cal.com <sldisek783@gmail.com> * fix * migrate useBookerUrl * migrate embed tabs * fix * fix * fix * mv ThemeLabel * mv settings headers to webn * update imports * clean up --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
81 lines
3.1 KiB
TypeScript
81 lines
3.1 KiB
TypeScript
import type { ComponentProps } from "react";
|
|
|
|
import { EmbedDialog, EmbedButton } from "@calcom/web/modules/embed/components/Embed";
|
|
import { IS_CALCOM } from "@calcom/lib/constants";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { trpc } from "@calcom/trpc/react";
|
|
|
|
import { tabs } from "./EmbedTabs";
|
|
import { useEmbedTypes } from "../hooks/useEmbedTypes";
|
|
|
|
export const RoutingFormEmbedDialog = () => {
|
|
const types = useEmbedTypes();
|
|
const { t } = useLocale();
|
|
const { data: user } = trpc.viewer.me.get.useQuery();
|
|
const routingFormTypes = types.filter((type) => type.type !== "email");
|
|
|
|
// Add the headless option specifically for routing forms
|
|
const headlessType = {
|
|
title: t("use_my_own_form"),
|
|
subtitle: t("use_our_headless_routing_api"),
|
|
type: "headless",
|
|
illustration: (
|
|
<svg
|
|
width="100%"
|
|
height="100%"
|
|
className="rounded-md"
|
|
viewBox="0 0 308 265"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M0 1.99999C0 0.895423 0.895431 0 2 0H306C307.105 0 308 0.895431 308 2V263C308 264.105 307.105 265 306 265H2C0.895431 265 0 264.105 0 263V1.99999Z"
|
|
fill="white"
|
|
/>
|
|
<rect x="24" width="260" height="38.5" rx="6" fill="#F3F4F6" />
|
|
<rect x="24" y="50.5" width="139" height="163" rx="6" fill="#F8F8F8" />
|
|
<g opacity="0.8">
|
|
<rect x="42" y="74" width="20" height="20" rx="2" fill="#374151" />
|
|
<path
|
|
d="M48 81L52 85L56 81"
|
|
stroke="white"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</g>
|
|
<rect x="48" y="106" width="80" height="8" rx="6" fill="#F3F4F6" />
|
|
<rect x="48" y="118" width="48" height="4" rx="6" fill="#F3F4F6" />
|
|
<rect x="48" y="130" width="64" height="4" rx="6" fill="#F3F4F6" />
|
|
<rect x="48" y="142" width="32" height="4" rx="6" fill="#F3F4F6" />
|
|
<rect x="48" y="160" width="72" height="6" rx="3" fill="#292929" />
|
|
<rect x="176" y="50.5" width="108" height="164" rx="6" fill="#F3F4F6" />
|
|
<text x="220" y="120" textAnchor="middle" className="fill-gray-400" fontSize="8">
|
|
API
|
|
</text>
|
|
<rect x="200" y="125" width="40" height="2" rx="1" fill="#9CA3AF" />
|
|
<rect x="200" y="130" width="32" height="2" rx="1" fill="#9CA3AF" />
|
|
<rect x="200" y="135" width="36" height="2" rx="1" fill="#9CA3AF" />
|
|
<rect x="24" y="226.5" width="260" height="38.5" rx="6" fill="#F3F4F6" />
|
|
</svg>
|
|
),
|
|
};
|
|
|
|
const routingFormTypesWithHeadless = IS_CALCOM
|
|
? [...routingFormTypes, headlessType]
|
|
: routingFormTypes;
|
|
|
|
return (
|
|
<EmbedDialog
|
|
types={routingFormTypesWithHeadless}
|
|
tabs={tabs}
|
|
eventTypeHideOptionDisabled={true}
|
|
defaultBrandColor={user ? { brandColor: user.brandColor, darkBrandColor: user.darkBrandColor } : null}
|
|
noQueryParamMode={true}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const RoutingFormEmbedButton = (props: ComponentProps<typeof EmbedButton>) => {
|
|
return <EmbedButton {...props} noQueryParamMode={true} />;
|
|
};
|