🩹(frontend) fix missing notification when state is clear

Notify iframe's parent while integrating Visio when state
is cleared. Requested by Eleonore.

src/frontend/src/features/sdk/routes/CreateMeetingButton.tsx

@@ -66,6 +66,7 @@ export const CreateMeetingButton = () => {
     setRoom(undefined)
     setCallbackId(undefined)
     setIsPending(false)
+    popupManager.clearState()
   }
 
   if (isPending) {

src/frontend/src/features/sdk/utils/PopupManager.ts

@@ -24,6 +24,21 @@ export class PopupManager {
     }
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private messageParent(type: ClientMessageType, data: any) {
+    window?.parent.postMessage(
+      {
+        type: type,
+        data: data,
+      },
+      '*'
+    )
+  }
+
+  public clearState() {
+    this.messageParent(ClientMessageType.STATE_CLEAR, {})
+  }
+
   public setupMessageListener(
     onCallbackId: (id: string) => void,
     onRoomData: (data: CallbackCreationRoomData) => void
@@ -39,18 +54,12 @@ export class PopupManager {
         case PopupMessageType.ROOM_DATA:
           if (!data?.room) return
           onRoomData(data.room)
-          window?.parent.postMessage(
+          this.messageParent(ClientMessageType.ROOM_CREATED, {
-            {
+            room: {
-              type: ClientMessageType.ROOM_CREATED,
+              url: getRouteUrl('room', data.room.slug),
-              data: {
+              ...data.room,
-                room: {
-                  url: getRouteUrl('room', data.room.slug),
-                  ...data.room,
-                },
-              },
             },
-            '*'
+          })
-          )
           return
       }
     }

src/frontend/src/features/sdk/utils/types.ts

@@ -4,6 +4,7 @@ export type CallbackCreationRoomData = {
 
 export enum ClientMessageType {
   ROOM_CREATED = 'ROOM_CREATED',
+  STATE_CLEAR = 'STATE_CLEAR',
 }
 
 export interface PopupMessageData {

src/sdk/consumer/src/App.tsx

@@ -21,7 +21,10 @@ function App() {
       </div>
       <div className="group">
         <label>Visioconference</label>
-        <VisioCreateButton onRoomCreated={(data) => setRoomUrl(data.url)} />
+        <VisioCreateButton
+          onRoomCreated={(data) => setRoomUrl(data.url)}
+          onClear={() => setRoomUrl("")}
+        />
       </div>
       <div className="group">
         <label>Description</label>

src/sdk/library/src/Types.ts

@@ -4,6 +4,7 @@ export type ConfigType = typeof DEFAULT_CONFIG
 
 export enum ClientMessageType {
   ROOM_CREATED = 'ROOM_CREATED',
+  STATE_CLEAR = 'STATE_CLEAR',
 }
 
 export type RoomData = {

src/sdk/library/src/create/VisioCreateButton.tsx

@@ -4,10 +4,12 @@ import { DEFAULT_CONFIG } from '@/Config'
 
 export const VisioCreateButton = ({
   onRoomCreated,
+  onClear,
   readOnly = false,
   slug,
 }: {
   onRoomCreated: (roomData: RoomData) => void
+  onClear: () => void
   readOnly?: boolean
   slug?: string
 }) => {
@@ -20,13 +22,15 @@ export const VisioCreateButton = ({
       const { type, data } = event.data
       if (type == ClientMessageType.ROOM_CREATED && data?.room) {
         onRoomCreated(data.room)
+      } else if (type == ClientMessageType.STATE_CLEAR) {
+        onClear()
       }
     }
     window.addEventListener('message', onMessage)
     return () => {
       window.removeEventListener('message', onMessage)
     }
-  }, [onRoomCreated])
+  }, [onRoomCreated, onClear])
 
   return (
     // eslint-disable-next-line jsx-a11y/iframe-has-title