@brightlayer-ui/react-native-auth-workflow
Version:
Re-usable workflow components for Authentication and Registration within Eaton applications.
56 lines (55 loc) • 4.12 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import { ContactSupportScreenBase } from './ContactSupportScreenBase';
import { useAuthContext } from '../../contexts';
import { useTranslation } from 'react-i18next';
import { Text } from 'react-native-paper';
import { useExtendedTheme } from '@brightlayer-ui/react-native-themes';
import { Linking, StyleSheet } from 'react-native';
const makeStyles = (theme) => StyleSheet.create({
textStyles: {
color: theme.colors.primary,
},
});
/**
* Component renders a screen with contact information for support with the application.
*
* @param {ContactSupportScreenProps} props - Props of Contact Support Screen
*
* @category Component
*/
export const ContactSupportScreen = (props) => {
const { t } = useTranslation();
const { navigate } = useAuthContext();
const theme = useExtendedTheme();
const defaultStyles = makeStyles(theme);
const { contactEmail = 'something@email.com', contactPhone = '1-800-123-4567' } = props;
const defaultEmailSupportContent = () => (React.createElement(Text, { variant: "bodyLarge" },
`${t('bluiAuth:CONTACT_SUPPORT.SUPPORT_MESSAGE')}`,
React.createElement(Text, { variant: "labelLarge", style: defaultStyles.textStyles, onPress: () => Linking.openURL(`mailto:${contactEmail !== null && contactEmail !== void 0 ? contactEmail : ''}`) }, contactEmail),
`.`));
const defaultPhoneSupportContent = () => (React.createElement(Text, { variant: "bodyLarge" },
`${t('bluiAuth:CONTACT_SUPPORT.TECHNICAL_ASSISTANCE')}`,
React.createElement(Text, { variant: "labelLarge", style: defaultStyles.textStyles, onPress: () => Linking.openURL(`tel:${contactPhone !== null && contactPhone !== void 0 ? contactPhone : ''}`) }, contactPhone),
`.`));
const { icon = { name: 'chat-bubble-outline' }, iconSize = 70, emailSupportTitle = t('bluiAuth:CONTACT_SUPPORT.GENERAL_QUESTIONS'), emailSupportContent = defaultEmailSupportContent, phoneSupportTitle = t('bluiAuth:CONTACT_SUPPORT.EMERGENCY_SUPPORT'), phoneSupportContent = defaultPhoneSupportContent, dismissButtonLabel = t('bluiCommon:ACTIONS.OKAY'), onDismiss, WorkflowCardHeaderProps, WorkflowCardActionsProps } = props, otherContactSupportProps = __rest(props, ["icon", "iconSize", "emailSupportTitle", "emailSupportContent", "phoneSupportTitle", "phoneSupportContent", "dismissButtonLabel", "onDismiss", "WorkflowCardHeaderProps", "WorkflowCardActionsProps"]);
const workflowCardHeaderProps = Object.assign({ title: t('bluiAuth:USER_MENU.CONTACT_US'), onIconPress: () => {
navigate(-1);
} }, WorkflowCardHeaderProps);
const workflowCardActionsProps = Object.assign(Object.assign({ nextLabel: t('bluiCommon:ACTIONS.OKAY'), showNext: true, canGoNext: true, fullWidthButton: true }, WorkflowCardActionsProps), { onNext: () => {
var _a;
navigate(-1);
(_a = WorkflowCardActionsProps === null || WorkflowCardActionsProps === void 0 ? void 0 : WorkflowCardActionsProps.onNext) === null || _a === void 0 ? void 0 : _a.call(WorkflowCardActionsProps);
} });
return (React.createElement(ContactSupportScreenBase, Object.assign({ WorkflowCardHeaderProps: workflowCardHeaderProps, WorkflowCardActionsProps: workflowCardActionsProps, icon: icon, iconSize: iconSize, emailSupportTitle: emailSupportTitle, emailSupportContent: emailSupportContent, phoneSupportTitle: phoneSupportTitle, phoneSupportContent: phoneSupportContent, contactEmail: contactEmail, contactPhone: contactPhone, dismissButtonLabel: dismissButtonLabel, onDismiss: onDismiss }, otherContactSupportProps)));
};