From 303e44abb30074a993c7354b4956a7063b9d2f2c Mon Sep 17 00:00:00 2001 From: Olajide Ogundipe Jr Date: Thu, 11 Jan 2018 13:13:14 -0500 Subject: [PATCH] Onboarding Modal (#611) * [WIP] Start port of V3 Modal * allow lambda functions in React Components * lint code * add null case for modalRef * fix action test * reduce onboard slide boilerplate * delete images and componentize OnboardSlide * comment out info onboarding message * fix merge conflict * fix prettier error * revert tslint file * fix type in modal * add translations to onboard modal * add in images, fix stlyes --- .../actions/onboardStatus/actionCreators.ts | 31 +++ common/actions/onboardStatus/actionTypes.ts | 24 +++ common/actions/onboardStatus/constants.ts | 6 + common/actions/onboardStatus/index.ts | 2 + common/assets/images/onboarding_icon-01.svg | 1 + common/assets/images/onboarding_icon-02.svg | 1 + common/assets/images/onboarding_icon-03.svg | 1 + common/assets/images/onboarding_icon-04.svg | 1 + common/assets/images/onboarding_icon-05.svg | 1 + common/assets/images/onboarding_icon-06.svg | 1 + common/assets/images/onboarding_icon-07.svg | 1 + common/assets/images/onboarding_icon-08.svg | 1 + common/assets/images/onboarding_icon-09.svg | 1 + common/assets/images/onboarding_icon-10.svg | 1 + common/components/Footer/index.tsx | 2 + common/components/ui/Modal.tsx | 22 +- .../components/BlockchainSlide.tsx | 20 ++ .../OnboardModal/components/FinalSlide.tsx | 97 +++++++++ .../components/InterfaceSlide.tsx | 22 ++ .../OnboardModal/components/NotABankSlide.tsx | 22 ++ .../OnboardModal/components/OnboardSlide.scss | 42 ++++ .../OnboardModal/components/OnboardSlide.tsx | 26 +++ .../components/SecureSlideOne.tsx | 28 +++ .../components/SecureSlideThree.tsx | 32 +++ .../components/SecureSlideTwo.tsx | 25 +++ .../OnboardModal/components/WelcomeSlide.scss | 12 ++ .../OnboardModal/components/WelcomeSlide.tsx | 34 ++++ .../OnboardModal/components/WhyMewSlide.tsx | 21 ++ .../OnboardModal/components/WhySlide.tsx | 30 +++ .../OnboardModal/components/index.ts | 10 + common/containers/OnboardModal/index.scss | 18 ++ common/containers/OnboardModal/index.tsx | 192 ++++++++++++++++++ common/reducers/index.ts | 4 + common/reducers/onboardStatus.ts | 51 +++++ common/translations/lang/ar.json | 97 ++++++++- common/translations/lang/de.json | 97 ++++++++- common/translations/lang/el.json | 97 ++++++++- common/translations/lang/en.json | 95 ++++++++- common/translations/lang/es.json | 97 ++++++++- common/translations/lang/fi.json | 97 ++++++++- common/translations/lang/fr.json | 97 ++++++++- common/translations/lang/ht.json | 97 ++++++++- common/translations/lang/hu.json | 97 ++++++++- common/translations/lang/id.json | 97 ++++++++- common/translations/lang/it.json | 97 ++++++++- common/translations/lang/ja.json | 97 ++++++++- common/translations/lang/ko.json | 97 ++++++++- common/translations/lang/nl.json | 97 ++++++++- common/translations/lang/no.json | 97 ++++++++- common/translations/lang/pl.json | 97 ++++++++- common/translations/lang/pt.json | 97 ++++++++- common/translations/lang/ru.json | 97 ++++++++- common/translations/lang/sk.json | 97 ++++++++- common/translations/lang/sl.json | 97 ++++++++- common/translations/lang/sv.json | 97 ++++++++- common/translations/lang/tr.json | 97 ++++++++- common/translations/lang/vi.json | 97 ++++++++- common/translations/lang/zhcn.json | 97 ++++++++- common/translations/lang/zhtw.json | 97 ++++++++- package.json | 1 + spec/actions/onboardStatus.spec.ts | 32 +++ spec/reducers/onboardStatus.spec.ts | 11 + 62 files changed, 3193 insertions(+), 57 deletions(-) create mode 100644 common/actions/onboardStatus/actionCreators.ts create mode 100644 common/actions/onboardStatus/actionTypes.ts create mode 100644 common/actions/onboardStatus/constants.ts create mode 100644 common/actions/onboardStatus/index.ts create mode 100644 common/assets/images/onboarding_icon-01.svg create mode 100644 common/assets/images/onboarding_icon-02.svg create mode 100644 common/assets/images/onboarding_icon-03.svg create mode 100644 common/assets/images/onboarding_icon-04.svg create mode 100644 common/assets/images/onboarding_icon-05.svg create mode 100644 common/assets/images/onboarding_icon-06.svg create mode 100644 common/assets/images/onboarding_icon-07.svg create mode 100644 common/assets/images/onboarding_icon-08.svg create mode 100644 common/assets/images/onboarding_icon-09.svg create mode 100644 common/assets/images/onboarding_icon-10.svg create mode 100644 common/containers/OnboardModal/components/BlockchainSlide.tsx create mode 100644 common/containers/OnboardModal/components/FinalSlide.tsx create mode 100644 common/containers/OnboardModal/components/InterfaceSlide.tsx create mode 100644 common/containers/OnboardModal/components/NotABankSlide.tsx create mode 100644 common/containers/OnboardModal/components/OnboardSlide.scss create mode 100644 common/containers/OnboardModal/components/OnboardSlide.tsx create mode 100644 common/containers/OnboardModal/components/SecureSlideOne.tsx create mode 100644 common/containers/OnboardModal/components/SecureSlideThree.tsx create mode 100644 common/containers/OnboardModal/components/SecureSlideTwo.tsx create mode 100644 common/containers/OnboardModal/components/WelcomeSlide.scss create mode 100644 common/containers/OnboardModal/components/WelcomeSlide.tsx create mode 100644 common/containers/OnboardModal/components/WhyMewSlide.tsx create mode 100644 common/containers/OnboardModal/components/WhySlide.tsx create mode 100644 common/containers/OnboardModal/components/index.ts create mode 100644 common/containers/OnboardModal/index.scss create mode 100644 common/containers/OnboardModal/index.tsx create mode 100644 common/reducers/onboardStatus.ts create mode 100644 spec/actions/onboardStatus.spec.ts create mode 100644 spec/reducers/onboardStatus.spec.ts diff --git a/common/actions/onboardStatus/actionCreators.ts b/common/actions/onboardStatus/actionCreators.ts new file mode 100644 index 00000000..fc0a40a9 --- /dev/null +++ b/common/actions/onboardStatus/actionCreators.ts @@ -0,0 +1,31 @@ +import * as interfaces from './actionTypes'; +import { TypeKeys } from './constants'; + +export type TStartOnboardSession = typeof startOnboardSession; +export function startOnboardSession(): interfaces.StartOnboardSessionAction { + return { + type: TypeKeys.START_ONBOARD_SESSION + }; +} + +export type TResumeSlide = typeof resumeSlide; +export function resumeSlide(slideNumber: number): interfaces.ResumeSlideAction { + return { + type: TypeKeys.RESUME_SLIDE, + slideNumber + }; +} + +export type TDecrementSlide = typeof decrementSlide; +export function decrementSlide(): interfaces.DecrementSlideAction { + return { + type: TypeKeys.DECREMENT_SLIDE + }; +} + +export type TIncrementSlide = typeof incrementSlide; +export function incrementSlide(): interfaces.IncrementSlideAction { + return { + type: TypeKeys.INCREMENT_SLIDE + }; +} diff --git a/common/actions/onboardStatus/actionTypes.ts b/common/actions/onboardStatus/actionTypes.ts new file mode 100644 index 00000000..a2eae24b --- /dev/null +++ b/common/actions/onboardStatus/actionTypes.ts @@ -0,0 +1,24 @@ +import { TypeKeys } from './constants'; + +export interface StartOnboardSessionAction { + type: TypeKeys.START_ONBOARD_SESSION; +} + +export interface ResumeSlideAction { + type: TypeKeys.RESUME_SLIDE; + slideNumber: number; +} + +export interface DecrementSlideAction { + type: TypeKeys.DECREMENT_SLIDE; +} + +export interface IncrementSlideAction { + type: TypeKeys.INCREMENT_SLIDE; +} + +export type OnboardStatusAction = + | StartOnboardSessionAction + | ResumeSlideAction + | DecrementSlideAction + | IncrementSlideAction; diff --git a/common/actions/onboardStatus/constants.ts b/common/actions/onboardStatus/constants.ts new file mode 100644 index 00000000..859e539a --- /dev/null +++ b/common/actions/onboardStatus/constants.ts @@ -0,0 +1,6 @@ +export enum TypeKeys { + START_ONBOARD_SESSION = 'START_ONBOARD_SESSION', + RESUME_SLIDE = 'RESUME_SLIDE', + DECREMENT_SLIDE = 'DECREMENT_SLIDE', + INCREMENT_SLIDE = 'INCREMENT_SLIDE' +} diff --git a/common/actions/onboardStatus/index.ts b/common/actions/onboardStatus/index.ts new file mode 100644 index 00000000..2608a18e --- /dev/null +++ b/common/actions/onboardStatus/index.ts @@ -0,0 +1,2 @@ +export * from './actionTypes'; +export * from './actionCreators'; diff --git a/common/assets/images/onboarding_icon-01.svg b/common/assets/images/onboarding_icon-01.svg new file mode 100644 index 00000000..3a26533b --- /dev/null +++ b/common/assets/images/onboarding_icon-01.svg @@ -0,0 +1 @@ +onboarding_icon-01 \ No newline at end of file diff --git a/common/assets/images/onboarding_icon-02.svg b/common/assets/images/onboarding_icon-02.svg new file mode 100644 index 00000000..8836f414 --- /dev/null +++ b/common/assets/images/onboarding_icon-02.svg @@ -0,0 +1 @@ +onboarding_icons \ No newline at end of file diff --git a/common/assets/images/onboarding_icon-03.svg b/common/assets/images/onboarding_icon-03.svg new file mode 100644 index 00000000..2966e1d3 --- /dev/null +++ b/common/assets/images/onboarding_icon-03.svg @@ -0,0 +1 @@ +onboarding_icons \ No newline at end of file diff --git a/common/assets/images/onboarding_icon-04.svg b/common/assets/images/onboarding_icon-04.svg new file mode 100644 index 00000000..6aaad3d8 --- /dev/null +++ b/common/assets/images/onboarding_icon-04.svg @@ -0,0 +1 @@ +onboarding_icons \ No newline at end of file diff --git a/common/assets/images/onboarding_icon-05.svg b/common/assets/images/onboarding_icon-05.svg new file mode 100644 index 00000000..2192d668 --- /dev/null +++ b/common/assets/images/onboarding_icon-05.svg @@ -0,0 +1 @@ +onboarding_icons \ No newline at end of file diff --git a/common/assets/images/onboarding_icon-06.svg b/common/assets/images/onboarding_icon-06.svg new file mode 100644 index 00000000..781c83d5 --- /dev/null +++ b/common/assets/images/onboarding_icon-06.svg @@ -0,0 +1 @@ +onboarding_icons \ No newline at end of file diff --git a/common/assets/images/onboarding_icon-07.svg b/common/assets/images/onboarding_icon-07.svg new file mode 100644 index 00000000..3505afb4 --- /dev/null +++ b/common/assets/images/onboarding_icon-07.svg @@ -0,0 +1 @@ +onboarding_icon-07 \ No newline at end of file diff --git a/common/assets/images/onboarding_icon-08.svg b/common/assets/images/onboarding_icon-08.svg new file mode 100644 index 00000000..3e27f52a --- /dev/null +++ b/common/assets/images/onboarding_icon-08.svg @@ -0,0 +1 @@ +onboarding_icons \ No newline at end of file diff --git a/common/assets/images/onboarding_icon-09.svg b/common/assets/images/onboarding_icon-09.svg new file mode 100644 index 00000000..566a9337 --- /dev/null +++ b/common/assets/images/onboarding_icon-09.svg @@ -0,0 +1 @@ +onboarding_icons \ No newline at end of file diff --git a/common/assets/images/onboarding_icon-10.svg b/common/assets/images/onboarding_icon-10.svg new file mode 100644 index 00000000..11a47ca3 --- /dev/null +++ b/common/assets/images/onboarding_icon-10.svg @@ -0,0 +1 @@ +onboarding_icons \ No newline at end of file diff --git a/common/components/Footer/index.tsx b/common/components/Footer/index.tsx index 2bd98259..26c054b3 100644 --- a/common/components/Footer/index.tsx +++ b/common/components/Footer/index.tsx @@ -14,6 +14,7 @@ import './index.scss'; import PreFooter from './PreFooter'; import Modal, { IButton } from 'components/ui/Modal'; import { NewTabLink } from 'components/ui'; +import OnboardModal from 'containers/OnboardModal'; const AffiliateTag = ({ link, text }: Link) => { return ( @@ -125,6 +126,7 @@ export default class Footer extends React.Component { const buttons: IButton[] = [{ text: 'Okay', type: 'default', onClick: this.closeModal }]; return (
+