From ad7af73e59e833337eecb4753d05aac1ec946a46 Mon Sep 17 00:00:00 2001 From: Mohammad Luthfi Fathur Rahman Date: Tue, 5 Jul 2022 23:24:00 +0700 Subject: [PATCH 01/42] adding history route for instead history drawer on big screen --- src/libs/Navigation/CustomActions.js | 10 ++++++++-- src/libs/Navigation/Navigation.js | 8 +++++--- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/libs/Navigation/CustomActions.js b/src/libs/Navigation/CustomActions.js index c5fb5f2a4154..8d70ef4f5c15 100644 --- a/src/libs/Navigation/CustomActions.js +++ b/src/libs/Navigation/CustomActions.js @@ -65,9 +65,10 @@ function getScreenNameFromState(state) { * More context here: https://github.com/react-navigation/react-navigation/issues/9744 * * @param {String} route + * @param {String} isSmallScreenWidth * @returns {Function} */ -function pushDrawerRoute(route) { +function pushDrawerRoute(route, isSmallScreenWidth) { return (currentState) => { // Parse the state, name, and params from the new route we want to navigate to. const newStateFromRoute = getStateFromPath(route, linkingConfig.config); @@ -103,13 +104,18 @@ function pushDrawerRoute(route) { // Force drawer to close // https://github.com/react-navigation/react-navigation/blob/94ab791cae5061455f036cd3f6bc7fa63167e7c7/packages/routers/src/DrawerRouter.tsx#L142 const hasDrawerhistory = _.find(state.history || [], h => h.type === 'drawer'); - if (!hasDrawerhistory || currentState.type !== 'drawer') { + if (isSmallScreenWidth && (!hasDrawerhistory || currentState.type !== 'drawer')) { history.push({ type: 'drawer', // If current state is not from drawer navigator then always use closed status to close the drawer status: currentState.type !== 'drawer' || currentState.default === 'open' ? 'closed' : 'open', }); + } else { + history.push({ + type: 'route', + name: newScreenName, + }); } return CommonActions.reset({ diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js index c19f10c635d8..6d34364285b8 100644 --- a/src/libs/Navigation/Navigation.js +++ b/src/libs/Navigation/Navigation.js @@ -14,6 +14,7 @@ let resolveNavigationIsReadyPromise; let navigationIsReadyPromise = new Promise((resolve) => { resolveNavigationIsReadyPromise = resolve; }); +let isSmallScreenWidth; let isLoggedIn = false; Onyx.connect({ @@ -74,10 +75,11 @@ function closeDrawer() { } /** - * @param {Boolean} isSmallScreenWidth + * @param {Boolean} isSmallScreen * @returns {String} */ -function getDefaultDrawerState(isSmallScreenWidth) { +function getDefaultDrawerState(isSmallScreen) { + isSmallScreenWidth = isSmallScreen; if (didTapNotificationBeforeReady) { return 'closed'; } @@ -140,7 +142,7 @@ function navigate(route = ROUTES.HOME) { } if (isDrawerRoute(route)) { - navigationRef.current.dispatch(CustomActions.pushDrawerRoute(route)); + navigationRef.current.dispatch(CustomActions.pushDrawerRoute(route, isSmallScreenWidth)); return; } From 3bf83210186e6aa771a6ad090dcbe63cf01bb7a0 Mon Sep 17 00:00:00 2001 From: karim <108357004+Karim-30@users.noreply.github.com> Date: Mon, 11 Jul 2022 23:08:52 +0200 Subject: [PATCH 02/42] fix RTL (edited) text --- .../home/report/ReportActionItemFragment.js | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index afab5787fb75..3662a69ad713 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.js @@ -104,20 +104,22 @@ const ReportActionItemFragment = (props) => { html={`${props.fragment.html + (props.fragment.isEdited ? '' : '')}`} /> ) : ( - - {Str.htmlDecode(props.fragment.text)} + + + {Str.htmlDecode(props.fragment.text)} + {props.fragment.isEdited && ( - - {` ${props.translate('reportActionCompose.edited')}`} - + + {` ${props.translate('reportActionCompose.edited')}`} + )} - + ); } case 'TEXT': From c30e992489dcc5c72ea0119eb29f453cf74f8e00 Mon Sep 17 00:00:00 2001 From: karim <108357004+Karim-30@users.noreply.github.com> Date: Mon, 11 Jul 2022 23:08:52 +0200 Subject: [PATCH 03/42] fix RTL (edited) text --- .../home/report/ReportActionItemFragment.js | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index afab5787fb75..3662a69ad713 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.js @@ -104,20 +104,22 @@ const ReportActionItemFragment = (props) => { html={`${props.fragment.html + (props.fragment.isEdited ? '' : '')}`} /> ) : ( - - {Str.htmlDecode(props.fragment.text)} + + + {Str.htmlDecode(props.fragment.text)} + {props.fragment.isEdited && ( - - {` ${props.translate('reportActionCompose.edited')}`} - + + {` ${props.translate('reportActionCompose.edited')}`} + )} - + ); } case 'TEXT': From 1d8f437446dcf61ad6b5bb875391db3da99ca907 Mon Sep 17 00:00:00 2001 From: Mohammad Luthfi Fathur Rahman Date: Thu, 14 Jul 2022 01:24:27 +0700 Subject: [PATCH 04/42] update how to get screen size --- src/libs/Navigation/CustomActions.js | 10 ++++++++-- src/libs/Navigation/Navigation.js | 8 +++----- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/libs/Navigation/CustomActions.js b/src/libs/Navigation/CustomActions.js index 8d70ef4f5c15..528db3d922d4 100644 --- a/src/libs/Navigation/CustomActions.js +++ b/src/libs/Navigation/CustomActions.js @@ -3,8 +3,10 @@ import { CommonActions, StackActions, DrawerActions, getStateFromPath, } from '@react-navigation/native'; import lodashGet from 'lodash/get'; +import {Dimensions} from 'react-native'; import linkingConfig from './linkingConfig'; import navigationRef from './navigationRef'; +import variables from '../../styles/variables'; /** * @returns {Object} @@ -57,6 +59,11 @@ function getScreenNameFromState(state) { return getRouteFromState(state).name || ''; } +let isSmallScreenWidth; +Dimensions.addEventListener('change', ({window}) => { + isSmallScreenWidth = window.width <= variables.mobileResponsiveWidthBreakpoint; +}); + /** * Special accomodation must be made for navigating to a screen inside a DrawerNavigator (e.g. our ReportScreen). The web/mWeb default behavior when * calling "navigate()" does not give us the browser history we would expect for a typical web paradigm (e.g. that navigating from one screen another @@ -65,10 +72,9 @@ function getScreenNameFromState(state) { * More context here: https://github.com/react-navigation/react-navigation/issues/9744 * * @param {String} route - * @param {String} isSmallScreenWidth * @returns {Function} */ -function pushDrawerRoute(route, isSmallScreenWidth) { +function pushDrawerRoute(route) { return (currentState) => { // Parse the state, name, and params from the new route we want to navigate to. const newStateFromRoute = getStateFromPath(route, linkingConfig.config); diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js index 6d34364285b8..c19f10c635d8 100644 --- a/src/libs/Navigation/Navigation.js +++ b/src/libs/Navigation/Navigation.js @@ -14,7 +14,6 @@ let resolveNavigationIsReadyPromise; let navigationIsReadyPromise = new Promise((resolve) => { resolveNavigationIsReadyPromise = resolve; }); -let isSmallScreenWidth; let isLoggedIn = false; Onyx.connect({ @@ -75,11 +74,10 @@ function closeDrawer() { } /** - * @param {Boolean} isSmallScreen + * @param {Boolean} isSmallScreenWidth * @returns {String} */ -function getDefaultDrawerState(isSmallScreen) { - isSmallScreenWidth = isSmallScreen; +function getDefaultDrawerState(isSmallScreenWidth) { if (didTapNotificationBeforeReady) { return 'closed'; } @@ -142,7 +140,7 @@ function navigate(route = ROUTES.HOME) { } if (isDrawerRoute(route)) { - navigationRef.current.dispatch(CustomActions.pushDrawerRoute(route, isSmallScreenWidth)); + navigationRef.current.dispatch(CustomActions.pushDrawerRoute(route)); return; } From 6de2618181e93520e50ff976bbe7fbcdf4d0028d Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Thu, 14 Jul 2022 15:17:26 -1000 Subject: [PATCH 05/42] Update contributing guidelines payments section --- contributingGuides/CONTRIBUTING.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/contributingGuides/CONTRIBUTING.md b/contributingGuides/CONTRIBUTING.md index 5a06599d8936..c0e6f83b3aa9 100644 --- a/contributingGuides/CONTRIBUTING.md +++ b/contributingGuides/CONTRIBUTING.md @@ -31,11 +31,13 @@ If you are hired for an Upwork job and have any job-specific questions, please a If you've found a vulnerability, please email security@expensify.com with the subject `Vulnerability Report` instead of creating an issue. ## Payment for Contributions -We hire and pay external contributors via Upwork.com. If you'd like to be paid for contributing, please create an Upwork account, apply for an available job in [GitHub](https://github.com/Expensify/App/issues?q=is%3Aopen+is%3Aissue+label%3A%22Help+Wanted%22), and finally apply for the job in Upwork once your proposal gets selected in GitHub. If you think your compensation should be increased for a specific job, you can request a reevaluation by commenting in the Github issue where the Upwork job was posted. +We hire and pay external contributors via Upwork.com. If you'd like to be paid for contributing, please create an Upwork account, apply for an available job in [GitHub](https://github.com/Expensify/App/issues?q=is%3Aopen+is%3Aissue+label%3A%22Help+Wanted%22), and finally apply for the job in Upwork once your proposal gets selected in GitHub. If you think your compensation should be increased for a specific job, you can request a reevaluation by commenting in the Github issue where the Upwork job was posted. -Payment for your contributions will be made no less than 7 days after the pull request is deployed to production to allow for regression testing. If a regression occurs, payment will be issued 7 days after all regressions are fixed. If you have not received payment after 8 days of the PR being deployed to production and there being no regressions, please email contributors@expensify.com referencing the GH issue and your GH handle. +Payment for your contributions will be made no less than 7 days after the pull request is deployed to production to allow for regression testing. If a regression occurs, payment will be issued 7 days after all regressions are fixed. If you have not received payment after 8 days of the PR being deployed to production and there being no regressions, please email contributors@expensify.com referencing the GH issue and your GH handle. -New contributors are limited to working on one job at a time, however experienced contributors may work on numerous jobs simultaneously. +New contributors are limited to working on one job at a time, however experienced contributors may work on numerous jobs simultaneously. + +Please be aware that compensation for any support in solving an issue is provided **entirely at Expensify’s discretion**. Personal time or resources applied towards investigating a proposal **will not guarantee compensation**. Compensation is only guaranteed to those who **propose a solution and get hired for that job**. We understand there may be cases where a selected proposal may take inspiration from a previous proposal. Unfortunately, it’s not possible for us to evaluate every individual case and we have no process that can efficiently do so. Issues with higher rewards come with higher risk factors so try to keep things civil and make the best proposal you can. Once again, **any information provided may not necessarily lead to you getting hired for that issue or compensated in any way.** ## Finding Jobs There are two ways you can find a job that you can contribute to: @@ -55,10 +57,10 @@ Please follow these steps to propose a job: 2. If your bug or enhancement matches an existing issue, please feel free to comment on that GitHub issue with your findings if you think it will help solve the issue. 4. If there is no existing GitHub issue or Upwork job, check if the issue is happening on prod (as opposed to only happening on dev) 5. If the issue is just in dev then it means it's a new issue and has not been deployed to production. In this case, you should try to find the offending PR and comment in the issue tied to the PR and ask the assigned users to add the `DeployBlockerCash` label. If you can't find it, follow the reporting instructions in the next item, but note that the issue is a regression only found in dev and not in prod. -6. If the issue happens in main, staging or production then report the issue(s) in the [#expensify-open-source](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#asking-questions) Slack channel, prefixed with `BUG:` or `Feature Request:`. Please use the templates for bugs and feature requests that are bookmarked in #expensify-open-source. View [this guide](https://github.com/Expensify/App/blob/main/contributingGuides/HOW_TO_CREATE_A_PLAN.md) for help creating a plan when proposing a feature request. +6. If the issue happens in main, staging or production then report the issue(s) in the [#expensify-open-source](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#asking-questions) Slack channel, prefixed with `BUG:` or `Feature Request:`. Please use the templates for bugs and feature requests that are bookmarked in #expensify-open-source. View [this guide](https://github.com/Expensify/App/blob/main/contributingGuides/HOW_TO_CREATE_A_PLAN.md) for help creating a plan when proposing a feature request. 7. After review in #expensify-open-source, if you've provided a quality proposal that we choose to implement, a GitHub issue will be created and your Slack handle will be included in the original post after `Issue reported by:` -8. If an external contributor other than yourself is hired to work on the issue, you will also be hired for the same job in Upwork. No additional work is needed. If the issue is fixed internally, a dedicated job will be created to hire and pay you after the issue is fixed. -9. Payment will be made 7 days after code is deployed to production if there are no regressions. If a regression is discovered, payment will be issued 7 days after all regressions are fixed. +8. If an external contributor other than yourself is hired to work on the issue, you will also be hired for the same job in Upwork. No additional work is needed. If the issue is fixed internally, a dedicated job will be created to hire and pay you after the issue is fixed. +9. Payment will be made 7 days after code is deployed to production if there are no regressions. If a regression is discovered, payment will be issued 7 days after all regressions are fixed. >**Note:** Our problem solving approach at Expensify is to focus on high value problems and avoid small optimizations with results that are difficult to measure. We also prefer to identify and solve problems at their root. Given that, please ensure all proposed jobs fix a specific problem in a measurable way with evidence so they are easy to evaluate. Here's an example of a good problem/solution: > @@ -86,7 +88,7 @@ Additionally if you want to discuss an idea with the community without having a 3. If you cannot reproduce the problem, pause on this step and add a comment to the issue explaining where you are stuck or that you don't think the issue can be reproduced. #### Propose a solution for the job -4. After you reproduce the issue, make a proposal for your solution and post it as a comment in the corresponding GitHub issue (linked in the Upwork job). Your solution proposal should include a brief written technical explanation of the changes you will make. Include "Proposal" as the first word in your comment. +4. After you reproduce the issue, make a proposal for your solution and post it as a comment in the corresponding GitHub issue (linked in the Upwork job). Your solution proposal should include a brief written technical explanation of the changes you will make. Include "Proposal" as the first word in your comment. - Note: Issues that have not had the `External` label applied have not yet been approved for implementation. This means, if you propose a solution to an issue without the `External` label (which you are allowed to do) it is possible that the issue will be fixed internally. If the `External` label has not yet been applied, Expensify has the right to use your proposal to fix said issue, without providing compensation for your solution. This process covers the very rare instance where we need or want to fix an issue internally. - Note: Before submitting a proposal on an issue, be sure to read any other existing proposals. Any new proposal should be substantively different from existing proposals. 5. Pause at this step until someone from the Contributor-Plus team and / or someone from Expensify provides feedback on your proposal (do not create a pull request yet). @@ -123,7 +125,7 @@ Additionally if you want to discuss an idea with the community without having a - If you have made a change to your pull request and are ready for another review, leave a comment that says "Updated" on the pull request itself. - Please keep the conversation in GitHub, and do not ping individual reviewers in Slack or Upwork to get their attention. - Pull Request reviews can sometimes take a few days. If your pull request has not been addressed after four days please let us know via the #expensify-open-source Slack channel. -- On occasion, our engineers will need to focus on a feature release and choose to place a hold on the review of your PR. Depending on the hold length, our team will decide if a bonus will be applied to the job. +- On occasion, our engineers will need to focus on a feature release and choose to place a hold on the review of your PR. Depending on the hold length, our team will decide if a bonus will be applied to the job. #### Important note about JavaScript Style - Read our official [JavaScript and React style guide](https://github.com/Expensify/App/blob/main/contributingGuides/STYLE.md). Please refer to our Style Guide before asking for a review. From 260842f77a7e1c8a084f9906688e3eccdd581688 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Thu, 14 Jul 2022 15:21:01 -1000 Subject: [PATCH 06/42] Remove ws changes --- contributingGuides/CONTRIBUTING.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/contributingGuides/CONTRIBUTING.md b/contributingGuides/CONTRIBUTING.md index c0e6f83b3aa9..5d27609b67a8 100644 --- a/contributingGuides/CONTRIBUTING.md +++ b/contributingGuides/CONTRIBUTING.md @@ -31,11 +31,11 @@ If you are hired for an Upwork job and have any job-specific questions, please a If you've found a vulnerability, please email security@expensify.com with the subject `Vulnerability Report` instead of creating an issue. ## Payment for Contributions -We hire and pay external contributors via Upwork.com. If you'd like to be paid for contributing, please create an Upwork account, apply for an available job in [GitHub](https://github.com/Expensify/App/issues?q=is%3Aopen+is%3Aissue+label%3A%22Help+Wanted%22), and finally apply for the job in Upwork once your proposal gets selected in GitHub. If you think your compensation should be increased for a specific job, you can request a reevaluation by commenting in the Github issue where the Upwork job was posted. +We hire and pay external contributors via Upwork.com. If you'd like to be paid for contributing, please create an Upwork account, apply for an available job in [GitHub](https://github.com/Expensify/App/issues?q=is%3Aopen+is%3Aissue+label%3A%22Help+Wanted%22), and finally apply for the job in Upwork once your proposal gets selected in GitHub. If you think your compensation should be increased for a specific job, you can request a reevaluation by commenting in the Github issue where the Upwork job was posted. -Payment for your contributions will be made no less than 7 days after the pull request is deployed to production to allow for regression testing. If a regression occurs, payment will be issued 7 days after all regressions are fixed. If you have not received payment after 8 days of the PR being deployed to production and there being no regressions, please email contributors@expensify.com referencing the GH issue and your GH handle. +Payment for your contributions will be made no less than 7 days after the pull request is deployed to production to allow for regression testing. If a regression occurs, payment will be issued 7 days after all regressions are fixed. If you have not received payment after 8 days of the PR being deployed to production and there being no regressions, please email contributors@expensify.com referencing the GH issue and your GH handle. -New contributors are limited to working on one job at a time, however experienced contributors may work on numerous jobs simultaneously. +New contributors are limited to working on one job at a time, however experienced contributors may work on numerous jobs simultaneously. Please be aware that compensation for any support in solving an issue is provided **entirely at Expensify’s discretion**. Personal time or resources applied towards investigating a proposal **will not guarantee compensation**. Compensation is only guaranteed to those who **propose a solution and get hired for that job**. We understand there may be cases where a selected proposal may take inspiration from a previous proposal. Unfortunately, it’s not possible for us to evaluate every individual case and we have no process that can efficiently do so. Issues with higher rewards come with higher risk factors so try to keep things civil and make the best proposal you can. Once again, **any information provided may not necessarily lead to you getting hired for that issue or compensated in any way.** @@ -57,10 +57,10 @@ Please follow these steps to propose a job: 2. If your bug or enhancement matches an existing issue, please feel free to comment on that GitHub issue with your findings if you think it will help solve the issue. 4. If there is no existing GitHub issue or Upwork job, check if the issue is happening on prod (as opposed to only happening on dev) 5. If the issue is just in dev then it means it's a new issue and has not been deployed to production. In this case, you should try to find the offending PR and comment in the issue tied to the PR and ask the assigned users to add the `DeployBlockerCash` label. If you can't find it, follow the reporting instructions in the next item, but note that the issue is a regression only found in dev and not in prod. -6. If the issue happens in main, staging or production then report the issue(s) in the [#expensify-open-source](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#asking-questions) Slack channel, prefixed with `BUG:` or `Feature Request:`. Please use the templates for bugs and feature requests that are bookmarked in #expensify-open-source. View [this guide](https://github.com/Expensify/App/blob/main/contributingGuides/HOW_TO_CREATE_A_PLAN.md) for help creating a plan when proposing a feature request. +6. If the issue happens in main, staging or production then report the issue(s) in the [#expensify-open-source](https://github.com/Expensify/App/blob/main/contributingGuides/CONTRIBUTING.md#asking-questions) Slack channel, prefixed with `BUG:` or `Feature Request:`. Please use the templates for bugs and feature requests that are bookmarked in #expensify-open-source. View [this guide](https://github.com/Expensify/App/blob/main/contributingGuides/HOW_TO_CREATE_A_PLAN.md) for help creating a plan when proposing a feature request. 7. After review in #expensify-open-source, if you've provided a quality proposal that we choose to implement, a GitHub issue will be created and your Slack handle will be included in the original post after `Issue reported by:` -8. If an external contributor other than yourself is hired to work on the issue, you will also be hired for the same job in Upwork. No additional work is needed. If the issue is fixed internally, a dedicated job will be created to hire and pay you after the issue is fixed. -9. Payment will be made 7 days after code is deployed to production if there are no regressions. If a regression is discovered, payment will be issued 7 days after all regressions are fixed. +8. If an external contributor other than yourself is hired to work on the issue, you will also be hired for the same job in Upwork. No additional work is needed. If the issue is fixed internally, a dedicated job will be created to hire and pay you after the issue is fixed. +9. Payment will be made 7 days after code is deployed to production if there are no regressions. If a regression is discovered, payment will be issued 7 days after all regressions are fixed. >**Note:** Our problem solving approach at Expensify is to focus on high value problems and avoid small optimizations with results that are difficult to measure. We also prefer to identify and solve problems at their root. Given that, please ensure all proposed jobs fix a specific problem in a measurable way with evidence so they are easy to evaluate. Here's an example of a good problem/solution: > @@ -88,7 +88,7 @@ Additionally if you want to discuss an idea with the community without having a 3. If you cannot reproduce the problem, pause on this step and add a comment to the issue explaining where you are stuck or that you don't think the issue can be reproduced. #### Propose a solution for the job -4. After you reproduce the issue, make a proposal for your solution and post it as a comment in the corresponding GitHub issue (linked in the Upwork job). Your solution proposal should include a brief written technical explanation of the changes you will make. Include "Proposal" as the first word in your comment. +4. After you reproduce the issue, make a proposal for your solution and post it as a comment in the corresponding GitHub issue (linked in the Upwork job). Your solution proposal should include a brief written technical explanation of the changes you will make. Include "Proposal" as the first word in your comment. - Note: Issues that have not had the `External` label applied have not yet been approved for implementation. This means, if you propose a solution to an issue without the `External` label (which you are allowed to do) it is possible that the issue will be fixed internally. If the `External` label has not yet been applied, Expensify has the right to use your proposal to fix said issue, without providing compensation for your solution. This process covers the very rare instance where we need or want to fix an issue internally. - Note: Before submitting a proposal on an issue, be sure to read any other existing proposals. Any new proposal should be substantively different from existing proposals. 5. Pause at this step until someone from the Contributor-Plus team and / or someone from Expensify provides feedback on your proposal (do not create a pull request yet). @@ -125,7 +125,7 @@ Additionally if you want to discuss an idea with the community without having a - If you have made a change to your pull request and are ready for another review, leave a comment that says "Updated" on the pull request itself. - Please keep the conversation in GitHub, and do not ping individual reviewers in Slack or Upwork to get their attention. - Pull Request reviews can sometimes take a few days. If your pull request has not been addressed after four days please let us know via the #expensify-open-source Slack channel. -- On occasion, our engineers will need to focus on a feature release and choose to place a hold on the review of your PR. Depending on the hold length, our team will decide if a bonus will be applied to the job. +- On occasion, our engineers will need to focus on a feature release and choose to place a hold on the review of your PR. Depending on the hold length, our team will decide if a bonus will be applied to the job. #### Important note about JavaScript Style - Read our official [JavaScript and React style guide](https://github.com/Expensify/App/blob/main/contributingGuides/STYLE.md). Please refer to our Style Guide before asking for a review. From 71bb61a408f9b61212676df673638b46a5a1a0a2 Mon Sep 17 00:00:00 2001 From: karim <108357004+Karim-30@users.noreply.github.com> Date: Fri, 15 Jul 2022 11:08:11 +0200 Subject: [PATCH 07/42] create writing Direction utility --- src/pages/home/report/ReportActionItemFragment.js | 2 +- src/styles/styles.js | 2 ++ src/styles/utilities/writingDirection.js | 14 ++++++++++++++ 3 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 src/styles/utilities/writingDirection.js diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index 2d4f95043bd0..4b12c4983198 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.js @@ -106,7 +106,7 @@ const ReportActionItemFragment = (props) => { ) : ( {`\u2066${Str.htmlDecode(props.fragment.text)}`} {props.fragment.isEdited && ( diff --git a/src/styles/styles.js b/src/styles/styles.js index 482a70f56ca3..e0b6abb969fc 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -15,6 +15,7 @@ import textInputAlignSelf from './utilities/textInputAlignSelf'; import positioning from './utilities/positioning'; import codeStyles from './codeStyles'; import visibility from './utilities/visibility'; +import writingDirection from './utilities/writingDirection'; import optionAlternateTextPlatformStyles from './optionAlternateTextPlatformStyles'; import pointerEventsNone from './pointerEventsNone'; import overflowXHidden from './overflowXHidden'; @@ -149,6 +150,7 @@ const styles = { ...positioning, ...wordBreak, ...whiteSpace, + ...writingDirection, rateCol: { margin: 0, diff --git a/src/styles/utilities/writingDirection.js b/src/styles/utilities/writingDirection.js new file mode 100644 index 000000000000..df1e420dc48c --- /dev/null +++ b/src/styles/utilities/writingDirection.js @@ -0,0 +1,14 @@ +/** + * Writing direction utility styles. + * note: writingDirection not available for Android, for Android you can use the Unicode. + * + * https://www.w3.org/International/questions/qa-bidi-unicode-controls + */ +export default { + rtl: { + writingDirection: 'ltr', + }, + ltr: { + writingDirection: 'ltr', + }, +}; From a9fde46f8d8bad97c296f0727e7a8b02eef0dc6d Mon Sep 17 00:00:00 2001 From: Mohammad Luthfi Fathur Rahman Date: Sat, 16 Jul 2022 00:16:42 +0700 Subject: [PATCH 08/42] update small screen value --- src/libs/Navigation/CustomActions.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/libs/Navigation/CustomActions.js b/src/libs/Navigation/CustomActions.js index 528db3d922d4..348bbef076b3 100644 --- a/src/libs/Navigation/CustomActions.js +++ b/src/libs/Navigation/CustomActions.js @@ -59,11 +59,6 @@ function getScreenNameFromState(state) { return getRouteFromState(state).name || ''; } -let isSmallScreenWidth; -Dimensions.addEventListener('change', ({window}) => { - isSmallScreenWidth = window.width <= variables.mobileResponsiveWidthBreakpoint; -}); - /** * Special accomodation must be made for navigating to a screen inside a DrawerNavigator (e.g. our ReportScreen). The web/mWeb default behavior when * calling "navigate()" does not give us the browser history we would expect for a typical web paradigm (e.g. that navigating from one screen another @@ -76,6 +71,9 @@ Dimensions.addEventListener('change', ({window}) => { */ function pushDrawerRoute(route) { return (currentState) => { + const initialDimensions = Dimensions.get('window'); + const isSmallScreenWidth = initialDimensions.width <= variables.mobileResponsiveWidthBreakpoint; + // Parse the state, name, and params from the new route we want to navigate to. const newStateFromRoute = getStateFromPath(route, linkingConfig.config); const newScreenName = getScreenNameFromState(newStateFromRoute); From 7126b7053ecbfa5be263bd5e00112d6a527a8a91 Mon Sep 17 00:00:00 2001 From: Yevhenii Voloshchak Date: Mon, 18 Jul 2022 16:39:36 +0300 Subject: [PATCH 09/42] Calculate firstNonHeaderIndex every time emoji list is updated --- .../EmojiPicker/EmojiPickerMenu/index.js | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index e271680da068..79a175e6e1f1 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -86,8 +86,10 @@ class EmojiPickerMenu extends Component { this.isMobileLandscape = this.isMobileLandscape.bind(this); this.onSelectionChange = this.onSelectionChange.bind(this); this.updatePreferredSkinTone = this.updatePreferredSkinTone.bind(this); + this.setFirstNonHeaderIndex = this.setFirstNonHeaderIndex.bind(this); this.currentScrollOffset = 0; + this.firstNonHeaderIndex = 0; this.state = { filteredEmojis: this.emojis, @@ -111,6 +113,7 @@ class EmojiPickerMenu extends Component { this.props.forwardedRef(this.searchInput); } this.setupEventHandlers(); + this.setFirstNonHeaderIndex(this.emojis); } componentWillUnmount() { @@ -126,6 +129,14 @@ class EmojiPickerMenu extends Component { this.setState({selection: event.nativeEvent.selection}); } + /** + * Find and store index of the first emoji item + * @param {Array} filteredEmojis + */ + setFirstNonHeaderIndex(filteredEmojis) { + this.firstNonHeaderIndex = _.findIndex(filteredEmojis, item => !item.spacer && !item.header); + } + /** * Setup and attach keypress/mouse handlers for highlight navigation. */ @@ -214,8 +225,6 @@ class EmojiPickerMenu extends Component { * @param {String} arrowKey */ highlightAdjacentEmoji(arrowKey) { - const firstNonHeaderIndex = this.state.filteredEmojis.length === this.emojis.length ? this.numColumns : 0; - // Arrow Down and Arrow Right enable arrow navigation when search is focused if (this.searchInput && this.searchInput.isFocused() && this.state.filteredEmojis.length) { if (arrowKey !== 'ArrowDown' && arrowKey !== 'ArrowRight') { @@ -242,7 +251,7 @@ class EmojiPickerMenu extends Component { // If nothing is highlighted and an arrow key is pressed // select the first emoji if (this.state.highlightedIndex === -1) { - this.setState({highlightedIndex: firstNonHeaderIndex}); + this.setState({highlightedIndex: this.firstNonHeaderIndex}); this.scrollToHighlightedIndex(); return; } @@ -273,7 +282,7 @@ class EmojiPickerMenu extends Component { break; case 'ArrowLeft': move(-1, - () => this.state.highlightedIndex - 1 < firstNonHeaderIndex, + () => this.state.highlightedIndex - 1 < this.firstNonHeaderIndex, () => { // Reaching start of the list, arrow left set the focus to searchInput. this.focusInputWithTextSelect(); @@ -286,7 +295,7 @@ class EmojiPickerMenu extends Component { case 'ArrowUp': move( -this.numColumns, - () => this.state.highlightedIndex - this.numColumns < firstNonHeaderIndex, + () => this.state.highlightedIndex - this.numColumns < this.firstNonHeaderIndex, () => { // Reaching start of the list, arrow up set the focus to searchInput. this.focusInputWithTextSelect(); @@ -356,6 +365,7 @@ class EmojiPickerMenu extends Component { headerIndices: this.unfilteredHeaderIndices, highlightedIndex: -1, }); + this.setFirstNonHeaderIndex(this.emojis); return; } @@ -370,6 +380,7 @@ class EmojiPickerMenu extends Component { // Remove sticky header indices. There are no headers while searching and we don't want to make emojis sticky this.setState({filteredEmojis: newFilteredEmojiList, headerIndices: [], highlightedIndex: 0}); + this.setFirstNonHeaderIndex(newFilteredEmojiList); } /** From 604cb3da9ea32de8972aec086ba1190fa3c71f94 Mon Sep 17 00:00:00 2001 From: Yevhenii Voloshchak Date: Mon, 18 Jul 2022 23:46:45 +0300 Subject: [PATCH 10/42] Generate default avatar of random color for all the users --- src/libs/OptionsListUtils.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/libs/OptionsListUtils.js b/src/libs/OptionsListUtils.js index 53ae93cf8b74..ad98e8fac8f5 100644 --- a/src/libs/OptionsListUtils.js +++ b/src/libs/OptionsListUtils.js @@ -89,10 +89,6 @@ Onyx.connect({ }, }); -// We are initializing a default avatar here so that we use the same default color for each user we are inviting. This -// will update when the OptionsListUtils re-loads. But will stay the same color for the life of the JS session. -const defaultAvatarForUserToInvite = ReportUtils.getDefaultAvatar(); - /** * Adds expensify SMS domain (@expensify.sms) if login is a phone number and if it's not included yet * @@ -591,7 +587,7 @@ function getOptions(reports, personalDetails, activeReportID, { userToInvite = createOption([login], personalDetails, null, { showChatPreviewLine, }); - userToInvite.icons = [defaultAvatarForUserToInvite]; + userToInvite.icons = [ReportUtils.getDefaultAvatar(login)]; } // If we are prioritizing 1:1 chats in search, do it only once we started searching From 82870f6251638c469177a3f519e085d661342b96 Mon Sep 17 00:00:00 2001 From: b1tjoy <103875612+b1tjoy@users.noreply.github.com> Date: Tue, 19 Jul 2022 23:16:12 +0800 Subject: [PATCH 11/42] fix: prevent avatar icon from flicker on Web --- src/components/Avatar.js | 8 +++++++- src/libs/getAvatarDefaultSource/index.js | 6 ++++++ src/libs/getAvatarDefaultSource/index.native.js | 4 ++++ 3 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 src/libs/getAvatarDefaultSource/index.js create mode 100644 src/libs/getAvatarDefaultSource/index.native.js diff --git a/src/components/Avatar.js b/src/components/Avatar.js index ff51d2c427b8..eb5f28f64efe 100644 --- a/src/components/Avatar.js +++ b/src/components/Avatar.js @@ -8,6 +8,7 @@ import themeColors from '../styles/themes/default'; import CONST from '../CONST'; import * as StyleUtils from '../styles/StyleUtils'; import * as Expensicons from './Icon/Expensicons'; +import getAvatarDefaultSource from '../libs/getAvatarDefaultSource'; const propTypes = { /** Source for the avatar. Can be a URL or an icon. */ @@ -70,7 +71,12 @@ class Avatar extends PureComponent { /> ) : ( - this.setState({imageError: true})} /> + this.setState({imageError: true})} + /> )} ); diff --git a/src/libs/getAvatarDefaultSource/index.js b/src/libs/getAvatarDefaultSource/index.js new file mode 100644 index 000000000000..81fc8d64fb04 --- /dev/null +++ b/src/libs/getAvatarDefaultSource/index.js @@ -0,0 +1,6 @@ +/** + * Return the source as default source of image when running on Web/Desktop + * @param {String|Function} source The source of avatar image + * @return {Object} The image source + */ +export default source => ({uri: source}); diff --git a/src/libs/getAvatarDefaultSource/index.native.js b/src/libs/getAvatarDefaultSource/index.native.js new file mode 100644 index 000000000000..67be9c937881 --- /dev/null +++ b/src/libs/getAvatarDefaultSource/index.native.js @@ -0,0 +1,4 @@ +/** + * Return undefined as default source of image when running on Native + */ +export default () => {}; From d1fda9f0b2da4db98e1e0d2c2b2f74f86d09e869 Mon Sep 17 00:00:00 2001 From: karim <108357004+Karim-30@users.noreply.github.com> Date: Wed, 20 Jul 2022 00:10:58 +0200 Subject: [PATCH 12/42] Add LTR unicode function --- src/pages/home/report/ReportActionItemFragment.js | 3 ++- src/styles/StyleUtils.js | 10 ++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js index 48e56d8b1be2..4111de6a1dca 100644 --- a/src/pages/home/report/ReportActionItemFragment.js +++ b/src/pages/home/report/ReportActionItemFragment.js @@ -14,6 +14,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../componen import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; import canUseTouchScreen from '../../../libs/canUseTouchscreen'; import compose from '../../../libs/compose'; +import * as StyleUtils from '../../../styles/StyleUtils'; const propTypes = { /** The message fragment needing to be displayed */ @@ -119,7 +120,7 @@ const ReportActionItemFragment = (props) => { selectable={!canUseTouchScreen() || !props.isSmallScreenWidth} style={[EmojiUtils.containsOnlyEmojis(props.fragment.text) ? styles.onlyEmojisText : undefined, styles.ltr]} > - {`\u2066${Str.htmlDecode(props.fragment.text)}`} + {StyleUtils.convertToLTR(Str.htmlDecode(props.fragment.text))} {props.fragment.isEdited && ( Date: Wed, 20 Jul 2022 10:18:24 +0300 Subject: [PATCH 13/42] Do nothing if there are no emojis to highlight --- src/components/EmojiPicker/EmojiPickerMenu/index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index 79a175e6e1f1..d3472b60f2f5 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -225,6 +225,11 @@ class EmojiPickerMenu extends Component { * @param {String} arrowKey */ highlightAdjacentEmoji(arrowKey) { + // Do nothing if there are no emojis to highlight + if (!this.state.filteredEmojis.length) { + return; + } + // Arrow Down and Arrow Right enable arrow navigation when search is focused if (this.searchInput && this.searchInput.isFocused() && this.state.filteredEmojis.length) { if (arrowKey !== 'ArrowDown' && arrowKey !== 'ArrowRight') { From 0dd5d903b3a7e4badddc826bafe38406b3af5a66 Mon Sep 17 00:00:00 2001 From: Yevhenii Voloshchak Date: Wed, 20 Jul 2022 10:25:32 +0300 Subject: [PATCH 14/42] Cleanup --- src/components/EmojiPicker/EmojiPickerMenu/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index d3472b60f2f5..f025d6545415 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -231,7 +231,7 @@ class EmojiPickerMenu extends Component { } // Arrow Down and Arrow Right enable arrow navigation when search is focused - if (this.searchInput && this.searchInput.isFocused() && this.state.filteredEmojis.length) { + if (this.searchInput && this.searchInput.isFocused()) { if (arrowKey !== 'ArrowDown' && arrowKey !== 'ArrowRight') { return; } From 3a7a4a7e7e9f10c7aaf6cd4b284c2fccbd5450b4 Mon Sep 17 00:00:00 2001 From: sahil Date: Thu, 21 Jul 2022 00:12:24 +0530 Subject: [PATCH 15/42] change keyboard type --- src/pages/EnablePayments/AdditionalDetailsStep.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/EnablePayments/AdditionalDetailsStep.js b/src/pages/EnablePayments/AdditionalDetailsStep.js index 2f3937ce1745..71daa5f13f72 100644 --- a/src/pages/EnablePayments/AdditionalDetailsStep.js +++ b/src/pages/EnablePayments/AdditionalDetailsStep.js @@ -359,6 +359,7 @@ class AdditionalDetailsStep extends React.Component { this.clearErrorAndSetValue('phoneNumber', val)} value={this.props.walletAdditionalDetailsDraft.phoneNumber || ''} From 5c63cedda906407dfbc5f8eb549cbe1dbaa5b31b Mon Sep 17 00:00:00 2001 From: Yevhenii Voloshchak Date: Fri, 22 Jul 2022 09:24:19 +0300 Subject: [PATCH 16/42] Cleanup --- src/components/EmojiPicker/EmojiPickerMenu/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index f025d6545415..a1101deda9e6 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/src/components/EmojiPicker/EmojiPickerMenu/index.js @@ -225,8 +225,7 @@ class EmojiPickerMenu extends Component { * @param {String} arrowKey */ highlightAdjacentEmoji(arrowKey) { - // Do nothing if there are no emojis to highlight - if (!this.state.filteredEmojis.length) { + if (this.state.filteredEmojis.length === 0) { return; } From 3a3a820fa334ee7be4103e122410676e9fe4f427 Mon Sep 17 00:00:00 2001 From: karim <108357004+Karim-30@users.noreply.github.com> Date: Fri, 22 Jul 2022 16:24:16 +0200 Subject: [PATCH 17/42] fix rtl typo --- src/styles/utilities/writingDirection.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/utilities/writingDirection.js b/src/styles/utilities/writingDirection.js index df1e420dc48c..2995dd5c1e41 100644 --- a/src/styles/utilities/writingDirection.js +++ b/src/styles/utilities/writingDirection.js @@ -6,7 +6,7 @@ */ export default { rtl: { - writingDirection: 'ltr', + writingDirection: 'rtl', }, ltr: { writingDirection: 'ltr', From 7800d79cd1c492207e1a2a10367522ae5d5936c6 Mon Sep 17 00:00:00 2001 From: karim <108357004+Karim-30@users.noreply.github.com> Date: Sat, 23 Jul 2022 17:25:55 +0200 Subject: [PATCH 18/42] fix comments typo --- src/styles/StyleUtils.js | 3 ++- src/styles/utilities/writingDirection.js | 3 +-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 8cb80c28c380..94bfb1188d90 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -449,7 +449,8 @@ function getPaddingLeft(paddingLeft) { } /** - * Convert RTL text to a LTR text on Android devices useing the Unicode controls, see : https://www.w3.org/International/questions/qa-bidi-unicode-controls + * Android only - convert RTL text to a LTR text using Unicode controls. + * https://www.w3.org/International/questions/qa-bidi-unicode-controls * @param {String} text * @returns {String} */ diff --git a/src/styles/utilities/writingDirection.js b/src/styles/utilities/writingDirection.js index 2995dd5c1e41..d9c630c86912 100644 --- a/src/styles/utilities/writingDirection.js +++ b/src/styles/utilities/writingDirection.js @@ -1,7 +1,6 @@ /** * Writing direction utility styles. - * note: writingDirection not available for Android, for Android you can use the Unicode. - * + * Note: writingDirection isn't supported on Android. Unicode controls are being used for Android * https://www.w3.org/International/questions/qa-bidi-unicode-controls */ export default { From 3d101d2e58ba1ceeba5ffd2f322d62f8f582d769 Mon Sep 17 00:00:00 2001 From: Maria D'Costa Date: Mon, 25 Jul 2022 15:00:31 +0400 Subject: [PATCH 19/42] Update copy for personal bank account success screen --- src/languages/en.js | 3 ++- src/languages/es.js | 3 ++- src/libs/actions/BankAccounts.js | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index fa86c37a450d..204efa8fb27d 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -393,7 +393,6 @@ export default { notOwnerOfFund: 'There was an error setting this card as your default payment method.', setDefaultFailure: 'Something went wrong. Please chat with Concierge for further assistance.', }, - addBankAccountSuccess: 'Your bank account has successfully been added.', addBankAccountFailure: 'And unexpected error occurred while trying to add your bank account. Please try again.', }, transferAmountPage: { @@ -569,6 +568,8 @@ export default { enterPassword: 'Enter Expensify password', alreadyAdded: 'This account has already been added.', chooseAccountLabel: 'Account', + successTitle: 'Personal bank account added!', + successMessage: 'Congrats, your bank account is set up and ready to receive reimbursements.', }, attachmentView: { unknownFilename: 'Unknown filename', diff --git a/src/languages/es.js b/src/languages/es.js index 934df4f03e1c..ea065baa7f43 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -393,7 +393,6 @@ export default { notOwnerOfFund: 'Ha ocurrido un error al establecer esta tarjeta de crédito como tu método de pago predeterminado.', setDefaultFailure: 'No se ha podido configurar el método de pago.', }, - addBankAccountSuccess: 'Su cuenta bancaria ha sido añadida con éxito.', addBankAccountFailure: 'Y ocurrió un error inesperado al intentar agregar su cuenta bancaria. Inténtalo de nuevo.', }, transferAmountPage: { @@ -569,6 +568,8 @@ export default { enterPassword: 'Escribe tu contraseña de Expensify', alreadyAdded: 'Esta cuenta ya ha sido agregada.', chooseAccountLabel: 'Cuenta', + successTitle: '¡Cuenta bancaria personal añadida!', + successMessage: 'Enhorabuena, tu cuenta bancaria está lista para recibir reembolsos.', }, attachmentView: { unknownFilename: 'Archivo desconocido', diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js index 1c9ed327a1d1..8fb86b3c25dd 100644 --- a/src/libs/actions/BankAccounts.js +++ b/src/libs/actions/BankAccounts.js @@ -85,7 +85,7 @@ function addPersonalBankAccount(account, password) { value: { loading: false, error: '', - success: Localize.translateLocal('paymentsPage.addBankAccountSuccess'), + shouldShowSuccess: true, }, }, ], From 09236bd0dae79fe4f4ce38bcd551e1de16a9d318 Mon Sep 17 00:00:00 2001 From: Maria D'Costa Date: Mon, 25 Jul 2022 15:01:40 +0400 Subject: [PATCH 20/42] Use shouldShowSuccess --- src/pages/AddPersonalBankAccountPage.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js index 6d6586fa1f0e..004986220f55 100644 --- a/src/pages/AddPersonalBankAccountPage.js +++ b/src/pages/AddPersonalBankAccountPage.js @@ -28,7 +28,7 @@ const propTypes = { ...withLocalizePropTypes, personalBankAccount: PropTypes.shape({ error: PropTypes.string, - success: PropTypes.string, + shouldShowSuccess: PropTypes.bool, loading: PropTypes.bool, }), }; @@ -36,7 +36,7 @@ const propTypes = { const defaultProps = { personalBankAccount: { error: '', - success: '', + success: false, loading: false, }, }; @@ -118,7 +118,7 @@ class AddPersonalBankAccountPage extends React.Component { } render() { - const success = lodashGet(this.props, 'personalBankAccount.success', ''); + const shouldShowSuccess = lodashGet(this.props, 'personalBankAccount.shouldShowSuccess', false); const error = lodashGet(this.props, 'personalBankAccount.error', ''); const loading = lodashGet(this.props, 'personalBankAccount.loading', false); @@ -130,7 +130,7 @@ class AddPersonalBankAccountPage extends React.Component { shouldShowBackButton onBackButtonPress={Navigation.goBack} /> - {success ? ( + {shouldShowSuccess ? ( <> {success} From 672f90df4a503230937f8e705a4fec8491bfdf56 Mon Sep 17 00:00:00 2001 From: Maria D'Costa Date: Mon, 25 Jul 2022 15:15:00 +0400 Subject: [PATCH 21/42] Add styling for success screen --- src/pages/AddPersonalBankAccountPage.js | 31 ++++++++++++++++++++----- 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js index 004986220f55..e5e508f49ab3 100644 --- a/src/pages/AddPersonalBankAccountPage.js +++ b/src/pages/AddPersonalBankAccountPage.js @@ -15,7 +15,11 @@ import compose from '../libs/compose'; import ONYXKEYS from '../ONYXKEYS'; import Text from '../components/Text'; import styles from '../styles/styles'; +import * as Illustrations from '../components/Icon/Illustrations'; +import Icon from '../components/Icon'; +import defaultTheme from '../styles/themes/default'; import Button from '../components/Button'; +import FixedFooter from '../components/FixedFooter'; import FormScrollView from '../components/FormScrollView'; import FormAlertWithSubmitButton from '../components/FormAlertWithSubmitButton'; import FormHelper from '../libs/FormHelper'; @@ -132,16 +136,31 @@ class AddPersonalBankAccountPage extends React.Component { /> {shouldShowSuccess ? ( <> - - {success} - - + + + + + {this.props.translate('addPersonalBankAccountPage.successTitle')} + + + {this.props.translate('addPersonalBankAccountPage.successMessage')} + + + +