Merge remote-tracking branch 'upstream/main' into 67608-category-tag-list-deselected-when-editing-name

Author: huult

src/pages/workspace/companyCards/assignCard/CardSelectionStep.tsx

@@ -20,6 +20,7 @@ import useThemeIllustrations from '@hooks/useThemeIllustrations';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {setAssignCardStepAndData} from '@libs/actions/CompanyCards';
 import {getBankName, getCardFeedIcon, getCustomOrFormattedFeedName, getFilteredCardList, getPlaidInstitutionIconUrl, lastFourNumbersFromCardName, maskCardNumber} from '@libs/CardUtils';
+import Navigation from '@libs/Navigation/Navigation';
 import {getPersonalDetailByEmail} from '@libs/PersonalDetailsUtils';
 import tokenizedSearch from '@libs/tokenizedSearch';
 import variables from '@styles/variables';
@@ -56,6 +57,27 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
     const [cardSelected, setCardSelected] = useState(assignCard?.data?.encryptedCardNumber ?? '');
     const [shouldShowError, setShouldShowError] = useState(false);
 
+    const cardListOptions = Object.entries(filteredCardList).map(([cardNumber, encryptedCardNumber]) => ({
+        keyForList: encryptedCardNumber,
+        value: encryptedCardNumber,
+        text: maskCardNumber(cardNumber, feed),
+        alternateText: lastFourNumbersFromCardName(cardNumber),
+        isSelected: cardSelected === encryptedCardNumber,
+        leftElement: plaidUrl ? (
+            <PlaidCardFeedIcon
+                plaidUrl={plaidUrl}
+                style={styles.mr3}
+            />
+        ) : (
+            <Icon
+                src={getCardFeedIcon(feed, illustrations)}
+                height={variables.cardIconHeight}
+                width={variables.iconSizeExtraLarge}
+                additionalStyles={[styles.mr3, styles.cardIcon]}
+            />
+        ),
+    }));
+
     const handleBackButtonPress = () => {
         if (isEditing) {
             setAssignCardStepAndData({
@@ -64,6 +86,10 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
             });
             return;
         }
+        if (!cardListOptions.length) {
+            Navigation.goBack();
+            return;
+        }
         setAssignCardStepAndData({currentStep: CONST.COMPANY_CARD.STEP.ASSIGNEE});
     };
 
@@ -90,27 +116,6 @@ function CardSelectionStep({feed, policyID}: CardSelectionStepProps) {
         });
     };
 
-    const cardListOptions = Object.entries(filteredCardList).map(([cardNumber, encryptedCardNumber]) => ({
-        keyForList: encryptedCardNumber,
-        value: encryptedCardNumber,
-        text: maskCardNumber(cardNumber, feed),
-        alternateText: lastFourNumbersFromCardName(cardNumber),
-        isSelected: cardSelected === encryptedCardNumber,
-        leftElement: plaidUrl ? (
-            <PlaidCardFeedIcon
-                plaidUrl={plaidUrl}
-                style={styles.mr3}
-            />
-        ) : (
-            <Icon
-                src={getCardFeedIcon(feed, illustrations)}
-                height={variables.cardIconHeight}
-                width={variables.iconSizeExtraLarge}
-                additionalStyles={[styles.mr3, styles.cardIcon]}
-            />
-        ),
-    }));
-
     const searchedListOptions = useMemo(() => {
         return tokenizedSearch(cardListOptions, searchText, (option) => [option.text]);
     }, [searchText, cardListOptions]);