Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix emailSupportContent and phoneSupportContent prop #472

Merged
merged 1 commit into from
Sep 13, 2023
Merged

Fix emailSupportContent and phoneSupportContent prop #472

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions login-workflow/example/src/navigation/AppRouter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ import { routes } from './Routing';
import { ExampleHome } from '../screens/ExampleHome';
import i18nAppInstance from '../translations/i18n';
import { ChangePassword } from '../components/ChangePassword';
import { AlarmAdd, Home } from '@mui/icons-material';
import Fan from '@brightlayer-ui/icons-mui/Fan';
import EatonLogo from '../assets/images/eaton_stacked_logo.png';

export const AppRouter: React.FC = () => {
const navigate = useNavigate();
Expand Down Expand Up @@ -62,6 +65,67 @@ export const AppRouter: React.FC = () => {
path={'/contact-support'}
element={
<ReactRouterGuestGuard isAuthenticated={app.isAuthenticated} fallBackUrl={'/'}>
{/* <ContactSupportScreen
icon={<AlarmAdd />}
emailSupportTitle={'This is email support title prop'}
emailSupportContent={
(email: string) => {
return `Send here ${email}`
}
}
phoneSupportTitle={'99674321**'}
phoneSupportContent={
(phone: string) => {
return `Call here ${phone}`
}
}
contactEmail={
'[email protected]'
}
contactPhone='012-3404949-494'
dismissButtonLabel={
'Dismiss'
}
onDismiss={
() => {
console.log('Dismiss function called')
}
}
WorkflowCardBaseProps={{
loading: false,
backgroundImage: EatonLogo,
}}
WorkflowCardHeaderProps={{
avatar: <Fan />,
action: <Home />,
title: 'This is a Contact Header',
}}
WorkflowCardInstructionProps={
{
instructions: 'This is a Contact Screen',
divider: false,
title: 'This is contact screen title'
}
}
WorkflowCardActionsProps={{
divider: false,
showPrevious: true,
canGoPrevious: true,
previousLabel: 'prev',
onPrevious: (): void => {
console.log('Previous button called');
},
showNext: true,
canGoNext: true,
nextLabel: 'next',
onNext: (): void => {
console.log('Next button called');
},
currentStep: 1,
totalSteps: 3,
fullWidthButton: true
}}
/> */}
<ContactSupportScreen />
</ReactRouterGuestGuard>
}
Expand Down
15 changes: 11 additions & 4 deletions login-workflow/src/screens/ContactScreen/ContactSupportScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { useAuthContext } from '../../contexts';
* Component renders a screen with contact information for support with the application.
* Contact information is pulled from the context passed into the workflow.
*
* @param title the title for the screen
* @param icon the icon to display in the header
* @param emailSupportTitle text to display as the contact support title
* @param emailSupportContent content to display as the contact support content
Expand All @@ -19,8 +18,6 @@ import { useAuthContext } from '../../contexts';
* @param contactPhone to display contact phone number
* @param dismissButtonLabel to display label for the button
* @param onDismiss function to call when user clicks button
* @param slots used for each slot in `ContactSupportScreen`
* @param slotProps applied to each slot
* @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component
* @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component
* @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component
Expand All @@ -36,10 +33,15 @@ export const ContactSupportScreen: React.FC<ContactSupportScreenProps> = (props)
const {
icon = <ChatBubbleOutline color={'primary'} sx={{ fontSize: 70 }} />,
emailSupportTitle = t('bluiAuth:CONTACT_SUPPORT.GENERAL_QUESTIONS'),
emailSupportContent,
phoneSupportTitle = t('bluiAuth:CONTACT_SUPPORT.EMERGENCY_SUPPORT'),
phoneSupportContent,
contactEmail = '[email protected]',
contactPhone = '1-800-123-4567',
dismissButtonLabel = t('bluiCommon:ACTIONS.OKAY'),
onDismiss,
WorkflowCardBaseProps,
WorkflowCardInstructionProps,
WorkflowCardHeaderProps,
WorkflowCardActionsProps,
} = props;
Expand All @@ -63,14 +65,19 @@ export const ContactSupportScreen: React.FC<ContactSupportScreenProps> = (props)

return (
<ContactSupportScreenBase
WorkflowCardBaseProps={WorkflowCardBaseProps}
WorkflowCardHeaderProps={workflowCardHeaderProps}
WorkflowCardInstructionProps={WorkflowCardInstructionProps}
WorkflowCardActionsProps={workflowCardActionsProps}
icon={icon}
emailSupportTitle={emailSupportTitle}
emailSupportContent={emailSupportContent}
phoneSupportTitle={phoneSupportTitle}
phoneSupportContent={phoneSupportContent}
contactEmail={contactEmail}
contactPhone={contactPhone}
dismissButtonLabel={dismissButtonLabel}
WorkflowCardActionsProps={workflowCardActionsProps}
onDismiss={onDismiss}
/>
);
};
3 changes: 0 additions & 3 deletions login-workflow/src/screens/ContactScreen/ContactSupportScreenBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import { LinkStyles } from '../../styles';
* Component renders a screen with contact information for support with the application.
* Contact information is pulled from the context passed into the workflow.
*
* @param title the title for the screen
* @param icon the icon to display in the header
* @param emailSupportTitle text to display as the contact support title
* @param emailSupportContent content to display as the contact support content
Expand All @@ -21,8 +20,6 @@ import { LinkStyles } from '../../styles';
* @param contactPhone to display contact phone number
* @param dismissButtonLabel to display label for the button
* @param onDismiss function to call when user clicks button
* @param slots used for each slot in `ContactScreen`
* @param slotProps applied to each slot
* @param WorkflowCardBaseProps props that will be passed to the WorkflowCard component
* @param WorkflowCardHeaderProps props that will be passed to the WorkflowCardHeader component
* @param WorkflowCardInstructionProps props that will be passed to the WorkflowCardInstructions component
Expand Down