fix: Email Embed for team event types (#13990)

* fix: embeds for team event types

* chore: remove unused

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -205,6 +205,7 @@ function EventTypeSingleLayout({
   activeWebhooksNumber,
 }: Props) {
   const { t } = useLocale();
+
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
   const hasPermsToDelete =

apps/web/playwright/teams.e2e.ts

@@ -275,6 +275,46 @@ testBothFutureAndLegacyRoutes.describe("Teams - NonOrg", (routeVariant) => {
     await expect(page.locator('[data-testid="you-cannot-see-team-members"]')).toBeVisible();
     await expect(page.locator('[data-testid="team-members-container"]')).toBeHidden();
   });
+  test("Email Embeds slots are loading for team event types", async ({ page, users }) => {
+    const teamMatesObj = [
+      { name: "teammate-1" },
+      { name: "teammate-2" },
+      { name: "teammate-3" },
+      { name: "teammate-4" },
+    ];
+
+    const owner = await users.create(
+      { username: "pro-user", name: "pro-user" },
+      {
+        hasTeam: true,
+        teammates: teamMatesObj,
+        schedulingType: SchedulingType.COLLECTIVE,
+      }
+    );
+
+    await owner.apiLogin();
+    const { team } = await owner.getFirstTeamMembership();
+    const {
+      title: teamEventTitle,
+      slug: teamEventSlug,
+      id: teamEventId,
+    } = await owner.getFirstTeamEvent(team.id);
+
+    await page.goto("/event-types");
+
+    await page.getByTestId(`event-type-options-${teamEventId}`).first().click();
+    await page.getByTestId("embed").click();
+    await page.getByTestId("email").click();
+    await page.getByTestId("incrementMonth").click();
+
+    await page.waitForLoadState("networkidle");
+
+    await expect(page.getByTestId("no-slots-available")).toBeHidden();
+
+    // Check Team Url
+    const availableTimesUrl = await page.getByTestId("see_all_available_times").getAttribute("href");
+    await expect(availableTimesUrl).toContain(`/team/${team.slug}/${teamEventSlug}`);
+  });
 
   todo("Create a Round Robin with different leastRecentlyBooked hosts");
   todo("Reschedule a Collective EventType booking");

packages/features/bookings/components/AvailableTimes.tsx

@@ -194,7 +194,9 @@ export const AvailableTimes = ({
     <div className={classNames("text-default flex flex-col", className)}>
       <div className="h-full pb-4">
         {!slots.length && (
-          <div className="bg-subtle border-subtle flex h-full flex-col items-center rounded-md border p-6 dark:bg-transparent">
+          <div
+            data-testId="no-slots-available"
+            className="bg-subtle border-subtle flex h-full flex-col items-center rounded-md border p-6 dark:bg-transparent">
             <CalendarX2 className="text-muted mb-2 h-4 w-4" />
             <p className={classNames("text-muted", showTimeFormatToggle ? "-mt-1 text-lg" : "text-sm")}>
               {t("all_booked_today")}

packages/features/embed/Embed.tsx

@@ -53,7 +53,15 @@ const enum Theme {
   dark = "dark",
 }
 
-const queryParamsForDialog = ["embedType", "embedTabName", "embedUrl", "eventId"];
+const queryParamsForDialog = [
+  "embedType",
+  "embedTabName",
+  "embedUrl",
+  "eventId",
+  "namespace",
+  "date",
+  "month",
+];
 
 function useRouterHelpers() {
   const router = useRouter();
@@ -131,10 +139,12 @@ const EmailEmbed = ({
   eventType,
   username,
   orgSlug,
+  isTeamEvent,
 }: {
   eventType?: EventType;
   username: string;
   orgSlug?: string;
+  isTeamEvent: boolean;
 }) => {
   const { t, i18n } = useLocale();
 
@@ -145,6 +155,8 @@ const EmailEmbed = ({
     eventSlug: eventType?.slug ?? "",
     eventId: eventType?.id,
     layout: BookerLayouts.MONTH_VIEW,
+    org: orgSlug,
+    isTeamEvent,
   });
 
   const [month, selectedDate, selectedDatesAndTimes] = useBookerStore(
@@ -301,6 +313,7 @@ const EmailEmbedPreview = ({
   username,
   month,
   selectedDateAndTime,
+  calLink,
 }: {
   eventType: EventType;
   timezone?: string;
@@ -308,9 +321,11 @@ const EmailEmbedPreview = ({
   username?: string;
   month?: string;
   selectedDateAndTime: { [key: string]: string[] };
+  calLink: string;
 }) => {
   const { t } = useLocale();
   const [timeFormat, timezone] = useTimePreferences((state) => [state.timeFormat, state.timezone]);
+
   if (!eventType) {
     return null;
   }
@@ -471,7 +486,8 @@ const EmailEmbedPreview = ({
               <div style={{ marginTop: "13px" }}>
                 <a
                   className="more"
-                  href={`${WEBSITE_URL}/${username}/${eventType.slug}`}
+                  data-testid="see_all_available_times"
+                  href={`${eventType.bookerUrl}/${calLink}`}
                   style={{
                     textDecoration: "none",
                     cursor: "pointer",
@@ -537,6 +553,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
     { enabled: !Number.isNaN(parsedEventId) && embedType === "email", refetchOnWindowFocus: false }
   );
 
+  const teamSlug = !!eventTypeData?.team ? eventTypeData.team.slug : null;
+
   const s = (href: string) => {
     const _searchParams = new URLSearchParams(searchParams ?? undefined);
     const [a, b] = href.split("=");
@@ -721,8 +739,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
           {eventTypeData?.eventType && embedType === "email" ? (
             <EmailEmbed
               eventType={eventTypeData?.eventType}
-              username={data?.user.username as string}
+              username={teamSlug ?? (data?.user.username as string)}
               orgSlug={data?.user?.org?.slug}
+              isTeamEvent={!!teamSlug}
             />
           ) : (
             <div className="flex flex-col">
@@ -1067,9 +1086,10 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
               <div key={tab.href} className={classNames("flex flex-grow flex-col")}>
                 <div className="flex h-[55vh] flex-grow flex-col">
                   <EmailEmbedPreview
+                    calLink={calLink}
                     eventType={eventTypeData?.eventType}
                     emailContentRef={emailContentRef}
-                    username={data?.user.username as string}
+                    username={teamSlug ?? (data?.user.username as string)}
                     month={month as string}
                     selectedDateAndTime={
                       selectedDatesAndTimes
@@ -1149,6 +1169,7 @@ export const EmbedButton = <T extends React.ElementType>({
 }: EmbedButtonProps<T> & React.ComponentPropsWithoutRef<T>) => {
   const { goto } = useRouterHelpers();
   className = classNames("hidden lg:inline-flex", className);
+
   const openEmbedModal = () => {
     goto({
       dialog: "embed",