From a0d616cb38e3b4cf3a9ae3db19501bb8663cf6be Mon Sep 17 00:00:00 2001 From: Artem Makushov Date: Wed, 25 Oct 2023 19:49:14 +0200 Subject: [PATCH 01/16] refferal page basic view and structure --- .../product-illustrations/payment-hands.svg | 317 ++++++++++++++++++ src/CONST.ts | 1 + src/ROUTES.ts | 1 + src/components/Icon/Illustrations.js | 2 + .../OptionsSelector/BaseOptionsSelector.js | 37 ++ .../AppNavigator/ModalStackNavigators.js | 1 + src/libs/Navigation/linkingConfig.js | 1 + src/pages/iou/RefferalDetailsPage.js | 62 ++++ .../MoneyRequestParticipantsSelector.js | 10 + 9 files changed, 432 insertions(+) create mode 100644 assets/images/product-illustrations/payment-hands.svg create mode 100644 src/pages/iou/RefferalDetailsPage.js diff --git a/assets/images/product-illustrations/payment-hands.svg b/assets/images/product-illustrations/payment-hands.svg new file mode 100644 index 000000000000..7d64d8572b30 --- /dev/null +++ b/assets/images/product-illustrations/payment-hands.svg @@ -0,0 +1,317 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/CONST.ts b/src/CONST.ts index bc74cbe77717..03a21b398637 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -446,6 +446,7 @@ const CONST = { EXPENSIFY_URL: 'https://www.expensify.com', BANK_ACCOUNT_PERSONAL_DOCUMENTATION_INFO_URL: 'https://community.expensify.com/discussion/6983/faq-why-do-i-need-to-provide-personal-documentation-when-setting-up-updating-my-bank-account', + REFFERAL_PROGRAM: 'https://help.expensify.com/articles/new-expensify/getting-started/Referral-Program#gsc.tab=0', PERSONAL_DATA_PROTECTION_INFO_URL: 'https://community.expensify.com/discussion/5677/deep-dive-security-how-expensify-protects-your-information', ONFIDO_FACIAL_SCAN_POLICY_URL: 'https://onfido.com/facial-scan-policy-and-release/', ONFIDO_PRIVACY_POLICY_URL: 'https://onfido.com/privacy/', diff --git a/src/ROUTES.ts b/src/ROUTES.ts index b5ceb8fc557d..18005617dffb 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -285,6 +285,7 @@ export default { }, MONEY_REQUEST_MANUAL_TAB: ':iouType/new/:reportID?/manual', MONEY_REQUEST_SCAN_TAB: ':iouType/new/:reportID?/scan', + REFFERAL_DETAILS_PAGE: '/refferal', IOU_REQUEST: 'request/new', IOU_SEND: 'send/new', diff --git a/src/components/Icon/Illustrations.js b/src/components/Icon/Illustrations.js index 0e39872a3da6..89675daf7cb6 100644 --- a/src/components/Icon/Illustrations.js +++ b/src/components/Icon/Illustrations.js @@ -16,6 +16,7 @@ import JewelBoxYellow from '../../../assets/images/product-illustrations/jewel-b import MagicCode from '../../../assets/images/product-illustrations/magic-code.svg'; import MoneyEnvelopeBlue from '../../../assets/images/product-illustrations/money-envelope--blue.svg'; import MoneyMousePink from '../../../assets/images/product-illustrations/money-mouse--pink.svg'; +import PaymentHands from '../../../assets/images/product-illustrations/payment-hands.svg'; import ReceiptsSearchYellow from '../../../assets/images/product-illustrations/receipts-search--yellow.svg'; import ReceiptYellow from '../../../assets/images/product-illustrations/receipt--yellow.svg'; import RocketBlue from '../../../assets/images/product-illustrations/rocket--blue.svg'; @@ -61,6 +62,7 @@ export { InvoiceOrange, JewelBoxBlue, JewelBoxGreen, + PaymentHands, JewelBoxPink, JewelBoxYellow, MagicCode, diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 4ffddd700359..df5663db5a8c 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -3,6 +3,7 @@ import lodashGet from 'lodash/get'; import React, {Component} from 'react'; import PropTypes from 'prop-types'; import {ScrollView, View} from 'react-native'; +import Text from '../Text'; import Button from '../Button'; import FixedFooter from '../FixedFooter'; import OptionsList from '../OptionsList'; @@ -18,6 +19,13 @@ import setSelection from '../../libs/setSelection'; import compose from '../../libs/compose'; import getPlatform from '../../libs/getPlatform'; import FormHelpMessage from '../FormHelpMessage'; +import {PressableWithoutFeedback} from '../Pressable'; +import colors from '../../styles/colors'; +import {Info} from '../Icon/Expensicons'; +import Icon from '../Icon'; +import MenuItemWithTopDescription from '../MenuItemWithTopDescription'; +import Navigation from '../../libs/Navigation/Navigation'; +import ROUTES from '../../ROUTES'; const propTypes = { /** padding bottom style of safe area */ @@ -53,6 +61,7 @@ class BaseOptionsSelector extends Component { this.updateFocusedIndex = this.updateFocusedIndex.bind(this); this.scrollToIndex = this.scrollToIndex.bind(this); this.selectRow = this.selectRow.bind(this); + this.handleRefferalModal = this.handleRefferalModal.bind(this); this.selectFocusedOption = this.selectFocusedOption.bind(this); this.addToSelection = this.addToSelection.bind(this); this.updateSearchValue = this.updateSearchValue.bind(this); @@ -65,6 +74,7 @@ class BaseOptionsSelector extends Component { allOptions, focusedIndex, shouldDisableRowSelection: false, + shouldShowRefferalModal: false, errorMessage: '', }; } @@ -178,6 +188,10 @@ class BaseOptionsSelector extends Component { this.props.onChangeText(value); } + handleRefferalModal() { + this.setState({shouldShowRefferalModal: !this.state.shouldShowRefferalModal}); + } + subscribeToKeyboardShortcut() { const enterConfig = CONST.KEYBOARD_SHORTCUTS.ENTER; this.unsubscribeEnter = KeyboardShortcut.subscribe( @@ -492,6 +506,29 @@ class BaseOptionsSelector extends Component { )} + {this.props.shouldShowCTA && ( + + { + Navigation.navigate(ROUTES.REFFERAL_DETAILS_PAGE); + Navigation.setParams({data: this.props.refferalProgramText}); + }} + style={[styles.p5, styles.w100, styles.br2, styles.highlightBG, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, {gap: 10}]} + accessibilityLabel="test" + accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} + > + + {this.props.refferalProgramText.buttonText}, get $250 + + + + + )} + {shouldShowFooter && ( {shouldShowDefaultConfirmButton && ( diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index cfc8f815e4fe..587bc62af54c 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -41,6 +41,7 @@ const MoneyRequestModalStackNavigator = createModalStackNavigator({ Money_Request_Description: () => require('../../../pages/iou/MoneyRequestDescriptionPage').default, Money_Request_Category: () => require('../../../pages/iou/MoneyRequestCategoryPage').default, Money_Request_Tag: () => require('../../../pages/iou/MoneyRequestTagPage').default, + Refferal_Details: () => require('../../../pages/iou/RefferalDetailsPage').default, Money_Request_Merchant: () => require('../../../pages/iou/MoneyRequestMerchantPage').default, IOU_Send_Add_Bank_Account: () => require('../../../pages/AddPersonalBankAccountPage').default, IOU_Send_Add_Debit_Card: () => require('../../../pages/settings/Wallet/AddDebitCardPage').default, diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 79609f551ee4..b2d0e7b6d861 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -375,6 +375,7 @@ export default { 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, + Refferal_Details: ROUTES.REFFERAL_DETAILS_PAGE, }, }, SplitDetails: { diff --git a/src/pages/iou/RefferalDetailsPage.js b/src/pages/iou/RefferalDetailsPage.js new file mode 100644 index 000000000000..c2ce88a14152 --- /dev/null +++ b/src/pages/iou/RefferalDetailsPage.js @@ -0,0 +1,62 @@ +import React from 'react'; +import _ from 'underscore'; +import {View} from 'react-native'; +import Navigation from '../../libs/Navigation/Navigation'; +import useLocalize from '../../hooks/useLocalize'; +import ScreenWrapper from '../../components/ScreenWrapper'; +import HeaderWithBackButton from '../../components/HeaderWithBackButton'; +import Text from '../../components/Text'; +import {PaymentHands} from '../../components/Icon/Illustrations'; +import CONST from '../../CONST'; +import TextLink from '../../components/TextLink'; +import styles from '../../styles/styles'; +import Button from '../../components/Button'; +import FixedFooter from '../../components/FixedFooter'; +import Icon from '../../components/Icon'; + +function RefferalDetailsPage({route}) { + const {translate} = useLocalize(); + const {data} = route.params; + return ( + + Navigation.goBack()} + /> + + + {data.modalHeader} + + {data.modalBody.description} + {data.modalBody.options.map((option) => ( + {option} + ))} + {data.modalBody.additionalInformation} + + {translate('requestorStep.learnMore')} + + +