Eunjae LeeandGitHub
dd7f108f08
* Revert "fix: revert bookings redesign (#25172)"
This reverts commit 1f102bf3b4.
* add bookings-v3 feature flag
* put things behind a feature flag
* remove no longer needed test
* revert e2e tests
* put back description
* revert AvatarGroup
* apply feedback
* remove "view" booking action
* remove Alert (When the bookings query errors, this branch now renders only the alert and skips the data-table filter/segment controls. Those controls moved into BookingsList, so in error states users can no longer clear or tweak filters to recover from the failure, effectively trapping them behind the alert.)
* address feedback
* revert useMediaQuery
67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import type { BookingStatus } from "@calcom/prisma/enums";
|
|
import classNames from "@calcom/ui/classNames";
|
|
import { Button } from "@calcom/ui/components/button";
|
|
|
|
import { useJoinableLocation } from "./useJoinableLocation";
|
|
|
|
interface JoinMeetingButtonProps {
|
|
location: string | null;
|
|
metadata?: unknown;
|
|
bookingStatus: BookingStatus;
|
|
size?: "sm" | "base" | "lg";
|
|
color?: "primary" | "secondary" | "minimal" | "destructive";
|
|
className?: string;
|
|
onClick?: (e: React.MouseEvent) => void;
|
|
}
|
|
|
|
export function JoinMeetingButton({
|
|
location,
|
|
metadata,
|
|
bookingStatus,
|
|
size = "base",
|
|
color = "secondary",
|
|
className,
|
|
onClick,
|
|
}: JoinMeetingButtonProps) {
|
|
const { t } = useLocale();
|
|
const { isJoinable, locationToDisplay, provider } = useJoinableLocation({
|
|
location,
|
|
metadata,
|
|
bookingStatus,
|
|
t,
|
|
});
|
|
|
|
if (!isJoinable || !locationToDisplay) {
|
|
return null;
|
|
}
|
|
|
|
const handleClick = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
onClick?.(e);
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
color={color}
|
|
size={size}
|
|
href={locationToDisplay}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={classNames("flex items-center gap-2", className)}
|
|
onClick={handleClick}>
|
|
{provider?.iconUrl && (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={provider.iconUrl}
|
|
className="h-4 w-4 flex-shrink-0 rounded-sm"
|
|
alt={`${provider.label} logo`}
|
|
/>
|
|
)}
|
|
{provider?.label ? t("join_event_location", { eventLocationType: provider.label }) : t("join_meeting")}
|
|
</Button>
|
|
);
|
|
}
|