fix(cal.com): remove the event listener when scheduling component unm…

…ounts (#161) - update cal.com library - By properly removing the event listener when the component unmounts or dependencies change, we prevent multiple listeners from being active simultaneously, which was causing the duplicate event triggers. - In the cleanup function inside useEffect, we call cal('off', { action: 'bookingSuccessful', callback: bookingSuccessfulCallback }) to remove the event listener.
awell-health · Oct 17, 2024 · f4ca89a · f4ca89a
1 parent 9542685
commit f4ca89a
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 48 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@awell-health/ui-library",
-  "version": "0.1.70",
+  "version": "0.1.71",
   "description": "UI components to integrate with Awell Health",
   "repository": {
     "type": "git",
@@ -44,7 +44,7 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@calcom/embed-react": "^1.0.10",
+    "@calcom/embed-react": "^1.5.1",
     "@heroicons/react": "^2.1.3",
     "cloudinary-core": "^2.13.0",
     "date-fns": "^2.29.1",

diff --git a/src/atoms/scheduling/cal.com/CalDotComScheduling.tsx b/src/atoms/scheduling/cal.com/CalDotComScheduling.tsx
@@ -1,4 +1,5 @@
-import { FC, useEffect } from 'react'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { FC, useEffect, useRef } from 'react'
 import Cal, { getCalApi } from '@calcom/embed-react'
 import { useAccentColor } from '../../../hooks/useAccentColor'
 import { type BookingSuccessfulFunction } from './calDotComTypes'
@@ -10,9 +11,7 @@ export interface CalDotComSchedulingProps {
   /**
    * See https://youtu.be/5MybtA2rdBU?t=146
    */
-  metadata?: {
-    [key: string]: string
-  }
+  metadata?: { [key: string]: string }
 }
 
 export const CalDotComScheduling: FC<CalDotComSchedulingProps> = ({
@@ -22,11 +21,20 @@ export const CalDotComScheduling: FC<CalDotComSchedulingProps> = ({
   metadata,
 }) => {
   const { accentColor } = useAccentColor()
+  const eventListenerRef = useRef(false)
+  const calApiRef = useRef<any>(null)
+
+  const bookingSuccessfulCallback = (e: { detail: { data: any } }) => {
+    const { data } = e.detail
+    const { confirmed, eventType, date, booking } = data
+    onBookingSuccessful({ confirmed, eventType, date, booking })
+  }
 
   const initComponent = async () => {
     const cal = await getCalApi()
+    calApiRef.current = cal
 
-    if (cal) {
+    if (cal && !eventListenerRef.current) {
       cal('ui', {
         theme: 'light',
         styles: { branding: { brandColor: accentColor } },
@@ -35,29 +43,30 @@ export const CalDotComScheduling: FC<CalDotComSchedulingProps> = ({
 
       cal('on', {
         action: 'bookingSuccessful',
-        callback: (e: { detail: { data: any } }) => {
-          // `data` is properties for the event.
-          const { data } = e.detail
-
-          // `confirmed`: whether confirmation from organizer is pending or not
-          // `eventType`: Object for Event Type that has been booked
-          // `date`: date of Event
-          const { confirmed, eventType, date, booking } = data
-
-          onBookingSuccessful({
-            confirmed,
-            eventType: eventType,
-            date,
-            booking,
-          })
-        },
+        callback: bookingSuccessfulCallback,
       })
+
+      eventListenerRef.current = true
     }
   }
 
   useEffect(() => {
     initComponent()
-  }, [])
+
+    return () => {
+      const cleanup = async () => {
+        const cal = calApiRef.current || (await getCalApi())
+        if (cal && eventListenerRef.current) {
+          cal('off', {
+            action: 'bookingSuccessful',
+            callback: bookingSuccessfulCallback,
+          })
+          eventListenerRef.current = false
+        }
+      }
+      cleanup()
+    }
+  }, [accentColor, hideEventTypeDetails])
 
   let metadataString = ''
 
@@ -67,21 +76,18 @@ export const CalDotComScheduling: FC<CalDotComSchedulingProps> = ({
       .join('&')
   }
 
-  /**
-   * Check if calLink already contains a '?'
-   * If that's the case, we want to make sure to preserve it and
-   * just append the metadata
-   */
   const metadataSeparator = calLink.includes('?') ? '&' : '?'
 
   const composedCalLink = `${calLink}${
     metadataString ? `${metadataSeparator}${metadataString}` : ''
   }`
 
   return (
-    <Cal
-      calLink={composedCalLink}
-      style={{ width: '100%', height: '100%', overflow: 'hidden' }}
-    />
+    <div>
+      <Cal
+        calLink={composedCalLink}
+        style={{ width: '100%', height: '100%', overflow: 'hidden' }}
+      />
+    </div>
   )
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1273,25 +1273,25 @@
   resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@calcom/embed-core@*":
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/@calcom/embed-core/-/embed-core-1.1.3.tgz"
-  integrity sha512-+yd6gCztYK9BIA0ch835nXi6O3SsWLBspBIP/gQDY1Jv0P4gEluoKD0yj2Dp03pffwSSskFuLCqM0Srwqdo0ug==
+"@calcom/embed-core@1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@calcom/embed-core/-/embed-core-1.5.1.tgz#183d2fe48727e57583886299ab9f8fe3f4b4922b"
+  integrity sha512-wykzh1GKj5xhGxDJeCRJ7OulAgn9GVMYD/mmOBbvn06c3m9Lqoqn09E5kJ+DY+aokUncQPcstNsdiHsURjMuVw==
 
-"@calcom/embed-react@^1.0.10":
-  version "1.0.10"
-  resolved "https://registry.npmjs.org/@calcom/embed-react/-/embed-react-1.0.10.tgz"
-  integrity sha512-gpcbHOyCS+AbYwf7x0Q1kqx6rcwuryrMrTn/LxKpTJxNeNVBwPJh0qQZjtaoLQhBDWy3LXgCCsf8FegZ+XXb6w==
+"@calcom/embed-react@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@calcom/embed-react/-/embed-react-1.5.1.tgz#8af2996cc4627370f474ea68e53ef7f8ae4cd363"
+  integrity sha512-vwRtaO/WbBLrXQbKek333BoY/0GMRVRxOva9VhRPmtC8kyT9pAw/IfKA+26gDtfE25XCx9nqdPIghUJQr+niUw==
   dependencies:
-    "@calcom/embed-core" "*"
-    "@calcom/embed-snippet" "*"
+    "@calcom/embed-core" "1.5.1"
+    "@calcom/embed-snippet" "1.3.1"
 
-"@calcom/embed-snippet@*":
-  version "1.0.5"
-  resolved "https://registry.npmjs.org/@calcom/embed-snippet/-/embed-snippet-1.0.5.tgz"
-  integrity sha512-bPO6Yqomd/Zz8Ij2wk9el/JFzdosk7/nsNDfZDwjpLxGqVBF46dgtwoL+rpTnY2EK0uBNIkOp6oXg4sZSFEeQQ==
+"@calcom/embed-snippet@1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@calcom/embed-snippet/-/embed-snippet-1.3.1.tgz#a7579346f086b278b8d49a7f8803bf0f5c77b406"
+  integrity sha512-OmUAmwZt41I7vfKk9SqLMpCBxj91BHZ27NXFARSbECpw7MXcGHm2a4l1oqeuOe0vdRT27qDmKz/ccvKI0x/ttw==
   dependencies:
-    "@calcom/embed-core" "*"
+    "@calcom/embed-core" "1.5.1"
 
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"