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

Expensify Card promotion banner conditional display #57218

Merged
merged 4 commits into from
Feb 25, 2025
+126 −68
Merged

Expensify Card promotion banner conditional display #57218

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4f37a30
Expensify Card promotion banner conditional display
ikevin127 Feb 21, 2025
9080e06
Merge branch 'main' of https://github.com/Expensify/App into ikevin12…
ikevin127 Feb 21, 2025
5a81405
code review adjustments and sync w/ main
ikevin127 Feb 21, 2025
085633d
Merge branch 'main' of https://github.com/Expensify/App into ikevin12…
ikevin127 Feb 24, 2025
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
9 changes: 9 additions & 0 deletions src/libs/CardUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -516,6 +516,14 @@ function checkIfFeedConnectionIsBroken(feedCards: Record<string, Card> | undefin
return Object.values(feedCards).some((card) => card.bank !== feedToExclude && card.lastScrapeResult !== 200);
}

/**
* Checks if an Expensify Card was issued for a given workspace.
*/
function hasIssuedExpensifyCard(workspaceAccountID: number, allCardList: OnyxCollection<WorkspaceCardsList> = allWorkspaceCards): boolean {
const cards = getAllCardsForWorkspace(workspaceAccountID, allCardList);
return Object.values(cards).some((card) => card.bank === CONST.EXPENSIFY_CARD.BANK);
}

function hasCardListObject(workspaceAccountID: number, feedName: CompanyCardFeed): boolean {
const workspaceCards = allWorkspaceCards?.[`cards_${workspaceAccountID}_${feedName}`] ?? {};
return !!workspaceCards.cardList;
Expand Down Expand Up @@ -559,5 +567,6 @@ export {
getFeedType,
flatAllCardsList,
checkIfFeedConnectionIsBroken,
hasIssuedExpensifyCard,
hasCardListObject,
};
17 changes: 10 additions & 7 deletions src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,32 @@ import {useOnyx} from 'react-native-onyx';
import DelegateNoAccessModal from '@components/DelegateNoAccessModal';
import FeatureList from '@components/FeatureList';
import type {FeatureListItem} from '@components/FeatureList';
import * as Illustrations from '@components/Icon/Illustrations';
import {CompanyCardsEmptyState, CreditCardsNew, HandCard, MagnifyingGlassMoney} from '@components/Icon/Illustrations';
import useLocalize from '@hooks/useLocalize';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useThemeStyles from '@hooks/useThemeStyles';
import {hasIssuedExpensifyCard} from '@libs/CardUtils';
import Navigation from '@libs/Navigation/Navigation';
import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
import colors from '@styles/theme/colors';
import {clearAddNewCardFlow} from '@userActions/CompanyCards';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import WorkspaceCompanyCardExpensifyCardPromotionBanner from './WorkspaceCompanyCardExpensifyCardPromotionBanner';

const companyCardFeatures: FeatureListItem[] = [
{
icon: Illustrations.CreditCardsNew,
icon: CreditCardsNew,
translationKey: 'workspace.moreFeatures.companyCards.feed.features.support',
},
{
icon: Illustrations.HandCard,
icon: HandCard,
translationKey: 'workspace.moreFeatures.companyCards.feed.features.assignCards',
},
{
icon: Illustrations.MagnifyingGlassMoney,
icon: MagnifyingGlassMoney,
translationKey: 'workspace.moreFeatures.companyCards.feed.features.automaticImport',
},
];
Expand All @@ -36,9 +38,10 @@ function WorkspaceCompanyCardPageEmptyState({policy}: WithPolicyAndFullscreenLoa
const {translate} = useLocalize();
const styles = useThemeStyles();
const {shouldUseNarrowLayout} = useResponsiveLayout();

const [isActingAsDelegate] = useOnyx(ONYXKEYS.ACCOUNT, {selector: (account) => !!account?.delegatedAccess?.delegate});
const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);
const [allWorkspaceCards] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST);
const shouldShowExpensifyCardPromotionBanner = !hasIssuedExpensifyCard(policy?.workspaceAccountID ?? CONST.DEFAULT_NUMBER_ID, allWorkspaceCards);

const handleCtaPress = useCallback(() => {
if (!policy?.id) {
Expand All @@ -54,7 +57,7 @@ function WorkspaceCompanyCardPageEmptyState({policy}: WithPolicyAndFullscreenLoa

return (
<View style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
<WorkspaceCompanyCardExpensifyCardPromotionBanner policy={policy} />
{shouldShowExpensifyCardPromotionBanner && <WorkspaceCompanyCardExpensifyCardPromotionBanner policy={policy} />}
<FeatureList
menuItems={companyCardFeatures}
title={translate('workspace.moreFeatures.companyCards.feed.title')}
Expand All @@ -63,7 +66,7 @@ function WorkspaceCompanyCardPageEmptyState({policy}: WithPolicyAndFullscreenLoa
ctaAccessibilityLabel={translate('workspace.companyCards.addCards')}
onCtaPress={handleCtaPress}
illustrationBackgroundColor={colors.blue700}
illustration={Illustrations.CompanyCardsEmptyState}
illustration={CompanyCardsEmptyState}
illustrationStyle={styles.emptyStateCardIllustration}
illustrationContainerStyle={[styles.emptyStateCardIllustrationContainer, styles.justifyContentStart]}
titleStyles={styles.textHeadlineH1}
Expand Down
Loading