diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/CompleteProfile/LinkItem/model.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/CompleteProfile/LinkItem/model.tsx
index 9bddc4b3e20..5773bd4de58 100644
--- a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/CompleteProfile/LinkItem/model.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/CompleteProfile/LinkItem/model.tsx
@@ -1,17 +1,4 @@
-import React from 'react'
-import styled, { css } from 'styled-components'
-
-import { Image } from 'blockchain-info-components'
-
-export const ImageName = {
- BUY_CRYPTO: ,
- KYC_VERIFICATION:
-}
-
-export const IconColors = {
- BUY_CRYPTO: 'green600',
- KYC_VERIFICATION: 'purple500'
-}
+import styled from 'styled-components'
export const ItemButton = styled.button<{ isComplete?: boolean; status: string }>`
border: 1px solid ${(props) => props.theme.grey100};
@@ -28,45 +15,6 @@ export const ButtonContent = styled.div`
align-items: center;
`
-const ItemPurple = styled(ItemButton)`
- ${(props) =>
- props.isComplete
- ? ''
- : css`
- &:hover {
- border-color: ${(props) => props.theme.purple500};
- background-color: ${(props) => props.theme.purple000};
- }
- `};
-`
-const ItemBlue = styled(ItemButton)`
- ${(props) =>
- props.isComplete
- ? ''
- : css`
- &:hover {
- border-color: ${(props) => props.theme.blue600};
- background-color: ${(props) => props.theme.blue000};
- }
- `};
-`
-const ItemGreen = styled(ItemButton)`
- ${(props) =>
- props.isComplete
- ? ''
- : css`
- &:hover {
- border-color: ${(props) => props.theme.green600};
- background-color: ${(props) => props.theme.green000};
- }
- `};
-`
-
-export const MainContainer = {
- BUY_CRYPTO: ItemGreen,
- KYC_VERIFICATION: ItemPurple
-}
-
export const IconWrapper = styled.div`
display: flex;
flex-direction: column;
@@ -79,15 +27,6 @@ export const IconWrapper = styled.div`
align-self: center;
}
`
-const PurpleIconWrapper = styled(IconWrapper)`
- background-color: ${(props) => props.theme.purple000};
-`
-const BlueIconWrapper = styled(IconWrapper)`
- background-color: ${(props) => props.theme.blue000};
-`
-const GreenIconWrapper = styled(IconWrapper)`
- background-color: ${(props) => props.theme.green000};
-`
export const MainSection = styled.div`
display: flex;
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/CompleteProfile/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/CompleteProfile/index.tsx
index e6663c88505..38232b3c440 100644
--- a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/CompleteProfile/index.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/CompleteProfile/index.tsx
@@ -15,6 +15,7 @@ import { useRemote } from 'hooks'
import ModalEnhancer from 'providers/ModalEnhancer'
import { Loading, LoadingTextEnum } from '../../components'
+import { ModalPropsType } from '../../types'
import LinkItem from './LinkItem'
import {
CloseIconContainer,
@@ -28,10 +29,10 @@ import {
} from './model'
import { getData } from './selectors'
-const CompleteProfile = (props) => {
+const CompleteProfile = ({ close, position, total, userClickedOutside }: ModalPropsType) => {
const dispatch = useDispatch()
- const data = useSelector(getData)
+ const { isBankOrCardLinked, isKycVerified } = useSelector(getData)
const { data: handholdData, isLoading, isNotAsked } = useRemote(getVerificationSteps)
@@ -41,7 +42,7 @@ const CompleteProfile = (props) => {
setShow(false)
setTimeout(() => {
- props.close(ModalName.COMPLETE_USER_PROFILE)
+ close(ModalName.COMPLETE_USER_PROFILE)
}, duration)
}
@@ -66,7 +67,7 @@ const CompleteProfile = (props) => {
}
const handleLinkBankOrCardClick = () => {
- if (data.isVerifiedId) {
+ if (isKycVerified) {
startAddingCards()
} else {
startVerification()
@@ -74,11 +75,9 @@ const CompleteProfile = (props) => {
}
const handleBuyCryptoClick = () => {
- const { isBankOrCardLinked, isVerifiedId } = data
-
if (isBankOrCardLinked) {
dispatch(buySell.showModal({ origin: 'CompleteProfile' }))
- } else if (isVerifiedId) {
+ } else if (isKycVerified) {
startAddingCards()
return
} else {
@@ -146,7 +145,14 @@ const CompleteProfile = (props) => {
const percentage = itemsLength > 0 ? (completedSteps / itemsLength) * 100 : 0
return (
-
+
{(isLoading || isNotAsked) && }
@@ -212,8 +218,8 @@ const CompleteProfile = (props) => {
iconUrl={iconUrl}
key={id}
metadata={metadata}
- onClick={() => getOnClick(id as COMPLETE_PROFILE_STEPS)}
- status={status as 'IDLE' | 'PENDING' | 'COMPLETED' | 'DISABLED'}
+ onClick={() => getOnClick(id)}
+ status={status}
subtitle={subtitle}
title={title}
/>
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/CompleteProfile/model.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/CompleteProfile/model.tsx
index 9d29e0b3b96..63729ee3834 100644
--- a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/CompleteProfile/model.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/CompleteProfile/model.tsx
@@ -57,11 +57,9 @@ export const CloseIconContainer = styled.div`
}
`
-export const CentralContainer = styled.div`
+export const LinksWrapper = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
-`
-export const LinksWrapper = styled(CentralContainer)`
padding-top: 26px;
`
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/CompleteProfile/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/CompleteProfile/selectors.ts
index c905e6e603b..6ea631d1a49 100644
--- a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/CompleteProfile/selectors.ts
+++ b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/CompleteProfile/selectors.ts
@@ -1,4 +1,4 @@
-import { BSPaymentMethodsType, BSPaymentTypes, TermType } from '@core/types'
+import { BSPaymentMethodsType, BSPaymentTypes } from '@core/types'
import { model, selectors } from 'data'
import { RootState } from 'data/rootReducer'
@@ -6,45 +6,25 @@ const { KYC_STATES } = model.profile
type ReturnData = {
isBankOrCardLinked: boolean
- isBuyCrypto: boolean
- isKycPending: boolean
- isVerifiedId: boolean
+ isKycVerified: boolean
}
export const getData = (state: RootState): ReturnData => {
- const userData = selectors.modules.profile.getUserData(state).getOrElse({
- kycState: undefined,
- tiers: { current: 0 }
- })
-
- const isKycPending = [KYC_STATES.PENDING, KYC_STATES.UNDER_REVIEW].includes(userData.kycState)
-
+ const userData = selectors.modules.profile.getUserData(state).getOrElse({ kycState: undefined })
const isKycVerified = userData.kycState === KYC_STATES.VERIFIED
- // user have some cards or banks linked
- const cards = selectors.components.buySell.getBSCards(state).getOrElse([])
+ // Check if user has cards or banks linked
+ const hasLinkedCards = selectors.components.buySell.getBSCards(state).getOrElse([]).length > 0
const paymentMethods = selectors.components.buySell
.getBSPaymentMethods(state)
.getOrElse({} as BSPaymentMethodsType)
- const isAnyBankLinked =
- paymentMethods?.methods?.length > 0 &&
- paymentMethods.methods.find(
- (method) => method.eligible && method.type === BSPaymentTypes.LINK_BANK
- )
- const isBankOrCardLinked = !!(cards.length > 0 || isAnyBankLinked)
-
- // user accumulated amount all the time
- const accumulatedTrades = selectors.components.buySell.getAccumulatedTrades(state).getOrElse([])
-
- const isBuyCrypto =
- Number(
- accumulatedTrades?.find((accumulated) => accumulated.termType === TermType.ALL)?.amount?.value
- ) > 0 ?? false
+ const hasLinkedBank = paymentMethods?.methods?.some(
+ (method) => method.eligible && method.type === BSPaymentTypes.LINK_BANK
+ )
+ const isBankOrCardLinked = hasLinkedCards || hasLinkedBank
return {
isBankOrCardLinked,
- isBuyCrypto,
- isKycPending,
- isVerifiedId: isKycVerified
+ isKycVerified
}
}
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfAssessment/RetryInPill.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfAssessment/RetryInPill.tsx
index 2a692fb74f4..d4a11d1c8ae 100644
--- a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfAssessment/RetryInPill.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfAssessment/RetryInPill.tsx
@@ -2,7 +2,6 @@ import React from 'react'
import styled from 'styled-components'
import { Text } from 'blockchain-info-components'
-import { useCountDown } from 'hooks'
import { useCountdownTo } from '../../CompleteProfile/countdownTo'
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfAssessment/SelfAssessmentSuccess.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfAssessment/SelfAssessmentSuccess.tsx
index 9f3ac497ae0..f25bacb6555 100644
--- a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfAssessment/SelfAssessmentSuccess.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfAssessment/SelfAssessmentSuccess.tsx
@@ -405,7 +405,7 @@ const Success = ({
}
// BE will provide id to contains OPTIONAL in any children
- const isOptional = node.children && node.children.some((item) => item.id.includes('UNDEFINED'))
+ const isOptional = node?.children?.some((item) => item.id.includes('UNDEFINED'))
return (
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfAssessment/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfAssessment/index.tsx
index a0b81733b94..71fe2d5fa61 100644
--- a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfAssessment/index.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfAssessment/index.tsx
@@ -33,17 +33,13 @@ const SelfAssessmentModal = ({ close, position, total, userClickedOutside }: Mod
const [step, setStep] = useState(-1)
const [show, setShow] = useState(false)
- const [isLoading, setLoading] = useState(false)
+ const [loading, setLoading] = useState(false)
const [errorMessage, setErrorMessage] = useState()
const [modalQuestions, setModalQuestions] = useState(QUESTIONS_INITIAL)
const [resultData, setResultData] = useState({} as QuizSubmitResult)
// Here we hold the ref to the form to send it later without re-rendering extra times
- const dataRef = useRef({
- blocking: false,
- introPage: {} as IntroPageType,
- pages: []
- })
+ const dataRef = useRef(QUESTIONS_INITIAL)
const getModalData = async () => {
setLoading(true)
@@ -106,9 +102,9 @@ const SelfAssessmentModal = ({ close, position, total, userClickedOutside }: Mod
const { introPage, pages } = modalQuestions
const isLastPage = step === pages?.length - 1
- const showResultScreen = !isLoading && !!resultData?.status
- const showAssessment = !isLoading && modalQuestions && !showResultScreen
- const showError = !isLoading && errorMessage
+ const showResultScreen = !loading && !!resultData?.status
+ const showError = !loading && errorMessage
+ const showAssessment = !loading && modalQuestions && !showResultScreen && !showError
return (
- {isLoading && }
+ {loading && }
{showError && (
header: { description: string; imageUrl: string; title: string }
}
@@ -9,7 +9,7 @@ export type Page = { nodes: NodeType }
export type SelfAssessmentType = Omit & {
introPage: IntroPageType
- pages: Page[]
+ pages: Array
}
export type QuizSubmitResult = {
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfClassification/SelfClassificationSuccess.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfClassification/SelfClassificationSuccess.tsx
index 47854f15eed..f8683fe1aff 100644
--- a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfClassification/SelfClassificationSuccess.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfClassification/SelfClassificationSuccess.tsx
@@ -262,6 +262,7 @@ const Success = ({
item.id.includes('UNDEFINED'))
+ const isOptional = node?.children?.some((item) => item.id.includes('UNDEFINED'))
return (
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfClassification/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfClassification/index.tsx
index e6d14896330..a75e9de11db 100644
--- a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfClassification/index.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/FinProms/SelfClassification/index.tsx
@@ -92,6 +92,8 @@ const SelfClassification = ({ close, position, total, userClickedOutside }: Moda
const showLoading = isLoading || isNotAsked
const hasSomeError = !isLoading && (showError || !!error)
+ const showQuestion =
+ !hasSomeError && extraKYCResponse && Object.keys(extraKYCResponse ?? {}).length
return (
)}
- {!isLoading && extraKYCResponse && (
+ {showQuestion && (
<>
props.theme.grey900};
`
-const SpinnerWrapper = styled.div`
- width: 100%;
- height: 100%;
- align-items: center;
- justify-content: center;
- display: flex;
- flex-direction: column;
-`
-
-export const FullNameContainer = styled.div`
- justify-content: space-between;
- display: flex;
- flex-direction: row;
-`
-export const CaptionContainer = styled.div`
- margin-top: 8px;
- display: flex;
- flex-direction: row;
-`
-export const Caption = styled(Text)`
- font-weight: 500;
- font-size: 12px;
- line-height: 150%;
- color: ${(props) => props.theme.grey600};
-`
export const CustomForm = styled(Form)`
height: 100%;
display: flex;
flex-direction: column;
`
-export const TopText = styled(Text)`
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 16px;
-`
-export const LeftTopCol = styled.div`
- display: flex;
- align-items: left;
-`
-export const TopHeader = styled(Text)`
- display: flex;
- align-items: left;
- margin-bottom: 16px;
- flex-direction: column;
-`
-export const TopHeaderTitle = styled.div`
- display: flex;
- align-items: left;
-`
-export const TopHeaderDescription = styled(Text)`
- margin: 10px 0 0 0;
- display: flex;
- color: ${(props) => props.theme.grey600};
- font-weight: 500;
- font-size: 14px;
- line-height: 24px;
-`
-export const ErrorTextContainer = styled.div`
- display: flex;
- justify-content: center;
- flex-direction: row;
-`
+
export const QuestionTitle = styled(Text)`
display: flex;
color: ${(props) => props.theme.grey900};
@@ -102,6 +44,12 @@ export const ErrorText = styled(Text)`
margin-bottom: 16px;
`
+export const ErrorTextContainer = styled.div`
+ display: flex;
+ justify-content: center;
+ flex-direction: row;
+`
+
export const CheckBoxContainer = styled.div`
max-height: 6rem;
margin: 4px 0;
@@ -121,10 +69,7 @@ export const CheckBoxText = styled(Text)`
padding: 0.25rem 0;
color: ${(props) => props.theme.grey900};
`
-export const DropdownStyled = styled.div`
- z-index: 9;
- background-color: ${(props) => props.theme.white};
-`
+
export const CenterField = styled.div`
display: flex;
flex-direction: column;
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/KycVerification/ExtraFields/model.ts b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/KycVerification/ExtraFields/model.ts
index 65cf5b3f04b..153e0e59f0f 100644
--- a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/KycVerification/ExtraFields/model.ts
+++ b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/KycVerification/ExtraFields/model.ts
@@ -25,7 +25,7 @@ export const GetNodeQuestionElements = (node: NodeItem) => {
export const GetInputPlaceholder = (child: NodeItem) => {
const intl = useIntl()
return intl.formatMessage({
- defaultMessage: child.text,
+ defaultMessage: child.hint ?? child.text,
id: `modals.onboarding.kyc_verification.extra_fields.${child.id}_hint`
})
}
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/Welcome/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/Welcome/index.tsx
index f8dce0194a1..c5b8ef48dc6 100644
--- a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/Welcome/index.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/Welcome/index.tsx
@@ -1,73 +1,24 @@
import React, { useEffect, useState } from 'react'
import { FormattedMessage } from 'react-intl'
import { useDispatch, useSelector } from 'react-redux'
-import styled from 'styled-components'
import { Button, Icon, Image, Text } from 'blockchain-info-components'
-import Flyout, { duration, FlyoutWrapper } from 'components/Flyout'
+import Flyout, { duration } from 'components/Flyout'
import { buySell } from 'data/components/actions'
import { getCryptoCurrency } from 'data/components/buySell/selectors'
import { ModalName } from 'data/types'
import modalEnhancer from 'providers/ModalEnhancer'
import { ModalPropsType } from '../../types'
-
-const CustomFlyoutWrapper = styled(FlyoutWrapper)`
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-`
-const Column = styled.div`
- display: flex;
- flex-direction: column;
-`
-const Header = styled.div`
- display: flex;
- align-items: center;
- margin-bottom: 40px;
-
- span {
- margin-left: 8px;
- }
-`
-const ContentContainer = styled(Column)`
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- margin-bottom: 70px;
- padding: 40px;
- text-align: center;
-`
-const IconBackground = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
- width: 48px;
- height: 48px;
- min-width: 48px;
- background-color: ${(props) => props.theme.blue000};
- border-radius: 48px;
-`
-
-const Title = styled(Text)`
- margin: 26px 0 13px;
-`
-
-const ContentTextWrapper = styled(Text)`
- margin-bottom: 50px;
-`
-const ButtonWrapper = styled.div`
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- margin-top: 5px;
- & > :first-child {
- margin-bottom: 15px;
- }
-`
+import {
+ ButtonWrapper,
+ ContentContainer,
+ ContentTextWrapper,
+ CustomFlyoutWrapper,
+ Header,
+ IconBackground,
+ Title
+} from './WelcomeModal.styles'
const WelcomeContainer = ({ close, position, total, userClickedOutside }: ModalPropsType) => {
const dispatch = useDispatch()
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/Welcome/types.ts b/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/Welcome/types.ts
deleted file mode 100644
index 17f918548b8..00000000000
--- a/packages/blockchain-wallet-v4-frontend/src/modals/Onboarding/Welcome/types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export type ResponseShape = {
- action: string
- iconUrl: string
- id:
- | 'EMAIL_VERIFICATION'
- | 'KYC_VERIFICATION'
- | 'SELF_CLASSIFICATION'
- | 'FINPROMS_ASSESSMENT'
- | 'BUY_CRYPTO'
- | 'DEPOSIT_CRYPTO'
- metadata?: { countdownDate: string }
- status: 'IDLE' | 'PENDING' | 'COMPLETED' | 'DISABLED'
- subtitle: string
- title: string
-}
diff --git a/packages/blockchain-wallet-v4/src/network/api/kyc/types.ts b/packages/blockchain-wallet-v4/src/network/api/kyc/types.ts
index abf77458d5a..ce6e6a3c4e0 100644
--- a/packages/blockchain-wallet-v4/src/network/api/kyc/types.ts
+++ b/packages/blockchain-wallet-v4/src/network/api/kyc/types.ts
@@ -37,6 +37,7 @@ export type NodeItem = {
input?: string
instructions?: string
isDropdown?: boolean
+ regex?: string
style?: string
text: string
type: string