Skip to content

Commit 04ba4e6

Browse files
narefyev91narefyev91
committed
c+ review fixes
1 parent 5e0cf08 commit 04ba4e6

10 files changed

Lines changed: 66 additions & 54 deletions

‎src/components/PlaidCardFeedIcon.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,22 @@ import Image from './Image';
1010
type PlaidCardFeedIconProps = {
1111
plaidUrl: string;
1212
style?: StyleProp<ViewStyle>;
13+
isLarge?: boolean
1314
};
1415

15-
function PlaidCardFeedIcon({plaidUrl, style}: PlaidCardFeedIconProps) {
16+
function PlaidCardFeedIcon({plaidUrl, style, isLarge}: PlaidCardFeedIconProps) {
1617
const styles = useThemeStyles();
1718
return (
1819
<View style={[style]}>
1920
<Image
2021
source={{uri: plaidUrl}}
21-
style={styles.plaidIconSmall}
22+
style={isLarge ? styles.plaidIcon: styles.plaidIconSmall}
2223
cachePolicy="memory-disk"
2324
/>
2425
<Icon
25-
src={Illustrations.PlaidCompanyCardDetail}
26-
height={variables.cardIconHeight}
27-
width={variables.cardIconWidth}
26+
src={isLarge ? Illustrations.PlaidCompanyCardDetailLarge: Illustrations.PlaidCompanyCardDetail}
27+
height={isLarge ? variables.cardPreviewHeight: variables.cardIconHeight}
28+
width={isLarge ? variables.cardPreviewWidth: variables.cardIconWidth}
2829
/>
2930
</View>
3031
);

‎src/languages/es.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3936,7 +3936,7 @@ const translations = {
39363936
companyCard: 'tarjeta de empresa',
39373937
chooseCardFeed: 'Elige feed de tarjetas',
39383938
ukRegulation:
3939-
'Expensify Limited es agente de Plaid Financial Ltd., una entidad de pago autorizada y regulada por la Autoridad de Conducta Financiera (FCA) según el Reglamento de Servicios de Pago de 2017 (Número de referencia de la empresa: 804718). Plaid le proporciona servicios regulados de información de cuentas a través de Expensify Limited como su agente.',
3939+
'Expensify Limited es un agente de Plaid Financial Ltd., una institución de pago autorizada y regulada por la Financial Conduct Authority conforme al Reglamento de Servicios de Pago de 2017 (Número de Referencia de la Firma: 804718). Plaid te proporciona servicios regulados de información de cuentas a través de Expensify Limited como su agente.',
39403940
},
39413941
expensifyCard: {
39423942
issueAndManageCards: 'Emitir y gestionar Tarjetas Expensify',

‎src/pages/workspace/companyCards/WorkspaceCompanyCardDetailsPage.tsx‎

Lines changed: 5 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ import ConfirmModal from '@components/ConfirmModal';
66
import HeaderWithBackButton from '@components/HeaderWithBackButton';
77
import {FallbackAvatar} from '@components/Icon/Expensicons';
88
import * as Expensicons from '@components/Icon/Expensicons';
9-
import Image from '@components/Image';
109
import ImageSVG from '@components/ImageSVG';
1110
import MenuItem from '@components/MenuItem';
1211
import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
1312
import OfflineWithFeedback from '@components/OfflineWithFeedback';
13+
import PlaidCardFeedIcon from '@components/PlaidCardFeedIcon';
1414
import ScreenWrapper from '@components/ScreenWrapper';
1515
import ScrollView from '@components/ScrollView';
1616
import useCardFeeds from '@hooks/useCardFeeds';
@@ -33,7 +33,6 @@ import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
3333
import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
3434
import variables from '@styles/variables';
3535
import {clearCompanyCardErrorField, unassignWorkspaceCompanyCard, updateWorkspaceCompanyCard} from '@userActions/CompanyCards';
36-
import * as Illustrations from '@src/components/Icon/Illustrations';
3736
import CONST from '@src/CONST';
3837
import ONYXKEYS from '@src/ONYXKEYS';
3938
import ROUTES from '@src/ROUTES';
@@ -113,20 +112,10 @@ function WorkspaceCompanyCardDetailsPage({route}: WorkspaceCompanyCardDetailsPag
113112
<ScrollView addBottomSafeAreaPadding>
114113
<View style={[styles.walletCard, styles.mb3]}>
115114
{plaidUrl ? (
116-
<>
117-
<Image
118-
source={{uri: plaidUrl}}
119-
style={styles.plaidIcon}
120-
cachePolicy="memory-disk"
121-
/>
122-
<ImageSVG
123-
contentFit="contain"
124-
src={Illustrations.PlaidCompanyCardDetailLarge}
125-
pointerEvents="none"
126-
height={variables.cardPreviewHeight}
127-
width={variables.cardPreviewWidth}
128-
/>
129-
</>
115+
<PlaidCardFeedIcon
116+
plaidUrl={plaidUrl}
117+
isLarge
118+
/>
130119
) : (
131120
<ImageSVG
132121
contentFit="contain"

‎src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import DelegateNoAccessModal from '@components/DelegateNoAccessModal';
55
import FeatureList from '@components/FeatureList';
66
import type {FeatureListItem} from '@components/FeatureList';
77
import {CompanyCardsEmptyState, CreditCardsNew, HandCard, MagnifyingGlassMoney} from '@components/Icon/Illustrations';
8+
import Text from '@components/Text';
89
import useLocalize from '@hooks/useLocalize';
910
import useResponsiveLayout from '@hooks/useResponsiveLayout';
1011
import useThemeStyles from '@hooks/useThemeStyles';
@@ -34,7 +35,11 @@ const companyCardFeatures: FeatureListItem[] = [
3435
},
3536
];
3637

37-
function WorkspaceCompanyCardPageEmptyState({policy}: WithPolicyAndFullscreenLoadingProps) {
38+
type WorkspaceCompanyCardPageEmptyStateProps = {
39+
shouldShowGBDisclaimer?: boolean;
40+
} & WithPolicyAndFullscreenLoadingProps;
41+
42+
function WorkspaceCompanyCardPageEmptyState({policy, shouldShowGBDisclaimer}: WorkspaceCompanyCardPageEmptyStateProps) {
3843
const {translate} = useLocalize();
3944
const styles = useThemeStyles();
4045
const {shouldUseNarrowLayout} = useResponsiveLayout();
@@ -77,6 +82,7 @@ function WorkspaceCompanyCardPageEmptyState({policy}: WithPolicyAndFullscreenLoa
7782
isNoDelegateAccessMenuVisible={isNoDelegateAccessMenuVisible}
7883
onClose={() => setIsNoDelegateAccessMenuVisible(false)}
7984
/>
85+
{!!shouldShowGBDisclaimer && <Text style={[styles.textMicroSupporting, styles.m5]}>{translate('workspace.companyCards.ukRegulation')}</Text>}
8086
</View>
8187
);
8288
}

‎src/pages/workspace/companyCards/WorkspaceCompanyCardsFeedAddedEmptyPage.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
44
import * as Illustrations from '@components/Icon/Illustrations';
55
import ScrollView from '@components/ScrollView';
66
import CardRowSkeleton from '@components/Skeletons/CardRowSkeleton';
7+
import Text from '@components/Text';
78
import useLocalize from '@hooks/useLocalize';
89
import useThemeStyles from '@hooks/useThemeStyles';
910
import colors from '@styles/theme/colors';
@@ -15,14 +16,20 @@ type WorkspaceCompanyCardsFeedAddedEmptyPageProps = {
1516

1617
/** Whether to disable assign card button */
1718
isDisabledAssignCardButton?: boolean;
19+
20+
/** Whether to disable GB disclaimer */
21+
shouldShowGBDisclaimer?: boolean;
1822
};
1923

20-
function WorkspaceCompanyCardsFeedAddedEmptyPage({handleAssignCard, isDisabledAssignCardButton}: WorkspaceCompanyCardsFeedAddedEmptyPageProps) {
24+
function WorkspaceCompanyCardsFeedAddedEmptyPage({handleAssignCard, isDisabledAssignCardButton, shouldShowGBDisclaimer}: WorkspaceCompanyCardsFeedAddedEmptyPageProps) {
2125
const {translate} = useLocalize();
2226
const styles = useThemeStyles();
2327

2428
return (
25-
<ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexShrink0]}>
29+
<ScrollView
30+
contentContainerStyle={[styles.flexGrow1, styles.flexShrink0]}
31+
addBottomSafeAreaPadding
32+
>
2633
<EmptyStateComponent
2734
SkeletonComponent={CardRowSkeleton}
2835
headerMediaType={CONST.EMPTY_STATE_MEDIA.ILLUSTRATION}
@@ -42,6 +49,7 @@ function WorkspaceCompanyCardsFeedAddedEmptyPage({handleAssignCard, isDisabledAs
4249
},
4350
]}
4451
/>
52+
{!!shouldShowGBDisclaimer && <Text style={[styles.textMicroSupporting, styles.m5]}>{translate('workspace.companyCards.ukRegulation')}</Text>}
4553
</ScrollView>
4654
);
4755
}

‎src/pages/workspace/companyCards/WorkspaceCompanyCardsList.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,12 @@ type WorkspaceCompanyCardsListProps = {
3333

3434
/** Whether to disable assign card button */
3535
isDisabledAssignCardButton?: boolean;
36+
37+
/** Whether to show GB disclaimer */
38+
shouldShowGBDisclaimer?: boolean;
3639
};
3740

38-
function WorkspaceCompanyCardsList({cardsList, policyID, handleAssignCard, isDisabledAssignCardButton}: WorkspaceCompanyCardsListProps) {
41+
function WorkspaceCompanyCardsList({cardsList, policyID, handleAssignCard, isDisabledAssignCardButton, shouldShowGBDisclaimer}: WorkspaceCompanyCardsListProps) {
3942
const styles = useThemeStyles();
4043
const {translate} = useLocalize();
4144
const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false});
@@ -122,6 +125,7 @@ function WorkspaceCompanyCardsList({cardsList, policyID, handleAssignCard, isDis
122125
if (allCards.length === 0) {
123126
return (
124127
<WorkspaceCompanyCardsFeedAddedEmptyPage
128+
shouldShowGBDisclaimer={shouldShowGBDisclaimer}
125129
handleAssignCard={handleAssignCard}
126130
isDisabledAssignCardButton={isDisabledAssignCardButton}
127131
/>

‎src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React, {useCallback, useEffect, useState} from 'react';
2-
import {ActivityIndicator, View} from 'react-native';
2+
import {ActivityIndicator} from 'react-native';
33
import {useOnyx} from 'react-native-onyx';
44
import DecisionModal from '@components/DecisionModal';
55
import DelegateNoAccessModal from '@components/DelegateNoAccessModal';
66
import * as Illustrations from '@components/Icon/Illustrations';
7-
import Text from '@components/Text';
87
import useCardFeeds from '@hooks/useCardFeeds';
98
import useCardsList from '@hooks/useCardsList';
109
import useLocalize from '@hooks/useLocalize';
@@ -58,6 +57,7 @@ function WorkspaceCompanyCardsPage({route}: WorkspaceCompanyCardsPageProps) {
5857
const [cardsList] = useCardsList(policyID, selectedFeed);
5958
const [countryByIp] = useOnyx(ONYXKEYS.COUNTRY, {canBeMissing: false});
6059
const {isBetaEnabled} = usePermissions();
60+
const hasNoAssignedCard = Object.keys(cardsList ?? {}).length === 0;
6161

6262
const {cardList, ...cards} = cardsList ?? {};
6363

@@ -82,6 +82,7 @@ function WorkspaceCompanyCardsPage({route}: WorkspaceCompanyCardsPageProps) {
8282
const {isOffline} = useNetwork({onReconnect: fetchCompanyCards});
8383
const isLoading = !isOffline && (!cardFeeds || (!!cardFeeds.isLoading && isEmptyObject(cardsList)));
8484
const isGB = countryByIp === CONST.COUNTRY.GB;
85+
const shouldShowGBDisclaimer = isGB && isBetaEnabled(CONST.BETAS.PLAID_COMPANY_CARDS) && (isNoFeed || hasNoAssignedCard);
8586

8687
useEffect(() => {
8788
fetchCompanyCards();
@@ -175,21 +176,22 @@ function WorkspaceCompanyCardsPage({route}: WorkspaceCompanyCardsPageProps) {
175176
handleAssignCard={handleAssignCard}
176177
/>
177178
)}
178-
{isNoFeed && <WorkspaceCompanyCardPageEmptyState route={route} />}
179+
{isNoFeed && (
180+
<WorkspaceCompanyCardPageEmptyState
181+
route={route}
182+
shouldShowGBDisclaimer={shouldShowGBDisclaimer}
183+
/>
184+
)}
179185
{isPending && <WorkspaceCompanyCardsFeedPendingPage />}
180186
{isFeedAdded && !isPending && (
181187
<WorkspaceCompanyCardsList
182188
cardsList={cardsList}
189+
shouldShowGBDisclaimer={shouldShowGBDisclaimer}
183190
policyID={policyID}
184191
handleAssignCard={handleAssignCard}
185192
isDisabledAssignCardButton={!selectedFeedData || isFeedConnectionBroken}
186193
/>
187194
)}
188-
{isGB && isBetaEnabled(CONST.BETAS.PLAID_COMPANY_CARDS) && (isNoFeed || (isFeedAdded && !isPending)) && (
189-
<View style={[styles.sidebarFooter, styles.mb5]}>
190-
<Text style={[styles.chatItemMessageHeaderTimestamp]}>{translate('workspace.companyCards.ukRegulation')}</Text>
191-
</View>
192-
)}
193195
</WorkspacePageWithSections>
194196
)}
195197
<DelegateNoAccessModal

‎src/pages/workspace/companyCards/addNew/CardInstructionsStep.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import ScrollView from '@components/ScrollView';
99
import Text from '@components/Text';
1010
import useLocalize from '@hooks/useLocalize';
1111
import useNetwork from '@hooks/useNetwork';
12+
import usePermissions from '@hooks/usePermissions';
1213
import useThemeStyles from '@hooks/useThemeStyles';
1314
import {updateSelectedFeed} from '@libs/actions/Card';
1415
import {setAddNewCompanyCardStepAndData} from '@libs/actions/CompanyCards';
@@ -48,6 +49,7 @@ function CardInstructionsStep({policyID}: CardInstructionsStepProps) {
4849
const isAmexFeedProvider = feedProvider === CONST.COMPANY_CARD.FEED_BANK_NAME.AMEX;
4950
const isOtherBankSelected = bank === CONST.COMPANY_CARDS.BANKS.OTHER;
5051
const translationKey = getCardInstructionHeader(feedProvider);
52+
const {isBetaEnabled} = usePermissions();
5153

5254
const buttonTranslation = isStripeFeedProvider ? translate('common.submit') : translate('common.next');
5355

@@ -69,7 +71,7 @@ function CardInstructionsStep({policyID}: CardInstructionsStepProps) {
6971
};
7072

7173
const handleBackButtonPress = () => {
72-
if (isAmexFeedProvider) {
74+
if (isAmexFeedProvider && !isBetaEnabled(CONST.BETAS.PLAID_COMPANY_CARDS)) {
7375
setAddNewCompanyCardStepAndData({
7476
step: CONST.COMPANY_CARDS.STEP.AMEX_CUSTOM_FEED,
7577
});

‎src/pages/workspace/companyCards/addNew/PlaidConnectionStep.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -104,23 +104,6 @@ function PlaidConnectionStep({feed}: {feed?: CompanyCardFeed}) {
104104
Log.hmmm('[PlaidLink] Error: ', error?.message);
105105
}, []);
106106

107-
if (isPlaidDisabled) {
108-
return (
109-
<ScreenWrapper
110-
testID={PlaidConnectionStep.displayName}
111-
enableEdgeToEdgeBottomSafeAreaPadding
112-
shouldEnablePickerAvoiding={false}
113-
shouldEnableMaxHeight
114-
>
115-
<HeaderWithBackButton
116-
title={translate('workspace.companyCards.addCards')}
117-
onBackButtonPress={handleBackButtonPress}
118-
/>
119-
<Text style={[styles.formError, styles.ph5, styles.mv3]}>{translate('bankAccount.error.tooManyAttempts')}</Text>
120-
</ScreenWrapper>
121-
);
122-
}
123-
124107
const renderPlaidLink = () => {
125108
if (plaidLinkToken) {
126109
return (
@@ -186,7 +169,24 @@ function PlaidConnectionStep({feed}: {feed?: CompanyCardFeed}) {
186169
}
187170
};
188171

189-
return <FullPageOfflineBlockingView>{renderPlaidLink()}</FullPageOfflineBlockingView>;
172+
return (
173+
<ScreenWrapper
174+
testID={PlaidConnectionStep.displayName}
175+
enableEdgeToEdgeBottomSafeAreaPadding
176+
shouldEnablePickerAvoiding={false}
177+
shouldEnableMaxHeight
178+
>
179+
<HeaderWithBackButton
180+
title={translate('workspace.companyCards.addCards')}
181+
onBackButtonPress={handleBackButtonPress}
182+
/>
183+
{isPlaidDisabled ? (
184+
<Text style={[styles.formError, styles.ph5, styles.mv3]}>{translate('bankAccount.error.tooManyAttempts')}</Text>
185+
) : (
186+
<FullPageOfflineBlockingView>{renderPlaidLink()}</FullPageOfflineBlockingView>
187+
)}
188+
</ScreenWrapper>
189+
);
190190
}
191191

192192
PlaidConnectionStep.displayName = 'PlaidConnectionStep';

‎src/styles/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5144,7 +5144,7 @@ const styles = (theme: ThemeColors) =>
51445144
width: variables.iconSizeMegaLarge,
51455145
position: 'absolute',
51465146
right: 24,
5147-
top: 24,
5147+
top: 20,
51485148
zIndex: 1,
51495149
},
51505150

0 commit comments

Comments
 (0)