From b26426e5cd58dd32bf4f20eb9a7a4ed4feed8b81 Mon Sep 17 00:00:00 2001
From: Mostafa Elgaafary <3999755+melgaafary@users.noreply.github.com>
Date: Fri, 28 Feb 2020 17:21:19 +0100
Subject: [PATCH 1/5] [ui] refactor: create a shared onboarding components for
 userflow and admin

---
 .../components/onboarding/dashboard-steps.js  |  73 +++++++++++
 packages/ui/components/onboarding/index.js    |  40 +++++++
 .../ui/components/onboarding/last-step-btn.js |  27 +++++
 .../components/onboarding/no-account-steps.js | 113 ++++++++++++++++++
 .../components/onboarding/tooltip-content.js  |  16 +++
 .../ui/components/onboarding/tour-ended.js    |   0
 6 files changed, 269 insertions(+)
 create mode 100644 packages/ui/components/onboarding/dashboard-steps.js
 create mode 100644 packages/ui/components/onboarding/index.js
 create mode 100644 packages/ui/components/onboarding/last-step-btn.js
 create mode 100644 packages/ui/components/onboarding/no-account-steps.js
 create mode 100644 packages/ui/components/onboarding/tooltip-content.js
 create mode 100644 packages/ui/components/onboarding/tour-ended.js

diff --git a/packages/ui/components/onboarding/dashboard-steps.js b/packages/ui/components/onboarding/dashboard-steps.js
new file mode 100644
index 000000000..9bba43ac0
--- /dev/null
+++ b/packages/ui/components/onboarding/dashboard-steps.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import ContentBox from './tooltip-content';
+
+export const ONBOARDING_SETTINGS_STEP = {
+  selector: '.settings-menu',
+  content: <ContentBox text="Start by adding your company's information." />,
+  className: 'settings-menu',
+};
+export const ONBOARDING_SETTINGS_FORM_STEP = {
+  selector: '.settings-form',
+  content: (
+    <ContentBox text="The information you provide here will be presented to consumers who use the webform." />
+  ),
+  className: 'settings-form',
+  redirect: '/settings/company',
+  action: () => {}, // for some reason this is needed for inputs to work
+};
+export const ONBOARDING_SETTINGS_SAVE_STEP = {
+  selector: '.settings-save-btn',
+  content: (
+    <ContentBox text="Save the changes you've made. They'll go live once your deploy your first version." />
+  ),
+  className: 'settings-save-btn',
+  redirect: '/settings/company',
+};
+export const ONBOARDING_INTEGRATIONS_STEP = {
+  selector: '.integrations',
+  content: (
+    <ContentBox text="Next, set up how you'll receive consumers' requests." />
+  ),
+  className: 'integrations',
+};
+export const ONBOARDING_DATA_REQUESTS_STEP = {
+  selector: '.data-requests',
+  content: (
+    <ContentBox text="You can choose to use our pre-configured Trello boards (recommended), or to use our Data Request Webhooks to set up your own integration into another ticket/task management software." />
+  ),
+  className: 'data-requests',
+  redirect: '/integrations',
+};
+export const ONBOARDING_CONNECT_TRELLO_STEP = {
+  selector: '.trello-connect',
+  content: (
+    <ContentBox text="Connect your Trello account. If you don't have one, don't worry, it's free and easy to set up; when you click 'Connect', Trello will guide you through the signup and connection process." />
+  ),
+  className: 'trello-connect',
+  redirect: '/integrations/requests/trello/connect',
+};
+export const ONBOARDING_TRELLO_CREATE_BOARDS_STEP = {
+  selector: '.trello-create-boards',
+  content: (
+    <ContentBox text="Click here to automatically add our DSR workflow templates to your Trello account. The boards come with a tutorial card to show you how to use them." />
+  ),
+  className: 'trello-create-boards',
+  redirect: '/integrations/requests/trello',
+};
+export const ONBOARDING_VIEW_DEPLOY = {
+  selector: '.deploy-view',
+  content: (
+    <ContentBox text="Here you can see the changes you made to your setup before they're active." />
+  ),
+  className: 'deploy-view',
+  redirect: '/deploy/new',
+};
+
+export const ONBOARDING_DEPLOY = {
+  selector: '.deploy',
+  content: (
+    <ContentBox text="Finally, you will need to deploy the changes you made to make them active. This helps you control when consumer-facing updates go live. (Note: unlike other settings, changes to 'Integrations' go live immediately.)" />
+  ),
+  className: 'deploy',
+  redirect: '/deploy/new',
+};
diff --git a/packages/ui/components/onboarding/index.js b/packages/ui/components/onboarding/index.js
new file mode 100644
index 000000000..907b34c17
--- /dev/null
+++ b/packages/ui/components/onboarding/index.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Box} from 'grommet';
+import Tour from 'reactour';
+import styled from 'styled-components';
+import ChevronRight from '../../svg/chevron-right.svg';
+import ChevronLeft from '../../svg/chevron-left.svg';
+import LastStep from './last-step-btn';
+
+const StyledTour = styled(Tour)`
+  nav {
+    flex-wrap: nowrap;
+  }
+`;
+
+export default function Onboarding({endTour, ...props}) {
+  return (
+    <StyledTour
+      showCloseButton={false}
+      disableDotsNavigation
+      rounded={18}
+      lastStepNextButton={<LastStep onClick={endTour} />}
+      nextButton={
+        <Box width="28px" height="28px">
+          <ChevronRight />
+        </Box>
+      }
+      prevButton={
+        <Box width="28px" height="28px">
+          <ChevronLeft />
+        </Box>
+      }
+      {...props}
+    />
+  );
+}
+
+Onboarding.propTypes = {
+  endTour: PropTypes.func.isRequired,
+};
diff --git a/packages/ui/components/onboarding/last-step-btn.js b/packages/ui/components/onboarding/last-step-btn.js
new file mode 100644
index 000000000..5618cdfe8
--- /dev/null
+++ b/packages/ui/components/onboarding/last-step-btn.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Box} from 'grommet';
+import Button from '../button';
+import FormattedText from '../formatted-text';
+
+const LastStep = ({onClick}) => (
+  <Box>
+    <Button
+      primary
+      onClick={onClick}
+      label={
+        <FormattedText
+          color="light-1"
+          id="on-boarding.last-step"
+          defaultMessage="Done"
+        />
+      }
+    />
+  </Box>
+);
+
+LastStep.propTypes = {
+  onClick: PropTypes.func.isRequired,
+};
+
+export default LastStep;
diff --git a/packages/ui/components/onboarding/no-account-steps.js b/packages/ui/components/onboarding/no-account-steps.js
new file mode 100644
index 000000000..4914f2d58
--- /dev/null
+++ b/packages/ui/components/onboarding/no-account-steps.js
@@ -0,0 +1,113 @@
+import React from 'react';
+import ContentBox from './tooltip-content';
+
+export const ONBOARDING_LANDING = {
+  selector: '.landing',
+  content: (
+    <ContentBox
+      text="Here the user has access to all the tools needed to make or manage requests."
+      subText="We will go through a request together."
+    />
+  ),
+  className: 'landing',
+  redirect: '/',
+};
+
+export const ONBOARDING_DATA_REQUEST = {
+  selector: '.data-request',
+  content: <ContentBox text="Start by clicking on make a data request" />,
+  className: 'data-request',
+  redirect: '/',
+};
+
+export const ONBOARDING_CONTACT_SECTIION = {
+  selector: '.contact',
+  content: (
+    <ContentBox text="Here your consumers will get your contact information." />
+  ),
+  className: 'contact',
+  redirect: '/',
+};
+
+export const ONBOARDING_REQUEST_TYPE = {
+  selector: '.request-type',
+  content: (
+    <ContentBox text="Your customers will be able to choose a request." />
+  ),
+  className: 'request-type',
+  redirect: '/request',
+};
+
+export const ONBOARDING_EMAIL = {
+  selector: '.email',
+  content: (
+    <ContentBox text="Here the user will enter their email addresses, they would like to confirm" />
+  ),
+  className: 'email',
+  redirect: '/request/delete',
+};
+
+export const ONBOARDING_PHONE = {
+  selector: '.phone',
+  content: (
+    <ContentBox text="Here the user will enter their phones, that they would like to confirm" />
+  ),
+  className: 'phone',
+  redirect: '/request/delete',
+};
+export const ONBOARDING_IDENTITY = {
+  selector: '.address',
+  content: (
+    <ContentBox text="Here the user will enter their identity to be confirmed" />
+  ),
+  className: 'address',
+  redirect: '/request/delete',
+};
+export const ONBOARDING_CONFIRMATION = {
+  selector: '.confirmation',
+  content: (
+    <ContentBox text="Here they can see all their contact details and their statuses" />
+  ),
+  className: 'confirmation',
+  redirect: '/confirm-identity/unconfirmed',
+};
+export const ONBOARDING_CONFIRMED_EMAIL = {
+  selector: '.confirmed',
+  content: <ContentBox text="This is a confirmed email example" />,
+  className: 'confirmed',
+  redirect: '/confirm-identity/unconfirmed',
+};
+export const ONBOARDING_PENDING_EMAIL = {
+  selector: '.pending',
+  content: <ContentBox text="This is a pending email example" />,
+  className: 'pending',
+  redirect: '/confirm-identity/unconfirmed',
+};
+export const ONBOARDING_CONFIRM_EMAIL = {
+  selector: '.confirm-email',
+  content: (
+    <ContentBox text="They can confirm their contact detail by clicking here" />
+  ),
+  className: 'confirm-email',
+  redirect: '/confirm-identity/unconfirmed',
+};
+export const ONBOARDING_DELETE_EMAIL = {
+  selector: '.delete-email',
+  content: <ContentBox text="Or they can delete this contact detail" />,
+  className: 'delete-email',
+  redirect: '/confirm-identity/unconfirmed',
+};
+export const ONBOARDING_ADD_MORE = {
+  selector: '.more',
+  content: <ContentBox text="You also can add more contact details" />,
+  className: 'more',
+  redirect: '/confirm-identity/unconfirmed',
+};
+export const ONBOARDING_CONFIRMED = {
+  selector: '.wait',
+  content: (
+    <ContentBox text="Finally, the request is submitted and sent your company." />
+  ),
+  className: 'wait',
+  redirect: '/wait/delete',
+};
diff --git a/packages/ui/components/onboarding/tooltip-content.js b/packages/ui/components/onboarding/tooltip-content.js
new file mode 100644
index 000000000..e872053f9
--- /dev/null
+++ b/packages/ui/components/onboarding/tooltip-content.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Box} from 'grommet';
+import FormattedText from '../formatted-text';
+
+const ContentBox = ({text}) => (
+  <Box width="90%">
+    <FormattedText id="on-boarding.content-title" defaultMessage={text} />
+  </Box>
+);
+
+ContentBox.propTypes = {
+  text: PropTypes.string.isRequired,
+};
+
+export default ContentBox;
diff --git a/packages/ui/components/onboarding/tour-ended.js b/packages/ui/components/onboarding/tour-ended.js
new file mode 100644
index 000000000..e69de29bb

