Skip to content

Commit

Permalink
Merge pull request #45047 from VickyStash/feature/44316-reconciliatio…
Browse files Browse the repository at this point in the history
…n-account-settings

[No QA] Create new Reconciliation Account Settings page
  • Loading branch information
mountiny authored Jul 10, 2024
2 parents deec1f3 + 4fb8996 commit e1eb918
Show file tree
Hide file tree
Showing 10 changed files with 111 additions and 0 deletions.
4 changes: 4 additions & 0 deletions src/ONYXKEYS.ts
Original file line number Diff line number Diff line change
Expand Up @@ -445,6 +445,9 @@ const ONYXKEYS = {
* So for example: card_12345_Expensify Card
*/
WORKSPACE_CARDS_LIST: 'card_',

/** The bank account that Expensify Card payments will be reconciled against */
SHARED_NVP_EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION: 'sharedNVP_expensifyCard_continuousReconciliationConnection_',
},

/** List of Form ids */
Expand Down Expand Up @@ -692,6 +695,7 @@ type OnyxCollectionValuesMapping = {
[ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END]: OnyxTypes.BillingGraceEndPeriod;
[ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_EXPENSIFY_CARD_SETTINGS]: OnyxTypes.ExpensifyCardSettings;
[ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST]: OnyxTypes.WorkspaceCardsList;
[ONYXKEYS.COLLECTION.SHARED_NVP_EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION]: OnyxTypes.BankAccount;
};

