[PE-709] Feat: user flow onboarding

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',
+  },
+};

packages/no-account-app/src/app.js

@@ -4,7 +4,10 @@ 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';
 
+import OnboardingState from './state/onboarding';
 import Theme from './state/theme';
 import Company from './state/company';
 
@@ -23,8 +26,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 +52,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 +65,6 @@ const App = ({intl}) => {
             {companyName},
           )}
         />
-
         <Route exact path="/" component={Home} />
 
         <Route path="/existing/:email?" component={Existing} />
@@ -62,6 +80,30 @@ 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}
+            disableInteraction
+          />
+        )}
       </Container>
     </HelmetProvider>
   );

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>
   );

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 {
@@ -18,6 +25,7 @@ import {
   updateUserIdentity,
   startLookupProcess,
 } from '../services/data-lookup';
+import OnboardingState from '../state/onboarding';
 
 const ConfirmIdentityContainer = ({history, match}) => {
   const {id} = match.params;
@@ -26,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: [],
@@ -47,11 +55,20 @@ const ConfirmIdentityContainer = ({history, match}) => {
     status,
     requestStatus,
   } = request;
+  const {dummyUser} = OnboardingState.useContainer();
 
   const fetchUser = useCallback(async () => {
+    if (dummyUser && id === 'unconfirmed') {
+      setRequest(UNCONFIRMED_REQUEST);
+      return;
+    }
+    if (dummyUser && (id === 'confirmed' || id === 'confirmed-accepted')) {
+      setRequest(CONFIRMED_REQUEST);
+      return;
+    }
     const user = await retrieveUserData(id);
     setRequest(user);
-  }, [id]);
+  }, [id, dummyUser]);
 
   useEffect(() => {
     if (id) {

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}
       />
     </>
   );