communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
59 lines • 5.12 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
// eslint-disable-next-line no-restricted-imports
import { Stack, Text, useTheme, Icon, Link } from '@fluentui/react';
import React from 'react';
import { formatPhoneNumberInfo, _formatPhoneNumber, formatPhoneNumberLink } from "../../../../react-components/src";
import { phoneInfoTextStyle, phoneInfoIcon, phoneInfoInstructionLine, phoneInfoStep, phoneInfoIconStyle, phoneInfoLabelStyle, phoneInfoContainerTokens, phoneInfoContainerStyle } from './styles/TeamsMeetingConferenceInfo.style';
import { useLocale } from '../localization';
/**
* @private
*/
export const MeetingPhoneInfoPaneContent = (props) => {
const { conferencePhoneInfoList } = props;
const theme = useTheme();
const localeStrings = useLocale().component.strings.meetingConferencePhoneInfo;
if (props.mobileView) {
return (React.createElement(Stack, { verticalFill: true, styles: phoneInfoContainerStyle, tokens: phoneInfoContainerTokens, "data-ui-id": "phone-info-pane-content" },
(conferencePhoneInfoList === undefined || conferencePhoneInfoList.length === 0) && (React.createElement(Stack, { horizontal: true },
React.createElement(Text, { className: phoneInfoTextStyle }, localeStrings.meetingConferencePhoneInfoModalNoPhoneAvailable))),
conferencePhoneInfoList && conferencePhoneInfoList[0] && (React.createElement(Stack, null,
React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", className: phoneInfoInstructionLine },
React.createElement(Stack.Item, null,
React.createElement(Stack, { horizontal: true, className: phoneInfoStep },
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: phoneInfoLabelStyle }, localeStrings.meetingConferencePhoneInfoModalDialIn)))),
React.createElement(Stack.Item, { className: phoneInfoStep }, conferencePhoneInfoList.map((phoneNumber, index) => (React.createElement(Stack.Item, { key: index },
React.createElement(Link, { className: phoneInfoTextStyle, href: formatPhoneNumberLink(phoneNumber) }, _formatPhoneNumber(phoneNumber.phoneNumber, true)),
React.createElement(Text, { className: phoneInfoTextStyle },
' ',
phoneNumber.isTollFree
? localeStrings.meetingConferencePhoneInfoModalTollFree
: localeStrings.meetingConferencePhoneInfoModalToll),
React.createElement("br", null),
React.createElement(Text, { className: phoneInfoTextStyle },
" ",
formatPhoneNumberInfo(phoneNumber, localeStrings))))))),
React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: phoneInfoInstructionLine },
React.createElement(Stack.Item, null,
React.createElement(Stack, { horizontal: true },
React.createElement(Stack.Item, { className: phoneInfoIcon(theme) },
React.createElement(Icon, { iconName: "JoinByPhoneConferenceIdIcon", className: phoneInfoIconStyle(theme) })),
React.createElement(Stack.Item, null,
React.createElement(Text, { className: phoneInfoLabelStyle }, localeStrings.meetingConferencePhoneInfoModalMeetingId)))),
React.createElement(Text, { className: phoneInfoTextStyle },
conferencePhoneInfoList[0].conferenceId,
"#")),
React.createElement(Stack, { horizontal: true, horizontalAlign: "space-between", verticalAlign: "center", className: phoneInfoInstructionLine },
React.createElement(Stack, { horizontal: true },
React.createElement(Stack.Item, { className: phoneInfoIcon(theme) },
React.createElement(Icon, { iconName: "JoinByPhoneWaitToBeAdmittedIcon", className: phoneInfoIconStyle(theme) })),
React.createElement(Stack.Item, null,
React.createElement(Text, { className: phoneInfoLabelStyle }, localeStrings.meetingConferencePhoneInfoModalWait))))))));
}
return (React.createElement(Stack, { verticalFill: true, styles: phoneInfoContainerStyle, tokens: phoneInfoContainerTokens, "data-ui-id": "phone-info-pane-content" }));
};
//# sourceMappingURL=MeetingPhoneInfoPaneContent.js.map