From 300bfd6e693b711efe2c509a2b879c2fd0aef34e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ant=C3=B3nio=20Regadas?= <apregadas@gmail.com>
Date: Thu, 13 Apr 2023 11:14:44 +0100
Subject: [PATCH] [MMI] 2642 compliance modal component (#18410)

* adds component, styles and storybook file

* wip

* prettier and adds test

* prettier

* lint

* review fix

* lint

* updates to IconSize, IconName
---
 .../compliance-modal.test.js.snap             | 93 +++++++++++++++++++
 .../compliance-modal/compliance-modal.js      | 88 ++++++++++++++++++
 .../compliance-modal/compliance-modal.scss    |  6 ++
 .../compliance-modal.stories.js               | 22 +++++
 .../compliance-modal/compliance-modal.test.js | 55 +++++++++++
 .../institutional/compliance-modal/index.js   |  1 +
 6 files changed, 265 insertions(+)
 create mode 100644 ui/components/institutional/compliance-modal/__snapshots__/compliance-modal.test.js.snap
 create mode 100644 ui/components/institutional/compliance-modal/compliance-modal.js
 create mode 100644 ui/components/institutional/compliance-modal/compliance-modal.scss
 create mode 100644 ui/components/institutional/compliance-modal/compliance-modal.stories.js
 create mode 100644 ui/components/institutional/compliance-modal/compliance-modal.test.js
 create mode 100644 ui/components/institutional/compliance-modal/index.js

diff --git a/ui/components/institutional/compliance-modal/__snapshots__/compliance-modal.test.js.snap b/ui/components/institutional/compliance-modal/__snapshots__/compliance-modal.test.js.snap
new file mode 100644
index 000000000..60d85a469
--- /dev/null
+++ b/ui/components/institutional/compliance-modal/__snapshots__/compliance-modal.test.js.snap
@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ComplianceModal should render the correct content 1`] = `
+<div>
+  <div
+    class="modal-container"
+  >
+    <div
+      class="modal-container__content"
+    >
+      <div
+        class="box box--flex-direction-row"
+      >
+        <header
+          class="box box--display-flex box--flex-direction-row box--justify-content-space-between"
+        >
+          <div
+            class="box box--display-flex box--flex-direction-row box--justify-content-flex-start box--align-items-center"
+          >
+            <img
+              alt="Codefi Compliance"
+              height="32"
+              src="images/compliance-logo-small.svg"
+              width="32"
+            />
+            <h4
+              class="box mm-text mm-text--body-md box--margin-left-2 box--flex-direction-row box--color-text-default"
+            >
+              [codefiCompliance]
+            </h4>
+          </div>
+          <button
+            aria-label="[close]"
+            class="box mm-button-icon mm-button-icon--size-sm box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
+            data-testid="compliance-modal-close"
+          >
+            <span
+              class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
+              style="mask-image: url('./images/icons/close.svg');"
+            />
+          </button>
+        </header>
+        <p
+          class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-alternative"
+          data-testid="compliance-info"
+        >
+          [complianceBlurb0]
+        </p>
+        <p
+          class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-alternative"
+        >
+          [complianceBlurb1]
+        </p>
+        <p
+          class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-alternative"
+        >
+          [complianceBlurpStep0]
+        </p>
+        <ol
+          data-testid="compliance-bullets"
+        >
+          <li>
+            [complianceBlurbStep1]
+          </li>
+          <li>
+            [complianceBlurbStep2]
+          </li>
+          <li>
+            [complianceBlurbStep3]
+          </li>
+          <li>
+            [complianceBlurbStep4]
+          </li>
+          <li>
+            [complianceBlurbStep5]
+          </li>
+        </ol>
+      </div>
+    </div>
+    <div
+      class="modal-container__footer"
+    >
+      <button
+        class="button btn--rounded btn-primary modal-container__footer-button"
+        role="button"
+        tabindex="0"
+      >
+        [openCodefiCompliance]
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/ui/components/institutional/compliance-modal/compliance-modal.js b/ui/components/institutional/compliance-modal/compliance-modal.js
new file mode 100644
index 000000000..5bf2f2497
--- /dev/null
+++ b/ui/components/institutional/compliance-modal/compliance-modal.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { hideModal } from '../../../store/actions';
+import Modal from '../../app/modal';
+import Box from '../../ui/box';
+import { Text, ButtonIcon, IconSize, IconName } from '../../component-library';
+import {
+  AlignItems,
+  JustifyContent,
+  TextColor,
+  DISPLAY,
+} from '../../../helpers/constants/design-system';
+
+const ComplianceModal = () => {
+  const dispatch = useDispatch();
+  const t = useI18nContext();
+
+  const handleSubmit = () => {
+    global.platform.openTab({
+      url: 'https://start.compliance.codefi.network/',
+    });
+  };
+
+  const handleClose = () => dispatch(hideModal());
+
+  return (
+    <Modal
+      onClose={handleClose}
+      onSubmit={handleSubmit}
+      submitText={t('openCodefiCompliance')}
+      submitType="primary"
+    >
+      <Box>
+        <Box
+          as="header"
+          display={DISPLAY.FLEX}
+          justifyContent={JustifyContent.spaceBetween}
+        >
+          <Box
+            display={DISPLAY.FLEX}
+            justifyContent={JustifyContent.flexStart}
+            alignItems={AlignItems.center}
+          >
+            <img
+              height={32}
+              width={32}
+              src="images/compliance-logo-small.svg"
+              alt="Codefi Compliance"
+            />
+            <Text as="h4" marginLeft={2} color={TextColor.textDefault}>
+              {t('codefiCompliance')}
+            </Text>
+          </Box>
+          <ButtonIcon
+            data-testid="compliance-modal-close"
+            iconName={IconName.Close}
+            size={IconSize.Sm}
+            ariaLabel={t('close')}
+            onClick={handleClose}
+          />
+        </Box>
+        <Text
+          data-testid="compliance-info"
+          paddingBottom={3}
+          color={TextColor.textAlternative}
+        >
+          {t('complianceBlurb0')}
+        </Text>
+        <Text paddingBottom={3} color={TextColor.textAlternative}>
+          {t('complianceBlurb1')}
+        </Text>
+        <Text paddingBottom={3} color={TextColor.textAlternative}>
+          {t('complianceBlurpStep0')}
+        </Text>
+        <ol data-testid="compliance-bullets">
+          <li>{t('complianceBlurbStep1')}</li>
+          <li>{t('complianceBlurbStep2')}</li>
+          <li>{t('complianceBlurbStep3')}</li>
+          <li>{t('complianceBlurbStep4')}</li>
+          <li>{t('complianceBlurbStep5')}</li>
+        </ol>
+      </Box>
+    </Modal>
+  );
+};
+
+export default ComplianceModal;
diff --git a/ui/components/institutional/compliance-modal/compliance-modal.scss b/ui/components/institutional/compliance-modal/compliance-modal.scss
new file mode 100644
index 000000000..76570844e
--- /dev/null
+++ b/ui/components/institutional/compliance-modal/compliance-modal.scss
@@ -0,0 +1,6 @@
+.compliance-modal {
+  ol {
+    list-style: decimal;
+    list-style-position: inside;
+  }
+}
diff --git a/ui/components/institutional/compliance-modal/compliance-modal.stories.js b/ui/components/institutional/compliance-modal/compliance-modal.stories.js
new file mode 100644
index 000000000..5416daeba
--- /dev/null
+++ b/ui/components/institutional/compliance-modal/compliance-modal.stories.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import configureStore from '../../../store/store';
+import testData from '../../../../.storybook/test-data';
+import ComplianceModal from '.';
+
+const store = configureStore(testData);
+
+export default {
+  title: 'Components/Institutional/ComplianceModal',
+  decorators: [(story) => <Provider store={store}>{story()}</Provider>],
+  component: ComplianceModal,
+  argTypes: {
+    onClick: {
+      action: 'onClick',
+    },
+  },
+};
+
+export const DefaultStory = (args) => <ComplianceModal {...args} />;
+
+DefaultStory.storyName = 'ComplianceModal';
diff --git a/ui/components/institutional/compliance-modal/compliance-modal.test.js b/ui/components/institutional/compliance-modal/compliance-modal.test.js
new file mode 100644
index 000000000..259340edd
--- /dev/null
+++ b/ui/components/institutional/compliance-modal/compliance-modal.test.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { useDispatch } from 'react-redux';
+import sinon from 'sinon';
+import { hideModal } from '../../../store/actions';
+import ComplianceModal from '.';
+
+jest.mock('react-redux', () => ({
+  useDispatch: jest.fn(),
+}));
+
+jest.mock('../../../store/actions', () => ({
+  hideModal: jest.fn(),
+}));
+
+describe('ComplianceModal', () => {
+  let dispatchMock;
+
+  beforeEach(() => {
+    dispatchMock = jest.fn();
+    useDispatch.mockReturnValue(dispatchMock);
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should render the correct content', () => {
+    const { container, getByTestId } = render(<ComplianceModal />);
+
+    expect(getByTestId('compliance-info')).toBeInTheDocument();
+    expect(getByTestId('compliance-bullets')).toBeInTheDocument();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should close the modal when close button is clicked', () => {
+    const { getByTestId } = render(<ComplianceModal />);
+
+    fireEvent.click(getByTestId('compliance-modal-close'));
+
+    expect(hideModal).toHaveBeenCalled();
+    expect(dispatchMock).toHaveBeenCalledWith(hideModal());
+  });
+
+  it('should open the Compliance page when submit button is clicked', () => {
+    global.platform = { openTab: sinon.spy() };
+    const { container } = render(<ComplianceModal />);
+
+    const btn = container.getElementsByClassName('btn-primary')[0];
+
+    fireEvent.click(btn);
+
+    expect(global.platform.openTab.called).toBeTruthy();
+  });
+});
diff --git a/ui/components/institutional/compliance-modal/index.js b/ui/components/institutional/compliance-modal/index.js
new file mode 100644
index 000000000..04582c660
--- /dev/null
+++ b/ui/components/institutional/compliance-modal/index.js
@@ -0,0 +1 @@
+export { default } from './compliance-modal';