diff --git a/src/components/ValidateCodeActionModal/index.tsx b/src/components/ValidateCodeActionModal/index.tsx index b0285f353c32..461c780a50d0 100644 --- a/src/components/ValidateCodeActionModal/index.tsx +++ b/src/components/ValidateCodeActionModal/index.tsx @@ -5,6 +5,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import Modal from '@components/Modal'; import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; +import useSafePaddingBottomStyle from '@hooks/useSafePaddingBottomStyle'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -27,6 +28,7 @@ function ValidateCodeActionModal({ hasMagicCodeBeenSent, }: ValidateCodeActionModalProps) { const themeStyles = useThemeStyles(); + const safePaddingBottomStyle = useSafePaddingBottomStyle(); const firstRenderRef = useRef(true); const validateCodeFormRef = useRef(null); @@ -76,9 +78,9 @@ function ValidateCodeActionModal({ handleSubmitForm={handleSubmitForm} sendValidateCode={sendValidateCode} clearError={clearError} + buttonStyles={[themeStyles.justifyContentEnd, themeStyles.flex1, safePaddingBottomStyle]} ref={validateCodeFormRef} hasMagicCodeBeenSent={hasMagicCodeBeenSent} - buttonStyles={themeStyles.mtAuto} /> {footer?.()} diff --git a/src/libs/API/parameters/ReportVirtualExpensifyCardFraudParams.ts b/src/libs/API/parameters/ReportVirtualExpensifyCardFraudParams.ts index 350795d46355..ebb5abcb5d00 100644 --- a/src/libs/API/parameters/ReportVirtualExpensifyCardFraudParams.ts +++ b/src/libs/API/parameters/ReportVirtualExpensifyCardFraudParams.ts @@ -1,4 +1,5 @@ type ReportVirtualExpensifyCardFraudParams = { cardID: number; + validateCode: string; }; export default ReportVirtualExpensifyCardFraudParams; diff --git a/src/libs/API/parameters/RequestReplacementExpensifyCardParams.ts b/src/libs/API/parameters/RequestReplacementExpensifyCardParams.ts index bc86923a83a4..f8e62bd3bc6f 100644 --- a/src/libs/API/parameters/RequestReplacementExpensifyCardParams.ts +++ b/src/libs/API/parameters/RequestReplacementExpensifyCardParams.ts @@ -1,6 +1,7 @@ type RequestReplacementExpensifyCardParams = { cardID: number; reason: string; + validateCode: string; }; export default RequestReplacementExpensifyCardParams; diff --git a/src/libs/actions/Card.ts b/src/libs/actions/Card.ts index 3ffdd6778b12..b04a5e49bea5 100644 --- a/src/libs/actions/Card.ts +++ b/src/libs/actions/Card.ts @@ -37,7 +37,7 @@ type IssueNewCardFlowData = { data?: Partial; }; -function reportVirtualExpensifyCardFraud(card?: Card) { +function reportVirtualExpensifyCardFraud(card: Card, validateCode: string) { const cardID = card?.cardID ?? -1; const optimisticData: OnyxUpdate[] = [ { @@ -45,6 +45,7 @@ function reportVirtualExpensifyCardFraud(card?: Card) { key: ONYXKEYS.FORMS.REPORT_VIRTUAL_CARD_FRAUD, value: { isLoading: true, + errors: null, }, }, { @@ -105,6 +106,7 @@ function reportVirtualExpensifyCardFraud(card?: Card) { const parameters: ReportVirtualExpensifyCardFraudParams = { cardID, + validateCode, }; API.write(WRITE_COMMANDS.REPORT_VIRTUAL_EXPENSIFY_CARD_FRAUD, parameters, { @@ -119,7 +121,7 @@ function reportVirtualExpensifyCardFraud(card?: Card) { * @param cardID - id of the card that is going to be replaced * @param reason - reason for replacement */ -function requestReplacementExpensifyCard(cardID: number, reason: ReplacementReason) { +function requestReplacementExpensifyCard(cardID: number, reason: ReplacementReason, validateCode: string) { const optimisticData: OnyxUpdate[] = [ { onyxMethod: Onyx.METHOD.MERGE, @@ -154,6 +156,7 @@ function requestReplacementExpensifyCard(cardID: number, reason: ReplacementReas const parameters: RequestReplacementExpensifyCardParams = { cardID, reason, + validateCode, }; API.write(WRITE_COMMANDS.REQUEST_REPLACEMENT_EXPENSIFY_CARD, parameters, { diff --git a/src/pages/settings/Wallet/ReportCardLostPage.tsx b/src/pages/settings/Wallet/ReportCardLostPage.tsx index 35b5bc9cd19a..ec74ea400a13 100644 --- a/src/pages/settings/Wallet/ReportCardLostPage.tsx +++ b/src/pages/settings/Wallet/ReportCardLostPage.tsx @@ -1,18 +1,20 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import React, {useEffect, useState} from 'react'; +import React, {useCallback, useEffect, useState} from 'react'; import {View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import ScreenWrapper from '@components/ScreenWrapper'; import SingleOptionSelector from '@components/SingleOptionSelector'; import Text from '@components/Text'; +import ValidateCodeActionModal from '@components/ValidateCodeActionModal'; import useLocalize from '@hooks/useLocalize'; import usePrevious from '@hooks/usePrevious'; import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets'; import useThemeStyles from '@hooks/useThemeStyles'; +import {requestValidateCodeAction} from '@libs/actions/User'; +import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; @@ -24,8 +26,6 @@ import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -import type {ReportPhysicalCardForm} from '@src/types/form'; -import type {Card, PrivatePersonalDetails} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; const OPTIONS_KEYS = { @@ -50,49 +50,32 @@ const OPTIONS: Option[] = [ }, ]; -type ReportCardLostPageOnyxProps = { - /** Onyx form data */ - formData: OnyxEntry; - - /** User's private personal details */ - privatePersonalDetails: OnyxEntry; - - /** User's cards list */ - cardList: OnyxEntry>; -}; - -type ReportCardLostPageProps = ReportCardLostPageOnyxProps & StackScreenProps; +type ReportCardLostPageProps = StackScreenProps; function ReportCardLostPage({ - privatePersonalDetails = { - addresses: [ - { - street: '', - street2: '', - city: '', - state: '', - zip: '', - country: '', - }, - ], - }, - cardList = {}, route: { params: {cardID = ''}, }, - formData, }: ReportCardLostPageProps) { const styles = useThemeStyles(); - const physicalCard = cardList?.[cardID]; - const {translate} = useLocalize(); + const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST); + const [account] = useOnyx(ONYXKEYS.ACCOUNT); + const [formData] = useOnyx(ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM); + const [cardList] = useOnyx(ONYXKEYS.CARD_LIST); + const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS); + const [reason, setReason] = useState