From 4bf0243197ae413d0e0c55fe9539c563c2d41b08 Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Tue, 26 Sep 2023 11:43:53 +0200 Subject: [PATCH] fix: cr fixes --- src/CONST.ts | 8 +++++ src/components/MagicCodeInput.js | 14 ++++----- src/libs/actions/CardSettings.js | 1 - src/pages/settings/Wallet/ActivateCardPage.js | 29 ++++++++++--------- .../settings/Wallet/ExpensifyCardPage.js | 17 ++++------- src/types/onyx/CardList.ts | 5 +--- 6 files changed, 38 insertions(+), 36 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 3a198aca2c8c..607b5fbe0131 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -83,6 +83,14 @@ const CONST = { MERCHANT_NAME_MAX_LENGTH: 255, + CARD_STATE: { + OPEN: 3, + NOT_ACTIVATED: 4, + DEACTIVATED: 5, + CLOSED: 6, + SUSPENDED: 7, + }, + CALENDAR_PICKER: { // Numbers were arbitrarily picked. MIN_YEAR: CURRENT_YEAR - 100, diff --git a/src/components/MagicCodeInput.js b/src/components/MagicCodeInput.js index 43d096801340..29e4ff838c77 100644 --- a/src/components/MagicCodeInput.js +++ b/src/components/MagicCodeInput.js @@ -50,7 +50,7 @@ const propTypes = { maxLength: PropTypes.number, /** Specifies if the keyboard should be disabled */ - disableKeyboard: PropTypes.bool, + isDisableKeyboard: PropTypes.bool, /** Last pressed digit on BigDigitPad */ lastPressedDigit: PropTypes.string, @@ -67,7 +67,7 @@ const defaultProps = { onFulfill: () => {}, hasError: false, maxLength: CONST.MAGIC_CODE_LENGTH, - disableKeyboard: false, + isDisableKeyboard: false, lastPressedDigit: '', }; @@ -246,14 +246,14 @@ function MagicCodeInput(props) { }; /** - * If disableKeyboard is true we will have to call onKeyPress and onChangeText manually + * If isDisableKeyboard is true we will have to call onKeyPress and onChangeText manually * as the press on digit pad will not trigger native events. We take lastPressedDigit from props * as it stores the last pressed digit pressed on digit pad. We take only the first character * as anything after that is added to differentiate between two same digits passed in a row. */ useEffect(() => { - if (!props.disableKeyboard) { + if (!props.isDisableKeyboard) { return; } @@ -264,7 +264,7 @@ function MagicCodeInput(props) { // We have not added: // + the onChangeText and onKeyPress as the dependencies because we only want to run this when lastPressedDigit changes. // eslint-disable-next-line react-hooks/exhaustive-deps - }, [props.lastPressedDigit, props.disableKeyboard]); + }, [props.lastPressedDigit, props.isDisableKeyboard]); return ( <> @@ -294,9 +294,9 @@ function MagicCodeInput(props) { ref.setAttribute('type', 'search'); } }} - disableKeyboard={props.disableKeyboard} + disableKeyboard={props.isDisableKeyboard} autoFocus={index === 0 && props.autoFocus} - inputMode={props.disableKeyboard ? 'none' : 'numeric'} + inputMode={props.isDisableKeyboard ? 'none' : 'numeric'} textContentType="oneTimeCode" name={props.name} maxLength={props.maxLength} diff --git a/src/libs/actions/CardSettings.js b/src/libs/actions/CardSettings.js index 089218f1f3f3..4104baa71cd5 100644 --- a/src/libs/actions/CardSettings.js +++ b/src/libs/actions/CardSettings.js @@ -8,7 +8,6 @@ import * as API from '../API'; * @param {Number} lastFourDigits * @param {Number} cardID */ - function activatePhysicalExpensifyCard(lastFourDigits, cardID) { API.write( 'ActivatePhysicalExpensifyCard', diff --git a/src/pages/settings/Wallet/ActivateCardPage.js b/src/pages/settings/Wallet/ActivateCardPage.js index 2253570d5888..1a93cbfad9ef 100644 --- a/src/pages/settings/Wallet/ActivateCardPage.js +++ b/src/pages/settings/Wallet/ActivateCardPage.js @@ -4,6 +4,7 @@ import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import lodashGet from 'lodash/get'; import {isUndefined} from 'lodash'; +import _ from 'underscore'; import Text from '../../../components/Text'; import Navigation from '../../../libs/Navigation/Navigation'; import styles from '../../../styles/styles'; @@ -21,18 +22,16 @@ import useWindowDimensions from '../../../hooks/useWindowDimensions'; import ONYXKEYS from '../../../ONYXKEYS'; import useLocalize from '../../../hooks/useLocalize'; import ROUTES from '../../../ROUTES'; +import CONST from '../../../CONST'; import assignedCardPropTypes from './assignedCardPropTypes'; const propTypes = { /* Onyx Props */ + /** The details about the Expensify cards */ cardList: PropTypes.shape({ isLoading: PropTypes.bool, - [PropTypes.string]: PropTypes.objectOf(assignedCardPropTypes), - [PropTypes.string]: PropTypes.shape({ - // eslint-disable-next-line react/forbid-prop-types - errors: PropTypes.object, - }), + [PropTypes.number]: PropTypes.objectOf(assignedCardPropTypes), }), /** Navigation route context info provided by react navigation */ @@ -49,7 +48,6 @@ const defaultProps = { }; const ACTIVATE_CARD_CODE_DESIRED_LENGTH = 4; -const CARD_ACTIVATED_STATE = 3; function ActivateCardPage({ cardList, @@ -64,21 +62,26 @@ function ActivateCardPage({ const [activateCardCode, setActivateCardCode] = useState(''); const [lastPressedDigit, setLastPressedDigit] = useState(''); - const cardID = lodashGet(cardList, 'physical.cardID', 0); + const cardID = lodashGet( + _.find(cardList, (card) => !card.isVirtual), + 'cardID', + 0, + ); + const activateCardCodeInputRef = useRef(null); /** - * If state of the card is CARD_ACTIVATED_STATE, navigate to card details screen. + * If state of the card is CONST.CARD_STATE.OPEN, navigate to card details screen. */ useEffect(() => { if (cardList.isLoading) { return; } - if (!cardList.isLoading && lodashGet(cardList, 'physical.state', 0) === CARD_ACTIVATED_STATE) { + if (!cardList.isLoading && lodashGet(cardList, `${cardID}.state`, 0) === CONST.CARD_STATE.OPEN) { Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARDS.getRoute(domain)); } - }, [cardList, domain]); + }, [cardID, cardList, domain]); /** * Set form error if there is one for cardID in onyx @@ -129,14 +132,14 @@ function ActivateCardPage({ return ( Navigation.goBack()} + onBackButtonPress={Navigation.goBack} backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.PREFERENCES]} illustration={LottieAnimations.Magician} > {translate('activateCardPage.pleaseEnterLastFour')} - {DeviceCapabilities.canUseTouchScreen() ? : null} + {DeviceCapabilities.canUseTouchScreen() && }