diff --git a/ui/pages/institutional/institutional-entity-done-page/index.js b/ui/pages/institutional/institutional-entity-done-page/index.js new file mode 100644 index 000000000..ce802016b --- /dev/null +++ b/ui/pages/institutional/institutional-entity-done-page/index.js @@ -0,0 +1 @@ +export { default } from './institutional-entity-done-page'; diff --git a/ui/pages/institutional/institutional-entity-done-page/index.scss b/ui/pages/institutional/institutional-entity-done-page/index.scss new file mode 100644 index 000000000..d231a4e66 --- /dev/null +++ b/ui/pages/institutional/institutional-entity-done-page/index.scss @@ -0,0 +1,9 @@ +.institutional-entity-done { + &__img { + max-width: 250px; + max-height: 80px; + margin-top: 40px; + margin-bottom: 20px; + } +} + diff --git a/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.js b/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.js new file mode 100644 index 000000000..164724acf --- /dev/null +++ b/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.js @@ -0,0 +1,79 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { useSelector } from 'react-redux'; +import Button from '../../../components/ui/button'; +import { getMostRecentOverviewPage } from '../../../ducks/history/history'; +import { useI18nContext } from '../../../hooks/useI18nContext'; +import { Text } from '../../../components/component-library'; +import { + TextColor, + BorderRadius, + TypographyVariant, +} from '../../../helpers/constants/design-system'; +import Box from '../../../components/ui/box'; + +export default function InstitutionalEntityDonePage(props) { + const mostRecentOverviewPage = useSelector(getMostRecentOverviewPage); + const t = useI18nContext(); + const { history, location } = props; + const { state } = location; + + return ( + + + + + Entity image + + {state.title} + + + {state.description} + + + + + + + + + ); +} + +InstitutionalEntityDonePage.propTypes = { + history: PropTypes.object, + location: PropTypes.object, +}; diff --git a/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.stories.js b/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.stories.js new file mode 100644 index 000000000..7c7ea8df0 --- /dev/null +++ b/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.stories.js @@ -0,0 +1,26 @@ +import React from 'react'; +import InstitutionalEntityDonePage from '.'; + +export default { + title: 'Components/Institutional/InstitutionalEntityDonePage', + component: InstitutionalEntityDonePage, + args: { + history: { + push: () => { + /**/ + }, + }, + mostRecentOverviewPage: 'test', + location: { + state: { + imgSrc: './images/logo/metamask-fox.svg', + title: 'title', + description: 'description', + }, + }, + }, +}; + +export const DefaultStory = (args) => ; + +DefaultStory.storyName = 'InstitutionalEntityDonePage'; diff --git a/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.test.js b/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.test.js new file mode 100644 index 000000000..0b9d77dd6 --- /dev/null +++ b/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.test.js @@ -0,0 +1,59 @@ +import React from 'react'; +import { fireEvent, screen } from '@testing-library/react'; +import { renderWithProvider } from '../../../../test/jest'; +import configureStore from '../../../store/store'; +import mockState from '../../../../test/data/mock-state.json'; +import InstitutionalEntityDonePage from '.'; + +const props = { + history: { + push: jest.fn(), + }, + mostRecentOverviewPage: 'test', + location: { + state: { imgSrc: 'test', title: 'title', description: 'description' }, + }, +}; + +const render = () => { + const store = configureStore({ + ...mockState, + metamask: { + provider: { + type: 'test', + }, + }, + history: { + mostRecentOverviewPage: 'test', + }, + }); + + return renderWithProvider(, store); +}; + +describe('InstitutionalEntityDonePage', () => { + beforeEach(() => { + render(); + }); + + it('renders the component and shows the title', () => { + expect(screen.getByText(props.location.state.title)).toBeInTheDocument(); + }); + + it('renders the component and shows the description', () => { + expect( + screen.getByText(props.location.state.description), + ).toBeInTheDocument(); + }); + + it('renders the component and sets the image correctly', () => { + const image = screen.getByAltText('Entity image'); + expect(image.src).toContain(props.location.state.imgSrc); + }); + + it('calls history push on button click', () => { + const clickButton = screen.getByTestId('click-most-recent-overview-page'); + fireEvent.click(clickButton); + expect(props.history.push).toHaveBeenCalledTimes(1); + }); +});