updates after review

Expensify · Apr 25, 2024 · ae980e8 · ae980e8
1 parent 77add80
commit ae980e8
Show file tree

Hide file tree

Showing 12 changed files with 54 additions and 62 deletions.
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -1913,10 +1913,10 @@ export default {
             exportVendorBillDescription:
                 "We'll create a single itemized vendor bill for each Expensify report. If the period of the bill is closed, we'll post to the 1st of the next open period. You can add the vendor bill to your A/P account of choice (below).",
             check: 'Check',
-            accountsPayable: 'Accounts Payable',
+            accountsPayable: 'Accounts payable',
             account: 'Account',
             accountsPayableDescription: 'This is your chosen A/P account, against which vendor bills for each report are created.',
-            journalEntry: 'Journal Entry',
+            journalEntry: 'Journal entry',
             optionBelow: 'Choose an option below:',
             vendorBillError: 'Vendor Bills are not available when locations are enabled. Please select a different export option.',
             checkError: 'Check is not available when locations are enabled. Please select a different export option.',

diff --git a/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountPage.tsx b/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountPage.tsx
@@ -1,25 +1,23 @@
 import React from 'react';
-import {View} from 'react-native';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
-import Switch from '@components/Switch';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Connections from '@libs/actions/connections';
 import Navigation from '@navigation/Navigation';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
 import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
-import type {WithPolicyProps} from '@pages/workspace/withPolicy';
+import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
 import withPolicyConnections from '@pages/workspace/withPolicyConnections';
-import variables from '@styles/variables';
+import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 
-function QuickbooksCompanyCardExpenseAccountPage({policy}: WithPolicyProps) {
+function QuickbooksCompanyCardExpenseAccountPage({policy}: WithPolicyConnectionsProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const policyID = policy?.id ?? '';
@@ -44,7 +42,7 @@ function QuickbooksCompanyCardExpenseAccountPage({policy}: WithPolicyProps) {
                                 description={translate('workspace.qbo.exportCompany')}
                                 error={errorFields?.exportCompanyCard ? translate('common.genericErrorMessage') : undefined}
                                 onPress={() => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_COMPANY_CARD_EXPENSE_SELECT.getRoute(policyID))}
-                                brickRoadIndicator={exportCompanyCard ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+                                brickRoadIndicator={errorFields?.exportCompanyCard ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
                                 shouldShowRightIcon
                             />
                         </OfflineWithFeedback>
@@ -59,27 +57,21 @@ function QuickbooksCompanyCardExpenseAccountPage({policy}: WithPolicyProps) {
                                         description={translate('workspace.qbo.accountsPayable')}
                                         error={errorFields?.exportAccountPayable ? translate('common.genericErrorMessage') : undefined}
                                         onPress={() => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_COMPANY_CARD_EXPENSE_ACCOUNT_PAYABLE_SELECT.getRoute(policyID))}
-                                        brickRoadIndicator={exportAccountPayable ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
+                                        brickRoadIndicator={errorFields?.exportAccountPayable ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
                                         shouldShowRightIcon
                                     />
                                 </OfflineWithFeedback>
-                                <Text style={[styles.ph5, styles.mutedNormalTextLabel, styles.pt1, styles.pb3]}>{translate('workspace.qbo.defaultVendorDescription')}</Text>
-                                <View style={[styles.flexRow, styles.mb4, styles.alignItemsCenter, styles.justifyContentBetween, styles.ph5]}>
-                                    <View style={styles.flex1}>
-                                        <Text fontSize={variables.fontSizeNormal}>{translate('workspace.qbo.defaultVendor')}</Text>
-                                    </View>
-                                    <OfflineWithFeedback pendingAction={pendingFields?.autoCreateVendor}>
-                                        <View style={[styles.flex1, styles.alignItemsEnd, styles.pl3]}>
-                                            <Switch
-                                                accessibilityLabel={translate('workspace.qbo.defaultVendor')}
-                                                isOn={Boolean(autoCreateVendor)}
-                                                onToggle={(isOn) =>
-                                                    Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.QBO, CONST.QUICK_BOOKS_CONFIG.AUTO_CREATE_VENDOR, isOn)
-                                                }
-                                            />
-                                        </View>
-                                    </OfflineWithFeedback>
-                                </View>
+                                <ToggleSettingOptionRow
+                                    subtitle={translate('workspace.qbo.defaultVendorDescription')}
+                                    errors={errorFields?.autoCreateVendor ?? undefined}
+                                    title={translate('workspace.qbo.defaultVendor')}
+                                    wrapperStyle={[styles.ph5, styles.mb3]}
+                                    isActive={Boolean(autoCreateVendor)}
+                                    onToggle={(isOn) =>
+                                        Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.QBO, CONST.QUICK_BOOKS_CONFIG.AUTO_CREATE_VENDOR, isOn)
+                                    }
+                                    pendingAction={pendingFields?.autoCreateVendor}
+                                />
                             </>
                         )}
                         <OfflineWithFeedback pendingAction={pendingFields?.exportCompanyCardAccount}>

diff --git a/.../workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountPayableSelectPage.tsx b/.../workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountPayableSelectPage.tsx
@@ -11,7 +11,7 @@ import * as Connections from '@libs/actions/connections';
 import Navigation from '@navigation/Navigation';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
 import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
-import type {WithPolicyProps} from '@pages/workspace/withPolicy';
+import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
 import withPolicyConnections from '@pages/workspace/withPolicyConnections';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
@@ -20,7 +20,7 @@ type CardListItem = ListItem & {
     value: string;
 };
 
-function QuickbooksCompanyCardExpenseAccountPayableSelectPage({policy}: WithPolicyProps) {
+function QuickbooksCompanyCardExpenseAccountPayableSelectPage({policy}: WithPolicyConnectionsProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {accountsPayable} = policy?.connections?.quickbooksOnline?.data ?? {};
@@ -38,7 +38,7 @@ function QuickbooksCompanyCardExpenseAccountPayableSelectPage({policy}: WithPoli
         [exportAccountPayable, accountsPayable],
     );
 
-    const onSelectRow = useCallback(
+    const selectAccountPayable = useCallback(
         (row: CardListItem) => {
             if (row.value !== exportAccountPayable) {
                 Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.QBO, CONST.QUICK_BOOKS_CONFIG.EXPORT_ACCOUNT_PAYABLE, row.value);
@@ -60,7 +60,7 @@ function QuickbooksCompanyCardExpenseAccountPayableSelectPage({policy}: WithPoli
                         headerContent={<Text style={[styles.ph5, styles.pb5]}>{translate('workspace.qbo.accountsPayableDescription')}</Text>}
                         sections={[{data}]}
                         ListItem={RadioListItem}
-                        onSelectRow={onSelectRow}
+                        onSelectRow={selectAccountPayable}
                         initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList}
                     />
                 </ScreenWrapper>

diff --git a/...ges/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountSelectCardPage.tsx b/...ges/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountSelectCardPage.tsx
@@ -14,7 +14,7 @@ import * as Connections from '@libs/actions/connections';
 import Navigation from '@navigation/Navigation';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
 import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
-import type {WithPolicyProps} from '@pages/workspace/withPolicy';
+import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
 import withPolicyConnections from '@pages/workspace/withPolicyConnections';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
@@ -25,7 +25,7 @@ type CardListItem = ListItem & {
 type CardsSection = SectionListData<CardListItem, Section<CardListItem>>;
 type Card = {name: string; id: ValueOf<typeof CONST.QUICKBOOKS_EXPORT_COMPANY_CARD>};
 
-function QuickbooksCompanyCardExpenseAccountSelectCardPage({policy}: WithPolicyProps) {
+function QuickbooksCompanyCardExpenseAccountSelectCardPage({policy}: WithPolicyConnectionsProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const policyID = policy?.id ?? '';
@@ -64,7 +64,7 @@ function QuickbooksCompanyCardExpenseAccountSelectCardPage({policy}: WithPolicyP
 
     const sections = useMemo<CardsSection[]>(() => [{data}], [data]);
 
-    const onSelectRow = useCallback(
+    const selectExportCompanyCard = useCallback(
         (row: CardListItem) => {
             if (row.value !== exportCompanyCard) {
                 Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.QBO, CONST.QUICK_BOOKS_CONFIG.EXPORT_COMPANY_CARD, row.value);
@@ -89,7 +89,7 @@ function QuickbooksCompanyCardExpenseAccountSelectCardPage({policy}: WithPolicyP
                             headerContent={<Text style={[styles.ph5, styles.pb5]}>{translate('workspace.qbo.exportCompanyCardsDescription')}</Text>}
                             sections={sections}
                             ListItem={RadioListItem}
-                            onSelectRow={onSelectRow}
+                            onSelectRow={selectExportCompanyCard}
                             initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList}
                             footerContent={
                                 isLocationEnabled && <Text style={[styles.mutedNormalTextLabel, styles.pt2]}>{translate('workspace.qbo.companyCardsLocationEnabledDescription')}</Text>

diff --git a/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountSelectPage.tsx b/src/pages/workspace/accounting/qbo/export/QuickbooksCompanyCardExpenseAccountSelectPage.tsx
@@ -11,7 +11,7 @@ import * as Connections from '@libs/actions/connections';
 import Navigation from '@navigation/Navigation';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
 import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
-import type {WithPolicyProps} from '@pages/workspace/withPolicy';
+import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
 import withPolicyConnections from '@pages/workspace/withPolicyConnections';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
@@ -21,7 +21,7 @@ type CardListItem = ListItem & {
     value: string;
 };
 
-function QuickbooksCompanyCardExpenseAccountSelectPage({policy}: WithPolicyProps) {
+function QuickbooksCompanyCardExpenseAccountSelectPage({policy}: WithPolicyConnectionsProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const policyID = policy?.id ?? '';
@@ -53,7 +53,7 @@ function QuickbooksCompanyCardExpenseAccountSelectPage({policy}: WithPolicyProps
         }));
     }, [exportCompanyCardAccount, creditCards, bankAccounts, exportCompanyCard, vendors]);
 
-    const onSelectRow = useCallback(
+    const selectExportAccount = useCallback(
         (row: CardListItem) => {
             if (row.value !== exportAccount) {
                 Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.QBO, CONST.QUICK_BOOKS_CONFIG.EXPORT_COMPANY_CARD_ACCOUNT, row.value);
@@ -77,7 +77,7 @@ function QuickbooksCompanyCardExpenseAccountSelectPage({policy}: WithPolicyProps
                         headerContent={exportCompanyCard ? <Text style={[styles.ph5, styles.pb5]}>{translate(`workspace.qbo.${exportCompanyCard}AccountDescription`)}</Text> : null}
                         sections={[{data}]}
                         ListItem={RadioListItem}
-                        onSelectRow={onSelectRow}
+                        onSelectRow={selectExportAccount}
                         initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList}
                     />
                 </ScreenWrapper>

diff --git a/src/pages/workspace/accounting/qbo/export/QuickbooksExportConfigurationPage.tsx b/src/pages/workspace/accounting/qbo/export/QuickbooksExportConfigurationPage.tsx
@@ -13,15 +13,15 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@navigation/Navigation';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
 import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
-import type {WithPolicyProps} from '@pages/workspace/withPolicy';
+import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
 import withPolicyConnections from '@pages/workspace/withPolicyConnections';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 
 type MenuItem = MenuItemProps & {pendingAction?: OfflineWithFeedbackProps['pendingAction']};
 
-function QuickbooksExportConfigurationPage({policy}: WithPolicyProps) {
+function QuickbooksExportConfigurationPage({policy}: WithPolicyConnectionsProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const policyID = policy?.id ?? '';

diff --git a/src/pages/workspace/accounting/qbo/export/QuickbooksExportDateSelectPage.tsx b/src/pages/workspace/accounting/qbo/export/QuickbooksExportDateSelectPage.tsx
@@ -12,15 +12,15 @@ import * as Connections from '@libs/actions/connections';
 import Navigation from '@navigation/Navigation';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
 import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
-import type {WithPolicyProps} from '@pages/workspace/withPolicy';
+import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
 import withPolicyConnections from '@pages/workspace/withPolicyConnections';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 
 type CardListItem = ListItem & {
     value: ValueOf<typeof CONST.QUICKBOOKS_EXPORT_DATE>;
 };
-function QuickbooksExportDateSelectPage({policy}: WithPolicyProps) {
+function QuickbooksExportDateSelectPage({policy}: WithPolicyConnectionsProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const policyID = policy?.id ?? '';
@@ -33,7 +33,7 @@ function QuickbooksExportDateSelectPage({policy}: WithPolicyProps) {
         isSelected: exportDate === dateType,
     }));
 
-    const onSelectRow = useCallback(
+    const selectExportDate = useCallback(
         (row: CardListItem) => {
             if (row.value !== exportDate) {
                 Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.QBO, CONST.QUICK_BOOKS_CONFIG.EXPORT_DATE, row.value);
@@ -58,7 +58,7 @@ function QuickbooksExportDateSelectPage({policy}: WithPolicyProps) {
                         headerContent={<Text style={[styles.ph5, styles.pb5]}>{translate('workspace.qbo.exportDateDescription')}</Text>}
                         sections={[{data}]}
                         ListItem={RadioListItem}
-                        onSelectRow={onSelectRow}
+                        onSelectRow={selectExportDate}
                         initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList}
                     />
                 </ScreenWrapper>

diff --git a/src/pages/workspace/accounting/qbo/export/QuickbooksExportInvoiceAccountSelectPage.tsx b/src/pages/workspace/accounting/qbo/export/QuickbooksExportInvoiceAccountSelectPage.tsx
@@ -11,7 +11,7 @@ import * as Connections from '@libs/actions/connections';
 import Navigation from '@navigation/Navigation';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
 import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
-import type {WithPolicyProps} from '@pages/workspace/withPolicy';
+import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
 import withPolicyConnections from '@pages/workspace/withPolicyConnections';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
@@ -20,7 +20,7 @@ type CardListItem = ListItem & {
     value: string;
 };
 
-function QuickbooksExportInvoiceAccountSelectPage({policy}: WithPolicyProps) {
+function QuickbooksExportInvoiceAccountSelectPage({policy}: WithPolicyConnectionsProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const {accountsReceivable} = policy?.connections?.quickbooksOnline?.data ?? {};
@@ -38,7 +38,7 @@ function QuickbooksExportInvoiceAccountSelectPage({policy}: WithPolicyProps) {
         [exportInvoice, accountsReceivable],
     );
 
-    const onSelectRow = useCallback(
+    const selectExportInvoice = useCallback(
         (row: CardListItem) => {
             if (row.value !== exportInvoice) {
                 Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.QBO, CONST.QUICK_BOOKS_CONFIG.EXPORT_INVOICE, row.value);
@@ -60,7 +60,7 @@ function QuickbooksExportInvoiceAccountSelectPage({policy}: WithPolicyProps) {
                         headerContent={<Text style={[styles.ph5, styles.pb5]}>{translate('workspace.qbo.exportInvoicesDescription')}</Text>}
                         sections={[{data}]}
                         ListItem={RadioListItem}
-                        onSelectRow={onSelectRow}
+                        onSelectRow={selectExportInvoice}
                         initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList}
                     />
                 </ScreenWrapper>