communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
58 lines • 6.27 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
/* @conditional-compile-remove(call-readiness) */
import { useMemo } from 'react';
/* @conditional-compile-remove(call-readiness) */
import { Stack, Text, Link, PrimaryButton, mergeStyleSets, useTheme, Image, ImageFit } from '@fluentui/react';
/* @conditional-compile-remove(call-readiness) */
import { useLocale } from '../../localization';
/* @conditional-compile-remove(call-readiness) */
import { browserPermissionContainerStyles, iOSImageContainer, iOSStepsCircleStyles, iOSStepsContainerStyles, iOSStepsDigitTextStyles, iOSStepsTextStyles, linkTextStyles, primaryButtonStyles, primaryTextStyles, secondaryTextStyles, textContainerStyles } from './../styles/BrowserPermissionDenied.styles';
/* @conditional-compile-remove(call-readiness) */
import { isValidString } from '../utils';
/* @conditional-compile-remove(call-readiness) */
const BrowserPermissionDeniedIOSContainer = (props) => {
const { imageSource, onTroubleshootingClick, onTryAgainClick, strings, styles } = props;
const theme = useTheme();
const stepsCircleStyle = useMemo(() => {
return mergeStyleSets(iOSStepsCircleStyles, { root: { background: theme.palette.neutralLighter } });
}, [theme]);
return (React.createElement(Stack, { styles: browserPermissionContainerStyles },
imageSource && (React.createElement(Stack, { styles: mergeStyleSets(iOSImageContainer, { root: { background: theme.palette.neutralLighter } }) }, isValidString(strings === null || strings === void 0 ? void 0 : strings.imageAltText) && (React.createElement(Image, { src: imageSource !== null && imageSource !== void 0 ? imageSource : '', alt: strings === null || strings === void 0 ? void 0 : strings.imageAltText, imageFit: ImageFit.centerContain, style: { padding: '1.5rem' } })))),
React.createElement(Stack, { style: { padding: '1rem', paddingBottom: '1.25rem' } },
React.createElement(Stack, { styles: textContainerStyles },
isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryText) && React.createElement(Text, { styles: primaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.primaryText),
isValidString(strings === null || strings === void 0 ? void 0 : strings.secondaryText) && React.createElement(Text, { styles: secondaryTextStyles }, strings === null || strings === void 0 ? void 0 : strings.secondaryText),
isValidString(strings === null || strings === void 0 ? void 0 : strings.step1Text) && (React.createElement(Stack, { styles: iOSStepsContainerStyles },
React.createElement(Stack, { horizontalAlign: 'center', styles: stepsCircleStyle },
React.createElement(Text, { styles: iOSStepsDigitTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step1DigitText)),
React.createElement(Text, { styles: iOSStepsTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step1Text))),
isValidString(strings === null || strings === void 0 ? void 0 : strings.step2Text) && (React.createElement(Stack, { styles: iOSStepsContainerStyles },
React.createElement(Stack, { horizontalAlign: 'center', styles: stepsCircleStyle },
React.createElement(Text, { styles: iOSStepsDigitTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step2DigitText)),
React.createElement(Text, { styles: iOSStepsTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step2Text))),
isValidString(strings === null || strings === void 0 ? void 0 : strings.step3Text) && (React.createElement(Stack, { styles: iOSStepsContainerStyles },
React.createElement(Stack, { horizontalAlign: 'center', styles: stepsCircleStyle },
React.createElement(Text, { styles: iOSStepsDigitTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step3DigitText)),
React.createElement(Text, { styles: iOSStepsTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step3Text))),
isValidString(strings === null || strings === void 0 ? void 0 : strings.step4Text) && (React.createElement(Stack, { styles: mergeStyleSets(iOSStepsContainerStyles, { root: { paddingBottom: '1.5rem' } }) },
React.createElement(Stack, { horizontalAlign: 'center', styles: stepsCircleStyle },
React.createElement(Text, { styles: iOSStepsDigitTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step4DigitText)),
React.createElement(Text, { styles: iOSStepsTextStyles }, strings === null || strings === void 0 ? void 0 : strings.step4Text))),
isValidString(strings === null || strings === void 0 ? void 0 : strings.primaryButtonText) && (React.createElement(PrimaryButton, { styles: mergeStyleSets(primaryButtonStyles, styles === null || styles === void 0 ? void 0 : styles.primaryButton), text: strings === null || strings === void 0 ? void 0 : strings.primaryButtonText, onClick: onTryAgainClick })),
isValidString(strings === null || strings === void 0 ? void 0 : strings.linkText) && (React.createElement(Link, { styles: mergeStyleSets(linkTextStyles, styles === null || styles === void 0 ? void 0 : styles.troubleshootingLink), onClick: onTroubleshootingClick }, strings === null || strings === void 0 ? void 0 : strings.linkText))))));
};
/**
* @beta
*
* Component to allow Contoso to help their end user with their devices should their browser experience device permission issues.
*/
export const BrowserPermissionDeniedIOS = (props) => {
/* @conditional-compile-remove(call-readiness) */
const locale = useLocale().strings.BrowserPermissionDeniedIOS;
/* @conditional-compile-remove(call-readiness) */
return React.createElement(BrowserPermissionDeniedIOSContainer, Object.assign({}, props, { strings: props.strings ? props.strings : locale }));
return React.createElement(React.Fragment, null);
};
//# sourceMappingURL=BrowserPermissionDeniedIOS.js.map