From d17214de01e757aa586dd4c55de24a886c86d4bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Mon, 15 Jan 2024 17:33:19 +0100 Subject: [PATCH 1/3] replaced referall cta with new component --- .../ReferralProgramCTA.tsx} | 20 +++++---- src/pages/SearchPage/SearchPageFooter.tsx | 44 +------------------ ...yForRefactorRequestParticipantsSelector.js | 4 +- .../MoneyRequestParticipantsSelector.js | 4 +- 4 files changed, 18 insertions(+), 54 deletions(-) rename src/{pages/iou/MoneyRequestReferralProgramCTA.tsx => components/ReferralProgramCTA.tsx} (71%) diff --git a/src/pages/iou/MoneyRequestReferralProgramCTA.tsx b/src/components/ReferralProgramCTA.tsx similarity index 71% rename from src/pages/iou/MoneyRequestReferralProgramCTA.tsx rename to src/components/ReferralProgramCTA.tsx index 31394e1bd0e1..e77d30da8487 100644 --- a/src/pages/iou/MoneyRequestReferralProgramCTA.tsx +++ b/src/components/ReferralProgramCTA.tsx @@ -1,20 +1,23 @@ import React from 'react'; -import Icon from '@components/Icon'; -import {Info} from '@components/Icon/Expensicons'; -import {PressableWithoutFeedback} from '@components/Pressable'; -import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import Navigation from '@src/libs/Navigation/Navigation'; import ROUTES from '@src/ROUTES'; +import Icon from './Icon'; +import {Info} from './Icon/Expensicons'; +import {PressableWithoutFeedback} from './Pressable'; +import Text from './Text'; -type MoneyRequestReferralProgramCTAProps = { - referralContentType: typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SEND_MONEY | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.MONEY_REQUEST; +type ReferralProgramCTAProps = { + referralContentType: + | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SEND_MONEY + | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.MONEY_REQUEST + | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND; }; -function MoneyRequestReferralProgramCTA({referralContentType}: MoneyRequestReferralProgramCTAProps) { +function ReferralProgramCTA({referralContentType}: ReferralProgramCTAProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const theme = useTheme(); @@ -41,9 +44,10 @@ function MoneyRequestReferralProgramCTA({referralContentType}: MoneyRequestRefer src={Info} height={20} width={20} + fill={theme.icon} /> ); } -export default MoneyRequestReferralProgramCTA; +export default ReferralProgramCTA; diff --git a/src/pages/SearchPage/SearchPageFooter.tsx b/src/pages/SearchPage/SearchPageFooter.tsx index 69429962869b..e0ef67ad9ec3 100644 --- a/src/pages/SearchPage/SearchPageFooter.tsx +++ b/src/pages/SearchPage/SearchPageFooter.tsx @@ -1,55 +1,15 @@ import React from 'react'; import {View} from 'react-native'; -import Icon from '@components/Icon'; -import {Info} from '@components/Icon/Expensicons'; -import {PressableWithoutFeedback} from '@components/Pressable'; -import Text from '@components/Text'; -import useLocalize from '@hooks/useLocalize'; -import useTheme from '@hooks/useTheme'; +import ReferralProgramCTA from '@components/ReferralProgramCTA'; import useThemeStyles from '@hooks/useThemeStyles'; -import Navigation from '@libs/Navigation/Navigation'; import CONST from '@src/CONST'; -import ROUTES from '@src/ROUTES'; function SearchPageFooter() { const themeStyles = useThemeStyles(); - const theme = useTheme(); - const {translate} = useLocalize(); return ( - { - Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND)); - }} - style={[ - themeStyles.p5, - themeStyles.w100, - themeStyles.br2, - themeStyles.highlightBG, - themeStyles.flexRow, - themeStyles.justifyContentBetween, - themeStyles.alignItemsCenter, - {gap: 10}, - ]} - accessibilityLabel="referral" - role={CONST.ACCESSIBILITY_ROLE.BUTTON} - > - - {translate(`referralProgram.${CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND}.buttonText1`)} - - {translate(`referralProgram.${CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND}.buttonText2`)} - - - - + ); } diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js index 68e9f68a2bc5..f8c412993bab 100644 --- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js +++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js @@ -8,6 +8,7 @@ import Button from '@components/Button'; import FormHelpMessage from '@components/FormHelpMessage'; import {usePersonalDetails} from '@components/OnyxProvider'; import {PressableWithFeedback} from '@components/Pressable'; +import ReferralProgramCTA from '@components/ReferralProgramCTA'; import SelectCircle from '@components/SelectCircle'; import SelectionList from '@components/SelectionList'; import useLocalize from '@hooks/useLocalize'; @@ -16,7 +17,6 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as Report from '@libs/actions/Report'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as OptionsListUtils from '@libs/OptionsListUtils'; -import MoneyRequestReferralProgramCTA from '@pages/iou/MoneyRequestReferralProgramCTA'; import reportPropTypes from '@pages/reportPropTypes'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -266,7 +266,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({ () => ( - + {shouldShowSplitBillErrorMessage && ( diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js index 9edede770233..9567b17ecdf5 100755 --- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js +++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js @@ -8,6 +8,7 @@ import Button from '@components/Button'; import FormHelpMessage from '@components/FormHelpMessage'; import {usePersonalDetails} from '@components/OnyxProvider'; import {PressableWithFeedback} from '@components/Pressable'; +import ReferralProgramCTA from '@components/ReferralProgramCTA'; import SelectCircle from '@components/SelectCircle'; import SelectionList from '@components/SelectionList'; import useLocalize from '@hooks/useLocalize'; @@ -16,7 +17,6 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as Report from '@libs/actions/Report'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as OptionsListUtils from '@libs/OptionsListUtils'; -import MoneyRequestReferralProgramCTA from '@pages/iou/MoneyRequestReferralProgramCTA'; import reportPropTypes from '@pages/reportPropTypes'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -285,7 +285,7 @@ function MoneyRequestParticipantsSelector({ () => ( - + {shouldShowSplitBillErrorMessage && ( From a4ecc58d3e14f96cd64fe622d528bf598e0fe6a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Mon, 15 Jan 2024 17:50:06 +0100 Subject: [PATCH 2/3] adding ReferralCTA to OptionsSelector --- .../OptionsSelector/BaseOptionsSelector.js | 35 ++----------------- src/components/ReferralProgramCTA.tsx | 3 +- 2 files changed, 4 insertions(+), 34 deletions(-) diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 197829bb1ea9..ba4a0010e8ae 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -11,6 +11,7 @@ import Icon from '@components/Icon'; import {Info} from '@components/Icon/Expensicons'; import OptionsList from '@components/OptionsList'; import {PressableWithoutFeedback} from '@components/Pressable'; +import ReferralProgramCTA from '@components/ReferralProgramCTA'; import ShowMoreButton from '@components/ShowMoreButton'; import Text from '@components/Text'; import TextInput from '@components/TextInput'; @@ -667,39 +668,7 @@ class BaseOptionsSelector extends Component { {this.props.shouldShowReferralCTA && ( - { - Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(this.props.referralContentType)); - }} - style={[ - this.props.themeStyles.p5, - this.props.themeStyles.w100, - this.props.themeStyles.br2, - this.props.themeStyles.highlightBG, - this.props.themeStyles.flexRow, - this.props.themeStyles.justifyContentBetween, - this.props.themeStyles.alignItemsCenter, - {gap: 10}, - ]} - accessibilityLabel="referral" - role={CONST.ACCESSIBILITY_ROLE.BUTTON} - > - - {this.props.translate(`referralProgram.${this.props.referralContentType}.buttonText1`)} - - {this.props.translate(`referralProgram.${this.props.referralContentType}.buttonText2`)} - - - - + )} diff --git a/src/components/ReferralProgramCTA.tsx b/src/components/ReferralProgramCTA.tsx index e77d30da8487..473d5cdbed08 100644 --- a/src/components/ReferralProgramCTA.tsx +++ b/src/components/ReferralProgramCTA.tsx @@ -12,8 +12,9 @@ import Text from './Text'; type ReferralProgramCTAProps = { referralContentType: - | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SEND_MONEY | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.MONEY_REQUEST + | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.START_CHAT + | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SEND_MONEY | typeof CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND; }; From 0ea199fcb5e4696b52f5187a622f0500d31a057f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Mon, 15 Jan 2024 18:10:04 +0100 Subject: [PATCH 3/3] removed unnecessary imports --- src/components/OptionsSelector/BaseOptionsSelector.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index ba4a0010e8ae..412aeedcf965 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -7,13 +7,9 @@ import ArrowKeyFocusManager from '@components/ArrowKeyFocusManager'; import Button from '@components/Button'; import FixedFooter from '@components/FixedFooter'; import FormHelpMessage from '@components/FormHelpMessage'; -import Icon from '@components/Icon'; -import {Info} from '@components/Icon/Expensicons'; import OptionsList from '@components/OptionsList'; -import {PressableWithoutFeedback} from '@components/Pressable'; import ReferralProgramCTA from '@components/ReferralProgramCTA'; import ShowMoreButton from '@components/ShowMoreButton'; -import Text from '@components/Text'; import TextInput from '@components/TextInput'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withNavigationFocus from '@components/withNavigationFocus'; @@ -22,10 +18,8 @@ import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeSt import compose from '@libs/compose'; import getPlatform from '@libs/getPlatform'; import KeyboardShortcut from '@libs/KeyboardShortcut'; -import Navigation from '@libs/Navigation/Navigation'; import setSelection from '@libs/setSelection'; import CONST from '@src/CONST'; -import ROUTES from '@src/ROUTES'; import {defaultProps as optionsSelectorDefaultProps, propTypes as optionsSelectorPropTypes} from './optionsSelectorPropTypes'; const propTypes = {