diff --git a/common/components/ui/Modal.tsx b/common/components/ui/Modal.tsx
index afb515d9..53bdd2c2 100644
--- a/common/components/ui/Modal.tsx
+++ b/common/components/ui/Modal.tsx
@@ -10,11 +10,11 @@ export interface IButton {
}
interface Props {
isOpen?: boolean;
- title: string | React.ReactElement
;
+ title?: string | React.ReactElement;
disableButtons?: boolean;
children: any;
buttons?: IButton[];
- handleClose(): void;
+ handleClose?(): void;
}
export default class Modal extends Component {
@@ -44,12 +44,15 @@ export default class Modal extends Component {
-
-
{title}
-
-
+ {title && (
+
+
{title}
+
+
+ )}
+
{isOpen && children}
{hasButtons &&
{this.renderButtons()}
}
@@ -70,6 +73,9 @@ export default class Modal extends Component
{
}
if (ev.key === 'Escape' || ev.keyCode === 27) {
+ if (!this.props.handleClose) {
+ return;
+ }
this.props.handleClose();
}
};
diff --git a/common/containers/OnboardModal/components/BlockchainSlide.tsx b/common/containers/OnboardModal/components/BlockchainSlide.tsx
new file mode 100644
index 00000000..82fbd313
--- /dev/null
+++ b/common/containers/OnboardModal/components/BlockchainSlide.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import translate from 'translations';
+import OnboardSlide from './OnboardSlide';
+import onboardIconFour from 'assets/images/onboarding_icon-04.svg';
+
+const BlockchainSlide = () => {
+ const header = translate('ONBOARD_blockchain_title');
+ const content = (
+
+ - {translate('ONBOARD_blockchain_content__1')}
+ - {translate('ONBOARD_blockchain_content__2')}
+ - {translate('ONBOARD_blockchain_content__3')}
+ - {translate('ONBOARD_blockchain_content__4')}
+ - {translate('ONBOARD_blockchain_content__5')}
+ - {translate('ONBOARD_blockchain_content__6')}
+
+ );
+ return ;
+};
+export default BlockchainSlide;
diff --git a/common/containers/OnboardModal/components/FinalSlide.tsx b/common/containers/OnboardModal/components/FinalSlide.tsx
new file mode 100644
index 00000000..bd01369b
--- /dev/null
+++ b/common/containers/OnboardModal/components/FinalSlide.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import translate from 'translations';
+import { Link } from 'react-router-dom';
+import OnboardSlide from './OnboardSlide';
+import onboardIconTen from 'assets/images/onboarding_icon-10.svg';
+
+const FinalSlide = ({ closeModal }) => {
+ const header = (
+
+
{translate('ONBOARD_final_title')}
+
{translate('ONBOARD_final_subtitle')}
+
+
+ - {translate('ONBOARD_interface_content__1')}
+ - {translate('ONBOARD_interface_content__2')}
+ - {translate('ONBOARD_interface_content__3')}
+ - {translate('ONBOARD_interface_content__4')}
+ - {translate('ONBOARD_interface_content__5')}
+ - {translate('ONBOARD_interface_content__6')}
+ - {translate('ONBOARD_interface_content__7')}
+
+ );
+ return ;
+};
+export default InterfaceSlide;
diff --git a/common/containers/OnboardModal/components/NotABankSlide.tsx b/common/containers/OnboardModal/components/NotABankSlide.tsx
new file mode 100644
index 00000000..ff02661b
--- /dev/null
+++ b/common/containers/OnboardModal/components/NotABankSlide.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import translate from 'translations';
+import OnboardSlide from './OnboardSlide';
+import onboardIconTwo from 'assets/images/onboarding_icon-02.svg';
+
+const NotABankSlide = () => {
+ const header = translate('ONBOARD_bank_title');
+
+ const content = (
+
+ - {translate('ONBOARD_bank_content__1')}
+ - {translate('ONBOARD_bank_content__2')}
+ - {translate('ONBOARD_bank_content__3')}
+ - {translate('ONBOARD_bank_content__4')}
+ - {translate('ONBOARD_bank_content__5')}
+
+ );
+
+ return ;
+};
+
+export default NotABankSlide;
diff --git a/common/containers/OnboardModal/components/OnboardSlide.scss b/common/containers/OnboardModal/components/OnboardSlide.scss
new file mode 100644
index 00000000..350f8fb8
--- /dev/null
+++ b/common/containers/OnboardModal/components/OnboardSlide.scss
@@ -0,0 +1,42 @@
+@import 'common/sass/variables';
+@import 'common/sass/mixins';
+
+.OnboardSlide {
+ height: 400px;
+ width: 650px;
+
+ &-body {
+ display: flex;
+ }
+
+ &-content {
+ flex: 0.7;
+ }
+
+ &-image {
+ flex: 0.3;
+ }
+
+ &-header {
+ text-align: center;
+ }
+
+ @media screen and (max-width: $screen-xs) {
+ width: 100%;
+
+ &-body {
+ flex-direction: column;
+ }
+
+ &-content {
+ order: 2;
+ }
+
+ &-image {
+ order: 1;
+ align-self: center;
+ width: 130px;
+ max-height: 200px;
+ }
+ }
+}
diff --git a/common/containers/OnboardModal/components/OnboardSlide.tsx b/common/containers/OnboardModal/components/OnboardSlide.tsx
new file mode 100644
index 00000000..e8ee423d
--- /dev/null
+++ b/common/containers/OnboardModal/components/OnboardSlide.tsx
@@ -0,0 +1,26 @@
+import React, { ReactElement } from 'react';
+import './OnboardSlide.scss';
+
+interface Props {
+ header: ReactElement | string;
+ content: ReactElement;
+ slideImage: string;
+}
+
+class OnboardSlide extends React.Component {
+ public render() {
+ return (
+
+
{this.props.header}
+
+
+
+
+
+
+
+ {translate('ONBOARD_secure_1_title')}
+
+ );
+
+ const content = (
+
+
{translate('ONBOARD_secure_1_content__1')}
+
+ - {translate('ONBOARD_secure_1_content__2')}
+ - {translate('ONBOARD_secure_1_content__3')}
+ - {translate('ONBOARD_secure_1_content__4')}
+ - {translate('ONBOARD_secure_1_content__5')}
+ - {translate('ONBOARD_secure_1_content__6')}
+ - {translate('ONBOARD_secure_1_content__7')}
+
+
+
{translate('ONBOARD_secure_3_title')}
+
{translate('ONBOARD_secure_3_content__1')}
+
+
+ - {translate('ONBOARD_secure_3_content__2')}
+ - {translate('ONBOARD_secure_3_content__3')}
+ - {translate('ONBOARD_secure_3_content__4')}
+ - {translate('ONBOARD_secure_3_content__5')}
+ {site === 'cx' && - {translate('CX_Warning_1')}
}
+
+
{translate('ONBOARD_secure_3_content__6')}
+
+
{translate('ONBOARD_secure_2_title')}
+
{translate('ONBOARD_secure_2_content__1')}
+
+
+ - {translate('ONBOARD_secure_2_content__2')}
+ - {translate('ONBOARD_secure_2_content__3')}
+ - {translate('ONBOARD_secure_2_content__4')}
+ - {translate('ONBOARD_secure_2_content__5')}
+
+ );
+ return ;
+};
+export default SecureSlideTwo;
diff --git a/common/containers/OnboardModal/components/WelcomeSlide.scss b/common/containers/OnboardModal/components/WelcomeSlide.scss
new file mode 100644
index 00000000..5a5dc34b
--- /dev/null
+++ b/common/containers/OnboardModal/components/WelcomeSlide.scss
@@ -0,0 +1,12 @@
+@import 'common/sass/variables';
+@import 'common/sass/mixins';
+
+.WelcomeSlide {
+ &-alert {
+ font-weight: 500;
+ color: #e74c3c;
+ border-style: solid;
+ padding: 10px;
+ border-radius: 5px;
+ }
+}
diff --git a/common/containers/OnboardModal/components/WelcomeSlide.tsx b/common/containers/OnboardModal/components/WelcomeSlide.tsx
new file mode 100644
index 00000000..5f5f6d52
--- /dev/null
+++ b/common/containers/OnboardModal/components/WelcomeSlide.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import OnboardSlide from './OnboardSlide';
+import translate from 'translations';
+import onboardIconOne from 'assets/images/onboarding_icon-01.svg';
+
+import './WelcomeSlide.scss';
+
+const WelcomeSlide = () => {
+ const header = (
+
+ {translate('ONBOARD_welcome_title')}
+
+ {translate('ONBOARD_welcome_content__3')}
+
+ );
+ const content = (
+
+
+ {translate('ONBOARD_welcome_content__1')}
+ {translate('ONBOARD_welcome_content__2')}
+
+
{translate('ONBOARD_welcome_content__8')}
+
{translate('ONBOARD_welcome_content__4')}
+
+ - {translate('ONBOARD_welcome_content__5')}
+ - {translate('ONBOARD_welcome_content__6')}
+ - {translate('ONBOARD_welcome_content__7')}
+
+
+ - {translate('ONBOARD_whymew_content__1')}
+ - {translate('ONBOARD_whymew_content__2')}
+ - {translate('ONBOARD_whymew_content__3')}
+ - {translate('ONBOARD_whymew_content__4')}
+ - {translate('ONBOARD_whymew_content__5')}
+ - {translate('ONBOARD_whymew_content__6')}
+
+ );
+ return ;
+};
+export default WhyMewSlide;
diff --git a/common/containers/OnboardModal/components/WhySlide.tsx b/common/containers/OnboardModal/components/WhySlide.tsx
new file mode 100644
index 00000000..5a322f9e
--- /dev/null
+++ b/common/containers/OnboardModal/components/WhySlide.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import translate from 'translations';
+import OnboardSlide from './OnboardSlide';
+import onboardIconFive from 'assets/images/onboarding_icon-05.svg';
+
+const WhySlide = () => {
+ const header = translate('ONBOARD_why_title');
+
+ const content = (
+
+
{translate('ONBOARD_why_content__1')}
+
+ - {translate('ONBOARD_why_content__2')}
+ - {translate('ONBOARD_why_content__3')}
+ - {translate('ONBOARD_why_content__4')}
+ - {translate('ONBOARD_why_content__5')}
+ - {translate('ONBOARD_why_content__6')}
+
+
{translate('ONBOARD_why_content__7')}
+
+ - {translate('ONBOARD_why_content__8')}
+ - {translate('ONBOARD_why_content__9')}
+ - {translate('ONBOARD_why_content__10')}
+
+
+
+
+
+
+ {this.renderSlide()}
+
+