How do I listen to events in calcom React embed v1.0.2?

[ademidun]

How do I listen to events in calcom React embed v1.0.2?

THe docs show the following example which isn't possible in React

Cal("on", {
    action: "ANY_ACTION_NAME",
    callback: (e)=>{
      // `data` is properties for the event.
      // `type` is the name of the action(You can also call it type of the action.) This would be same as "ANY_ACTION_NAME" except when ANY_ACTION_NAME="*" which listens to all the events.
      // `namespace` tells you the Cal namespace for which the event is fired/
      const {data, type, namespace} = e.detail;
    }
  })

The codesandbox snippet shows the following which I can;t use because I am not using the latest calcom but instead using "@calcom/embed-react": "^1.0.2", which is compatible with React 17

const Cal = await getCalApi();
      Cal("on", {
        action: "*",
        callback: (e) => {
          console.log(e.detail);
        }
      });

[PeerRich]

@hariombalhara can you help?

[ntcho]

import { getCalApi } from "@calcom/embed-react";

import { useEffect } from "react";

export default function Component() {
  useEffect(() => {
    getCalApi().then((cal) => {
      cal("on", {
        action: "bookingSuccessful",
        callback: (e) => {
          // `data` is properties for the event.
          // `type` is the name of the action
          // `namespace` is the Cal namespace for which the event is fired

          const { data, type, namespace } = e.detail;

          console.log(e);
        },
      });
    });
  });

  ...
}

I can confirm that this works with "@calcom/embed-react": "^1.3.0".

Adding this use case in the docs would be helpful too!