Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Expensify card - Error when wrong 4 digit is used persists for a few sec after a refresh #52303

Merged
merged 5 commits into from
Dec 4, 2024
Merged

Fix: Expensify card - Error when wrong 4 digit is used persists for a few sec after a refresh #52303

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
55a077a
Fix: Expensify card - Error when wrong 4 digit is used persists for a…
nyomanjyotisa Nov 11, 2024
5b131b5
fix and migrate to useOnyx
nyomanjyotisa Nov 14, 2024
3dff8e7
minor fix
nyomanjyotisa Nov 27, 2024
7444aea
minor fix
nyomanjyotisa Nov 27, 2024
07290cb
Merge branch 'main' into issue-51396
nyomanjyotisa Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 16 additions & 21 deletions src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, {useCallback, useEffect, useRef, 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 BigNumberPad from '@components/BigNumberPad';
import Button from '@components/Button';
import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
Expand All @@ -25,21 +24,14 @@ import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import SCREENS from '@src/SCREENS';
import type {Card} from '@src/types/onyx';
import {isEmptyObject} from '@src/types/utils/EmptyObject';

type ActivatePhysicalCardPageOnyxProps = {
/** Card list propTypes */
cardList: OnyxEntry<Record<string, Card>>;
};

type ActivatePhysicalCardPageProps = ActivatePhysicalCardPageOnyxProps & PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.WALLET.CARD_ACTIVATE>;
type ActivatePhysicalCardPageProps = PlatformStackScreenProps<SettingsNavigatorParamList, typeof SCREENS.SETTINGS.WALLET.CARD_ACTIVATE>;

const LAST_FOUR_DIGITS_LENGTH = 4;
const MAGIC_INPUT_MIN_HEIGHT = 86;

function ActivatePhysicalCardPage({
cardList,
route: {
params: {cardID = ''},
},
Expand All @@ -49,10 +41,12 @@ function ActivatePhysicalCardPage({
const {isExtraSmallScreenHeight} = useResponsiveLayout();
const {translate} = useLocalize();
const {isOffline} = useNetwork();
const [cardList = {}] = useOnyx(ONYXKEYS.CARD_LIST);

const [formError, setFormError] = useState('');
const [lastFourDigits, setLastFourDigits] = useState('');
const [lastPressedDigit, setLastPressedDigit] = useState('');
const [canShowError, setCanShowError] = useState<boolean>(false);

const inactiveCard = cardList?.[cardID];
const cardError = ErrorUtils.getLatestErrorMessage(inactiveCard ?? {});
Expand All @@ -70,15 +64,19 @@ function ActivatePhysicalCardPage({
Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(cardID));
}, [cardID, cardList, inactiveCard?.isLoading, inactiveCard?.state]);

useEffect(
() => () => {
useEffect(() => {
if (!inactiveCard?.cardID) {
return;
}
CardSettings.clearCardListErrors(inactiveCard?.cardID);

return () => {
if (!inactiveCard?.cardID) {
return;
}
CardSettings.clearCardListErrors(inactiveCard?.cardID);
},
[inactiveCard?.cardID],
);
};
}, [inactiveCard?.cardID]);

/**
* Update lastPressedDigit with value that was pressed on BigNumberPad.
Expand All @@ -102,6 +100,7 @@ function ActivatePhysicalCardPage({
};

const submitAndNavigateToNextPage = useCallback(() => {
setCanShowError(true);
activateCardCodeInputRef.current?.blur();

if (lastFourDigits.replace(CONST.MAGIC_CODE_EMPTY_CHAR, '').length !== LAST_FOUR_DIGITS_LENGTH) {
Expand Down Expand Up @@ -140,7 +139,7 @@ function ActivatePhysicalCardPage({
lastPressedDigit={lastPressedDigit}
onChangeText={onCodeInput}
onFulfill={submitAndNavigateToNextPage}
errorText={formError || cardError}
errorText={canShowError ? formError || cardError : ''}
ref={activateCardCodeInputRef}
/>
</View>
Expand All @@ -164,8 +163,4 @@ function ActivatePhysicalCardPage({

ActivatePhysicalCardPage.displayName = 'ActivatePhysicalCardPage';

export default withOnyx<ActivatePhysicalCardPageProps, ActivatePhysicalCardPageOnyxProps>({
cardList: {
key: ONYXKEYS.CARD_LIST,
},
})(ActivatePhysicalCardPage);
export default ActivatePhysicalCardPage;
Loading