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