From 6324be9fd30be83a5c192d9564e2f197793fe09f Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Thu, 3 Apr 2025 23:26:01 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20fix=20missing=20notifi?=
 =?UTF-8?q?cation=20when=20state=20is=20clear?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Notify iframe's parent while integrating Visio when state
is cleared. Requested by Eleonore.
---
 .../sdk/routes/CreateMeetingButton.tsx        |  1 +
 .../src/features/sdk/utils/PopupManager.ts    | 31 ++++++++++++-------
 src/frontend/src/features/sdk/utils/types.ts  |  1 +
 src/sdk/consumer/src/App.tsx                  |  5 ++-
 src/sdk/library/src/Types.ts                  |  1 +
 .../library/src/create/VisioCreateButton.tsx  |  6 +++-
 6 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/features/sdk/routes/CreateMeetingButton.tsx b/src/frontend/src/features/sdk/routes/CreateMeetingButton.tsx
index dd0936bf..3b472005 100644
--- a/src/frontend/src/features/sdk/routes/CreateMeetingButton.tsx
+++ b/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) {
diff --git a/src/frontend/src/features/sdk/utils/PopupManager.ts b/src/frontend/src/features/sdk/utils/PopupManager.ts
index d5f9889f..f98a4cd3 100644
--- a/src/frontend/src/features/sdk/utils/PopupManager.ts
+++ b/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(
-            {
-              type: ClientMessageType.ROOM_CREATED,
-              data: {
-                room: {
-                  url: getRouteUrl('room', data.room.slug),
-                  ...data.room,
-                },
-              },
+          this.messageParent(ClientMessageType.ROOM_CREATED, {
+            room: {
+              url: getRouteUrl('room', data.room.slug),
+              ...data.room,
             },
-            '*'
-          )
+          })
           return
       }
     }
diff --git a/src/frontend/src/features/sdk/utils/types.ts b/src/frontend/src/features/sdk/utils/types.ts
index 1c9c4bde..b3e02bc8 100644
--- a/src/frontend/src/features/sdk/utils/types.ts
+++ b/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 {
diff --git a/src/sdk/consumer/src/App.tsx b/src/sdk/consumer/src/App.tsx
index 8ecf1f2c..5a9468ea 100644
--- a/src/sdk/consumer/src/App.tsx
+++ b/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>
diff --git a/src/sdk/library/src/Types.ts b/src/sdk/library/src/Types.ts
index cf9ee629..bd95d279 100644
--- a/src/sdk/library/src/Types.ts
+++ b/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 = {
diff --git a/src/sdk/library/src/create/VisioCreateButton.tsx b/src/sdk/library/src/create/VisioCreateButton.tsx
index f9e89088..958b17c5 100644
--- a/src/sdk/library/src/create/VisioCreateButton.tsx
+++ b/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