From f7aea9dc341002427ddae7e37d72fc5a306e13a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Oliv=C3=A9?= <albertolivecorbella@gmail.com>
Date: Thu, 30 Mar 2023 08:33:12 +0200
Subject: [PATCH] [MMI] Created institutional-entity-done-page component
 (#18096)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 .../institutional-entity-done-page/index.js   |  1 +
 .../institutional-entity-done-page/index.scss |  9 +++
 .../institutional-entity-done-page.js         | 79 +++++++++++++++++++
 .../institutional-entity-done-page.stories.js | 26 ++++++
 .../institutional-entity-done-page.test.js    | 59 ++++++++++++++
 5 files changed, 174 insertions(+)
 create mode 100644 ui/pages/institutional/institutional-entity-done-page/index.js
 create mode 100644 ui/pages/institutional/institutional-entity-done-page/index.scss
 create mode 100644 ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.js
 create mode 100644 ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.stories.js
 create mode 100644 ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.test.js

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