feat(prove): added new consent screen page

packages/blockchain-wallet-v4-frontend/src/data/modals/types.ts

@@ -41,6 +41,7 @@ export enum ModalName {
   INTEREST_MODAL = 'INTEREST_MODAL',
   INTEREST_PROMO_MODAL = 'INTEREST_PROMO_MODAL',
   INTEREST_UPLOAD_DOCUMENT_MODAL = 'INTEREST_UPLOAD_DOCUMENT_MODAL',
+  KYC_CONSENT_SCREEN = 'KYC_CONSENT_SCREEN',
   KYC_MODAL = 'KYC_MODAL',
   KYC_RESUBMIT_MODAL = 'KYC_RESUBMIT_MODAL',
   KYC_TIER_UPGRADE_MODAL = 'KYC_TIER_UPGRADE_MODAL',

packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/KycVerification/ConsentScreen/ConsentScreen.model.tsx

@@ -0,0 +1,42 @@
+import { PaletteColors, Text } from '@blockchain-com/constellation'
+import styled from 'styled-components'
+
+import Form from 'components/Form/Form'
+
+export const Label = styled.label`
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 12px;
+  display: block;
+  color: ${PaletteColors['grey-900']};
+`
+export const ContentWrapper = styled.div`
+  margin: 40px;
+`
+export const CustomForm = styled(Form)`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`
+export const ErrorText = styled(Text)`
+  display: inline-flex;
+  font-weight: 500;
+  font-size: 14px;
+  padding: 6px 12px;
+  border-radius: 32px;
+  background-color: ${PaletteColors['red-000']};
+  color: ${PaletteColors['red-800']};
+  margin-bottom: 16px;
+`
+export const SpinnerWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+`
+
+export const LinkButton = styled(Text)`
+  cursor: pointer;
+`

packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/KycVerification/ConsentScreen/ConsentScreen.tsx

@@ -0,0 +1,130 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { FormattedMessage } from 'react-intl'
+import { useDispatch } from 'react-redux'
+import {
+  IconBlockchain,
+  Padding,
+  PaletteColors,
+  SemanticColors,
+  Text
+} from '@blockchain-com/constellation'
+
+import { Button } from 'blockchain-info-components'
+import Flyout, { duration } from 'components/Flyout'
+import {
+  FlyoutContainer,
+  FlyoutContent,
+  FlyoutFooter,
+  FlyoutHeader
+} from 'components/Flyout/Layout'
+import { actions } from 'data'
+import { Analytics, ModalName } from 'data/types'
+import modalEnhancer from 'providers/ModalEnhancer'
+
+const ConsentScreen = ({ close, position, total, userClickedOutside }) => {
+  const dispatch = useDispatch()
+  const [isOpen, setOpen] = useState<boolean>(true)
+
+  useEffect(() => {
+    // TODO add tracking events
+  }, [])
+
+  const handleClose = useCallback(async () => {
+    setOpen(false)
+
+    await new Promise((resolve) => {
+      setTimeout(() => {
+        close?.call(ModalName.KYC_CONSENT_SCREEN)
+
+        setTimeout(resolve, 0)
+      }, duration)
+    })
+  }, [close])
+
+  const handleClickOnContinue = () => {
+    // TODO add tracking event
+    dispatch(
+      actions.analytics.trackEvent({
+        key: Analytics.ONBOARDING_PERSONAL_INFORMATION_ENTERED,
+        properties: {
+          origin: 'SETTINGS'
+        }
+      })
+    )
+    // TODO Start a prove flow
+  }
+
+  return (
+    <Flyout
+      position={position}
+      isOpen={isOpen}
+      userClickedOutside={userClickedOutside}
+      onClose={handleClose}
+      data-e2e='consentScreenModal'
+      total={total}
+    >
+      <FlyoutContainer>
+        <FlyoutHeader data-e2e='consentScreen' mode='close' onClick={handleClose}>
+          <FormattedMessage
+            id='modals.kycVerification.consentScreen.title'
+            defaultMessage='Verify your account'
+          />
+        </FlyoutHeader>
+
+        <FlyoutContent mode='middle'>
+          <div>
+            <div
+              style={{
+                alignItems: 'center',
+                display: 'flex',
+                justifyContent: 'center',
+                marginBottom: '16px'
+              }}
+            >
+              <IconBlockchain color={PaletteColors['blue-600']} label='logo' size='large' />
+            </div>
+
+            <Text as='p' variant='title3' textAlign='center'>
+              <FormattedMessage
+                id='modals.kycVerification.consentScreen.mainTitle'
+                defaultMessage='Let’s gather your information'
+              />
+            </Text>
+
+            <Text as='p' variant='body1' textAlign='center' color={SemanticColors.body}>
+              <FormattedMessage
+                id='modals.kycVerification.consentScreen.mainSubTitle'
+                defaultMessage='Click "Continue" to begin the process'
+              />
+            </Text>
+          </div>
+        </FlyoutContent>
+
+        <FlyoutFooter collapsed>
+          <Padding bottom={1}>
+            <Text as='p' variant='paragraph1' textAlign='center' color={SemanticColors.overlay}>
+              <FormattedMessage
+                id='modals.kycVerification.consentScreen.bySelectingContinue'
+                defaultMessage='By selecting "Continue", you agree to use Prove to verify your account.'
+              />
+            </Text>
+          </Padding>
+          <Button
+            data-e2e='continueWithProveFlow'
+            height='48px'
+            size='16px'
+            nature='primary'
+            onClick={handleClickOnContinue}
+            fullwidth
+          >
+            <FormattedMessage id='buttons.continue' defaultMessage='Continue' />
+          </Button>
+        </FlyoutFooter>
+      </FlyoutContainer>
+    </Flyout>
+  )
+}
+
+const enhance = modalEnhancer(ModalName.KYC_CONSENT_SCREEN, { transition: duration })
+
+export default enhance(ConsentScreen)

packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/KycVerification/ConsentScreen/index.tsx

@@ -0,0 +1 @@
+export { default } from './ConsentScreen'

packages/blockchain-wallet-v4-frontend/src/modals/index.tsx

@@ -76,6 +76,8 @@ const Welcome = React.lazy(() => import('./Onboarding/Welcome'))
 const UpgradeNowSilver = React.lazy(() => import('./Onboarding/UpgradeNowSilver'))
 const VerifyNotice = React.lazy(() => import('./Onboarding/VerifyNotice'))
 const SanctionsInfo = React.lazy(() => import('./Onboarding/SanctionsInfo'))
+// SOLO onboarding
+const KycConsentScreen = React.lazy(() => import('./Onboarding/KycVerification/ConsentScreen'))
 
 // MOBILE
 const MobileNumberChange = React.lazy(() => import('./Mobile/MobileNumberChange'))
@@ -379,6 +381,9 @@ const Modals = (props: Props) => {
         {props.modals.find((modal) => modal.type === ModalName.GENERATE_REPORT_MODAL) ? (
           <GenerateReport />
         ) : null}
+        {props.modals.find((modal) => modal.type === ModalName.KYC_CONSENT_SCREEN) ? (
+          <KycConsentScreen />
+        ) : null}
         {props.modals.find((modal) => modal.type === ModalName.NFT_ORDER) ? (
           <NftOrder disableOutsideClose />
         ) : null}