snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/invite/components/add-people-dialog/web/DialInSection.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import { IReduxState } from '../../../../app/types';
+import { getDialInfoPageURL, hasMultipleNumbers } from '../../../functions';
+
+import DialInNumber from './DialInNumber';
+
+interface IProps {
+
+    /**
+     * The phone number to dial to begin the process of dialing into a
+     * conference.
+     */
+    phoneNumber: string;
+}
+
+const useStyles = makeStyles()(theme => {
+    return {
+        container: {
+            '& .info-label': {
+                ...theme.typography.bodyLongBold
+            }
+        },
+
+        link: {
+            ...theme.typography.bodyLongRegular,
+            color: theme.palette.link01,
+
+            '&:hover': {
+                color: theme.palette.link01Hover
+            }
+        }
+    };
+});
+
+/**
+ * Returns a ReactElement for showing how to dial into the conference, if
+ * dialing in is available.
+ *
+ * @private
+ * @returns {null|ReactElement}
+ */
+function DialInSection({
+    phoneNumber
+}: IProps) {
+    const { classes, cx } = useStyles();
+    const conferenceID = useSelector((state: IReduxState) => state['features/invite'].conferenceID);
+    const dialInfoPageUrl: string = useSelector(getDialInfoPageURL);
+    const showMoreNumbers = useSelector((state: IReduxState) => hasMultipleNumbers(state['features/invite'].numbers));
+    const { t } = useTranslation();
+
+    return (
+        <div className = { classes.container }>
+            <DialInNumber
+                conferenceID = { conferenceID ?? '' }
+                phoneNumber = { phoneNumber } />
+            {showMoreNumbers ? <a
+                className = { cx('more-numbers', classes.link) }
+                href = { dialInfoPageUrl }
+                rel = 'noopener noreferrer'
+                target = '_blank'>
+                { t('info.moreNumbers') }
+            </a> : null}
+        </div>
+    );
+}
+
+export default DialInSection;