From 22bd4b4d41d8752d706f7251beb65bc1c080aa8d Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Thu, 17 Aug 2023 17:16:29 +0200 Subject: [PATCH 01/14] add strings --- src/languages/en.js | 1 + src/languages/es.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/languages/en.js b/src/languages/en.js index 4ce07f7e00ca..e3878fdd8517 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -151,6 +151,7 @@ export default { edit: 'Edit', showMore: 'Show more', merchant: 'Merchant', + category: 'Category', }, anonymousReportFooter: { logoTagline: 'Join in on the discussion.', diff --git a/src/languages/es.js b/src/languages/es.js index 7cee163470f3..c3cab2702d6d 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -150,6 +150,7 @@ export default { edit: 'Editar', showMore: 'Mostrar más', merchant: 'Comerciante', + category: 'Categoría', }, anonymousReportFooter: { logoTagline: 'Únete a la discussion.', From ab6a7ec2a7a2cbf7f182989b82b8f9fcae932309 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Thu, 17 Aug 2023 17:17:06 +0200 Subject: [PATCH 02/14] add MoneyRequestCategoryPage --- src/ROUTES.js | 2 + .../AppNavigator/ModalStackNavigators.js | 7 +++ src/libs/Navigation/linkingConfig.js | 1 + src/pages/iou/MoneyRequestCategoryPage.js | 49 +++++++++++++++++++ 4 files changed, 59 insertions(+) create mode 100644 src/pages/iou/MoneyRequestCategoryPage.js diff --git a/src/ROUTES.js b/src/ROUTES.js index 90d08e5b13c8..bcee5d488405 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -92,6 +92,7 @@ export default { MONEY_REQUEST_CONFIRMATION: ':iouType/new/confirmation/:reportID?', MONEY_REQUEST_CURRENCY: ':iouType/new/currency/:reportID?', MONEY_REQUEST_DESCRIPTION: ':iouType/new/description/:reportID?', + MONEY_REQUEST_CATEGORY: ':iouType/new/category/:reportID?', MONEY_REQUEST_MANUAL_TAB: ':iouType/new/:reportID?/manual', MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan', MONEY_REQUEST_DISTANCE_TAB: ':iouType/new/:reportID?/distance', @@ -104,6 +105,7 @@ export default { getMoneyRequestConfirmationRoute: (iouType, reportID = '') => `${iouType}/new/confirmation/${reportID}`, getMoneyRequestCurrencyRoute: (iouType, reportID = '', currency, backTo) => `${iouType}/new/currency/${reportID}?currency=${currency}&backTo=${backTo}`, getMoneyRequestDescriptionRoute: (iouType, reportID = '') => `${iouType}/new/description/${reportID}`, + getMoneyRequestCategoryRoute: (iouType, reportID = '') => `${iouType}/new/category/${reportID}`, SPLIT_BILL_DETAILS: `r/:reportID/split/:reportActionID`, getSplitBillDetailsRoute: (reportID, reportActionID) => `r/${reportID}/split/${reportActionID}`, getNewTaskRoute: (reportID) => `${NEW_TASK}/${reportID}`, diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 8a489afb035e..9fcc89dd2950 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -76,6 +76,13 @@ const MoneyRequestModalStackNavigator = createModalStackNavigator([ }, name: 'Money_Request_Description', }, + { + getComponent: () => { + const MoneyRequestCategoryPage = require('../../../pages/iou/MoneyRequestCategoryPage').default; + return MoneyRequestCategoryPage; + }, + name: 'Money_Request_Category', + }, { getComponent: () => { const AddPersonalBankAccountPage = require('../../../pages/AddPersonalBankAccountPage').default; diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index dcc4f77fde73..4814955325df 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -321,6 +321,7 @@ export default { Money_Request_Confirmation: ROUTES.MONEY_REQUEST_CONFIRMATION, Money_Request_Currency: ROUTES.MONEY_REQUEST_CURRENCY, Money_Request_Description: ROUTES.MONEY_REQUEST_DESCRIPTION, + Money_Request_Category: ROUTES.MONEY_REQUEST_CATEGORY, IOU_Send_Enable_Payments: ROUTES.IOU_SEND_ENABLE_PAYMENTS, IOU_Send_Add_Bank_Account: ROUTES.IOU_SEND_ADD_BANK_ACCOUNT, IOU_Send_Add_Debit_Card: ROUTES.IOU_SEND_ADD_DEBIT_CARD, diff --git a/src/pages/iou/MoneyRequestCategoryPage.js b/src/pages/iou/MoneyRequestCategoryPage.js new file mode 100644 index 000000000000..b69d9c683e06 --- /dev/null +++ b/src/pages/iou/MoneyRequestCategoryPage.js @@ -0,0 +1,49 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import lodashGet from 'lodash/get'; +import ROUTES from '../../ROUTES'; +import Navigation from '../../libs/Navigation/Navigation'; +import useLocalize from '../../hooks/useLocalize'; +import ScreenWrapper from '../../components/ScreenWrapper'; +import HeaderWithBackButton from '../../components/HeaderWithBackButton'; + +const propTypes = { + route: PropTypes.shape({ + /** Each parameter passed via the URL */ + params: PropTypes.shape({ + /** TODO: Comment */ + iouType: PropTypes.string, + + /** TODO: Comment */ + reportID: PropTypes.string, + }), + }).isRequired, +}; + +function MoneyRequestCategoryPage({route}) { + const {translate} = useLocalize(); + + const navigateBack = () => { + const iouType = lodashGet(route, 'params.iouType', ''); + const reportID = lodashGet(route, 'params.reportID', ''); + + Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID)); + }; + + return ( + + + + ); +} + +MoneyRequestCategoryPage.displayName = 'MoneyRequestCategoryPage'; +MoneyRequestCategoryPage.propTypes = propTypes; + +export default MoneyRequestCategoryPage; From f95d8bb421929b6d210f497563753a11f4f57e80 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Thu, 17 Aug 2023 17:17:37 +0200 Subject: [PATCH 03/14] add category to MoneyRequestConfirmationList --- .../MoneyRequestConfirmationList.js | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 2cc458d0e4ad..88e78fa820e5 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -63,6 +63,9 @@ const propTypes = { /** IOU merchant */ iouMerchant: PropTypes.string, + /** TODO: Comment */ + iouCategory: PropTypes.string, + /** Selected participants from MoneyRequestModal with login / accountID */ selectedParticipants: PropTypes.arrayOf(optionPropTypes).isRequired, @@ -96,6 +99,14 @@ const propTypes = { /** File source of the receipt */ receiptSource: PropTypes.string, + + /** TODO: Comment */ + policyCategories: PropTypes.objectOf( + PropTypes.shape({ + enabled: PropTypes.bool.isRequired, + name: PropTypes.string.isRequired, + }), + ), }; const defaultProps = { @@ -103,6 +114,7 @@ const defaultProps = { onSendMoney: () => {}, onSelectParticipant: () => {}, iouType: CONST.IOU.MONEY_REQUEST_TYPE.REQUEST, + iouCategory: '', payeePersonalDetails: null, canModifyParticipants: false, isReadOnly: false, @@ -115,6 +127,7 @@ const defaultProps = { ...withCurrentUserPersonalDetailsDefaultProps, receiptPath: '', receiptSource: '', + policyCategories: null, }; function MoneyRequestConfirmationList(props) { @@ -419,6 +432,16 @@ function MoneyRequestConfirmationList(props) { // Note: This component is disabled until this field is editable in next PR disabled /> + {props.policyCategories !== null && ( + Navigation.navigate(ROUTES.getMoneyRequestCategoryRoute(props.iouType, props.reportID))} + style={[styles.moneyRequestMenuItem, styles.mb2]} + disabled={didConfirm || props.isReadOnly} + /> + )} )} @@ -434,5 +457,8 @@ export default compose( session: { key: ONYXKEYS.SESSION, }, + policyCategories: { + key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`, + }, }), )(MoneyRequestConfirmationList); From 602aa40fcff636e01e894bbafe09b985d3e7d740 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Thu, 17 Aug 2023 19:02:30 +0200 Subject: [PATCH 04/14] create general category prop types --- src/components/categoryPropTypes.js | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/components/categoryPropTypes.js diff --git a/src/components/categoryPropTypes.js b/src/components/categoryPropTypes.js new file mode 100644 index 000000000000..ac9e7a564c1c --- /dev/null +++ b/src/components/categoryPropTypes.js @@ -0,0 +1,9 @@ +import PropTypes from 'prop-types'; + +export default PropTypes.shape({ + /** TODO: Comment */ + name: PropTypes.string.isRequired, + + /** TODO: Comment */ + enabled: PropTypes.bool.isRequired, +}); From efe21ba7e343d0050635d2dde52c47e3f1c899ff Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Thu, 17 Aug 2023 19:02:40 +0200 Subject: [PATCH 05/14] create page category picker --- .../CategoryPicker/categoryPickerPropTypes.js | 17 +++++++++ src/components/CategoryPicker/index.js | 35 +++++++++++++++++++ 2 files changed, 52 insertions(+) create mode 100644 src/components/CategoryPicker/categoryPickerPropTypes.js create mode 100644 src/components/CategoryPicker/index.js diff --git a/src/components/CategoryPicker/categoryPickerPropTypes.js b/src/components/CategoryPicker/categoryPickerPropTypes.js new file mode 100644 index 000000000000..ceb6268bc0b3 --- /dev/null +++ b/src/components/CategoryPicker/categoryPickerPropTypes.js @@ -0,0 +1,17 @@ +import PropTypes from 'prop-types'; +import categoryPropTypes from '../categoryPropTypes'; + +const propTypes = { + /** TODO: Comment */ + policyID: PropTypes.string, + + /** TODO: Comment */ + policyCategories: PropTypes.objectOf(categoryPropTypes), +}; + +const defaultProps = { + policyID: '', + policyCategories: null, +}; + +export {propTypes, defaultProps}; diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js new file mode 100644 index 000000000000..1b37dfca44da --- /dev/null +++ b/src/components/CategoryPicker/index.js @@ -0,0 +1,35 @@ +import React from 'react'; +import _ from 'underscore'; +import {View, Text} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import ONYXKEYS from '../../ONYXKEYS'; +import {propTypes, defaultProps} from './categoryPickerPropTypes'; + +function CategoryPicker({policyCategories}) { + if (policyCategories === null) { + return null; + } + + return ( + + {_.chain(policyCategories) + .values() + .map((category) => ( + + {category.name} + + )) + .value()} + + ); +} + +CategoryPicker.displayName = 'CategoryPicker'; +CategoryPicker.propTypes = propTypes; +CategoryPicker.defaultProps = defaultProps; + +export default withOnyx({ + policyCategories: { + key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`, + }, +})(CategoryPicker); From 2904336eed9be1c0ab83d2f0ad37e55158e36311 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Thu, 17 Aug 2023 19:03:00 +0200 Subject: [PATCH 06/14] integrate category picker to MoneyRequestCategoryPage --- src/pages/iou/MoneyRequestCategoryPage.js | 26 ++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/src/pages/iou/MoneyRequestCategoryPage.js b/src/pages/iou/MoneyRequestCategoryPage.js index b69d9c683e06..572e6a5fc2f4 100644 --- a/src/pages/iou/MoneyRequestCategoryPage.js +++ b/src/pages/iou/MoneyRequestCategoryPage.js @@ -1,13 +1,18 @@ import React from 'react'; import PropTypes from 'prop-types'; import lodashGet from 'lodash/get'; +import {withOnyx} from 'react-native-onyx'; import ROUTES from '../../ROUTES'; import Navigation from '../../libs/Navigation/Navigation'; import useLocalize from '../../hooks/useLocalize'; import ScreenWrapper from '../../components/ScreenWrapper'; import HeaderWithBackButton from '../../components/HeaderWithBackButton'; +import CategoryPicker from '../../components/CategoryPicker'; +import ONYXKEYS from '../../ONYXKEYS'; +import reportPropTypes from '../reportPropTypes'; const propTypes = { + /** TODO: Comment */ route: PropTypes.shape({ /** Each parameter passed via the URL */ params: PropTypes.shape({ @@ -18,14 +23,22 @@ const propTypes = { reportID: PropTypes.string, }), }).isRequired, + + /** TODO: Comment */ + report: reportPropTypes, +}; + +const defaultProps = { + report: {}, }; -function MoneyRequestCategoryPage({route}) { +function MoneyRequestCategoryPage({route, report}) { const {translate} = useLocalize(); + const reportID = lodashGet(route, 'params.reportID', ''); + const navigateBack = () => { const iouType = lodashGet(route, 'params.iouType', ''); - const reportID = lodashGet(route, 'params.reportID', ''); Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID)); }; @@ -39,11 +52,18 @@ function MoneyRequestCategoryPage({route}) { title={translate('common.category')} onBackButtonPress={navigateBack} /> + + ); } MoneyRequestCategoryPage.displayName = 'MoneyRequestCategoryPage'; MoneyRequestCategoryPage.propTypes = propTypes; +MoneyRequestCategoryPage.defaultProps = defaultProps; -export default MoneyRequestCategoryPage; +export default withOnyx({ + report: { + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${lodashGet(route, 'params.reportID', '')}`, + }, +})(MoneyRequestCategoryPage); From 079dde4a634dafe7b495381a726bee4e8b595e6c Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Fri, 18 Aug 2023 12:48:25 +0200 Subject: [PATCH 07/14] add comments --- .../CategoryPicker/categoryPickerPropTypes.js | 4 ++-- src/components/MoneyRequestConfirmationList.js | 4 ++-- src/components/categoryPropTypes.js | 4 ++-- src/pages/iou/MoneyRequestCategoryPage.js | 10 +++++----- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/CategoryPicker/categoryPickerPropTypes.js b/src/components/CategoryPicker/categoryPickerPropTypes.js index ceb6268bc0b3..b5f8a6f2146e 100644 --- a/src/components/CategoryPicker/categoryPickerPropTypes.js +++ b/src/components/CategoryPicker/categoryPickerPropTypes.js @@ -2,10 +2,10 @@ import PropTypes from 'prop-types'; import categoryPropTypes from '../categoryPropTypes'; const propTypes = { - /** TODO: Comment */ + /** The policyID of we are getting categories */ policyID: PropTypes.string, - /** TODO: Comment */ + /** Collection of categories attached to a policy */ policyCategories: PropTypes.objectOf(categoryPropTypes), }; diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 88e78fa820e5..e2f872bd3bfb 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -63,7 +63,7 @@ const propTypes = { /** IOU merchant */ iouMerchant: PropTypes.string, - /** TODO: Comment */ + /** IOU Category */ iouCategory: PropTypes.string, /** Selected participants from MoneyRequestModal with login / accountID */ @@ -100,7 +100,7 @@ const propTypes = { /** File source of the receipt */ receiptSource: PropTypes.string, - /** TODO: Comment */ + /** Collection of categories attached to a policy */ policyCategories: PropTypes.objectOf( PropTypes.shape({ enabled: PropTypes.bool.isRequired, diff --git a/src/components/categoryPropTypes.js b/src/components/categoryPropTypes.js index ac9e7a564c1c..6320791554e4 100644 --- a/src/components/categoryPropTypes.js +++ b/src/components/categoryPropTypes.js @@ -1,9 +1,9 @@ import PropTypes from 'prop-types'; export default PropTypes.shape({ - /** TODO: Comment */ + /** Name of a category */ name: PropTypes.string.isRequired, - /** TODO: Comment */ + /** Flag that determine is a category active */ enabled: PropTypes.bool.isRequired, }); diff --git a/src/pages/iou/MoneyRequestCategoryPage.js b/src/pages/iou/MoneyRequestCategoryPage.js index 572e6a5fc2f4..ad4e475ff765 100644 --- a/src/pages/iou/MoneyRequestCategoryPage.js +++ b/src/pages/iou/MoneyRequestCategoryPage.js @@ -12,19 +12,19 @@ import ONYXKEYS from '../../ONYXKEYS'; import reportPropTypes from '../reportPropTypes'; const propTypes = { - /** TODO: Comment */ + /** Navigation route context info provided by react navigation */ route: PropTypes.shape({ - /** Each parameter passed via the URL */ + /** Route specific parameters used on this screen via route :iouType/new/category/:reportID? */ params: PropTypes.shape({ - /** TODO: Comment */ + /** The type of IOU report, i.e. bill, request, send */ iouType: PropTypes.string, - /** TODO: Comment */ + /** reportID for the transaction thread */ reportID: PropTypes.string, }), }).isRequired, - /** TODO: Comment */ + /** The report currently being used */ report: reportPropTypes, }; From 272dd1b9144eb611080dc42f473aebd3e46a4f73 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Fri, 18 Aug 2023 13:20:20 +0200 Subject: [PATCH 08/14] implement category list --- .../CategoryPicker/categoryPickerPropTypes.js | 6 +++ src/components/CategoryPicker/index.js | 47 +++++++++++++------ src/pages/iou/MoneyRequestCategoryPage.js | 11 +++-- 3 files changed, 45 insertions(+), 19 deletions(-) diff --git a/src/components/CategoryPicker/categoryPickerPropTypes.js b/src/components/CategoryPicker/categoryPickerPropTypes.js index b5f8a6f2146e..596c1c680ae8 100644 --- a/src/components/CategoryPicker/categoryPickerPropTypes.js +++ b/src/components/CategoryPicker/categoryPickerPropTypes.js @@ -2,9 +2,15 @@ import PropTypes from 'prop-types'; import categoryPropTypes from '../categoryPropTypes'; const propTypes = { + /** The report ID of the IOU */ + reportID: PropTypes.string, + /** The policyID of we are getting categories */ policyID: PropTypes.string, + /** The type of IOU report, i.e. bill, request, send */ + iouType: PropTypes.string, + /** Collection of categories attached to a policy */ policyCategories: PropTypes.objectOf(categoryPropTypes), }; diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js index 1b37dfca44da..fc9c1b39b6fb 100644 --- a/src/components/CategoryPicker/index.js +++ b/src/components/CategoryPicker/index.js @@ -1,26 +1,43 @@ import React from 'react'; import _ from 'underscore'; -import {View, Text} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import ONYXKEYS from '../../ONYXKEYS'; import {propTypes, defaultProps} from './categoryPickerPropTypes'; +import OptionsList from '../OptionsList'; +import styles from '../../styles/styles'; +import ScreenWrapper from '../ScreenWrapper'; +import Navigation from '../../libs/Navigation/Navigation'; +import ROUTES from '../../ROUTES'; -function CategoryPicker({policyCategories}) { - if (policyCategories === null) { - return null; - } +function CategoryPicker({policyCategories, reportID, iouType}) { + const categoryList = _.chain(policyCategories) + .values() + .map((category) => ({ + text: category.name, + keyForList: category.name, + tooltipText: category.name, + })) + .value(); + + const navigateBack = () => { + Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID)); + }; return ( - - {_.chain(policyCategories) - .values() - .map((category) => ( - - {category.name} - - )) - .value()} - + + {({safeAreaPaddingBottomStyle}) => ( + + )} + ); } diff --git a/src/pages/iou/MoneyRequestCategoryPage.js b/src/pages/iou/MoneyRequestCategoryPage.js index ad4e475ff765..80b88a762609 100644 --- a/src/pages/iou/MoneyRequestCategoryPage.js +++ b/src/pages/iou/MoneyRequestCategoryPage.js @@ -19,7 +19,7 @@ const propTypes = { /** The type of IOU report, i.e. bill, request, send */ iouType: PropTypes.string, - /** reportID for the transaction thread */ + /** The report ID of the IOU */ reportID: PropTypes.string, }), }).isRequired, @@ -36,10 +36,9 @@ function MoneyRequestCategoryPage({route, report}) { const {translate} = useLocalize(); const reportID = lodashGet(route, 'params.reportID', ''); + const iouType = lodashGet(route, 'params.iouType', ''); const navigateBack = () => { - const iouType = lodashGet(route, 'params.iouType', ''); - Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID)); }; @@ -53,7 +52,11 @@ function MoneyRequestCategoryPage({route, report}) { onBackButtonPress={navigateBack} /> - + ); } From 9a241c408a22fd577682dddf9595eb95f05578ff Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Fri, 18 Aug 2023 14:08:46 +0200 Subject: [PATCH 09/14] clarify prop types --- src/components/CategoryPicker/categoryPickerPropTypes.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CategoryPicker/categoryPickerPropTypes.js b/src/components/CategoryPicker/categoryPickerPropTypes.js index 596c1c680ae8..555a1e3356b5 100644 --- a/src/components/CategoryPicker/categoryPickerPropTypes.js +++ b/src/components/CategoryPicker/categoryPickerPropTypes.js @@ -3,13 +3,13 @@ import categoryPropTypes from '../categoryPropTypes'; const propTypes = { /** The report ID of the IOU */ - reportID: PropTypes.string, + reportID: PropTypes.string.isRequired, /** The policyID of we are getting categories */ policyID: PropTypes.string, /** The type of IOU report, i.e. bill, request, send */ - iouType: PropTypes.string, + iouType: PropTypes.string.isRequired, /** Collection of categories attached to a policy */ policyCategories: PropTypes.objectOf(categoryPropTypes), From 4b1081a2b5fcfc7b9718951a1eed55d965bd10e6 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Fri, 18 Aug 2023 14:10:42 +0200 Subject: [PATCH 10/14] memorize category list --- src/components/CategoryPicker/index.js | 32 +++++++++++++++----------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js index fc9c1b39b6fb..163ab6673ca2 100644 --- a/src/components/CategoryPicker/index.js +++ b/src/components/CategoryPicker/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useMemo} from 'react'; import _ from 'underscore'; import {withOnyx} from 'react-native-onyx'; import ONYXKEYS from '../../ONYXKEYS'; @@ -10,14 +10,22 @@ import Navigation from '../../libs/Navigation/Navigation'; import ROUTES from '../../ROUTES'; function CategoryPicker({policyCategories, reportID, iouType}) { - const categoryList = _.chain(policyCategories) - .values() - .map((category) => ({ - text: category.name, - keyForList: category.name, - tooltipText: category.name, - })) - .value(); + const sections = useMemo(() => { + const categoryList = _.chain(policyCategories) + .values() + .map((category) => ({ + text: category.name, + keyForList: category.name, + tooltipText: category.name, + })) + .value(); + + return [ + { + data: categoryList, + }, + ]; + }, [policyCategories]); const navigateBack = () => { Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID)); @@ -29,11 +37,7 @@ function CategoryPicker({policyCategories, reportID, iouType}) { )} From e0bbb618c37f12e375e520ed106658328cb81a8f Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Mon, 21 Aug 2023 18:35:45 +0200 Subject: [PATCH 11/14] grammar fixes --- src/components/CategoryPicker/categoryPickerPropTypes.js | 2 +- src/components/categoryPropTypes.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CategoryPicker/categoryPickerPropTypes.js b/src/components/CategoryPicker/categoryPickerPropTypes.js index 555a1e3356b5..f59b5d40d5c3 100644 --- a/src/components/CategoryPicker/categoryPickerPropTypes.js +++ b/src/components/CategoryPicker/categoryPickerPropTypes.js @@ -5,7 +5,7 @@ const propTypes = { /** The report ID of the IOU */ reportID: PropTypes.string.isRequired, - /** The policyID of we are getting categories */ + /** The policyID we are getting categories for */ policyID: PropTypes.string, /** The type of IOU report, i.e. bill, request, send */ diff --git a/src/components/categoryPropTypes.js b/src/components/categoryPropTypes.js index 6320791554e4..4b4b4e547c71 100644 --- a/src/components/categoryPropTypes.js +++ b/src/components/categoryPropTypes.js @@ -4,6 +4,6 @@ export default PropTypes.shape({ /** Name of a category */ name: PropTypes.string.isRequired, - /** Flag that determine is a category active */ + /** Flag that determines if a category is active */ enabled: PropTypes.bool.isRequired, }); From bcf2d431b0f889165477c34acc8ff88d86d5c270 Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Wed, 23 Aug 2023 11:53:39 +0200 Subject: [PATCH 12/14] clarify comments --- src/components/CategoryPicker/categoryPickerPropTypes.js | 1 + src/components/categoryPropTypes.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/CategoryPicker/categoryPickerPropTypes.js b/src/components/CategoryPicker/categoryPickerPropTypes.js index f59b5d40d5c3..ccc1643021ce 100644 --- a/src/components/CategoryPicker/categoryPickerPropTypes.js +++ b/src/components/CategoryPicker/categoryPickerPropTypes.js @@ -11,6 +11,7 @@ const propTypes = { /** The type of IOU report, i.e. bill, request, send */ iouType: PropTypes.string.isRequired, + /* Onyx Props */ /** Collection of categories attached to a policy */ policyCategories: PropTypes.objectOf(categoryPropTypes), }; diff --git a/src/components/categoryPropTypes.js b/src/components/categoryPropTypes.js index 4b4b4e547c71..90c3ac368d1c 100644 --- a/src/components/categoryPropTypes.js +++ b/src/components/categoryPropTypes.js @@ -4,6 +4,6 @@ export default PropTypes.shape({ /** Name of a category */ name: PropTypes.string.isRequired, - /** Flag that determines if a category is active */ + /** Flag that determines if a category is active and able to be selected */ enabled: PropTypes.bool.isRequired, }); From b0da998742f4ba73d399dcb62471678ed38151de Mon Sep 17 00:00:00 2001 From: Mykhailo Kravchenko Date: Wed, 23 Aug 2023 11:54:10 +0200 Subject: [PATCH 13/14] improve props of MoneyRequestConfirmationList --- src/components/MoneyRequestConfirmationList.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 6c65d4a38d2a..7fc2417d30b3 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -27,6 +27,7 @@ import themeColors from '../styles/themes/default'; import Image from './Image'; import useLocalize from '../hooks/useLocalize'; import * as ReceiptUtils from '../libs/ReceiptUtils'; +import categoryPropTypes from './categoryPropTypes'; const propTypes = { /** Callback to inform parent modal of success */ @@ -97,12 +98,7 @@ const propTypes = { receiptSource: PropTypes.string, /** Collection of categories attached to a policy */ - policyCategories: PropTypes.objectOf( - PropTypes.shape({ - enabled: PropTypes.bool.isRequired, - name: PropTypes.string.isRequired, - }), - ), + policyCategories: PropTypes.objectOf(categoryPropTypes), }; const defaultProps = { @@ -123,7 +119,7 @@ const defaultProps = { ...withCurrentUserPersonalDetailsDefaultProps, receiptPath: '', receiptSource: '', - policyCategories: null, + policyCategories: {}, }; function MoneyRequestConfirmationList(props) { @@ -406,7 +402,7 @@ function MoneyRequestConfirmationList(props) { onPress={() => Navigation.navigate(ROUTES.getMoneyRequestMerchantRoute(props.iouType, props.reportID))} disabled={didConfirm || props.isReadOnly || !isTypeRequest} /> - {props.policyCategories !== null && ( + {!_.isEmpty(props.policyCategories) && ( Date: Wed, 23 Aug 2023 12:04:27 +0200 Subject: [PATCH 14/14] clarify props --- src/components/MoneyRequestConfirmationList.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index 7fc2417d30b3..3dc7f06acfad 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -97,6 +97,7 @@ const propTypes = { /** File source of the receipt */ receiptSource: PropTypes.string, + /* Onyx Props */ /** Collection of categories attached to a policy */ policyCategories: PropTypes.objectOf(categoryPropTypes), };