[Simplified Collect][Taxes] Create WorkspaceTaxesPage

src/ROUTES.ts

@@ -554,6 +554,10 @@ const ROUTES = {
         route: 'workspace/:policyID/tags',
         getRoute: (policyID: string) => `workspace/${policyID}/tags` as const,
     },
+    WORKSPACE_TAXES: {
+        route: 'workspace/:policyID/taxes',
+        getRoute: (policyID: string) => `workspace/${policyID}/taxes` as const,
+    },
     // Referral program promotion
     REFERRAL_DETAILS_MODAL: {
         route: 'referral/:contentType',

src/SCREENS.ts

@@ -215,6 +215,7 @@ const SCREENS = {
         INVITE_MESSAGE: 'Workspace_Invite_Message',
         CATEGORIES: 'Workspace_Categories',
         TAGS: 'Workspace_Tags',
+        TAXES: 'Workspace_Taxes',
         CURRENCY: 'Workspace_Profile_Currency',
         WORKFLOWS: 'Workspace_Workflows',
         WORKFLOWS_APPROVER: 'Workspace_Workflows_Approver',

src/components/Icon/Expensicons.ts

@@ -137,6 +137,7 @@ import Stopwatch from '@assets/images/stopwatch.svg';
 import Sync from '@assets/images/sync.svg';
 import Tag from '@assets/images/tag.svg';
 import Task from '@assets/images/task.svg';
+import Tax from '@assets/images/tax.svg';
 import ThreeDots from '@assets/images/three-dots.svg';
 import ThumbsUp from '@assets/images/thumbs-up.svg';
 import Transfer from '@assets/images/transfer.svg';
@@ -224,6 +225,7 @@ export {
     Fullscreen,
     Folder,
     Tag,
+    Tax,
     Gallery,
     Gear,
     Globe,

src/components/Icon/Illustrations.ts

@@ -35,6 +35,7 @@ import BigRocket from '@assets/images/simple-illustrations/simple-illustration__
 import PinkBill from '@assets/images/simple-illustrations/simple-illustration__bill.svg';
 import ChatBubbles from '@assets/images/simple-illustrations/simple-illustration__chatbubbles.svg';
 import CoffeeMug from '@assets/images/simple-illustrations/simple-illustration__coffeemug.svg';
+import Coins from '@assets/images/simple-illustrations/simple-illustration__coins.svg';
 import CommentBubbles from '@assets/images/simple-illustrations/simple-illustration__commentbubbles.svg';
 import ConciergeBubble from '@assets/images/simple-illustrations/simple-illustration__concierge-bubble.svg';
 import ConciergeNew from '@assets/images/simple-illustrations/simple-illustration__concierge.svg';
@@ -148,4 +149,5 @@ export {
     ThreeLeggedLaptopWoman,
     House,
     Tag,
+    Coins,
 };

src/languages/en.ts

@@ -1732,6 +1732,7 @@ export default {
             reimburse: 'Reimbursements',
             categories: 'Categories',
             tags: 'Tags',
+            taxes: 'Taxes',
             bills: 'Bills',
             invoices: 'Invoices',
             travel: 'Travel',
@@ -1784,6 +1785,9 @@ export default {
                 subtitle: 'Add a tag to track projects, locations, departments, and more.',
             },
         },
+        taxes: {
+            subtitle: 'Add tax names, rates, and set defaults.',
+        },
         emptyWorkspace: {
             title: 'Create a workspace',
             subtitle: 'Workspaces are where you’ll chat with your team, reimburse expenses, issue cards, send invoices, pay bills, and more - all in one place.',

src/languages/es.ts

@@ -1756,6 +1756,7 @@ export default {
             reimburse: 'Reembolsos',
             categories: 'Categorías',
             tags: 'Etiquetas',
+            taxes: 'Impuestos',
             bills: 'Pagar facturas',
             invoices: 'Enviar facturas',
             travel: 'Viajes',
@@ -1808,6 +1809,9 @@ export default {
                 subtitle: 'Añade una etiqueta para realizar el seguimiento de proyectos, ubicaciones, departamentos y otros.',
             },
         },
+        taxes: {
+            subtitle: 'Añada nombres de impuestos, tipos impositivos y establezca valores por defecto.',
+        },
         emptyWorkspace: {
             title: 'Crea un espacio de trabajo',
             subtitle: 'En los espacios de trabajo podrás chatear con tu equipo, reembolsar gastos, emitir tarjetas, enviar y pagar facturas, y mucho más - todo en un mismo lugar.',

src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx

@@ -25,6 +25,7 @@ const workspaceSettingsScreens = {
     [SCREENS.WORKSPACE.MEMBERS]: () => require('../../../../../pages/workspace/WorkspaceMembersPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.CATEGORIES]: () => require('../../../../../pages/workspace/categories/WorkspaceCategoriesPage').default as React.ComponentType,
     [SCREENS.WORKSPACE.TAGS]: () => require('../../../../../pages/workspace/tags/WorkspaceTagsPage').default as React.ComponentType,
+    [SCREENS.WORKSPACE.TAXES]: () => require('../../../../../pages/workspace/taxes/WorkspaceTaxesPage').default as React.ComponentType,
 } satisfies Screens;
 
 function BaseCentralPaneNavigator() {

src/libs/Navigation/linkingConfig/TAB_TO_CENTRAL_PANE_MAPPING.ts

@@ -14,6 +14,7 @@ const TAB_TO_CENTRAL_PANE_MAPPING: Record<BottomTabName, CentralPaneName[]> = {
         SCREENS.WORKSPACE.TRAVEL,
         SCREENS.WORKSPACE.MEMBERS,
         SCREENS.WORKSPACE.CATEGORIES,
+        SCREENS.WORKSPACE.TAXES,
     ],
 };
 

src/libs/Navigation/linkingConfig/config.ts

@@ -70,6 +70,9 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                 [SCREENS.WORKSPACE.TAGS]: {
                     path: ROUTES.WORKSPACE_TAGS.route,
                 },
+                [SCREENS.WORKSPACE.TAXES]: {
+                    path: ROUTES.WORKSPACE_TAXES.route,
+                },
             },
         },
         [SCREENS.NOT_FOUND]: '*',

src/libs/Navigation/types.ts

@@ -95,6 +95,9 @@ type CentralPaneNavigatorParamList = {
         policyID: string;
         categoryName: string;
     };
+    [SCREENS.WORKSPACE.TAXES]: {
+        policyID: string;
+    };
 };
 
 type WorkspaceSwitcherNavigatorParamList = {

src/pages/workspace/WorkspaceInitialPage.tsx

@@ -161,6 +161,13 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, policyMembers, r
             action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_TAGS.getRoute(policyID)))),
             routeName: SCREENS.WORKSPACE.TAGS,
         },
