[MMI] Created institutional-entity-done-page component (#18096)

* Created institutional-entity-done-page component

* Added index file

* Added css file and Boxes

* Fixing prettier formatter

* Fixed prettier format

* Fixing prettier issues

* Fixed prettier

* Adding Text component

* Removed styles and added story

* Moving component to pages and improving styles

---------

Co-authored-by: António Regadas <apregadas@gmail.com>

ui/pages/institutional/institutional-entity-done-page/index.js

@@ -0,0 +1 @@
+export { default } from './institutional-entity-done-page';

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;
+  }
+}
+

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 (
+    <Box borderRadius={BorderRadius.none}>
+      <Box className="page-container__content">
+        <Box
+          paddingBottom={6}
+          paddingLeft={6}
+          paddingRight={6}
+          className="institutional-entity-done__form"
+        >
+          <Box
+            display={['flex']}
+            flexDirection={['column']}
+            alignItems={['center']}
+          >
+            <img
+              className="institutional-entity-done__img"
+              src={state.imgSrc}
+              alt="Entity image"
+            />
+            <Text
+              as="h4"
+              marginTop={4}
+              marginBottom={4}
+              color={TextColor.textDefault}
+            >
+              {state.title}
+            </Text>
+            <Text
+              as="p"
+              color={TextColor.textAlternative}
+              marginTop={2}
+              marginBottom={5}
+              variant={TypographyVariant.headingSm}
+            >
+              {state.description}
+            </Text>
+          </Box>
+        </Box>
+      </Box>
+      <Box className="page-container__footer">
+        <footer>
+          <Button
+            type="primary"
+            large
+            data-testid="click-most-recent-overview-page"
+            onClick={() => history.push(mostRecentOverviewPage)}
+          >
+            <Text>{t('close')}</Text>
+          </Button>
+        </footer>
+      </Box>
+    </Box>
+  );
+}
+
+InstitutionalEntityDonePage.propTypes = {
+  history: PropTypes.object,
+  location: PropTypes.object,
+};

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) => <InstitutionalEntityDonePage {...args} />;
+
+DefaultStory.storyName = 'InstitutionalEntityDonePage';

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(<InstitutionalEntityDonePage {...props} />, 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);
+  });
+});