From eac8cde272a25c07c865e2b89d5e2c3f1fe5a27c Mon Sep 17 00:00:00 2001 From: Nathan Panchout Date: Fri, 6 Feb 2026 17:38:57 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(front)=20add=20video=20conference=20l?= =?UTF-8?q?ink=20generation=20in=20event=20modal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implement the visio conference feature in the event modal: - Add NEXT_PUBLIC_VISIO_BASE_URL env var for configurable base URL - Create generateVisioRoomId() utility (xxx-xxxx-xxx format, a-z) - Refactor VideoConferenceSection: button to create, link + remove when URL exists - Hide visio pill when env var is not configured (feature flag) - Add removeVisio i18n key in EN/FR/NL The visio URL is stored via the standard ICS URL property, which is already wired through useEventForm.toIcsEvent() and CalDavService. Co-Authored-By: Claude Opus 4.6 --- src/frontend/apps/calendars/.env | 3 +- src/frontend/apps/calendars/.env.development | 1 + .../components/scheduler/EventModal.tsx | 18 ++++--- .../VideoConferenceSection.tsx | 50 +++++++++++++------ .../generateVisioRoomId.ts | 7 +++ .../src/features/i18n/translations.json | 3 ++ 6 files changed, 59 insertions(+), 23 deletions(-) create mode 100644 src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/generateVisioRoomId.ts diff --git a/src/frontend/apps/calendars/.env b/src/frontend/apps/calendars/.env index 8f22306..7ef3cda 100644 --- a/src/frontend/apps/calendars/.env +++ b/src/frontend/apps/calendars/.env @@ -1 +1,2 @@ -NEXT_PUBLIC_API_ORIGIN= \ No newline at end of file +NEXT_PUBLIC_API_ORIGIN= +NEXT_PUBLIC_VISIO_BASE_URL=https://visio.suite.anct.gouv.fr \ No newline at end of file diff --git a/src/frontend/apps/calendars/.env.development b/src/frontend/apps/calendars/.env.development index 73c257c..d53e487 100644 --- a/src/frontend/apps/calendars/.env.development +++ b/src/frontend/apps/calendars/.env.development @@ -1 +1,2 @@ NEXT_PUBLIC_API_ORIGIN=http://localhost:8921 +NEXT_PUBLIC_VISIO_BASE_URL=https://visio.suite.anct.gouv.fr diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/EventModal.tsx b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/EventModal.tsx index b4632f0..f76c970 100644 --- a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/EventModal.tsx +++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/EventModal.tsx @@ -119,13 +119,19 @@ export const EventModal = ({ } }; + const visioBaseUrl = process.env.NEXT_PUBLIC_VISIO_BASE_URL; + const pills = useMemo( () => [ - { - id: "videoConference" as const, - icon: "videocam", - label: t("calendar.event.sections.addVideoConference"), - }, + ...(visioBaseUrl + ? [ + { + id: "videoConference" as const, + icon: "videocam", + label: t("calendar.event.sections.addVideoConference"), + }, + ] + : []), { id: "location" as const, icon: "place", @@ -147,7 +153,7 @@ export const EventModal = ({ label: t("calendar.event.attendees"), }, ], - [t], + [t, visioBaseUrl], ); return ( diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/VideoConferenceSection.tsx b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/VideoConferenceSection.tsx index abb2e6c..fc4883c 100644 --- a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/VideoConferenceSection.tsx +++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/VideoConferenceSection.tsx @@ -1,7 +1,7 @@ -import { useState } from "react"; import { useTranslation } from "react-i18next"; import { Button } from "@gouvfr-lasuite/cunningham-react"; import { SectionRow } from "./SectionRow"; +import { generateVisioRoomId } from "./generateVisioRoomId"; interface VideoConferenceSectionProps { url: string; @@ -19,14 +19,12 @@ export const VideoConferenceSection = ({ onToggle, }: VideoConferenceSectionProps) => { const { t } = useTranslation(); - const [isCreating, setIsCreating] = useState(false); const handleCreateVisio = () => { - // Inert for now - will integrate with La Suite API in the future - setIsCreating(true); - setTimeout(() => { - setIsCreating(false); - }, 500); + const baseUrl = process.env.NEXT_PUBLIC_VISIO_BASE_URL; + if (!baseUrl) return; + const roomId = generateVisioRoomId(); + onChange(`${baseUrl}/${roomId}`); }; const handleRemove = () => { @@ -42,15 +40,35 @@ export const VideoConferenceSection = ({ isExpanded={isExpanded} onToggle={onToggle} > - + {url ? ( +
+ + {url} + +
+ ) : ( + + )} ); }; diff --git a/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/generateVisioRoomId.ts b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/generateVisioRoomId.ts new file mode 100644 index 0000000..0d38251 --- /dev/null +++ b/src/frontend/apps/calendars/src/features/calendar/components/scheduler/event-modal-sections/generateVisioRoomId.ts @@ -0,0 +1,7 @@ +const randomLetters = (n: number): string => + Array.from({ length: n }, () => + String.fromCharCode(97 + Math.floor(Math.random() * 26)), + ).join(""); + +export const generateVisioRoomId = (): string => + `${randomLetters(3)}-${randomLetters(4)}-${randomLetters(3)}`; diff --git a/src/frontend/apps/calendars/src/features/i18n/translations.json b/src/frontend/apps/calendars/src/features/i18n/translations.json index 50928d8..80c7557 100644 --- a/src/frontend/apps/calendars/src/features/i18n/translations.json +++ b/src/frontend/apps/calendars/src/features/i18n/translations.json @@ -137,6 +137,7 @@ "addLocation": "Add location", "addVideoConference": "Visio", "createVisio": "Add video conference", + "removeVisio": "Remove video conference", "videoLink": "Video conference link", "addAttendees": "Add participants", "addDescription": "Add description", @@ -747,6 +748,7 @@ "addLocation": "Ajouter un lieu", "addVideoConference": "Visio", "createVisio": "Ajouter une visioconférence", + "removeVisio": "Supprimer la visioconférence", "videoLink": "Lien de visioconférence", "addAttendees": "Ajouter des participants", "addDescription": "Ajouter une description", @@ -1104,6 +1106,7 @@ "addLocation": "Locatie toevoegen", "addVideoConference": "Visio", "createVisio": "Add video conference", + "removeVisio": "Videoconferentie verwijderen", "videoLink": "Videoconferentie link", "addAttendees": "Deelnemers toevoegen", "addDescription": "Beschrijving toevoegen",