+        // TODO: Check if user enabled Taxes in More Features page
+        {
+            translationKey: 'workspace.common.taxes',
+            icon: Expensicons.Tax,
+            action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_TAXES.getRoute(policyID)))),
+            routeName: SCREENS.WORKSPACE.TAXES,
+        },
     ];
 
     const menuItems: WorkspaceMenuItem[] = [

src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

@@ -0,0 +1,142 @@
+import type {StackScreenProps} from '@react-navigation/stack';
+import React, {useMemo, useState} from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Icon from '@components/Icon';
+import * as Expensicons from '@components/Icon/Expensicons';
+import * as Illustrations from '@components/Icon/Illustrations';
+import ScreenWrapper from '@components/ScreenWrapper';
+import SelectionList from '@components/SelectionList';
+import TableListItem from '@components/SelectionList/TableListItem';
+import type {ListItem} from '@components/SelectionList/types';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import type {CentralPaneNavigatorParamList} from '@navigation/types';
+import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
+import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
+import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
+import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
+import type SCREENS from '@src/SCREENS';
+
+type WorkspaceTaxesPageProps = WithPolicyAndFullscreenLoadingProps & StackScreenProps<CentralPaneNavigatorParamList, typeof SCREENS.WORKSPACE.TAXES>;
+
+function WorkspaceTaxesPage({policy}: WorkspaceTaxesPageProps) {
+    const {isSmallScreenWidth} = useWindowDimensions();
+    const styles = useThemeStyles();
+    const theme = useTheme();
+    const {translate} = useLocalize();
+    const [selectedTaxesIDs, setSelectedTaxesIDs] = useState<string[]>([]);
+
+    const taxesList = useMemo<ListItem[]>(
+        () =>
+            Object.entries(policy?.taxRates?.taxes ?? {}).map(([key, value]) => ({
+                text: value.name,
+                keyForList: key,
+                isSelected: !!selectedTaxesIDs.includes(key),
+                rightElement: (
+                    <View style={styles.flexRow}>
+                        <Text style={[styles.disabledText, styles.alignSelfCenter]}>{value.isDisabled ? translate('workspace.common.disabled') : translate('workspace.common.enabled')}</Text>
+                        <View style={[styles.p1, styles.pl2]}>
+                            <Icon
+                                src={Expensicons.ArrowRight}
+                                fill={theme.icon}
+                            />
+                        </View>
+                    </View>
+                ),
+            })),
+        [policy?.taxRates?.taxes, selectedTaxesIDs, styles, theme.icon, translate],
+    );
+
+    const toggleTax = (tax: ListItem) => {
+        setSelectedTaxesIDs((prev) => {
+            if (prev.includes(tax.keyForList)) {
+                return prev.filter((item) => item !== tax.keyForList);
+            }
+            return [...prev, tax.keyForList];
+        });
+    };
+
+    const toggleAllTaxes = () => {
+        setSelectedTaxesIDs((prev) => {
+            if (prev.length === taxesList.length) {
+                return [];
+            }
+
+            return taxesList.map((item) => item.keyForList);
+        });
+    };
+
+    const getCustomListHeader = () => (
+        <View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween, styles.pl3, styles.pr9]}>
+            <Text style={styles.searchInputStyle}>{translate('common.name')}</Text>
+            <Text style={[styles.searchInputStyle, styles.textAlignCenter]}>{translate('statusPage.status')}</Text>
+        </View>
+    );
+
+    const headerButtons = (
+        <View style={[styles.w100, styles.flexRow, isSmallScreenWidth && styles.mb3]}>
+            <Button
+                medium
+                success
+                onPress={() => {}}
+                icon={Expensicons.Plus}
+                text="Add rate"
+                style={[styles.mr3, isSmallScreenWidth && styles.w50]}
+            />
+            <Button
+                medium
+                onPress={() => {}}
+                icon={Expensicons.Gear}
+                text={translate('common.settings')}
+                style={[isSmallScreenWidth && styles.w50]}
+            />
+        </View>
+    );
+
+    return (
+        <AdminPolicyAccessOrNotFoundWrapper policyID={policy?.id ?? ''}>
+            <PaidPolicyAccessOrNotFoundWrapper policyID={policy?.id ?? ''}>
+                <ScreenWrapper
+                    includeSafeAreaPaddingBottom={false}
+                    style={[styles.defaultModalContainer]}
+                    testID={WorkspaceTaxesPage.displayName}
+                    shouldShowOfflineIndicatorInWideScreen
+                >
+                    <HeaderWithBackButton
+                        icon={Illustrations.Coins}
+                        title={translate('workspace.common.taxes')}
+                        shouldShowBackButton={isSmallScreenWidth}
+                    >
+                        {!isSmallScreenWidth && headerButtons}
+                    </HeaderWithBackButton>
+
+                    {isSmallScreenWidth && <View style={[styles.pl5, styles.pr5]}>{headerButtons}</View>}
+
+                    <View style={[styles.ph5, styles.pb5]}>
+                        <Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.taxes.subtitle')}</Text>
+                    </View>
+                    <SelectionList
+                        canSelectMultiple
+                        sections={[{data: taxesList, indexOffset: 0, isDisabled: false}]}
+                        onCheckboxPress={toggleTax}
+                        onSelectRow={() => {}}
+                        onSelectAll={toggleAllTaxes}
+                        showScrollIndicator
+                        ListItem={TableListItem}
+                        customListHeader={getCustomListHeader()}
+                        listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
+                    />
+                </ScreenWrapper>
+            </PaidPolicyAccessOrNotFoundWrapper>
+        </AdminPolicyAccessOrNotFoundWrapper>
+    );
+}
+
+WorkspaceTaxesPage.displayName = 'WorkspaceTaxesPage';
+
+export default withPolicyAndFullscreenLoading(WorkspaceTaxesPage);