🩹(frontend) fix missing notification when state is clear

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

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