From 75ffb7f5f7dc8e4ff37f314b8c112a0cf69d9f6b Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 1 Jul 2025 23:37:24 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20phone=20number=20an?=
 =?UTF-8?q?d=20pin=20display=20in=20info=20side=20panel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Create minimal UI to show telephony access details for testing SIP
functionality in staging deployment. Basic implementation for feature
validation.
---
 .../rooms/livekit/components/Info.tsx         | 32 ++++++++++++++++---
 .../rooms/livekit/hooks/useTelephony.ts       | 20 ++++++++++++
 .../src/features/rooms/utils/telephony.ts     | 23 +++++++++++++
 src/frontend/src/locales/de/rooms.json        |  4 +++
 src/frontend/src/locales/en/rooms.json        |  4 +++
 src/frontend/src/locales/fr/rooms.json        |  4 +++
 src/frontend/src/locales/nl/rooms.json        |  4 +++
 7 files changed, 87 insertions(+), 4 deletions(-)
 create mode 100644 src/frontend/src/features/rooms/livekit/hooks/useTelephony.ts
 create mode 100644 src/frontend/src/features/rooms/utils/telephony.ts

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 (
     <Div
       display="flex"
@@ -41,9 +45,29 @@ export const Info = () => {
         >
           {t('roomInformation.title')}
         </Text>
-        <Text as="p" variant="xsNote" wrap="pretty">
-          {roomUrl}
-        </Text>
+        <div
+          className={css({
+            gap: '0.15rem',
+            display: 'flex',
+            flexDirection: 'column',
+          })}
+        >
+          <Text as="p" variant="xsNote" wrap="pretty">
+            {roomUrl}
+          </Text>
+          {telephony?.enabled && data?.pin_code && (
+            <>
+              <Text as="p" variant="xsNote" wrap="pretty">
+                <Bold>{t('roomInformation.phone.call')}</Bold> (
+                {telephony?.country}) {telephony?.internationalPhoneNumber}
+              </Text>
+              <Text as="p" variant="xsNote" wrap="pretty">
+                <Bold>{t('roomInformation.phone.pinCode')}</Bold>{' '}
+                {formatPinCode(data?.pin_code)}
+              </Text>
+            </>
+          )}
+        </div>
         <Button
           size="sm"
           variant={isCopied ? 'success' : 'tertiaryText'}
diff --git a/src/frontend/src/features/rooms/livekit/hooks/useTelephony.ts b/src/frontend/src/features/rooms/livekit/hooks/useTelephony.ts
new file mode 100644
index 00000000..b570e17e
--- /dev/null
+++ b/src/frontend/src/features/rooms/livekit/hooks/useTelephony.ts
@@ -0,0 +1,20 @@
+import { useConfig } from '@/api/useConfig.ts'
+import { useMemo } from 'react'
+import { parseConfigPhoneNumber } from '../../utils/telephony'
+
+export const useTelephony = () => {
+  const { data } = useConfig()
+
+  const parsedPhoneNumber = useMemo(() => {
+    return parseConfigPhoneNumber(
+      data?.telephony?.phone_number,
+      data?.telephony?.default_country
+    )
+  }, [data?.telephony])
+
+  return {
+    enabled: data?.telephony?.enabled && parsedPhoneNumber,
+    country: parsedPhoneNumber?.country,
+    internationalPhoneNumber: parsedPhoneNumber?.formatInternational(),
+  }
+}
diff --git a/src/frontend/src/features/rooms/utils/telephony.ts b/src/frontend/src/features/rooms/utils/telephony.ts
new file mode 100644
index 00000000..0a857330
--- /dev/null
+++ b/src/frontend/src/features/rooms/utils/telephony.ts
@@ -0,0 +1,23 @@
+import { CountryCode, parsePhoneNumberWithError } from 'libphonenumber-js'
+
+export const parseConfigPhoneNumber = (
+  rawPhoneNumber?: string,
+  defaultCountry?: string
+) => {
+  if (!rawPhoneNumber || !defaultCountry) {
+    return null
+  }
+  try {
+    return parsePhoneNumberWithError(
+      rawPhoneNumber,
+      defaultCountry as CountryCode
+    )
+  } catch (error) {
+    console.warn('Invalid phone number format:', rawPhoneNumber, error)
+    return null
+  }
+}
+
+export function formatPinCode(pinCode?: string) {
+  return pinCode && `${pinCode.replace(/(\d{3})(\d{3})(\d{4})/, '$1 $2 $3')} #`
+}
diff --git a/src/frontend/src/locales/de/rooms.json b/src/frontend/src/locales/de/rooms.json
index 5a83868e..f99fb4a5 100644
--- a/src/frontend/src/locales/de/rooms.json
+++ b/src/frontend/src/locales/de/rooms.json
@@ -213,6 +213,10 @@
         "ariaLabel": "Kopiere deine Meeting-Adresse",
         "copy": "Adresse kopieren",
         "copied": "Adresse kopiert"
+      },
+      "phone": {
+        "call": "Rufen Sie an:",
+        "pinCode": "Code:"
       }
     }
   },
diff --git a/src/frontend/src/locales/en/rooms.json b/src/frontend/src/locales/en/rooms.json
index f8314b8e..fc367b30 100644
--- a/src/frontend/src/locales/en/rooms.json
+++ b/src/frontend/src/locales/en/rooms.json
@@ -213,6 +213,10 @@
         "ariaLabel": "Copy your meeting address",
         "copy": "Copy address",
         "copied": "Address copied"
+      },
+      "phone": {
+        "call": "Call:",
+        "pinCode": "Code:"
       }
     }
   },
diff --git a/src/frontend/src/locales/fr/rooms.json b/src/frontend/src/locales/fr/rooms.json
index 599b4226..5ae5bd44 100644
--- a/src/frontend/src/locales/fr/rooms.json
+++ b/src/frontend/src/locales/fr/rooms.json
@@ -213,6 +213,10 @@
         "ariaLabel": "Copier l'adresse de votre réunion",
         "copy": "Copier l'adresse",
         "copied": "Adresse copiée"
+      },
+      "phone": {
+        "call": "Appelez le :",
+        "pinCode": "Code :"
       }
     }
   },
diff --git a/src/frontend/src/locales/nl/rooms.json b/src/frontend/src/locales/nl/rooms.json
index a34c1024..c2fe2fe5 100644
--- a/src/frontend/src/locales/nl/rooms.json
+++ b/src/frontend/src/locales/nl/rooms.json
@@ -213,6 +213,10 @@
         "ariaLabel": "Kopieer je vergaderadres",
         "copy": "Adres kopiëren",
         "copied": "Adres gekopieerd"
+      },
+      "phone": {
+        "call": "Bel:",
+        "pinCode": "Code:"
       }
     }
   },