From 0e81fdc0c24b9da9811dede735286e09faf4d5cc Mon Sep 17 00:00:00 2001
From: Mostafa Elgaafary <3999755+melgaafary@users.noreply.github.com>
Date: Fri, 28 Feb 2020 17:24:36 +0100
Subject: [PATCH 2/5] [no-account-app] feat: onboarding state for userflow

---
 packages/no-account-app/src/app.js            |  46 ++++-
 packages/no-account-app/src/index.js          |  13 +-
 .../src/screens/confirm-identity.js           |  57 +++++-
 .../src/screens/request-form.js               |   3 +
 .../no-account-app/src/state/onboarding.js    | 176 ++++++++++++++++++
 5 files changed, 287 insertions(+), 8 deletions(-)
 create mode 100644 packages/no-account-app/src/state/onboarding.js

diff --git a/packages/no-account-app/src/app.js b/packages/no-account-app/src/app.js
index d98ef9aae..a14985945 100644
--- a/packages/no-account-app/src/app.js
+++ b/packages/no-account-app/src/app.js
@@ -5,6 +5,10 @@ import {injectIntl} from 'react-intl';
 
 import Container from '@datawallet/ui/components/data-lookup/container';
 
+import Onboarding from '@datawallet/ui/components/onboarding/index';
+import TourEnded from '@datawallet/ui/modals/dashboard/tour-ended';
+
+import OnboardingState from './state/onboarding';
 import Theme from './state/theme';
 import Company from './state/company';
 