type OnyxValuesMapping = {
Expand Down
4 changes: 4 additions & 0 deletions src/ROUTES.ts
Original file line number Diff line number Diff line change
Expand Up @@ -676,6 +676,10 @@ const ROUTES = {
route: 'settings/workspaces/:policyID/accounting/quickbooks-online/invoice-account-selector',
getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/quickbooks-online/invoice-account-selector` as const,
},
WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS: {
route: 'settings/workspaces/:policyID/accounting/:connection/card-reconciliation',
getRoute: (policyID: string, connection: ValueOf<typeof CONST.POLICY.CONNECTIONS.NAME>) => `settings/workspaces/${policyID}/accounting/${connection}/card-reconciliation` as const,
},
WORKSPACE_CATEGORIES: {
route: 'settings/workspaces/:policyID/categories',
getRoute: (policyID: string) => `settings/workspaces/${policyID}/categories` as const,
Expand Down
1 change: 1 addition & 0 deletions src/SCREENS.ts
Original file line number Diff line number Diff line change
Expand Up @@ -330,6 +330,7 @@ const SCREENS = {
SAGE_INTACCT_NON_REIMBURSABLE_CREDIT_CARD_ACCOUNT: 'Policy_Accounting_Sage_Intacct_Non_Reimbursable_Credit_Card_Account',
SAGE_INTACCT_ADVANCED: 'Policy_Accounting_Sage_Intacct_Advanced',
SAGE_INTACCT_PAYMENT_ACCOUNT: 'Policy_Accounting_Sage_Intacct_Payment_Account',
RECONCILIATION_ACCOUNT_SETTINGS: 'Policy_Accounting_Reconciliation_Account_Settings',
},
INITIAL: 'Workspace_Initial',
PROFILE: 'Workspace_Profile',
Expand Down
7 changes: 7 additions & 0 deletions src/languages/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3125,6 +3125,13 @@ export default {
defaultVendor: 'Default vendor',
autoSync: 'Auto-sync',
reimbursedReports: 'Sync reimbursed reports',
reconciliationAccount: 'Reconciliation account',
chooseReconciliationAccount: {
chooseBankAccount: 'Choose the bank account that your Expensify Card payments will be reconciled against.',
accountMatches: 'Make sure this account matches your ',
settlementAccount: 'Expensify Card settlement account ',
reconciliationWorks: (lastFourPAN: string) => `(ending in ${lastFourPAN}) so Continuous Reconciliation works properly.`,
},
},
bills: {
manageYourBills: 'Manage your bills',
Expand Down
7 changes: 7 additions & 0 deletions src/languages/es.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3111,6 +3111,13 @@ export default {
defaultVendor: 'Proveedor predeterminado',
autoSync: 'Autosincronización',
reimbursedReports: 'Sincronizar informes reembolsados',
reconciliationAccount: 'Cuenta de conciliación',
chooseReconciliationAccount: {
chooseBankAccount: 'Elige la cuenta bancaria con la que se conciliarán los pagos de tu Tarjeta Expensify.',
accountMatches: 'Asegúrate de que esta cuenta coincide con ',
settlementAccount: 'la cuenta de liquidación de tu Tarjeta Expensify ',
reconciliationWorks: (lastFourPAN: string) => `(que termina en ${lastFourPAN}) para que la conciliación continua funcione correctamente.`,
},
},
card: {
header: 'Desbloquea Tarjetas Expensify gratis',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -396,6 +396,7 @@ const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorP
[SCREENS.WORKSPACE.ACCOUNTING.SAGE_INTACCT_ADVANCED]: () => require<ReactComponentModule>('../../../../pages/workspace/accounting/intacct/advanced/SageIntacctAdvancedPage').default,
[SCREENS.WORKSPACE.ACCOUNTING.SAGE_INTACCT_PAYMENT_ACCOUNT]: () =>
require<ReactComponentModule>('../../../../pages/workspace/accounting/intacct/advanced/SageIntacctPaymentAccountPage').default,
[SCREENS.WORKSPACE.ACCOUNTING.RECONCILIATION_ACCOUNT_SETTINGS]: () => require<ReactComponentModule>('../../../../pages/workspace/accounting/ReconciliationAccountSettingsPage').default,
[SCREENS.WORKSPACE.WORKFLOWS_AUTO_REPORTING_FREQUENCY]: () => require<ReactComponentModule>('../../../../pages/workspace/workflows/WorkspaceAutoReportingFrequencyPage').default,
[SCREENS.WORKSPACE.WORKFLOWS_AUTO_REPORTING_MONTHLY_OFFSET]: () => require<ReactComponentModule>('../../../../pages/workspace/workflows/WorkspaceAutoReportingMonthlyOffsetPage').default,
[SCREENS.WORKSPACE.TAX_EDIT]: () => require<ReactComponentModule>('../../../../pages/workspace/taxes/WorkspaceEditTaxPage').default,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial<Record<FullScreenName, string[]>> = {
SCREENS.WORKSPACE.ACCOUNTING.SAGE_INTACCT_NON_REIMBURSABLE_CREDIT_CARD_ACCOUNT,
SCREENS.WORKSPACE.ACCOUNTING.SAGE_INTACCT_ADVANCED,
SCREENS.WORKSPACE.ACCOUNTING.SAGE_INTACCT_PAYMENT_ACCOUNT,
SCREENS.WORKSPACE.ACCOUNTING.RECONCILIATION_ACCOUNT_SETTINGS,
],
[SCREENS.WORKSPACE.TAXES]: [
SCREENS.WORKSPACE.TAXES_SETTINGS,
Expand Down
1 change: 1 addition & 0 deletions src/libs/Navigation/linkingConfig/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -447,6 +447,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
},
[SCREENS.WORKSPACE.ACCOUNTING.SAGE_INTACCT_ADVANCED]: {path: ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_ADVANCED.route},
[SCREENS.WORKSPACE.ACCOUNTING.SAGE_INTACCT_PAYMENT_ACCOUNT]: {path: ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_PAYMENT_ACCOUNT.route},
[SCREENS.WORKSPACE.ACCOUNTING.RECONCILIATION_ACCOUNT_SETTINGS]: {path: ROUTES.WORKSPACE_ACCOUNTING_RECONCILIATION_ACCOUNT_SETTINGS.route},
[SCREENS.WORKSPACE.DESCRIPTION]: {
path: ROUTES.WORKSPACE_PROFILE_DESCRIPTION.route,
},
Expand Down
4 changes: 4 additions & 0 deletions src/libs/Navigation/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -588,6 +588,10 @@ type SettingsNavigatorParamList = {
[SCREENS.WORKSPACE.ACCOUNTING.SAGE_INTACCT_PAYMENT_ACCOUNT]: {
policyID: string;
};
[SCREENS.WORKSPACE.ACCOUNTING.RECONCILIATION_ACCOUNT_SETTINGS]: {
policyID: string;
connection: ValueOf<typeof CONST.POLICY.CONNECTIONS.NAME>;
};
[SCREENS.GET_ASSISTANCE]: {
backTo: Routes;
};
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import type {StackScreenProps} from '@react-navigation/stack';
import React, {useMemo} from 'react';
import {useOnyx} from 'react-native-onyx';
import ConnectionLayout from '@components/ConnectionLayout';
import SelectionList from '@components/SelectionList';
import RadioListItem from '@components/SelectionList/RadioListItem';
import Text from '@components/Text';
import TextLink from '@components/TextLink';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import type {SettingsNavigatorParamList} from '@navigation/types';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import type SCREENS from '@src/SCREENS';

type ReconciliationAccountSettingsPageProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.ACCOUNTING.RECONCILIATION_ACCOUNT_SETTINGS>;

function ReconciliationAccountSettingsPage({route}: ReconciliationAccountSettingsPageProps) {
const {policyID, connection} = route.params;
const settlementAccountEnding = '1234'; // TODO: use correct settlement account ending value https://github.com/Expensify/App/issues/44313

const styles = useThemeStyles();
const {translate} = useLocalize();

const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
const [reconciliationConnection] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_EXPENSIFY_CARD_CONTINUOUS_RECONCILIATION_CONNECTION}${policyID}`);

const selectedBankAccount = useMemo(() => reconciliationConnection ?? Object.values(bankAccountList ?? {})[0], [reconciliationConnection, bankAccountList]);

const sections = useMemo(() => {
const data = Object.values(bankAccountList ?? {}).map((bankAccount) => ({
text: bankAccount.title,
value: bankAccount.accountData?.bankAccountID,
keyForList: bankAccount.accountData?.bankAccountID?.toString(),
isSelected: bankAccount.accountData?.bankAccountID === selectedBankAccount?.accountData?.bankAccountID,
}));
return [{data}];
}, [bankAccountList, selectedBankAccount]);

const selectBankAccount = () => {
// TODO: add API call when it's implemented https://github.com/Expensify/Expensify/issues/407836
// Navigation.goBack();
};

return (
<ConnectionLayout
displayName={ReconciliationAccountSettingsPage.displayName}
headerTitle="workspace.accounting.reconciliationAccount"
accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
policyID={policyID}
featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
contentContainerStyle={[styles.flex1, styles.pb2]}
connectionName={connection}
shouldUseScrollView={false}
>
<Text style={[styles.textNormal, styles.mb5, styles.ph5]}>{translate('workspace.accounting.chooseReconciliationAccount.chooseBankAccount')}</Text>
<Text style={[styles.textNormal, styles.mb6, styles.ph5]}>
{translate('workspace.accounting.chooseReconciliationAccount.accountMatches')}
<TextLink
onPress={() => {
// TODO: navigate to Settlement Account https://github.com/Expensify/App/issues/44313
}}
>
{translate('workspace.accounting.chooseReconciliationAccount.settlementAccount')}
</TextLink>
{translate('workspace.accounting.chooseReconciliationAccount.reconciliationWorks', settlementAccountEnding)}
</Text>

<SelectionList
sections={sections}
onSelectRow={selectBankAccount}
ListItem={RadioListItem}
initiallyFocusedOptionKey={selectedBankAccount?.accountData?.bankAccountID?.toString()}
/>
</ConnectionLayout>
);
}

ReconciliationAccountSettingsPage.displayName = 'ReconciliationAccountSettingsPage';

export default ReconciliationAccountSettingsPage;

0 comments on commit e1eb918

Please sign in to comment.