Query parameter hideEventTypeDetails=1 is ignored, when appended to the URI

omoustaouda commented 3 days ago

Issue Summary

Example of the URL: https://cal.com/my-username/my-event-type?hideEventTypeDetails=1

At the moment, the parameter hideEventTypeDetails is completely ignored. Not sure if it's a bug report or a feature request. In both cases, I think it would increase usability. : )

Background - my intention: I wish to embed the cal.com booking page within a Tally form.

Steps to Reproduce

Go to https://cal.com/my-username/my-event-type?hideEventTypeDetails=1 (replace my-username/my-event-type with a real event)
Notice that the event details are still visible, even with hideEventTypeDetails=1
Resize the window, to the size of a mobile phone, and see how the event details are taking a major portion of the space visible.

How is this affecting me:

The event details are appearing on the top, covering the actual calendar, and adding confusion. To access the calendar, the user needs to realize that the details are scrollable, and scroll.

Actual Results

The event details are still shown, by event details I mean:

profile picture of the host
full name of the host
event name
duration
location
timezone

Expected Results

The event details should not be shown, when hideEventTypeDetails=1 is added to the URL

Technical details

I see that it would be possible to embed it trough JS code, but in many cases, the only way allowed to embed content is via URL. This would be the JS option, that it's not viable for me.

  Cal("ui", {"styles":{"branding":{"brandColor":"#000000"}},"hideEventTypeDetails":true,"layout":"month_view"});

Calendly allows to do the same via URL, using this parameter hide_event_type_details=1 (only on Calendly)

Evidence

Simply open any event from a real calendar, and add the hideEventTypeDetails query param.

Thank you!

omoustaouda commented 3 days ago

Code question: If a PR make sense, would this be the right place to implement the check?

https://github.com/calcom/cal.com/blob/ae79154b83d6c73763185565629a4fe98a4370fc/packages/features/bookings/Booker/components/hooks/useBookerLayout.ts#L77

and basically check if the hideEventTypeDetails param is present and true in the URI, if yes, then set hideEventTypeDetails=true.

dosubot[bot] commented 3 days ago

Hello @omoustaouda! I'm here to help you with any bugs, questions, or contributions. Let me know how I can assist you while you wait for a human maintainer.

Yes, implementing a check for the hideEventTypeDetails parameter in the URI and setting hideEventTypeDetails=true in the code is the right approach to ensure that event details are hidden when the parameter is present. The code already includes a section that handles this:

if (only === "all" || only === "hideEventTypeDetails") {
  const identifier = "hideEventTypeDetails";
  Cal("init", identifier, {
    debug: true,
    origin: origin,
  });

  Cal.ns.hideEventTypeDetails(
    [
      "inline",
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      //@ts-ignore
      {
        elementOrSelector: `#cal-booking-place-${identifier} .place`,
        calLink: "free/30min",
        config: {
          iframeAttrs: {
            id: `cal-booking-place-${identifier}-iframe`,
          },
        },
      },
    ],
    [
      "ui",
      {
        hideEventTypeDetails: true,
      },
    ]
  );
}

This code checks if the only parameter in the URI is set to all or hideEventTypeDetails. If so, it initializes the hideEventTypeDetails namespace and sets the hideEventTypeDetails property to true in the ui configuration ^[1].

To address the issue you mentioned, you should ensure that the hideEventTypeDetails parameter is correctly parsed from the URI and used in the configuration. You can add a similar check in the useBookerLayout hook to handle this parameter. Here is an example of how you might implement this:

import { useRouter } from 'next/router';

const useBookerLayout = () => {
  const router = useRouter();
  const { hideEventTypeDetails } = router.query;

  const shouldHideEventTypeDetails = hideEventTypeDetails === '1';

  // Use shouldHideEventTypeDetails in your layout logic
  // Example:
  const layoutConfig = {
    hideEventTypeDetails: shouldHideEventTypeDetails,
    // other layout settings
  };

  // rest of your hook logic
};

This way, the hideEventTypeDetails parameter will be checked and used to configure the layout accordingly.

To continue talking to Dosu, mention @dosu.

calcom / cal.com