@@ -23,8 +27,20 @@ const App = ({intl}) => {
   const {publicData} = Company.useContainer();
   const {theme} = Theme.useContainer();
   const {brandSettings} = theme.global;
-
   const companyName = publicData && publicData.name;
+  const {
+    onBoardingStep,
+    tourOpen,
+    nextStep,
+    prevStep,
+    pauseTour,
+    endTour,
+    tourEnded,
+    startTour,
+    openTourEndedModal,
+    closeTourEndedModal,
+    ONBOARDING_STEPS,
+  } = OnboardingState.useContainer();
 
   return (
     <HelmetProvider>
@@ -37,6 +53,10 @@ const App = ({intl}) => {
         }}
         minBoxHeight="100vh"
         helpUrl={publicData && publicData.helpUrl}
+        showTour={!tourEnded && !openTourEndedModal}
+        tourEnded={tourEnded}
+        tourOpen={tourOpen}
+        startTour={() => startTour({delay: 1000})}
       >
         <Helmet
           title={intl.formatMessage(
@@ -46,7 +66,6 @@ const App = ({intl}) => {
             {companyName},
           )}
         />
-
         <Route exact path="/" component={Home} />
 
         <Route path="/existing/:email?" component={Existing} />
@@ -62,6 +81,29 @@ const App = ({intl}) => {
         <Route path="/confirm-identity/:id/phone" component={CheckPhone} />
 
         <Route path="/wait/:requestType" component={Wait} />
+        {openTourEndedModal && (
+          <>
+            <TourEnded
+              text="Your tour of the user flow has ended"
+              description=""
+              onDismiss={closeTourEndedModal}
+            />
+          </>
+        )}
+        {tourOpen && (
+          <Onboarding
+            onRequestClose={pauseTour}
+            isOpen={tourOpen}
+            steps={ONBOARDING_STEPS}
+            nextStep={() => nextStep({delay: 200})}
+            prevStep={() => prevStep({delay: 100})}
+            startAt={onBoardingStep}
+            goToStep={onBoardingStep}
+            endTour={endTour}
+            rounded={18}
+            scrollOffset={10}
+          />
+        )}
       </Container>
     </HelmetProvider>
   );
diff --git a/packages/no-account-app/src/index.js b/packages/no-account-app/src/index.js
index 21210e876..f1fdba3cf 100644
--- a/packages/no-account-app/src/index.js
+++ b/packages/no-account-app/src/index.js
@@ -9,6 +9,7 @@ import '@datawallet/ui/css/base.css';
 import App from './app';
 import Theme from './state/theme';
 import Company from './state/company';
+import Onboarding from './state/onboarding';
 
 function IntlApp({defaultMessages}) {
   const {messages} = Intl.useContainer();
@@ -31,11 +32,13 @@ export default function Root({messages}) {
   return (
     <Router>
       <Intl.Provider>
-        <Company.Provider>
-          <Theme.Provider>
-            <IntlApp defaultMessages={messages} />
-          </Theme.Provider>
-        </Company.Provider>
+        <Onboarding.Provider>
+          <Company.Provider>
+            <Theme.Provider>
+              <IntlApp defaultMessages={messages} />
+            </Theme.Provider>
+          </Company.Provider>
+        </Onboarding.Provider>
       </Intl.Provider>
     </Router>
   );
diff --git a/packages/no-account-app/src/screens/confirm-identity.js b/packages/no-account-app/src/screens/confirm-identity.js
index 24cce41b8..7c9083189 100644
--- a/packages/no-account-app/src/screens/confirm-identity.js
+++ b/packages/no-account-app/src/screens/confirm-identity.js
@@ -18,6 +18,7 @@ import {
   updateUserIdentity,
   startLookupProcess,
 } from '../services/data-lookup';
+import OnboardingState from '../state/onboarding';
 
 const ConfirmIdentityContainer = ({history, match}) => {
   const {id} = match.params;
@@ -47,11 +48,65 @@ const ConfirmIdentityContainer = ({history, match}) => {
     status,
     requestStatus,
   } = request;
+  const {dummyUser} = OnboardingState.useContainer();
 
   const fetchUser = useCallback(async () => {
+    if (dummyUser && id === 'unconfirmed') {
+      setRequest({
+        status: 'pending',
+        requestType: 'delete',
+        requestStatus: 'pending',
+        emails: [
+          {id: 'dummy@datawallet.com', status: 'confirmed'},
+          {id: 'dummy@datawallet.com', status: 'pending'},
+        ],
+        phones: [{id: '+13224324234', status: 'confirmed'}],
+        addresses: [
+          {
+            line1: 'Dummy address1',
+            line2: 'Dummy address2',
+            zip: '12345',
+            state: 'DU',
+            status: 'confirmed',
+          },
+        ],
+        identity: {
+          firstName: 'dummy first name',
+          lastName: 'dummy last name',
+          middleNames: 'dummy middle name',
+        },
+      });
+
+      return;
+    }
+    if (dummyUser && id === 'confirmed') {
+      setRequest({
+        status: 'confirmed',
+        requestType: 'delete',
+        requestStatus: 'confirmed',
+        emails: [{id: 'dummy@datawallet.com', status: 'confirmed'}],
+        phones: [{id: '+13224324234', status: 'confirmed'}],
+        addresses: [
+          {
+            line1: 'Dummy address1',
+            line2: 'Dummy address2',
+            zip: '12345',
+            state: 'DU',
+            status: 'confirmed',
+          },
+        ],
+        identity: {
+          firstName: 'dummy first name',
+          lastName: 'dummy last name',
+          middleNames: 'dummy middle name',
+        },
+      });
+
+      return;
+    }
     const user = await retrieveUserData(id);
     setRequest(user);
-  }, [id]);
+  }, [id, dummyUser]);
 
   useEffect(() => {
     if (id) {
diff --git a/packages/no-account-app/src/screens/request-form.js b/packages/no-account-app/src/screens/request-form.js
index e396c177c..53265c7af 100644
--- a/packages/no-account-app/src/screens/request-form.js
+++ b/packages/no-account-app/src/screens/request-form.js
@@ -8,6 +8,7 @@ import RequestForm from '@datawallet/ui/screens/data-lookup/request-form';
 import Back from '@datawallet/ui/components/back';
 
 import Company from '../state/company';
+import OnboardingState from '../state/onboarding';
 import {sendRequestForm} from '../services/data-lookup';
 
 const recaptchaSiteKey = process.env.RECAPTCHA_SITE_KEY;
@@ -18,6 +19,7 @@ const RequestFormContainer = ({
   match,
 }) => {
   const {publicData} = Company.useContainer();
+  const {dummyUser} = OnboardingState.useContainer();
   const {privacyUrl} = publicData;
   const {requestType} = match.params;
   const [submitting, setSubmitting] = useState(false);
@@ -54,6 +56,7 @@ const RequestFormContainer = ({
         modules={getAvailableModules(requestType)}
         requiredIdentityPieces={minRequirements(requestType)}
         recaptchaSiteKey={recaptchaSiteKey}
+        dummyUser={dummyUser}
       />
     </>
   );
diff --git a/packages/no-account-app/src/state/onboarding.js b/packages/no-account-app/src/state/onboarding.js
new file mode 100644
index 000000000..9f9ac6972
--- /dev/null
+++ b/packages/no-account-app/src/state/onboarding.js
@@ -0,0 +1,176 @@
+import {useState, useEffect} from 'react';
+import {useHistory, useLocation} from 'react-router';
+import {createContainer} from 'unstated-next';
+import {
+  ONBOARDING_LANDING,
+  ONBOARDING_REQUEST_TYPE,
+  ONBOARDING_CONTACT_SECTIION,
+  ONBOARDING_EMAIL,
+  ONBOARDING_IDENTITY,
+  ONBOARDING_PHONE,
+  ONBOARDING_CONFIRMATION,
+  ONBOARDING_CONFIRMED_EMAIL,
+  ONBOARDING_PENDING_EMAIL,
+  ONBOARDING_ADD_MORE,
+  ONBOARDING_CONFIRM_EMAIL,
+  ONBOARDING_DELETE_EMAIL,
+  ONBOARDING_CONFIRMED,
+} from '@datawallet/ui/components/onboarding/no-account-steps';
+import {
+  ONBOARDING_STEP,
+  ONBOARDING_ENDED,
+  ONBOARDING_ENDED_MODAL,
+  ONBOARDING_TOUR_OPEN,
+} from '@datawallet/constants/onboarding';
+
+const ONBOARDING_DELAY = 1000;
+export const ONBOARDING_NEXT = 'NEXT';
+export const ONBOARDING_PREV = 'PREV';
+
+export function useOnboarding() {
+  const {push: redirect} = useHistory();
+  const {pathname} = useLocation();
+  const [tourOpen, setTourOpen] = useState(
+    localStorage.getItem(ONBOARDING_TOUR_OPEN) === 'true',
+  );
+  const localStorageStep = localStorage.getItem(ONBOARDING_STEP);
+  const [onBoardingStep, setOnBoardingStep] = useState(
+    localStorageStep ? Number(localStorageStep) : 0,
+  );
+  const [action, setAction] = useState(null);
+  const [dummyUser, setDummyUser] = useState(true);
+  const [tourEnded, setTourEnded] = useState(
+    localStorage.getItem(ONBOARDING_ENDED) === 'true',
+  );
+
+  const ONBOARDING_STEPS = [
+    ONBOARDING_LANDING,
+    ONBOARDING_CONTACT_SECTIION,
+    ONBOARDING_REQUEST_TYPE,
+    ONBOARDING_EMAIL,
+    ONBOARDING_PHONE,
+    ONBOARDING_IDENTITY,
+    ONBOARDING_CONFIRMATION,
+    ONBOARDING_CONFIRMED_EMAIL,
+    ONBOARDING_PENDING_EMAIL,
+    ONBOARDING_CONFIRM_EMAIL,
+    ONBOARDING_DELETE_EMAIL,
+    ONBOARDING_ADD_MORE,
+    ONBOARDING_CONFIRMED,
+  ];
+  const skip = () => {
+    setDummyUser(true);
+    redirect('/confirm-identity/dummy');
+    // setOnBoardingStep()
+  };
+
+  const [openTourEndedModal, setTourEndedModal] = useState(
+    localStorage.getItem(ONBOARDING_ENDED_MODAL) === 'true',
+  );
+
+  useEffect(() => {
+    localStorage.setItem(ONBOARDING_STEP, onBoardingStep);
+  }, [onBoardingStep]);
+  useEffect(() => {
+    localStorage.setItem(ONBOARDING_TOUR_OPEN, tourOpen);
+  }, [tourOpen]);
+  useEffect(() => {
+    localStorage.setItem(ONBOARDING_ENDED, tourEnded);
+  }, [tourEnded]);
+  useEffect(() => {
+    localStorage.setItem(ONBOARDING_ENDED_MODAL, openTourEndedModal);
+  }, [openTourEndedModal]);
+
+  const prevStep = ({delay}) => {
+    const prev = onBoardingStep - 1;
+    setOnBoardingStep(prev);
+    if (ONBOARDING_STEPS[prev].redirect) {
+      setTourOpen(false);
+      redirect(ONBOARDING_STEPS[prev].redirect);
+      if (delay) {
+        setTimeout(() => setTourOpen(true), delay);
+      } else {
+        setTourOpen(true);
+      }
+    }
+    setAction(ONBOARDING_PREV);
+  };
+
+  const pauseTour = () => {
+    setTourOpen(false);
+    setDummyUser(false);
+  };
+  const startTour = ({delay}) => {
+    if (
+      ONBOARDING_STEPS[onBoardingStep] &&
+      pathname !== ONBOARDING_STEPS[onBoardingStep].redirect
+    ) {
+      redirect(ONBOARDING_STEPS[onBoardingStep].redirect);
+    }
+    if (!onBoardingStep) {
+      setOnBoardingStep(0);
+      setTourEnded(false);
+    }
+
+    setDummyUser(true);
+    if (delay) {
+      setTimeout(() => setTourOpen(true), ONBOARDING_DELAY);
+    } else {
+      setTourOpen(true);
+    }
+  };
+
+  const endTour = () => {
+    setTourEnded(true);
+    setTourEndedModal(true);
+    setTourOpen(false);
+    setOnBoardingStep(null);
+    setDummyUser(false);
+    redirect('/');
+  };
+
+  const nextStep = ({delay}) => {
+    const next = onBoardingStep + 1;
+    if (next >= ONBOARDING_STEPS.length) {
+      return endTour();
+    }
+    setOnBoardingStep(next);
+    if (ONBOARDING_STEPS[next].redirect) {
+      setTourOpen(false);
+      redirect(ONBOARDING_STEPS[next].redirect);
+      if (delay) {
+        setTimeout(() => setTourOpen(true), delay);
+      } else {
+        setTourOpen(true);
+      }
+    }
+    return setAction(ONBOARDING_NEXT);
+  };
+
+  const closeTourEndedModal = () => {
+    setTourEndedModal(false);
+  };
+  return {
+    tourEnded,
+    setTourEnded,
+    onBoardingStep,
+    setOnBoardingStep,
+    tourOpen,
+    setTourOpen,
+    openTourEndedModal,
+    setTourEndedModal,
+    nextStep,
+    prevStep,
+    pauseTour,
+    startTour,
+    endTour,
+    action,
+    closeTourEndedModal,
+    skip,
+    dummyUser,
+    ONBOARDING_STEPS,
+  };
+}
+
+const Onboarding = createContainer(useOnboarding);
+export default Onboarding;

From 9680034168c8637fff284beb2142d36672ea140e Mon Sep 17 00:00:00 2001
From: Mostafa Elgaafary <3999755+melgaafary@users.noreply.github.com>
Date: Fri, 28 Feb 2020 17:30:42 +0100
Subject: [PATCH 3/5] [ui] feat: add user flow class names, adjust tour ended
 modal to work for both admin and userflow

---
 .../__snapshots__/storyshots.test.js.snap     | 118 +++++++++---------
 .../ui/components/data-lookup/confirmation.js |  13 ++
 .../ui/components/data-lookup/container.js    |  75 +++++++++--
 .../ui/components/data-lookup/email-form.js   |   2 +
 .../components/data-lookup/identity-form.js   |   2 +
 .../ui/components/data-lookup/phone-form.js   |   2 +
 packages/ui/modals/dashboard/tour-ended.js    |  18 +--
 .../screens/data-lookup/confirm-identity.js   |  12 +-
 packages/ui/screens/data-lookup/home.js       |  13 +-
 .../data-lookup/select-request-type.js        |   2 +
 packages/ui/screens/data-lookup/wait.js       |   3 +-
 11 files changed, 182 insertions(+), 78 deletions(-)

diff --git a/packages/storybook/__snapshots__/storyshots.test.js.snap b/packages/storybook/__snapshots__/storyshots.test.js.snap
index 8e57362c5..207f48647 100644
--- a/packages/storybook/__snapshots__/storyshots.test.js.snap
+++ b/packages/storybook/__snapshots__/storyshots.test.js.snap
@@ -20150,7 +20150,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - Already submitted + f
     }
   >
     <div
-      className="StyledBox-sc-13pk1d4-0 dRlbHM"
+      className="StyledBox-sc-13pk1d4-0 dRlbHM confirmation"
     >
       <div
         className="StyledBox-sc-13pk1d4-0 eSZGCr"
@@ -20203,7 +20203,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - Already submitted + f
               className="StyledBox-sc-13pk1d4-0 ebGLoQ"
             >
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -20236,7 +20236,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - Already submitted + f
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -20269,7 +20269,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - Already submitted + f
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -20302,7 +20302,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - Already submitted + f
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -20331,7 +20331,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - Already submitted + f
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -20360,7 +20360,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - Already submitted + f
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -20389,7 +20389,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - Already submitted + f
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -20418,7 +20418,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - Already submitted + f
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -20494,7 +20494,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - Already submitted + p
     }
   >
     <div
-      className="StyledBox-sc-13pk1d4-0 dRlbHM"
+      className="StyledBox-sc-13pk1d4-0 dRlbHM confirmation"
     >
       <div
         className="StyledBox-sc-13pk1d4-0 eSZGCr"
@@ -20547,7 +20547,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - Already submitted + p
               className="StyledBox-sc-13pk1d4-0 ebGLoQ"
             >
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -20580,7 +20580,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - Already submitted + p
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -20613,7 +20613,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - Already submitted + p
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -20646,7 +20646,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - Already submitted + p
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -20675,7 +20675,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - Already submitted + p
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -20704,7 +20704,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - Already submitted + p
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -20733,7 +20733,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - Already submitted + p
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -20762,7 +20762,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - Already submitted + p
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -20838,7 +20838,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - incomplete 1`] = `
     }
   >
     <div
-      className="StyledBox-sc-13pk1d4-0 dRlbHM"
+      className="StyledBox-sc-13pk1d4-0 dRlbHM confirmation"
     >
       <div
         className="StyledBox-sc-13pk1d4-0 eSZGCr"
@@ -20882,7 +20882,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - incomplete 1`] = `
               className="StyledBox-sc-13pk1d4-0 ebGLoQ"
             >
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -20915,7 +20915,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - incomplete 1`] = `
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 hyWTLS"
+                className="StyledBox-sc-13pk1d4-0 hyWTLS pending"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -20937,7 +20937,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - incomplete 1`] = `
                   className="StyledBox-sc-13pk1d4-0 eQTSO"
                 >
                   <div
-                    className="StyledBox-sc-13pk1d4-0 jtcEuK sc-bwzfXH dypfth"
+                    className="StyledBox-sc-13pk1d4-0 jtcEuK sc-bwzfXH dypfth confirm-email"
                     disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -20965,7 +20965,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - incomplete 1`] = `
                     </button>
                   </div>
                   <div
-                    className="StyledBox-sc-13pk1d4-0 jxxAoZ"
+                    className="StyledBox-sc-13pk1d4-0 jxxAoZ delete-email"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -20993,7 +20993,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - incomplete 1`] = `
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -21026,7 +21026,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - incomplete 1`] = `
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -21055,7 +21055,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - incomplete 1`] = `
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 hyWTLS"
+                className="StyledBox-sc-13pk1d4-0 hyWTLS pending"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -21073,7 +21073,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - incomplete 1`] = `
                   className="StyledBox-sc-13pk1d4-0 eQTSO"
                 >
                   <div
-                    className="StyledBox-sc-13pk1d4-0 jtcEuK sc-bwzfXH dypfth"
+                    className="StyledBox-sc-13pk1d4-0 jtcEuK sc-bwzfXH dypfth confirm-email"
                     disabled={false}
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -21101,7 +21101,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - incomplete 1`] = `
                     </button>
                   </div>
                   <div
-                    className="StyledBox-sc-13pk1d4-0 jxxAoZ"
+                    className="StyledBox-sc-13pk1d4-0 jxxAoZ delete-email"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -21129,7 +21129,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - incomplete 1`] = `
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -21173,7 +21173,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - incomplete 1`] = `
           }
         >
           <div
-            className="StyledBox-sc-13pk1d4-0 iukTWr"
+            className="StyledBox-sc-13pk1d4-0 iukTWr more"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -21248,7 +21248,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - ready to submit 1`] =
     }
   >
     <div
-      className="StyledBox-sc-13pk1d4-0 dRlbHM"
+      className="StyledBox-sc-13pk1d4-0 dRlbHM confirmation"
     >
       <div
         className="StyledBox-sc-13pk1d4-0 eSZGCr"
@@ -21361,7 +21361,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - ready to submit 1`] =
               className="StyledBox-sc-13pk1d4-0 ebGLoQ"
             >
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -21394,7 +21394,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - ready to submit 1`] =
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -21427,7 +21427,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - ready to submit 1`] =
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -21460,7 +21460,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - ready to submit 1`] =
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -21489,7 +21489,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - ready to submit 1`] =
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -21518,7 +21518,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - ready to submit 1`] =
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -21547,7 +21547,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - ready to submit 1`] =
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -21576,7 +21576,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - ready to submit 1`] =
                 </div>
               </div>
               <div
-                className="StyledBox-sc-13pk1d4-0 ckPCcc"
+                className="StyledBox-sc-13pk1d4-0 ckPCcc confirmed"
               >
                 <div
                   className="StyledBox-sc-13pk1d4-0 hDyFtJ"
@@ -21620,7 +21620,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - ready to submit 1`] =
           }
         >
           <div
