communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
98 lines • 7.44 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useCallback } from 'react';
import { useMemo } from 'react';
import { Modal, Stack, useTheme, Text, IconButton, Icon } from '@fluentui/react';
import { themedPhoneInfoModalStyle, titleClassName, titleContainerClassName, phoneInfoTextStyle, phoneInfoIcon, phoneInfoInctructionLine, phoneInfoStep, stepTextStyle, infoConnectionLinkStyle, phoneInfoIconStyle } from './styles/TeamsMeetingConferenceInfo';
import { useLocale } from '../localization';
import { _pxToRem } from "../../../acs-ui-common/src";
import { _formatPhoneNumber } from './utils/formatPhoneNumber';
/**
* @public
* a component for setting spoken languages
*/
export const MeetingConferencePhoneInfoModal = (props) => {
var _a;
const { conferencePhoneInfoList, showModal, onDismissMeetingPhoneInfoSettings } = props;
const theme = useTheme();
const strings = useLocale().strings.meetingConferencePhoneInfo;
const onDismiss = useCallback(() => {
if (onDismissMeetingPhoneInfoSettings) {
onDismissMeetingPhoneInfoSettings();
}
}, [onDismissMeetingPhoneInfoSettings]);
const PhoneInfoModalStyle = useMemo(() => themedPhoneInfoModalStyle(theme), [theme]);
return (React.createElement(React.Fragment, null,
React.createElement(Modal, { titleAriaId: strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalTitle, isOpen: showModal, onDismiss: onDismiss, isBlocking: true, styles: PhoneInfoModalStyle },
React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: titleContainerClassName },
React.createElement(Text, { role: "heading", "aria-level": 2, className: titleClassName }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalTitle),
React.createElement(IconButton, { iconProps: { iconName: 'Cancel' }, ariaLabel: strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalTitle, onClick: onDismiss, style: { color: theme.palette.black } })),
conferencePhoneInfoList.length === 0 && (React.createElement(Stack, { horizontal: true },
React.createElement(Text, { className: stepTextStyle }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalNoPhoneAvailable))),
conferencePhoneInfoList.length > 0 && (React.createElement(Stack, null,
React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", className: phoneInfoInctructionLine },
React.createElement(Stack.Item, { style: { display: 'flex' } },
React.createElement(Stack, { horizontal: true, className: phoneInfoStep },
React.createElement(Stack, { className: infoConnectionLinkStyle(theme) }),
React.createElement(Stack.Item, { className: phoneInfoIcon(theme) },
React.createElement(Stack, { verticalAlign: "center", horizontalAlign: "center" },
React.createElement(Icon, { iconName: "JoinByPhoneDialStepIcon", className: phoneInfoIconStyle(theme) }))),
React.createElement(Stack.Item, null,
React.createElement(Text, { className: stepTextStyle }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalDialIn)))),
React.createElement(Stack.Item, { className: phoneInfoStep }, conferencePhoneInfoList.map((phoneNumber, index) => (React.createElement(Stack.Item, { key: index },
React.createElement(Text, { className: phoneInfoTextStyle },
_formatPhoneNumber(phoneNumber.phoneNumber, true),
' ',
phoneNumber.isTollFree
? strings.meetingConferencePhoneInfoModalTollFree
: strings.meetingConferencePhoneInfoModalToll),
React.createElement("br", null),
React.createElement(Text, { className: phoneInfoTextStyle },
" ",
formatPhoneNumberInfo(phoneNumber, strings))))))),
React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: phoneInfoInctructionLine },
React.createElement(Stack.Item, { style: { display: 'flex' } },
React.createElement(Stack, { horizontal: true },
React.createElement(Stack, { className: infoConnectionLinkStyle(theme) }),
React.createElement(Stack.Item, { className: phoneInfoIcon(theme) },
React.createElement(Stack, { verticalAlign: "center", horizontalAlign: "center" },
React.createElement(Icon, { iconName: "JoinByPhoneConferenceIdIcon", className: phoneInfoIconStyle(theme) }))),
React.createElement(Stack.Item, null,
React.createElement(Text, { className: stepTextStyle }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalMeetingId)))),
React.createElement(Text, { className: phoneInfoTextStyle }, formatMeetingId((_a = conferencePhoneInfoList[0]) === null || _a === void 0 ? void 0 : _a.conferenceId))),
React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center" },
React.createElement(Stack, { horizontal: true },
React.createElement(Stack.Item, { className: phoneInfoIcon(theme), style: { marginLeft: _pxToRem(2) } },
React.createElement(Icon, { iconName: "JoinByPhoneWaitToBeAdmittedIcon", className: phoneInfoIconStyle(theme) })),
React.createElement(Stack.Item, null,
React.createElement(Text, { className: stepTextStyle }, strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalWait)))))))));
};
/**
* @internal
* format phone number link
*/
export const formatPhoneNumberLink = (phoneNumber) => {
return `tel:+${phoneNumber.phoneNumber},,${phoneNumber.conferenceId}#`;
};
/**
* @internal
* format phone number
*/
export const formatPhoneNumberInfo = (phoneNumber, strings) => {
const templateText = phoneNumber.country && phoneNumber.city ? strings === null || strings === void 0 ? void 0 : strings.meetingConferencePhoneInfoModalTollGeoData : '';
return ((templateText === null || templateText === void 0 ? void 0 : templateText.replace('{country}', phoneNumber.country || '').replace('{city}', phoneNumber.city || '').trim()) || '');
};
/**
* @internal
* format meeting id
*/
export const formatMeetingId = (meetingId) => {
if (!meetingId) {
return '';
}
if ((meetingId === null || meetingId === void 0 ? void 0 : meetingId.length) !== 9) {
return meetingId;
}
return [meetingId.slice(0, 3), meetingId.slice(3, 6), meetingId.slice(6, 9)].join(' ') + '#';
};
//# sourceMappingURL=MeetingConferencePhoneInfo.js.map