diff --git a/assets/images/companyCards/emptystate__card-pos.svg b/assets/images/companyCards/emptystate__card-pos.svg
new file mode 100644
index 000000000000..6a6fbae74a04
--- /dev/null
+++ b/assets/images/companyCards/emptystate__card-pos.svg
@@ -0,0 +1,643 @@
+
+
+
diff --git a/assets/images/simple-illustrations/simple-illustration__magnifyingglass-money.svg b/assets/images/simple-illustrations/simple-illustration__magnifyingglass-money.svg
new file mode 100644
index 000000000000..e7f64f69305a
--- /dev/null
+++ b/assets/images/simple-illustrations/simple-illustration__magnifyingglass-money.svg
@@ -0,0 +1,49 @@
+
+
+
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 97a86d272530..c532970824b0 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -895,6 +895,10 @@ const ROUTES = {
route: 'settings/workspaces/:policyID/expensify-card',
getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card` as const,
},
+ WORKSPACE_COMPANY_CARDS: {
+ route: 'settings/workspaces/:policyID/company-cards',
+ getRoute: (policyID: string) => `settings/workspaces/${policyID}/company-cards` as const,
+ },
WORKSPACE_EXPENSIFY_CARD_DETAILS: {
route: 'settings/workspaces/:policyID/expensify-card/:cardID',
getRoute: (policyID: string, cardID: string, backTo?: string) => getUrlWithBackToParam(`settings/workspaces/${policyID}/expensify-card/${cardID}`, backTo),
@@ -931,10 +935,6 @@ const ROUTES = {
route: 'settings/workspaces/:policyID/expensify-card/settings/frequency',
getRoute: (policyID: string) => `settings/workspaces/${policyID}/expensify-card/settings/frequency` as const,
},
- WORKSPACE_COMPANY_CARDS: {
- route: 'settings/workspaces/:policyID/company-cards',
- getRoute: (policyID: string) => `settings/workspaces/${policyID}/company-cards` as const,
- },
WORKSPACE_RULES: {
route: 'settings/workspaces/:policyID/rules',
getRoute: (policyID: string) => `settings/workspaces/${policyID}/rules` as const,
diff --git a/src/components/FeatureList.tsx b/src/components/FeatureList.tsx
index 88dfed67d0c6..30c72d467073 100644
--- a/src/components/FeatureList.tsx
+++ b/src/components/FeatureList.tsx
@@ -54,6 +54,9 @@ type FeatureListProps = {
/** The background color to apply in the upper half of the screen. */
illustrationBackgroundColor?: string;
+ /** Customize the Illustration container */
+ illustrationContainerStyle?: StyleProp;
+
/** The style used for the title */
titleStyles?: StyleProp;
@@ -78,6 +81,7 @@ function FeatureList({
illustration,
illustrationStyle,
illustrationBackgroundColor,
+ illustrationContainerStyle,
titleStyles,
contentPaddingOnLargeScreens,
}: FeatureListProps) {
@@ -94,6 +98,7 @@ function FeatureList({
illustrationBackgroundColor={illustrationBackgroundColor}
illustrationStyle={illustrationStyle}
titleStyles={titleStyles}
+ illustrationContainerStyle={illustrationContainerStyle}
contentPaddingOnLargeScreens={contentPaddingOnLargeScreens}
>
diff --git a/src/components/Icon/Illustrations.ts b/src/components/Icon/Illustrations.ts
index 060f31647b7c..e30fc8bce7b7 100644
--- a/src/components/Icon/Illustrations.ts
+++ b/src/components/Icon/Illustrations.ts
@@ -1,4 +1,5 @@
import AmexCompanyCards from '@assets/images/companyCards/amex.svg';
+import CompanyCardsEmptyState from '@assets/images/companyCards/emptystate__card-pos.svg';
import MasterCardCompanyCards from '@assets/images/companyCards/mastercard.svg';
import VisaCompanyCards from '@assets/images/companyCards/visa.svg';
import EmptyCardState from '@assets/images/emptystate__expensifycard.svg';
@@ -75,6 +76,7 @@ import LockClosed from '@assets/images/simple-illustrations/simple-illustration_
import LockClosedOrange from '@assets/images/simple-illustrations/simple-illustration__lockclosed_orange.svg';
import LockOpen from '@assets/images/simple-illustrations/simple-illustration__lockopen.svg';
import Luggage from '@assets/images/simple-illustrations/simple-illustration__luggage.svg';
+import MagnifyingGlassMoney from '@assets/images/simple-illustrations/simple-illustration__magnifyingglass-money.svg';
import Mailbox from '@assets/images/simple-illustrations/simple-illustration__mailbox.svg';
import MoneyReceipts from '@assets/images/simple-illustrations/simple-illustration__money-receipts.svg';
import MoneyBadge from '@assets/images/simple-illustrations/simple-illustration__moneybadge.svg';
@@ -222,7 +224,9 @@ export {
Tire,
BigVault,
Filters,
+ MagnifyingGlassMoney,
Rules,
+ CompanyCardsEmptyState,
AmexCompanyCards,
MasterCardCompanyCards,
VisaCompanyCards,
diff --git a/src/languages/en.ts b/src/languages/en.ts
index e7040366dceb..983175727f8a 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -2115,9 +2115,9 @@ export default {
common: {
card: 'Cards',
expensifyCard: 'Expensify Card',
+ companyCards: 'Company Cards',
workflows: 'Workflows',
workspace: 'Workspace',
- companyCards: 'Company cards',
edit: 'Edit workspace',
enabled: 'Enabled',
disabled: 'Disabled',
@@ -2888,7 +2888,16 @@ export default {
},
companyCards: {
title: 'Company Cards',
- subtitle: 'Import spend from existing company cards',
+ subtitle: 'Import spend from existing company cards.',
+ feed: {
+ title: 'Import company cards',
+ features: {
+ support: 'Support for all major card providers',
+ assignCards: 'Assign cards to the entire team',
+ automaticImport: 'Automatic transaction import',
+ },
+ ctaTitle: 'Add company cards',
+ },
disableCardTitle: 'Disable Company Cards',
disableCardPrompt: 'You can’t disable company cards because this feature is in use. Reach out to the Concierge for next steps.',
disableCardButton: 'Chat with Concierge',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index f2a1a5b339b9..e5fca822ad65 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -2146,9 +2146,9 @@ export default {
common: {
card: 'Tarjetas',
expensifyCard: 'Tarjeta Expensify',
+ companyCards: 'Tarjetas de empresa',
workflows: 'Flujos de trabajo',
workspace: 'Espacio de trabajo',
- companyCards: 'Tarjetas de empresa',
edit: 'Editar espacio de trabajo',
enabled: 'Activada',
disabled: 'Desactivada',
@@ -2933,6 +2933,15 @@ export default {
companyCards: {
title: 'Tarjetas de empresa',
subtitle: 'Importar gastos de las tarjetas de empresa existentes.',
+ feed: {
+ title: 'Importar tarjetas de empresa',
+ features: {
+ support: 'Compatibilidad con los principales proveedores de tarjetas',
+ assignCards: 'Asignar tarjetas a todo el equipo',
+ automaticImport: 'Importación automática de transacciones',
+ },
+ ctaTitle: 'Añadir tarjetas de empresa',
+ },
disableCardTitle: 'Deshabilitar tarjetas de empresa',
disableCardPrompt: 'No puedes deshabilitar las tarjetas de empresa porque esta función está en uso. Por favor, contacta a Concierge para los próximos pasos.',
disableCardButton: 'Chatear con Concierge',
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
new file mode 100644
index 000000000000..0846c8b9e179
--- /dev/null
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState.tsx
@@ -0,0 +1,57 @@
+import React, {useCallback} from 'react';
+import {View} from 'react-native';
+import FeatureList from '@components/FeatureList';
+import type {FeatureListItem} from '@components/FeatureList';
+import * as Illustrations from '@components/Icon/Illustrations';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useThemeStyles from '@hooks/useThemeStyles';
+import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
+import colors from '@styles/theme/colors';
+
+const companyCardFeatures: FeatureListItem[] = [
+ {
+ icon: Illustrations.CreditCardsNew,
+ translationKey: 'workspace.moreFeatures.companyCards.feed.features.support',
+ },
+ {
+ icon: Illustrations.HandCard,
+ translationKey: 'workspace.moreFeatures.companyCards.feed.features.assignCards',
+ },
+ {
+ icon: Illustrations.MagnifyingGlassMoney,
+ translationKey: 'workspace.moreFeatures.companyCards.feed.features.automaticImport',
+ },
+];
+
+function WorkspaceCompanyCardPageEmptyState() {
+ const {translate} = useLocalize();
+ const styles = useThemeStyles();
+ const {shouldUseNarrowLayout} = useResponsiveLayout();
+
+ const startFlow = useCallback(() => {
+ // TODO: Add Card Feed Flow https://github.com/Expensify/App/issues/47376
+ }, []);
+
+ return (
+
+
+
+ );
+}
+
+WorkspaceCompanyCardPageEmptyState.displayName = 'WorkspaceCompanyCardPageEmptyState';
+
+export default withPolicyAndFullscreenLoading(WorkspaceCompanyCardPageEmptyState);
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index 1945cf99a001..7209ede8467a 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -1,22 +1,18 @@
import type {StackScreenProps} from '@react-navigation/stack';
import React from 'react';
-import {View} from 'react-native';
import * as Illustrations from '@components/Icon/Illustrations';
import useLocalize from '@hooks/useLocalize';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useThemeStyles from '@hooks/useThemeStyles';
import type {FullScreenNavigatorParamList} from '@libs/Navigation/types';
import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
import CONST from '@src/CONST';
import type SCREENS from '@src/SCREENS';
+import WorkspaceCompanyCardPageEmptyState from './WorkspaceCompanyCardPageEmptyState';
type WorkspaceCompanyCardPageProps = StackScreenProps;
function WorkspaceCompanyCardPage({route}: WorkspaceCompanyCardPageProps) {
const {translate} = useLocalize();
- const styles = useThemeStyles();
- const {shouldUseNarrowLayout} = useResponsiveLayout();
return (
-
+
);
diff --git a/src/styles/index.ts b/src/styles/index.ts
index b9538ea4ed88..0e320fc039e3 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5083,6 +5083,15 @@ const styles = (theme: ThemeColors) =>
height: 220,
},
+ emptyStateCardIllustrationContainer: {
+ height: 220,
+ },
+
+ emptyStateCardIllustration: {
+ width: 164,
+ height: 190,
+ },
+
computerIllustrationContainer: {
width: 272,
height: 188,