-            className="StyledBox-sc-13pk1d4-0 iukTWr"
+            className="StyledBox-sc-13pk1d4-0 iukTWr more"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -22117,7 +22117,7 @@ exports[`Storyshots Screens/Data Lookup Home - French 1`] = `
               }
             >
               <div
-                className="StyledBox-sc-13pk1d4-0 kppPuL"
+                className="StyledBox-sc-13pk1d4-0 kppPuL landing"
               >
                 <span
                   className="StyledText-sc-1sadyjn-0 hgwdEj"
@@ -22138,7 +22138,7 @@ exports[`Storyshots Screens/Data Lookup Home - French 1`] = `
                   className="StyledBox__StyledBoxGap-sc-13pk1d4-1 emGXGb"
                 />
                 <div
-                  className="StyledBox-sc-13pk1d4-0 ihumGV sc-bwzfXH gOlZqD"
+                  className="StyledBox-sc-13pk1d4-0 ihumGV sc-bwzfXH gOlZqD data-request"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -22236,7 +22236,7 @@ exports[`Storyshots Screens/Data Lookup Home - French 1`] = `
           className="StyledBox-sc-13pk1d4-0 koruWX"
         >
           <div
-            className="StyledBox-sc-13pk1d4-0 eSZGCr"
+            className="StyledBox-sc-13pk1d4-0 eSZGCr contact"
             style={
               Object {
                 "position": "relative",
@@ -22419,7 +22419,7 @@ exports[`Storyshots Screens/Data Lookup Home 1`] = `
               }
             >
               <div
-                className="StyledBox-sc-13pk1d4-0 kppPuL"
+                className="StyledBox-sc-13pk1d4-0 kppPuL landing"
               >
                 <span
                   className="StyledText-sc-1sadyjn-0 hgwdEj"
@@ -22440,7 +22440,7 @@ exports[`Storyshots Screens/Data Lookup Home 1`] = `
                   className="StyledBox__StyledBoxGap-sc-13pk1d4-1 emGXGb"
                 />
                 <div
-                  className="StyledBox-sc-13pk1d4-0 ihumGV sc-bwzfXH gOlZqD"
+                  className="StyledBox-sc-13pk1d4-0 ihumGV sc-bwzfXH gOlZqD data-request"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -22538,7 +22538,7 @@ exports[`Storyshots Screens/Data Lookup Home 1`] = `
           className="StyledBox-sc-13pk1d4-0 koruWX"
         >
           <div
