diff --git a/src/frontend/src/features/rooms/livekit/components/Info.tsx b/src/frontend/src/features/rooms/livekit/components/Info.tsx
index a0aadaae..c4c13690 100644
--- a/src/frontend/src/features/rooms/livekit/components/Info.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/Info.tsx
@@ -3,9 +3,11 @@ import { useEffect, useState } from 'react'
import { VStack } from '@/styled-system/jsx'
import { css } from '@/styled-system/css'
import { RiCheckLine, RiFileCopyLine } from '@remixicon/react'
-import { Button, Div, Text } from '@/primitives'
+import { Bold, Button, Div, Text } from '@/primitives'
import { getRouteUrl } from '@/navigation/getRouteUrl'
import { useRoomData } from '../hooks/useRoomData'
+import { formatPinCode } from '../../utils/telephony'
+import { useTelephony } from '../hooks/useTelephony'
export const Info = () => {
const { t } = useTranslation('rooms', { keyPrefix: 'info' })
@@ -22,6 +24,8 @@ export const Info = () => {
const data = useRoomData()
const roomUrl = getRouteUrl('room', data?.slug)
+ const telephony = useTelephony()
+
return (
{
>
{t('roomInformation.title')}
-
- {roomUrl}
-
+
+
+ {roomUrl}
+
+ {telephony?.enabled && data?.pin_code && (
+ <>
+
+ {t('roomInformation.phone.call')} (
+ {telephony?.country}) {telephony?.internationalPhoneNumber}
+
+
+ {t('roomInformation.phone.pinCode')}{' '}
+ {formatPinCode(data?.pin_code)}
+
+ >
+ )}
+