fix: cr fixes

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,

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}

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',

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 (
         <IllustratedHeaderPageLayout
             title={translate('activateCardPage.activateCard')}
-            onBackButtonPress={() => Navigation.goBack()}
+            onBackButtonPress={Navigation.goBack}
             backgroundColor={themeColors.PAGE_BACKGROUND_COLORS[SCREENS.SETTINGS.PREFERENCES]}
             illustration={LottieAnimations.Magician}
         >
             <Text style={[styles.mh5, styles.textHeadline]}>{translate('activateCardPage.pleaseEnterLastFour')}</Text>
             <View style={[styles.mh5]}>
                 <MagicCodeInput
-                    disableKeyboard
+                    isDisableKeyboard
                     autoComplete="off"
                     maxLength={ACTIVATE_CARD_CODE_DESIRED_LENGTH}
                     name="activateCardCode"
@@ -149,7 +152,7 @@ function ActivateCardPage({
                 />
             </View>
             <View style={[styles.w100, styles.justifyContentEnd, styles.pageWrapper]}>
-                {DeviceCapabilities.canUseTouchScreen() ? <BigNumberPad numberPressed={updateLastPressedDigit} /> : null}
+                {DeviceCapabilities.canUseTouchScreen() && <BigNumberPad numberPressed={updateLastPressedDigit} />}
                 <Button
                     success
                     isLoading={cardList.isLoading}

src/pages/settings/Wallet/ExpensifyCardPage.js

@@ -10,23 +10,21 @@ import CardPreview from '../../../components/CardPreview';
 import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
 import MenuItemWithTopDescription from '../../../components/MenuItemWithTopDescription';
 import ScreenWrapper from '../../../components/ScreenWrapper';
-import assignedCardPropTypes from './assignedCardPropTypes';
 import useLocalize from '../../../hooks/useLocalize';
 import * as CurrencyUtils from '../../../libs/CurrencyUtils';
 import Navigation from '../../../libs/Navigation/Navigation';
 import styles from '../../../styles/styles';
 import * as CardUtils from '../../../libs/CardUtils';
 import Button from '../../../components/Button';
+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 */
@@ -42,9 +40,6 @@ const defaultProps = {
     cardList: {},
 };
 
-// eslint-disable-next-line rulesdir/no-negated-variables
-const CARD_NOT_ACTIVATED_STATE = 4;
-
 function ExpensifyCardPage({
     cardList,
     route: {
@@ -102,14 +97,14 @@ function ExpensifyCardPage({
                         )}
                         {}
                     </ScrollView>
-                    {physicalCard.state === CARD_NOT_ACTIVATED_STATE ? (
+                    {physicalCard.state === CONST.CARD_STATE.NOT_ACTIVATED && (
                         <Button
                             success
                             style={[styles.w100, styles.p5]}
                             onPress={() => Navigation.navigate(ROUTES.SETTINGS_WALLET_CARD_ACTIVATE.getRoute(domain))}
                             text={translate('activateCardPage.activatePhysicalCard')}
                         />
-                    ) : null}
+                    )}
                 </>
             )}
         </ScreenWrapper>

src/types/onyx/CardList.ts

@@ -1,9 +1,6 @@
 import Card from './Card';
-import {Errors} from './OnyxCommon';
 
-type CardList = Record<string, {errors?: Errors}> & {
-    physical: Card;
-    virtual: Card;
+type CardList = Record<string, Card> & {
     isLoading: boolean;
 };