From 6269ba15ab1760caf7a3b0a91c2ad8ed0751fce2 Mon Sep 17 00:00:00 2001 From: Rocio Perez-Cano Date: Mon, 15 Jan 2024 20:20:30 +0100 Subject: [PATCH] Merge pull request #34517 from lukemorawski/34501-referral_banner_icon_fixes referral banner icon fixes (cherry picked from commit bfbe935ee09e68ebeb65d2945f54fb49f339d162) --- .../OptionsSelector/BaseOptionsSelector.js | 41 +---------------- .../ReferralProgramCTA.tsx} | 21 +++++---- src/pages/SearchPage/SearchPageFooter.tsx | 44 +------------------ ...yForRefactorRequestParticipantsSelector.js | 4 +- .../MoneyRequestParticipantsSelector.js | 4 +- 5 files changed, 21 insertions(+), 93 deletions(-) rename src/{pages/iou/MoneyRequestReferralProgramCTA.tsx => components/ReferralProgramCTA.tsx} (68%) diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 197829bb1ea9..412aeedcf965 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -7,12 +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'; @@ -21,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 = { @@ -667,39 +662,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/pages/iou/MoneyRequestReferralProgramCTA.tsx b/src/components/ReferralProgramCTA.tsx similarity index 68% rename from src/pages/iou/MoneyRequestReferralProgramCTA.tsx rename to src/components/ReferralProgramCTA.tsx index 31394e1bd0e1..473d5cdbed08 100644 --- a/src/pages/iou/MoneyRequestReferralProgramCTA.tsx +++ b/src/components/ReferralProgramCTA.tsx @@ -1,20 +1,24 @@ 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.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; }; -function MoneyRequestReferralProgramCTA({referralContentType}: MoneyRequestReferralProgramCTAProps) { +function ReferralProgramCTA({referralContentType}: ReferralProgramCTAProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const theme = useTheme(); @@ -41,9 +45,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 && (