-            className="StyledBox-sc-13pk1d4-0 eSZGCr"
+            className="StyledBox-sc-13pk1d4-0 eSZGCr contact"
             style={
               Object {
                 "position": "relative",
@@ -23158,7 +23158,7 @@ exports[`Storyshots Screens/Data Lookup Request Form - at least three data sourc
       </div>
       <div>
         <div
-          className="StyledBox-sc-13pk1d4-0 eSZGCr"
+          className="StyledBox-sc-13pk1d4-0 eSZGCr email"
           style={
             Object {
               "position": "relative",
@@ -23282,7 +23282,7 @@ exports[`Storyshots Screens/Data Lookup Request Form - at least three data sourc
       </div>
       <div>
         <div
-          className="StyledBox-sc-13pk1d4-0 eSZGCr"
+          className="StyledBox-sc-13pk1d4-0 eSZGCr phone"
           style={
             Object {
               "position": "relative",
@@ -23399,7 +23399,7 @@ exports[`Storyshots Screens/Data Lookup Request Form - at least three data sourc
       </div>
       <div>
         <div
-          className="StyledBox-sc-13pk1d4-0 eSZGCr"
+          className="StyledBox-sc-13pk1d4-0 eSZGCr address"
           style={
             Object {
               "position": "relative",
@@ -23646,7 +23646,7 @@ exports[`Storyshots Screens/Data Lookup Request Form - fetching 1`] = `
       </div>
       <div>
         <div
-          className="StyledBox-sc-13pk1d4-0 eSZGCr"
+          className="StyledBox-sc-13pk1d4-0 eSZGCr email"
           style={
             Object {
               "position": "relative",
@@ -23765,7 +23765,7 @@ exports[`Storyshots Screens/Data Lookup Request Form - fetching 1`] = `
       </div>
       <div>
         <div
-          className="StyledBox-sc-13pk1d4-0 eSZGCr"
+          className="StyledBox-sc-13pk1d4-0 eSZGCr phone"
           style={
             Object {
               "position": "relative",
@@ -23882,7 +23882,7 @@ exports[`Storyshots Screens/Data Lookup Request Form - fetching 1`] = `
       </div>
       <div>
         <div
-          className="StyledBox-sc-13pk1d4-0 eSZGCr"
+          className="StyledBox-sc-13pk1d4-0 eSZGCr address"
           style={
             Object {
               "position": "relative",
@@ -24124,7 +24124,7 @@ exports[`Storyshots Screens/Data Lookup Request Form 1`] = `
       </div>
       <div>
         <div
-          className="StyledBox-sc-13pk1d4-0 eSZGCr"
+          className="StyledBox-sc-13pk1d4-0 eSZGCr email"
           style={
             Object {
               "position": "relative",
@@ -24243,7 +24243,7 @@ exports[`Storyshots Screens/Data Lookup Request Form 1`] = `
       </div>
       <div>
         <div
-          className="StyledBox-sc-13pk1d4-0 eSZGCr"
+          className="StyledBox-sc-13pk1d4-0 eSZGCr phone"
           style={
             Object {
               "position": "relative",
@@ -24360,7 +24360,7 @@ exports[`Storyshots Screens/Data Lookup Request Form 1`] = `
       </div>
       <div>
         <div
-          className="StyledBox-sc-13pk1d4-0 eSZGCr"
+          className="StyledBox-sc-13pk1d4-0 eSZGCr address"
           style={
             Object {
               "position": "relative",
@@ -24565,7 +24565,7 @@ exports[`Storyshots Screens/Data Lookup Select request type - preselected 1`] =
     }
   >
     <div
-      className="StyledBox-sc-13pk1d4-0 hrBngI"
+      className="StyledBox-sc-13pk1d4-0 hrBngI request-type"
     >
       <div
         className="StyledBox-sc-13pk1d4-0 eSZGCr"
@@ -25020,7 +25020,7 @@ exports[`Storyshots Screens/Data Lookup Select request type 1`] = `
     }
   >
     <div
-      className="StyledBox-sc-13pk1d4-0 hrBngI"
+      className="StyledBox-sc-13pk1d4-0 hrBngI request-type"
     >
       <div
         className="StyledBox-sc-13pk1d4-0 eSZGCr"
@@ -25507,7 +25507,7 @@ exports[`Storyshots Screens/Data Lookup Waiting room 1`] = `
         </a>
       </div>
       <div
-        className="StyledBox-sc-13pk1d4-0 dewqKv"
+        className="StyledBox-sc-13pk1d4-0 dewqKv wait"
       >
         <div
           className="StyledBox-sc-13pk1d4-0 eSZGCr"
@@ -25678,7 +25678,7 @@ exports[`Storyshots Screens/Data Lookup Waiting room, but not that long 1`] = `
         </a>
       </div>
       <div
-        className="StyledBox-sc-13pk1d4-0 dewqKv"
+        className="StyledBox-sc-13pk1d4-0 dewqKv wait"
       >
         <div
           className="StyledBox-sc-13pk1d4-0 eSZGCr"
diff --git a/packages/ui/components/data-lookup/confirmation.js b/packages/ui/components/data-lookup/confirmation.js
index 3bcf63d37..f139e9bfd 100644
--- a/packages/ui/components/data-lookup/confirmation.js
+++ b/packages/ui/components/data-lookup/confirmation.js
@@ -5,6 +5,12 @@ import {Checkmark, Close} from 'grommet-icons';
 
 import Button from '../button';
 import FormattedText from '../formatted-text';
+import {
+  ONBOARDING_CONFIRMED_EMAIL,
+  ONBOARDING_PENDING_EMAIL,
+  ONBOARDING_CONFIRM_EMAIL,
+  ONBOARDING_DELETE_EMAIL,
+} from '../onboarding/no-account-steps';
 
 const Checked = ({checked}) => (
   <Box
@@ -33,6 +39,11 @@ const Row = ({confirmed, ...props}) => (
     background={confirmed ? '#e5b3401a' : 'transparent'}
     pad={{vertical: 'medium', horizontal: 'large'}}
     border={{side: 'top', color: 'dark-4'}}
+    className={
+      !confirmed
+        ? ONBOARDING_PENDING_EMAIL.className
+        : ONBOARDING_CONFIRMED_EMAIL.className
+    }
     {...props}
   />
 );
@@ -43,6 +54,7 @@ Row.propTypes = {
 
 const Remove = props => (
   <Box
+    className={ONBOARDING_DELETE_EMAIL.className}
     border={{color: 'dark-4', size: '2px'}}
     width="32px"
     height="32px"
@@ -58,6 +70,7 @@ const Remove = props => (
 
 const ConfirmButton = ({isSent, ...props}) => (
   <Button
+    className={ONBOARDING_CONFIRM_EMAIL.className}
     {...props}
     background={isSent ? 'dark-4' : 'primary'}
     width="90px"
diff --git a/packages/ui/components/data-lookup/container.js b/packages/ui/components/data-lookup/container.js
index 3ffa1863f..ceca156c7 100644
--- a/packages/ui/components/data-lookup/container.js
+++ b/packages/ui/components/data-lookup/container.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import {CircleInformation} from 'grommet-icons';
 import PropTypes from 'prop-types';
 import {Box} from 'grommet';
 
@@ -7,6 +8,29 @@ import FormattedText from '../formatted-text';
 import Container from '../container';
 import Button from '../button';
 
+const InfoBadge = styled(CircleInformation)``;
+
+const HelpBox = styled(Box)`
+  transition: background ease 0.3s;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
+  &:hover {
+    color: ${props => props.theme.global.colors['dark-1']};
+    background: ${props => props.theme.global.colors['light-3']};
+  }
+  > ${InfoBadge} {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    height: 20px;
+    width: 20px;
+    border-radius: 100%;
+    stroke: ${props => props.theme.global.colors['light-1']};
+    path {
+      fill: ${props => props.theme.global.colors.alert};
+    }
+  }
+`;
+
 const HelpContainer = styled(Box)`
   margin-right: 18px;
   position: relative;
@@ -27,7 +51,15 @@ const ResponsivePaddedBox = styled.div`
   }
 `;
 
-const RequestContainer = ({children, helpUrl, ...props}) => (
+const RequestContainer = ({
+  children,
+  helpUrl,
+  showTour,
+  tourEnded,
+  tourOpen,
+  startTour,
+  ...props
+}) => (
   <ResponsivePaddedBox>
     <Container
       justify="center"
@@ -36,14 +68,35 @@ const RequestContainer = ({children, helpUrl, ...props}) => (
       {...props}
     >
       {children}
-      <HelpContainer alignSelf="end">
-        <Button
-          color="light-1"
-          size="small"
-          href={helpUrl}
-          target="_blank"
-          label={<FormattedText id="container.btn.help" />}
-        />
+      <HelpContainer gap="small">
+        {(showTour || tourEnded) && (
+          <HelpBox
+            background="light-1"
+            round="10px"
+            pad={{vertical: 'xsmall', horizontal: 'small'}}
+          >
+            {!tourOpen && !tourEnded && <InfoBadge />}
+            <Button
+              plain
+              onClick={startTour}
+              label={
+                <FormattedText
+                  id="layout.start-tour"
+                  defaultMessage="Tutorial"
+                />
+              }
+            />
+          </HelpBox>
+        )}
+        <HelpBox alignSelf="end">
+          <Button
+            color="light-1"
+            size="small"
+            href={helpUrl}
+            target="_blank"
+            label={<FormattedText id="container.btn.help" />}
+          />
+        </HelpBox>
       </HelpContainer>
     </Container>
   </ResponsivePaddedBox>
@@ -55,6 +108,10 @@ RequestContainer.propTypes = {
     PropTypes.node,
   ]).isRequired,
   helpUrl: PropTypes.string.isRequired,
+  showTour: PropTypes.bool.isRequired,
+  tourOpen: PropTypes.bool.isRequired,
+  tourEnded: PropTypes.bool.isRequired,
+  startTour: PropTypes.func.isRequired,
 };
 
 export default RequestContainer;
diff --git a/packages/ui/components/data-lookup/email-form.js b/packages/ui/components/data-lookup/email-form.js
index a314a5199..7c2858d31 100644
--- a/packages/ui/components/data-lookup/email-form.js
+++ b/packages/ui/components/data-lookup/email-form.js
@@ -5,6 +5,7 @@ import {Box} from 'grommet';
 import RoundedBox from '../rounded-box';
 import FormattedText from '../formatted-text';
 import FormField from '../form-field';
+import {ONBOARDING_EMAIL} from '../onboarding/no-account-steps';
 import Add from './add';
 
 const EmailForm = ({emails, errors, setEmails, readOnly}) => {
@@ -32,6 +33,7 @@ const EmailForm = ({emails, errors, setEmails, readOnly}) => {
   return (
     <RoundedBox
       withShadow={false}
+      className={ONBOARDING_EMAIL.className}
       render={() => (
         <Box width="606px">
           {readOnly.length === 0 && (
diff --git a/packages/ui/components/data-lookup/identity-form.js b/packages/ui/components/data-lookup/identity-form.js
index 9a1a0f051..ffebf0161 100644
--- a/packages/ui/components/data-lookup/identity-form.js
+++ b/packages/ui/components/data-lookup/identity-form.js
@@ -4,6 +4,7 @@ import {Box} from 'grommet';
 import PropTypes from 'prop-types';
 
 import RoundedBox from '../rounded-box';
+import {ONBOARDING_IDENTITY} from '../onboarding/no-account-steps';
 import FormattedText from '../formatted-text';
 import FormField from '../form-field';
 
@@ -47,6 +48,7 @@ const IdentityForm = ({identity, errors, setIdentity}) => {
 
   return (
     <RoundedBox
+      className={ONBOARDING_IDENTITY.className}
       withShadow={false}
       render={() => (
         <Box width="606px">
diff --git a/packages/ui/components/data-lookup/phone-form.js b/packages/ui/components/data-lookup/phone-form.js
index 7714aae22..6d48f3165 100644
--- a/packages/ui/components/data-lookup/phone-form.js
+++ b/packages/ui/components/data-lookup/phone-form.js
@@ -3,6 +3,7 @@ import {Box} from 'grommet';
 import PropTypes from 'prop-types';
 
 import RoundedBox from '../rounded-box';
+import {ONBOARDING_PHONE} from '../onboarding/no-account-steps';
 import FormattedText from '../formatted-text';
 import FormField from '../form-field';
 import Add from './add';
@@ -30,6 +31,7 @@ const PhoneForm = ({phones, errors, setPhones, readOnly}) => {
   return (
     <RoundedBox
       withShadow={false}
+      className={ONBOARDING_PHONE.className}
       render={() => (
         <Box width="606px">
           {readOnly.length === 0 && (
diff --git a/packages/ui/modals/dashboard/tour-ended.js b/packages/ui/modals/dashboard/tour-ended.js
index c0f62b810..655972547 100644
--- a/packages/ui/modals/dashboard/tour-ended.js
+++ b/packages/ui/modals/dashboard/tour-ended.js
@@ -10,7 +10,7 @@ const StyledLayer = styled(Layer)`
   max-width: 600px;
 `;
 
-export default function TourEnded({onDismiss}) {
+export default function TourEnded({onDismiss, text, description}) {
   return (
     <StyledLayer
       margin={{
@@ -26,13 +26,9 @@ export default function TourEnded({onDismiss}) {
         gap="small"
       >
         <Text size="large" weight={500}>
-          Once your Admin Console setup is completed and deployed, your DSR
-          webform will be ready for consumers to use.
-        </Text>
-        <Text>
-          You can give consumers access to your webform by copying the links and
-          snippet and putting it on your website.
+          {text}
         </Text>
+        <Text>{description}</Text>
       </Box>
       <Box pad="medium">
         <Button
@@ -46,6 +42,14 @@ export default function TourEnded({onDismiss}) {
   );
 }
 
+TourEnded.defaultProps = {
+  text:
+    'Once your Admin Console setup is completed and deployed, your DSR webform will be ready for consumers to use.',
+  description:
+    'You can give consumers access to your webform by copying the links and snippet and putting it on your website.',
+};
 TourEnded.propTypes = {
   onDismiss: PropTypes.func.isRequired,
+  text: PropTypes.string,
+  description: PropTypes.string,
 };
diff --git a/packages/ui/screens/data-lookup/confirm-identity.js b/packages/ui/screens/data-lookup/confirm-identity.js
index ecab6c55c..86b8e7c97 100644
--- a/packages/ui/screens/data-lookup/confirm-identity.js
+++ b/packages/ui/screens/data-lookup/confirm-identity.js
@@ -26,6 +26,10 @@ import PhoneForm from '../../components/data-lookup/phone-form';
 import AddressForm from '../../components/data-lookup/address-form';
 import usePrevious from '../../hooks/use-previous';
 import CheckBox from '../../components/check-box';
+import {
+  ONBOARDING_CONFIRMATION,
+  ONBOARDING_ADD_MORE,
+} from '../../components/onboarding/no-account-steps';
 
 const AddMore = ({items}) => {
   const [menuOpen, setMenuOpen] = useState(false);
@@ -37,6 +41,7 @@ const AddMore = ({items}) => {
       position="top-right"
     >
       <Box
+        className={ONBOARDING_ADD_MORE.className}
         background="primary"
         width="48px"
         height="48px"
@@ -143,7 +148,12 @@ const ConfirmIdentity = ({
   }
 
   return (
-    <Box width="606px" alignSelf="center" pad={{horizontal: 'large'}}>
+    <Box
+      width="606px"
+      className={ONBOARDING_CONFIRMATION.className}
+      alignSelf="center"
+      pad={{horizontal: 'large'}}
+    >
       <RoundedBox
         withShadow={false}
         headerRender={() => (
diff --git a/packages/ui/screens/data-lookup/home.js b/packages/ui/screens/data-lookup/home.js
index 0030f1692..a3e0c7340 100644
--- a/packages/ui/screens/data-lookup/home.js
+++ b/packages/ui/screens/data-lookup/home.js
@@ -8,6 +8,11 @@ import FormattedText from '../../components/formatted-text';
 import Button from '../../components/button';
 import LogoBox from '../../components/data-lookup/logo-box';
 import ExternalLink from '../../components/external-link';
+import {
+  ONBOARDING_LANDING,
+  ONBOARDING_DATA_REQUEST,
+  ONBOARDING_CONTACT_SECTIION,
+} from '../../components/onboarding/no-account-steps';
 
 function ContactSection({id, rows}) {
   return (
@@ -68,7 +73,11 @@ const Home = ({
       <RoundedBox
         withShadow={false}
         render={() => (
-          <Box pad="large" gap="medium">
+          <Box
+            pad="large"
+            gap="medium"
+            className={ONBOARDING_LANDING.className}
+          >
             <FormattedText
               id="home.title"
               values={{
@@ -88,6 +97,7 @@ const Home = ({
               primary
               onClick={onRequestForm}
               label={<FormattedText id="home.btn.request" color="light-1" />}
+              className={ONBOARDING_DATA_REQUEST.className}
             />
             <Button
               primary
@@ -107,6 +117,7 @@ const Home = ({
       <Box>
         <RoundedBox
           withShadow={false}
+          className={ONBOARDING_CONTACT_SECTIION.className}
           render={() => (
             <ResponsiveContext.Consumer>
               {size => (
diff --git a/packages/ui/screens/data-lookup/select-request-type.js b/packages/ui/screens/data-lookup/select-request-type.js
index 115cd2408..a8a4f17a5 100644
--- a/packages/ui/screens/data-lookup/select-request-type.js
+++ b/packages/ui/screens/data-lookup/select-request-type.js
@@ -8,6 +8,7 @@ import RoundedBox from '../../components/rounded-box';
 import FormattedText from '../../components/formatted-text';
 import Button from '../../components/button';
 import RadioButton from '../../components/radio-button';
+import {ONBOARDING_REQUEST_TYPE} from '../../components/onboarding/no-account-steps';
 
 const SelectRequestTypeScreen = ({onContinueClick, defaultRequestType}) => {
   const [requestType, setRequestType] = useState(defaultRequestType);
@@ -17,6 +18,7 @@ const SelectRequestTypeScreen = ({onContinueClick, defaultRequestType}) => {
       width="606px"
       alignSelf="center"
       pad={{top: '96px', horizontal: 'large'}}
+      className={ONBOARDING_REQUEST_TYPE.className}
     >
       <RoundedBox
         withShadow={false}
diff --git a/packages/ui/screens/data-lookup/wait.js b/packages/ui/screens/data-lookup/wait.js
index 9e405f9d4..f1ca829af 100644
--- a/packages/ui/screens/data-lookup/wait.js
+++ b/packages/ui/screens/data-lookup/wait.js
@@ -8,10 +8,11 @@ import FormattedText from '../../components/formatted-text';
 import Button from '../../components/button';
 import LogoBox from '../../components/data-lookup/logo-box';
 import ExternalLink from '../../components/external-link';
+import {ONBOARDING_CONFIRMED} from '../../components/onboarding/no-account-steps';
 
 const Wait = ({companyName, companyUrl, requestType}) => {
   return (
-    <LogoBox companyUrl={companyUrl}>
+    <LogoBox className={ONBOARDING_CONFIRMED.className} companyUrl={companyUrl}>
       <RoundedBox
         withShadow={false}
         headerRender={() => (

From 6fbd2c8211410853182897c6a2c74e19a2a7b77c Mon Sep 17 00:00:00 2001
From: Mostafa Elgaafary <3999755+melgaafary@users.noreply.github.com>
Date: Mon, 2 Mar 2020 14:42:10 +0100
Subject: [PATCH 4/5] [ui+no-account-app] fix: add missing onboarding steps

---
 packages/constants/onboarding-data.js         | 46 +++++++++++++++
 packages/no-account-app/src/app.js            |  2 +-
 .../src/screens/confirm-identity.js           | 58 ++++---------------
 .../no-account-app/src/state/onboarding.js    |  8 +--
 .../__snapshots__/storyshots.test.js.snap     |  2 +-
 .../ui/components/onboarding/last-step-btn.js |  2 +-
 .../components/onboarding/no-account-steps.js | 11 +++-
 .../screens/data-lookup/confirm-identity.js   |  7 ++-
 8 files changed, 78 insertions(+), 58 deletions(-)
 create mode 100644 packages/constants/onboarding-data.js

diff --git a/packages/constants/onboarding-data.js b/packages/constants/onboarding-data.js
new file mode 100644
index 000000000..5951bc33d
--- /dev/null
+++ b/packages/constants/onboarding-data.js
@@ -0,0 +1,46 @@
+export const UNCONFIRMED_REQUEST = {
+  status: 'pending',
+  requestType: 'delete',
+  requestStatus: 'pending',
+  emails: [
+    {id: 'dummy@datawallet.com', status: 'confirmed'},
+    {id: 'dummy@datawallet.com', status: 'pending'},
+  ],
+  phones: [{id: '+13224324234', status: 'confirmed'}],
+  addresses: [
+    {
+      line1: 'Dummy address1',
+      line2: 'Dummy address2',
+      zip: '12345',
+      state: 'DU',
+      status: 'confirmed',
+    },
+  ],
+  identity: {
+    firstName: 'dummy first name',
+    lastName: 'dummy last name',
+    middleNames: 'dummy middle name',
+  },
+};
+
+export const CONFIRMED_REQUEST = {
+  status: 'pending',
+  requestType: 'delete',
+  requestStatus: 'pending',
+  emails: [{id: 'dummy@datawallet.com', status: 'confirmed'}],
+  phones: [{id: '+13224324234', status: 'confirmed'}],
+  addresses: [
+    {
+      line1: 'Dummy address1',
+      line2: 'Dummy address2',
+      zip: '12345',
+      state: 'DU',
+      status: 'confirmed',
+    },
+  ],
+  identity: {
+    firstName: 'dummy first name',
+    lastName: 'dummy last name',
+    middleNames: 'dummy middle name',
+  },
+};
diff --git a/packages/no-account-app/src/app.js b/packages/no-account-app/src/app.js
index a14985945..9058c4ddf 100644
--- a/packages/no-account-app/src/app.js
+++ b/packages/no-account-app/src/app.js
@@ -4,7 +4,6 @@ import {Route} from 'react-router-dom';
 import {injectIntl} from 'react-intl';
 
 import Container from '@datawallet/ui/components/data-lookup/container';
-
 import Onboarding from '@datawallet/ui/components/onboarding/index';
 import TourEnded from '@datawallet/ui/modals/dashboard/tour-ended';
 
@@ -102,6 +101,7 @@ const App = ({intl}) => {
             endTour={endTour}
             rounded={18}
             scrollOffset={10}
+            disableInteraction
           />
         )}
       </Container>
diff --git a/packages/no-account-app/src/screens/confirm-identity.js b/packages/no-account-app/src/screens/confirm-identity.js
index 7c9083189..e3ab72180 100644
--- a/packages/no-account-app/src/screens/confirm-identity.js
+++ b/packages/no-account-app/src/screens/confirm-identity.js
@@ -4,7 +4,14 @@ import {Box} from 'grommet';
 
 import ConfirmIdentity from '@datawallet/ui/screens/data-lookup/confirm-identity';
 import {ACTIONS} from '@datawallet/constants/cosmos';
-import {CONFIRMED} from '@datawallet/common/shared/request-service-statuses';
+import {
+  CONFIRMED,
+  PENDING,
+} from '@datawallet/common/shared/request-service-statuses';
+import {
+  UNCONFIRMED_REQUEST,
+  CONFIRMED_REQUEST,
+} from '@datawallet/constants/onboarding-data';
 import ConfirmModal from '@datawallet/ui/modals/confirm';
 import FormattedText from '@datawallet/ui/components/formatted-text';
 import {
@@ -27,7 +34,7 @@ const ConfirmIdentityContainer = ({history, match}) => {
   const [showConfirmModal, setShowConfirmModal] = useState(false);
   const [submittingRequest, setSubmittingRequest] = useState(false);
   const [request, setRequest] = useState({
-    status: 'pending',
+    status: PENDING,
     requestType: undefined,
     requestStatus: undefined,
     emails: [],
@@ -52,55 +59,12 @@ const ConfirmIdentityContainer = ({history, match}) => {
 
   const fetchUser = useCallback(async () => {
     if (dummyUser && id === 'unconfirmed') {
-      setRequest({
-        status: 'pending',
-        requestType: 'delete',
-        requestStatus: 'pending',
-        emails: [
-          {id: 'dummy@datawallet.com', status: 'confirmed'},
-          {id: 'dummy@datawallet.com', status: 'pending'},
-        ],
-        phones: [{id: '+13224324234', status: 'confirmed'}],
-        addresses: [
-          {
-            line1: 'Dummy address1',
-            line2: 'Dummy address2',
-            zip: '12345',
-            state: 'DU',
-            status: 'confirmed',
-          },
-        ],
-        identity: {
-          firstName: 'dummy first name',
-          lastName: 'dummy last name',
-          middleNames: 'dummy middle name',
-        },
-      });
+      setRequest(UNCONFIRMED_REQUEST);
 
       return;
     }
     if (dummyUser && id === 'confirmed') {
-      setRequest({
-        status: 'confirmed',
-        requestType: 'delete',
-        requestStatus: 'confirmed',
-        emails: [{id: 'dummy@datawallet.com', status: 'confirmed'}],
-        phones: [{id: '+13224324234', status: 'confirmed'}],
-        addresses: [
-          {
-            line1: 'Dummy address1',
-            line2: 'Dummy address2',
-            zip: '12345',
-            state: 'DU',
-            status: 'confirmed',
-          },
-        ],
-        identity: {
-          firstName: 'dummy first name',
-          lastName: 'dummy last name',
-          middleNames: 'dummy middle name',
-        },
-      });
+      setRequest(CONFIRMED_REQUEST);
 
       return;
     }
diff --git a/packages/no-account-app/src/state/onboarding.js b/packages/no-account-app/src/state/onboarding.js
index 9f9ac6972..903b9e1fe 100644
--- a/packages/no-account-app/src/state/onboarding.js
+++ b/packages/no-account-app/src/state/onboarding.js
@@ -15,6 +15,7 @@ import {
   ONBOARDING_CONFIRM_EMAIL,
   ONBOARDING_DELETE_EMAIL,
   ONBOARDING_CONFIRMED,
+  ONBOARDING_DECLARATION,
 } from '@datawallet/ui/components/onboarding/no-account-steps';
 import {
   ONBOARDING_STEP,
@@ -56,13 +57,9 @@ export function useOnboarding() {
     ONBOARDING_CONFIRM_EMAIL,
     ONBOARDING_DELETE_EMAIL,
     ONBOARDING_ADD_MORE,
+    ONBOARDING_DECLARATION,
     ONBOARDING_CONFIRMED,
   ];
-  const skip = () => {
-    setDummyUser(true);
-    redirect('/confirm-identity/dummy');
-    // setOnBoardingStep()
-  };
 
   const [openTourEndedModal, setTourEndedModal] = useState(
     localStorage.getItem(ONBOARDING_ENDED_MODAL) === 'true',
@@ -166,7 +163,6 @@ export function useOnboarding() {
     endTour,
     action,
     closeTourEndedModal,
-    skip,
     dummyUser,
     ONBOARDING_STEPS,
   };
diff --git a/packages/storybook/__snapshots__/storyshots.test.js.snap b/packages/storybook/__snapshots__/storyshots.test.js.snap
index 207f48647..edbe07ebc 100644
--- a/packages/storybook/__snapshots__/storyshots.test.js.snap
+++ b/packages/storybook/__snapshots__/storyshots.test.js.snap
@@ -21248,7 +21248,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - ready to submit 1`] =
     }
   >
     <div
-      className="StyledBox-sc-13pk1d4-0 dRlbHM confirmation"
+      className="StyledBox-sc-13pk1d4-0 dRlbHM declaration"
     >
       <div
         className="StyledBox-sc-13pk1d4-0 eSZGCr"
diff --git a/packages/ui/components/onboarding/last-step-btn.js b/packages/ui/components/onboarding/last-step-btn.js
index 5618cdfe8..adb7f0912 100644
--- a/packages/ui/components/onboarding/last-step-btn.js
+++ b/packages/ui/components/onboarding/last-step-btn.js
@@ -5,7 +5,7 @@ import Button from '../button';
 import FormattedText from '../formatted-text';
 
 const LastStep = ({onClick}) => (
-  <Box>
+  <Box width="50px">
     <Button
       primary
       onClick={onClick}
diff --git a/packages/ui/components/onboarding/no-account-steps.js b/packages/ui/components/onboarding/no-account-steps.js
index 4914f2d58..56c9d6e49 100644
--- a/packages/ui/components/onboarding/no-account-steps.js
+++ b/packages/ui/components/onboarding/no-account-steps.js
@@ -106,8 +106,17 @@ export const ONBOARDING_ADD_MORE = {
 export const ONBOARDING_CONFIRMED = {
   selector: '.wait',
   content: (
-    <ContentBox text="Finally, the request is submitted and sent your company." />
+    <ContentBox text="Finally, the request is submitted and sent to your company." />
   ),
   className: 'wait',
   redirect: '/wait/delete',
 };
+
+export const ONBOARDING_DECLARATION = {
+  selector: '.declaration',
+  content: (
+    <ContentBox text="Here the customers will have to confirm that they want to submit their data" />
+  ),
+  className: 'declaration',
+  redirect: '/confirm-identity/confirmed',
+};
diff --git a/packages/ui/screens/data-lookup/confirm-identity.js b/packages/ui/screens/data-lookup/confirm-identity.js
index 86b8e7c97..44ff70b87 100644
--- a/packages/ui/screens/data-lookup/confirm-identity.js
+++ b/packages/ui/screens/data-lookup/confirm-identity.js
@@ -28,6 +28,7 @@ import usePrevious from '../../hooks/use-previous';
 import CheckBox from '../../components/check-box';
 import {
   ONBOARDING_CONFIRMATION,
+  ONBOARDING_DECLARATION,
   ONBOARDING_ADD_MORE,
 } from '../../components/onboarding/no-account-steps';
 
@@ -150,7 +151,11 @@ const ConfirmIdentity = ({
   return (
     <Box
       width="606px"
-      className={ONBOARDING_CONFIRMATION.className}
+      className={
+        !isReady
+          ? ONBOARDING_CONFIRMATION.className
+          : ONBOARDING_DECLARATION.className
+      }
       alignSelf="center"
       pad={{horizontal: 'large'}}
     >

From 72718900d605698252df14cdbfc39e2845dd1949 Mon Sep 17 00:00:00 2001
From: Mostafa Elgaafary <3999755+melgaafary@users.noreply.github.com>
Date: Tue, 3 Mar 2020 16:58:13 +0100
Subject: [PATCH 5/5] [ui+no-account-app] fix: add declaration accepted step

---
 packages/no-account-app/src/screens/confirm-identity.js  | 4 +---
 packages/no-account-app/src/state/onboarding.js          | 2 ++
 packages/storybook/__snapshots__/storyshots.test.js.snap | 2 +-
 packages/ui/components/onboarding/last-step-btn.js       | 2 +-
 packages/ui/components/onboarding/no-account-steps.js    | 7 +++++++
 packages/ui/screens/data-lookup/confirm-identity.js      | 9 +++++++++
 6 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/no-account-app/src/screens/confirm-identity.js b/packages/no-account-app/src/screens/confirm-identity.js
index e3ab72180..b3b623c89 100644
--- a/packages/no-account-app/src/screens/confirm-identity.js
+++ b/packages/no-account-app/src/screens/confirm-identity.js
@@ -60,12 +60,10 @@ const ConfirmIdentityContainer = ({history, match}) => {
   const fetchUser = useCallback(async () => {
     if (dummyUser && id === 'unconfirmed') {
       setRequest(UNCONFIRMED_REQUEST);
-
       return;
     }
-    if (dummyUser && id === 'confirmed') {
+    if (dummyUser && (id === 'confirmed' || id === 'confirmed-accepted')) {
       setRequest(CONFIRMED_REQUEST);
-
       return;
     }
     const user = await retrieveUserData(id);
diff --git a/packages/no-account-app/src/state/onboarding.js b/packages/no-account-app/src/state/onboarding.js
index 903b9e1fe..327d005a1 100644
--- a/packages/no-account-app/src/state/onboarding.js
+++ b/packages/no-account-app/src/state/onboarding.js
@@ -16,6 +16,7 @@ import {
   ONBOARDING_DELETE_EMAIL,
   ONBOARDING_CONFIRMED,
   ONBOARDING_DECLARATION,
+  ONBOARDING_DECLARATION_ACCEPTED,
 } from '@datawallet/ui/components/onboarding/no-account-steps';
 import {
   ONBOARDING_STEP,
@@ -58,6 +59,7 @@ export function useOnboarding() {
     ONBOARDING_DELETE_EMAIL,
     ONBOARDING_ADD_MORE,
     ONBOARDING_DECLARATION,
+    ONBOARDING_DECLARATION_ACCEPTED,
     ONBOARDING_CONFIRMED,
   ];
 
diff --git a/packages/storybook/__snapshots__/storyshots.test.js.snap b/packages/storybook/__snapshots__/storyshots.test.js.snap
index edbe07ebc..d8912ace8 100644
--- a/packages/storybook/__snapshots__/storyshots.test.js.snap
+++ b/packages/storybook/__snapshots__/storyshots.test.js.snap
@@ -21279,7 +21279,7 @@ exports[`Storyshots Screens/Data Lookup Confirm Identity - ready to submit 1`] =
                 Read the declaration below and indicate your agreement to continue.
               </span>
               <div
-                className="StyledBox-sc-13pk1d4-0 gSoFSX"
+                className="StyledBox-sc-13pk1d4-0 gSoFSX declaration-accepted"
               >
                 <label
                   checked={false}
diff --git a/packages/ui/components/onboarding/last-step-btn.js b/packages/ui/components/onboarding/last-step-btn.js
index adb7f0912..74196d771 100644
--- a/packages/ui/components/onboarding/last-step-btn.js
+++ b/packages/ui/components/onboarding/last-step-btn.js
@@ -5,7 +5,7 @@ import Button from '../button';
 import FormattedText from '../formatted-text';
 
 const LastStep = ({onClick}) => (
-  <Box width="50px">
+  <Box width="40px">
     <Button
       primary
       onClick={onClick}
diff --git a/packages/ui/components/onboarding/no-account-steps.js b/packages/ui/components/onboarding/no-account-steps.js
index 56c9d6e49..21e393bce 100644
--- a/packages/ui/components/onboarding/no-account-steps.js
+++ b/packages/ui/components/onboarding/no-account-steps.js
@@ -120,3 +120,10 @@ export const ONBOARDING_DECLARATION = {
   className: 'declaration',
   redirect: '/confirm-identity/confirmed',
 };
+
+export const ONBOARDING_DECLARATION_ACCEPTED = {
+  selector: '.declaration-accepted',
+  content: <ContentBox text="Here the customer accepted the declaration" />,
+  className: 'declaration-accepted',
+  redirect: '/confirm-identity/confirmed-accepted',
+};
diff --git a/packages/ui/screens/data-lookup/confirm-identity.js b/packages/ui/screens/data-lookup/confirm-identity.js
index 44ff70b87..dbaf5c64f 100644
--- a/packages/ui/screens/data-lookup/confirm-identity.js
+++ b/packages/ui/screens/data-lookup/confirm-identity.js
@@ -30,6 +30,7 @@ import {
   ONBOARDING_CONFIRMATION,
   ONBOARDING_DECLARATION,
   ONBOARDING_ADD_MORE,
+  ONBOARDING_DECLARATION_ACCEPTED,
 } from '../../components/onboarding/no-account-steps';
 
 const AddMore = ({items}) => {
@@ -110,6 +111,13 @@ const ConfirmIdentity = ({
   const [newPhones, setNewPhones] = useState(oldPhones.concat(['']));
   const [newAddresses, setNewAddresses] = useState(oldAddresses.concat([{}]));
   const [signed, setSigned] = useState(false);
+  useEffect(() => {
+    if (id === 'confirmed-accepted') {
+      setSigned(true);
+    } else {
+      setSigned(false);
+    }
+  }, [id]);
 
   useEffect(() => {
     if (showModalFor && showModalFor !== prevShowModalFor) {
@@ -183,6 +191,7 @@ const ConfirmIdentity = ({
                 direction="row"
                 pad={{vertical: 'medium'}}
                 gap="medium"
+                className={ONBOARDING_DECLARATION_ACCEPTED.className}
                 align="center"
               >
                 <CheckBox