🐛(frontend) rework the calendar integration approach

Use a totally different strategy, which hopefully works in prod env.
Actually broadcast channel cannot be shared between two different
browsing context, even on a same domain, an iFrame and a pop up
cannot communicate.

Moreover, in an iFrame session cookie are unavailable.
Rely on a newly created backend endpoint to pass room data.

src/sdk/consumer/src/App.tsx

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

src/sdk/consumer/src/index.css

@@ -72,3 +72,56 @@ button {
   font-weight: 300;
   cursor: pointer;
 }
+
+.create-meeting {
+  background-color: rgb(45, 45, 70);
+  color: white;
+  height: 46px;
+  border-radius: 4px;
+  font-size: 16px;
+  font-weight: 300;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem 0.75rem;
+  border: none;
+}
+
+.create-meeting svg path {
+  fill: white !important;
+}
+
+
+.icon {
+  color: white !important;
+}
+
+.join-button {
+  background-color: rgb(45, 45, 70);
+  color: white;
+  height: 46px;
+  border-radius: 4px;
+  font-size: 16px;
+  font-weight: 300;
+  cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  padding: 0 1rem;
+  text-decoration: none;
+}
+
+.join-button svg path {
+  fill: white !important;
+}
+
+.join-link {
+  padding-top: 0.5rem;
+}
+
+.join-link svg path {
+  fill: white !important;
+}

src/sdk/library/.env.development

@@ -0,0 +1 @@
+VITE_VISIO_SDK_URL=https://meet.127.0.0.1.nip.io/sdk

src/sdk/library/src/Types.ts

@@ -5,3 +5,10 @@ export type ConfigType = typeof DEFAULT_CONFIG
 export enum ClientMessageType {
   ROOM_CREATED = 'ROOM_CREATED',
 }
+
+export type RoomData = {
+  slug: string
+  url: string
+  phone?: string
+  code?: string
+}

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

@@ -1,11 +1,15 @@
-import { DEFAULT_CONFIG } from '@/Config'
-import { ClientMessageType } from '@/Types'
 import { useEffect } from 'react'
+import { ClientMessageType, RoomData } from '@/Types'
+import { DEFAULT_CONFIG } from '@/Config'
 
 export const VisioCreateButton = ({
   onRoomCreated,
+  readOnly = false,
+  slug,
 }: {
-  onRoomCreated: (roomUrl: string) => void
+  onRoomCreated: (roomData: RoomData) => void
+  readOnly?: boolean
+  slug?: string
 }) => {
   useEffect(() => {
     const onMessage = (event: MessageEvent) => {
@@ -13,13 +17,11 @@ export const VisioCreateButton = ({
       if (event.origin !== new URL(DEFAULT_CONFIG.url).origin) {
         return
       }
-      if (event.data.type === ClientMessageType.ROOM_CREATED) {
-        const data = event.data.data
-        const roomUrl = data.url
-        onRoomCreated(roomUrl)
+      const { type, data } = event.data
+      if (type == ClientMessageType.ROOM_CREATED && data?.room) {
+        onRoomCreated(data.room)
       }
     }
-
     window.addEventListener('message', onMessage)
     return () => {
       window.removeEventListener('message', onMessage)
@@ -30,10 +32,13 @@ export const VisioCreateButton = ({
     // eslint-disable-next-line jsx-a11y/iframe-has-title
     <iframe
       allow="clipboard-read; clipboard-write"
-      src={DEFAULT_CONFIG.url + '/create-button'}
+      src={
+        DEFAULT_CONFIG.url +
+        `/create-button?readOnly=${readOnly}${slug ? '&slug=' + slug : ''}`
+      }
       style={{
         width: '100%',
-        height: '52px',
+        height: '100px',
         border: 'none',
       }}
     ></iframe>